feat: design mockup preview site
This commit is contained in:
PM
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Create Room - DrawTogether</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=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--yellow: #FFD23F; --coral: #FF5C5C; --mint: #4ECDC4;
|
||||
--lavender: #A593E0; --sky: #5BCEFA; --dark: #2D2D2D;
|
||||
--cream: #FFF8E7; --white: #FFFFFF;
|
||||
--shadow-card: 0 6px 0 rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
|
||||
--shadow-btn: 0 5px 0 rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
|
||||
}
|
||||
html, body { font-family: 'Fredoka', system-ui, sans-serif; color: var(--dark); background: var(--cream); -webkit-font-smoothing: antialiased; }
|
||||
body { min-height: 100vh; }
|
||||
|
||||
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; max-width: 1280px; margin: 0 auto; }
|
||||
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 24px; text-decoration: none; color: inherit; }
|
||||
.logo-mark { width: 44px; height: 44px; border-radius: 14px; background: var(--coral); display: grid; place-items: center; box-shadow: var(--shadow-card); transform: rotate(-6deg); }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--dark); padding: 10px 16px; border-radius: 999px; }
|
||||
.back-link:hover { background: var(--white); }
|
||||
|
||||
main { max-width: 980px; margin: 0 auto; padding: 24px 32px 80px; }
|
||||
.page-title { text-align: center; margin-bottom: 32px; }
|
||||
.page-title h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -0.5px; }
|
||||
.page-title .accent-bg { background: var(--yellow); padding: 0 12px; border-radius: 10px; display: inline-block; transform: rotate(-1deg); }
|
||||
.page-title p { margin-top: 12px; font-weight: 500; color: rgba(45,45,45,0.7); font-size: 17px; }
|
||||
|
||||
.step-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--coral); margin-bottom: 16px; }
|
||||
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: white; display: grid; place-items: center; font-size: 14px; }
|
||||
|
||||
/* Mode picker */
|
||||
.mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
|
||||
.mode-radio { position: relative; cursor: pointer; }
|
||||
.mode-radio input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.mode-radio .card {
|
||||
background: var(--white); border: 3px solid var(--dark); border-radius: 22px;
|
||||
padding: 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px;
|
||||
transition: all 0.18s ease; height: 100%;
|
||||
}
|
||||
.mode-radio:hover .card { transform: translateY(-3px); }
|
||||
.mode-radio input:checked + .card { background: var(--yellow); transform: translateY(-4px); }
|
||||
.mode-radio input:checked + .card .check { opacity: 1; transform: scale(1); }
|
||||
.mode-radio .icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; border: 3px solid var(--dark); box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
|
||||
.mode-radio .icon.s { background: var(--coral); }
|
||||
.mode-radio .icon.g { background: var(--mint); }
|
||||
.mode-radio .icon.c { background: var(--lavender); }
|
||||
.mode-radio h3 { font-size: 18px; font-weight: 700; }
|
||||
.mode-radio p { font-size: 13px; color: rgba(45,45,45,0.7); font-weight: 500; line-height: 1.4; }
|
||||
.mode-radio .check {
|
||||
position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
|
||||
background: var(--coral); border: 3px solid var(--dark); border-radius: 50%;
|
||||
display: grid; place-items: center; opacity: 0; transform: scale(0.5);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Settings card */
|
||||
.settings {
|
||||
background: var(--white); border: 3px solid var(--dark); border-radius: 24px;
|
||||
padding: 28px; box-shadow: var(--shadow-card); margin-bottom: 28px;
|
||||
}
|
||||
.settings h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
|
||||
.settings h2 .icon-pill { width: 32px; height: 32px; background: var(--mint); border: 3px solid var(--dark); border-radius: 10px; display: grid; place-items: center; }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
|
||||
.field { display: flex; flex-direction: column; gap: 8px; }
|
||||
.field label { font-weight: 600; font-size: 15px; }
|
||||
.field .hint { font-size: 12px; color: rgba(45,45,45,0.55); font-weight: 500; }
|
||||
.input, .select {
|
||||
font-family: inherit; font-size: 16px; font-weight: 500;
|
||||
padding: 12px 16px; border: 3px solid var(--dark); border-radius: 14px;
|
||||
background: var(--cream); color: var(--dark); outline: none; transition: all 0.15s ease;
|
||||
width: 100%;
|
||||
}
|
||||
.input:focus, .select:focus { border-color: var(--coral); background: var(--white); transform: translateY(-1px); }
|
||||
|
||||
/* Slider-like row */
|
||||
.stepper {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 6px; background: var(--cream); border: 3px solid var(--dark); border-radius: 14px;
|
||||
}
|
||||
.stepper button {
|
||||
width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--dark);
|
||||
background: var(--white); font-family: inherit; font-weight: 700; font-size: 18px;
|
||||
cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.15);
|
||||
}
|
||||
.stepper .value { font-weight: 700; font-size: 20px; }
|
||||
|
||||
/* Pill selector */
|
||||
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.pill {
|
||||
padding: 10px 18px; border: 3px solid var(--dark); border-radius: 999px;
|
||||
background: var(--white); font-family: inherit; font-weight: 600; font-size: 14px;
|
||||
cursor: pointer; transition: all 0.15s ease;
|
||||
}
|
||||
.pill:hover { transform: translateY(-2px); }
|
||||
.pill.active { background: var(--coral); color: white; }
|
||||
|
||||
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--cream); border-radius: 14px; border: 2px dashed rgba(45,45,45,0.2); }
|
||||
.toggle-row .lbl { font-weight: 600; font-size: 15px; }
|
||||
.toggle-row .desc { font-size: 13px; color: rgba(45,45,45,0.6); font-weight: 500; }
|
||||
.switch { position: relative; width: 52px; height: 30px; background: var(--white); border: 3px solid var(--dark); border-radius: 999px; cursor: pointer; }
|
||||
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--dark); border-radius: 50%; transition: all 0.2s ease; }
|
||||
.switch.on { background: var(--mint); }
|
||||
.switch.on::after { left: 26px; }
|
||||
|
||||
/* CTA */
|
||||
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 8px; }
|
||||
.privacy-note { font-size: 14px; font-weight: 500; color: rgba(45,45,45,0.6); display: flex; align-items: center; gap: 8px; }
|
||||
.btn { font-family: inherit; font-weight: 700; font-size: 18px; padding: 18px 36px; border-radius: 999px; border: 3px solid var(--dark); cursor: pointer; box-shadow: var(--shadow-btn); transition: transform 0.15s ease; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
|
||||
.btn:hover { transform: translateY(-2px); }
|
||||
.btn-primary { background: var(--coral); color: white; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mode-picker { grid-template-columns: 1fr; }
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
main { padding: 16px; }
|
||||
.cta-row { flex-direction: column; }
|
||||
.btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<a class="logo" href="01-landing.html">
|
||||
<div class="logo-mark">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg>
|
||||
</div>
|
||||
DrawTogether
|
||||
</a>
|
||||
<a href="01-landing.html" class="back-link">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||
Back home
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="page-title">
|
||||
<h1>Spin up a <span class="accent-bg">new room</span></h1>
|
||||
<p>Pick a mode, tweak the rules, and grab your invite link in 30 seconds.</p>
|
||||
</div>
|
||||
|
||||
<div class="step-label"><span class="step-num">1</span> Choose your mode</div>
|
||||
<div class="mode-picker" data-testid="mode-picker">
|
||||
<label class="mode-radio">
|
||||
<input type="radio" name="mode" value="skribbl" checked data-testid="mode-skribbl">
|
||||
<div class="card">
|
||||
<div class="icon s"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg></div>
|
||||
<h3>Skribbl Race</h3>
|
||||
<p>One drawer, everyone guesses. Fastest correct guess wins.</p>
|
||||
<div class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="mode-radio">
|
||||
<input type="radio" name="mode" value="gartic" data-testid="mode-gartic">
|
||||
<div class="card">
|
||||
<div class="icon g"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
|
||||
<h3>Gartic Phone</h3>
|
||||
<p>Pass-and-draw chaos. Hilarious final reveal.</p>
|
||||
<div class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="mode-radio">
|
||||
<input type="radio" name="mode" value="color" data-testid="mode-color">
|
||||
<div class="card">
|
||||
<div class="icon c"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="10.5" r="2.5"/><circle cx="8.5" cy="7.5" r="2.5"/><circle cx="6.5" cy="12.5" r="2.5"/><path d="M12 22a10 10 0 1 1 10-10c0 4-3 4-4 4h-3a2 2 0 0 0-1 4 2 2 0 0 1-1 4z"/></svg></div>
|
||||
<h3>Color Together</h3>
|
||||
<p>Shared coloring book. Calm, chill, beautiful.</p>
|
||||
<div class="check"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="step-label"><span class="step-num">2</span> Game settings</div>
|
||||
<section class="settings">
|
||||
<h2>
|
||||
<span class="icon-pill"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
|
||||
Rules & preferences
|
||||
</h2>
|
||||
|
||||
<div class="grid-2">
|
||||
<div class="field">
|
||||
<label>Number of rounds</label>
|
||||
<div class="stepper" data-testid="stepper-rounds">
|
||||
<button type="button" aria-label="decrease">−</button>
|
||||
<div class="value">5</div>
|
||||
<button type="button" aria-label="increase">+</button>
|
||||
</div>
|
||||
<span class="hint">Each round, every player gets one drawing turn.</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Time per drawing</label>
|
||||
<div class="pill-group" data-testid="pills-time">
|
||||
<button class="pill" type="button">30s</button>
|
||||
<button class="pill active" type="button">60s</button>
|
||||
<button class="pill" type="button">90s</button>
|
||||
<button class="pill" type="button">120s</button>
|
||||
</div>
|
||||
<span class="hint">Drawer's time to sketch the prompt.</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Max players</label>
|
||||
<div class="stepper" data-testid="stepper-players">
|
||||
<button type="button">−</button>
|
||||
<div class="value">8</div>
|
||||
<button type="button">+</button>
|
||||
</div>
|
||||
<span class="hint">2 minimum, 12 maximum.</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Word language (Skribbl)</label>
|
||||
<select class="select" data-testid="select-language">
|
||||
<option>English</option>
|
||||
<option>Español</option>
|
||||
<option>Français</option>
|
||||
<option>Deutsch</option>
|
||||
<option>हिन्दी</option>
|
||||
<option>日本語</option>
|
||||
</select>
|
||||
<span class="hint">Word bank used for prompts.</span>
|
||||
</div>
|
||||
|
||||
<div class="field" style="grid-column: 1 / -1;">
|
||||
<label>Canvas type (Color mode)</label>
|
||||
<div class="pill-group" data-testid="pills-canvas">
|
||||
<button class="pill active" type="button">Mandala</button>
|
||||
<button class="pill" type="button">Animals</button>
|
||||
<button class="pill" type="button">Botanical</button>
|
||||
<button class="pill" type="button">Patterns</button>
|
||||
<button class="pill" type="button">Blank</button>
|
||||
</div>
|
||||
<span class="hint">Pick a base illustration for collaborative coloring.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 22px; display: flex; flex-direction: column; gap: 10px;">
|
||||
<div class="toggle-row">
|
||||
<div>
|
||||
<div class="lbl">Private room</div>
|
||||
<div class="desc">Only people with the link can join.</div>
|
||||
</div>
|
||||
<div class="switch on" data-testid="toggle-private"></div>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<div>
|
||||
<div class="lbl">Custom word list</div>
|
||||
<div class="desc">Add your own words separated by commas.</div>
|
||||
</div>
|
||||
<div class="switch" data-testid="toggle-custom-words"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="cta-row">
|
||||
<div class="privacy-note">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||||
No account needed. Anyone with the link can join.
|
||||
</div>
|
||||
<a href="04-lobby.html" class="btn btn-primary" data-testid="btn-create">
|
||||
Create Room
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user