diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..bfebc09 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,100 @@ +:root { + --primary-color: #1DA1F2; + --secondary-color: #FFAD1F; + --background-color: #F5F8FA; + --surface-color: #FFFFFF; + --text-color: #14171A; + --border-radius: 12px; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: var(--background-color); + color: var(--text-color); + padding-top: 56px; /* For fixed navbar */ +} + +.navbar { + background-color: var(--surface-color) !important; + box-shadow: 0 2px 4px rgba(0,0,0,.05); +} + +.navbar-brand { + font-weight: 700; + color: var(--primary-color) !important; +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + border-radius: var(--border-radius); + padding: 10px 24px; + font-weight: 600; + transition: all 0.3s ease; +} + +.btn-primary:hover { + background-color: #1a91da; + border-color: #1a91da; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(29, 161, 242, 0.2); +} + +.hero-section { + background: linear-gradient(45deg, #1DA1F2, #87CEEB); + color: white; + padding: 120px 0; + text-align: center; +} + +.hero-section h1 { + font-weight: 700; +} + +.hero-section .btn-primary { + background-color: var(--surface-color); + color: var(--primary-color); + border: none; +} +.hero-section .btn-primary:hover { + background-color: #eef; + color: var(--primary-color); +} + + +#features .card { + border: none; + border-radius: var(--border-radius); + box-shadow: 0 4px 25px rgba(0,0,0,0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +#features .card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 30px rgba(0,0,0,0.12); +} + +#features .icon { + width: 48px; + height: 48px; + color: var(--primary-color); + margin-bottom: 1rem; +} + +.join-section { + background-color: var(--surface-color) !important; +} + +.join-section .form-control { + border-radius: var(--border-radius); + padding: 1rem; +} + +.join-section .form-control:focus { + box-shadow: 0 0 0 0.25rem rgba(29, 161, 242, 0.25); + border-color: var(--primary-color); +} + +footer { + background-color: var(--surface-color); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..60bf6c6 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,58 @@ +document.addEventListener('DOMContentLoaded', function () { + const waitlistForm = document.getElementById('waitlistForm'); + const toastEl = document.getElementById('liveToast'); + const toastBody = toastEl.querySelector('.toast-body'); + const toast = new bootstrap.Toast(toastEl); + + if (waitlistForm) { + waitlistForm.addEventListener('submit', function (e) { + e.preventDefault(); + const emailInput = document.getElementById('email'); + const email = emailInput.value; + + if (!email || !/^\S+@\S+\.\S+$/.test(email)) { + toastBody.textContent = 'Please enter a valid email address.'; + toastBody.parentElement.classList.remove('bg-success', 'text-white'); + toastBody.parentElement.classList.add('bg-danger', 'text-white'); + toast.show(); + return; + } + + const submitButton = waitlistForm.querySelector('button[type="submit"]'); + submitButton.disabled = true; + submitButton.innerHTML = ' Sending...'; + + fetch('join_waitlist.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: 'email=' + encodeURIComponent(email) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + toastBody.textContent = data.message || 'Thanks for joining the waitlist!'; + toastBody.parentElement.classList.remove('bg-danger', 'text-white'); + toastBody.parentElement.classList.add('bg-success', 'text-white'); + emailInput.value = ''; + } else { + toastBody.textContent = data.message || 'Something went wrong. Please try again.'; + toastBody.parentElement.classList.remove('bg-success', 'text-white'); + toastBody.parentElement.classList.add('bg-danger', 'text-white'); + } + toast.show(); + }) + .catch(error => { + toastBody.textContent = 'An error occurred. Please try again later.'; + toastBody.parentElement.classList.remove('bg-success', 'text-white'); + toastBody.parentElement.classList.add('bg-danger', 'text-white'); + toast.show(); + }) + .finally(() => { + submitButton.disabled = false; + submitButton.textContent = 'Notify Me'; + }); + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..38db19f 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,127 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + teenconnect + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… + + + +
+
+

The Social App You've Been Waiting For

+

Connect with friends, share your world, and discover new interests in a community built for you.

+ Get Early Access +
+
+ +
+
+
+
+
+
+
+ +

Connect Safely

+

A community with strong safety features and content moderation to keep you safe.

+
+
+
+
+
+
+ +

Share Your Moments

+

Post photos, short videos, and stories to share your life with friends.

+
+
+
+
+
+
+ +

Discover Trends

+

Explore a personalized feed of content from creators you follow and topics you love.

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

Join the Waitlist

+

Be the first to know when teenconnect launches. Drop your email below.

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

© teenconnect. All Rights Reserved.

+
+
+ +
+ -

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
- + + + + + - + \ No newline at end of file diff --git a/join_waitlist.php b/join_waitlist.php new file mode 100644 index 0000000..cb88f06 --- /dev/null +++ b/join_waitlist.php @@ -0,0 +1,35 @@ + false, 'message' => 'Invalid request.']); + exit; +} + +$email = trim($_POST['email']); + +if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { + http_response_code(400); + echo json_encode(['success' => false, 'message' => 'Invalid email format.']); + exit; +} + +// Use MailService to send a notification +require_once __DIR__ . '/mail/MailService.php'; + +$subject = 'New Waitlist Signup for teenconnect'; +$htmlBody = "

A new user has joined the waitlist for teenconnect:

Email: " . htmlspecialchars($email) . "

"; +$textBody = "A new user has joined the waitlist for teenconnect:\nEmail: " . htmlspecialchars($email); + +// sendMail sends to MAIL_TO from .env if $to is null +$result = MailService::sendMail(null, $subject, $htmlBody, $textBody); + +if (!empty($result['success'])) { + echo json_encode(['success' => true, 'message' => 'Thank you for joining the waitlist! We will notify you upon launch.']); +} else { + // In a real app, you would log the detailed error ($result['error']) + http_response_code(500); + echo json_encode(['success' => false, 'message' => 'We could not process your request at this time. Please try again later.']); +}