PM
307 lines
17 KiB
HTML
307 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lobby - 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: 18px 28px; max-width: 1400px; margin: 0 auto; }
|
|
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; text-decoration: none; color: inherit; }
|
|
.logo-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--coral); display: grid; place-items: center; box-shadow: var(--shadow-card); transform: rotate(-6deg); }
|
|
.room-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--white); border: 2px solid var(--dark); border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 rgba(0,0,0,0.1); }
|
|
.room-pill .dot { width: 8px; height: 8px; background: var(--mint); border-radius: 50%; }
|
|
|
|
main { max-width: 1400px; margin: 0 auto; padding: 12px 28px 80px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; }
|
|
|
|
.panel { background: var(--white); border: 3px solid var(--dark); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-card); }
|
|
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
|
.panel-header h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
|
.panel-header .icon-pill { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 2px solid var(--dark); }
|
|
.badge { padding: 4px 10px; background: var(--cream); border: 2px solid var(--dark); border-radius: 999px; font-size: 12px; font-weight: 700; }
|
|
|
|
/* Player list */
|
|
.player-list { display: flex; flex-direction: column; gap: 10px; }
|
|
.player {
|
|
display: flex; align-items: center; gap: 12px; padding: 10px 14px;
|
|
background: var(--cream); border-radius: 14px; border: 2px solid transparent;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.player.you { border-color: var(--coral); background: rgba(255,92,92,0.08); }
|
|
.player .avatar {
|
|
width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--dark);
|
|
display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
|
|
}
|
|
.player .avatar.a1 { background: var(--yellow); }
|
|
.player .avatar.a2 { background: var(--mint); }
|
|
.player .avatar.a3 { background: var(--lavender); }
|
|
.player .avatar.a4 { background: var(--sky); }
|
|
.player .avatar.a5 { background: var(--coral); }
|
|
.player .info { flex: 1; min-width: 0; }
|
|
.player .name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
|
|
.player .status { font-size: 12px; color: rgba(45,45,45,0.6); font-weight: 500; }
|
|
.player .crown {
|
|
background: var(--yellow); border: 2px solid var(--dark); border-radius: 6px; padding: 2px 6px;
|
|
display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
|
|
}
|
|
.player .ready {
|
|
width: 24px; height: 24px; background: var(--mint); border: 2px solid var(--dark); border-radius: 50%;
|
|
display: grid; place-items: center; flex-shrink: 0;
|
|
}
|
|
.player .pending {
|
|
width: 24px; height: 24px; background: var(--cream); border: 2px solid rgba(45,45,45,0.3); border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.player .youlbl { font-size: 11px; padding: 2px 6px; background: var(--coral); color: white; border-radius: 6px; font-weight: 700; }
|
|
|
|
.empty-slot {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
padding: 14px; background: transparent; border: 2px dashed rgba(45,45,45,0.25);
|
|
border-radius: 14px; color: rgba(45,45,45,0.5); font-weight: 600; font-size: 14px;
|
|
}
|
|
|
|
/* Right column */
|
|
.right-col { display: flex; flex-direction: column; gap: 24px; }
|
|
|
|
.share-row { display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; background: var(--cream); border: 3px solid var(--dark); border-radius: 14px; }
|
|
.share-row .url { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.copy-btn { padding: 8px 14px; background: var(--coral); color: white; border: 2px solid var(--dark); border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.15); display: inline-flex; align-items: center; gap: 6px; }
|
|
.copy-btn:hover { transform: translateY(-1px); }
|
|
|
|
.room-code-display { text-align: center; padding: 18px; background: var(--cream); border: 3px dashed var(--dark); border-radius: 16px; margin-top: 12px; }
|
|
.room-code-display .lbl { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(45,45,45,0.6); }
|
|
.room-code-display .code { font-size: 32px; font-weight: 700; letter-spacing: 8px; margin-top: 4px; }
|
|
|
|
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
|
|
.setting-item { padding: 12px 14px; background: var(--cream); border-radius: 12px; border: 2px solid rgba(45,45,45,0.1); }
|
|
.setting-item .lbl { font-size: 12px; font-weight: 600; color: rgba(45,45,45,0.6); display: flex; align-items: center; gap: 6px; }
|
|
.setting-item .val { font-size: 17px; font-weight: 700; margin-top: 2px; }
|
|
|
|
.start-btn {
|
|
font-family: inherit; font-weight: 700; font-size: 20px;
|
|
padding: 18px; border-radius: 16px; border: 3px solid var(--dark);
|
|
cursor: pointer; box-shadow: var(--shadow-btn); transition: transform 0.15s ease;
|
|
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
|
|
background: var(--coral); color: white; margin-top: 16px;
|
|
}
|
|
.start-btn:hover { transform: translateY(-2px); }
|
|
|
|
/* Chat */
|
|
.chat-panel { display: flex; flex-direction: column; height: 360px; }
|
|
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; }
|
|
.msg { display: flex; gap: 10px; align-items: flex-start; }
|
|
.msg .av { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--dark); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
|
|
.msg .body { background: var(--cream); padding: 8px 12px; border-radius: 12px 12px 12px 4px; }
|
|
.msg .name { font-weight: 700; font-size: 12px; color: var(--coral); }
|
|
.msg .text { font-size: 14px; font-weight: 500; line-height: 1.4; }
|
|
.msg.system .body { background: rgba(78, 205, 196, 0.18); border: 2px dashed var(--mint); }
|
|
.msg.system .text { font-style: italic; color: rgba(45,45,45,0.7); }
|
|
.chat-input-row { display: flex; gap: 8px; padding-top: 10px; border-top: 2px dashed rgba(45,45,45,0.15); }
|
|
.chat-input { flex: 1; font-family: inherit; font-weight: 500; font-size: 14px; padding: 10px 14px; border: 2px solid var(--dark); border-radius: 999px; background: var(--cream); outline: none; }
|
|
.chat-input:focus { background: var(--white); border-color: var(--coral); }
|
|
.send-btn { width: 44px; height: 44px; background: var(--mint); border: 2px solid var(--dark); border-radius: 50%; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
|
|
|
|
@media (max-width: 900px) {
|
|
main { grid-template-columns: 1fr; padding: 12px 16px 60px; }
|
|
.site-header { padding: 16px; }
|
|
.room-pill .label { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<div class="room-pill" data-testid="room-pill">
|
|
<span class="dot"></span>
|
|
<span class="label">Room</span>
|
|
<strong>MIA42K</strong>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Players panel -->
|
|
<section class="panel" data-testid="panel-players">
|
|
<div class="panel-header">
|
|
<h2>
|
|
<span class="icon-pill" style="background: var(--mint);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
|
|
Players
|
|
</h2>
|
|
<span class="badge">5 / 8</span>
|
|
</div>
|
|
|
|
<div class="player-list">
|
|
<div class="player">
|
|
<div class="avatar a1">🦄</div>
|
|
<div class="info">
|
|
<div class="name">Mia <span class="crown">
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><path d="M2 18l3-12 5 8 2-12 2 12 5-8 3 12z"/></svg>
|
|
HOST</span></div>
|
|
<div class="status">Ready to start</div>
|
|
</div>
|
|
<div class="ready"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
|
</div>
|
|
<div class="player you">
|
|
<div class="avatar a2">🦊</div>
|
|
<div class="info">
|
|
<div class="name">Suki <span class="youlbl">YOU</span></div>
|
|
<div class="status">Joined just now</div>
|
|
</div>
|
|
<div class="ready"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
|
</div>
|
|
<div class="player">
|
|
<div class="avatar a3">🐼</div>
|
|
<div class="info">
|
|
<div class="name">Ravi</div>
|
|
<div class="status">Picking avatar...</div>
|
|
</div>
|
|
<div class="pending"></div>
|
|
</div>
|
|
<div class="player">
|
|
<div class="avatar a4">🐸</div>
|
|
<div class="info">
|
|
<div class="name">Jules</div>
|
|
<div class="status">Ready to start</div>
|
|
</div>
|
|
<div class="ready"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
|
</div>
|
|
<div class="player">
|
|
<div class="avatar a5">🐱</div>
|
|
<div class="info">
|
|
<div class="name">Pat</div>
|
|
<div class="status">Ready to start</div>
|
|
</div>
|
|
<div class="ready"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></div>
|
|
</div>
|
|
|
|
<div class="empty-slot">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
Waiting for player...
|
|
</div>
|
|
<div class="empty-slot">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
Waiting for player...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Right column -->
|
|
<div class="right-col">
|
|
<section class="panel" data-testid="panel-share">
|
|
<div class="panel-header">
|
|
<h2>
|
|
<span class="icon-pill" style="background: var(--lavender);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"/></svg></span>
|
|
Invite friends
|
|
</h2>
|
|
</div>
|
|
<div class="share-row">
|
|
<span class="url">drawtogether.app/r/MIA42K</span>
|
|
<button class="copy-btn" data-testid="btn-copy-link">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<div class="room-code-display">
|
|
<div class="lbl">Or share the code</div>
|
|
<div class="code">MIA42K</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-testid="panel-settings">
|
|
<div class="panel-header">
|
|
<h2>
|
|
<span class="icon-pill" style="background: var(--yellow);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2D2D2D" 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>
|
|
Game settings
|
|
</h2>
|
|
<span class="badge">Skribbl Race</span>
|
|
</div>
|
|
<div class="settings-grid">
|
|
<div class="setting-item">
|
|
<div class="lbl">Rounds</div><div class="val">5</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="lbl">Time / draw</div><div class="val">60s</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="lbl">Max players</div><div class="val">8</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="lbl">Language</div><div class="val">English</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="start-btn" data-testid="btn-start">
|
|
<svg width="22" height="22" 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>
|
|
Start Game
|
|
</button>
|
|
</section>
|
|
|
|
<section class="panel chat-panel" data-testid="panel-chat">
|
|
<div class="panel-header">
|
|
<h2>
|
|
<span class="icon-pill" style="background: var(--sky);"><svg width="16" height="16" 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></span>
|
|
Lobby chat
|
|
</h2>
|
|
</div>
|
|
<div class="chat-messages">
|
|
<div class="msg system">
|
|
<div class="body" style="margin: 0 auto;">
|
|
<div class="text">Suki joined the room</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg">
|
|
<div class="av" style="background: var(--yellow);">🦄</div>
|
|
<div class="body">
|
|
<div class="name">Mia</div>
|
|
<div class="text">heyyy welcome! waiting on Ravi to pick an avatar 🙃</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg">
|
|
<div class="av" style="background: var(--sky);">🐸</div>
|
|
<div class="body">
|
|
<div class="name">Jules</div>
|
|
<div class="text">i call drawing first round <3</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg">
|
|
<div class="av" style="background: var(--coral);">🐱</div>
|
|
<div class="body">
|
|
<div class="name">Pat</div>
|
|
<div class="text">good luck with that lol</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg system">
|
|
<div class="body" style="margin: 0 auto;">
|
|
<div class="text">Mia changed rounds to 5</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-row">
|
|
<input class="chat-input" type="text" placeholder="Say something..." data-testid="chat-input">
|
|
<button class="send-btn" data-testid="btn-send">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|