177 lines
7.2 KiB
HTML
177 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ulud & Arcaena</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Georgia&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Ulud & Arcaena</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Intro -->
|
|
<section class="intro">
|
|
<h2>Welcome, traveler...</h2>
|
|
<p>
|
|
Step into the world of Ulud and Arcaena, two adventurers whose stories
|
|
weave through danger, magic, and mystery.
|
|
</p>
|
|
<div class="music-player">
|
|
<h3>DungeonSynth Playlist</h3>
|
|
<audio id="dungeonSynthPlayer" controls>
|
|
<source src="audio/DungeonSynth/Cathedral of Glistening Hope [QfJ5F_Negow].mp3" type="audio/mpeg">
|
|
<source src="audio/DungeonSynth/Fief - Dawnlight Warms the Castle Stone [oK83HqN7sgI].mp3" type="audio/mpeg">
|
|
<source src="audio/DungeonSynth/Hermodr A Helferd [jPJVG0n0EPE].mp3" type="audio/mpeg">
|
|
<source src="audio/DungeonSynth/With Dreams of Adventure, I Smoke from My Longpipe Beneath the Stars [V8JZ3KDn1g4].mp3" type="audio/mpeg">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
<div>
|
|
<button onclick="prevTrack()">Prev</button>
|
|
<button onclick="nextTrack()">Next</button>
|
|
<span id="dsTrackName"></span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// List your DungeonSynth tracks here
|
|
const dsTracks = [
|
|
{src: "audio/DungeonSynth/Cathedral of Glistening Hope [QfJ5F_Negow].mp3", name: "Cathedral of Glistening Hope"},
|
|
{src: "audio/DungeonSynth/Fief - Dawnlight Warms the Castle Stone [oK83HqN7sgI].mp3", name: "Fief - Dawnlight Warms the Castle Stone"},
|
|
{src: "audio/DungeonSynth/Hermodr A Helferd [jPJVG0n0EPE].mp3", name: "Hermodr A Helferd"},
|
|
{src: "audio/DungeonSynth/With Dreams of Adventure, I Smoke from My Longpipe Beneath the Stars [V8JZ3KDn1g4].mp3", name: "With Dreams of Adventure, I Smoke from My Longpipe Beneath the Stars"}
|
|
];
|
|
let dsIndex = 0;
|
|
const dsPlayer = document.getElementById('dungeonSynthPlayer');
|
|
const dsTrackName = document.getElementById('dsTrackName');
|
|
|
|
function loadDSTrack(idx) {
|
|
dsPlayer.src = dsTracks[idx].src;
|
|
dsTrackName.textContent = dsTracks[idx].name;
|
|
dsPlayer.play();
|
|
}
|
|
|
|
function nextTrack() {
|
|
dsIndex = (dsIndex + 1) % dsTracks.length;
|
|
loadDSTrack(dsIndex);
|
|
}
|
|
|
|
function prevTrack() {
|
|
dsIndex = (dsIndex - 1 + dsTracks.length) % dsTracks.length;
|
|
loadDSTrack(dsIndex);
|
|
}
|
|
|
|
dsPlayer.addEventListener('ended', nextTrack);
|
|
// Initialize
|
|
loadDSTrack(dsIndex);
|
|
|
|
// Prevent multiple audio players from playing simultaneously
|
|
document.addEventListener('play', function(e) {
|
|
const allAudio = document.querySelectorAll('audio');
|
|
allAudio.forEach(audio => {
|
|
if (audio !== e.target) {
|
|
audio.pause();
|
|
}
|
|
});
|
|
}, true);
|
|
</script>
|
|
|
|
<p>
|
|
Now, scroll down to meet them.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Ulud -->
|
|
<section id="ulud" class="character">
|
|
<div class="char-text">
|
|
<h2>Ulud — The Wandering Soul</h2>
|
|
<p>
|
|
Ulud is a Tortle Druid who roams the land in search of knowledge and
|
|
connection with nature. Slow moving, soft spoken hermit. He often serves
|
|
as a mediator between conflicting parties. A little silly at times, but
|
|
always reliable and steadfast. He keeps a tablet of ancient druidic
|
|
knowledge close at hand to communicate with the stars and other druids.
|
|
</p>
|
|
<ul>
|
|
<li><strong>Race:</strong> Tortle</li>
|
|
<li><strong>Class:</strong> Druid</li>
|
|
<li><strong>Alignment:</strong> Neutral Good</li>
|
|
<li><strong>Background:</strong> Hermit</li>
|
|
<li><strong>Height:</strong> 1.5m</li>
|
|
<li><strong>Purpose:</strong><s>To eat the best chicken.</s> To follow the stars.</li>
|
|
|
|
</ul>
|
|
<a href="memories/ulud.html"><h3>Take a look at his memories</h3></a>
|
|
<div class="music-player">
|
|
<h3>Ulud's Theme</h3>
|
|
<audio controls>
|
|
<source src="audio/Harvest Dawn [s9L9sNtv1-g].mp3" type="audio/mpeg">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
<div class="char-img">
|
|
<img src="images/ulud.jpg" alt="Ulud portrait">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arcaena -->
|
|
<section id="arcaena" class="character alt">
|
|
<div class="char-text">
|
|
<h2>Arcaena Krislee — The Silent Flame</h2>
|
|
<p>
|
|
Arcaena is a petite high elf with an enigmatic presence.
|
|
Her vibe is empty, mysterious, and a bit eerie.
|
|
She reads books out of habit, not passion.
|
|
Usually just wanders into situations, and then asks herself "Why am I in this mess?"<br>
|
|
|
|
Incredibly intelligent and useful, but non talkative, never eager and just plain weird.
|
|
|
|
</p>
|
|
<ul>
|
|
<li><strong>Race:</strong> High Elf</li>
|
|
<li><strong>Class:</strong> Wizard</li>
|
|
<li><strong>Alignment:</strong> Chaotic neutral.</li>
|
|
<li><strong>Background:</strong> Urchin</li>
|
|
<li><strong>Height:</strong> 1.5m</li>
|
|
<li><strong>Purpose:</strong> To find a place where she can live quietly reading books.</li>
|
|
</ul>
|
|
<a href="memories/arcaena.html"><h3>Take a look at her memories</h2></a>
|
|
|
|
<div class="music-player">
|
|
<h3>Arcaena's Theme</h3>
|
|
<audio controls>
|
|
<source src="audio/Тоска [1Gw3ZbXcF00].mp3" type="audio/mpeg">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
<div class="char-img">
|
|
<img src="images/arcaena.jpeg" alt="Arcaena portrait">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery -->
|
|
<section id="gallery" class="gallery">
|
|
<h2>Gallery</h2>
|
|
<div class="grid">
|
|
<img src="images/art0.webp">
|
|
<img src="images/art1.webp">
|
|
<img src="images/art2.webp">
|
|
<img src="images/art3.webp">
|
|
<img src="images/art4.webp">
|
|
<img src="images/art5.webp">
|
|
<img src="images/art6.webp">
|
|
<img src="images/art7.webp">
|
|
<img src="images/art8.webp">
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 by <a href="https://waifuism.life">Waifu</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"></p>
|
|
</footer>
|
|
</body>
|
|
</html>
|