143 lines
7.2 KiB
PHP
143 lines
7.2 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
// Simple session check (mock for now, assume User 1)
|
|
$current_user_id = 1;
|
|
|
|
// Fetch servers
|
|
$servers = db()->query("SELECT * FROM servers LIMIT 10")->fetchAll();
|
|
$active_server_id = $_GET['server_id'] ?? ($servers[0]['id'] ?? 1);
|
|
|
|
// Fetch channels
|
|
$stmt = db()->prepare("SELECT * FROM channels WHERE server_id = ?");
|
|
$stmt->execute([$active_server_id]);
|
|
$channels = $stmt->fetchAll();
|
|
$active_channel_id = $_GET['channel_id'] ?? ($channels[0]['id'] ?? 1);
|
|
|
|
// Fetch messages
|
|
$stmt = db()->prepare("
|
|
SELECT m.*, u.username, u.avatar_url
|
|
FROM messages m
|
|
JOIN users u ON m.user_id = u.id
|
|
WHERE m.channel_id = ?
|
|
ORDER BY m.created_at ASC
|
|
LIMIT 50
|
|
");
|
|
$stmt->execute([$active_channel_id]);
|
|
$messages = $stmt->fetchAll();
|
|
|
|
$current_channel_name = 'general';
|
|
foreach($channels as $c) if($c['id'] == $active_channel_id) $current_channel_name = $c['name'];
|
|
|
|
// SEO & Env tags
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Discord-like messaging app built with PHP';
|
|
$projectImageUrl = $_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($current_channel_name); ?> | <?php echo htmlspecialchars($projectDescription); ?></title>
|
|
|
|
<meta name="description" content="<?php echo htmlspecialchars($projectDescription); ?>">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars($projectDescription); ?>">
|
|
<meta property="twitter:description" content="<?php echo htmlspecialchars($projectDescription); ?>">
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($projectImageUrl); ?>">
|
|
<meta property="twitter:image" content="<?php echo htmlspecialchars($projectImageUrl); ?>">
|
|
<?php endif; ?>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/discord.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="discord-app">
|
|
<!-- Servers Sidebar -->
|
|
<div class="servers-sidebar">
|
|
<a href="index.php" class="server-icon active" title="Home">
|
|
<svg width="28" height="20" viewBox="0 0 28 20" fill="currentColor"><path d="M23.0212 1.67671C21.3107 0.883335 19.4805 0.314845 17.5566 0C17.3137 0.434033 17.0423 1.00252 16.8488 1.46581C14.8193 1.16016 12.8016 1.16016 10.8011 1.46581C10.6076 1.00252 10.3255 0.434033 10.0827 0C8.14811 0.314845 6.31792 0.883335 4.60741 1.67671C1.14775 6.84711 0.210418 11.8962 0.67293 16.8681C2.9723 18.5677 5.19143 19.5997 7.37191 20C7.91578 19.2558 8.3897 18.4616 8.79155 17.6166C7.99616 17.3148 7.2343 16.9416 6.51603 16.505C6.70881 16.3639 6.89745 16.2125 7.07923 16.052C11.4116 18.0494 16.1264 18.0494 20.4137 16.052C20.597 16.2125 20.7856 16.3639 20.9784 16.505C20.2586 16.9416 19.4967 17.3148 18.7013 17.6166C19.1031 18.4616 19.577 19.2558 20.1209 20C22.3014 19.5997 24.5205 18.5677 26.8199 16.8681C27.3693 11.127 25.9189 6.13063 23.0212 1.67671ZM9.51636 13.6749C8.21405 13.6749 7.14188 12.4839 7.14188 11.026C7.14188 9.56816 8.19284 8.3771 9.51636 8.3771C10.8399 8.3771 11.912 9.56816 11.8908 11.026C11.8908 12.4839 10.8399 13.6749 9.51636 13.6749ZM18.0051 13.6749C16.7028 13.6749 15.6306 12.4839 15.6306 11.026C15.6306 9.56816 16.6815 8.3771 18.0051 8.3771C19.3286 8.3771 20.4008 9.56816 20.3796 11.026C20.3796 12.4839 19.3286 13.6749 18.0051 13.6749Z"/></svg>
|
|
</a>
|
|
<hr style="width: 32px; border-color: #35363c; margin: 4px 0;">
|
|
<?php foreach($servers as $s): ?>
|
|
<a href="?server_id=<?php echo $s['id']; ?>"
|
|
class="server-icon <?php echo $s['id'] == $active_server_id ? 'active' : ''; ?>"
|
|
title="<?php echo htmlspecialchars($s['name']); ?>">
|
|
<?php echo mb_substr($s['name'], 0, 1); ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Channels Sidebar -->
|
|
<div class="channels-sidebar">
|
|
<div class="channels-header">
|
|
<?php echo htmlspecialchars($servers[0]['name'] ?? 'Server'); ?>
|
|
</div>
|
|
<div class="channels-list">
|
|
<div style="color: var(--text-muted); font-size: 0.75em; text-transform: uppercase; font-weight: bold; margin-bottom: 8px; padding-left: 8px;">
|
|
Text Channels
|
|
</div>
|
|
<?php foreach($channels as $c): ?>
|
|
<a href="?server_id=<?php echo $active_server_id; ?>&channel_id=<?php echo $c['id']; ?>"
|
|
class="channel-item <?php echo $c['id'] == $active_channel_id ? 'active' : ''; ?>">
|
|
<?php echo htmlspecialchars($c['name']); ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Area -->
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<span style="color: var(--text-muted); margin-right: 8px;">#</span>
|
|
<?php echo htmlspecialchars($current_channel_name); ?>
|
|
</div>
|
|
<div class="messages-list" id="messages-list">
|
|
<?php if(empty($messages)): ?>
|
|
<div style="text-align: center; color: var(--text-muted); margin-top: 40px;">
|
|
<h4>Welcome to #<?php echo htmlspecialchars($current_channel_name); ?>!</h4>
|
|
<p>This is the start of the #<?php echo htmlspecialchars($current_channel_name); ?> channel.</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php foreach($messages as $m): ?>
|
|
<div class="message-item">
|
|
<div class="message-avatar"></div>
|
|
<div class="message-content">
|
|
<div class="message-author">
|
|
<?php echo htmlspecialchars($m['username']); ?>
|
|
<span class="message-time"><?php echo date('H:i', strtotime($m['created_at'])); ?></span>
|
|
</div>
|
|
<div class="message-text">
|
|
<?php echo nl2br(htmlspecialchars($m['content'])); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div class="chat-input-container">
|
|
<form id="chat-form">
|
|
<div class="chat-input-wrapper">
|
|
<input type="text" id="chat-input" class="chat-input" placeholder="Message #<?php echo htmlspecialchars($current_channel_name); ?>" autocomplete="off">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Members Sidebar -->
|
|
<div class="members-sidebar">
|
|
<div style="color: var(--text-muted); font-size: 0.75em; text-transform: uppercase; font-weight: bold; margin-bottom: 8px;">
|
|
Online — 1
|
|
</div>
|
|
<div class="channel-item" style="color: var(--text-primary);">
|
|
<div class="message-avatar" style="width: 32px; height: 32px; background-color: #23a559;"></div>
|
|
System
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|