diff --git a/fonts/Hack-Regular.ttf b/fonts/Hack-Regular.ttf new file mode 100644 index 0000000..25578e0 Binary files /dev/null and b/fonts/Hack-Regular.ttf differ diff --git a/fonts/digital-7.ttf b/fonts/digital-7.ttf new file mode 100644 index 0000000..5dbe6f9 Binary files /dev/null and b/fonts/digital-7.ttf differ diff --git a/fonts/monofonto.ttf b/fonts/monofonto.ttf new file mode 100644 index 0000000..9d65196 Binary files /dev/null and b/fonts/monofonto.ttf differ diff --git a/index.css b/index.css index a3525de..ed797dd 100644 --- a/index.css +++ b/index.css @@ -1,22 +1,41 @@ +@font-face { font-family: 'digital7'; src: url('fonts/digital-7.ttf'); } +@font-face { font-family: 'monofonto'; src: url('fonts/monofonto.ttf'); } +@font-face { font-family: 'Hack-Regular'; src: url('fonts/Hack-Regular.ttf'); } + body { background-color: #28262C; color: #F9F5FF; } +button +{ + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} + .hidden { - display: none; + display: none !important; } .header { - font-size: 28px; + font-family: 'digital7'; + color: #758E4F; + font-size: 48px; text-align: center; + margin-bottom: 10px; } .main { + font-family: 'monofonto'; display: flex; flex-direction: row; } @@ -26,6 +45,10 @@ body display: flex; flex-direction: column; width: 50%; + border-right: 1px solid white; + min-height: 600px; + margin-left: 10px; + margin-right: 10px; } .showlist @@ -35,12 +58,14 @@ body .show { - color: #14248A; + font-family: 'Hack-Regular'; + color: #998FC7; cursor: pointer; } .tracklist { + font-family: 'monofonto'; font-size: 14px; } @@ -57,16 +82,49 @@ body width: 50%; } -.audio-player +#audio-player { display: flex; - width: 50%; + width: 100%; + flex-direction: column; align-items: center; } -.audio-player button +.player { - height: 14px; + display: flex; + flex-direction: row; + align-items: center; + width: 75%; +} + +.player .time +{ + margin: 10px; +} + +.volume +{ + display: flex; + flex-direction: row; + align-items: center; +} + +.volume #mute-icon +{ + margin: 10px; +} + +.volume #mute-icon svg +{ + width: 50px; + height: 50px; +} + +.volume #mute-icon svg path +{ + stroke: #F9F5FF !important; + fill: #F9F5FF !important; } .show-info diff --git a/index.html b/index.html index 784499d..5bad1bf 100644 --- a/index.html +++ b/index.html @@ -32,12 +32,21 @@

Monads Music Mindset is a weekly internet radio program broadcasted on Mondays at 7PM Pacific Standard Time.

-

This page contains the archives of recorded broadcasts. I hope you'll join us for a live show!

+

This page contains the archives of recorded broadcasts, and can also stream the live broadcast. I hope you'll join us for a live show!

-
+
- 002: psych trippin' + Live! + + +
+ +
+ 002: psych trippin'
-
- - - 0:00 - - 0:00 - 100 - - + + +
diff --git a/index.js b/index.js index d5751ff..bd9ff73 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,15 @@ const audio = document.querySelector('audio'); +const audioPlayer = document.getElementById('audio-player'); +const audioTitle = document.getElementById('audio-title'); const durationContainer = document.getElementById('duration'); const seekSlider = document.getElementById('seek-slider'); const currentTimeContainer = document.getElementById('current-time'); const playIconContainer = document.getElementById('play-icon'); const volumeSlider = document.getElementById('volume-slider'); -const outputContainer = document.getElementById('volume-output'); const showInfo = document.getElementById('show-info'); -let shows = document.getElementsByClassName('show'); +let shows = document.getElementById('showlist').children; for (var i = 0; i < shows.length; i += 1) { @@ -16,11 +17,13 @@ for (var i = 0; i < shows.length; i += 1) let urlSpan = show.children[1]; let audioURL = urlSpan.textContent; show.addEventListener('click', () => { + audioTitle.textContent = show.children[0].textContent; + audioPlayer.classList.remove('hidden'); audio.src = audioURL; audio.load(); showInfo.removeChild(showInfo.children[0]); showInfo.appendChild(show.children[2].cloneNode(true)); - showInfo.children[0].classList.remove("hidden"); + showInfo.children[0].classList.remove('hidden'); }); } @@ -64,15 +67,16 @@ playIconContainer.addEventListener('click', () => { if(playState === PlayState.Pause) { audio.play(); playState = PlayState.Play; + playIconContainer.textContent = '❚❚'; } else { audio.pause(); playState = PlayState.Pause; + playIconContainer.textContent = '▶'; } }); volumeSlider.addEventListener('input', (e) => { const value = e.target.value; - outputContainer.textContent = value; audio.volume = value / 100; });