heroku-app/templates/index.html

<!doctype html>
<html>
	<head>
		<title>HelioHex</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.6/dist/themes/nano.min.css"/> <!-- 'nano' theme -->
		<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.6/dist/pickr.es5.min.js"></script>
	</head>

	<body>
		<div id="drawing"></div>
			<div class="buttons">
				<button type="button" class="button" id="set_color">Set Color</button>
				<button type="button" class="button basic_button" id="set_color_palette" value="set_color_palette">Color Palette</button>

				<button type="button" class="button basic_button" value="rainbow_wheel">Rainbow Wheel</button>
				<button type="button" class="button basic_button" id="day_time" value="day_time">Daytime</button>

				<button type="button" class="button basic_button" id = "flash_around" value="flash_around">Flash Around</button>
				<button type="button" class="button basic_button" id = "chase" value="chase">Chase</button>

				<button type="button" class="button basic_button" id="spotify" value="play_song">Spotify Sync</button>
				<button type="button" class="button basic_button" id="toggle_power" value="toggle_power">Turn Off</button>

				<input type="range" min="0" max="100" value="50" class="slider" id="slider">
			</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
	<script src="{{ url_for('static', filename='index.js') }}"></script>
</html>
		