first commit

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults, not ie 11",
+        "corejs": "3.21"
+      }
+    ]
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+bundle.js

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "babel",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error"
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "info"
+        ]
+      }
+    ],
+    "prefer-promise-reject-errors": "error",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "any",
+        "ignoreReadBeforeAssign": false
+      }
+    ],
+    "no-var": "error",
+    "no-unused-vars": "error"
+  }
+}

.gitignore

@@ -0,0 +1,74 @@
+# Node modules
+node_modules
+
+bundle.js
+bundle.js.LICENSE.txt
+server/bundle.js
+server/bundle.js.LICENSE.txt
+
+
+# Coverage
+coverage
+
+# Output folders
+build
+compiled
+.nyc_output
+
+# Cachses
+.awcache
+.rpt2_cache
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# VSCode
+.vscode
+
+# Cloud9
+.c9revisions
+.c9
+
+# Intelij
+.idea
+cmake-build-*/
+
+# Sublime text
+*.iws
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+*.lnk
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+$RECYCLE.BIN/
+[Dd]esktop.ini
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp

README.md

@@ -0,0 +1,33 @@
+# motorcortex-clip-starter
+
+## Purpose
+
+This repository is a starter boilerplate for creating MotorCortex Clips with DCode. Do not use this repo directly. Instead, use it from the **[Donkeyclip CLI](https://github.com/donkeyclip/cli)**
+
+## Structure and Contents
+
+It includes:
+
+- a pre-configured webpack so you don't have to care about setting up your project
+- pre-configured eslint and babel
+- a "clip" folder in order for you to use to define your Clip and Incidents. The folder
+  contains the `clip.js` file which is just a starting point for your Clip.
+- a "server" folder that is there just for the needs of viewing, debugging and creating
+  your Clip through DCode.
+
+## How to use
+
+Once you've created your new Clip you have the ability to publish it through the [donkeyclip](https://donkeyclip.com) page. You can then embed your clip in any site you want!.
+
+## Commands
+
+- `npm run build`: builds the demo
+- `npm start`: builds and starts the demo
+
+## Have fun!!!
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+[<img src="https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg" width=250></img>](https://donkeyclip.com)

clip/clip.css

@@ -0,0 +1,175 @@
+#root {
+  height: 100%;
+  background-color: rgb(36, 34, 34);
+  color: #fff;
+  font-family: 'Roboto', sans-serif;
+}
+
+.video{
+  width: 80%;
+  height: 52%;
+  background-color: #c0c0c0;
+  position: absolute;
+  left: 10%;
+  top: 2%;
+  border-radius: 4px;
+  text-align: center;
+  color:rgb(36, 34, 34);
+  display: flex;
+  flex-direction: row;
+}
+
+.wrapper{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+}
+
+.animated-box{
+  width:100px;
+  height: 100px;
+  background-color: #635A8D;
+  color: #c0c0c0;
+  border-radius: 4px;
+}
+
+.animated-class{
+  margin: 5px;
+}
+
+.animated-container{
+  width:200px;
+  height: 200px;
+  background-color: #635A8D;
+  color: #c0c0c0;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+
+.animation{
+  width: 70px;
+  height: 70px;
+  background-color: #cbaadf;
+  border-radius: 2px;
+  opacity: 0;
+}
+
+.animated-container .animation{
+  position: absolute;
+  top:35%;
+}
+
+.audio-player-container{
+  width: 80%;
+}
+
+.audio-progress {
+  height: .5rem;
+  position: absolute;
+  left: 10%;
+  bottom: 7%;
+  width: 80%;
+  height: 10px;
+  background-color: #c0c0c0;
+  opacity: 0;
+}
+.audio-progress .bar {
+  height: 100%;
+  background-color: #635A8D;
+}
+
+#audio-progress-handle {
+  display: block;
+  position:absolute;
+  z-index: 1;
+  margin-top: -5px;
+  margin-left: -10px;
+  left: 30%;
+  width: 10px;
+  height: 10px;
+  border: 4px solid #D3D5DF;
+  border-top-color: #D3D5DF;
+  border-right-color: #D3D5DF;
+  transform: rotate(45deg);
+  border-radius: 100%;
+  background-color: #fff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+  cursor:pointer;
+}
+
+.box-container{
+  position: absolute;
+  left: 10%;
+  width: 80%;
+  bottom: 11%;
+}
+
+.shadow{
+  position: absolute;
+  left: 10%;
+  width: 0%;
+  bottom: 10%;
+  height: 165px;
+  background-color: rgb(36, 34, 34,0.3);
+  /*filter: blur(0.2rem); */
+}
+
+.box{
+  position: absolute;
+  opacity: 0;
+  width: 5px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  color: #d8d5d5;
+  overflow: hidden;
+}
+.box:nth-child(1){
+  bottom:0px;
+  margin-left: 0px;
+  width: 30%;
+  height: 80px;
+  background-color: #426BA2;
+  justify-content: center;
+}
+.box:nth-child(2){
+  bottom:0px;
+  margin-left: 35%;
+  width:20%;
+  height: 80px;
+  background-color: #426BA2;
+  justify-content: center;
+}
+.box:nth-child(3){
+  bottom:0px;
+  margin-left: 60%;
+  width: 40%;
+  height: 160px;
+  background-color: #415bb1;
+  display: flex;
+  flex-direction: column;
+  gap: 18%;
+}
+
+.content{
+  opacity: 0;
+}
+
+.box .animated-class{
+  opacity: 0;
+}
+
+.incident-type{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  opacity: 0;
+}
+