tidying up layout + fonts
parent
1c59c29731
commit
ccb1bcb3b8
Binary file not shown.
Binary file not shown.
Binary file not shown.
72
index.css
72
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
|
||||
|
|
|
|||
47
index.html
47
index.html
|
|
@ -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">
|
||||
|
|
|
|||
12
index.js
12
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;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue