tidying up layout + fonts

main
cosmonaut 2021-06-27 17:40:24 -07:00
parent 1c59c29731
commit ccb1bcb3b8
6 changed files with 112 additions and 23 deletions

BIN
fonts/Hack-Regular.ttf Normal file

Binary file not shown.

BIN
fonts/digital-7.ttf Normal file

Binary file not shown.

BIN
fonts/monofonto.ttf Normal file

Binary file not shown.

View File

@ -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 body
{ {
background-color: #28262C; background-color: #28262C;
color: #F9F5FF; color: #F9F5FF;
} }
button
{
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.hidden .hidden
{ {
display: none; display: none !important;
} }
.header .header
{ {
font-size: 28px; font-family: 'digital7';
color: #758E4F;
font-size: 48px;
text-align: center; text-align: center;
margin-bottom: 10px;
} }
.main .main
{ {
font-family: 'monofonto';
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -26,6 +45,10 @@ body
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%; width: 50%;
border-right: 1px solid white;
min-height: 600px;
margin-left: 10px;
margin-right: 10px;
} }
.showlist .showlist
@ -35,12 +58,14 @@ body
.show .show
{ {
color: #14248A; font-family: 'Hack-Regular';
color: #998FC7;
cursor: pointer; cursor: pointer;
} }
.tracklist .tracklist
{ {
font-family: 'monofonto';
font-size: 14px; font-size: 14px;
} }
@ -57,16 +82,49 @@ body
width: 50%; width: 50%;
} }
.audio-player #audio-player
{ {
display: flex; display: flex;
width: 50%; width: 100%;
flex-direction: column;
align-items: center; 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 .show-info

View File

@ -32,12 +32,21 @@
<div class="information-and-showlist"> <div class="information-and-showlist">
<div class="information"> <div class="information">
<p>Monads Music Mindset is a weekly internet radio program broadcasted on Mondays at 7PM Pacific Standard Time.</p> <p>Monads Music Mindset is a weekly internet radio program broadcasted on Mondays at 7PM Pacific Standard Time.</p>
<p>This page contains the archives of recorded broadcasts. I hope you'll join us for a live show!</p> <p>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!</p>
</div> </div>
<div class="showlist"> <div id="showlist">
<div class="show"> <div class="show">
<span class=>002: psych trippin'</span> <span class="title">Live!</span>
<span class="audioURL hidden">http://moonside.games:8000/MonadsMusicMindset</span>
<div class="tracklist hidden">
<span>Live with DJ Dankwraith</span>
<span>Mondays at 7PM PST</span>
</div>
</div>
<div class="show">
<span class="title">002: psych trippin'</span>
<span class="audioURL hidden">audio/MonadsMusicMindset002.mp3</span> <span class="audioURL hidden">audio/MonadsMusicMindset002.mp3</span>
<div class="tracklist hidden"> <div class="tracklist hidden">
<span>Spacemen 3 - Losin' Touch With My Mind</span> <span>Spacemen 3 - Losin' Touch With My Mind</span>
@ -73,21 +82,39 @@
<span>Lusine - Operation Costs (Disassembled Mix)</span> <span>Lusine - Operation Costs (Disassembled Mix)</span>
<span>Fennesz & Sakamoto - Kokoro</span> <span>Fennesz & Sakamoto - Kokoro</span>
<span>Bruno Pronsato - Feel Right</span> <span>Bruno Pronsato - Feel Right</span>
<span>Gas - Zauberberg 4</span>
<span>Thomas Felhmann - Rainbow Over Stadtautobahn</span>
<span>Jürgen Müller - Traumfolge Einier Qualle (Dream Sequence for a Jellyfish)</span>
<span>Aphex Twin - Xtal</span>
<span>Kaito - Trust</span>
<span>Oval - Do While Apple-X</span>
<span>Baths - Miasma Sky</span>
<span>Gui Boratto - Take My Breath Away</span>
<span>Orbital - Halcyon + On + On</span>
<span>Steve Hauschildt - Tragedy & Geometry</span>
<span>Luomo - Tessio</span>
<span>Pole - Strand</span>
<span>Triola - Ag Penthouse</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="audio-player-and-tracks"> <div class="audio-player-and-tracks">
<div class="audio-player"> <span id="audio-title" class="show"></span>
<audio></audio>
<button id="play-icon">▶️</button> <div id="audio-player" class="hidden">
<span id="current-time" class="time">0:00</span> <audio preload="metadata"></audio>
<div class="player">
<button id="play-icon"></button>
<span id="current-time" class="time">0:00:00</span>
<input type="range" id="seek-slider" max="100" value="0"> <input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time">0:00</span> <span id="duration" class="time">0:00:00</span>
<output id="volume-output">100</output> </div>
<div class="volume">
<span id="mute-icon">Volume</span>
<input type="range" id="volume-slider" max="100" value="100"> <input type="range" id="volume-slider" max="100" value="100">
<button id="mute-icon"></button> </div>
</div> </div>
<div id="show-info"> <div id="show-info">

View File

@ -1,14 +1,15 @@
const audio = document.querySelector('audio'); const audio = document.querySelector('audio');
const audioPlayer = document.getElementById('audio-player');
const audioTitle = document.getElementById('audio-title');
const durationContainer = document.getElementById('duration'); const durationContainer = document.getElementById('duration');
const seekSlider = document.getElementById('seek-slider'); const seekSlider = document.getElementById('seek-slider');
const currentTimeContainer = document.getElementById('current-time'); const currentTimeContainer = document.getElementById('current-time');
const playIconContainer = document.getElementById('play-icon'); const playIconContainer = document.getElementById('play-icon');
const volumeSlider = document.getElementById('volume-slider'); const volumeSlider = document.getElementById('volume-slider');
const outputContainer = document.getElementById('volume-output');
const showInfo = document.getElementById('show-info'); 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) 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 urlSpan = show.children[1];
let audioURL = urlSpan.textContent; let audioURL = urlSpan.textContent;
show.addEventListener('click', () => { show.addEventListener('click', () => {
audioTitle.textContent = show.children[0].textContent;
audioPlayer.classList.remove('hidden');
audio.src = audioURL; audio.src = audioURL;
audio.load(); audio.load();
showInfo.removeChild(showInfo.children[0]); showInfo.removeChild(showInfo.children[0]);
showInfo.appendChild(show.children[2].cloneNode(true)); 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) { if(playState === PlayState.Pause) {
audio.play(); audio.play();
playState = PlayState.Play; playState = PlayState.Play;
playIconContainer.textContent = '❚❚';
} else { } else {
audio.pause(); audio.pause();
playState = PlayState.Pause; playState = PlayState.Pause;
playIconContainer.textContent = '▶';
} }
}); });
volumeSlider.addEventListener('input', (e) => { volumeSlider.addEventListener('input', (e) => {
const value = e.target.value; const value = e.target.value;
outputContainer.textContent = value;
audio.volume = value / 100; audio.volume = value / 100;
}); });