ba9dca7844
Hello I tried to add the theme feature, this is just a beta version, I will later add the search option, and more themes, just wanted to see if my code is ok with you :)
79 lines
4.5 KiB
HTML
79 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>infinifi</title>
|
|
|
|
<link rel="icon" type="image/png" href="./favicon.png">
|
|
<link rel="preload" href="./style.css" as="style">
|
|
<link rel="modulepreload" href="./bg.js">
|
|
<link rel="modulepreload" href="./script.js">
|
|
<link rel="preload" href="./images/cat-0.png" as="image">
|
|
<link rel="preload" href="./images/eeping-cat.png" as="image">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
<meta name="description" content="infinite lo-fi music in the background">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:site" content="@kennethnym">
|
|
<meta name="twitter:title" content="infinifi">
|
|
<meta name="twitter:description" content="infinite lo-fi beats in the background">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<main>
|
|
<h1 class="header">infinifi</h1>
|
|
<h2>infinite lo-fi music in the background</h2>
|
|
<div class="button-container">
|
|
<button id="play-btn" class="button">play</button>
|
|
<button id="theme-btn" class="theme-btn">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="theme-icon" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6.99998 13.6667C6.1245 13.6667 5.25759 13.4942 4.44876 13.1592C3.63992 12.8242 2.90499 12.3331 2.28593 11.7141C1.03569 10.4638 0.333313 8.76812 0.333313 7.00001C0.333313 5.2319 1.03569 3.53621 2.28593 2.28596C3.53618 1.03572 5.23187 0.333344 6.99998 0.333344C10.6666 0.333344 13.6666 3.00001 13.6666 6.33334C13.6666 7.39421 13.2452 8.41162 12.4951 9.16177C11.7449 9.91192 10.7275 10.3333 9.66665 10.3333H8.46665C8.26665 10.3333 8.13331 10.4667 8.13331 10.6667C8.13331 10.7333 8.19998 10.8 8.19998 10.8667C8.46665 11.2 8.59998 11.6 8.59998 12C8.66665 12.9333 7.93331 13.6667 6.99998 13.6667ZM6.99998 1.66668C5.58549 1.66668 4.22894 2.22858 3.22874 3.22877C2.22855 4.22897 1.66665 5.58552 1.66665 7.00001C1.66665 8.4145 2.22855 9.77105 3.22874 10.7712C4.22894 11.7714 5.58549 12.3333 6.99998 12.3333C7.19998 12.3333 7.33331 12.2 7.33331 12C7.33331 11.8667 7.26665 11.8 7.26665 11.7333C6.99998 11.4 6.86665 11.0667 6.86665 10.6667C6.86665 9.73334 7.59998 9.00001 8.53331 9.00001H9.66665C10.3739 9.00001 11.0522 8.71906 11.5523 8.21896C12.0524 7.71886 12.3333 7.04059 12.3333 6.33334C12.3333 3.73334 9.93331 1.66668 6.99998 1.66668ZM3.33331 5.66668C3.86665 5.66668 4.33331 6.13334 4.33331 6.66668C4.33331 7.20001 3.86665 7.66668 3.33331 7.66668C2.79998 7.66668 2.33331 7.20001 2.33331 6.66668C2.33331 6.13334 2.79998 5.66668 3.33331 5.66668ZM5.33331 3.00001C5.86665 3.00001 6.33331 3.46668 6.33331 4.00001C6.33331 4.53334 5.86665 5.00001 5.33331 5.00001C4.79998 5.00001 4.33331 4.53334 4.33331 4.00001C4.33331 3.46668 4.79998 3.00001 5.33331 3.00001ZM8.66665 3.00001C9.19998 3.00001 9.66665 3.46668 9.66665 4.00001C9.66665 4.53334 9.19998 5.00001 8.66665 5.00001C8.13331 5.00001 7.66665 4.53334 7.66665 4.00001C7.66665 3.46668 8.13331 3.00001 8.66665 3.00001ZM10.6666 5.66668C11.2 5.66668 11.6666 6.13334 11.6666 6.66668C11.6666 7.20001 11.2 7.66668 10.6666 7.66668C10.1333 7.66668 9.66665 7.20001 9.66665 6.66668C9.66665 6.13334 10.1333 5.66668 10.6666 5.66668Z" fill="#4C4F69"/>
|
|
</svg>
|
|
|
|
Change theme
|
|
</button>
|
|
</div>
|
|
|
|
<div class="theme-modal">
|
|
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<p id="listener-count">0 person tuned in</p>
|
|
<div id="volume-slider-container">
|
|
<output id="current-volume-label" for="volume-slider">100%</output>
|
|
<input id="volume-slider" type="range" min="0" max="100" step="1" />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<aside role="alert" id="notification">
|
|
<p id="notification-title">a little chatty</p>
|
|
<p id="notification-body">make milo meow 100 times</p>
|
|
</aside>
|
|
|
|
<img id="cat" src="./images/cat-0.png">
|
|
<img id="eeping-cat" src="./images/eeping-cat.png">
|
|
<img id="heart" src="./images/heart.png">
|
|
</div>
|
|
|
|
<footer>
|
|
<span>made by kennethnym <3 · </span>
|
|
<a target="_blank" rel="noopener noreferrer" href="https://github.com/kennethnym/infinifi">github</a>
|
|
</footer>
|
|
|
|
<canvas id="bg"></canvas>
|
|
|
|
<audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
|
|
<audio id="click-release-audio" preload="auto" src="./audio/click-release.wav"></audio>
|
|
<audio id="meow-audio" preload="auto" src="./audio/cat-meow.mp3"></audio>
|
|
<audio id="achievement-unlocked-audio" preload="auto" src="./audio/achievement-unlocked.mp3"></audio>
|
|
|
|
<script type="module" src="./bg.js"></script>
|
|
<script type="module" src="./script.js"></script>
|
|
</body>
|
|
</html>
|