-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (122 loc) · 8.12 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="PulseRoots: Interactive visualization of electronic music genres and styles">
<meta name="keywords" content="electronic music, music genres, techno, house, ambient, trance, music visualization, music tree">
<meta name="author" content="PulseRoots">
<meta property="og:title" content="PulseRoots: Electronic Music Styles Tree">
<meta property="og:description" content="Interactive visualization of electronic music genres and styles">
<meta property="og:image" content="assets/logo.png">
<meta property="og:url" content="https://mendiak.github.io/pulse.roots/">
<meta property="og:title" content="PulseRoots: Electronic Music Styles Tree">
<meta property="og:description" content="Interactive visualization of electronic music genres and styles">
<meta property="og:image" content="assets/logo.png">
<meta property="og:url" content="https://mendiak.github.io/pulse.roots/">
<meta name="google-site-verification" content="7tAbK2WB9Cx4uF76izgXcrBdBXVeqDfUd9A97KrLewU" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<title>PulseRoots: Electronic Music Styles Tree</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="assets/favicon.png" type="image/x-icon">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "PulseRoots",
"description": "Interactive visualization of electronic music genres and styles",
"applicationCategory": "Music Education",
"genre": "Electronic Music",
"url": "https://mendiak.github.io/pulse.roots/",
"author": {
"@type": "Person",
"name": "PulseRoots"
}
}
</script>
</head>
<body>
<header>
<div id="header-container">
<a href="index.html" id="logo-link" aria-label="Home">
<img src="assets/logo.png" id="logo" alt="PulseRoots Logo">
<h1>PulseRoots: Electronic Music Styles Tree</h1>
</a>
</div>
</header>
<main>
<div id="main-container">
<div id="tooltip" aria-labelledby="treemap-title">
<section aria-labelledby="treemap-title">
<h2>Treemap Format</h2>
<p>Explore a comprehensive collection of electronic music genres, presented in a treemap format. The map starts at the broad "Electronic Music" category, then descends into the main "Families" (Ambient, Techno, House, etc.), and further branches into specific styles and substyles.</p>
<h2>Families</h2>
<p>Each genre is categorized into broader families such as Ambient, Techno, House, and Trance. These families represent shared characteristics and influences across genres.</p>
<h2>Styles and Substyles</h2>
<p>Within each family, the treemap showcases distinct styles and their substyles. Each of these has its own unique sound and historical significance, making it easy to navigate through the world of electronic music.</p>
<p>Clicking on a style or substyle will reveal more detailed information, including a brief description and a sample track to help you explore and understand each genre.</p>
<h2>Note on Classification</h2>
<p>This treemap represents one way to categorize electronic music genres. Other classifications could group styles differently, based on cultural, historical, or sonic perspectives.</p>
<h2><i class="bi bi-spotify" aria-label="Spotify icon"></i> Note on Listening to Example Tracks</h2>
<p>If you want to listen to the full example tracks, please make sure you're <a id="spotify-login-link" href="https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://accounts.spotify.com/en/login&ved=2ahUKEwiyr4HYmKeJAxVt7QIHHZjDCz8QFnoECB0QAQ&usg=AOvVaw235Lqn7USxikwtlrJzMGdf" target="_blank">logged into Spotify <i class="bi bi-box-arrow-up-right" aria-label="External link icon"></i></a> in your browser. If you're not logged in, you'll only be able to hear a short sample of the song, lasting just a few seconds.</p>
<h2>Contact</h2>
<p>Thank you for visiting, and I hope you enjoy exploring the world of electronic music.</p>
<p>If you have any suggestions, improvement proposals, if you've found any errors, or just want to say 'Hi!', feel free to write to me.</p>
</section>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="41398cfd-0efd-45fa-859e-50b9e66d6f31">
<input type="text" name="name" required placeholder="Your Name...">
<input type="email" name="email" required placeholder="Your Email...">
<textarea name="message" required placeholder="Your Message..."></textarea>
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<!-- Custom Confirmation / Success Page -->
<input type="hidden" name="redirect" value="https://mendiak.github.io/pulse.roots/thanks.html">
<button id="submitbutton"type="submit"><i class="bi bi-send"></i> Submit</button>
</form>
</div>
<svg id="treemap"></svg>
<div id="info-panel" class="hidden">
<div id="close-panel-container">
<i id="close-panel"class="bi bi-x-circle" aria-label="Close info panel"></i>
</div>
<div id="info-content"></div>
<div id="spotify-embed"></div>
</div>
</div>
</main>
<footer>
<div id="logoandlinks">
<img src="assets/footer-logo.png" id="footer-logo" alt="PulseRoots Logo">
<div id="links-container">
<p>LINKS & CREDITS:</p>
<p><i class="bi bi-github" aria-label="Github icon"></i><a id="referral" href="https://github.com/Mendiak/pulse.roots" target="_blank">PulseRoots @ Github</a></p>
<p><i class="bi bi-camera" aria-label="Image icon"></i><a id="referral" href="https://unsplash.com/es/fotos/una-persona-parada-en-una-habitacion-oscura-con-luces-rojas-y-purpuras-M9SNlCS9_2E?utm_content=creditShareLink&utm_medium=referral&utm_source=unsplash" target="_blank">Photo by Kiryl @ Unsplash</a></p>
<p><i class="bi bi-vector-pen" aria-label="Vector icon"></i><a id="referral" href="https://www.flaticon.com/authors/ibrandify" target="_blank">Logo by ibrandify @ Flaticon</a></p>
</div>
</div>
<nav id="social-share" aria-label="Social media sharing">
<p>SHARE THIS:</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://mendiak.github.io/pulse.roots/"
target="_blank"
rel="noopener noreferrer"
aria-label="Share on Facebook">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
<a href="https://x.com/intent/tweet?url=https://mendiak.github.io/pulse.roots"
target="_blank"
rel="noopener noreferrer"
aria-label="Share on X (Twitter)">
<i class="bi bi-twitter-x" aria-hidden="true"></i>
</a>
<a href="https://www.reddit.com/submit?url=https://mendiak.github.io/pulse.roots/&title=PulseRoots"
target="_blank"
rel="noopener noreferrer"
aria-label="Share on Reddit">
<i class="bi bi-reddit" aria-hidden="true"></i>
</a>
</nav>
</footer>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="script.js"></script>
</body>
</html>