diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..95ddce5 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,247 @@ +@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Lato:wght@400;700&display=swap'); + +:root { + --primary-color: #8E85FF; /* A soft purple */ + --secondary-color: #FFD700; /* Yellow for accents */ + --background-dark: #0d0c1d; /* Deep, dark navy-purple */ + --background-light: #2c2a4a; /* Lighter purple-blue */ + --text-color: #dcdcf2; /* Brighter lavender for visibility */ + --heading-color: #FFFFFF; +} + +body { + font-family: 'Lato', sans-serif; + background-color: var(--background-dark); + color: var(--text-color); + /* New background inspired by the image */ + background-image: radial-gradient(circle at top right, rgba(76, 59, 137, 0.4), transparent 40%), + radial-gradient(circle at bottom left, rgba(44, 42, 74, 0.5), transparent 50%), + linear-gradient(to bottom, #0d0c1d, #1a183e); + overflow-x: hidden; + position: relative; +} + +/* --- Night Sky Background Elements --- */ + +.sky-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; +} + +.stars { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; +} + +.stars::before, .stars::after { + content: ""; + position: absolute; + width: 2px; + height: 2px; + background: white; + border-radius: 50%; + box-shadow: + /* A lot of stars! */ + -5vw 15vh 0px 0px white, 10vw 5vh 1px 0px white, 15vw 25vh 0px 0px white, 20vw 80vh 1px 0px white, 25vw 45vh 0px 0px white, + 30vw 10vh 1px 0px white, 35vw 90vh 0px 0px white, 40vw 20vh 1px 0px white, 45vw 60vh 0px 0px white, 50vw 5vh 1px 0px white, + 55vw 75vh 0px 0px white, 60vw 30vh 1px 0px white, 65vw 95vh 0px 0px white, 70vw 15vh 1px 0px white, 75vw 50vh 0px 0px white, + 80vw 85vh 1px 0px white, 85vw 20vh 0px 0px white, 90vw 65vh 1px 0px white, 95vw 10vh 0px 0px white, 98vw 98vh 1px 0px white; + animation: twinkle 5s infinite alternate; +} + +.stars::after { + width: 1px; + height: 1px; + box-shadow: + 5vw 80vh 0px 0px white, 12vw 40vh 1px 0px white, 18vw 5vh 0px 0px white, 22vw 60vh 1px 0px white, 28vw 30vh 0px 0px white, + 33vw 70vh 1px 0px white, 38vw 15vh 0px 0px white, 42vw 85vh 1px 0px white, 48vw 40vh 0px 0px white, 52vw 95vh 1px 0px white, + 58vw 25vh 0px 0px white, 62vw 60vh 1px 0px white, 68vw 5vh 0px 0px white, 72vw 70vh 1px 0px white, 78vw 35vh 0px 0px white, + 82vw 90vh 1px 0px white, 88vw 50vh 0px 0px white, 92vw 20vh 1px 0px white, 96vw 80vh 0px 0px white, 3vw 3vh 1px 0px white; + animation-delay: 2.5s; +} + +@keyframes twinkle { + from { opacity: 0.3; } + to { opacity: 1; } +} + +.moon { + position: absolute; + top: 10vh; + right: 15vw; + width: 100px; + height: 100px; + border-radius: 50%; + background: #F0E68C; + box-shadow: + 0 0 20px #F0E68C, + 0 0 40px #F0E68C, + 0 0 60px rgba(240, 230, 140, 0.5); +} + +.moon::after { + content: ''; + position: absolute; + top: -10px; + left: 20px; + width: 90px; + height: 90px; + border-radius: 50%; + background: var(--background-dark); + transform: rotate(-15deg); +} + +.cloud { + position: absolute; + background: rgba(255, 255, 255, 0.05); + border-radius: 50%; + width: 150px; + height: 50px; + filter: blur(8px); + animation: drift 80s infinite linear; +} + +.cloud.c1 { top: 20vh; left: -200px; animation-duration: 80s; } +.cloud.c2 { top: 40vh; left: -300px; animation-duration: 120s; transform: scale(1.5); } +.cloud.c3 { top: 60vh; left: -150px; animation-duration: 100s; transform: scale(0.8); } + +@keyframes drift { + from { transform: translateX(0); left: -200px; } + to { transform: translateX(150vw); } +} + + +/* --- General Styling --- */ + +h1, h2, h3, h4, h5, h6 { + font-family: 'Merriweather', serif; + font-weight: 700; + color: var(--heading-color); +} + +p, .lead, .card-text, .blockquote-footer { + color: var(--text-color) !important; /* Make text more visible */ +} + +.navbar { + background-color: rgba(13, 12, 29, 0.8); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.navbar-brand { + color: var(--heading-color) !important; + font-weight: bold; +} + +.navbar-brand img { + height: 40px; +} + +.nav-link { + color: var(--text-color) !important; +} + +.hero { + padding: 100px 0; + text-align: center; + position: relative; +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + border-radius: 12px; + padding: 12px 24px; + font-weight: bold; + color: white; +} + +.btn-primary:hover { + background-color: #a199ff; + border-color: #a199ff; +} + +.btn-secondary { + background-color: transparent; + border-color: var(--secondary-color); + color: var(--secondary-color); + border-radius: 12px; + padding: 12px 24px; + font-weight: bold; +} + +.btn-secondary:hover { + background-color: var(--secondary-color); + border-color: var(--secondary-color); + color: var(--background-dark); +} + +section { + padding: 60px 0; + position: relative; +} + +.bg-light { + background-color: transparent !important; +} + +.card { + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + background-color: rgba(44, 42, 74, 0.4); + backdrop-filter: blur(5px); + box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2); + transition: transform 0.3s, box-shadow 0.3s; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); +} + +.contact-form { + background: rgba(44, 42, 74, 0.4); + padding: 40px; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); +} + +.form-control { + background-color: rgba(13, 12, 29, 0.5); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--text-color); + border-radius: 8px; +} + +.form-control::placeholder { + color: #a199ff; +} + +.form-control:focus { + background-color: rgba(13, 12, 29, 0.7); + border-color: var(--primary-color); + color: white; + box-shadow: none; +} + +footer { + background-color: transparent; + padding: 40px 0; + margin-top: 40px; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +footer a { + color: var(--primary-color); +} diff --git a/assets/images/chircuit.png b/assets/images/chircuit.png new file mode 100644 index 0000000..765be9f Binary files /dev/null and b/assets/images/chircuit.png differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..ece9823 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,23 @@ + +document.addEventListener('DOMContentLoaded', function () { + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Contact form validation + const contactForm = document.getElementById('contactForm'); + contactForm.addEventListener('submit', function(event) { + if (!contactForm.checkValidity()) { + event.preventDefault(); + event.stopPropagation(); + } + contactForm.classList.add('was-validated'); + }, false); +}); diff --git a/assets/pasted-20251004-204952-8372a0b4.png b/assets/pasted-20251004-204952-8372a0b4.png new file mode 100644 index 0000000..d9fed7e Binary files /dev/null and b/assets/pasted-20251004-204952-8372a0b4.png differ diff --git a/assets/pasted-20251004-213557-e39f4b21.png b/assets/pasted-20251004-213557-e39f4b21.png new file mode 100644 index 0000000..fc8fa73 Binary files /dev/null and b/assets/pasted-20251004-213557-e39f4b21.png differ diff --git a/assets/pasted-20251004-214547-4180afd7.png b/assets/pasted-20251004-214547-4180afd7.png new file mode 100644 index 0000000..fc8fa73 Binary files /dev/null and b/assets/pasted-20251004-214547-4180afd7.png differ diff --git a/assets/pasted-20251004-214807-c5b0059c.png b/assets/pasted-20251004-214807-c5b0059c.png new file mode 100644 index 0000000..70fe841 Binary files /dev/null and b/assets/pasted-20251004-214807-c5b0059c.png differ diff --git a/assets/pasted-20251004-215121-6c7ffcc9.png b/assets/pasted-20251004-215121-6c7ffcc9.png new file mode 100644 index 0000000..70fe841 Binary files /dev/null and b/assets/pasted-20251004-215121-6c7ffcc9.png differ diff --git a/assets/pasted-20251004-215216-3910b07e.png b/assets/pasted-20251004-215216-3910b07e.png new file mode 100644 index 0000000..70fe841 Binary files /dev/null and b/assets/pasted-20251004-215216-3910b07e.png differ diff --git a/assets/pasted-20251004-215614-8b2e3618.png b/assets/pasted-20251004-215614-8b2e3618.png new file mode 100644 index 0000000..70fe841 Binary files /dev/null and b/assets/pasted-20251004-215614-8b2e3618.png differ diff --git a/index.php b/index.php index 7205f3d..2c4d825 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,178 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + FocusSleep - Find Your Quiet Place + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ + +
+
+
+
+
+
-
- + + + + + +
+
+
+
+

Find Your Quiet Place

+

Adaptive white noise to help you sleep, focus, and relax in a noisy world.

+ Download on the App Store + Get it on Google Play +
+
+
+
+ + +
+
+
+

About the App

+

In a world that never sleeps, FocusSleep is your personal oasis of calm. Our app is designed to help you reclaim your peace from the constant barrage of urban noise. Whether it's the traffic outside your window, a noisy neighbor, or the chatter of an open-plan office, FocusSleep creates a protective bubble of sound, allowing you to focus, relax, or get a full night's sleep. Using adaptive technology, it listens to your environment and adjusts the level of white noise in real-time, masking intrusive sounds and creating a consistent, tranquil audio backdrop.

+
+
+
+ + +
+
+
+

App Features

+

Everything you need to control your audio environment.

+
+
+
+
+
+

Adaptive Noise

+

Automatically adjusts volume based on your surroundings to block out distractions.

+
+
+
+
+
+
+

Sound Profiles

+

Choose from a variety of sounds like white noise, pink noise, and nature sounds.

+
+
+
+
+
+
+

Smart Scheduling

+

Set timers and schedules for when you need focus or a peaceful night's sleep.

+
+
+
+
+
+
+ + +
+
+
+

What Our Users Say

+
+
+
+
+
+

"I can finally sleep through the night! The traffic noise used to wake me up constantly, but now I don't hear a thing."

+
Sarah J.
+
+
+
+
+
+
+

"A game-changer for my productivity. I can tune out my noisy open-plan office and actually get work done."

+ +
+
+
+
+
+
+ + +
+
+
+
+
+

Get in Touch

+
+
+ +
Please enter your name.
+
+
+ +
Please enter a valid email.
+
+
+ +
Please enter a message.
+
+
+ +
+
+
+
+
+
+
+ + + + + + diff --git a/privacy.php b/privacy.php new file mode 100644 index 0000000..909f8cf --- /dev/null +++ b/privacy.php @@ -0,0 +1,38 @@ + + + + + + + Privacy Policy - Sound Sleep + + + + + + + +
+

Privacy Policy

+

This is a placeholder for the Privacy Policy page.

+

Information about how user data is collected, used, and protected will be detailed here.

+ Go back to Home +
+ + + + + + +