daily jingle launch
This commit is contained in:
parent
93be45dbd8
commit
6738e97fa2
|
|
@ -371,15 +371,16 @@ hr {
|
|||
}
|
||||
.music-box svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.music-box.playing svg.play {
|
||||
display: none;
|
||||
}
|
||||
.music-box:not(.playing,.done) svg.play {
|
||||
display: block;
|
||||
}
|
||||
.music-box.playing svg.pause {
|
||||
display: block;
|
||||
}
|
||||
.music-box svg.pause {
|
||||
display: none;
|
||||
.music-box.done svg.replay {
|
||||
display: block;
|
||||
}
|
||||
.pixel-art {
|
||||
image-rendering: pixelated;
|
||||
|
|
@ -503,6 +504,43 @@ img.inline {
|
|||
details summary {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
margin: -0.25em;
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
details summary:focus-visible {
|
||||
outline: 1px dashed #984624BB;
|
||||
}
|
||||
button.gome-button {
|
||||
font-size: 1em;
|
||||
font-family: var(--serif-fonts);
|
||||
color: #323a42;
|
||||
background-color: transparent;
|
||||
border: 1px solid #323a42;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px #323a42;
|
||||
}
|
||||
button.gome-button:hover:not(:active) {
|
||||
color: #6d747a;
|
||||
border-color: #6d747a;
|
||||
box-shadow: 2px 2px #6d747a;
|
||||
}
|
||||
button.gome-button:active {
|
||||
background-color: #eab77555;
|
||||
box-shadow: 3px 3px #323a42;
|
||||
}
|
||||
button.gome-button:focus-visible {
|
||||
outline: 0;
|
||||
background-color: #eab77555;
|
||||
box-shadow: 2px 2px #323a42;
|
||||
}
|
||||
button.gome-button svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
a.journal-link {
|
||||
|
|
|
|||
23
index.html
23
index.html
|
|
@ -40,12 +40,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
||||
Play another song
|
||||
</div>
|
||||
<div class='music-box'>
|
||||
<!-- <div class='music-box'>
|
||||
<audio src='https://dl.vgmdownloads.com/soundtracks/freddi-fish-and-luther-s-maze-madness/fmhlqnpujk/13%20Custom%20Level%20Designer.mp3' loop></audio>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
||||
<code>freddi-fish.mp3</code>
|
||||
</div>
|
||||
<code>freddi-fish.mp3</code>
|
||||
</div> -->
|
||||
</article>
|
||||
<article id='wotd'>
|
||||
<h2 class='title'></h2>
|
||||
|
|
@ -61,13 +61,18 @@
|
|||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Latest gomepost</h2>
|
||||
<a class='journal-link' href='journal/2008.html'>
|
||||
<h3>I’m looking for the <i>Hats</i> of 2008</h3>
|
||||
<div class='line stop-6'></div>
|
||||
<time datetime='Tue, 26 Mar 2024 21:30:00 CDT'>26 Mar 2024, 9:30 PM</time>
|
||||
<p>Please send me leads!</p>
|
||||
<h2>New on gomepage</h2>
|
||||
<a class='library-link' href='library/daily-jingle'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon stop-0"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
|
||||
<h3>Daily Jingle</h3>
|
||||
<p>Simple creative outlet</p>
|
||||
</a>
|
||||
Latest Jingle: <div class='music-box'>
|
||||
<audio src='https://gome.page/library/daily-jingle/24-04-21.bugsport.ogg' loop></audio>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
||||
Bugsport
|
||||
</div>
|
||||
</article>
|
||||
<article id='listening'>
|
||||
<h2 id='listening-title'></h2>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ const music_boxes = document.getElementsByClassName('music-box');
|
|||
for (const music_box of music_boxes) {
|
||||
music_box.addEventListener('click', () => {
|
||||
const audio = get_audio(music_box);
|
||||
music_box.classList.remove('done');
|
||||
if (audio.paused) {
|
||||
// pause all other music boxes
|
||||
for (const music_box of music_boxes) {
|
||||
|
|
@ -19,4 +20,9 @@ for (const music_box of music_boxes) {
|
|||
audio.pause();
|
||||
}
|
||||
});
|
||||
get_audio(music_box).addEventListener('ended', () => {
|
||||
music_box.classList.remove('playing');
|
||||
music_box.classList.add('done');
|
||||
console.info('done')
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
ul li {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
|
@ -48,9 +48,112 @@
|
|||
section::after {
|
||||
margin-top: 0;
|
||||
}
|
||||
li .music-box {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
main.hide-sections section:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
.music-box .date {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
main figure img {
|
||||
max-width: calc(100vw - 40px);
|
||||
height: auto;
|
||||
}
|
||||
@media only screen and (max-width: 660px) {
|
||||
main figure {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
main figure img {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
<script type="module">
|
||||
const noscripts = document.querySelectorAll('noscript');
|
||||
const container = document.createElement('div');
|
||||
const parse_pattern = /src='([^']+?)'.*?>([^<]*?)</;
|
||||
for (const noscript of noscripts) {
|
||||
const match = noscript.textContent.match(parse_pattern);
|
||||
if (match) {
|
||||
const [,src,label] = match;
|
||||
const music_box = document.createElement('div');
|
||||
music_box.classList.add('music-box');
|
||||
music_box.innerHTML = `<audio src='${src}'></audio>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="replay"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
${label || 'Play'}
|
||||
`;
|
||||
noscript.parentElement.insertBefore(music_box, noscript);
|
||||
}
|
||||
}
|
||||
|
||||
function get_audio(music_box) {
|
||||
return music_box.querySelector('audio');
|
||||
}
|
||||
|
||||
const music_boxes = document.getElementsByClassName('music-box');
|
||||
for (const music_box of music_boxes) {
|
||||
music_box.addEventListener('click', () => {
|
||||
const audio = get_audio(music_box);
|
||||
music_box.classList.remove('done');
|
||||
if (audio.paused) {
|
||||
// pause all other music boxes
|
||||
for (const music_box of music_boxes) {
|
||||
music_box.classList.remove('playing');
|
||||
get_audio(music_box).pause();
|
||||
}
|
||||
music_box.classList.add('playing');
|
||||
audio.play();
|
||||
} else {
|
||||
music_box.classList.remove('playing');
|
||||
audio.pause();
|
||||
}
|
||||
});
|
||||
get_audio(music_box).addEventListener('ended', () => {
|
||||
music_box.classList.remove('playing');
|
||||
music_box.classList.add('done');
|
||||
});
|
||||
}
|
||||
|
||||
window.toggle_variants = button => {
|
||||
const open = button.textContent.startsWith("Open");
|
||||
if (open) {
|
||||
button.textContent = button.textContent.replace("Open", "Close");
|
||||
for (const details of document.querySelectorAll("details")) {
|
||||
if (details.querySelector("summary").textContent.startsWith("Variants")) {
|
||||
details.setAttribute("open", "");
|
||||
}
|
||||
}
|
||||
} else {
|
||||
button.textContent = button.textContent.replace("Close", "Open");
|
||||
for (const details of document.querySelectorAll("details")) {
|
||||
if (details.querySelector("summary").textContent.startsWith("Variants")) {
|
||||
details.removeAttribute("open");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
for (let key of params.keys()) {
|
||||
const section = document.querySelector(`section > time[datetime="${key}"]`).parentElement;
|
||||
section.classList.add("show");
|
||||
}
|
||||
if (!!document.querySelector(`section.show`)) {
|
||||
document.querySelector("main").classList.add("hide-sections");
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -61,52 +164,65 @@
|
|||
</header>
|
||||
<main>
|
||||
<h1>Daily Jingle</h1>
|
||||
<p>[Nice image here]</p>
|
||||
<p>Making some silly music every day</p>
|
||||
<p>[Calendar here]</p>
|
||||
<p>[Play all]</p>
|
||||
<p>[Open all variants]</p>
|
||||
<figure>
|
||||
<img src="lake.webp" width="654" height="191">
|
||||
</figure>
|
||||
<p>Casual music project</p>
|
||||
<!-- TODO <p>Calendar</p> -->
|
||||
<!-- TODO <p><button class="gome-button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Play all</button></p> -->
|
||||
<p><button class="gome-button" onclick="toggle_variants(this)">Open all variants</button></p>
|
||||
<section>
|
||||
<h3>Activity</h3>
|
||||
<time datetime='2024-04-22'>22 Apr. 2024</time>
|
||||
<h3>Bugsport</h3>
|
||||
<time datetime='2024-04-21'>21 Apr. 2024</time>
|
||||
<noscript>
|
||||
<audio controls src='24-04-22.wav'></audio>
|
||||
<audio controls src='https://gome.page/library/daily-jingle/24-04-21.bugsport.ogg'>Bugsport</audio>
|
||||
</noscript>
|
||||
<p>
|
||||
Description text here. I think this is one of my songs.
|
||||
A bit of a <a href='../../journal/snails-house.html'>Snail’s House</a> tribute,
|
||||
in the <i>so do re so</i> ostinato and the general inspiration of the melody.
|
||||
</p>
|
||||
<details>
|
||||
<summary>Variants</summary>
|
||||
<ul>
|
||||
<li>
|
||||
Descrip
|
||||
<noscript>
|
||||
<audio controls src='24-04-22.wav'></audio>
|
||||
<audio controls src='https://gome.page/library/daily-jingle/24-04-21.bugsport-sloppy.ogg'>Bugsport Sloppy</audio>
|
||||
</noscript>
|
||||
</li>
|
||||
<li>
|
||||
<noscript>
|
||||
<audio controls src='https://gome.page/library/daily-jingle/24-04-21.bugsport-speedy.ogg'>Bugsport Speedy</audio>
|
||||
</noscript>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Shupfhle</h3>
|
||||
<time datetime='2024-04-23'>23 Apr. 2024</time>
|
||||
<noscript>
|
||||
<audio controls src='24-04-23.wav'></audio>
|
||||
</noscript>
|
||||
<p>
|
||||
Description text here. I think this is one of my songs.
|
||||
</p>
|
||||
<details>
|
||||
<summary>Variants</summary>
|
||||
<ul>
|
||||
<li>
|
||||
Descrip
|
||||
<noscript>
|
||||
<audio controls src='24-04-22.wav'></audio>
|
||||
</noscript>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<h3>Activity</h3>
|
||||
<time datetime='2024-04-20'>20 Apr. 2024</time>
|
||||
<noscript>
|
||||
<audio controls src='https://gome.page/library/daily-jingle/24-04-20.activity.ogg'>Activity</audio>
|
||||
</noscript>
|
||||
<details>
|
||||
<summary>Variants</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<noscript>
|
||||
<audio controls src='https://gome.page/library/daily-jingle/24-04-20.activity-shuffle.ogg'>Activity Shuffle</audio>
|
||||
</noscript>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Headache Etude</h3>
|
||||
<time datetime='2024-04-19'>19 Apr. 2024</time>
|
||||
<noscript>
|
||||
<audio controls src='https://gome.page/library/daily-jingle/24-04-19.headache-etude.ogg'>Headache Etude</audio>
|
||||
</noscript>
|
||||
<p>
|
||||
Titled as such because of the headache-inducing way I EQ’d the drums
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
|
|
@ -21,6 +21,7 @@
|
|||
<a class='library-link' href='daily-jingle'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon stop-0"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
|
||||
<h3>Daily Jingle</h3>
|
||||
<span class='new'>New!</span>
|
||||
<p>Simple creative outlet</p>
|
||||
</a>
|
||||
<a class='library-link' href='journal-index.html'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue