move: add style

2026-08-19 11:44:57 +02:00
parent eeb4466c37
commit a40f10ab22
2 changed files with 55 additions and 10 deletions
@@ -3,13 +3,49 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hello typescript</title>
+    <title>Movement demo</title>
    <style>
-      canvas { display: block; width: 100vw; height: 100vh; }
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: #000000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        #status-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 20px;
+            margin-left: 1rem;
+            color: #ffffff;
+        }
+
+        .canvas-wrapper {
+            width: 90vw;
+            height: 90vh;
+            border-radius: 16px;
+            background-color: #1e293b;
+        }
+
+        #canvas {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+
    </style>
 </head>
-<body style="margin: 0; padding: 0; overflow: hidden; background-color: #000000">
-    <canvas id="canvas" tabindex="0"></canvas>
+<body>
+    <div id="status-line"></div>
+    <div class="canvas-wrapper">
+        <canvas id="canvas" tabindex="0"></canvas>
+    </div>
    <script type="module" src="./move.js"></script>
 </body>
 </html>