131 lines
7.0 KiB
PHP
131 lines
7.0 KiB
PHP
<?php
|
|
$project_name = !empty($_SERVER['PROJECT_NAME']) ? $_SERVER['PROJECT_NAME'] : 'LiveAudio Rooms';
|
|
$project_description = !empty($_SERVER['PROJECT_DESCRIPTION']) ? $_SERVER['PROJECT_DESCRIPTION'] : 'Real-time audio sharing for everyone.';
|
|
$project_image_url = !empty($_SERVER['PROJECT_IMAGE_URL']) ? $_SERVER['PROJECT_IMAGE_URL'] : '';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo htmlspecialchars($project_name); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars($project_description); ?>">
|
|
|
|
<!-- Open Graph / Twitter Meta Tags -->
|
|
<meta property="og:title" content="<?php echo htmlspecialchars($project_name); ?>">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars($project_description); ?>">
|
|
<?php if ($project_image_url): ?>
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($project_image_url); ?>">
|
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($project_image_url); ?>">
|
|
<?php endif; ?>
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<main class="container my-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 col-md-10">
|
|
|
|
<header class="text-center mb-5">
|
|
<h1 class="display-4 text-primary">LiveAudio Rooms</h1>
|
|
<p class="lead text-muted">Share your device audio in real-time. Create a room or join with a code.</p>
|
|
</header>
|
|
|
|
<div id="selection-container">
|
|
<div class="row">
|
|
<!-- Create a Room -->
|
|
<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>
|