Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Circular City Quest</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <main class="game-shell"> | |
| <header class="hero"> | |
| <div class="hero__text"> | |
| <p id="eyebrow" class="eyebrow">Interactive micro-lesson</p> | |
| <h1 id="gameTitle">Circular City Quest</h1> | |
| <p id="tagline" class="tagline">You run a circular speaker startup: the prototype sells, but to scale you must tune the product, balancing investor profit goals, user love, and eco rules that could ban you overnight.</p> | |
| </div> | |
| <div class="hero__actions"> | |
| <label class="lang-switch"> | |
| <span id="langLabel">Language</span> | |
| <select id="languageSelect" aria-label="Language select"> | |
| <option value="en">English</option> | |
| <option value="pl">Polski</option> | |
| </select> | |
| </label> | |
| <div class="audio-controls"> | |
| <label class="toggle"> | |
| <input type="checkbox" id="musicToggle" checked> | |
| <span class="toggle__label" id="musicLabel">Music</span> | |
| </label> | |
| <label class="toggle"> | |
| <input type="checkbox" id="sfxToggle" checked> | |
| <span class="toggle__label" id="sfxLabel">SFX</span> | |
| </label> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="stats-grid"> | |
| <div class="stats-visual"> | |
| <img src="głośnik.jpg" alt="Portable speaker" class="product-image"> | |
| </div> | |
| <div class="stats-column"> | |
| <div class="stat"> | |
| <div class="stat__label"> | |
| <span class="dot dot--planet"></span> | |
| <span id="planetLabel">Planet</span> | |
| </div> | |
| <div class="stat__bar"> | |
| <div id="planetBar" class="stat__fill stat__fill--planet" style="width:50%"></div> | |
| </div> | |
| <div id="planetValue" class="stat__value">50</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat__label"> | |
| <span class="dot dot--people"></span> | |
| <span id="peopleLabel">People</span> | |
| </div> | |
| <div class="stat__bar"> | |
| <div id="peopleBar" class="stat__fill stat__fill--people" style="width:50%"></div> | |
| </div> | |
| <div id="peopleValue" class="stat__value">50</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat__label"> | |
| <span class="dot dot--profit"></span> | |
| <span id="profitLabel">Profit</span> | |
| </div> | |
| <div class="stat__bar"> | |
| <div id="profitBar" class="stat__fill stat__fill--profit" style="width:50%"></div> | |
| </div> | |
| <div id="profitValue" class="stat__value">50</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="scene"> | |
| <h2 id="sceneTitle">Scene Title</h2> | |
| <p id="sceneDescription" class="scene__text">Scene description goes here.</p> | |
| <div id="options" class="options"></div> | |
| <p id="feedback" class="feedback"></p> | |
| </section> | |
| <footer class="footer"> | |
| <p id="footerText">Make choices that keep resources flowing, people thriving, and your venture sustainable.</p> | |
| </footer> | |
| <section class="funding"> | |
| <div class="funding__logos"> | |
| <img src="do formularzu 2.jpg" alt="Partner and funding logos"> | |
| </div> | |
| <div class="funding__text"> | |
| <p data-lang="pl">Projekt „SAGE Initiative: Social and Green Entrepreneurship network for youth”<br>nr projektu: 2024-2-PL01-KA220-YOU-000286516</p> | |
| <p data-lang="pl">Dofinansowane ze środków UE. Wyrażone poglądy i opinie są jedynie opiniami autora lub autorów i niekoniecznie odzwierciedlają poglądy i opinie Unii Europejskiej lub Fundacji Rozwoju Systemu Edukacji. Unia Europejska ani Fundacja Rozwoju Systemu Edukacji nie ponoszą za nie odpowiedzialności.</p> | |
| <p data-lang="en">Project “SAGE Initiative: Social and Green Entrepreneurship network for youth”<br>project no: 2024-2-PL01-KA220-YOU-000286516</p> | |
| <p data-lang="en">Funded by the European Union. Views and opinions expressed are those of the author(s) only and do not necessarily reflect those of the European Union or the Foundation for the Development of the Education System. Neither the European Union nor the Foundation can be held responsible for them.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="game.js"></script> | |
| </body> | |
| </html> | |