feat: design mockup preview site
This commit is contained in:
PM
@@ -0,0 +1,427 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over - 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; }
|
||||
|
||||
/* confetti */
|
||||
.confetti { position: absolute; pointer-events: none; }
|
||||
.c1 { top: 80px; left: 8%; animation: float 4s ease-in-out infinite; }
|
||||
.c2 { top: 140px; right: 10%; animation: float 4s ease-in-out infinite 1s; }
|
||||
.c3 { top: 60px; left: 40%; animation: float 4s ease-in-out infinite 2s; }
|
||||
@keyframes float { 0%,100% { transform: translateY(0) rotate(-8deg);} 50%{transform: translateY(-12px) rotate(8deg);} }
|
||||
|
||||
.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: 22px; text-decoration: none; color: inherit; }
|
||||
.logo-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--coral); display: grid; place-items: center; box-shadow: var(--shadow-card); transform: rotate(-6deg); }
|
||||
|
||||
main { max-width: 1100px; margin: 0 auto; padding: 12px 28px 80px; position: relative; z-index: 2; }
|
||||
|
||||
.page-title { text-align: center; margin-bottom: 22px; }
|
||||
.page-title h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.5px; }
|
||||
.page-title .accent-bg { background: var(--yellow); padding: 0 14px; border-radius: 12px; display: inline-block; transform: rotate(-1deg); }
|
||||
.page-title p { font-weight: 600; color: rgba(45,45,45,0.65); margin-top: 8px; font-size: 17px; }
|
||||
|
||||
/* Tabs */
|
||||
.tabs-wrap { display: flex; justify-content: center; margin-bottom: 24px; }
|
||||
.tabs {
|
||||
display: inline-flex; padding: 6px; background: var(--white); border: 3px solid var(--dark);
|
||||
border-radius: 999px; box-shadow: var(--shadow-card); gap: 4px;
|
||||
}
|
||||
.tab-input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.tab-label {
|
||||
padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 14px;
|
||||
cursor: pointer; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.tab-label:hover { background: var(--cream); }
|
||||
/* Use sibling order: tabs grouped at top, panels show via :checked + general sibling combinator */
|
||||
#tab-skribbl:checked ~ .tabs-wrap label[for=tab-skribbl],
|
||||
#tab-gartic:checked ~ .tabs-wrap label[for=tab-gartic],
|
||||
#tab-color:checked ~ .tabs-wrap label[for=tab-color] {
|
||||
background: var(--coral); color: white; box-shadow: 0 4px 0 rgba(0,0,0,0.18);
|
||||
}
|
||||
.tab-panel { display: none; }
|
||||
#tab-skribbl:checked ~ #panel-skribbl { display: block; }
|
||||
#tab-gartic:checked ~ #panel-gartic { display: block; }
|
||||
#tab-color:checked ~ #panel-color { display: block; }
|
||||
|
||||
/* Skribbl panel */
|
||||
.podium {
|
||||
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.podium-card {
|
||||
background: var(--white); border: 3px solid var(--dark); border-radius: 22px;
|
||||
padding: 22px 18px; box-shadow: var(--shadow-card);
|
||||
text-align: center; position: relative;
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
.podium-card:hover { transform: translateY(-4px); }
|
||||
.podium-card .av {
|
||||
width: 72px; height: 72px; border-radius: 22px; border: 3px solid var(--dark);
|
||||
display: grid; place-items: center; font-size: 38px;
|
||||
margin: 0 auto 10px; box-shadow: 0 4px 0 rgba(0,0,0,0.15);
|
||||
}
|
||||
.podium-card.first { background: var(--yellow); padding-top: 36px; padding-bottom: 32px; }
|
||||
.podium-card.first .av { background: var(--white); width: 84px; height: 84px; font-size: 44px; }
|
||||
.podium-card.second { background: var(--white); }
|
||||
.podium-card.second .av { background: var(--mint); }
|
||||
.podium-card.third { background: var(--white); }
|
||||
.podium-card.third .av { background: var(--lavender); }
|
||||
.trophy-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
|
||||
.trophy {
|
||||
width: 38px; height: 38px; border-radius: 12px;
|
||||
display: grid; place-items: center; border: 2px solid var(--dark);
|
||||
box-shadow: 0 3px 0 rgba(0,0,0,0.18);
|
||||
}
|
||||
.trophy.gold { background: var(--yellow); }
|
||||
.trophy.silver { background: #D3D3D3; }
|
||||
.trophy.bronze { background: #CD7F32; }
|
||||
.podium-card .name { font-size: 22px; font-weight: 700; }
|
||||
.podium-card .pts { font-size: 14px; font-weight: 600; color: rgba(45,45,45,0.7); margin-top: 2px; }
|
||||
.podium-card .pts strong { font-size: 28px; color: var(--coral); display: block; margin-top: 4px; }
|
||||
.podium-card.first .pts strong { color: var(--dark); font-size: 36px; }
|
||||
.ribbon {
|
||||
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--coral); color: white; padding: 4px 14px; border-radius: 999px;
|
||||
border: 2px solid var(--dark); font-size: 12px; font-weight: 700; letter-spacing: 1px;
|
||||
box-shadow: 0 3px 0 rgba(0,0,0,0.18);
|
||||
}
|
||||
|
||||
/* Other rankings */
|
||||
.rest-list { background: var(--white); border: 3px solid var(--dark); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-card); margin-bottom: 24px; }
|
||||
.rest-row { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-bottom: 2px dashed rgba(45,45,45,0.12); }
|
||||
.rest-row:last-child { border-bottom: none; }
|
||||
.rest-row .rank { width: 36px; height: 36px; background: var(--cream); border: 2px solid var(--dark); border-radius: 10px; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
|
||||
.rest-row .av { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--dark); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
|
||||
.rest-row .info { flex: 1; }
|
||||
.rest-row .name { font-weight: 700; }
|
||||
.rest-row .stats { font-size: 12px; font-weight: 600; color: rgba(45,45,45,0.6); }
|
||||
.rest-row .pts { font-weight: 700; font-size: 18px; color: var(--coral); }
|
||||
|
||||
/* Action buttons */
|
||||
.actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn { font-family: inherit; font-weight: 700; font-size: 17px; padding: 16px 32px; 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; }
|
||||
.btn-secondary { background: var(--mint); color: var(--dark); }
|
||||
.btn-ghost { background: var(--white); color: var(--dark); }
|
||||
|
||||
/* Gartic panel — book playback */
|
||||
.book-card { background: var(--white); border: 3px solid var(--dark); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-card); margin-bottom: 24px; }
|
||||
.book-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
|
||||
.book-meta .b-info { display: flex; align-items: center; gap: 10px; }
|
||||
.book-meta .av { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--dark); display: grid; place-items: center; font-size: 22px; }
|
||||
.book-meta h3 { font-size: 18px; font-weight: 700; }
|
||||
.book-meta .meta { font-size: 13px; font-weight: 600; color: rgba(45,45,45,0.6); }
|
||||
.book-nav { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13px; color: rgba(45,45,45,0.7); }
|
||||
.nav-btn { width: 34px; height: 34px; background: var(--cream); border: 2px solid var(--dark); border-radius: 10px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
|
||||
|
||||
.book-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
|
||||
.strip-card {
|
||||
background: var(--cream); border: 2px solid var(--dark); border-radius: 16px;
|
||||
padding: 12px; display: flex; flex-direction: column; gap: 8px;
|
||||
box-shadow: 0 3px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
.strip-card .author { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }
|
||||
.strip-card .author .av { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--dark); display: grid; place-items: center; font-size: 12px; }
|
||||
.strip-card .stage { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(45,45,45,0.55); }
|
||||
.strip-card .content {
|
||||
flex: 1; min-height: 130px; background: var(--white); border-radius: 10px; border: 2px dashed rgba(45,45,45,0.2);
|
||||
display: grid; place-items: center; padding: 10px; text-align: center;
|
||||
}
|
||||
.strip-card .content.text { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--dark); }
|
||||
.strip-card .arrow {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Color final image panel */
|
||||
.final-canvas-wrap { background: var(--white); border: 3px solid var(--dark); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-card); margin-bottom: 24px; }
|
||||
.final-canvas-stage { background: var(--cream); border-radius: 16px; padding: 18px; display: grid; place-items: center; min-height: 380px; border: 2px dashed rgba(45,45,45,0.2); }
|
||||
.canvas-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
|
||||
.canvas-meta h3 { font-size: 22px; font-weight: 700; }
|
||||
.canvas-meta .stats { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.stat-pill { padding: 6px 14px; background: var(--cream); border: 2px solid var(--dark); border-radius: 999px; font-size: 12px; font-weight: 700; }
|
||||
.contributors { display: flex; gap: -8px; }
|
||||
.contributors .av { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--dark); display: grid; place-items: center; font-size: 16px; margin-left: -6px; }
|
||||
.contributors .av:first-child { margin-left: 0; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.podium { grid-template-columns: 1fr; }
|
||||
.book-strip { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg class="confetti c1" width="40" height="40" viewBox="0 0 24 24" fill="#FFD23F" stroke="#2D2D2D" stroke-width="2.5"><polygon points="12 2 15 9 22 9 17 14 19 21 12 17 5 21 7 14 2 9 9 9"/></svg>
|
||||
<svg class="confetti c2" width="36" height="36" viewBox="0 0 24 24" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="2.5"><circle cx="12" cy="12" r="9"/></svg>
|
||||
<svg class="confetti c3" width="44" height="44" viewBox="0 0 24 24" fill="#A593E0" stroke="#2D2D2D" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="3"/></svg>
|
||||
|
||||
<header class="site-header">
|
||||
<a class="logo" href="01-landing.html">
|
||||
<div class="logo-mark"><svg width="22" height="22" 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="04-lobby.html" class="btn btn-ghost" style="padding: 10px 20px; font-size: 14px; border-width: 2px;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
|
||||
Back to lobby
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="page-title">
|
||||
<h1>Game over — <span class="accent-bg">nice work</span></h1>
|
||||
<p>5 rounds. 5 players. 1 absolute legend.</p>
|
||||
</div>
|
||||
|
||||
<!-- Tab inputs MUST come before .tabs-wrap and panels for sibling combinator -->
|
||||
<input type="radio" name="results-tab" id="tab-skribbl" class="tab-input" checked>
|
||||
<input type="radio" name="results-tab" id="tab-gartic" class="tab-input">
|
||||
<input type="radio" name="results-tab" id="tab-color" class="tab-input">
|
||||
|
||||
<div class="tabs-wrap">
|
||||
<div class="tabs" data-testid="result-tabs">
|
||||
<label class="tab-label" for="tab-skribbl" data-testid="tab-skribbl">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" 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>
|
||||
Skribbl scores
|
||||
</label>
|
||||
<label class="tab-label" for="tab-gartic" data-testid="tab-gartic">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" 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>
|
||||
Gartic book
|
||||
</label>
|
||||
<label class="tab-label" for="tab-color" data-testid="tab-color">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" 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"/></svg>
|
||||
Color final
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skribbl panel -->
|
||||
<section id="panel-skribbl" class="tab-panel" data-testid="panel-skribbl">
|
||||
<div class="podium">
|
||||
<article class="podium-card second">
|
||||
<div class="trophy-row"><div class="trophy silver"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="6"/><path d="M9 14l-3 7 6-3 6 3-3-7"/></svg></div></div>
|
||||
<div class="av">🦊</div>
|
||||
<div class="name">Suki</div>
|
||||
<div class="pts">2nd · <strong>1840</strong> pts</div>
|
||||
</article>
|
||||
<article class="podium-card first">
|
||||
<div class="ribbon">CHAMPION</div>
|
||||
<div class="trophy-row"><div class="trophy gold"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="6"/><path d="M9 14l-3 7 6-3 6 3-3-7"/></svg></div></div>
|
||||
<div class="av">🦄</div>
|
||||
<div class="name">Mia</div>
|
||||
<div class="pts">1st · <strong>2310</strong></div>
|
||||
</article>
|
||||
<article class="podium-card third">
|
||||
<div class="trophy-row"><div class="trophy bronze"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="8" r="6"/><path d="M9 14l-3 7 6-3 6 3-3-7"/></svg></div></div>
|
||||
<div class="av">🐼</div>
|
||||
<div class="name">Ravi</div>
|
||||
<div class="pts">3rd · <strong>1620</strong> pts</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="rest-list">
|
||||
<div class="rest-row">
|
||||
<div class="rank">4</div>
|
||||
<div class="av" style="background: var(--sky);">🐸</div>
|
||||
<div class="info">
|
||||
<div class="name">Jules</div>
|
||||
<div class="stats">3 correct guesses · 1 perfect drawing</div>
|
||||
</div>
|
||||
<div class="pts">1410</div>
|
||||
</div>
|
||||
<div class="rest-row">
|
||||
<div class="rank">5</div>
|
||||
<div class="av" style="background: var(--coral);">🐱</div>
|
||||
<div class="info">
|
||||
<div class="name">Pat</div>
|
||||
<div class="stats">2 correct guesses · funniest player award 🤣</div>
|
||||
</div>
|
||||
<div class="pts">1180</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a href="04-lobby.html" class="btn btn-primary" data-testid="btn-play-again">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Play Again
|
||||
</a>
|
||||
<a href="02-create-room.html" class="btn btn-secondary" data-testid="btn-new-game">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
||||
New Game
|
||||
</a>
|
||||
<a href="01-landing.html" class="btn btn-ghost">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gartic book panel -->
|
||||
<section id="panel-gartic" class="tab-panel" data-testid="panel-gartic">
|
||||
<div class="book-card">
|
||||
<div class="book-meta">
|
||||
<div class="b-info">
|
||||
<div class="av" style="background: var(--yellow);">🦄</div>
|
||||
<div>
|
||||
<h3>Mia's book</h3>
|
||||
<div class="meta">5 chapters · started with a prompt</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="book-nav">
|
||||
<button class="nav-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg></button>
|
||||
<span>Book 1 / 5</span>
|
||||
<button class="nav-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="book-strip">
|
||||
<div class="strip-card">
|
||||
<div class="stage">Prompt</div>
|
||||
<div class="author"><div class="av" style="background: var(--yellow);">🦄</div> Mia</div>
|
||||
<div class="content text">"a cat riding a unicorn"</div>
|
||||
</div>
|
||||
<div class="strip-card">
|
||||
<div class="stage">Drawing</div>
|
||||
<div class="author"><div class="av" style="background: var(--mint);">🦊</div> Suki</div>
|
||||
<div class="content">
|
||||
<svg viewBox="0 0 100 100" width="100%" height="100%">
|
||||
<ellipse cx="50" cy="65" rx="35" ry="18" fill="#A593E0" stroke="#2D2D2D" stroke-width="2.5"/>
|
||||
<circle cx="32" cy="58" r="14" fill="#FFD23F" stroke="#2D2D2D" stroke-width="2.5"/>
|
||||
<polygon points="22,48 22,38 32,46" fill="#FFD23F" stroke="#2D2D2D" stroke-width="2"/>
|
||||
<polygon points="40,46 40,38 30,46" fill="#FFD23F" stroke="#2D2D2D" stroke-width="2"/>
|
||||
<circle cx="29" cy="58" r="1.5" fill="#2D2D2D"/>
|
||||
<circle cx="35" cy="58" r="1.5" fill="#2D2D2D"/>
|
||||
<polygon points="70,42 75,30 80,42" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="2.5" stroke-linejoin="round"/>
|
||||
<line x1="20" y1="80" x2="20" y2="88" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="40" y1="80" x2="40" y2="88" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="60" y1="80" x2="60" y2="88" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="80" y1="80" x2="80" y2="88" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-card">
|
||||
<div class="stage">Guess</div>
|
||||
<div class="author"><div class="av" style="background: var(--lavender);">🐼</div> Ravi</div>
|
||||
<div class="content text">"horse with a small dragon on top"</div>
|
||||
</div>
|
||||
<div class="strip-card">
|
||||
<div class="stage">Drawing</div>
|
||||
<div class="author"><div class="av" style="background: var(--sky);">🐸</div> Jules</div>
|
||||
<div class="content">
|
||||
<svg viewBox="0 0 100 100" width="100%" height="100%">
|
||||
<ellipse cx="50" cy="65" rx="34" ry="20" fill="#B5651D" stroke="#2D2D2D" stroke-width="2.5"/>
|
||||
<circle cx="22" cy="55" r="12" fill="#B5651D" stroke="#2D2D2D" stroke-width="2.5"/>
|
||||
<polygon points="14,46 16,38 24,48" fill="#B5651D" stroke="#2D2D2D" stroke-width="2"/>
|
||||
<ellipse cx="55" cy="38" rx="14" ry="10" fill="#4ECDC4" stroke="#2D2D2D" stroke-width="2.5"/>
|
||||
<path d="M50 30 Q55 20 60 30" stroke="#FF5C5C" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||
<line x1="20" y1="80" x2="20" y2="92" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="40" y1="80" x2="40" y2="92" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="60" y1="80" x2="60" y2="92" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="80" y1="80" x2="80" y2="92" stroke="#2D2D2D" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-card">
|
||||
<div class="stage">Guess</div>
|
||||
<div class="author"><div class="av" style="background: var(--coral);">🐱</div> Pat</div>
|
||||
<div class="content text">"a brown horse drinking from a cute pond 💧"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a href="04-lobby.html" class="btn btn-primary">Play Again</a>
|
||||
<a href="02-create-room.html" class="btn btn-secondary">New Game</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color final panel -->
|
||||
<section id="panel-color" class="tab-panel" data-testid="panel-color">
|
||||
<div class="final-canvas-wrap">
|
||||
<div class="canvas-meta">
|
||||
<div>
|
||||
<h3>Mandala by the crew</h3>
|
||||
<div style="font-weight:600; color: rgba(45,45,45,0.6); font-size:13px; margin-top:2px;">Created in 18 minutes · 4 contributors</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="stat-pill">412 strokes</span>
|
||||
<span class="stat-pill">8 colors used</span>
|
||||
</div>
|
||||
<div class="contributors">
|
||||
<div class="av" style="background: var(--yellow);">🦄</div>
|
||||
<div class="av" style="background: var(--mint);">🦊</div>
|
||||
<div class="av" style="background: var(--lavender);">🐼</div>
|
||||
<div class="av" style="background: var(--sky);">🐸</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="final-canvas-stage">
|
||||
<svg viewBox="0 0 600 600" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="max-width: 460px;">
|
||||
<defs>
|
||||
<radialGradient id="centerGrad2" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFD23F"/>
|
||||
<stop offset="100%" stop-color="#FF8C42"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="300" cy="300" r="270" fill="rgba(91,206,250,0.2)" stroke="#2D2D2D" stroke-width="3"/>
|
||||
<circle cx="300" cy="300" r="220" fill="rgba(255,210,63,0.35)" stroke="#2D2D2D" stroke-width="3"/>
|
||||
<circle cx="300" cy="300" r="160" fill="rgba(165,147,224,0.7)" stroke="#2D2D2D" stroke-width="3"/>
|
||||
<circle cx="300" cy="300" r="100" fill="rgba(78,205,196,0.85)" stroke="#2D2D2D" stroke-width="3"/>
|
||||
<circle cx="300" cy="300" r="50" fill="url(#centerGrad2)" stroke="#2D2D2D" stroke-width="3"/>
|
||||
|
||||
<g transform="translate(300 300)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(45)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#FFD23F" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(90)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#A593E0" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(135)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#4ECDC4" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(180)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(225)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#FFD23F" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(270)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#A593E0" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
<g transform="translate(300 300) rotate(315)"><path d="M0 -270 Q 22 -210 0 -160 Q -22 -210 0 -270 Z" fill="#4ECDC4" stroke="#2D2D2D" stroke-width="3"/></g>
|
||||
|
||||
<g transform="translate(300 300) rotate(22.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(67.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FF8C42" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(112.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(157.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FF8C42" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(202.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(247.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FF8C42" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(292.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
<g transform="translate(300 300) rotate(337.5)"><path d="M0 -210 Q 18 -180 0 -160 Q -18 -180 0 -210 Z" fill="#FF8C42" stroke="#2D2D2D" stroke-width="2.5"/></g>
|
||||
|
||||
<circle cx="300" cy="300" r="22" fill="#2D2D2D" stroke="#2D2D2D" stroke-width="2.5"/>
|
||||
<circle cx="300" cy="270" r="8" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2"/>
|
||||
<circle cx="330" cy="300" r="8" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2"/>
|
||||
<circle cx="300" cy="330" r="8" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2"/>
|
||||
<circle cx="270" cy="300" r="8" fill="#FFF8E7" stroke="#2D2D2D" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary" data-testid="btn-download">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
||||
Download artwork
|
||||
</button>
|
||||
<a href="02-create-room.html" class="btn btn-secondary">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
||||
New Canvas
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user