<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SleepSound Mixer - Create Custom Sleep Soundscapes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #2a5298);
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Header Styles */
header {
background: rgba(255, 255, 255, 0.95);
color: #2c3e50;
padding: 1rem 0;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: #3498db;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
color: #2c3e50;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 1.5rem;
}
.nav-links a {
color: #2c3e50;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-links a:hover {
color: #3498db;
}
/* Hero Section */
.hero {
text-align: center;
padding: 5rem 0;
background: linear-gradient(rgba(26, 42, 108, 0.8), rgba(26, 42, 108, 0.8)), url('https://images.unsplash.com/photo-1518609878373-06d740f60d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
color: white;
margin-bottom: 2rem;
border-radius: 0 0 15px 15px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: white;
}
.hero p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 800px;
margin: 0 auto 2rem;
}
/* Tool Section */
.tool-section {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 3rem;
}
.tool-section h2 {
text-align: center;
margin-bottom: 2.5rem;
color: #2c3e50;
font-size: 2.2rem;
}
.soundboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.sound-card {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.sound-card:hover {
transform: translateY(-5px);
}
.sound-icon {
font-size: 2.5rem;
margin-bottom: 15px;
color: #3498db;
}
.sound-card h3 {
margin-bottom: 15px;
color: #2c3e50;
}
.volume-control {
width: 100%;
margin: 15px 0;
}
.play-btn {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.play-btn i {
margin-right: 8px;
}
.play-btn:hover {
background: #2980b9;
}
.playing {
background: #e74c3c;
}
.mixer-controls {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
text-align: center;
margin-top: 30px;
}
.timer-display {
font-size: 2rem;
margin: 20px 0;
color: #2c3e50;
}
/* Blog Section */
.blog-section {
margin: 4rem 0;
}
.blog-section h2 {
text-align: center;
margin-bottom: 3rem;
color: white;
font-size: 2.2rem;
}
.blog-posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.blog-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.blog-card:hover {
transform: translateY(-5px);
}
.blog-img {
height: 200px;
background-size: cover;
background-position: center;
}
.blog-content {
padding: 1.5rem;
}
.blog-card h3 {
margin-bottom: 0.8rem;
color: #2c3e50;
}
.blog-card p {
color: #666;
margin-bottom: 1.2rem;
line-height: 1.6;
}
.read-more {
display: inline-block;
color: #3498db;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.read-more:hover {
color: #2980b9;
}
/* Footer */
footer {
background: #2c3e50;
color: white;
padding: 3rem 0;
text-align: center;
margin-top: 3rem;
border-radius: 15px 15px 0 0;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-links {
display: flex;
list-style: none;
margin: 1.5rem 0;
flex-wrap: wrap;
justify-content: center;
}
.footer-links li {
margin: 0 1.2rem;
}
.footer-links a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #3498db;
}
.social-icons {
margin-top: 1.5rem;
}
.social-icons a {
color: white;
font-size: 1.5rem;
margin: 0 10px;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: #3498db;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.2rem;
}
.soundboard {
grid-template-columns: 1fr;
}
.blog-posts {
grid-template-columns: 1fr;
}
.tool-section {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<nav>
<div class="logo"><i class="fas fa-cloud-moon"></i> SleepSound Mixer</div>
<ul class="nav-links">
<li><a href="#tool">Mixer</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Create Your Perfect Sleep Soundscape</h1>
<p>Mix different ambient sounds to create a custom environment perfect for sleep, meditation, or focus.</p>
</div>
</section>
<!-- Tool Section -->
<section class="tool-section" id="tool">
<div class="container">
<h2>Sleep Sound Mixer</h2>
<div class="soundboard">
<div class="sound-card">
<div class="sound-icon"><i class="fas fa-water"></i></div>
<h3>Rain</h3>
<input type="range" class="volume-control" id="rain-volume" min="0" max="1" step="0.1" value="0">
<button class="play-btn" id="rain-btn"><i class="fas fa-play"></i> Play</button>
</div>
<div class="sound-card">
<div class="sound-icon"><i class="fas fa-wind"></i></div>
<h3>Wind</h3>
<input type="range" class="volume-control" id="wind-volume" min="0" max="1" step="0.1" value="0">
<button class="play-btn" id="wind-btn"><i class="fas fa-play"></i> Play</button>
</div>
<div class="sound-card">
<div class="sound-icon"><i class="fas fa-fire"></i></div>
<h3>Fireplace</h3>
<input type="range" class="volume-control" id="fire-volume" min="0" max="1" step="0.1" value="0">
<button class="play-btn" id="fire-btn"><i class="fas fa-play"></i> Play</button>
</div>
<div class="sound-card">
<div class="sound-icon"><i class="fas fa-waves"></i></div>
<h3>Ocean Waves</h3>
<input type="range" class="volume-control" id="ocean-volume" min="0" max="1" step="0.1" value="0">
<button class="play-btn" id="ocean-btn"><i class="fas fa-play"></i> Play</button>
</div>
</div>
<div class="mixer-controls">
<h3>Sleep Timer</h3>
<div class="timer-display">60:00</div>
<input type="range" id="timer-slider" min="5" max="120" value="60" style="width: 80%; max-width: 500px;">
<div style="margin-top: 20px;">
<button class="play-btn" id="start-btn"><i class="fas fa-play-circle"></i> Start Mix</button>
<button class="play-btn playing" id="stop-btn" style="background: #e74c3c;"><i class="fas fa-stop-circle"></i> Stop All</button>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="blog-section" id="blog">
<div class="container">
<h2>Sleep Sound Blog</h2>
<div class="blog-posts">
<article class="blog-card">
<div class="blog-img" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
<div class="blog-content">
<h3>The Science Behind Sleep Sounds</h3>
<p>Discover how certain sounds can help you fall asleep faster and enjoy deeper, more restful sleep through the science of sound therapy.</p>
<a href="#" class="read-more">Read More</a>
</div>
</article>
<article class="blog-card">
<div class="blog-img" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
<div class="blog-content">
<h3>Creating the Perfect Sleep Environment</h3>
<p>Learn how to combine sounds effectively to mask disruptive noises and create the ideal acoustic environment for sleep.</p>
<a href="#" class="read-more">Read More</a>
</div>
</article>
<article class="blog-card">
<div class="blog-img" style="background-image: url('https://images.unsplash.com/photo-1548600916-dc8492f8e845?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
<div class="blog-content">
<h3>How We Developed the Sound Mixer</h3>
<p>Read about our journey creating this tool and how we selected the most effective sounds for relaxation and sleep.</p>
<a href="#" class="read-more">Read More</a>
</div>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="logo" style="color: white; margin-bottom: 15px;"><i class="fas fa-cloud-moon"></i> SleepSound Mixer</div>
<ul class="footer-links">
<li><a href="#tool">Mixer</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
</ul>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
<p>© 2023 SleepSound Mixer. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Audio elements (using free sample URLs)
const rainAudio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-rain-loop-2391.mp3');
const windAudio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-wind-loop-2401.mp3');
const fireAudio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-crackling-fireplace-loop-1381.mp3');
const oceanAudio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-ocean-waves-loop-464.mp3');
// Set audio to loop
rainAudio.loop = true;
windAudio.loop = true;
fireAudio.loop = true;
oceanAudio.loop = true;
// Get buttons and sliders
const rainBtn = document.getElementById('rain-btn');
const windBtn = document.getElementById('wind-btn');
const fireBtn = document.getElementById('fire-btn');
const oceanBtn = document.getElementById('ocean-btn');
const rainSlider = document.getElementById('rain-volume');
const windSlider = document.getElementById('wind-volume');
const fireSlider = document.getElementById('fire-volume');
const oceanSlider = document.getElementById('ocean-volume');
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const timerSlider = document.getElementById('timer-slider');
const timerDisplay = document.querySelector('.timer-display');
// Update timer display
timerSlider.addEventListener('input', function() {
timerDisplay.textContent = `${timerSlider.value}:00`;
});
// Toggle sound function
function toggleSound(button, audio, slider) {
if (audio.paused) {
audio.play();
button.innerHTML = '<i class="fas fa-pause"></i> Pause';
button.classList.add('playing');
audio.volume = slider.value;
} else {
audio.pause();
button.innerHTML = '<i class="fas fa-play"></i> Play';
button.classList.remove('playing');
}
}
// Volume control function
function setVolume(audio, slider) {
if (!audio.paused) {
audio.volume = slider.value;
}
}
// Event listeners for buttons
rainBtn.addEventListener('click', function() {
toggleSound(rainBtn, rainAudio, rainSlider);
});
windBtn.addEventListener('click', function() {
toggleSound(windBtn, windAudio, windSlider);
});
fireBtn.addEventListener('click', function() {
toggleSound(fireBtn, fireAudio, fireSlider);
});
oceanBtn.addEventListener('click', function() {
toggleSound(oceanBtn, oceanAudio, oceanSlider);
});
// Event listeners for sliders
rainSlider.addEventListener('input', function() {
setVolume(rainAudio, rainSlider);
});
windSlider.addEventListener('input', function() {
setVolume(windAudio, windSlider);
});
fireSlider.addEventListener('input', function() {
setVolume(fireAudio, fireSlider);
});
oceanSlider.addEventListener('input', function() {
setVolume(oceanAudio, oceanSlider);
});
// Stop all sounds
stopBtn.addEventListener('click', function() {
rainAudio.pause();
windAudio.pause();
fireAudio.pause();
oceanAudio.pause();
rainBtn.innerHTML = '<i class="fas fa-play"></i> Play';
windBtn.innerHTML = '<i class="fas fa-play"></i> Play';
fireBtn.innerHTML = '<i class="fas fa-play"></i> Play';
oceanBtn.innerHTML = '<i class="fas fa-play"></i> Play';
rainBtn.classList.remove('playing');
windBtn.classList.remove('playing');
fireBtn.classList.remove('playing');
oceanBtn.classList.remove('playing');
});
// Start mix with timer
startBtn.addEventListener('click', function() {
// Set volumes based on slider positions
rainAudio.volume = rainSlider.value;
windAudio.volume = windSlider.value;
fireAudio.volume = fireSlider.value;
oceanAudio.volume = oceanSlider.value;
// Play all sounds that have volume > 0
if (rainSlider.value > 0) {
rainAudio.play();
rainBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';
rainBtn.classList.add('playing');
}
if (windSlider.value > 0) {
windAudio.play();
windBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';
windBtn.classList.add('playing');
}
if (fireSlider.value > 0) {
fireAudio.play();
fireBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';
fireBtn.classList.add('playing');
}
if (oceanSlider.value > 0) {
oceanAudio.play();
oceanBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';
oceanBtn.classList.add('playing');
}
// Start timer (simplified - in real implementation would count down)
alert(`Sleep timer set for ${timerSlider.value} minutes. After this time, all sounds will fade out.`);
});
});
</script>
</body>
</html>