create basic homepage layout

2026-02-25 20:48:43 +01:00
parent d9c2a8cd2a
commit 7ee2e1ad08
6 changed files with 340 additions and 17 deletions
@@ -3,21 +3,54 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chess Arena</title>
+    <title>Play</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
      rel="stylesheet"
-      href="{{ url_for('static', filename='play.css') }}"
    />
-    <script
-      src="https://cdn.socket.io/4.8.1/socket.io.min.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      type="module"
-      src="{{ url_for('static', filename='js/main.js') }}"
-    ></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
  </head>
  <body>
-    <div id="app"></div>
+    <div class="site-shell">
+      <header class="topbar">
+        <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
+        <nav class="topnav">
+          <a href="{{ url_for('main.home') }}">Home</a>
+          <a href="{{ url_for('main.play') }}" class="active">Play</a>
+          <a href="{{ url_for('main.friends') }}">Friends</a>
+        </nav>
+        <div class="profile-pill">{{ current_user.username }}</div>
+      </header>
+
+      <!-- todo: make all of this via js and implement logic -->
+      <main class="page-wrap">
+        <section class="queue-layout">
+          <article class="panel">
+            <h2>Game settings</h2>
+            <h4>Choose a time setup</h4>
+            <div class="chip-row">
+              <button class="chip">1 + 0</button>
+              <button class="chip">3 + 2</button>
+              <button class="chip active">10 + 0</button>
+              <button class="chip">15 + 10</button>
+            </div>
+            <h4>You play as</h4>
+            <div class="chip-row">
+              <button class="chip">white</button>
+              <button class="chip">black</button>
+              <button class="chip active">random</button>
+            </div>
+            <div class="cta-row">
+              <!--               <button class="btn btn-primary" type="button">Start game</button> -->
+              <button class="btn btn-secondary" type="button">
+                Create game code
+              </button>
+            </div>
+          </article>
+        </section>
+      </main>
+    </div>
  </body>
 </html>