update website with better performance and styles
This commit is contained in:
Frederik Spirgi
+27
-22
@@ -1,26 +1,31 @@
|
|||||||
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
||||||
localStorage.setItem('darkMode', 'disabled');
|
const themeIcon = darkModeToggle.querySelector('.theme-icon');
|
||||||
if (localStorage.getItem('darkMode') === 'enabled') {
|
const themeLabel = darkModeToggle.querySelector('.theme-label');
|
||||||
document.body.classList.add('dark-mode');
|
|
||||||
}
|
|
||||||
darkModeToggle.addEventListener('click', () => {
|
|
||||||
document.body.classList.toggle('dark-mode');
|
|
||||||
darkModeToggle.classList.toggle('dark-mode');
|
|
||||||
if (document.body.classList.contains('dark-mode')) {
|
|
||||||
localStorage.setItem('darkMode', 'enabled');
|
|
||||||
darkModeToggle.style.color = "black";
|
|
||||||
darkModeToggle.innerHTML = "☀️<br>Toggle Light Mode";
|
|
||||||
} else {
|
|
||||||
localStorage.setItem('darkMode', 'disabled');
|
|
||||||
darkModeToggle.style.color = "white";
|
|
||||||
darkModeToggle.innerHTML = "🌙<br>Toggle Dark Mode";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
enterButton.addEventListener('click', () => {
|
function applyTheme(isDark) {
|
||||||
if (document.body.classList.contains('dark-mode')) {
|
document.body.classList.toggle('dark-mode', isDark);
|
||||||
document.body.style.backgroundColor = "black";
|
darkModeToggle.setAttribute('aria-pressed', String(isDark));
|
||||||
} else {
|
themeIcon.textContent = isDark ? '☀' : '☾';
|
||||||
document.body.style.backgroundColor = "white";
|
themeLabel.textContent = isDark ? 'Light mode' : 'Dark mode';
|
||||||
|
document.querySelector('meta[name="theme-color"]').content = isDark ? '#0d1828' : '#e9f3fb';
|
||||||
|
window.dispatchEvent(new Event('themechange'));
|
||||||
|
}
|
||||||
|
|
||||||
|
let savedTheme;
|
||||||
|
try {
|
||||||
|
savedTheme = localStorage.getItem('darkMode');
|
||||||
|
} catch {
|
||||||
|
savedTheme = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTheme(savedTheme === 'enabled' || (savedTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches));
|
||||||
|
|
||||||
|
darkModeToggle.addEventListener('click', () => {
|
||||||
|
const isDark = !document.body.classList.contains('dark-mode');
|
||||||
|
applyTheme(isDark);
|
||||||
|
try {
|
||||||
|
localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
|
||||||
|
} catch {
|
||||||
|
// The chosen theme remains active for this visit when storage is unavailable.
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+150
-61
@@ -3,33 +3,29 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Fretux</title>
|
<meta name="description" content="Explore Fretux's projects in an interactive pixel-art portfolio.">
|
||||||
|
<meta name="theme-color" content="#e9f3fb">
|
||||||
|
<title>Fretux — Interactive Portfolio</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<link rel="icon" href="img/favicon.ico " type=image/x-icon>
|
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Welcome Screen -->
|
<!-- Welcome Screen -->
|
||||||
<div id="welcome-screen">
|
<div id="welcome-screen">
|
||||||
<div id="welcome-content">
|
<div id="welcome-content">
|
||||||
<h1 id="welcome-text">Welcome! Click the image below to begin your journey through my site!</h1>
|
<p class="eyebrow">Fretux</p>
|
||||||
<img id="enter-button" src="img/Penguin_Normal.png" alt="Enter Website"/>
|
<h1 id="welcome-text">A little world to explore</h1>
|
||||||
<img id="turn-device-sideways" src="img/turn-device-sideways.png" alt="Enter Website"/>
|
<button id="enter-button" type="button">Start <span aria-hidden="true">→</span></button>
|
||||||
<button id="dark-mode-toggle" class="dark-mode-toggle">
|
<p class="control-guide">← → / A D to move · ↑ / W to jump · Enter to interact</p>
|
||||||
🌙<br>
|
|
||||||
Toggle Dark Mode
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="dark-mode-toggle" class="dark-mode-toggle" type="button" aria-pressed="false"><span class="theme-icon" aria-hidden="true">☾</span><span class="theme-label">Dark mode</span></button>
|
||||||
|
<button id="sound-toggle" type="button" aria-label="Mute sound effects" aria-pressed="true" title="Toggle sound (M)"><span id="sound-icon" aria-hidden="true">♪</span></button>
|
||||||
|
<noscript><div class="no-script">This interactive portfolio needs JavaScript. <a href="https://git.bachmannj.ch/Fretux">Browse the projects on Gitea instead.</a></div></noscript>
|
||||||
|
|
||||||
<!-- Game Container -->
|
<!-- Game Container -->
|
||||||
<div id="game-container">
|
<div id="game-container">
|
||||||
<canvas id="game-canvas"></canvas>
|
<canvas id="game-canvas" tabindex="0" aria-label="Interactive snowy portfolio world"></canvas>
|
||||||
<div id="content-overlay">
|
|
||||||
<h1 id="section-title"></h1>
|
|
||||||
<p id="section-content"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- "?" Block Explanatory Text -->
|
|
||||||
<div id="block-info" class="hidden">
|
<div id="block-info" class="hidden">
|
||||||
<h1>Welcome!</h1>
|
<h1>Welcome!</h1>
|
||||||
<p>Welcome to my portfolio! Here, you'll discover the projects I've worked on, along with insights about my skills and background. If you're curious about my work or have any questions, feel free to reach out! Enjoy exploring!</p>
|
<p>Welcome to my portfolio! Here, you'll discover the projects I've worked on, along with insights about my skills and background. If you're curious about my work or have any questions, feel free to reach out! Enjoy exploring!</p>
|
||||||
@@ -38,74 +34,167 @@
|
|||||||
|
|
||||||
<section id="projects">
|
<section id="projects">
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h3 class="project-name">TRLStats</h3>
|
<h3 class="project-name">The_Tower</h3>
|
||||||
<p class="project-description">An interactive JavaScript and Python application designed to calculate damage statistics for the popular Roblox game 'The Red Lake'.</p>
|
<p class="project-description">A simple tower defense game made in Unity.</p>
|
||||||
<img src="img/Project_TrlStats.png" alt="TRLStats">
|
<p class="long-description" data-project-name="The_Tower">A Unity tower defense game where enemies attack a tower. The C# project includes enemy spawning, bullets, cannon effects, and upgrade cards.</p>
|
||||||
<p class="long-description" data-project-name="TRLStats">TRLStats was my first project, a damage calculator for the Roblox game 'The Red Lake'. This project combines Python, Flask for backend processing, and JavaScript to dynamically display data extracted from JSON files.</p>
|
<a class="link" href="https://git.bachmannj.ch/Fretux/The_Tower" data-project-name="The_Tower">Source code</a>
|
||||||
<a class="link" href="https://fretux.ch/trlstats" data-project-name="TRLStats">Link to the Website</a>
|
<p class="tags">C#</p>
|
||||||
<p class="tags">HTML</p>
|
|
||||||
<p class="tags">CSS</p>
|
|
||||||
<p class="tags">Javascript</p>
|
|
||||||
<p class="tags">Python</p>
|
|
||||||
<p class="tags">JSON</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h3 class="project-name">SBB-History</h3>
|
<h3 class="project-name">PortfolioWebsite</h3>
|
||||||
<p class="project-description">A Website about the creation of the SBB (Swiss Train Corporation) with an
|
<p class="project-description">An interactive portfolio built as a snowy 2D game.</p>
|
||||||
interactable map!</p>
|
<p class="long-description" data-project-name="PortfolioWebsite">This website is a small canvas platform game. Walk through the snowy world to discover projects and enter the house to learn about its creator.</p>
|
||||||
<img src="img/SBB-History.png" alt="SBB-History">
|
<a class="link" href="https://git.bachmannj.ch/Fretux/PortfolioWebsite" data-project-name="PortfolioWebsite">Source code</a>
|
||||||
<p class="long-description" data-project-name="SBB-History">For a School Project, me and 2 friends had to create a page about the economic history of a part of the swiss, which we chose to do about the "SBB", the Swiss Train Coorporation, founded in 1902. It is a simple Website, using HTML, CSS, and JavaScript, alongside the "Maptiler" API for the interactive map.</p>
|
<p class="tags">JavaScript</p>
|
||||||
<a class="link" href="https://sbb-history.fretux.ch" data-project-name="SBB-History">Link to the Website</a>
|
</div>
|
||||||
<p class="tags">HTML</p>
|
<div class="project">
|
||||||
<p class="tags">CSS</p>
|
<h3 class="project-name">anomaly-front-stats</h3>
|
||||||
<p class="tags">Javascript</p>
|
<p class="project-description">A web calculator for Anomaly Front stats and weapons.</p>
|
||||||
|
<p class="long-description" data-project-name="anomaly-front-stats">A Flask website for calculating Anomaly Front stats, browsing and filtering weapon data, and sending suggestions. It follows the earlier TRL Stats project.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/anomaly-front-stats" data-project-name="anomaly-front-stats">Source code</a>
|
||||||
|
<p class="tags">Python / Flask</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">AdapativeMobs</h3>
|
||||||
|
<p class="project-description">A Minecraft mod that makes hostile mobs adapt to world progression.</p>
|
||||||
|
<p class="long-description" data-project-name="AdapativeMobs">A server-side Minecraft Forge mod that scales vanilla hostile mobs as the world advances. Mobs can gain stronger attributes, better equipment, extra spawn pressure, and tactical behavior.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/AdapativeMobs" data-project-name="AdapativeMobs">Source code</a>
|
||||||
|
<p class="tags">Java</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">WebsitePortfolio2</h3>
|
||||||
|
<p class="project-description">A Next.js portfolio with project, about, and contact pages.</p>
|
||||||
|
<p class="long-description" data-project-name="WebsitePortfolio2">A separate portfolio website built with Next.js. It presents Frederik's work through dedicated project, about, and contact pages.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/WebsitePortfolio2" data-project-name="WebsitePortfolio2">Source code</a>
|
||||||
|
<p class="tags">JavaScript</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">Shoppy</h3>
|
||||||
|
<p class="project-description">A mobile shopping assistant for checking products in the store.</p>
|
||||||
|
<p class="long-description" data-project-name="Shoppy">An Expo and React Native app concept for scanning product barcodes and judging them against personal goals such as allergies, nutrition, budget, and sustainability.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Shoppy" data-project-name="Shoppy">Source code</a>
|
||||||
|
<p class="tags">JavaScript</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">linux_distro_roguelite_promotion</h3>
|
||||||
|
<p class="project-description">The pre-registration site and backend for Linux Distro Roguelite.</p>
|
||||||
|
<p class="long-description" data-project-name="linux_distro_roguelite_promotion">A Quarkus backend and static pre-registration page for a free game. Players sign up, choose platforms, and unlock rewards through community milestones.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/linux_distro_roguelite_promotion" data-project-name="linux_distro_roguelite_promotion">Source code</a>
|
||||||
|
<p class="tags">Java</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">linuxdistro-roguelite</h3>
|
||||||
|
<p class="project-description">A Linux distribution themed roguelite made in Unity.</p>
|
||||||
|
<p class="long-description" data-project-name="linuxdistro-roguelite">The Unity game project for Linux Distro Roguelite. Its scenes and scripts cover combat, game runs, progression, and a gambling scene.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/linuxdistro-roguelite" data-project-name="linuxdistro-roguelite">Source code</a>
|
||||||
|
<p class="tags">Unity / C#</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">MindMotion</h3>
|
||||||
|
<p class="project-description">A Minecraft mod adding Sanity, Insanity, and Tempo systems.</p>
|
||||||
|
<p class="long-description" data-project-name="MindMotion">A configurable Minecraft gameplay mod inspired by Deepwoken. Sanity, Insanity, and Tempo respond to the player's surroundings and actions, adding decisions to exploration and combat.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/MindMotion" data-project-name="MindMotion">Source code</a>
|
||||||
|
<p class="tags">Java</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">Ailments</h3>
|
||||||
|
<p class="project-description">A Forge library for combat effects such as Bleed and Fear.</p>
|
||||||
|
<p class="long-description" data-project-name="Ailments">A Minecraft Forge library mod that provides reusable effects including Soul Rot, Bleed, Fracture, Fear, Charm, Taunt, Overcharm, and Winded for other mods.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Ailments" data-project-name="Ailments">Source code</a>
|
||||||
|
<p class="tags">Java</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h3 class="project-name">KnockedBack</h3>
|
<h3 class="project-name">KnockedBack</h3>
|
||||||
<p class="project-description">A minecraft forge mod for 1.20.1 that revamps dying!</p>
|
<p class="project-description">A Minecraft mod that turns lethal hits into knockdowns.</p>
|
||||||
<img src="img/Knockedback.png" alt="KnockedBack">
|
<p class="long-description" data-project-name="KnockedBack">A Minecraft Forge mod that replaces many instant deaths with a temporary knocked-out state. Teammates can rescue and carry a downed player, while opponents can execute them.</p>
|
||||||
<p class="long-description" data-project-name="KnockedBack">For a long time, I had wanted a mod that really changed how dying worked in PVP, to make it more tactical. However, there was none. So, I looked into the possibility of making my own minecraft mod, initially with neoforge, but after multiple setbacks, I decided to go with normal forge, as it was easier.</p>
|
<a class="link" href="https://git.bachmannj.ch/Fretux/KnockedBack" data-project-name="KnockedBack">Source code</a>
|
||||||
<a class="link" href="https://www.curseforge.com/minecraft/mc-mods/knockedback" data-project-name="KnockedBack">Link to the Mod</a>
|
<a class="link" href="https://www.curseforge.com/minecraft/mc-mods/knockedback" data-project-name="KnockedBack">Download mod</a>
|
||||||
<p class="tags">Java</p>
|
<p class="tags">Java</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="pagination-controls">
|
<div class="project">
|
||||||
<button id="prev-button" disabled>Previous</button>
|
<h3 class="project-name">Ascend</h3>
|
||||||
<button id="next-button">Next</button>
|
<p class="project-description">A soulslike Minecraft RPG progression mod.</p>
|
||||||
|
<p class="long-description" data-project-name="Ascend">A Minecraft mod inspired by Deepwoken. Players earn Ascend levels, invest skill points in attributes, and gain Knowledge through play.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Ascend" data-project-name="Ascend">Source code</a>
|
||||||
|
<p class="tags">Java</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">SkillEngine</h3>
|
||||||
|
<p class="project-description">A framework for adding custom skill trees to Forge mods.</p>
|
||||||
|
<p class="long-description" data-project-name="SkillEngine">A modular Minecraft Forge framework for other mods to define skill nodes, requirements, icons, and unlocks. It also handles the skill tree interface and server synchronization.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/SkillEngine" data-project-name="SkillEngine">Source code</a>
|
||||||
|
<p class="tags">Java</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">KrisHD_AI</h3>
|
||||||
|
<p class="project-description">Elsewhere, an AI chat app with personas and roleplay sessions.</p>
|
||||||
|
<p class="long-description" data-project-name="KrisHD_AI">Elsewhere is an Express and SQLite chat app with user accounts, custom personas, roleplay conversations, and a persona market. Conversations can branch and be compared.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/KrisHD_AI" data-project-name="KrisHD_AI">Source code</a>
|
||||||
|
<a class="link" href="https://ai.krishd.ch/" data-project-name="KrisHD_AI">Live website</a>
|
||||||
|
<p class="tags">JavaScript</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">Discord_bot</h3>
|
||||||
|
<p class="project-description">A Discord bot with moderation, roles, and virtual currency.</p>
|
||||||
|
<p class="long-description" data-project-name="Discord_bot">A Discord.js bot for community servers. Its commands cover moderation, role management, utility features, and a virtual currency system.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Discord_bot" data-project-name="Discord_bot">Source code</a>
|
||||||
|
<p class="tags">JavaScript</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">Portfolio2</h3>
|
||||||
|
<p class="project-description">Another repo of the Next.js portfolio website.</p>
|
||||||
|
<p class="long-description" data-project-name="Portfolio2">A second repository for the Next.js portfolio site, with the same home page as WebsitePortfolio2 and dedicated project, about, and contact pages.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Portfolio2" data-project-name="Portfolio2">Source code</a>
|
||||||
|
<p class="tags">JavaScript</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">Autoclicker</h3>
|
||||||
|
<p class="project-description">A desktop autoclicker with a configurable hotkey.</p>
|
||||||
|
<p class="long-description" data-project-name="Autoclicker">A Python desktop autoclicker built with Tkinter and pynput. Configure a hotkey, then start or stop clicking from the app or the keyboard.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Autoclicker" data-project-name="Autoclicker">Source code</a>
|
||||||
|
<p class="tags">Python</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">Gambling_API</h3>
|
||||||
|
<p class="project-description">A multiplayer virtual-chip poker game for the web.</p>
|
||||||
|
<p class="long-description" data-project-name="Gambling_API">A browser-based multiplayer poker game with Express, WebSockets, and SQLite. Players register accounts, join lobbies, and play with virtual chips.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/Gambling_API" data-project-name="Gambling_API">Source code</a>
|
||||||
|
<p class="tags">JavaScript</p>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3 class="project-name">TARS</h3>
|
||||||
|
<p class="project-description">A Discord bot for a private server's moderation and utilities.</p>
|
||||||
|
<p class="long-description" data-project-name="TARS">A Python Discord bot with moderation tools, reports, reminders, server utilities, fun commands, and a perk shop for server boosters.</p>
|
||||||
|
<a class="link" href="https://git.bachmannj.ch/Fretux/TARS" data-project-name="TARS">Source code</a>
|
||||||
|
<p class="tags">Python</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- More projects here -->
|
|
||||||
</section>
|
</section>
|
||||||
<div id="detailsContainer"
|
|
||||||
style="display:none; position:fixed; top:20%; left:20%; width:60%; height:60%; background:white; padding:20px; overflow:auto; box-shadow: 0 0 10px rgba(0,0,0,0.5);">
|
|
||||||
<!-- Details will be loaded here -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- NPC Dialog Overlay (initially hidden via CSS) -->
|
<!-- NPC Dialog Overlay (initially hidden via CSS) -->
|
||||||
<div id="npc-dialog" class="hidden">
|
<div id="npc-dialog" class="hidden" role="dialog" aria-label="About Fretux">
|
||||||
<div id="npc-dialog-content">
|
<div id="npc-dialog-content">
|
||||||
|
<div class="dialog-heading"><span>About Fretux</span><button id="npc-dialog-close" type="button" aria-label="Close dialog">×</button></div>
|
||||||
<p id="npc-dialog-text">Hello, I'm Frederik Spirgi (aka Fretux), the creator of this website! Feel free to ask me anything—I'm here to share my journey and the technologies behind this interactive experience!</p>
|
<p id="npc-dialog-text">Hello, I'm Frederik Spirgi (aka Fretux), the creator of this website! Feel free to ask me anything—I'm here to share my journey and the technologies behind this interactive experience!</p>
|
||||||
<button id="dialog-option-1">Tell me more about your background!</button>
|
<button id="dialog-option-1" type="button">My background</button>
|
||||||
<br>
|
<button id="dialog-option-2" type="button">How this site was built</button>
|
||||||
<button id="dialog-option-2">What technologies did you use to build this site?</button>
|
<button id="dialog-option-3" type="button">Why an interactive portfolio?</button>
|
||||||
<br>
|
<p class="dialog-hint">Press Escape to close the conversation.</p>
|
||||||
<button id="dialog-option-3">Why did you create this interactive website?</button>
|
|
||||||
<br>
|
|
||||||
<h6>(You can leave the house by pressing Enter again)</h6>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="mobile-controls">
|
<div id="mobile-controls">
|
||||||
<button id="move-left-button"><</button>
|
<button id="move-left-button" type="button" aria-label="Move left">←</button>
|
||||||
<button id="jump-button">^</button>
|
<button id="jump-button" type="button" aria-label="Jump">↑</button>
|
||||||
<button id="move-right-button">></button>
|
<button id="move-right-button" type="button" aria-label="Move right">→</button>
|
||||||
<button id="interact-button">Interact</button>
|
<button id="interact-button" type="button">Use</button>
|
||||||
<button id="interact-character-button" class="hidden">Interact with Character</button>
|
<button id="interact-character-button" class="hidden" type="button">Talk</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Snowfall Container -->
|
<!-- Snowfall Container -->
|
||||||
<div id="snow-container"></div>
|
<div id="snow-container"></div>
|
||||||
|
<script type="text/javascript" src="audio.js"></script>
|
||||||
<script type="text/javascript" src="script1.js"></script>
|
<script type="text/javascript" src="script1.js"></script>
|
||||||
<script type="text/javascript" src="Tutorial.js"></script>
|
|
||||||
<script type="text/javascript" src="darkmode.js"></script>
|
<script type="text/javascript" src="darkmode.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+464
-560
File diff suppressed because it is too large
Load Diff
@@ -1,478 +1,377 @@
|
|||||||
html, body {
|
:root {
|
||||||
margin: 0;
|
color-scheme: light;
|
||||||
padding: 0;
|
--ink: #182b3d;
|
||||||
height: 100%;
|
--muted: #4a6071;
|
||||||
overflow-x: hidden;
|
--paper: #eef6f8;
|
||||||
background: linear-gradient(180deg, #8fc9f2 0%, #eef8ff 100%);
|
--panel: #f3f8f9;
|
||||||
font-family: "Trebuchet MS", Verdana, sans-serif;
|
--line: #547389;
|
||||||
|
--accent: #265d82;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
background: #b9d9ed;
|
||||||
|
color: var(--ink);
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode {
|
||||||
|
color-scheme: dark;
|
||||||
|
--ink: #edf3f5;
|
||||||
|
--muted: #bdced7;
|
||||||
|
--paper: #1d2e3d;
|
||||||
|
--panel: #243747;
|
||||||
|
--line: #8ba8b9;
|
||||||
|
--accent: #a9d9ef;
|
||||||
|
background: #111d2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
button { font: inherit; cursor: pointer; }
|
||||||
|
button:focus-visible, a:focus-visible, canvas:focus-visible {
|
||||||
|
outline: 3px solid #d48439;
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden { display: none; }
|
||||||
|
|
||||||
|
.no-script {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #e6f3fa;
|
||||||
|
color: #182b3d;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.no-script a { color: #265d82; }
|
||||||
|
|
||||||
#welcome-screen {
|
#welcome-screen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
inset: 0;
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: #B3C0CA;
|
display: grid;
|
||||||
opacity: 1;
|
place-items: center;
|
||||||
transition: opacity 0.5s ease;
|
overflow-y: auto;
|
||||||
overflow: hidden;
|
padding: 70px 22px 32px;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 18%, rgba(255,255,255,.56) 0 2px, transparent 3px),
|
||||||
|
radial-gradient(circle at 76% 32%, rgba(255,255,255,.55) 0 2px, transparent 3px),
|
||||||
|
linear-gradient(#91bfdc, #d9edf7 78%, #f5fafb);
|
||||||
|
transition: opacity .7s ease;
|
||||||
|
}
|
||||||
|
body.dark-mode #welcome-screen {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 18%, rgba(255,255,255,.48) 0 2px, transparent 3px),
|
||||||
|
radial-gradient(circle at 76% 32%, rgba(255,255,255,.42) 0 2px, transparent 3px),
|
||||||
|
linear-gradient(#152738, #304b60 78%, #627d8c);
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome-screen.hidden {
|
#welcome-screen.hidden {
|
||||||
|
display: grid;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-content {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
background-color: #B3C0CA;
|
|
||||||
transition: opacity 0.5s ease;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px;
|
|
||||||
color: #fff;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-content.visible {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
transition: opacity 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#welcome-content {
|
#welcome-content {
|
||||||
display: flex;
|
transition: opacity .5s ease, transform .7s ease;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: center;
|
#welcome-screen.hidden #welcome-content {
|
||||||
text-align: center;
|
opacity: 0;
|
||||||
transition: background-color 0.5s ease;
|
transform: translateY(-14px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#welcome-content {
|
||||||
|
width: min(620px, 100%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.welcome-penguin {
|
||||||
|
display: block;
|
||||||
|
width: clamp(96px, 15vw, 142px);
|
||||||
|
height: clamp(96px, 15vw, 142px);
|
||||||
|
margin: 0 auto 18px;
|
||||||
|
object-fit: contain;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-size: .9rem;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: .28em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
#welcome-text {
|
#welcome-text {
|
||||||
color: white;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Pacifico', cursive;
|
|
||||||
}
|
|
||||||
|
|
||||||
#enter-button {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 200px;
|
|
||||||
height: auto;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#enter-button:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#snow-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.snowflake {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.8;
|
|
||||||
pointer-events: none;
|
|
||||||
animation: fall linear infinite;
|
|
||||||
z-index: -1
|
|
||||||
}
|
|
||||||
|
|
||||||
.paused .snowflake {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fall {
|
|
||||||
to {
|
|
||||||
transform: translateY(100vh);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px
|
|
||||||
}
|
|
||||||
|
|
||||||
.paused {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.snowflake:nth-child(odd) {
|
|
||||||
animation-duration: 4s;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.snowflake:nth-child(even) {
|
|
||||||
animation-duration: 6s;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 20px auto;
|
|
||||||
padding: 20px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
transition: transform 0.5s, opacity 3s;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.visible {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2 {
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section-top {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 20px auto;
|
|
||||||
padding: 20px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section:nth-child(even) {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section:nth-child(odd) {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.content-section {
|
|
||||||
margin: 20px auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#game-container {
|
|
||||||
display: none;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #8fc9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#game-canvas {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tutorial {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tutorial-content {
|
|
||||||
background: #333;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tutorial-content button {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: white;
|
|
||||||
background: #007bff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tutorial.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-info.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-info {
|
|
||||||
background: rgba(248, 252, 255, 0.94);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
|
||||||
border-radius: 22px;
|
|
||||||
padding: 18px;
|
|
||||||
width: 280px;
|
|
||||||
text-align: center;
|
|
||||||
font-family: "Trebuchet MS", Verdana, sans-serif;
|
|
||||||
color: #102033;
|
|
||||||
font-size: 14px;
|
|
||||||
z-index: 10;
|
|
||||||
animation: fade-in 0.5s ease-out;
|
|
||||||
position: absolute;
|
|
||||||
box-shadow: 0 24px 60px rgba(9, 24, 43, 0.24);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-info h1 {
|
|
||||||
margin: 0 0 8px;
|
|
||||||
color: #102033;
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-info p {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #496071;
|
font-size: clamp(2.25rem, 6vw, 4.4rem);
|
||||||
line-height: 1.45;
|
font-weight: bold;
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: -.055em;
|
||||||
}
|
}
|
||||||
|
.welcome-intro {
|
||||||
@keyframes fade-in {
|
margin: 21px 0 28px;
|
||||||
from {
|
color: var(--muted);
|
||||||
opacity: 0;
|
font-size: clamp(.94rem, 1.5vw, 1.08rem);
|
||||||
transform: translateY(20px);
|
line-height: 1.6;
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
#enter-button {
|
||||||
#projects {
|
min-width: 172px;
|
||||||
flex-direction: row;
|
min-height: 54px;
|
||||||
justify-content: space-between;
|
padding: 9px 22px;
|
||||||
align-items: stretch;
|
border: 3px solid #162b3c;
|
||||||
flex-wrap: wrap;
|
border-radius: 2px;
|
||||||
padding: 10px;
|
background: #244d69;
|
||||||
background-color: #5a322a;
|
box-shadow: 5px 5px 0 #162b3c;
|
||||||
height: 100%;
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.project {
|
|
||||||
flex: 1;
|
|
||||||
margin: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
text-align: left;
|
|
||||||
overflow: hidden;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project h3 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-description {
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
color: white;
|
|
||||||
background: #102033;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 14px;
|
|
||||||
box-shadow: 0 10px 24px rgba(9, 24, 43, 0.16);
|
|
||||||
font-family: inherit;
|
|
||||||
transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 14px 30px rgba(9, 24, 43, 0.22);
|
|
||||||
}
|
|
||||||
|
|
||||||
#turn-device-sideways {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-controls {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 14px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
|
||||||
z-index: 20;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#interact-character-button {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 66px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: #2f7dd3;
|
|
||||||
}
|
|
||||||
|
|
||||||
#interact-button,
|
|
||||||
#move-left-button,
|
|
||||||
#jump-button,
|
|
||||||
#move-right-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 18px;
|
|
||||||
font-size: 16px;
|
|
||||||
background: rgba(16, 32, 51, 0.88);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-controls button:active {
|
|
||||||
background-color: #2f7dd3;
|
|
||||||
transform: translateY(1px) scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
#npc-dialog {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 80%;
|
|
||||||
max-width: 600px;
|
|
||||||
background: rgba(248, 252, 255, 0.94);
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 26px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
|
||||||
box-shadow: 0 30px 80px rgba(9, 24, 43, 0.28);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#npc-dialog p {
|
|
||||||
color: #102033;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#npc-dialog button {
|
|
||||||
width: 100%;
|
|
||||||
background: #102033;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
#mobile-controls {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 480px) {
|
|
||||||
#welcome-text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#enter-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#turn-device-sideways {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode {
|
|
||||||
filter: brightness(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode a {
|
|
||||||
color: #BB86FC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode button {
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #444;
|
font-size: 1.08rem;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: transform .12s ease, box-shadow .12s ease;
|
||||||
}
|
}
|
||||||
|
#enter-button:hover {
|
||||||
.dark-mode #welcome-screen {
|
transform: translate(2px, 2px);
|
||||||
background-color: #333;
|
box-shadow: 3px 3px 0 #162b3c;
|
||||||
}
|
}
|
||||||
|
#enter-button span { margin-left: 15px; }
|
||||||
.dark-mode #game-container {
|
.control-guide {
|
||||||
background-color: #222;
|
max-width: 520px;
|
||||||
}
|
margin: 34px auto 0;
|
||||||
|
padding-top: 16px;
|
||||||
.dark-mode .content-section,
|
border-top: 1px solid rgba(24,43,61,.4);
|
||||||
.dark-mode .project {
|
color: var(--muted);
|
||||||
background-color: #1e1e1e;
|
font-size: .78rem;
|
||||||
color: #fff;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode-toggle {
|
.dark-mode-toggle {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20px;
|
top: 14px;
|
||||||
right: 20px;
|
right: 14px;
|
||||||
z-index: 1000;
|
z-index: 40;
|
||||||
background: black;
|
display: grid;
|
||||||
border: none;
|
place-items: center;
|
||||||
font-size: 1.5rem;
|
width: 42px;
|
||||||
cursor: pointer;
|
height: 42px;
|
||||||
|
padding: 0;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--paper);
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
.dark-mode-toggle:hover { background: var(--panel); }
|
||||||
|
.theme-icon { font-size: 1.4rem; line-height: 1; }
|
||||||
|
.theme-label {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip-path: inset(50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
body.menu-open .dark-mode-toggle {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode-toggle.dark-mode {
|
#sound-toggle {
|
||||||
background: white;
|
position: fixed;
|
||||||
|
bottom: 14px;
|
||||||
|
left: 14px;
|
||||||
|
z-index: 20;
|
||||||
|
display: none;
|
||||||
|
place-items: center;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
padding: 0;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--paper);
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: 1.45rem;
|
||||||
|
}
|
||||||
|
body.game-started #sound-toggle { display: grid; }
|
||||||
|
#sound-toggle[hidden], body.menu-open #sound-toggle { display: none; }
|
||||||
|
#sound-toggle:hover { background: var(--panel); }
|
||||||
|
#sound-toggle[aria-pressed="false"]::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 29px;
|
||||||
|
height: 2px;
|
||||||
|
background: currentColor;
|
||||||
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode body {
|
#game-container {
|
||||||
background-color: #000;
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #b4d8ed;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .75s ease;
|
||||||
|
}
|
||||||
|
#game-container.visible { opacity: 1; }
|
||||||
|
#game-canvas {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode #main-content {
|
#block-info {
|
||||||
background-color: #000;
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
width: min(300px, calc(100vw - 30px));
|
||||||
|
padding: 16px;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--panel);
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
#block-info h1 { margin: 0 0 8px; font-size: 1.1rem; }
|
||||||
|
#block-info p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
|
||||||
|
body.menu-open #block-info { display: none; }
|
||||||
|
|
||||||
|
#projects { display: none; }
|
||||||
|
|
||||||
|
#snow-container {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
body.menu-open #snow-container { display: none; }
|
||||||
|
.snowflake {
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #fff;
|
||||||
|
opacity: .8;
|
||||||
|
animation: fall linear infinite;
|
||||||
|
}
|
||||||
|
.paused .snowflake { animation-play-state: paused; }
|
||||||
|
@keyframes fall { to { transform: translateY(110vh); } }
|
||||||
|
|
||||||
|
#npc-dialog {
|
||||||
|
position: fixed;
|
||||||
|
top: clamp(20px, 8vh, 80px);
|
||||||
|
left: 50%;
|
||||||
|
z-index: 30;
|
||||||
|
width: min(540px, calc(100vw - 30px));
|
||||||
|
max-height: calc(100dvh - 40px);
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 3px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--panel);
|
||||||
|
color: var(--ink);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.dialog-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 14px;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#npc-dialog-close {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--paper);
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
#npc-dialog-text {
|
||||||
|
margin: 18px 0 20px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: .86rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
#npc-dialog-content > button:not(#npc-dialog-close) {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 42px;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 9px 12px;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--paper);
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: .82rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#npc-dialog-content > button:not(#npc-dialog-close):hover { background: var(--panel); }
|
||||||
|
.dialog-hint { margin: 17px 0 0; color: var(--muted); font-size: .72rem; }
|
||||||
|
|
||||||
|
#mobile-controls { display: none; }
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
#welcome-screen { padding: 70px 20px 26px; }
|
||||||
|
#welcome-text { font-size: clamp(2.15rem, 11vw, 3.4rem); }
|
||||||
|
.control-guide { margin-top: 27px; font-size: .72rem; }
|
||||||
|
#sound-toggle { top: 14px; right: 64px; bottom: auto; left: auto; }
|
||||||
|
body.game-started #mobile-controls {
|
||||||
|
position: fixed;
|
||||||
|
right: 12px;
|
||||||
|
bottom: max(12px, env(safe-area-inset-bottom));
|
||||||
|
left: 12px;
|
||||||
|
z-index: 6;
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
gap: 7px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#mobile-controls button {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 2px solid #a4c1d2;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #18374d;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
pointer-events: auto;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
#mobile-controls button:active { background: #326789; }
|
||||||
|
#mobile-controls .hidden, body.menu-open #mobile-controls { display: none; }
|
||||||
|
#interact-button { margin-left: auto; font-size: .84rem !important; }
|
||||||
|
#interact-character-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 61px;
|
||||||
|
background: #265d82 !important;
|
||||||
|
font-size: .84rem !important;
|
||||||
|
}
|
||||||
|
#npc-dialog { padding: 16px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode #welcome-screen {
|
@media (max-width: 390px) {
|
||||||
background-color: #333;
|
#mobile-controls button { min-width: 45px; height: 48px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after {
|
||||||
|
animation-duration: .01ms !important;
|
||||||
|
transition-duration: .01ms !important;
|
||||||
|
}
|
||||||
|
.snowflake { display: none; }
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user