-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (99 loc) · 15.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dungeon Radio - Spotify</title>
<link href="index.css" rel="stylesheet" />
<link rel="icon" href="boombox.ico" type="image/x-ico">
</head>
<body>
<h1>Dungeon Radio</h1>
<div class="theme" style="background-color: rgba(235, 83, 83, .5);">
<h2>Action & Combat</h1>
<div class="flex-container">
<div><p>Battle Preparation</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/11hKhHtkhfXj4cqLry3ms3" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Chase & Escape</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/52VBesSMnWD2NlPS2r8gXP" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Battle</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4u5owGgsXdeYchDcjvwJ3c" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Creatures</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5QMsC0ygskEsk1Fk3UaI8p" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Undead</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2yu6oinocQbtXglQyEjtKm" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Tribal</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0WNwpEkesczJMbG2ECYweA" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
<div class="flex-container">
<div><p>Combat: Badass</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5aphGVaTdGyHHHE7TtnagV" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Epic</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2F5ZKGK8TnUKjYioLOQELM" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Humans</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0aRxBc0ro2kPFztO7g6hVJ" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Skirmish</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2XQfjcb2nxZxGGMu6U0XuK" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Combat: Tough</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/20YH21X0z9zYbo79RV1LP9" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Struggles & Obstacles</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1prcCKZ3JI2dpoR9dPtrmc" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Subtle Action</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1ufqGQCYPuLCM9UIHFn6n2" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
</div>
<div class="theme" style="background-color: rgba(255, 139, 53, .5);">
<h2>Exploration & Locations</h1>
<div class="flex-container">
<div><p>Africa</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0Rg9w0N0DRvQEuyX9q8iJB" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Ambient Exploration</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4MDzUUHA0V2UC9nKNJxkXV" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Fantasy Exploration</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/19OuMlyNc07MIJQeTVMwIe" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Far East</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/7ve0EKE4lFnNrjj7plHd5t" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Forest</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4gFdcp0FkK0p4MC4f9dt1e" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Medieval Tavern</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5JddV0ofqoU2YiDJSPgkgd" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
<div class="flex-container">
<div><p>Medieval Town</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/46zdinpzxTjSbHv5NG4Xg5" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Medieval Village</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/11DtJxzdFDOsAVzn2ofQd8" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Monastery</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5HS3ifZGltEwL6izfTYARM" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Mountains</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0KaAR3850ArKViIihI6WHS" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Mystic Exploration</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3q6ynMbto49PXoNfpJvqwe" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Snow & Ice</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4HN1dZLsqoNTF6dAhHDrR2" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
</div>
<div class="theme" style="background-color: rgba(249, 217, 36, .5);">
<h2>Moods & Situations</h1>
<div class="flex-container">
<div><p>Ambivalent</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/73pCDb9X1xlNeHJCR4PAoT" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Desolation</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0bR3udVsYH8DGZEjx4nwBD" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Despair</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2BJPw0QWsiqSAAaCm4hWYG" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Dwarves</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3tN0IsyLX4VlajuxeoCPkK" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Magical & Playful</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1UAhGOlPSbS9ZWFFhJpXlK" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Majestic Atmosphere</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4QYLgjCriwTPsM50xBABlE" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Mystical & Divine</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4Zz43U5usk4xodApQmzFkZ" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
<div class="flex-container">
<div><p>Night Atmosphere</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4eKJflaVoy3EGAJsA6Nfq1" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Pagan</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2PMNCtbjUKcHuxvezr421y" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Peaceful Atmosphere</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/14bqvFqpVAOteR34ANLXNp" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Pirates</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/24Ru943qEMeLdUgkRn7qMR" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Romantic & Emotional</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5aFRB8X74H5VTRTVB63k3r" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Sad & Melancholic</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1Mbdl2LIOk9MvpadoBXNG8" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Subtle & Calm Atmosphere</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3yc0MvvMYmvk0KFyJbF6wh" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
</div>
<div class="theme" style="background-color: rgba(53, 175, 124, .5);">
<h2>Story Themes</h1>
<div class="flex-container">
<div><p>Adventure Story Themes</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0OU1KEYOuUMwMlE0MYAuCu" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Dramatic Story Themes</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/550kplmHFaxwE3hQSdeSoj" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>On the Road</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4pc04mRHRrIq9QGPvsNL4Z" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
</div>
<div class="theme" style="background-color: rgba(25, 116, 152, .5);">
<h2>Tension</h1>
<div class="flex-container">
<div><p>Dungeon Atmosphere</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2ictQMs4x5Ni1U6v0jHfpn" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Horror</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/43eY5Lf41lyZvABPEgAZ3T" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Ominous Tension</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1chi2NXReoTdsOTH4JLsOK" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Slight Tension</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6twzDwRoElsJxVZS9JQRWR" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Sneaking & Conspiracy</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/0M3a4eeWrTOziMapsrQNOh" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div><p>Caves</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6jlaEq49yMXmlZgZstYOJj" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
<div style="width:110px;"><p>Underground Tombs</p><iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4ZtKPv97GaE4Lms9Cmcdoa" width="80" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>
</div>
</div>
<div class="disclaimer" style="background-color: rgba(43, 10, 69, .5);">
<p>These carefully curated Spotify playlists come from <a href="https://www.reddit.com/r/DnD/comments/qzy7tk/50_carefully_curated_spotify_playlists_for_rpg/" target="_blank">/u/highway1024</a> on Reddit!<br />You can go <a href="https://open.spotify.com/artist/4NLZReAYD7sht8YtA2Sg8K?si=UNIMqDSUSAeroi5JMshgYA" target="_blank">here</a> to check out their music on Spotify too.</p>
<p>I primarily made this page to be used in conjunction with <a href="https://www.kenku.fm" target="_blank">KenkuFM for Discord</a>. I highly recommend checking them out if you run online games.</p>
<p>Fonts used are from <a href="https://github.com/jonathonf/solbera-dnd-fonts" target="_blank">Solbera's DnD Fonts</a>.</p>
<p>You can find me on Reddit: <a href="https://www.reddit.com/user/Team-Hufflepuff/" target="_blank">/u/Team-Hufflepuff</a> or on Discord: <a href="https://discord.com/users/340285845632319499" target="_blank">@Team-Hufflepuff#5555</a></p>
</div>
</div>
</body>
</html>