🚧 Site > Header > Add demo

site/index.html

@@ -27,6 +27,12 @@
             <h2 class="sub-title">Real-time code sharing for your lectures and presentations</h2>
 
             <div class="demo js-demo">
+                <div class="speaker js-speaker">
+                    <div class="icon"></div>
+                </div>
+                <div class="audience js-audience">
+                    <div class="icon"></div>
+                </div>
             </div>
 
             <a class="get-started-button js-navigation-item" href="#get-started">

site/src/javascript/Demo.js

@@ -0,0 +1,30 @@
+import speaker from '../assets/videos/speaker.mp4'
+import audience from '../assets/videos/audience.mp4'
+
+export default class Demo
+{
+    constructor()
+    {
+        this.$container = document.querySelector('.js-demo')
+
+        // Speaker
+        this.$speaker = this.$container.querySelector('.js-speaker')
+
+        this.$speakerVideo = document.createElement('video')
+        this.$speakerVideo.src = speaker
+        this.$speakerVideo.height = 300
+        this.$speakerVideo.autoplay = true
+
+        this.$speaker.appendChild(this.$speakerVideo)
+
+        // Audience
+        this.$audience = this.$container.querySelector('.js-audience')
+
+        this.$audienceVideo = document.createElement('video')
+        this.$audienceVideo.src = audience
+        this.$audienceVideo.height = 300
+        this.$audienceVideo.autoplay = true
+
+        this.$audience.appendChild(this.$audienceVideo)
+    }
+}

site/src/javascript/index.js

@@ -1,13 +1,9 @@
-// import speaker from '../assets/videos/speaker.mp4'
+import Demo from './Demo.js'
 
 export default class Site
 {
     constructor()
     {
-        // const $demo = document.querySelector('.js-demo')
+        this.demo = new Demo()
-        // const $video = document.createElement('video')
-        // $video.src = speaker
-        // $video.controls = true
-        // $demo.appendChild($video)
     }
 }

site/src/style/header.styl

@@ -100,14 +100,41 @@ section.header
 
     .demo
         position absolute
-        top 50%
+        top 520px
         left 50%
         width 1px
         height 1px
         background #ffffff
 
-        video
+        .speaker
-            background #ff0000
+            position absolute
+            top -150px
+            left -245px
+
+            .icon
+                position absolute
+                left calc(50% - 20px)
+                top calc(100% + 10px)
+                width 40px
+                height 40px
+                background-image url(../../static/svg/demo-speaker.svg)
+                background-repeat no-repeat
+                background-position center center
+
+        .audience
+            position absolute
+            top -150px
+            left -245px
+
+            .icon
+                position absolute
+                left calc(50% - 20px)
+                top calc(100% + 10px)
+                width 40px
+                height 40px
+                background-image url(../../static/svg/demo-audience.svg)
+                background-repeat no-repeat
+                background-position center center
 
     .get-started-button
         position absolute

site/static/svg/demo-audience.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 120.9" style="enable-background:new 0 0 100 120.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="56.9" y="10.4" class="st0" width="10.1" height="20.7"/>
+	<path class="st0" d="M84.2,0H5.4C2.4,0,0,2.4,0,5.4v85.9c0,3,2.4,5.4,5.4,5.4h89.1c3,0,5.4-2.4,5.4-5.4V15.5L84.2,0z M19.6,10.8
+		C19.6,8.1,22,6,25,6H75c3,0,5.4,2.2,5.4,4.8v19.8c0,2.6-2.4,4.8-5.4,4.8H25c-3,0-5.4-2.2-5.4-4.8V10.8L19.6,10.8z M86,86.6H14V44.8
+		h72V86.6z"/>
+</g>
+</svg>

site/static/svg/demo-speaker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.04 80.57"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Fichier 1</title><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M56.57,53.29a3.06,3.06,0,0,0-3.3-.37A18.48,18.48,0,0,1,36.6,53a3,3,0,0,0-3.22.35C28.16,57.59,24.75,64,24.75,69c0,8.14,9.08,11.59,20.27,11.59S65.29,77.12,65.29,69C65.29,64,61.84,57.51,56.57,53.29Z"/><circle class="cls-1" cx="45.02" cy="36.42" r="12.5"/><circle class="cls-1" cx="45.02" cy="9.21" r="9.21"/><path class="cls-1" d="M83.61,34.59a2.26,2.26,0,0,0-2.43-.27,13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26c-3.85,3.11-6.36,7.83-6.36,11.51,0,6,6.69,8.54,14.94,8.54S90,52.16,90,46.16C90,42.46,87.5,37.7,83.61,34.59Z"/><circle class="cls-1" cx="75.1" cy="22.15" r="9.21"/><path class="cls-1" d="M29.89,46.16c0-3.7-2.54-8.46-6.43-11.57A2.26,2.26,0,0,0,21,34.32a13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26C2.51,37.76,0,42.48,0,46.16c0,6,6.69,8.54,14.94,8.54S29.89,52.16,29.89,46.16Z"/><circle class="cls-1" cx="14.94" cy="22.15" r="9.21"/></g></g></svg>