version 2

add_song.php

@@ -0,0 +1,82 @@
+<?php
+header('Content-Type: application/json');
+require_once 'db/config.php';
+
+$response = [
+    'status' => 'error',
+    'message' => 'Invalid request.'
+];
+
+// Get the posted data
+$data = json_decode(file_get_contents('php://input'), true);
+
+if (!$data) {
+    echo json_encode($response);
+    exit();
+}
+
+// Basic validation
+$session_code = $data['sessionCode'] ?? null;
+$track_title = $data['title'] ?? null;
+$artist_name = $data['artist'] ?? null;
+$album_art_url = $data['albumArt'] ?? null;
+$source = $data['source'] ?? null;
+
+if (!$session_code || !$track_title || !$artist_name) {
+    $response['message'] = 'Missing required song data.';
+    echo json_encode($response);
+    exit();
+}
+
+try {
+    $pdo = db();
+
+    // 1. Get session ID from session code
+    $stmt = $pdo->prepare("SELECT id FROM sessions WHERE session_code = ? AND status = 'active'");
+    $stmt->execute([$session_code]);
+    $session = $stmt->fetch();
+
+    if (!$session) {
+        $response['message'] = 'Invalid or inactive session.';
+        echo json_encode($response);
+        exit();
+    }
+    $session_id = $session['id'];
+
+    // 2. Check for duplicates
+    $stmt = $pdo->prepare("SELECT id FROM queue_items WHERE session_id = ? AND track_title = ? AND artist_name = ?");
+    $stmt->execute([$session_id, $track_title, $artist_name]);
+    if ($stmt->fetch()) {
+        $response['message'] = 'This song is already in the queue.';
+        echo json_encode($response);
+        exit();
+    }
+
+    // 3. Insert the new song
+    $sql = "INSERT INTO queue_items (session_id, track_title, artist_name, album_art_url, source, added_by) VALUES (?, ?, ?, ?, ?, ?)";
+    $stmt = $pdo->prepare($sql);
+    
+    // For now, added_by is anonymous. This can be updated later with user profiles.
+    $added_by = 'Guest'; 
+    
+    if ($stmt->execute([$session_id, $track_title, $artist_name, $album_art_url, $source, $added_by])) {
+        $new_song_id = $pdo->lastInsertId();
+        
+        // Fetch the newly added song to return to the client
+        $stmt = $pdo->prepare("SELECT * FROM queue_items WHERE id = ?");
+        $stmt->execute([$new_song_id]);
+        $new_song_data = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        $response['status'] = 'success';
+        $response['message'] = 'Song added successfully!';
+        $response['data'] = $new_song_data;
+    } else {
+        $response['message'] = 'Failed to add song to the database.';
+    }
+
+} catch (PDOException $e) {
+    // In a real app, log this error instead of exposing it.
+    $response['message'] = 'Database error: ' . $e->getMessage();
+}
+
+echo json_encode($response);

assets/css/custom.css

@@ -118,3 +118,237 @@ body {
 .footer a:hover {
     color: var(--primary-color);
 }
+
+/* Floating Action Button (FAB) */
+.fab {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 60px;
+    height: 60px;
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-primary-color);
+    font-size: 24px;
+    border: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out, background-color 0.2s;
+    z-index: 1050;
+}
+
+.fab:hover {
+    background-color: #1ed760;
+    transform: scale(1.1);
+}
+
+/* Modal Styles */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(5px);
+    z-index: 1055;
+    display: none; /* Hidden by default */
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.modal-overlay.visible {
+    display: block;
+    opacity: 1;
+}
+
+.modal-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--surface-color);
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    padding: 1.5rem;
+    transform: translateY(100%);
+    transition: transform 0.3s ease-out;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.modal-overlay.visible .modal-container {
+    transform: translateY(0);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #282828;
+}
+
+.modal-title {
+    font-weight: 700;
+    font-size: 1.5rem;
+}
+
+.btn-close-modal {
+    background: none;
+    border: none;
+    color: var(--text-secondary-color);
+    font-size: 1.5rem;
+}
+
+.btn-close-modal:hover {
+    color: var(--text-primary-color);
+}
+
+.search-bar-container {
+    position: relative;
+    margin-top: 1rem;
+}
+
+.search-bar-container .bi-search {
+    position: absolute;
+    top: 50%;
+    left: 15px;
+    transform: translateY(-50%);
+    color: var(--text-secondary-color);
+}
+
+#song-search-input {
+    background-color: #282828;
+    border: 1px solid #333;
+    color: var(--text-primary-color);
+    border-radius: 8px;
+    padding-left: 40px;
+    height: 50px;
+}
+
+#song-search-input::placeholder {
+    color: var(--text-secondary-color);
+}
+
+.source-toggles {
+    display: flex;
+    gap: 10px;
+    margin-top: 1rem;
+}
+
+.btn-source {
+    flex-grow: 1;
+    background-color: #282828;
+    border: 1px solid #333;
+    color: var(--text-secondary-color);
+    border-radius: 8px;
+    padding: 10px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.btn-source.active {
+    background-color: var(--primary-color);
+    color: var(--text-primary-color);
+    border-color: var(--primary-color);
+}
+
+.search-result-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.search-result-item:hover {
+    background-color: #282828;
+}
+
+.search-result-item img {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    margin-right: 15px;
+}
+
+.search-result-item .track-info {
+    flex-grow: 1;
+}
+
+.search-result-item .track-title {
+    font-weight: 600;
+}
+
+.search-result-item .artist-name {
+    font-size: 0.9rem;
+    color: var(--text-secondary-color);
+}
+
+.source-icon {
+    font-size: 1.5rem;
+    color: var(--text-secondary-color);
+}
+
+.queue-item {
+    background-color: var(--surface-color);
+    border-radius: var(--border-radius-card);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    border: 1px solid #282828;
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.queue-item.new-item {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+
+.queue-item img {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    margin-right: 1rem;
+}
+
+.queue-item .track-info {
+    flex-grow: 1;
+}
+
+.queue-item .track-title {
+    font-weight: 600;
+    color: var(--text-primary-color);
+}
+
+.queue-item .artist-name {
+    color: var(--text-secondary-color);
+}
+
+.vote-button {
+    background-color: transparent;
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    width: 50px;
+    height: 50px;
+}
+
+.vote-button .bi {
+    font-size: 1.2rem;
+}
+

assets/js/main.js

@@ -10,4 +10,103 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         });
     });
+
+    // --- Add Song Modal Logic ---
+    const addSongFab = document.getElementById('add-song-fab');
+    const modalOverlay = document.getElementById('add-song-modal-overlay');
+    const modalContainer = document.getElementById('add-song-modal-container');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+    const searchResultsContainer = document.getElementById('search-results');
+    const queueList = document.getElementById('queue-list');
+    const emptyQueueMessage = document.getElementById('empty-queue-message');
+
+    if (addSongFab) {
+        addSongFab.addEventListener('click', () => {
+            modalOverlay.classList.add('visible');
+        });
+    }
+
+    if (closeModalBtn) {
+        closeModalBtn.addEventListener('click', closeModal);
+    }
+
+    if (modalOverlay) {
+        modalOverlay.addEventListener('click', (e) => {
+            if (e.target === modalOverlay) {
+                closeModal();
+            }
+        });
+    }
+
+    function closeModal() {
+        modalContainer.style.transform = 'translateY(100%)';
+        modalOverlay.classList.remove('visible');
+    }
+
+    // --- Add Song to Queue Logic ---
+    searchResultsContainer.addEventListener('click', (e) => {
+        const resultItem = e.target.closest('.search-result-item');
+        if (!resultItem) return;
+
+        const song = {
+            title: resultItem.dataset.title,
+            artist: resultItem.dataset.artist,
+            albumArt: resultItem.dataset.albumArt,
+            source: resultItem.dataset.source,
+            sessionCode: window.currentSessionCode
+        };
+
+        addSongToQueue(song);
+    });
+
+    async function addSongToQueue(song) {
+        try {
+            const response = await fetch('add_song.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(song),
+            });
+
+            const result = await response.json();
+
+            if (result.status === 'success') {
+                addSongToDOM(result.data);
+                closeModal();
+            } else {
+                alert(result.message || 'Failed to add song.');
+            }
+        } catch (error) {
+            console.error('Error adding song:', error);
+            alert('An error occurred. Please try again.');
+        }
+    }
+
+    function addSongToDOM(song) {
+        if (emptyQueueMessage) {
+            emptyQueueMessage.remove();
+        }
+
+        const queueItem = document.createElement('div');
+        queueItem.className = 'queue-item new-item';
+        queueItem.innerHTML = `
+            <img src="${song.album_art_url}" alt="Album Art">
+            <div class="track-info">
+                <div class="track-title">${song.track_title}</div>
+                <div class="artist-name">${song.artist_name}</div>
+            </div>
+            <button class="vote-button">
+                <i class="bi bi-caret-up-fill"></i>
+                <span>${song.votes}</span>
+            </button>
+        `;
+
+        queueList.appendChild(queueItem);
+
+        // Trigger the animation
+        setTimeout(() => {
+            queueItem.classList.remove('new-item');
+        }, 10); // Small delay to ensure the transition is applied
+    }
 });

db/setup.php

@@ -12,8 +12,22 @@ try {
             updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
         ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
     ");
-    echo "Database table 'sessions' created successfully.\n";
+
+    $pdo->exec("
+        CREATE TABLE IF NOT EXISTS queue_items (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            session_id INT NOT NULL,
+            track_title VARCHAR(255) NOT NULL,
+            artist_name VARCHAR(255),
+            album_art_url VARCHAR(255),
+            added_by VARCHAR(255),
+            votes INT DEFAULT 0,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (session_id) REFERENCES sessions(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    ");
+
+    echo "Database tables created successfully.\n";
 } catch (PDOException $e) {
     die("Database setup failed: " . $e->getMessage());
-}
-
+}

join.php

@@ -0,0 +1,138 @@
+<?php
+require_once 'db/config.php';
+
+if (!isset($_GET['code'])) {
+    header("Location: index.php");
+    exit();
+}
+
+$session_code = $_GET['code'];
+$session_id = null;
+$queue_items = [];
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT id, status FROM sessions WHERE session_code = ?");
+    $stmt->execute([$session_code]);
+    $session = $stmt->fetch();
+
+    if (!$session || $session['status'] !== 'active') {
+        header("Location: index.php?error=invalid_session");
+        exit();
+    }
+    $session_id = $session['id'];
+
+    $stmt = $pdo->prepare("SELECT * FROM queue_items WHERE session_id = ? ORDER BY votes DESC, created_at ASC");
+    $stmt->execute([$session_id]);
+    $queue_items = $stmt->fetchAll();
+
+} catch (PDOException $e) {
+    // In a real app, you'd log this error, not show it to the user.
+    die("Database error. Please check configuration.");
+}
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SyncUp Queue</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(); ?>">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">
+</head>
+<body>
+
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <div class="container">
+            <a class="navbar-brand" href="index.php">SyncUp</a>
+        </div>
+    </nav>
+
+    <div class="container mt-4 pb-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="mb-0">Queue</h1>
+        </div>
+
+        <div id="queue-list">
+            <?php if (empty($queue_items)): ?>
+                <div id="empty-queue-message" class="text-center p-5 rounded" style="background-color: var(--surface-color);">
+                    <h2>The Queue is Empty</h2>
+                    <p class="text-secondary">Be the first to add a song and get the party started!</p>
+                </div>
+            <?php else: ?>
+                <?php foreach ($queue_items as $item): ?>
+                    <div class="queue-item">
+                        <img src="<?php echo htmlspecialchars($item['album_art_url'] ?: 'https://placehold.co/64x64/1E1E1E/FFFFFF?text=S'); ?>" alt="Album Art">
+                        <div class="track-info">
+                            <div class="track-title"><?php echo htmlspecialchars($item['track_title']); ?></div>
+                            <div class="artist-name"><?php echo htmlspecialchars($item['artist_name']); ?></div>
+                        </div>
+                        <button class="vote-button">
+                            <i class="bi bi-caret-up-fill"></i>
+                            <span><?php echo $item['votes']; ?></span>
+                        </button>
+                    </div>
+                <?php endforeach; ?>
+            <?php endif; ?>
+        </div>
+    </div>
+
+    <!-- Floating Action Button -->
+    <button class="fab" id="add-song-fab" aria-label="Add song">
+        <i class="bi bi-plus-lg"></i>
+    </button>
+
+    <!-- Add Song Modal -->
+    <div class="modal-overlay" id="add-song-modal-overlay">
+        <div class="modal-container" id="add-song-modal-container">
+            <div class="modal-header">
+                <h5 class="modal-title">Add a Song</h5>
+                <button type="button" class="btn-close-modal" id="close-modal-btn" aria-label="Close">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="search-bar-container">
+                    <i class="bi bi-search"></i>
+                    <input type="text" id="song-search-input" class="form-control" placeholder="Search for a song or artist...">
+                </div>
+                <div class="source-toggles">
+                    <button class="btn btn-source active" data-source="spotify">
+                        <i class="bi bi-spotify"></i> Spotify
+                    </button>
+                    <button class="btn btn-source" data-source="youtube">
+                        <i class="bi bi-youtube"></i> YouTube
+                    </button>
+                </div>
+                <div id="search-results" class="mt-3">
+                    <!-- Hardcoded placeholder results -->
+                    <div class="search-result-item" data-title="Blinding Lights" data-artist="The Weeknd" data-album-art="https://placehold.co/64x64/1ed760/000000?text=BL" data-source="spotify">
+                        <img src="https://placehold.co/64x64/1ed760/000000?text=BL" alt="Album Art">
+                        <div class="track-info">
+                            <div class="track-title">Blinding Lights</div>
+                            <div class="artist-name">The Weeknd</div>
+                        </div>
+                        <i class="bi bi-spotify source-icon"></i>
+                    </div>
+                    <div class="search-result-item" data-title="As It Was" data-artist="Harry Styles" data-album-art="https://placehold.co/64x64/ff6347/ffffff?text=AIW" data-source="youtube">
+                        <img src="https://placehold.co/64x64/ff6347/ffffff?text=AIW" alt="Album Art">
+                        <div class="track-info">
+                            <div class="track-title">As It Was</div>
+                            <div class="artist-name">Harry Styles</div>
+                        </div>
+                        <i class="bi bi-youtube source-icon"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        // Pass PHP variables to JavaScript
+        const currentSessionCode = "<?php echo htmlspecialchars($session_code, ENT_QUOTES, 'UTF-8'); ?>";
+    </script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>