mirror of
https://github.com/tiennm99/colordle.git
synced 2026-09-02 16:19:53 +00:00
tiennm99
ac08938ed6
1. Header declutter — move daily badge + practice controls out of the busy header into the .target section so the puzzle-number / guess counter / streak read as a single hierarchy line. 2. Channel-chip contrast — darken --c-red from #d64545 to #cc3838 for WCAG AA on white text. Drop the 0.85 opacity on .channel-range and bump its font size 0.68→0.72rem; was under AA on colored chips. 3. 44px touch targets — bump padding on .hints-toggle, .share-btn, .mode-switch button, .poss-apply. Grow .help-chip 16→24px with a 4px invisible hit-area ring. 4. Hints-toggle collapsed state — add .possible.collapsed that strips the card chrome when hints are off, so the toggle reads as a standalone pill instead of an empty bordered container. 5. Screen reader polish — tabular-nums on mutating numeric text, aria-live=polite on #result, aria-invalid synced with the .invalid class on RGB inputs.
117 lines
5.0 KiB
HTML
117 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Colordle</title>
|
||
<meta name="description" content="Colordle — a Wordle-style daily color guessing game. Guess the hidden RGB color in six tries.">
|
||
<meta name="theme-color" content="#161616">
|
||
<meta property="og:title" content="Colordle">
|
||
<meta property="og:description" content="Guess the hidden RGB color, one channel at a time.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="colordle_icon.png">
|
||
<meta name="twitter:card" content="summary">
|
||
<link rel="icon" type="image/png" href="favicon.png">
|
||
<link rel="apple-touch-icon" href="favicon.png">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<header>
|
||
<h1>
|
||
<img src="colordle_icon.png" alt="" class="game-icon">
|
||
Colordle
|
||
</h1>
|
||
<div class="mode-switch" id="modeSwitch" role="tablist" aria-label="Game mode">
|
||
<button type="button" data-mode="daily" class="active" role="tab" aria-selected="true">Daily</button>
|
||
<button type="button" data-mode="practice" role="tab" aria-selected="false">Practice</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="target">
|
||
<div class="swatch" id="targetSwatch" aria-label="Target color"></div>
|
||
<p class="counter">
|
||
<span class="daily-badge" id="dailyBadge" hidden>
|
||
<span id="dailyNumber">Colordle #1</span>
|
||
<span class="sep">·</span>
|
||
</span>
|
||
Guess <span id="guessCount">0</span> / <span id="maxGuessesLabel">6</span>
|
||
<span class="daily-streak-wrap" id="dailyStreakWrap" hidden>
|
||
<span class="sep">·</span>
|
||
Streak <span class="daily-streak" id="dailyStreak">0</span>
|
||
</span>
|
||
</p>
|
||
<div class="controls" id="practiceControls">
|
||
<label>
|
||
Max guesses
|
||
<input type="number" id="maxGuesses" value="6" min="1" max="50">
|
||
</label>
|
||
<button id="newGame" type="button">New puzzle</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="input">
|
||
<input type="color" id="colorPicker" value="#808080" aria-label="Pick a color">
|
||
<input type="text" id="hexInput" class="hex-input" value="#808080" maxlength="7"
|
||
inputmode="text" aria-label="Hex color">
|
||
<div class="rgb-group" role="group" aria-label="RGB values">
|
||
<input type="text" id="rInput" value="128" maxlength="3"
|
||
inputmode="numeric" pattern="[0-9]*" aria-label="Red (0-255)">
|
||
<input type="text" id="gInput" value="128" maxlength="3"
|
||
inputmode="numeric" pattern="[0-9]*" aria-label="Green (0-255)">
|
||
<input type="text" id="bInput" value="128" maxlength="3"
|
||
inputmode="numeric" pattern="[0-9]*" aria-label="Blue (0-255)">
|
||
</div>
|
||
<div class="guess-preview" id="guessPreview" aria-label="Current guess preview"></div>
|
||
<button id="submitGuess" type="button">Guess</button>
|
||
</section>
|
||
|
||
<section class="possible" id="possible" aria-label="Hints panel">
|
||
<div class="hints-header">
|
||
<button type="button" id="hintsToggle" class="hints-toggle"
|
||
aria-expanded="false" aria-controls="hintsBody">
|
||
<span class="hints-toggle-caret" aria-hidden="true"></span>
|
||
<span class="hints-toggle-label">Show hints</span>
|
||
</button>
|
||
<span class="help-chip" tabindex="0" role="button"
|
||
aria-label="Explain hints">?</span>
|
||
<div class="help-tooltip" role="tooltip">
|
||
Hints show where the target can still be, after combining
|
||
every guess so far. Each bar spans 0–255 for a channel; the
|
||
<b>highlighted</b> segment is the feasible region. Tick marks
|
||
are your past guess values. Hit <b>Try midpoint</b> for the
|
||
middle of the widest remaining range. Leave hints off for a
|
||
pure challenge.
|
||
</div>
|
||
</div>
|
||
<div class="hints-body" id="hintsBody" hidden>
|
||
<button id="applySuggestion" class="poss-apply" type="button" hidden>
|
||
<span class="poss-apply-label">Try midpoint</span>
|
||
<span class="poss-apply-swatch" id="applySuggestionSwatch"></span>
|
||
<span class="poss-apply-hex" id="applySuggestionHex"></span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="history" id="history" aria-live="polite"></section>
|
||
|
||
<section class="result" id="result" hidden aria-live="polite"></section>
|
||
|
||
<footer>
|
||
<p class="legend">
|
||
<span class="chip red">red</span> far off
|
||
<span class="chip yellow">yellow</span> close
|
||
<span class="chip green">green</span> very close
|
||
<span class="chip exact">✓</span> exact
|
||
</p>
|
||
<p class="note">
|
||
The <b>Possible target</b> bars narrow as you guess — they show
|
||
where each channel can still be. Hit <b>Try midpoint</b> to load
|
||
the middle of the remaining region.
|
||
</p>
|
||
</footer>
|
||
</main>
|
||
<script type="module" src="main.js"></script>
|
||
</body>
|
||
</html>
|