<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Circuit.cool • Home</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="topbar">
			<h1 class="logo">Circuit<span id="secondary-title">.cool</span></h1>
			<a href="#" class="home">• Home</a>
			<a href="./blog.html" class="home">• Blog</a>
			<a href="./leaderboard.html" class="home">• Leaderboard</a>
		</div>
		<div id="click-container">
			<p id="scoreDisplay"><span id="score">0</span> Score</p>
			<button id="click-btn">Click me!</button>
		</div>
		<div id="upgrade-container">
			<button id="autoclicker">
				<p>
					Autoclicker <br />
					Price: <span id="autoclickerprice">10</span><br />
					Owned: <span id="autoclickerowned">0</span>
				</p>
			</button>
			<button id="ironmouse">
				<p>
					Iron Mouse <br />
					Price: <span id="ironmouseprice">100</span><br />
					Owned: <span id="ironmouseowned">0</span>
				</p>
			</button>
			<button id="goldmouse">
				<p>
					Gold Mouse <br />
					Price: <span id="goldmouseprice">1000</span><br />
					Owned: <span id="goldmouseowned">0</span>
				</p>
			</button>
			<button id="platinummouse">
				<p>
					Platinum Mouse <br />
					Price: <span id="platinummouseprice">10000</span><br />
					Owned: <span id="platinummouseowned">0</span>
				</p>
			</button>
			<button id="diamondmouse">
				<p>
					Diamond Mouse <br />
					Price: <span id="diamondmouseprice">1000000</span><br />
					Owned: <span id="diamondmouseowned">0</span>
				</p>
			</button>
			<button id="orbitalmouse">
				<p>
					Orbital Mouse <br />
					Price: <span id="orbitalmouseprice">1000000000</span><br />
					Owned: <span id="orbitalmouseowned">0</span>
				</p>
			</button>
		</div>
		<div id="special-container">
			<button id="galacticmouse">
				<p>
					Galactic Mouse <br />
					Price: <span id="galacticmouseprice">1000000000000</span><br />
					Owned: <span id="galacticmouseowned">0</span>
				</p>
			</button>
			<button id="universalmouse">
				<p>
					Universal Mouse <br />
					Price: <span id="universalmouseprice">1000000000000000</span><br />
					Owned: <span id="universalmouseowned">0</span>
				</p>
			</button>
			<button id="cosmicmouse">
				<p>
					Cosmic Mouse <br />
					Price: <span id="cosmicmouseprice">1000000000000000000</span><br />
					Owned: <span id="cosmicmouseowned">0</span>
				</p>
			</button>
			<button id="refine-all">
				<p>Refines all upgrades for a x2 boost (can be used multiple times) <br>
				<span id="refine-all-price">10 million</span></p>
			</button>
			<button id="reset">
				<p>Reset Your Game</p>
			</button>
			<p>Enter your username here:</p><input type="text" id="username">
		</div>
		<div id="dashboard">
			<p><span id="cps">0</span> CPS</p>
		</div>
	</body>
	<script src="script.js" type="module"></script>
</html>
