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
{
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

View File

@ -32,12 +32,21 @@
<div class="information-and-showlist">
<div class="information">
<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 class="showlist">
<div id="showlist">
<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>
<div class="tracklist hidden">
<span>Spacemen 3 - Losin' Touch With My Mind</span>
@ -73,21 +82,39 @@
<span>Lusine - Operation Costs (Disassembled Mix)</span>
<span>Fennesz & Sakamoto - Kokoro</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 class="audio-player-and-tracks">
<div class="audio-player">
<audio></audio>
<button id="play-icon">▶️</button>
<span id="current-time" class="time">0:00</span>
<span id="audio-title" class="show"></span>
<div id="audio-player" class="hidden">
<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">
<span id="duration" class="time">0:00</span>
<output id="volume-output">100</output>
<span id="duration" class="time">0:00:00</span>
</div>
<div class="volume">
<span id="mute-icon">Volume</span>
<input type="range" id="volume-slider" max="100" value="100">
<button id="mute-icon"></button>
</div>
</div>
<div id="show-info">

View File

@ -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;
});