index.html (2820B)
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 #game-container { flex: 1; width: 100%; } 23 24 #audio-controls { 25 position: fixed; 26 top: 0.45rem; 27 right: 1rem; 28 display: flex; 29 gap: 0.4rem; 30 z-index: 10; 31 } 32 #audio-controls button { 33 background: rgba(255,255,255,0.08); 34 border: 1px solid rgba(255,255,255,0.18); 35 color: #bbb; 36 font-family: 'Fredoka', sans-serif; 37 font-size: 0.85rem; 38 padding: 0.25rem 0.65rem; 39 border-radius: 6px; 40 cursor: pointer; 41 transition: background 0.15s, color 0.15s; 42 user-select: none; 43 } 44 #audio-controls button:hover { background: rgba(255,255,255,0.16); color: #fff; } 45 #audio-controls button.muted { color: #555; border-color: rgba(255,255,255,0.08); } 46 47 #attribution { 48 position: fixed; 49 bottom: 0.35rem; 50 left: 50%; 51 transform: translateX(-50%); 52 font-size: 0.65rem; 53 color: #333; 54 white-space: nowrap; 55 z-index: 5; 56 pointer-events: none; 57 } 58 #attribution a { 59 color: #445; 60 text-decoration: none; 61 pointer-events: auto; 62 } 63 #attribution a:hover { color: #778; } 64 </style> 65 </head> 66 <body> 67 <nav><a href="../../index.html">← Back to KGames</a></nav> 68 <div id="audio-controls"> 69 <button id="btn-music">Music: ON</button> 70 <button id="btn-sfx">SFX: ON</button> 71 </div> 72 <div id="game-container"></div> 73 <div id="attribution"> 74 Animal art: <a href="https://github.com/jdecked/twemoji" target="_blank" rel="noopener">Twemoji</a> © Twitter, CC-BY 4.0 75 </div> 76 <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script> 77 <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script> 78 <script src="../../js/shared/game-shared.js"></script> 79 <script src="lib.js"></script> 80 <script src="game.js"></script> 81 <script src="../../js/shared/touch-controls.js"></script> 82 <script>KGames.initTouchControls({ layout: 'alphabet' });</script> 83 </body> 84 </html>