dnd-chars/index.html

217 lines
9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adventures?</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>Adventures?</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>
<!-- Nie -->
<section id="nie" class="character alt">
<div class="char-text">
<h2>Nie — The Fragile Seer</h2>
<p>
Nie is a delicate High Elf Divination Wizard with a quiet, melancholic air.
She carries herself with a fragile grace, her pale skin and dark hair accented
by faint glimmers of blue. Introverted and contemplative, she often seems lost
in thought, her glasses reflecting the weight of futures only she can see.
Though clumsy and physically powerless, her insight into fate grants her a
bittersweet strength. She drinks hard liquor in solitude to still her restless mind,
yet her heart remains deeply compassionate beneath her calm detachment. <br>
<i>"I simply cannot change what is destined to be."</i>
</p>
<ul>
<li><strong>Race:</strong> High Elf</li>
<li><strong>Class:</strong> Wizard (School of Divination)</li>
<li><strong>Alignment:</strong> True Neutral</li>
<li><strong>Background:</strong> Sage</li>
<li><strong>Height:</strong> 1.7m</li>
<li><strong>Age:</strong> 250</li>
<li><strong>Purpose:</strong> To endure sorrow and guide others with the truths she foresees.</li>
</ul>
<a href="memories/nie.html"><h3>Take a look at her memories</h3></a>
<div class="music-player">
<h3>Nie's Theme</h3>
<audio controls>
<source src="audio/Белая ночь.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<div class="char-img">
<img src="images/nie.jpg" alt="Nie portrait">
</div>
</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>Age:</strong> 35</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>Age:</strong> 120</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>