pankaj/skribbl-gartic-color-designs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: design mockup preview site

Browse Source
This commit is contained in:
PM
2026-05-01 19:53:26 +00:00
commit ccc1664914
12 changed files with 2691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
designs/03-join-room.html
+168
View File
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join 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; position: relative; overflow-x: hidden; }
/* Decorative doodles */
.doodle { position: absolute; pointer-events: none; opacity: 0.85; }
.doodle.d1 { top: 60px; left: 50px; animation: drift 6s ease-in-out infinite; }
.doodle.d2 { top: 120px; right: 80px; animation: drift 6s ease-in-out infinite 1s; }
.doodle.d3 { bottom: 80px; left: 100px; animation: drift 6s ease-in-out infinite 2s; }
.doodle.d4 { bottom: 60px; right: 60px; animation: drift 6s ease-in-out infinite 3s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.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: 480px; margin: 30px auto; padding: 24px 24px 80px; position: relative; z-index: 2; }
.card {
background: var(--white); border: 3px solid var(--dark); border-radius: 28px;
padding: 36px 32px; box-shadow: 0 10px 0 rgba(0,0,0,0.12), 0 4px 14px rgba(0,0,0,0.1);
}
.card-header { text-align: center; margin-bottom: 26px; }
.card-header h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 6px; }
.card-header p { font-size: 15px; font-weight: 500; color: rgba(45,45,45,0.65); }
.icon-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--mint); border: 3px solid var(--dark); margin: 0 auto 14px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.field { margin-bottom: 22px; }
.field-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.field-label label { font-weight: 600; font-size: 15px; }
.field-label .meta { font-size: 12px; font-weight: 500; color: rgba(45,45,45,0.5); }
.room-code-input {
font-family: inherit; font-weight: 700; font-size: 28px; letter-spacing: 12px;
text-align: center; text-transform: uppercase;
padding: 18px 16px 18px 28px; border: 3px solid var(--dark); border-radius: 16px;
background: var(--cream); color: var(--dark); outline: none; width: 100%;
transition: all 0.15s ease;
}
.room-code-input:focus { border-color: var(--coral); background: var(--white); }
.room-code-input::placeholder { color: rgba(45,45,45,0.25); letter-spacing: 12px; }
.nick-input {
font-family: inherit; font-weight: 600; font-size: 16px;
padding: 14px 18px; border: 3px solid var(--dark); border-radius: 14px;
background: var(--cream); color: var(--dark); outline: none; width: 100%;
transition: all 0.15s ease;
}
.nick-input:focus { border-color: var(--coral); background: var(--white); }
.avatar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.avatar-grid label { position: relative; cursor: pointer; }
.avatar-grid input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-grid .av {
aspect-ratio: 1; border: 3px solid var(--dark); border-radius: 14px;
background: var(--white); display: grid; place-items: center; font-size: 24px;
transition: all 0.15s ease; box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}
.avatar-grid label:hover .av { transform: translateY(-2px); }
.avatar-grid input:checked + .av { background: var(--yellow); transform: translateY(-3px); box-shadow: 0 5px 0 rgba(0,0,0,0.18); }
.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; justify-content: center; width: 100%; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--coral); color: white; }
.helper { text-align: center; margin-top: 18px; font-size: 14px; font-weight: 500; color: rgba(45,45,45,0.7); }
.helper a { color: var(--coral); font-weight: 700; text-decoration: none; }
.helper a:hover { text-decoration: underline; }
@media (max-width: 480px) {
main { margin: 0 auto; padding: 16px; }
.card { padding: 28px 22px; }
.room-code-input { font-size: 22px; letter-spacing: 8px; }
.avatar-grid { grid-template-columns: repeat(4, 1fr); }
.doodle { display: none; }
}
</style>
</head>
<body>
<!-- decorative doodles -->
<svg class="doodle d1" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="20" fill="#FFD23F" stroke="#2D2D2D" stroke-width="3"/><circle cx="24" cy="26" r="2" fill="#2D2D2D"/><circle cx="36" cy="26" r="2" fill="#2D2D2D"/><path d="M22 36 Q30 42 38 36" stroke="#2D2D2D" stroke-width="3" fill="none" stroke-linecap="round"/></svg>
<svg class="doodle d2" width="70" height="70" viewBox="0 0 70 70"><path d="M10 50 Q35 10 60 50" stroke="#FF5C5C" stroke-width="4" fill="none" stroke-linecap="round"/><circle cx="35" cy="20" r="6" fill="#FF5C5C"/></svg>
<svg class="doodle d3" width="60" height="60" viewBox="0 0 60 60"><polygon points="30,8 36,24 53,25 40,36 44,52 30,43 16,52 20,36 7,25 24,24" fill="#A593E0" stroke="#2D2D2D" stroke-width="3" stroke-linejoin="round"/></svg>
<svg class="doodle d4" width="80" height="60" viewBox="0 0 80 60"><ellipse cx="40" cy="30" rx="30" ry="22" fill="#5BCEFA" stroke="#2D2D2D" stroke-width="3"/><polygon points="20,40 25,55 35,42" fill="#5BCEFA" stroke="#2D2D2D" stroke-width="3" stroke-linejoin="round"/></svg>
<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>
<section class="card">
<div class="card-header">
<div class="icon-circle">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>
</div>
<h1>Join the room</h1>
<p>Enter your friend's room code to jump in.</p>
</div>
<div class="field">
<div class="field-label">
<label for="room-code">Room code</label>
<span class="meta">6 characters</span>
</div>
<input id="room-code" class="room-code-input" type="text" maxlength="6" placeholder="XXXXXX" value="MIA42K" data-testid="input-room-code">
</div>
<div class="field">
<div class="field-label">
<label for="nickname">Your nickname</label>
<span class="meta">3-16 chars</span>
</div>
<input id="nickname" class="nick-input" type="text" maxlength="16" placeholder="What should we call you?" value="Suki" data-testid="input-nickname">
</div>
<div class="field">
<div class="field-label">
<label>Pick your avatar</label>
<span class="meta">Tap to choose</span>
</div>
<div class="avatar-grid" data-testid="avatar-grid">
<label><input type="radio" name="avatar" value="cat"><div class="av">🐱</div></label>
<label><input type="radio" name="avatar" value="fox" checked><div class="av">🦊</div></label>
<label><input type="radio" name="avatar" value="bear"><div class="av">🐻</div></label>
<label><input type="radio" name="avatar" value="frog"><div class="av">🐸</div></label>
<label><input type="radio" name="avatar" value="owl"><div class="av">🦉</div></label>
<label><input type="radio" name="avatar" value="panda"><div class="av">🐼</div></label>
<label><input type="radio" name="avatar" value="uni"><div class="av">🦄</div></label>
<label><input type="radio" name="avatar" value="dog"><div class="av">🐶</div></label>
</div>
</div>
<a href="04-lobby.html" class="btn btn-primary" data-testid="btn-join">
Join 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>
<p class="helper">No code? <a href="02-create-room.html">Create your own room</a> instead.</p>
</section>
</main>
</body>
</html>