Skip to content

Commit

Permalink
Added footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mendiak
Mendiak committed Oct 25, 2024
1 parent c50fa59 commit 6637852
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 138 deletions.
Binary file added assets/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/footer-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
125 changes: 66 additions & 59 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,101 +7,108 @@
<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">
</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>
<nav id="social-share" aria-label="Social media sharing">
<span>Share on:</span>
<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>
<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>

<div id="main-container">
<div id="tooltip">
<h2>Treemap Format</h2>
<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"></i> Note on Listening to Example Tracks</h2>
<p>If you want to listen to the full example tracks, please make sure you're logged into Spotify 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>
<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>
<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">

<!-- Replace with your Access Key -->
<input type="hidden" name="access_key" value="41398cfd-0efd-45fa-859e-50b9e66d6f31">

<!-- Form Inputs. Each input must have a name="" attribute -->
<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>

<!-- Honeypot Spam Protection -->
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">

<!-- Custom Confirmation / Success Page -->
<!-- <input type="hidden" name="redirect" value="https://mywebsite.com/thanks.html"> -->

<button id="submitbutton"type="submit"><i class="bi bi-send"></i> Submit</button>

</form>

<p><i class="bi bi-github"></i> <a id="link" href="https://github.com/Mendiak/pulse.roots" target="_blank">PulseRoots @ Github</a></p>

<p><i class="bi bi-camera"></i> <a id="link" 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">Background image by: Kiryl @ Unsplash</a></p>

<p><i class="bi bi-vector-pen"></i> <a id="link" href="https://www.flaticon.com/authors/ibrandify" target="_blank">Logo by: ibrandify @ Flaticon</a></p>

</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"></i>
<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>

<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>
Expand Down
Loading

0 comments on commit 6637852

Please sign in to comment.