`data/artifacts/0715b25a41dd/qwen25-7b.html`

129 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Last Echoes: Dying Tongue Explainer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0e6d5;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            max-width: 1440px;
            margin: 20px auto;
            padding: 20px;
            box-sizing: border-box;
        }
        header {
            background-color: #c5cae9;
            text-align: center;
            padding: 20px;
        }
        h1, p {
            margin: 0;
        }
        .map {
            width: 100%;
            height: 400px;
            position: relative;
            background-image: url('https://via.placeholder.com/150x400');
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
        .phrasebook {
            width: 100%;
            margin-top: 20px;
        }
        #clock, #phrasebook {
            margin-bottom: 10px;
        }
        @media (max-width: 390px) {
            .container {
                padding: 10px;
            }
            .map, .phrasebook {
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>The Last Echoes of Quetran: A Dying Language</h1>
            <p>Click on the map to hear phonemes and save words into our phrasebook.</p>
        </header>
        
        <section id="map-container" role="region" aria-live="polite">
            <div class="map" tabindex="0"></div>
        </section>
        
        <section id="clock-container" role="timer">
            <h2>Speaker Count: 100</h2>
            <p>The last speakers are vanishing. Each click gets us closer.</p>
        </section>
        
        <section class="phrasebook" aria-label="Phrasebook">
            <div id="phrasebook-container">
                <h2>Words Saved in the Phrasebook:</h2>
                <ul id="saved-words"></ul>
            </div>
        </section>

        <script>
            // Mock data for the phonemes and words
            const mapData = [
                { x: 50, y: 100, phoneme: "k", word: "quatran" },
                { x: 200, y: 180, phoneme: "e", word: "etran" },
                { x: 350, y: 300, phoneme: "t", word: "tranz" }
            ];

            const clock = document.getElementById('clock-container');
            const savedWordsList = document.getElementById('saved-words');

            function updateSpeakerCount() {
                const currentCount = parseInt(clock.querySelector('h2').textContent);
                if (currentCount > 0) {
                    clock.querySelector('h2').textContent = `${currentCount - 1}`;
                } else {
                    alert("All speakers have vanished. The language is gone.");
                }
            }

            document.addEventListener('keydown', function(event) {
                const key = String.fromCharCode(event.keycode);
                if (['k', 'e', 't'].includes(key)) {
                    updateSpeakerCount();
                    saveWordToPhrasebook(key);
                }
            });

            function saveWordToPhrasebook(word) {
                savedWordsList.innerHTML += `<li>${word}</li>`;
            }

            document.querySelector('.map').addEventListener('click', (event) => {
                const rect = event.target.getBoundingClientRect();
                const clickX = event.clientX - rect.left;
                const clickY = event.clientY - rect.top;

                mapData.forEach(item => {
                    if ((item.x - 10 < clickX && clickX < item.x + 10) &&
                        (item.y - 10 < clickY && clickY < item.y + 10)) {
                        const phoneme = item.phoneme;
                        alert(`You heard the phoneme: ${phoneme}`);
                        updateSpeakerCount();
                        saveWordToPhrasebook(item.word);
                    }
                });
            });
        </script>
    </div>
</body>
</html>