thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home3 Play card: 'bleeding boards' graphic (Wordle + BYTES word-search + Memory Match)

Browse Source 
Decorative tiles (no live answer = no spoilers); placeholder copy. Built from CD's
Play Card Graphic handoff.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-21 22:18:12 -04:00
parent d85e174a35
commit 79fb9b44fc
1 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+60 -8
View File
@@ -87,10 +87,40 @@
<!-- bottom pair -->
<div class="pair">
<a class="card play" href="/play">
<span class="label" style="color:#D2861B">PLAY</span>
<h3>A little daily puzzle</h3>
<p class="play-copy">Daily Word, Word Search, Bloom, Memory Match.</p>
<span class="link play-link">Enter</span>
<div class="play-top">
<span class="label" style="color:#D2861B">PLAY</span>
<h3>A little daily puzzle</h3>
</div>
<!-- "bleeding boards": three game motifs clipping at the card edges (decorative) -->
<div class="play-band" aria-hidden="true">
<div class="wb">
<div class="wb-row"><span class="wb-t wb-g">B</span><span class="wb-t wb-a">Y</span><span class="wb-t wb-n">R</span><span class="wb-t wb-a">E</span></div>
<div class="wb-row"><span class="wb-t wb-g">B</span><span class="wb-t wb-g">Y</span><span class="wb-t wb-g">T</span><span class="wb-t wb-g">E</span></div>
<div class="wb-row"><span class="wb-t wb-e"></span><span class="wb-t wb-e"></span><span class="wb-t wb-e"></span><span class="wb-t wb-d"></span></div>
</div>
<div class="ws">
<span>K</span><span>R</span><span>O</span><span>A</span><span>E</span><span>S</span>
<span class="hl">B</span><span class="hl">Y</span><span class="hl">T</span><span class="hl">E</span><span class="hl">S</span><span>W</span>
<span>T</span><span>I</span><span>M</span><span>U</span><span>H</span><span>P</span>
<span>G</span><span>E</span><span>B</span><span>O</span><span>R</span><span>L</span>
<span>F</span><span>I</span><span>N</span><span>D</span><span>C</span><span>A</span>
<span>Z</span><span>O</span><span>S</span><span>E</span><span>K</span><span>Y</span>
</div>
<div class="mm">
<span class="mm-a"></span>
<span class="mm-w"><span class="mm-dot" style="background:#6bbf8c"></span></span>
<span class="mm-a"></span>
<span class="mm-w"><span class="mm-dot" style="background:#6bbf8c"></span></span>
<span class="mm-a"></span>
<span class="mm-a"></span>
<span class="mm-a"></span>
<span class="mm-w"><span class="mm-dot" style="background:#D2861B"></span></span>
<span class="mm-a"></span>
</div>
</div>
<div class="play-foot"><span class="link play-link">Enter</span></div>
</a>
<div class="card moment">
<div class="moment-top">
@@ -204,10 +234,32 @@
/* bottom pair */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.play { background: #FFF3DC; border: 1px solid #f6e2b8; padding: 22px 24px; display: flex; flex-direction: column; }
.play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 9px 0 8px; color: #5c3d0c; }
.play-copy { font-size: 13px; line-height: 1.5; color: #917642; margin: 0; }
.play-link { margin-top: auto; padding-top: 16px; color: #D2861B; border-bottom: 2px solid #f0c878; }
.play { background: #FFF3DC; border: 1px solid #f6e2b8; display: flex; flex-direction: column; }
.play-top { padding: 22px 24px 0; }
.play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 14px 0 0; color: #5c3d0c; }
.play-foot { margin-top: auto; padding: 16px 24px 22px; }
.play-link { color: #D2861B; border-bottom: 2px solid #f0c878; }
/* "bleeding boards" — three game motifs clipping at the card edges (decorative) */
.play-band { position: relative; height: 116px; margin-top: 24px; overflow: hidden; }
.wb { position: absolute; top: 50%; left: -34px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.wb-row { display: flex; gap: 4px; }
.wb-t { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
.wb-g { background: #6bbf8c; } .wb-a { background: #E6A02C; } .wb-n { background: #d9c39a; }
.wb-e { background: #fff; border: 1.5px solid #ecca84; } .wb-d { background: #fff; border: 1.5px dashed #e0bb6f; }
.ws {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
display: grid; grid-template-columns: repeat(6, 18px); gap: 3px;
font-weight: 600; font-size: 11px; color: #d4b576; text-align: center;
background: #fff; border: 1.5px solid #f0d597; border-radius: 10px; padding: 10px;
box-shadow: 0 4px 14px -8px rgba(210, 134, 27, 0.5);
}
.ws .hl { color: #D2861B; }
.mm { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 5px; }
.mm > span { border-radius: 6px; }
.mm-a { background: #E6A02C; }
.mm-w { background: #fff; border: 1.5px solid #f0d597; display: flex; align-items: center; justify-content: center; }
.mm-dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
.moment { background: #E6F3E9; border: 1px solid #cee6d3; padding: 22px 24px; display: flex; flex-direction: column; }
.moment-top { display: flex; align-items: center; justify-content: space-between; }