From 7ee2e1ad086fbdb75414e038453502750d0d0cb0 Mon Sep 17 00:00:00 2001 From: tototomate123 Date: Wed, 25 Feb 2026 20:48:43 +0100 Subject: [PATCH] create basic homepage layout --- app/static/app.css | 219 +++++++++++++++++++++++++++++++++++++ app/static/play.css | 0 app/templates/friends.html | 48 ++++++++ app/templates/home.html | 33 +++++- app/templates/play.html | 55 ++++++++-- run.py | 2 +- 6 files changed, 340 insertions(+), 17 deletions(-) create mode 100644 app/static/app.css delete mode 100644 app/static/play.css create mode 100644 app/templates/friends.html diff --git a/app/static/app.css b/app/static/app.css new file mode 100644 index 0000000..5544f45 --- /dev/null +++ b/app/static/app.css @@ -0,0 +1,219 @@ +:root { + --bg: #f4f6f8; + --surface: #ffffff; + --surface-soft: #f8fafc; + --border: #dde2e8; + --text: #111827; + --muted: #5f6b7a; + --primary: #1f2937; + --primary-strong: #0f172a; + --success: #16a34a; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Manrope", "Segoe UI", sans-serif; + background: var(--bg); + color: var(--text); +} + +.site-shell { + min-height: 100vh; +} + +.topbar { + height: 64px; + border-bottom: 1px solid var(--border); + background: var(--surface); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + position: sticky; + top: 0; +} + +.brand { + color: var(--text); + text-decoration: none; + font-weight: 700; + font-size: 1.1rem; +} + +.topnav { + display: flex; + gap: 8px; +} + +.topnav a { + text-decoration: none; + color: var(--muted); + padding: 8px 12px; + border: 1px solid transparent; + border-radius: 4px; + font-weight: 600; +} + +.topnav a:hover { + color: var(--text); + background: var(--surface-soft); + border-color: var(--border); +} + +.topnav a.active { + color: var(--text); + background: var(--surface-soft); + border-color: var(--border); +} + +.profile-pill { + border: 1px solid var(--border); + background: var(--surface-soft); + padding: 7px 10px; + font-size: 0.9rem; + color: var(--muted); +} + +.page-wrap { + max-width: 1080px; + margin: 0 auto; + padding: 24px 20px 30px; +} + +h1 { + margin: 8px 0 10px; + font-size: clamp(1.6rem, 3vw, 2.25rem); + line-height: 1.15; +} + +.cta-row { + margin-top: 18px; + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.btn { + font: inherit; + border: 1px solid var(--border); + background: var(--surface); + color: var(--text); + padding: 9px 14px; + border-radius: 4px; + text-decoration: none; + cursor: pointer; +} + +.btn-primary { + background: var(--primary); + border-color: var(--primary); + color: #ffffff; +} + +.btn-primary:hover { + background: var(--primary-strong); + border-color: var(--primary-strong); +} + +.btn-secondary:hover { + background: var(--surface-soft); +} + +.queue-layout { + margin-top: 14px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.chip-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 10px; +} + +.chip { + border: 1px solid var(--border); + background: var(--surface-soft); + color: var(--text); + border-radius: 4px; + padding: 7px 11px; + font: inherit; + cursor: pointer; +} + +.chip.active, +.chip:hover { + border-color: #b7c0cb; + background: #eef2f6; +} + +.friend-list { + margin: 0; + padding: 0; + list-style: none; +} + +.friend-list li { + display: flex; + align-items: center; + gap: 8px; + padding: 7px 0; + border-top: 1px solid var(--border); + color: var(--muted); +} + +.friend-list li:first-child { + border-top: 0; +} + +.dot { + width: 8px; + height: 8px; + border-radius: 4px; + background: var(--success); +} + +@media (max-width: 900px) { + .panel-grid { + grid-template-columns: 1fr; + } + + .queue-layout { + grid-template-columns: 1fr; + } +} + +@media (max-width: 700px) { + .topbar { + height: auto; + flex-wrap: wrap; + gap: 8px; + padding: 10px 14px; + } + + .topnav { + width: 100%; + order: 3; + } + + .topnav a { + flex: 1; + text-align: center; + } + + .page-wrap { + padding: 16px 14px 24px; + } + + .hero, + .stack-head, + .panel { + padding: 14px; + } +} diff --git a/app/static/play.css b/app/static/play.css deleted file mode 100644 index e69de29..0000000 diff --git a/app/templates/friends.html b/app/templates/friends.html new file mode 100644 index 0000000..15d359b --- /dev/null +++ b/app/templates/friends.html @@ -0,0 +1,48 @@ + + + + + + Friends + + + + + + +
+
+ Chess + +
{{ current_user.username }}
+
+ +

Friends

+ +
+
+

Online now

+
    +
  • name1
    • +
  • friend2
    • +
  • bro has a lot of friends
    • +
+
+ +
+

Incoming invites

+

No pending invitations +

+
+
+ +
+ + diff --git a/app/templates/home.html b/app/templates/home.html index cc31329..4648daa 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -3,15 +3,38 @@ - Home Page + Home + + + -

logged in

-

hi, {{ current_user.username }}!

- Play Chess +
+
+ Chess + +
{{ current_user.username }}
+
+ +
+

Welcome back, {{current_user.username}}

+
+ Start a game + Open friends +
+
+
diff --git a/app/templates/play.html b/app/templates/play.html index c5377f1..3e608b0 100644 --- a/app/templates/play.html +++ b/app/templates/play.html @@ -3,21 +3,54 @@ - Chess Arena + Play + + - - + -
+
+
+ Chess + +
{{ current_user.username }}
+
+ + +
+
+
+

Game settings

+

Choose a time setup

+
+ + + + +
+

You play as

+
+ + + +
+
+ + +
+
+
+
+
diff --git a/run.py b/run.py index 5cdc59a..7c6bf2e 100644 --- a/run.py +++ b/run.py @@ -4,4 +4,4 @@ app = create_app() if __name__ == "__main__": print("Starting server...") - sIO.run(app, debug=True, use_reloader=False) \ No newline at end of file + sIO.run(app, debug=True, use_reloader=True)