Kumi
efa5d905fe
Introduced a basic web page featuring a sound control interface that allows users to play or pause a rain sound. Includes a slider to adjust the rain sound volume. A modal offers audio attribution details, enhancing user experience and compliance with audio licensing. The addition consists of HTML for structure, CSS for styling, and JavaScript for interactive functionalities. This update enriches the website with ambient noise functionality, promoting an engaging user interface.
37 lines
1.2 KiB
HTML
37 lines
1.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>Nice Noise!</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="sound-controls">
|
|
<div class="sound">
|
|
<button id="toggle">Play / Pause</button>
|
|
</div>
|
|
<div class="sound">
|
|
<label>Rain</label>
|
|
<input class="sound-slider" type="range" min="0" max="100" value="0" id="rain-slider">
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="footer-content">
|
|
<p><button id="attributions-button">Audio Attributions</button></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="attribution-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-button">×</span>
|
|
<h2>Audio Attributions</h2>
|
|
<ul>
|
|
<li>Rain sound: <a href="https://freesound.org/people/inchadney/sounds/52777/">Rain.wav</a> by <a href="https://freesound.org/people/inchadney/">inchadney</a> | License: <a href="https://creativecommons.org/licenses/by/4.0/">Attribution 4.0</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|