index.html (3035B)
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>Animal Letter — 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 50 #attribution { 51 position: fixed; 52 bottom: 0.35rem; 53 left: 50%; 54 transform: translateX(-50%); 55 font-size: 0.65rem; 56 color: #333; 57 white-space: nowrap; 58 z-index: 5; 59 pointer-events: none; 60 } 61 #attribution a { 62 color: #445; 63 text-decoration: none; 64 pointer-events: auto; 65 } 66 #attribution a:hover { color: #778; } 67 </style> 68 </head> 69 <body> 70 <nav><a href="../../index.html">← Back to KGames</a></nav> 71 <div id="audio-controls"> 72 <button id="btn-music">Music: ON</button> 73 <button id="btn-sfx">SFX: ON</button> 74 </div> 75 <div id="game-container"></div> 76 <div id="attribution"> 77 Animal art: <a href="https://github.com/jdecked/twemoji" target="_blank" rel="noopener">Twemoji</a> © Twitter, CC-BY 4.0 78 </div> 79 <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script> 80 <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script> 81 <script src="../../js/shared/game-shared.js"></script> 82 <script src="lib.js"></script> 83 <script src="game.js"></script> 84 <script src="../../js/shared/touch-controls.js"></script> 85 <script>KGames.initTouchControls({ layout: 'alphabet' });</script> 86 </body> 87 </html>