index.html (2449B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Letter Find — KGames</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9 <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap" rel="stylesheet"> 10 <style> 11 * { margin: 0; padding: 0; box-sizing: border-box; } 12 html, body { height: 100%; overflow: hidden; } 13 body { 14 background: #1A1A2E; 15 font-family: 'Fredoka', sans-serif; 16 display: flex; 17 flex-direction: column; 18 } 19 nav { width: 100%; padding: 0.6rem 1.25rem; flex-shrink: 0; } 20 nav a { color: #aaa; text-decoration: none; font-size: 1rem; } 21 nav a:hover { color: #fff; } 22 /* min-height:0 lets this flex item shrink below the canvas's own height, 23 so siblings below it (credits footer, touch bar) stay on screen. */ 24 #game-container { flex: 1; width: 100%; min-height: 0; } 25 #game-container canvas { display: block; } 26 27 #audio-controls { 28 position: fixed; 29 top: 0.45rem; 30 right: 1rem; 31 display: flex; 32 gap: 0.4rem; 33 z-index: 10; 34 } 35 #audio-controls button { 36 background: rgba(255,255,255,0.08); 37 border: 1px solid rgba(255,255,255,0.18); 38 color: #bbb; 39 font-family: 'Fredoka', sans-serif; 40 font-size: 0.85rem; 41 padding: 0.25rem 0.65rem; 42 border-radius: 6px; 43 cursor: pointer; 44 transition: background 0.15s, color 0.15s; 45 user-select: none; 46 } 47 #audio-controls button:hover { background: rgba(255,255,255,0.16); color: #fff; } 48 #audio-controls button.muted { color: #555; border-color: rgba(255,255,255,0.08); } 49 </style> 50 </head> 51 <body> 52 <nav><a href="../../index.html">← Back to KGames</a></nav> 53 <div id="audio-controls"> 54 <button id="btn-music">Music: ON</button> 55 <button id="btn-sfx">SFX: ON</button> 56 </div> 57 <div id="game-container"></div> 58 <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script> 59 <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script> 60 <script src="../../js/shared/game-shared.js"></script> 61 <script src="game.js"></script> 62 <script src="../../js/shared/touch-controls.js"></script> 63 <script>KGames.initTouchControls({ layout: 'alphabet' });</script> 64 </body> 65 </html>