

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Group Chat | Hamna Sheikh</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body { background: #1a1e29; color: white; margin: 0; font-family: sans-serif; }
        .chat-container { max-width: 500px; margin: auto; height: 100vh; display: flex; flex-direction: column; background: #11141c; }
        .chat-header { background: #1a1e29; padding: 15px; display: flex; align-items: center; border-bottom: 1px solid #333; }
        .profile-pic { width: 45px; height: 45px; border-radius: 50%; background: #27a760; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
        #chatWindow { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; }
        .input-area { background: #1a1e29; padding: 15px; display: flex; align-items: center; gap: 10px; }
        #msgInput { flex: 1; padding: 12px; border-radius: 25px; border: none; background: #2c3240; color: white; }
        .icon-btn { font-size: 1.3rem; cursor: pointer; color: #adff2f; }
        .send-btn { background: #27a760; width: 45px; height: 45px; border-radius: 50%; border: none; color: white; cursor: pointer; }
    </style>
</head>
<body>
<div class="chat-container">
    <div class="chat-header">
        <div class="profile-pic"><i class="fas fa-users"></i></div>
        <div><strong>BGNU Tech Group</strong><br><small style="color: #27a760;">Online</small></div>
    </div>
    <div id="chatWindow"></div>
    <div class="input-area">
        <label for="fileInput" class="icon-btn"><i class="fas fa-plus"></i></label>
        <input type="file" id="fileInput" style="display:none" onchange="uploadMedia()">
        <input type="text" id="msgInput" placeholder="Type message...">
        <i class="fas fa-microphone icon-btn" id="voiceBtn" onclick="toggleVoice()"></i>
        <button class="send-btn" onclick="sendMsg()"><i class="fas fa-paper-plane"></i></button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function loadChat() { $.get('get_messages.php', function(data) { $('#chatWindow').html(data); $('#chatWindow').scrollTop($('#chatWindow')[0].scrollHeight); }); }
    function sendMsg() {
        let msg = $('#msgInput').val();
        if(msg) { $.post('send_message.php', {message: msg}, function() { $('#msgInput').val(''); loadChat(); }); }
    }
    function uploadMedia() {
        let file = document.getElementById('fileInput').files[0];
        let formData = new FormData(); formData.append('file', file);
        $.ajax({ url: 'upload_media.php', type: 'POST', data: formData, processData: false, contentType: false, success: loadChat });
    }
    // Voice logic aur loadChat interval yahan aayega
    setInterval(loadChat, 3000); loadChat();
</script>
</body>
</html>