created a header & fixed the relation between the canvas and the vide…

…o panel
bsherifi · Jul 1, 2020 · a665983 · a665983
1 parent 6da35af
commit a665983
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -3,26 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
     <title>Document</title>
     <script defer src="face-api.min.js"></script>
     <script defer src="script.js"></script>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            width: 100vw;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        canvas {
-            position: absolute;
-        }
-    </style>
 </head>
+
 <body>
-    <video id="video" width="720" height="560" autoplay muted></video>
+    <div class="header">
+
+    </div>
+    <div class="video-panel">
+        <video id="video" width="720" height="560" autoplay muted></video>
+    </div>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -17,7 +17,8 @@ function startVideo() {
 
 video.addEventListener('play', () => {
     const canvas = faceapi.createCanvasFromMedia(video);
-    document.body.append(canvas);
+    const mydiv = document.querySelector(".video-panel")
+    mydiv.appendChild(canvas)
     const displaySize = { width: video.width, height: video.height }
     faceapi.matchDimensions(canvas, displaySize)
     setInterval(async () => {

diff --git a/style.css b/style.css
@@ -0,0 +1,29 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}
+
+.header {
+    width: 100%;
+    height: 100px;
+    justify-self: start;
+    align-self: start;
+    display: block;
+    background-color: #101010;
+}
+
+.video-panel {
+    margin-top: 40px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+}
+
+canvas {
+    position: absolute;
+}
+