feat: add base HTML structure and styling for Skyline Sprint

DamBai212 · DamBai212 · commit c7bd7ec7fdb1 · 2026-03-09T11:58:10.000Z
Create index.html with layout container for the game canvas.
Add base styling for body, main layout, and canvas including
centering, borders, and responsive sizing.
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Skyline Sprint</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      background: #12151f;
+      font-family: "Trebuchet MS", "Gill Sans", sans-serif;
+      color: #f2f4fa;
+    }
+
+    main {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    canvas {
+      border: 3px solid #2b3347;
+      border-radius: 10px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+      max-width: 100%;
+      height: auto !important;
+    }
+  </style>
+</head>
+<body>
+  <main id="app"></main>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
+  <script src="sketch.js"></script>
+</body>
+</html>
