diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..dd5a65d
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,120 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
+
+:root {
+ --background-color: #121212;
+ --surface-color: #1E1E1E;
+ --primary-color: #1DB954;
+ --text-primary-color: #FFFFFF;
+ --text-secondary-color: #B3B3B3;
+ --border-radius-btn: 12px;
+ --border-radius-card: 12px;
+}
+
+body {
+ background-color: var(--background-color);
+ color: var(--text-primary-color);
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ scroll-behavior: smooth;
+}
+
+.navbar {
+ background-color: rgba(30, 30, 30, 0.8);
+ backdrop-filter: blur(10px);
+}
+
+.navbar-brand {
+ font-weight: 900;
+ font-size: 1.75rem;
+ color: var(--text-primary-color);
+}
+
+.navbar-brand:hover {
+ color: var(--primary-color);
+}
+
+.hero {
+ background: linear-gradient(180deg, var(--surface-color) 0%, var(--background-color) 100%);
+ padding: 120px 0;
+ text-align: center;
+}
+
+.hero h1 {
+ font-weight: 900;
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+}
+
+.hero p {
+ color: var(--text-secondary-color);
+ font-size: 1.25rem;
+ margin-bottom: 2rem;
+}
+
+.btn-primary {
+ background-color: var(--primary-color);
+ border-color: var(--primary-color);
+ border-radius: var(--border-radius-btn);
+ font-weight: 700;
+ padding: 12px 32px;
+ font-size: 1.1rem;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.btn-primary:hover {
+ background-color: #1ed760;
+ border-color: #1ed760;
+ transform: scale(1.05);
+}
+
+.section {
+ padding: 80px 0;
+}
+
+.section-title {
+ text-align: center;
+ font-weight: 700;
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+}
+
+.feature-card {
+ background-color: var(--surface-color);
+ border-radius: var(--border-radius-card);
+ padding: 2rem;
+ text-align: center;
+ height: 100%;
+ border: 1px solid #282828;
+}
+
+.feature-card .icon {
+ font-size: 3rem;
+ color: var(--primary-color);
+ margin-bottom: 1.5rem;
+}
+
+.feature-card h3 {
+ font-weight: 700;
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.feature-card p {
+ color: var(--text-secondary-color);
+}
+
+.footer {
+ background-color: var(--surface-color);
+ padding: 2rem 0;
+ text-align: center;
+ color: var(--text-secondary-color);
+}
+
+.footer a {
+ color: var(--text-secondary-color);
+ text-decoration: none;
+}
+
+.footer a:hover {
+ color: var(--primary-color);
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..bf84413
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,13 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+ // Smooth scroll for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+});
diff --git a/create_session.php b/create_session.php
new file mode 100644
index 0000000..287905f
--- /dev/null
+++ b/create_session.php
@@ -0,0 +1,35 @@
+prepare("SELECT id FROM sessions WHERE session_code = ?");
+ $stmt->execute([$session_code]);
+ if ($stmt->rowCount() === 0) {
+ $is_unique = true;
+ }
+}
+
+// Insert the new session
+$stmt = $pdo->prepare("INSERT INTO sessions (session_code) VALUES (?)");
+$stmt->execute([$session_code]);
+
+$session_id = $pdo->lastInsertId();
+
+// Redirect to the session page
+header("Location: session.php?id=" . $session_id);
+exit();
diff --git a/db/setup.php b/db/setup.php
new file mode 100644
index 0000000..d9c0195
--- /dev/null
+++ b/db/setup.php
@@ -0,0 +1,19 @@
+exec("
+ CREATE TABLE IF NOT EXISTS sessions (
+ id INT AUTO_INCREMENT PRIMARY KEY,
+ session_code VARCHAR(6) NOT NULL UNIQUE,
+ status ENUM('active', 'ended') NOT NULL DEFAULT 'active',
+ created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+ ");
+ echo "Database table 'sessions' created successfully.\n";
+} catch (PDOException $e) {
+ die("Database setup failed: " . $e->getMessage());
+}
+
diff --git a/index.php b/index.php
index 7205f3d..89b8109 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,99 @@
-
-
+
-
-
- New Style
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ SyncUp - Your Music, Your Vibe, Together.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
Analyzing your requirements and generating your website…
-
- Loading…
-
-
= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.
-
This page will update automatically as the plan is implemented.
-
Runtime: PHP = htmlspecialchars($phpVersion) ?> — UTC = htmlspecialchars($now) ?>
-
-
-
+
+
+
+
+
+
+
+
+
+
Your Music, Your Vibe, Together.
+
Stop passing the aux cord. Start a SyncUp session and let everyone add their favorite tracks to a shared, real-time queue.
+
+
+
+
+
+
+
+
+
+
How It Works
+
+
+
+
+
1. Start a Session
+
Instantly create a new music session and get a unique QR code for your room.
+
+
+
+
+
+
2. Invite Your Friends
+
Guests join by scanning the code—no app install required. They can immediately add songs.
+
+
+
+
+
+
3. Curate the Vibe
+
As the host, you can reorder or remove tracks. Guests can upvote their favorites to push them up the list.
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+