From ccc16649141ce3f551df833c187cac900d92a4e3 Mon Sep 17 00:00:00 2001 From: PM Date: Fri, 1 May 2026 19:53:26 +0000 Subject: [PATCH] feat: design mockup preview site --- Dockerfile | 6 + README.md | 5 + designs/01-landing.html | 285 +++++++++++++++++++++++ designs/02-create-room.html | 273 ++++++++++++++++++++++ designs/03-join-room.html | 168 ++++++++++++++ designs/04-lobby.html | 306 +++++++++++++++++++++++++ designs/05-skribbl-game.html | 371 ++++++++++++++++++++++++++++++ designs/06-gartic-game.html | 304 +++++++++++++++++++++++++ designs/07-color-game.html | 367 ++++++++++++++++++++++++++++++ designs/08-results.html | 427 +++++++++++++++++++++++++++++++++++ index.html | 165 ++++++++++++++ nginx.conf | 14 ++ 12 files changed, 2691 insertions(+) create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 designs/01-landing.html create mode 100644 designs/02-create-room.html create mode 100644 designs/03-join-room.html create mode 100644 designs/04-lobby.html create mode 100644 designs/05-skribbl-game.html create mode 100644 designs/06-gartic-game.html create mode 100644 designs/07-color-game.html create mode 100644 designs/08-results.html create mode 100644 index.html create mode 100644 nginx.conf diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..7f89394 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,6 @@ +FROM nginx:alpine +COPY nginx.conf /etc/nginx/conf.d/default.conf +COPY index.html /usr/share/nginx/html/index.html +COPY designs /usr/share/nginx/html/designs +EXPOSE 80 +HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://localhost/ >/dev/null || exit 1 diff --git a/README.md b/README.md new file mode 100644 index 0000000..17204e2 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# DrawTogether — Design Mockups + +Static preview of design mockups for the DrawTogether 3-in-1 game (Skribbl + Gartic Phone + Color Together). + +These are HTML/CSS mockups. The live application build is in progress in a separate repo. diff --git a/designs/01-landing.html b/designs/01-landing.html new file mode 100644 index 0000000..9adf344 --- /dev/null +++ b/designs/01-landing.html @@ -0,0 +1,285 @@ + + + + + +DrawTogether - Play Together, Draw Together + + + + + + +
+ + +
+ +
+
+
Live now: 2,418 players drawing together
+

Draw, guess & color with friends

+

Three games, one playful canvas. Race to guess in Skribbl, pass silly drawings in Gartic Phone, or chill out coloring together. No installs. Just doodle.

+
+ + + Create Room + + + + Join Room + +
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + Mia guessed it! +
+
+120 pts
+
+ + 47s +
+
+
+ +
+
+

Three ways to play

+

Pick a mode, invite your crew, get drawing

+
+
+
+
CLASSIC
+
+ +
+ 2-12 players +

Skribbl Race

+

One player draws a secret word, everyone else races to guess. Fast, chaotic, hilarious.

+
+
+
+ +
+ 4-10 players +

Gartic Phone

+

Telephone-game with drawings. Write a prompt, draw what you got, guess what they drew.

+
+
+
CHILL
+
+ +
+ 2-6 players +

Color Together

+

A shared coloring book. Pick a canvas, fill it in together. Snapshot & save your art.

+
+
+
+ + + + diff --git a/designs/02-create-room.html b/designs/02-create-room.html new file mode 100644 index 0000000..ba96142 --- /dev/null +++ b/designs/02-create-room.html @@ -0,0 +1,273 @@ + + + + + +Create Room - DrawTogether + + + + + + +
+ + + + Back home + +
+ +
+
+

Spin up a new room

+

Pick a mode, tweak the rules, and grab your invite link in 30 seconds.

+
+ +
1 Choose your mode
+
+ + + +
+ +
2 Game settings
+
+

+ + Rules & preferences +

+ +
+
+ +
+ +
5
+ +
+ Each round, every player gets one drawing turn. +
+ +
+ +
+ + + + +
+ Drawer's time to sketch the prompt. +
+ +
+ +
+ +
8
+ +
+ 2 minimum, 12 maximum. +
+ +
+ + + Word bank used for prompts. +
+ +
+ +
+ + + + + +
+ Pick a base illustration for collaborative coloring. +
+
+ +
+
+
+
Private room
+
Only people with the link can join.
+
+
+
+
+
+
Custom word list
+
Add your own words separated by commas.
+
+
+
+
+
+ +
+
+ + No account needed. Anyone with the link can join. +
+ + Create Room + + +
+
+ + diff --git a/designs/03-join-room.html b/designs/03-join-room.html new file mode 100644 index 0000000..d3b2a72 --- /dev/null +++ b/designs/03-join-room.html @@ -0,0 +1,168 @@ + + + + + +Join Room - DrawTogether + + + + + + + + + + + + +
+ + + + Back home + +
+ +
+
+
+
+ +
+

Join the room

+

Enter your friend's room code to jump in.

+
+ +
+
+ + 6 characters +
+ +
+ +
+
+ + 3-16 chars +
+ +
+ +
+
+ + Tap to choose +
+
+ + + + + + + + +
+
+ + + Join Room + + + +

No code? Create your own room instead.

+
+
+ + diff --git a/designs/04-lobby.html b/designs/04-lobby.html new file mode 100644 index 0000000..3c92921 --- /dev/null +++ b/designs/04-lobby.html @@ -0,0 +1,306 @@ + + + + + +Lobby - DrawTogether + + + + + + +
+ +
+ + Room + MIA42K +
+
+ +
+ +
+
+

+ + Players +

+ 5 / 8 +
+ +
+
+
🦄
+
+
Mia + + HOST
+
Ready to start
+
+
+
+
+
🦊
+
+
Suki YOU
+
Joined just now
+
+
+
+
+
🐼
+
+
Ravi
+
Picking avatar...
+
+
+
+
+
🐸
+
+
Jules
+
Ready to start
+
+
+
+
+
🐱
+
+
Pat
+
Ready to start
+
+
+
+ +
+ + Waiting for player... +
+
+ + Waiting for player... +
+
+
+ + +
+
+
+

+ + Invite friends +

+
+ +
+
Or share the code
+
MIA42K
+
+
+ +
+
+

+ + Game settings +

+ Skribbl Race +
+
+
+
Rounds
5
+
+
+
Time / draw
60s
+
+
+
Max players
8
+
+
+
Language
English
+
+
+ + +
+ +
+
+

+ + Lobby chat +

+
+
+
+
+
Suki joined the room
+
+
+
+
🦄
+
+
Mia
+
heyyy welcome! waiting on Ravi to pick an avatar 🙃
+
+
+
+
🐸
+
+
Jules
+
i call drawing first round <3
+
+
+
+
🐱
+
+
Pat
+
good luck with that lol
+
+
+
+
+
Mia changed rounds to 5
+
+
+
+
+ + +
+
+
+
+ + diff --git a/designs/05-skribbl-game.html b/designs/05-skribbl-game.html new file mode 100644 index 0000000..96b3926 --- /dev/null +++ b/designs/05-skribbl-game.html @@ -0,0 +1,371 @@ + + + + + +Drawing - DrawTogether + + + + + + +
+ +
+ + + Round 3 / 5 + + + + MIA42K + + +
+
+ +
+ + + + +
+
+
+ + + + +
47s
+
+ +
+
Word hint
+
+
+
+
A
+
+
+
+
+
6 letters · animal
+
+ +
+ + Ravi drawing +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+ + + +
+ + diff --git a/designs/06-gartic-game.html b/designs/06-gartic-game.html new file mode 100644 index 0000000..43b0105 --- /dev/null +++ b/designs/06-gartic-game.html @@ -0,0 +1,304 @@ + + + + + +Gartic Phone - DrawTogether + + + + + + +
+ +
+ + + Round 3 / 5 + + MIA42K + +
+
+ +
+ +
+ +
+
+
+
🦄
+
+
Mia wrote
+
"a cat riding a unicorn"
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + Click and drag to draw + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ +
+
+
+ + +
+ + diff --git a/designs/07-color-game.html b/designs/07-color-game.html new file mode 100644 index 0000000..c61231e --- /dev/null +++ b/designs/07-color-game.html @@ -0,0 +1,367 @@ + + + + + +Color Together - DrawTogether + + + + + + +
+ +
+ + + 4 online + + MIA42K + +
+
+ +
+
+
+

Color Together — 4 players online

+
Mandala canvas · auto-saving every 30s
+
+
+ + +
+
+
+ +
+ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mia +
+
+ + Ravi +
+
+ + Jules +
+
+
+ + + +
+ + diff --git a/designs/08-results.html b/designs/08-results.html new file mode 100644 index 0000000..e417cf3 --- /dev/null +++ b/designs/08-results.html @@ -0,0 +1,427 @@ + + + + + +Game Over - DrawTogether + + + + + + + + + + +
+ + + + Back to lobby + +
+ +
+
+

Game over — nice work

+

5 rounds. 5 players. 1 absolute legend.

+
+ + + + + + +
+
+ + + +
+
+ + +
+
+
+
+
🦊
+
Suki
+
2nd · 1840 pts
+
+
+
CHAMPION
+
+
🦄
+
Mia
+
1st · 2310
+
+
+
+
🐼
+
Ravi
+
3rd · 1620 pts
+
+
+ +
+
+
4
+
🐸
+
+
Jules
+
3 correct guesses · 1 perfect drawing
+
+
1410
+
+
+
5
+
🐱
+
+
Pat
+
2 correct guesses · funniest player award 🤣
+
+
1180
+
+
+ +
+ + + Play Again + + + + New Game + + + + Home + +
+
+ + +
+
+
+
+
🦄
+
+

Mia's book

+
5 chapters · started with a prompt
+
+
+
+ + Book 1 / 5 + +
+
+ +
+
+
Prompt
+
🦄
Mia
+
"a cat riding a unicorn"
+
+
+
Drawing
+
🦊
Suki
+
+ + + + + + + + + + + + + +
+
+
+
Guess
+
🐼
Ravi
+
"horse with a small dragon on top"
+
+
+
Drawing
+
🐸
Jules
+
+ + + + + + + + + + + +
+
+
+
Guess
+
🐱
Pat
+
"a brown horse drinking from a cute pond 💧"
+
+
+
+ +
+ Play Again + New Game +
+
+ + +
+
+
+
+

Mandala by the crew

+
Created in 18 minutes · 4 contributors
+
+
+ 412 strokes + 8 colors used +
+
+
🦄
+
🦊
+
🐼
+
🐸
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + + + New Canvas + +
+
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..742734b --- /dev/null +++ b/index.html @@ -0,0 +1,165 @@ + + + + + + DrawTogether — Design Mockups + + + + + + +
+
+ +

Design mockups

+

Skribbl + Gartic Phone + Collaborative coloring — three games, one cartoon-cozy room. These are static previews. The full app build is in progress.

+ +
Stage 1 of 3 — Designs
+
+ +
+ +

Tap any card to open the full mockup. Pinch / zoom freely on mobile.

+
+ + + + diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..f35f172 --- /dev/null +++ b/nginx.conf @@ -0,0 +1,14 @@ +server { + listen 80 default_server; + server_name _; + root /usr/share/nginx/html; + index index.html; + add_header X-Content-Type-Options "nosniff" always; + add_header Referrer-Policy "no-referrer-when-downgrade" always; + + location = /healthz { return 200 "ok\n"; } + + location / { + try_files $uri $uri/ =404; + } +}