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.
87 lines
No EOL
1.3 KiB
CSS
87 lines
No EOL
1.3 KiB
CSS
body {
|
|
font-family: Arial, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
#sound-controls {
|
|
width: 80%;
|
|
max-width: 600px;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sound {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 15% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.close-button {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close-button:hover,
|
|
.close-button:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
background: #333;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.footer-content a {
|
|
color: #aaa;
|
|
text-decoration: none;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.footer-content a:hover {
|
|
color: white;
|
|
} |