From 9bfe098efeb0aa42b6b56e9d389fb9e7937a4ccc Mon Sep 17 00:00:00 2001 From: Stephanie Gredell Date: Mon, 18 Aug 2025 00:39:49 -0700 Subject: [PATCH] feat: Add frontend template components Add modular HTML templates for better code organization: - canvas.html: Game canvas and component palette interface - challenges.html: Challenge selection and requirements panel - chat.html: Chat interface with WebSocket support structure - header.html: Reusable header component These templates provide a foundation for a more modular frontend architecture and improved user interface. --- static/canvas.html | 340 +++++++++++++++++++++++++++++++++++++++++ static/challenges.html | 14 ++ static/chat.html | 57 +++++++ static/header.html | 16 ++ 4 files changed, 427 insertions(+) create mode 100644 static/canvas.html create mode 100644 static/challenges.html create mode 100644 static/chat.html create mode 100644 static/header.html diff --git a/static/canvas.html b/static/canvas.html new file mode 100644 index 0000000..54c2f17 --- /dev/null +++ b/static/canvas.html @@ -0,0 +1,340 @@ +{{ define "canvas" }} +
+ + + + +
+
+ + + +
+ + +
+ {{ if .Level.InterviewerRequirements }} +
+

Interviewer Requirements

+
    + {{ range .Level.InterviewerRequirements }} +
  • {{ . }}
    • + {{ end }} +
+
+ {{ end }} + + {{ if .Level.FunctionalRequirements }} +
+

Functional Requirements

+
    + {{ range .Level.FunctionalRequirements }} +
  • {{ . }}
    • + {{ end }} +
+
+ {{ end }} + + {{ if .Level.NonFunctionalRequirements }} +
+

Non-Functional Requirements

+
    + {{ range .Level.NonFunctionalRequirements }} +
  • {{ . }}
    • + {{ end }} +
+
+ {{ end }} +
+ + +
+ + +
+ +
+ +
+
+
+
level constraints
+
🎯 target rps: {{.Level.TargetRPS}}
+
⏱️ max p95 latency: {{.Level.MaxP95LatencyMs}}ms
+
💸 max cost: ${{.Level.MaxMonthlyUSD}}
+
🔒 availability: {{printf "%.2f" .Level.RequiredAvailabilityPct}}% +
+
+
+ + + + + + + + + + + +
+

node properties

+
+ + +
+
+ +
+
+ + + +
+
+ + + + + + + + + + + +
+
+ + +
+
+ + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + +
+
+ + + + + + + + + + + +
+
+ + + + + +
+
+ + + + + +
+ + + + +
+
+ +
+
+
+ +
This is Tab 3 content.
+
+
+ + +{{ end }} diff --git a/static/challenges.html b/static/challenges.html new file mode 100644 index 0000000..bda51b4 --- /dev/null +++ b/static/challenges.html @@ -0,0 +1,14 @@ +{{ define "challenges" }} +
+

Challenges

+ + +
+{{ end }} diff --git a/static/chat.html b/static/chat.html new file mode 100644 index 0000000..bc7f8df --- /dev/null +++ b/static/chat.html @@ -0,0 +1,57 @@ +{{ define "chat" }} + + +
+
+

System Design Assistant

+

Powered by AI

+
+
+

+ 1 +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem doloremque exercitationem, blanditiis + obcaecati + earum recusandae quia laudantium assumenda nihil mollitia velit eos molestias odio quasi facilis suscipit + rem + nulla sapiente ea voluptatum repudiandae dicta enim ut! Sed perferendis aliquid vel ad incidunt? In sit id + voluptatibus fugit voluptates, architecto sequi. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex beatae vero sit delectus, rem totam molestias. + Officia, suscipit error. Voluptatibus. +

+
+
+
+
+
+
+ loading... +
+
+
+ + +
+
+ + +{{ end }} diff --git a/static/header.html b/static/header.html new file mode 100644 index 0000000..93f3aaa --- /dev/null +++ b/static/header.html @@ -0,0 +1,16 @@ +{{ define "header" }} +
+

System Design Game

+ {{ if and .Username .Avatar }} +
+ + {{ .Username }} +
+ {{ else }} + + GitHub Logo + Login with GitHub + + {{ end }} +
+{{ end }}