Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,90 +0,0 @@
|
|||||||
<?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']);
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
|||||||
{"host":"host_694462ae2d640","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089390}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
{"host":"host_6944616e8a5c9","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089070}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
{"host":"host_694462ade7734","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089389}
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
|||||||
{"host":"host_694461f172d06","participants":[],"offer":null,"host_candidates":[],"participant_candidates":[],"createdAt":1766089201}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,346 +0,0 @@
|
|||||||
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());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
265
index.php
265
index.php
@ -1,131 +1,150 @@
|
|||||||
<?php
|
<?php
|
||||||
$project_name = !empty($_SERVER['PROJECT_NAME']) ? $_SERVER['PROJECT_NAME'] : 'LiveAudio Rooms';
|
declare(strict_types=1);
|
||||||
$project_description = !empty($_SERVER['PROJECT_DESCRIPTION']) ? $_SERVER['PROJECT_DESCRIPTION'] : 'Real-time audio sharing for everyone.';
|
@ini_set('display_errors', '1');
|
||||||
$project_image_url = !empty($_SERVER['PROJECT_IMAGE_URL']) ? $_SERVER['PROJECT_IMAGE_URL'] : '';
|
@error_reporting(E_ALL);
|
||||||
|
@date_default_timezone_set('UTC');
|
||||||
|
|
||||||
|
$phpVersion = PHP_VERSION;
|
||||||
|
$now = date('Y-m-d H:i:s');
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title><?php echo htmlspecialchars($project_name); ?></title>
|
<title>New Style</title>
|
||||||
<meta name="description" content="<?php echo htmlspecialchars($project_description); ?>">
|
<?php
|
||||||
|
// Read project preview data from environment
|
||||||
<!-- Open Graph / Twitter Meta Tags -->
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||||
<meta property="og:title" content="<?php echo htmlspecialchars($project_name); ?>">
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
<meta property="og:description" content="<?php echo htmlspecialchars($project_description); ?>">
|
?>
|
||||||
<?php if ($project_image_url): ?>
|
<?php if ($projectDescription): ?>
|
||||||
<meta property="og:image" content="<?php echo htmlspecialchars($project_image_url); ?>">
|
<!-- Meta description -->
|
||||||
<meta name="twitter:image" content="<?php echo htmlspecialchars($project_image_url); ?>">
|
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||||
<?php endif; ?>
|
<!-- Open Graph meta tags -->
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<!-- Twitter meta tags -->
|
||||||
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<!-- Bootstrap 5 CSS -->
|
<?php endif; ?>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
<?php if ($projectImageUrl): ?>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
<!-- Open Graph image -->
|
||||||
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<!-- Custom CSS -->
|
<!-- Twitter image -->
|
||||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
|
<?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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<main>
|
||||||
<main class="container my-5">
|
<div class="card">
|
||||||
<div class="row justify-content-center">
|
<h1>Analyzing your requirements and generating your website…</h1>
|
||||||
<div class="col-lg-8 col-md-10">
|
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||||
|
<span class="sr-only">Loading…</span>
|
||||||
<header class="text-center mb-5">
|
</div>
|
||||||
<h1 class="display-4 text-primary">LiveAudio Rooms</h1>
|
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||||
<p class="lead text-muted">Share your device audio in real-time. Create a room or join with a code.</p>
|
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||||
</header>
|
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||||
|
</div>
|
||||||
<div id="selection-container">
|
</main>
|
||||||
<div class="row">
|
<footer>
|
||||||
<!-- Create a Room -->
|
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||||
<div class="col-md-6 mb-4">
|
</footer>
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user