V1.0
This commit is contained in:
Flatlogic Bot
parent
18f422ee99
commit
da6d9c1c3d
247
assets/css/custom.css
Normal file
247
assets/css/custom.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
BIN
assets/images/chircuit.png
Normal file
BIN
assets/images/chircuit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
23
assets/js/main.js
Normal file
23
assets/js/main.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
BIN
assets/pasted-20251004-204952-8372a0b4.png
Normal file
BIN
assets/pasted-20251004-204952-8372a0b4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
assets/pasted-20251004-213557-e39f4b21.png
Normal file
BIN
assets/pasted-20251004-213557-e39f4b21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
assets/pasted-20251004-214547-4180afd7.png
Normal file
BIN
assets/pasted-20251004-214547-4180afd7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
assets/pasted-20251004-214807-c5b0059c.png
Normal file
BIN
assets/pasted-20251004-214807-c5b0059c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
assets/pasted-20251004-215121-6c7ffcc9.png
Normal file
BIN
assets/pasted-20251004-215121-6c7ffcc9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
assets/pasted-20251004-215216-3910b07e.png
Normal file
BIN
assets/pasted-20251004-215216-3910b07e.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
assets/pasted-20251004-215614-8b2e3618.png
Normal file
BIN
assets/pasted-20251004-215614-8b2e3618.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
308
index.php
308
index.php
@ -1,150 +1,178 @@
|
|||||||
<?php
|
<!DOCTYPE html>
|
||||||
declare(strict_types=1);
|
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
<title>FocusSleep - Find Your Quiet Place</title>
|
||||||
<?php
|
<meta name="description" content="FocusSleep App enhances focus and sleep with adaptive white noise, adjusting to your environment for optimal tranquility">
|
||||||
// Read project preview data from environment
|
<meta name="keywords" content="white noise, sleep app, focus app, adaptive audio, noise pollution, city noise, better sleep, focus improvement, Chircuit, sound masking">
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<meta property="og:title" content="FocusSleep - Find Your Quiet Place">
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<meta property="og:description" content="FocusSleep App enhances focus and sleep with adaptive white noise, adjusting to your environment for optimal tranquility">
|
||||||
?>
|
<meta property="og:image" content="https://images.pexels.com/photos/7130473/pexels-photo-7130473.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
|
||||||
<?php if ($projectDescription): ?>
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<!-- Meta description -->
|
<meta name="twitter:image" content="https://images.pexels.com/photos/7130473/pexels-photo-7130473.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
|
||||||
<!-- Open Graph meta tags -->
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
<!-- Twitter meta tags -->
|
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($projectImageUrl): ?>
|
|
||||||
<!-- Open Graph image -->
|
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<?php endif; ?>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<div class="card">
|
<!-- Night Sky Background -->
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<div class="sky-container">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="stars"></div>
|
||||||
<span class="sr-only">Loading…</span>
|
<div class="moon"></div>
|
||||||
|
<div class="cloud c1"></div>
|
||||||
|
<div class="cloud c2"></div>
|
||||||
|
<div class="cloud c3"></div>
|
||||||
</div>
|
</div>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
<!-- Navbar -->
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="#">
|
||||||
|
<img src="assets/pasted-20251004-214547-4180afd7.png" alt="Chircuit Logo">
|
||||||
|
FocusSleep
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
<ul class="navbar-nav ms-auto">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-md-12 text-center">
|
||||||
|
<h1 class="display-4">Find Your Quiet Place</h1>
|
||||||
|
<p class="lead">Adaptive white noise to help you sleep, focus, and relax in a noisy world.</p>
|
||||||
|
<a href="#" class="btn btn-primary btn-lg">Download on the App Store</a>
|
||||||
|
<a href="#" class="btn btn-secondary btn-lg">Get it on Google Play</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<h2>About the App</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features Section -->
|
||||||
|
<section id="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2>App Features</h2>
|
||||||
|
<p class="lead">Everything you need to control your audio environment.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4 mb-4">
|
||||||
|
<div class="card h-100 text-center p-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Adaptive Noise</h3>
|
||||||
|
<p class="card-text">Automatically adjusts volume based on your surroundings to block out distractions.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mb-4">
|
||||||
|
<div class="card h-100 text-center p-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Sound Profiles</h3>
|
||||||
|
<p class="card-text">Choose from a variety of sounds like white noise, pink noise, and nature sounds.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mb-4">
|
||||||
|
<div class="card h-100 text-center p-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Smart Scheduling</h3>
|
||||||
|
<p class="card-text">Set timers and schedules for when you need focus or a peaceful night's sleep.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Testimonials Section -->
|
||||||
|
<section id="testimonials">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2>What Our Users Say</h2>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="card testimonial-card p-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="card-text">"I can finally sleep through the night! The traffic noise used to wake me up constantly, but now I don't hear a thing."</p>
|
||||||
|
<footer class="blockquote-footer text-light">Sarah J.</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="card testimonial-card p-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="card-text">"A game-changer for my productivity. I can tune out my noisy open-plan office and actually get work done."</p>
|
||||||
|
<footer class="blockquote-footer text-light">Mike R.</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="contact-form">
|
||||||
|
<h2 class="text-center mb-4">Get in Touch</h2>
|
||||||
|
<form id="contactForm" novalidate>
|
||||||
|
<div class="mb-3">
|
||||||
|
<input type="text" class="form-control" id="name" placeholder="Your Name" required>
|
||||||
|
<div class="invalid-feedback">Please enter your name.</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<input type="email" class="form-control" id="email" placeholder="Your Email" required>
|
||||||
|
<div class="invalid-feedback">Please enter a valid email.</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<textarea class="form-control" id="message" rows="5" placeholder="Your Message" required></textarea>
|
||||||
|
<div class="invalid-feedback">Please enter a message.</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
<footer>
|
<footer>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<div class="container text-center">
|
||||||
|
<p>© 2025 FocusSleep. All Rights Reserved.</p>
|
||||||
|
<p><a href="/privacy.php">Privacy Policy</a></p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
38
privacy.php
Normal file
38
privacy.php
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Privacy Policy - Sound Sleep</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navbar -->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="index.php">
|
||||||
|
<img src="https://i.imgur.com/lF6R32z.png" alt="Chircuit Logo">
|
||||||
|
FocusSleep
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1>Privacy Policy</h1>
|
||||||
|
<p>This is a placeholder for the Privacy Policy page.</p>
|
||||||
|
<p>Information about how user data is collected, used, and protected will be detailed here.</p>
|
||||||
|
<a href="index.php">Go back to Home</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="fixed-bottom">
|
||||||
|
<div class="container text-center">
|
||||||
|
<p>© 2025 FocusSleep. All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user