iou1name/Pyrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lighthouse optimization

Browse Source
This commit is contained in:
iou1name 2025-02-13 14:01:51 -05:00
parent 7adba24fb1
commit 8002d940c6
2 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/pyrite.css
View File

@ -18,6 +18,10 @@ main {
"f f f"; "f f f";
} }
h2 {
font-size: 1.17em;
}
header { header {
grid-area: h; grid-area: h;
} }
@ -144,3 +148,7 @@ button img {
#seek-slider { #seek-slider {
width: 90%; width: 90%;
} }
#volume-slider {
margin: 0.5em;
}

34
templates/index.html
View File

@ -5,6 +5,8 @@
<link rel="stylesheet" type="text/css" href="./static/pyrite.css"> <link rel="stylesheet" type="text/css" href="./static/pyrite.css">
<script type="text/javascript" src="./static/pyrite.js"></script> <script type="text/javascript" src="./static/pyrite.js"></script>
<script>window.onload = init;</script> <script>window.onload = init;</script>
<meta name="viewport" content="width=device-width, initial-scale=0.6">
<meta name="description" content="Fool's gold.">
<link rel="manifest" href="./static/pyrite.webmanifest"> <link rel="manifest" href="./static/pyrite.webmanifest">
</head> </head>
<body> <body>
@ -47,34 +49,34 @@
</div> </div>
<div id="cover_art"><img alt="Album cover art" src="./static/pyrite-256x256.jpg"></div> <div id="cover_art"><img alt="Album cover art" src="./static/pyrite-256x256.jpg"></div>
<div id="title"> <div id="title">
<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4> <h2><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h2>
<h3 id="now_playing_title">Title</h3> <h2 id="now_playing_title">Title</h2>
<canvas id="visualizer" height="300" width="1000"></canvas> <canvas id="visualizer" height="300" width="1000"></canvas>
</div> </div>
<div id="player_controls"> <div id="player_controls">
<audio id="player" style="display:none"></audio> <audio id="player" style="display:none"></audio>
<button id="prev-track-btn" class="btn" onclick="prevTrack()"> <button id="prev-track-btn" class="btn" onclick="prevTrack()" aria-label="Previous Track">
<img id="prev" src="./static/prev.svg"></img> <img id="prev" alt="Previous Track" src="./static/prev.svg"></img>
</button> </button>
<button id="play-btn" class="btn" onclick="playTrack()"> <button id="play-btn" class="btn" onclick="playTrack()" aria-label="Play Track">
<img id="prev" src="./static/play.svg"></img> <img id="prev" alt="Play Track" src="./static/play.svg"></img>
</button> </button>
<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none"> <button id="pause-btn" class="btn" onclick="pauseTrack()" aria-label="Pause Track" style="display:none">
<img id="prev" src="./static/pause.svg"></img> <img id="prev" alt="Pause Track" src="./static/pause.svg"></img>
</button> </button>
<button id="next-track-btn" class="btn" onclick="nextTrack()"> <button id="next-track-btn" class="btn" onclick="nextTrack()" aria-label="Next Track">
<img id="prev" src="./static/prev.svg"></img> <img id="prev" alt="Next Track" src="./static/prev.svg"></img>
</button> </button>
<button id="vol-btn" class="btn" onclick="volume_off()"> <button id="vol-btn" class="btn" onclick="volume_off()" aria-label="Volume Off">
<img id="vol" src="./static/volume-max.svg"</img> <img id="vol" alt="Volume Off" src="./static/volume-max.svg"</img>
</button> </button>
<button id="vol-off-btn" class="btn" onclick="volume_restore()" style="display:none"> <button id="vol-off-btn" class="btn" onclick="volume_restore()" aria-label="Volume Restore" style="display:none">
<img id="vol-off" src="./static/volume-off.svg"</img> <img id="vol-off" alt="Volume Restore" src="./static/volume-off.svg"</img>
</button> </button>
<input id="volume-slider" type="range" max="100" value="100"> <input id="volume-slider" type="range" max="100" value="100"aria-label="Volume Slider">
</div> </div>
<div id="seek_controls"> <div id="seek_controls">
<input id="seek-slider" type="range" max="0" value="0"> <input id="seek-slider" type="range" max="0" value="0" aria-label="Seek Slider">
<output id="current-time">0:00</output>/<output id="duration">0:00</output> <output id="current-time">0:00</output>/<output id="duration">0:00</output>
</div> </div>
</div> </div>