live audio room prototype 1

api/index.php

@@ -0,0 +1,90 @@
+<?php
+header("Content-Type: application/json");
+
+define('API_ROOMS_DIR', __DIR__ . '/rooms');
+
+if (!is_dir(API_ROOMS_DIR)) {
+    mkdir(API_ROOMS_DIR, 0777, true);
+}
+
+function getRoomFilePath($roomCode) {
+    // Basic validation to prevent directory traversal
+    if (preg_match('/^[a-z0-9]{6}$/', $roomCode)) {
+        return API_ROOMS_DIR . '/' . $roomCode . '.json';
+    }
+    return null;
+}
+
+function getRoomData($roomCode) {
+    $filePath = getRoomFilePath($roomCode);
+    if ($filePath && file_exists($filePath)) {
+        $data = file_get_contents($filePath);
+        return json_decode($data, true);
+    }
+    return null;
+}
+
+function saveRoomData($roomCode, $data) {
+    $filePath = getRoomFilePath($roomCode);
+    if ($filePath) {
+        file_put_contents($filePath, json_encode($data));
+    }
+}
+
+$action = $_POST['action'] ?? $_GET['action'] ?? '';
+$roomCode = $_POST['roomCode'] ?? $_GET['roomCode'] ?? '';
+
+switch ($action) {
+    case 'create-room':
+        $roomCode = substr(md5(uniqid()), 0, 6);
+        $roomData = [
+            'host' => uniqid('host_'),
+            'participants' => [],
+            'offer' => null,
+            'host_candidates' => [],
+            'participant_candidates' => [],
+            'createdAt' => time()
+        ];
+        saveRoomData($roomCode, $roomData);
+        echo json_encode(['roomCode' => $roomCode]);
+        break;
+
+    case 'get-room-details':
+        $roomData = getRoomData($roomCode);
+        if ($roomData) {
+            echo json_encode($roomData);
+        } else {
+            http_response_code(404);
+            echo json_encode(['error' => 'Room not found']);
+        }
+        break;
+
+    case 'signal':
+        $roomData = getRoomData($roomCode);
+        if ($roomData) {
+            $signal = json_decode(file_get_contents('php://input'), true);
+            if (isset($signal['offer'])) {
+                $roomData['offer'] = $signal['offer'];
+            }
+            if (isset($signal['answer'])) {
+                $roomData['answer'] = $signal['answer'];
+            }
+            if (isset($signal['candidate'])) {
+                if ($signal['isHost']) {
+                    $roomData['host_candidates'][] = $signal['candidate'];
+                } else {
+                    $roomData['participant_candidates'][] = $signal['candidate'];
+                }
+            }
+            saveRoomData($roomCode, $roomData);
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(404);
+            echo json_encode(['error' => 'Room not found']);
+        }
+        break;
+
+    default:
+        http_response_code(400);
+        echo json_encode(['error' => 'Invalid action']);
+}

api/rooms/6ce484.json

@@ -0,0 +1 @@
+{"host":"host_694462ae2d640","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089390}

api/rooms/a4412f.json

@@ -0,0 +1 @@
+{"host":"host_6944616e8a5c9","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089070}

api/rooms/ab99e6.json

@@ -0,0 +1 @@
+{"host":"host_694462ade7734","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089389}

api/rooms/f38da9.json

@@ -0,0 +1 @@
+{"host":"host_694461f172d06","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089201}

assets/css/custom.css

@@ -0,0 +1,36 @@
+
+body {
+    background-color: #F4F7F6;
+    background-image: linear-gradient(135deg, rgba(0,123,255,0.05) 0%, rgba(255,255,255,0) 25%);
+    font-family: 'Georgia', serif;
+}
+
+.display-4 {
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-weight: 700;
+}
+
+.card {
+    border: 1px solid rgba(0,0,0,0.08);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+}
+
+.form-control-lg {
+    text-align: center;
+    font-family: monospace;
+    letter-spacing: 0.5em;
+}
+
+.btn-lg {
+    padding: 0.75rem 1.5rem;
+}
+
+.toast-container {
+    z-index: 1090;
+}

assets/js/main.js

@@ -0,0 +1,346 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const API_URL = './api/';
+
+    // --- Main UI Elements ---
+    const selectionContainer = document.getElementById('selection-container');
+    const hostPanelContainer = document.getElementById('host-panel-container');
+    const participantPanelContainer = document.getElementById('participant-panel-container');
+    const toastContainer = document.querySelector('.toast-container');
+
+    // --- Room Joining Elements ---
+    const joinCodeInput = document.getElementById('join-code');
+    const joinRoomBtn = document.getElementById('join-room-btn');
+
+    // --- Room Creation Elements ---
+    const createRoomBtn = document.getElementById('create-room-btn');
+
+    // --- Host Panel Elements ---
+    const hostRoomCodeDisplay = document.getElementById('host-room-code');
+    const hostStatusDisplay = document.getElementById('host-status');
+    const startStreamingBtn = document.getElementById('start-streaming-btn');
+    const deleteRoomBtn = document.getElementById('delete-room-btn');
+
+    // --- Participant Panel Elements ---
+    const participantStatusDisplay = document.getElementById('participant-status');
+    const participantAudio = document.getElementById('participant-audio');
+    const leaveRoomBtn = document.getElementById('leave-room-btn');
+
+    // --- State Management ---
+    let localAudioStream = null;
+    let peerConnection = null;
+    let roomCode = null;
+    let isHost = false;
+
+    // ===================================================================
+    // 1. EVENT LISTENERS
+    // ===================================================================
+
+    if (joinCodeInput) {
+        joinCodeInput.addEventListener('input', () => {
+            joinRoomBtn.disabled = joinCodeInput.value.length < 6;
+        });
+    }
+
+    if (joinRoomBtn) {
+        joinRoomBtn.addEventListener('click', () => {
+            const code = joinCodeInput.value.toLowerCase();
+            joinRoom(code);
+        });
+    }
+
+    if (createRoomBtn) {
+        createRoomBtn.addEventListener('click', createRoom);
+    }
+
+    if (startStreamingBtn) {
+        startStreamingBtn.addEventListener('click', () => {
+            if (localAudioStream) {
+                stopStreaming();
+            } else {
+                startStreaming();
+            }
+        });
+    }
+
+    if (deleteRoomBtn) {
+        deleteRoomBtn.addEventListener('click', () => {
+            stopStreaming();
+            // TODO: Add server-side room deletion
+            hostPanelContainer.classList.add('d-none');
+            selectionContainer.classList.remove('d-none');
+            showToast('Room has been closed.');
+        });
+    }
+    
+    if (leaveRoomBtn) {
+        leaveRoomBtn.addEventListener('click', () => {
+            if (peerConnection) {
+                peerConnection.close();
+            }
+            participantPanelContainer.classList.add('d-none');
+            selectionContainer.classList.remove('d-none');
+            showToast('You have left the room.');
+        });
+    }
+
+    // ===================================================================
+    // 2. API & ROOM MANAGEMENT
+    // ===================================================================
+
+    async function createRoom() {
+        try {
+            const response = await fetch(`${API_URL}?action=create-room`);
+            const data = await response.json();
+            if (data.roomCode) {
+                roomCode = data.roomCode;
+                isHost = true;
+                hostRoomCodeDisplay.textContent = roomCode;
+                selectionContainer.classList.add('d-none');
+                hostPanelContainer.classList.remove('d-none');
+                showToast('Your room is live!', 'success');
+                listenForSignals();
+            }
+        } catch (error) {
+            console.error('Error creating room:', error);
+            showToast('Could not create room. Please try again.', 'danger');
+        }
+    }
+
+    async function joinRoom(code) {
+        try {
+            const response = await fetch(`${API_URL}?action=get-room-details&roomCode=${code}`);
+            if (!response.ok) throw new Error('Room not found');
+            
+            const data = await response.json();
+            roomCode = code;
+            isHost = false;
+            
+            selectionContainer.classList.add('d-none');
+            participantPanelContainer.classList.remove('d-none');
+            updateParticipantStatus('joining');
+            
+            await setupParticipantConnection(data);
+            listenForSignals();
+
+        } catch (error) {
+            console.error('Error joining room:', error);
+            showToast(`Could not join room: ${error.message}`, 'danger');
+        }
+    }
+    
+    // ===================================================================
+    // 3. CORE STREAMING LOGIC (WebRTC)
+    // ===================================================================
+
+    async function startStreaming() {
+        updateHostStatus('connecting');
+        try {
+            const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
+
+            if (stream.getAudioTracks().length === 0) {
+                stream.getTracks().forEach(track => track.stop());
+                showToast('No audio was shared. Please enable audio sharing.', 'danger');
+                updateHostStatus('error');
+                return;
+            }
+
+            localAudioStream = stream;
+            updateHostStatus('streaming');
+            showToast('Streaming started! Waiting for a participant...', 'success');
+
+            stream.getAudioTracks()[0].onended = () => stopStreaming();
+
+            // --- WebRTC Host Logic ---
+            peerConnection = createPeerConnection();
+            stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
+
+            const offer = await peerConnection.createOffer();
+            await peerConnection.setLocalDescription(offer);
+
+            await signal({ offer });
+
+        } catch (err) {
+            console.error('Streaming Error:', err);
+            updateHostStatus('error');
+            showToast('Could not start streaming.', 'danger');
+        }
+    }
+
+    function stopStreaming() {
+        if (localAudioStream) {
+            localAudioStream.getTracks().forEach(track => track.stop());
+            localAudioStream = null;
+        }
+        if (peerConnection) {
+            peerConnection.close();
+            peerConnection = null;
+        }
+        updateHostStatus('idle');
+        console.log('Streaming stopped.');
+    }
+    
+    async function setupParticipantConnection(roomData) {
+        peerConnection = createPeerConnection();
+        peerConnection.ontrack = (event) => {
+            updateParticipantStatus('playing');
+            participantAudio.srcObject = event.streams[0];
+            participantAudio.play();
+        };
+
+        await peerConnection.setRemoteDescription(new RTCSessionDescription(roomData.offer));
+        const answer = await peerConnection.createAnswer();
+        await peerConnection.setLocalDescription(answer);
+
+        await signal({ answer });
+
+        // Add host's ICE candidates
+        if (roomData.host_candidates) {
+            for (const candidate of roomData.host_candidates) {
+                await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
+            }
+        }
+    }
+
+
+    function createPeerConnection() {
+        const pc = new RTCPeerConnection({
+            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+        });
+
+        pc.onicecandidate = event => {
+            if (event.candidate) {
+                signal({ candidate: event.candidate });
+            }
+        };
+
+        pc.oniceconnectionstatechange = () => {
+            console.log('ICE Connection State:', pc.iceConnectionState);
+            if (isHost) {
+                 if (pc.iceConnectionState === 'connected') {
+                    showToast('A participant has connected!', 'success');
+                }
+            } else {
+                 if (pc.iceConnectionState === 'failed' || pc.iceConnectionState === 'disconnected') {
+                    updateParticipantStatus('error');
+                }
+            }
+        };
+
+        return pc;
+    }
+
+    async function signal(data) {
+        await fetch(`${API_URL}?action=signal&roomCode=${roomCode}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ...data, isHost })
+        });
+    }
+
+    // Basic polling to get signals from the other party
+    async function listenForSignals() {
+        const interval = setInterval(async () => {
+            try {
+                const response = await fetch(`${API_URL}?action=get-room-details&roomCode=${roomCode}`);
+                const data = await response.json();
+                
+                if (peerConnection && peerConnection.signalingState === 'stable') return;
+
+
+                if (isHost && data.answer && peerConnection.signalingState !== 'stable') {
+                    await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer));
+                     // Add participant's ICE candidates
+                    if (data.participant_candidates) {
+                        for (const candidate of data.participant_candidates) {
+                            await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
+                        }
+                    }
+                }
+
+            } catch (error) {
+                // console.error('Signaling listener error:', error);
+            }
+        }, 3000);
+        // Note: In a real app, you'd use WebSockets instead of polling.
+    }
+
+
+    // ===================================================================
+    // 4. UI HELPER FUNCTIONS
+    // ===================================================================
+
+    function updateHostStatus(status) {
+        startStreamingBtn.disabled = false;
+        let content = '';
+        switch (status) {
+            case 'connecting':
+                startStreamingBtn.disabled = true;
+                content = `<div class="spinner-border spinner-border-sm"></div><span class="ms-2">Requesting permission...</span>`;
+                hostStatusDisplay.className = 'alert alert-warning';
+                break;
+            case 'streaming':
+                startStreamingBtn.innerHTML = '<i class="bi bi-mic-mute-fill"></i> Stop Streaming';
+                startStreamingBtn.className = 'btn btn-danger btn-lg';
+                content = `<i class="bi bi-broadcast"></i> Now streaming... Waiting for connections.`;
+                hostStatusDisplay.className = 'alert alert-success';
+                break;
+            case 'error':
+                content = '<i class="bi bi-exclamation-triangle-fill"></i> Could not start streaming.';
+                hostStatusDisplay.className = 'alert alert-danger';
+                break;
+            case 'idle':
+            default:
+                startStreamingBtn.innerHTML = '<i class="bi bi-mic-fill"></i> Start Streaming';
+                startStreamingBtn.className = 'btn btn-success btn-lg';
+                content = 'Not currently streaming.';
+                hostStatusDisplay.className = 'alert alert-info';
+                break;
+        }
+        hostStatusDisplay.innerHTML = content;
+    }
+    
+    function updateParticipantStatus(status) {
+        let content = '';
+        switch (status) {
+            case 'joining':
+                content = `<div class="spinner-border"></div><p class="mt-3">Connecting to host...</p>`;
+                participantStatusDisplay.className = 'alert alert-info';
+                break;
+            case 'playing':
+                content = `<i class="bi bi-volume-up-fill"></i> Live audio is playing.`;
+                participantStatusDisplay.className = 'alert alert-success';
+                break;
+            case 'error':
+                content = '<i class="bi bi-exclamation-triangle-fill"></i> Connection lost. Please try rejoining.';
+                participantStatusDisplay.className = 'alert alert-danger';
+                 if (participantAudio.srcObject) {
+                    participantAudio.srcObject.getTracks().forEach(track => track.stop());
+                    participantAudio.srcObject = null;
+                }
+                break;
+        }
+        participantStatusDisplay.innerHTML = content;
+    }
+    
+    function showToast(message, type = 'info') {
+        if (!toastContainer) return;
+        const bgClass = {
+            info: 'bg-primary',
+            success: 'bg-success',
+            danger: 'bg-danger'
+        }[type] || 'bg-primary';
+        const toastEl = document.createElement('div');
+        toastEl.className = `toast align-items-center text-white ${bgClass} border-0`;
+        toastEl.setAttribute('role', 'alert');
+        toastEl.innerHTML = `
+            <div class="d-flex">
+                <div class="toast-body">${message}</div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+            </div>
+        `;
+        toastContainer.appendChild(toastEl);
+        const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
+        toast.show();
+        toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
+    }
+});

index.php

@@ -1,150 +1,131 @@
 <?php
-declare(strict_types=1);
+$project_name = !empty($_SERVER['PROJECT_NAME']) ? $_SERVER['PROJECT_NAME'] : 'LiveAudio Rooms';
-@ini_set('display_errors', '1');
+$project_description = !empty($_SERVER['PROJECT_DESCRIPTION']) ? $_SERVER['PROJECT_DESCRIPTION'] : 'Real-time audio sharing for everyone.';
-@error_reporting(E_ALL);
+$project_image_url = !empty($_SERVER['PROJECT_IMAGE_URL']) ? $_SERVER['PROJECT_IMAGE_URL'] : '';
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <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><?php echo htmlspecialchars($project_name); ?></title>
-<?php
+    <meta name="description" content="<?php echo htmlspecialchars($project_description); ?>">
-// Read project preview data from environment
+
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+    <!-- Open Graph / Twitter Meta Tags -->
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+    <meta property="og:title" content="<?php echo htmlspecialchars($project_name); ?>">
-?>
+    <meta property="og:description" content="<?php echo htmlspecialchars($project_description); ?>">
-<?php if ($projectDescription): ?>
+    <?php if ($project_image_url): ?>
-  <!-- Meta description -->
+    <meta property="og:image" content="<?php echo htmlspecialchars($project_image_url); ?>">
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($project_image_url); ?>">
-  <!-- Open Graph meta tags -->
+    <?php endif; ?>
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta property="og:type" content="website">
-  <!-- Twitter meta tags -->
+    <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+
-<?php endif; ?>
+    <!-- Bootstrap 5 CSS -->
-<?php if ($projectImageUrl): ?>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <!-- Open Graph image -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    
-  <!-- Twitter image -->
+    <!-- Custom CSS -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-<?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>
 <body>
-  <main>
+
-    <div class="card">
+    <main class="container my-5">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        <div class="row justify-content-center">
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+            <div class="col-lg-8 col-md-10">
-        <span class="sr-only">Loading…</span>
+                
-      </div>
+                <header class="text-center mb-5">
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
+                    <h1 class="display-4 text-primary">LiveAudio Rooms</h1>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+                    <p class="lead text-muted">Share your device audio in real-time. Create a room or join with a code.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+                </header>
-    </div>
+
-  </main>
+                <div id="selection-container">
-  <footer>
+                    <div class="row">
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+                        <!-- Create a Room -->
-  </footer>
+                        <div class="col-md-6 mb-4">
+                            <div id="create-room-card" class="card text-center h-100">
+                                <div class="card-body d-flex flex-column justify-content-center">
+                                    <i class="bi bi-plus-circle-dotted display-1 text-primary mb-3"></i>
+                                    <h5 class="card-title">Create a Room</h5>
+                                    <p class="card-text">Become the host and stream audio to your friends.</p>
+                                    <button id="create-room-btn" class="btn btn-primary btn-lg mt-auto">Create New Room</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Join a Room -->
+                        <div class="col-md-6 mb-4">
+                            <div class="card text-center h-100">
+                                <div class="card-body d-flex flex-column justify-content-center">
+                                    <i class="bi bi-headset display-1 text-secondary mb-3"></i>
+                                    <h5 class="card-title">Join a Room</h5>
+                                    <p class="card-text">Enter the 6-character code to start listening.</p>
+                                    <div class="px-lg-4">
+                                        <input type="text" id="join-code" class="form-control form-control-lg text-center" maxlength="6" placeholder="Enter 6-character code" style="font-family: monospace;">
+                                    </div>
+                                    <button id="join-room-btn" class="btn btn-secondary btn-lg mt-auto" disabled>Join Room</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="host-panel-container" class="d-none">
+                    <div class="card text-center">
+                        <div class="card-header">
+                            Host Control Panel
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">Your Room is Live!</h5>
+                            <p class="card-text">Share this code with your participants:</p>
+                            <p id="host-room-code" class="display-4 fw-bold text-primary bg-light rounded py-3 mb-4"></p>
+                            
+                            <div id="host-status" class="alert alert-info mb-4">
+                                <i class="bi bi-mic-mute-fill"></i>
+                                Not currently streaming. Click "Start Streaming" to begin.
+                            </div>
+
+                            <button id="start-streaming-btn" class="btn btn-success btn-lg">
+                                <i class="bi bi-mic-fill"></i> Start Streaming
+                            </button>
+                            <button id="delete-room-btn" class="btn btn-danger btn-lg">
+                                <i class="bi bi-trash-fill"></i> Delete Room
+                            </button>
+                        </div>
+                        <div class="card-footer text-muted">
+                            Participants will be disconnected when you delete the room or leave the page.
+                        </div>
+                    </div>
+                </div>
+
+                <div id="participant-panel-container" class="d-none">
+                    <div class="card text-center">
+                        <div class="card-header">
+                            You are in a Room
+                        </div>
+                        <div class="card-body">
+                            <div id="participant-status" class="alert alert-info mb-4">
+                                Waiting for audio to start...
+                            </div>
+                            <audio id="participant-audio" controls autoplay class="w-100"></audio>
+                            <button id="leave-room-btn" class="btn btn-danger btn-lg mt-4">
+                                <i class="bi bi-box-arrow-left"></i> Leave Room
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast Container -->
+    <div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    
+    <!-- Custom JS -->
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>