96 lines
3.7 KiB
HTML
96 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="shortcut icon" href="./assets/favicons/1.ico" type="image/x-icon" id="favicon">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Carter+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./assets/css/global.css">
|
|
<link rel="stylesheet" href="./assets/css/upgrades.css">
|
|
<title>Mood Clicker</title>
|
|
</head>
|
|
<body>
|
|
<nav class="nav">
|
|
<a href="https://misterkirill.com">
|
|
<button class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16">
|
|
<path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
|
|
</svg>
|
|
Back to misterkirill.com
|
|
</button>
|
|
</a>
|
|
|
|
<a class="link" href="https://git.misterkirill.com/misterkirill/MoodClicker">Source code</a>
|
|
</nav>
|
|
|
|
<main class="main">
|
|
<h1 class="heading">Mood Clicker <i class="small-text">(alpha?)</i></h1>
|
|
<span class="mood-counter">Current Mood: <span id="mood-counter">0</span></span>
|
|
<button class="click-btn" onclick="onLiftMoodClick()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
|
|
</svg>
|
|
Lift Mood
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
|
|
</svg>
|
|
</button>
|
|
<p><b>Upgrades</b> <i class="phone-only">(hold to see more info)</i></p>
|
|
<div id="upgrades"></div>
|
|
<div id="upgrade-info">
|
|
<b id="upgrade-name">Upgrade name</b>
|
|
<span id="upgrade-desc">Upgrade description</span>
|
|
<i id="upgrade-cost">500 Mood</i>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- UPGRADES -->
|
|
|
|
<i id="upg-multiplier">Multiplier: x1</i>
|
|
|
|
<div id="upg-saves">
|
|
<span id="upg-saves-text"></span>
|
|
<span id="upg-saves-reset" onclick="onResetProgressClick()">Reset progress</span>
|
|
</div>
|
|
|
|
<div id="upg-emojis"></div>
|
|
|
|
<div id="upg-mixer">
|
|
<b>Mixer</b>
|
|
<div>
|
|
<img src="./assets/img/upgrades/rain.png" alt="Rain">
|
|
<input type="range" id="rain-range" value="100" onchange="rainRangeChange(this.value)">
|
|
</div>
|
|
<div>
|
|
<img src="./assets/img/upgrades/calm_music.png" alt="Old radio">
|
|
<input type="range" id="music-range" value="100" onchange="musicRangeChange(this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<img src="./assets/img/bg/cuteface.png" alt="Cuteface" id="upg-cuteface">
|
|
|
|
<div id="upg-credits">
|
|
<div class="upg-credits-inner">
|
|
<h1 class="heading">Mood Clicker</h1>
|
|
|
|
<p>Thanks for playing!</p>
|
|
<span>Programmed by <b>Kirill Siukhin</b></span>
|
|
|
|
<h2>Visuals</h2>
|
|
<span>Upgrade icons by <b>Kirill Siukhin</b></span>
|
|
<span>Cuteface by <b>realexa770</b></span>
|
|
|
|
<h2>Music</h2>
|
|
<span>"Mood Not Found" by <b>Kirill Siukhin</b></span>
|
|
<span>Rain FX by <b>Kirill Siukhin</b></span>
|
|
|
|
<button class="btn upg-credits-play-again" onclick="resetProgress()">Play again</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./js/game.js"></script>
|
|
</body>
|
|
</html>
|