feat: add venue

donkeyclip · Feb 6, 2023 · 1c8d103 · 1c8d103
1 parent 22b737b
commit 1c8d103
Show file tree

Hide file tree

Showing 14 changed files with 262 additions and 73 deletions.
diff --git a/clip/clip.html b/clip/clip.html
@@ -6,4 +6,5 @@
     <div class="scene-5 scene"></div>
     <div class="scene-6 scene"></div>
     <div class="scene-7 scene"></div>
+    <div class="scene-8 scene"></div>
 </div>
diff --git a/clip/clip.js b/clip/clip.js
@@ -9,6 +9,7 @@ import scene4 from "./scenes/scene-4";
 import scene5 from "./scenes/scene-5";
 import scene6 from "./scenes/scene-6";
 import scene7 from "./scenes/scene-7";
+import scene8 from "./scenes/scene-8";
 import initParamsValidationRules from "./initParamsValidationRules";
 import { Opacity, Scale, Top } from "./library/incidents";
 
@@ -37,5 +38,6 @@ clip.addIncident(scene4, 0);
 clip.addIncident(scene5, 0);
 clip.addIncident(scene6, 0);
 clip.addIncident(scene7, 0);
+clip.addIncident(scene8, 0);
 clip.addIncident(Opacity(1, ".scene", 300), 1);
 clip.addIncident(Scale(1, ".scene-1", 300), 1);
diff --git a/clip/initParams.js b/clip/initParams.js
@@ -6,6 +6,12 @@ export default [
       color: "#0000ff",
       title: "Tech Thess",
       subTitle: "Greece, Thessaloniki Sep 20 - 21 Sep 2022",
+      venue: {
+        img: "https://i.ibb.co/NWmRfGD/venue.jpg",
+        address: "Martiou 25 & Paralia",
+        building: "Thessaloniki Concert Hall M2",
+        hall: "Emilios Riadis Hall",
+      },
       sponsors: [
         "https://i.ibb.co/Xj04CGH/git.png",
         "https://i.ibb.co/M7fvWY1/intel.png",

diff --git a/clip/initParamsValidationRules.js b/clip/initParamsValidationRules.js
@@ -26,6 +26,15 @@ export default {
       type: "string",
     },
   },
+  venue: {
+    type: "object",
+    props: {
+      img: "string",
+      address: "string",
+      building: "string",
+      hall: "string",
+    },
+  },
   speekers: {
     label: "Speekers",
     type: "array",

diff --git a/clip/scenes/scene-2/index.js b/clip/scenes/scene-2/index.js
@@ -26,12 +26,9 @@ clip.addIncident(
   1800
 );
 clip.addIncident(Top("-100%", ".root", 1500, "easeInOutCubic"), 5000);
-clip.addIncident(
-  Opacity(0, ".sponsor-title,.logo", 1, "@stagger(0, 1000)"),
-  6500
-);
+clip.addIncident(Opacity(0, ".sponsor-title,.logo", 1, "@stagger(0, 1)"), 6500);
 clip.addIncident(Top("95%", ".sponsor-wrapper", 1), 6501);
 
-clip.addIncident(Opacity(1, ".logo", 800, "@stagger(0, 1000)"), 14000);
+clip.addIncident(Opacity(1, ".logo", 800, "@stagger(0, 1000)"), 20000);
 
 export default clip;
diff --git a/clip/scenes/scene-7/index.css b/clip/scenes/scene-7/index.css
@@ -1,5 +1,6 @@
 * {
     --color: {{ initParams.color }};
+    --venue-image: url({{initParams.venue.img}})
     /* 
       This is an example of how to use MotorCortex's init params in css, using a css variable
         if you are unfamiliar with css variables here is a quick guide https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage
@@ -14,42 +15,80 @@
   height: 100%;
   width: 100%;
   position: absolute;
+  font-size: 60px;
+  font-weight: 900;
 }
 
-.text{
-  font-size: 100px;
-    font-weight: 900;
-    position: absolute;
-    text-transform: uppercase;
-    top: 100%;
+.venue-image-wrapper{
+  position: absolute;
+  width: 850px;
+  height: 850px;
+  filter: drop-shadow(1px 0 15px #00000031);
+  background-color: var(--color);
+  border-radius: 100%;
+  overflow: hidden;
+  left:-860px
 }
 
-.text-wrapper{
-  overflow: hidden;
-    position: absolute;
-    top: 40%;
-    width: 1184px;
-    height: 100px;
+.venue-image{
+  width: 850px;
+  height: 850px;
+  background: var(--venue-image);
+  border-radius: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
-.date-title,.link{
-  font-size: 40px;
-  font-weight: 700;
+
+.hall-wrapper{
+  font-weight: 300;
+  font-size: 44px;
+}
+
+.hall-wrapper,.building-wrapper{
   position: relative;
+  right: -100%;
+}
+
+.address-wrapper{
+  background: var(--color);
+  color: #fff;
+  font-size: 40px;
+  left: 200px;
+  padding: 40px;
+  position: absolute;
+  width: 300px;
   top: -100%;
-  opacity: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
 }
 
-.date-title-wrapper{
+.text-wrapper{
+  left: 500px;
+  position: absolute;
+  top: 45%;
+  width: 440px;
   overflow: hidden;
+}
+
+.cercle{
+  border-radius: 50%;
   position: absolute;
-  top: 75%;
 }
 
-.link{
-  top: 32%;
-  font-weight: 100;
-  opacity: 0;
-  color: black;
-  text-decoration: none;
+.cercle-1{
+  border: 75px solid var(--color);
+  width: 84px;
+  height: 84px;
+  left:-860px;
+  top: 100px;
+}
+.cercle-2{
+  border: 75px solid var(--color);
+  width: 384px;
+  height: 384px;
+  left:-860px;
+  top: 870px;
 }
diff --git a/clip/scenes/scene-7/index.html b/clip/scenes/scene-7/index.html
@@ -1,12 +1,34 @@
 <div class="root">
-  <div class="text-wrapper">
-    <div class="text">Thanks our Sponsors</div>
+  <div class="cercle-1 cercle"></div>
+  <div class="cercle-2 cercle"></div>
+  <div class="venue-image-wrapper">
+    <div class="venue-image"></div>
   </div>
-  <div class="date-title-wrapper">
-    <div class="date-title">
-      {{initParams.subTitle}}
+  <div class="text-wrapper">
+    <div class="building-wrapper">
+      {{initParams.venue.building}}
     </div>
+    <div class="hall-wrapper">
+      {{initParams.venue.hall}}
+    </div>
+  </div>
+
+  <div class="address-wrapper">
+
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150"
+      height="100" viewBox="0 0 256 256" xml:space="preserve">
+
+      <defs>
+      </defs>
+      <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
+        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
+        <path
+          d="M 45 0 C 25.463 0 9.625 15.838 9.625 35.375 c 0 8.722 3.171 16.693 8.404 22.861 L 45 90 l 26.97 -31.765 c 5.233 -6.167 8.404 -14.139 8.404 -22.861 C 80.375 15.838 64.537 0 45 0 z M 45 48.705 c -8.035 0 -14.548 -6.513 -14.548 -14.548 c 0 -8.035 6.513 -14.548 14.548 -14.548 s 14.548 6.513 14.548 14.548 C 59.548 42.192 53.035 48.705 45 48.705 z"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255, 255, 255); fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+      </g>
+    </svg>
+    <div> {{initParams.venue.address}}</div>
   </div>
-  <a class="link" href="{{initParams.eventLink}}">{{initParams.eventLink}}</a>
 
 </div>
diff --git a/clip/scenes/scene-7/index.js b/clip/scenes/scene-7/index.js
@@ -1,7 +1,15 @@
 import { HTMLClip } from "@donkeyclip/motorcortex";
 import html from "./index.html";
 import css from "./index.css";
-import { Opacity, Scale, Size, Top, Width } from "../../library/incidents";
+import {
+  Opacity,
+  Scale,
+  Size,
+  Top,
+  Width,
+  Left,
+  Right,
+} from "../../library/incidents";
 
 const clip = new HTMLClip({
   html,
@@ -13,12 +21,37 @@ const clip = new HTMLClip({
   },
   initParams: {
     color: "@initParams.color",
-    subTitle: "@initParams.subTitle",
-    eventLink: "@initParams.eventLink",
+    venue: "@initParams.venue",
   },
 });
 
-clip.addIncident(Top("0%", ".text", 1500, "easeInOutCubic"), 13700);
-clip.addIncident(Opacity(1, ".date-title,.link", 800), 13700);
+clip.addIncident(
+  Left("1000px", ".venue-image-wrapper", 1700, "easeInOutCubic"),
+  13100
+);
+clip.addIncident(Left("1560px", ".cercle-1", 1700, "easeInOutCubic"), 13000);
+clip.addIncident(Left("250px", ".cercle-2", 1700, "easeInOutCubic"), 13000);
+
+clip.addIncident(
+  Right("0%", ".hall-wrapper,.building-wrapper", 1500, "easeInOutCubic"),
+  14200
+);
+clip.addIncident(Top("0%", ".address-wrapper", 1500, "easeInOutCubic"), 14300);
+
+clip.addIncident(
+  Top(
+    "130%",
+    ".cercle-2,.text-wrapper,.venue-image-wrapper,.cercle-1",
+    1000,
+    "easeInOutCubic",
+    "@stagger(0, 200)"
+  ),
+  18000
+);
+
+clip.addIncident(
+  Top("-100%", ".address-wrapper", 1000, "easeInOutCubic"),
+  18300
+);
 
 export default clip;
diff --git a/clip/scenes/scene-8/index.css b/clip/scenes/scene-8/index.css
@@ -0,0 +1,55 @@
+* {
+    --color: {{ initParams.color }};
+    /* 
+      This is an example of how to use MotorCortex's init params in css, using a css variable
+        if you are unfamiliar with css variables here is a quick guide https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage
+    */
+}
+
+.root {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+.text{
+  font-size: 100px;
+    font-weight: 900;
+    position: absolute;
+    text-transform: uppercase;
+    top: 100%;
+}
+
+.text-wrapper{
+  overflow: hidden;
+    position: absolute;
+    top: 40%;
+    width: 1184px;
+    height: 100px;
+}
+
+.date-title,.link{
+  font-size: 40px;
+  font-weight: 700;
+  position: relative;
+  top: -100%;
+  opacity: 0;
+}
+
+.date-title-wrapper{
+  overflow: hidden;
+  position: absolute;
+  top: 75%;
+}
+
+.link{
+  top: 32%;
+  font-weight: 100;
+  opacity: 0;
+  color: black;
+  text-decoration: none;
+}
diff --git a/clip/scenes/scene-8/index.html b/clip/scenes/scene-8/index.html
@@ -0,0 +1,12 @@
+<div class="root">
+  <div class="text-wrapper">
+    <div class="text">Thanks our Sponsors</div>
+  </div>
+  <div class="date-title-wrapper">
+    <div class="date-title">
+      {{initParams.subTitle}}
+    </div>
+  </div>
+  <a class="link" href="{{initParams.eventLink}}">{{initParams.eventLink}}</a>
+
+</div>
diff --git a/clip/scenes/scene-8/index.js b/clip/scenes/scene-8/index.js
@@ -0,0 +1,24 @@
+import { HTMLClip } from "@donkeyclip/motorcortex";
+import html from "./index.html";
+import css from "./index.css";
+import { Opacity, Scale, Size, Top, Width } from "../../library/incidents";
+
+const clip = new HTMLClip({
+  html,
+  css,
+  selector: ".scene-8",
+  containerParams: {
+    width: "1920px",
+    height: "1080px",
+  },
+  initParams: {
+    color: "@initParams.color",
+    subTitle: "@initParams.subTitle",
+    eventLink: "@initParams.eventLink",
+  },
+});
+
+clip.addIncident(Top("0%", ".text", 1500, "easeInOutCubic"), 19700);
+clip.addIncident(Opacity(1, ".date-title,.link", 800), 19700);
+
+export default clip;