feat: design mockup preview site
This commit is contained in:
PM
+165
@@ -0,0 +1,165 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>DrawTogether — Design Mockups</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}
|
||||
html,body{margin:0;padding:0}
|
||||
body{
|
||||
font-family:'Fredoka',system-ui,sans-serif;
|
||||
background:#FFF8E7;
|
||||
color:#2D2D2D;
|
||||
min-height:100vh;
|
||||
padding:48px 24px 96px;
|
||||
}
|
||||
.wrap{max-width:1100px;margin:0 auto}
|
||||
header{text-align:center;margin-bottom:48px}
|
||||
.logo{
|
||||
display:inline-block;
|
||||
background:#FFD23F;
|
||||
border:3px solid #2D2D2D;
|
||||
border-radius:999px;
|
||||
padding:8px 24px;
|
||||
font-weight:700;
|
||||
font-size:18px;
|
||||
box-shadow:0 5px 0 rgba(0,0,0,0.15);
|
||||
letter-spacing:.04em;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
h1{
|
||||
font-size:clamp(36px,6vw,64px);
|
||||
margin:0 0 12px;
|
||||
font-weight:700;
|
||||
letter-spacing:-.01em;
|
||||
}
|
||||
.sub{
|
||||
font-size:18px;
|
||||
color:#5a5a5a;
|
||||
max-width:640px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.badge{
|
||||
display:inline-block;
|
||||
background:#A593E0;
|
||||
color:#fff;
|
||||
border:3px solid #2D2D2D;
|
||||
border-radius:999px;
|
||||
padding:6px 16px;
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
margin-top:16px;
|
||||
box-shadow:0 4px 0 rgba(0,0,0,0.18);
|
||||
}
|
||||
.grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
|
||||
gap:28px;
|
||||
margin-top:48px;
|
||||
}
|
||||
.card{
|
||||
background:#fff;
|
||||
border:3px solid #2D2D2D;
|
||||
border-radius:22px;
|
||||
box-shadow:0 6px 0 rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.08);
|
||||
overflow:hidden;
|
||||
transition:transform .15s ease,box-shadow .15s ease;
|
||||
text-decoration:none;
|
||||
color:inherit;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.card:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(0,0,0,0.12),0 4px 12px rgba(0,0,0,0.1)}
|
||||
.preview{
|
||||
aspect-ratio:16/10;
|
||||
border-bottom:3px solid #2D2D2D;
|
||||
background:#FFF8E7;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.preview iframe{
|
||||
position:absolute;
|
||||
top:0;left:0;
|
||||
width:1280px;
|
||||
height:800px;
|
||||
transform:scale(0.32);
|
||||
transform-origin:top left;
|
||||
pointer-events:none;
|
||||
border:0;
|
||||
}
|
||||
.meta{padding:18px 22px}
|
||||
.num{
|
||||
display:inline-block;
|
||||
background:#4ECDC4;
|
||||
color:#2D2D2D;
|
||||
border:2px solid #2D2D2D;
|
||||
border-radius:999px;
|
||||
padding:2px 12px;
|
||||
font-weight:700;
|
||||
font-size:13px;
|
||||
}
|
||||
.name{font-size:20px;font-weight:600;margin:8px 0 4px}
|
||||
.desc{font-size:14px;color:#666;line-height:1.4}
|
||||
.footer{
|
||||
text-align:center;
|
||||
margin-top:64px;
|
||||
color:#888;
|
||||
font-size:14px;
|
||||
}
|
||||
.palette{display:flex;justify-content:center;gap:10px;margin-top:24px}
|
||||
.swatch{width:28px;height:28px;border-radius:50%;border:2.5px solid #2D2D2D;box-shadow:0 3px 0 rgba(0,0,0,0.2)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header>
|
||||
<span class="logo">DrawTogether</span>
|
||||
<h1>Design mockups</h1>
|
||||
<p class="sub">Skribbl + Gartic Phone + Collaborative coloring — three games, one cartoon-cozy room. These are static previews. The full app build is in progress.</p>
|
||||
<div class="palette" aria-hidden="true">
|
||||
<span class="swatch" style="background:#FFD23F"></span>
|
||||
<span class="swatch" style="background:#FF5C5C"></span>
|
||||
<span class="swatch" style="background:#4ECDC4"></span>
|
||||
<span class="swatch" style="background:#A593E0"></span>
|
||||
<span class="swatch" style="background:#5BCEFA"></span>
|
||||
</div>
|
||||
<div><span class="badge">Stage 1 of 3 — Designs</span></div>
|
||||
</header>
|
||||
|
||||
<section class="grid" id="grid"></section>
|
||||
|
||||
<p class="footer">Tap any card to open the full mockup. Pinch / zoom freely on mobile.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const items = [
|
||||
{ f:"01-landing.html", n:"Landing", d:"Hero, three-mode showcase, primary CTAs." },
|
||||
{ f:"02-create-room.html", n:"Create room", d:"Mode picker + game settings." },
|
||||
{ f:"03-join-room.html", n:"Join room", d:"Code + nickname + emoji avatar." },
|
||||
{ f:"04-lobby.html", n:"Lobby", d:"Players, settings, chat, share link." },
|
||||
{ f:"05-skribbl-game.html", n:"Skribbl game", d:"Draw & guess with timer, hint, scoreboard." },
|
||||
{ f:"06-gartic-game.html", n:"Gartic Phone", d:"Telephone-style draw / guess flow." },
|
||||
{ f:"07-color-game.html", n:"Color Together", d:"Shared coloring canvas with presence cursors." },
|
||||
{ f:"08-results.html", n:"Results", d:"Tabbed scoreboard / book playback / final art." },
|
||||
];
|
||||
const grid = document.getElementById("grid");
|
||||
items.forEach((it,i)=>{
|
||||
const a = document.createElement("a");
|
||||
a.className = "card";
|
||||
a.href = "designs/" + it.f;
|
||||
a.innerHTML = `
|
||||
<div class="preview"><iframe src="designs/${it.f}" loading="lazy" tabindex="-1" aria-hidden="true"></iframe></div>
|
||||
<div class="meta">
|
||||
<span class="num">${String(i+1).padStart(2,"0")}</span>
|
||||
<div class="name">${it.n}</div>
|
||||
<div class="desc">${it.d}</div>
|
||||
</div>`;
|
||||
grid.appendChild(a);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user