visual update

Veneiro · Nov 1, 2023 · 5442c07 · 5442c07
1 parent 756fd2b
commit 5442c07
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 90 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>Shadowcraft Project : WebcamDemo</title>
-  <link rel="stylesheet" href="./style.css">
-
-</head>
-<body>
-<!-- partial:index.partial.html -->
-<!-- Copyright 2023 The MediaPipe Authors.
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Shadowcraft Project : WebcamDemo</title>
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
+    />
+  </head>
+  <body>
+    <!-- partial:index.partial.html -->
+    <!-- Copyright 2023 The MediaPipe Authors.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,26 +24,45 @@
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
-<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
-<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
-
-<body>
-  <h1>Shadowcraft Demo</h1>
-    <div id="liveView" class="videoView">
-      <button id="webcamButton" class="mdc-button mdc-button--raised">
-        <span class="mdc-button__ripple"></span>
-        <span class="mdc-button__label">ENABLE WEBCAM</span>
-      </button>
-      <div style="position: relative;">
-        <video id="webcam" style="position: abso" autoplay playsinline></video>
-        <canvas class="output_canvas" id="output_canvas" style="position: absolute; left: 0px; top: 0px;"></canvas>
-      </div>
-    </div>
-  </section>
-<!-- partial -->
-  <script type="module" src="./script.js"></script>
+    <link
+      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
+      rel="stylesheet"
+    />
+    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"
+      crossorigin="anonymous"
+    ></script>
 
-</body>
+    <header>
+      <h1>
+        SHADOWCRAFT DEMO PREVIEW
+      </h1>
+    </header>
+    <main>
+      <section id="liveView" class="videoView">
+        <button id="webcamButton" class="mdc-button mdc-button--raised">
+          <span class="mdc-button__ripple"></span>
+          <span class="mdc-button__label">ENABLE WEBCAM</span>
+        </button>
+        <section style="position: relative">
+          <video
+            id="webcam"
+            autoplay
+            playsinline
+          ></video>
+          <canvas
+            class="output_canvas"
+            id="output_canvas"
+          ></canvas>
+        </section>
+      </section>
+    </main>
+    <!-- partial -->
+    <script type="module" src="./script.js"></script>
+  </body>
 </html>
diff --git a/style.css b/style.css
@@ -12,17 +12,23 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-@use "@material";
 body {
   font-family: roboto;
   margin: 2em;
   color: #3d3d3d;
   --mdc-theme-primary: #007f8b;
   --mdc-theme-on-primary: #f1f3f4;
+  display:grid;
 }
 
 h1 {
-  color: #007f8b;
+  color: white;
+}
+
+header {
+  background-color: #007f8b;
+  padding:1em;
+  text-align: center;
 }
 
 h2 {
@@ -33,24 +39,11 @@ em {
   font-weight: bold;
 }
 
-video {
-  clear: both;
-  display: block;
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-}
-
 section {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
 }
 
-header,
-footer {
-  clear: both;
-}
-
 .removed {
   display: none;
 }
@@ -64,50 +57,13 @@ footer {
   font-size: 130%;
 }
 
-.videoView,
-.detectOnClick {
-  position: relative;
-  float: left;
-  width: 48%;
-  margin: 2% 1%;
-  cursor: pointer;
+#webcam, .output_canvas {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.videoView p,
-.detectOnClick p {
-  position: absolute;
-  padding: 5px;
-  background-color: #007f8b;
-  color: #fff;
-  border: 1px dashed rgba(255, 255, 255, 0.7);
-  z-index: 2;
-  font-size: 12px;
-  margin: 0;
+main section{
+  text-align: center;
+  padding: 1em;
 }
-
-.highlighter {
-  background: rgba(0, 255, 0, 0.25);
-  border: 1px dashed #fff;
-  z-index: 1;
-  position: absolute;
-}
-
-.canvas {
-  z-index: 1;
-  position: absolute;
-  pointer-events: none;
-}
-
-.output_canvas {
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-}
-
-.detectOnClick {
-  z-index: 0;
-}
-
-.detectOnClick img {
-  width: 100%;
-}