feat: design mockup preview site
This commit is contained in:
PM
@@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DrawTogether - Play Together, Draw Together</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; overflow-x: hidden; }
|
||||
|
||||
/* Header */
|
||||
.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; letter-spacing: 0.5px; }
|
||||
.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);
|
||||
}
|
||||
.nav-actions { display: flex; gap: 12px; align-items: center; }
|
||||
.nav-link { font-weight: 600; color: var(--dark); text-decoration: none; padding: 8px 16px; border-radius: 999px; }
|
||||
.nav-link:hover { background: rgba(255,210,63,0.4); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
max-width: 1280px; margin: 0 auto; padding: 40px 32px 60px;
|
||||
display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: var(--white); padding: 8px 16px; border-radius: 999px;
|
||||
font-weight: 600; font-size: 14px; box-shadow: var(--shadow-card);
|
||||
border: 2px solid var(--dark); margin-bottom: 20px;
|
||||
}
|
||||
.hero-eyebrow .dot { width: 10px; height: 10px; background: var(--mint); border-radius: 50%; }
|
||||
.hero h1 {
|
||||
font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.05;
|
||||
letter-spacing: -0.5px; margin-bottom: 20px;
|
||||
}
|
||||
.hero h1 .accent { color: var(--coral); position: relative; display: inline-block; }
|
||||
.hero h1 .accent::after {
|
||||
content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 14px;
|
||||
background: var(--yellow); z-index: -1; border-radius: 8px;
|
||||
}
|
||||
.hero p.lead { font-size: 18px; line-height: 1.5; max-width: 480px; margin-bottom: 32px; font-weight: 500; }
|
||||
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||
|
||||
.btn {
|
||||
font-family: inherit; font-weight: 700; font-size: 18px;
|
||||
padding: 18px 32px; border-radius: 999px; border: 3px solid var(--dark);
|
||||
cursor: pointer; box-shadow: var(--shadow-btn); transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.3px;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.14); }
|
||||
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
|
||||
.btn-primary { background: var(--coral); color: var(--white); }
|
||||
.btn-secondary { background: var(--mint); color: var(--dark); }
|
||||
.btn-ghost { background: var(--white); color: var(--dark); }
|
||||
|
||||
/* Hero illustration */
|
||||
.hero-art { position: relative; min-height: 420px; }
|
||||
.canvas-prop {
|
||||
position: absolute; inset: 0; background: var(--white); border: 3px solid var(--dark);
|
||||
border-radius: 28px; box-shadow: var(--shadow-card); padding: 24px;
|
||||
display: flex; flex-direction: column; gap: 12px;
|
||||
}
|
||||
.canvas-top { display: flex; gap: 6px; }
|
||||
.canvas-top span { width: 12px; height: 12px; border-radius: 50%; background: #e6e6e6; }
|
||||
.canvas-top span:nth-child(1) { background: var(--coral); }
|
||||
.canvas-top span:nth-child(2) { background: var(--yellow); }
|
||||
.canvas-top span:nth-child(3) { background: var(--mint); }
|
||||
.canvas-svg { flex: 1; display: grid; place-items: center; }
|
||||
.float-tag {
|
||||
position: absolute; padding: 10px 16px; border-radius: 999px; background: var(--white);
|
||||
font-weight: 700; font-size: 14px; border: 3px solid var(--dark); box-shadow: var(--shadow-card);
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.float-tag.t1 { top: -14px; left: -10px; background: var(--yellow); animation: float 3.5s ease-in-out infinite; }
|
||||
.float-tag.t2 { top: 30%; right: -30px; background: var(--lavender); color: var(--white); animation: float 3.5s ease-in-out infinite 0.8s; }
|
||||
.float-tag.t3 { bottom: 10px; left: -22px; background: var(--sky); animation: float 3.5s ease-in-out infinite 1.6s; }
|
||||
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
|
||||
|
||||
/* Modes */
|
||||
.modes { max-width: 1280px; margin: 0 auto; padding: 40px 32px 80px; }
|
||||
.modes-title { text-align: center; margin-bottom: 40px; }
|
||||
.modes-title h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; }
|
||||
.modes-title p { color: rgba(45,45,45,0.7); font-weight: 500; margin-top: 10px; font-size: 18px; }
|
||||
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||||
.mode-card {
|
||||
background: var(--white); border: 3px solid var(--dark); border-radius: 24px;
|
||||
padding: 28px; box-shadow: var(--shadow-card);
|
||||
display: flex; flex-direction: column; gap: 16px;
|
||||
transition: transform 0.2s ease;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.mode-card:hover { transform: translateY(-6px); }
|
||||
.mode-card .ribbon {
|
||||
position: absolute; top: 16px; right: -28px; transform: rotate(35deg);
|
||||
background: var(--yellow); padding: 4px 32px; font-size: 12px; font-weight: 700;
|
||||
border-top: 2px solid var(--dark); border-bottom: 2px solid var(--dark);
|
||||
}
|
||||
.mode-icon {
|
||||
width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
|
||||
border: 3px solid var(--dark); box-shadow: 0 4px 0 rgba(0,0,0,0.15);
|
||||
}
|
||||
.mode-icon.skribbl { background: var(--coral); }
|
||||
.mode-icon.gartic { background: var(--mint); }
|
||||
.mode-icon.color { background: var(--lavender); }
|
||||
.mode-card h3 { font-size: 24px; font-weight: 700; }
|
||||
.mode-card p { font-size: 15px; line-height: 1.5; color: rgba(45,45,45,0.75); font-weight: 500; }
|
||||
.mode-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; background: var(--cream); border-radius: 999px; align-self: flex-start; }
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background: var(--dark); color: var(--cream); padding: 36px 32px;
|
||||
border-top-left-radius: 32px; border-top-right-radius: 32px;
|
||||
}
|
||||
.footer-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
|
||||
.footer-inner .logo { color: var(--cream); }
|
||||
.footer-inner .logo-mark { background: var(--yellow); }
|
||||
.footer-links { display: flex; gap: 24px; }
|
||||
.footer-links a { color: var(--cream); text-decoration: none; font-weight: 500; opacity: 0.8; }
|
||||
.footer-links a:hover { opacity: 1; }
|
||||
.copyright { font-size: 14px; opacity: 0.65; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero { grid-template-columns: 1fr; padding-bottom: 40px; }
|
||||
.hero-art { min-height: 320px; max-width: 420px; margin: 0 auto; width: 100%; }
|
||||
.mode-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.site-header { padding: 16px; }
|
||||
.nav-link { display: none; }
|
||||
.hero { padding: 24px 16px 32px; }
|
||||
.modes { padding: 24px 16px 60px; }
|
||||
.btn { padding: 14px 22px; font-size: 16px; }
|
||||
.hero-eyebrow { font-size: 12px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="logo">
|
||||
<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" stroke-linejoin="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"/><circle cx="6" cy="6" r="2"/></svg>
|
||||
</div>
|
||||
DrawTogether
|
||||
</div>
|
||||
<nav class="nav-actions">
|
||||
<a href="#modes" class="nav-link">Modes</a>
|
||||
<a href="#how" class="nav-link">How it Works</a>
|
||||
<a href="03-join-room.html" class="btn btn-ghost" style="padding: 10px 20px; font-size: 15px;" data-testid="nav-join">Join Room</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<div class="hero-eyebrow"><span class="dot"></span> Live now: 2,418 players drawing together</div>
|
||||
<h1>Draw, guess & <span class="accent">color</span> with friends</h1>
|
||||
<p class="lead">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.</p>
|
||||
<div class="hero-ctas">
|
||||
<a href="02-create-room.html" class="btn btn-primary" data-testid="cta-create-room">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
|
||||
Create Room
|
||||
</a>
|
||||
<a href="03-join-room.html" class="btn btn-secondary" data-testid="cta-join-room">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>
|
||||
Join Room
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-art">
|
||||
<div class="canvas-prop">
|
||||
<div class="canvas-top"><span></span><span></span><span></span></div>
|
||||
<div class="canvas-svg">
|
||||
<svg width="100%" height="100%" viewBox="0 0 320 280" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- cat doodle -->
|
||||
<ellipse cx="160" cy="200" rx="90" ry="50" fill="#FFD23F" stroke="#2D2D2D" stroke-width="4"/>
|
||||
<circle cx="160" cy="130" r="65" fill="#FFD23F" stroke="#2D2D2D" stroke-width="4"/>
|
||||
<polygon points="105,90 95,40 145,80" fill="#FFD23F" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/>
|
||||
<polygon points="215,90 225,40 175,80" fill="#FFD23F" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/>
|
||||
<circle cx="138" cy="125" r="8" fill="#2D2D2D"/>
|
||||
<circle cx="182" cy="125" r="8" fill="#2D2D2D"/>
|
||||
<circle cx="141" cy="122" r="3" fill="white"/>
|
||||
<circle cx="185" cy="122" r="3" fill="white"/>
|
||||
<path d="M150 150 Q160 158 170 150" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M150 155 Q145 170 155 175" stroke="#2D2D2D" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<path d="M170 155 Q175 170 165 175" stroke="#2D2D2D" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<line x1="105" y1="135" x2="80" y2="130" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="105" y1="142" x2="80" y2="145" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="215" y1="135" x2="240" y2="130" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="215" y1="142" x2="240" y2="145" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
||||
<!-- pencil cursor -->
|
||||
<g transform="translate(230,180) rotate(35)">
|
||||
<rect x="0" y="0" width="50" height="14" rx="3" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="3"/>
|
||||
<polygon points="50,0 60,7 50,14" fill="#FFD23F" stroke="#2D2D2D" stroke-width="3" stroke-linejoin="round"/>
|
||||
<polygon points="60,7 65,5 65,9" fill="#2D2D2D"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-tag t1">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg>
|
||||
Mia guessed it!
|
||||
</div>
|
||||
<div class="float-tag t2">+120 pts</div>
|
||||
<div class="float-tag t3">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||
47s
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="modes" id="modes">
|
||||
<div class="modes-title">
|
||||
<h2>Three ways to play</h2>
|
||||
<p>Pick a mode, invite your crew, get drawing</p>
|
||||
</div>
|
||||
<div class="mode-grid">
|
||||
<article class="mode-card" data-testid="mode-card-skribbl">
|
||||
<div class="ribbon">CLASSIC</div>
|
||||
<div class="mode-icon skribbl">
|
||||
<svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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>
|
||||
<span class="mode-tag">2-12 players</span>
|
||||
<h3>Skribbl Race</h3>
|
||||
<p>One player draws a secret word, everyone else races to guess. Fast, chaotic, hilarious.</p>
|
||||
</article>
|
||||
<article class="mode-card" data-testid="mode-card-gartic">
|
||||
<div class="mode-icon gartic">
|
||||
<svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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"/><path d="M8 9h8M8 13h5"/></svg>
|
||||
</div>
|
||||
<span class="mode-tag">4-10 players</span>
|
||||
<h3>Gartic Phone</h3>
|
||||
<p>Telephone-game with drawings. Write a prompt, draw what you got, guess what they drew.</p>
|
||||
</article>
|
||||
<article class="mode-card" data-testid="mode-card-color">
|
||||
<div class="ribbon">CHILL</div>
|
||||
<div class="mode-icon color">
|
||||
<svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="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>
|
||||
<span class="mode-tag">2-6 players</span>
|
||||
<h3>Color Together</h3>
|
||||
<p>A shared coloring book. Pick a canvas, fill it in together. Snapshot & save your art.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-inner">
|
||||
<div class="logo">
|
||||
<div class="logo-mark">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#2D2D2D" 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
|
||||
</div>
|
||||
<nav class="footer-links">
|
||||
<a href="#">About</a>
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">GitHub</a>
|
||||
</nav>
|
||||
<div class="copyright">© 2026 DrawTogether</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user