Spaces:

samirerty
/

anycoder-88b8f2bc

Running

App Files Files Community

samirerty commited on Jan 27

Commit

c5d8270

verified ·

1 Parent(s): c018f7f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +470 -321

index.html CHANGED Viewed

@@ -3,231 +3,288 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Minimal Glassmorphism Chat</title>
-    <!-- Importing Inter font for clean typography -->
     <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@300;400;500&display=swap" rel="stylesheet">
-    <!-- Importing Phosphor Icons for minimal iconography -->
-    <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <style>
         :root {
-            /* Color Palette - Soft, Neutral, Calm */
             --bg-gradient-start: #fdfbfb;
             --bg-gradient-end: #ebedee;
-            --glass-bg: rgba(255, 255, 255, 0.65);
-            --glass-border: rgba(255, 255, 255, 0.5);
-            --glass-blur: 16px;
-            --text-primary: #334155;
-            --text-secondary: #64748b;
-            --bubble-sent: #3b82f6; /* Soft blue */
-            --bubble-sent-text: #ffffff;
-            --bubble-received: #ffffff;
-            --bubble-received-text: #334155;
-            --input-bg: rgba(255, 255, 255, 0.8);
-            --input-focus-border: #94a3b8;
-            --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
-            --spacing-unit: 1rem;
-            --radius-bubble: 18px;
-            --radius-container: 0px; /* Full screen on mobile */
         }
         * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
-            -webkit-tap-highlight-color: transparent;
         }
         body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
             height: 100vh;
-            display: flex;
-            justify-content: center;
             color: var(--text-primary);
-            overflow: hidden; /* Prevent body scroll, handle inside app */
         }
-        /* App Container - Mobile First, Centered on Desktop */
-        .app-container {
             width: 100%;
             height: 100%;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            background: transparent;
-        }
-        @media (min-width: 768px) {
-            .app-container {
-                max-width: 600px;
-                height: 90vh;
-                margin-top: 5vh;
-                border-radius: 24px;
-                background: rgba(255, 255, 255, 0.4);
-                box-shadow: var(--shadow-soft);
-                border: 1px solid var(--glass-border);
-                overflow: hidden;
-                backdrop-filter: blur(var(--glass-blur));
-            }
         }
-        /* --- Header --- */
-        header {
-            flex-shrink: 0;
-            height: 60px;
             display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 20px;
             background: var(--glass-bg);
-            backdrop-filter: blur(var(--glass-blur));
-            -webkit-backdrop-filter: blur(var(--glass-blur));
-            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-            z-index: 10;
         }
-        .chat-title {
-            font-size: 1.1rem;
-            font-weight: 500;
-            letter-spacing: -0.01em;
-            color: var(--text-primary);
             display: flex;
-            align-items: center;
-            gap: 10px;
         }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            background-color: #10b981;
-            border-radius: 50%;
         }
-        .header-actions {
             display: flex;
             align-items: center;
         }
-        /* Mandatory Link Styling */
-        .built-with-link {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-weight: 400;
-            transition: color 0.2s ease;
-            opacity: 0.8;
         }
-        .built-with-link:hover {
-            color: var(--bubble-sent);
-            opacity: 1;
         }
-        /* --- Chat Body --- */
-        #chat-body {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 20px;
             display: flex;
             flex-direction: column;
-            gap: 16px;
-            scroll-behavior: smooth;
         }
-        /* Scrollbar Styling */
-        #chat-body::-webkit-scrollbar {
-            width: 6px;
         }
-        #chat-body::-webkit-scrollbar-track {
-            background: transparent;
         }
-        #chat-body::-webkit-scrollbar-thumb {
-            background-color: rgba(0, 0, 0, 0.1);
-            border-radius: 10px;
         }
-        /* Message Bubbles */
-        .message-row {
             display: flex;
-            width: 100%;
-            opacity: 0;
-            animation: fadeIn 0.4s ease forwards;
         }
-        @keyframes fadeIn {
-            to { opacity: 1; transform: translateY(0); }
-            from { opacity: 0; transform: translateY(10px); }
         }
-        .message-row.sent {
-            justify-content: flex-end;
         }
-        .message-row.received {
-            justify-content: flex-start;
         }
-        .message-bubble {
-            max-width: 75%;
-            padding: 12px 18px;
-            font-size: 0.95rem;
             line-height: 1.5;
             position: relative;
-            word-wrap: break-word;
         }
-        .received .message-bubble {
-            background-color: var(--bubble-received);
-            color: var(--bubble-received-text);
-            border-radius: var(--radius-bubble);
-            border-top-left-radius: 4px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
         }
-        .sent .message-bubble {
-            background-color: var(--bubble-sent);
-            color: var(--bubble-sent-text);
-            border-radius: var(--radius-bubble);
-            border-bottom-right-radius: 4px;
-            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
         }
-        .message-meta {
             display: block;
-            font-size: 0.7rem;
             margin-top: 4px;
-            opacity: 0.7;
             text-align: right;
-        }
-        .received .message-meta {
-            color: var(--text-secondary);
-            text-align: left;
         }
         /* --- Input Area --- */
         .input-area {
-            flex-shrink: 0;
-            padding: 16px 20px;
-            background: var(--glass-bg);
-            backdrop-filter: blur(var(--glass-blur));
-            -webkit-backdrop-filter: blur(var(--glass-blur));
-            border-top: 1px solid rgba(0, 0, 0, 0.03);
             display: flex;
             align-items: center;
             gap: 12px;
         }
         .input-wrapper {
-            flex-grow: 1;
             position: relative;
         }
@@ -235,242 +292,334 @@
             width: 100%;
             padding: 14px 20px;
             border-radius: 30px;
-            border: 1px solid transparent;
-            background: var(--input-bg);
-            color: var(--text-primary);
-            font-family: inherit;
             font-size: 0.95rem;
             outline: none;
             transition: all 0.2s ease;
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
         }
-        input[type="text"]::placeholder {
-            color: #94a3b8;
         }
-        input[type="text"]:focus {
-            background: #ffffff;
-            border-color: var(--input-focus-border);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
         }
         .send-btn {
-            background-color: var(--bubble-sent);
-            color: white;
-            border: none;
             width: 46px;
             height: 46px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            transition: transform 0.1s ease, background-color 0.2s ease;
-            flex-shrink: 0;
         }
         .send-btn:hover {
-            background-color: #2563eb;
         }
         .send-btn:active {
             transform: scale(0.95);
         }
-        .send-btn i {
-            font-size: 1.2rem;
-            margin-left: 2px; /* Visual centering adjustment */
-        }
-        /* Typing Indicator */
-        .typing-indicator {
-            display: none; /* Hidden by default */
-            padding: 12px 16px;
-            background: var(--bubble-received);
-            border-radius: var(--radius-bubble);
-            border-top-left-radius: 4px;
-            width: fit-content;
-            margin-bottom: 16px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
-        }
-        .typing-dots {
-            display: flex;
-            gap: 4px;
-        }
-        .typing-dot {
-            width: 6px;
-            height: 6px;
-            background-color: #cbd5e1;
-            border-radius: 50%;
-            animation: bounce 1.4s infinite ease-in-out both;
-        }
-        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
-        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
-        @keyframes bounce {
-            0%, 80%, 100% { transform: scale(0); }
-            40% { transform: scale(1); }
         }
     </style>
 </head>
 <body>
     <div class="app-container">
-        <!-- Header -->
-        <header>
-            <div class="chat-title">
-                <span class="status-dot"></span>
-                Sarah Design
-            </div>
-            <div class="header-actions">
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link">
-                    Built with anycoder
-                </a>
-            </div>
-        </header>
-        <!-- Chat Body -->
-        <main id="chat-body">
-            <!-- Initial Messages -->
-            <div class="message-row received">
-                <div class="message-bubble">
-                    Hey! Did you get a chance to review the new glassmorphism concepts?
-                    <span class="message-meta">10:23 AM</span>
                 </div>
-            </div>
-            <div class="message-row sent">
-                <div class="message-bubble">
-                    Yes, I just looked them over. I really like the minimal approach. It feels much cleaner now.
-                    <span class="message-meta">10:25 AM</span>
                 </div>
-            </div>
-            <div class="message-row received">
-                <div class="message-bubble">
-                    Great! I'll refine the blur effects a bit more and send the final files by tonight.
-                    <span class="message-meta">10:26 AM</span>
                 </div>
             </div>
-            <!-- Typing Indicator (Hidden by default) -->
-            <div class="typing-indicator" id="typing-indicator">
-                <div class="typing-dots">
-                    <div class="typing-dot"></div>
-                    <div class="typing-dot"></div>
-                    <div class="typing-dot"></div>
                 </div>
             </div>
         </main>
-        <!-- Input Area -->
-        <footer class="input-area">
-            <div class="input-wrapper">
-                <form id="chat-form">
-                    <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
-                </form>
-            </div>
-            <button type="button" id="send-btn" class="send-btn" aria-label="Send Message">
-                <i class="ph ph-paper-plane-right"></i>
-            </button>
-        </footer>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const chatBody = document.getElementById('chat-body');
-            const messageInput = document.getElementById('message-input');
-            const sendBtn = document.getElementById('send-btn');
-            const chatForm = document.getElementById('chat-form');
-            const typingIndicator = document.getElementById('typing-indicator');
-            // Helper to get current time
-            function getCurrentTime() {
-                const now = new Date();
-                return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-            }
-            // Helper to scroll to bottom
-            function scrollToBottom() {
-                chatBody.scrollTop = chatBody.scrollHeight;
-            }
-            // Add message to DOM
-            function addMessage(text, type) {
-                const rowDiv = document.createElement('div');
-                rowDiv.classList.add('message-row', type);
-                const bubbleDiv = document.createElement('div');
-                bubbleDiv.classList.add('message-bubble');
-                // Prevent HTML injection but allow line breaks
-                bubbleDiv.textContent = text;
-                const metaSpan = document.createElement('span');
-                metaSpan.classList.add('message-meta');
-                metaSpan.textContent = getCurrentTime();
-                bubbleDiv.appendChild(metaSpan);
-                rowDiv.appendChild(bubbleDiv);
-                // Insert before typing indicator
-                chatBody.insertBefore(rowDiv, typingIndicator);
-                scrollToBottom();
             }
-            // Handle sending logic
-            function handleSend() {
-                const text = messageInput.value.trim();
-                if (!text) return;
-                // 1. Add user message
-                addMessage(text, 'sent');
-                messageInput.value = '';
-                messageInput.focus();
-                // 2. Simulate bot typing
-                showTyping();
-                // 3. Simulate bot response after delay
-                setTimeout(() => {
-                    hideTyping();
-                    const responses = [
-                        "That sounds perfect!",
-                        "I agree, less is definitely more here.",
-                        "Can you send me the updated specs?",
-                        "Looks good to me. Let's proceed.",
-                        "Nice, keep me posted."
-                    ];
-                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
-                    addMessage(randomResponse, 'received');
-                }, 1500 + Math.random() * 1000); // Random delay between 1.5s and 2.5s
             }
-            function showTyping() {
-                typingIndicator.style.display = 'block';
-                scrollToBottom();
-            }
-            function hideTyping() {
-                typingIndicator.style.display = 'none';
-            }
-            // Event Listeners
-            sendBtn.addEventListener('click', handleSend);
-            chatForm.addEventListener('submit', (e) => {
-                e.preventDefault();
-                handleSend();
-            });
-            // Initial scroll to bottom
-            scrollToBottom();
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minimal Glass Chat</title>
+    <!-- Import Google Fonts: Nunito for that airy, soft feel -->
     <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=Nunito:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <!-- Import FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            /* Palette: Soft Pastels & Glass */
             --bg-gradient-start: #fdfbfb;
             --bg-gradient-end: #ebedee;
+            /* Soft Blob Colors */
+            --blob-1: #e0c3fc;
+            --blob-2: #8ec5fc;
+            /* Glass Variables - Restrained */
+            --glass-bg: rgba(255, 255, 255, 0.45);
+            --glass-border: rgba(255, 255, 255, 0.4);
+            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
+            --glass-blur: blur(12px);
+            /* Typography */
+            --font-main: 'Nunito', sans-serif;
+            --text-primary: #4a4a4a; /* Darker gray for contrast but softer than black */
+            --text-secondary: #7a7a7a;
+            /* Message Bubbles */
+            --msg-sent-bg: rgba(179, 209, 255, 0.5); /* Very soft blue */
+            --msg-received-bg: rgba(255, 255, 255, 0.5);
+            --msg-text: #444;
+            /* Spacing */
+            --spacing-sm: 8px;
+            --spacing-md: 16px;
+            --spacing-lg: 24px;
         }
         * {
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
         }
         body {
+            font-family: var(--font-main);
+            background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
             height: 100vh;
+            width: 100vw;
+            overflow: hidden;
             color: var(--text-primary);
+            position: relative;
         }
+        /*
+           Background: Single subtle gradient/blob
+           Removed extra animated blobs
+        */
+        .ambient-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            z-index: -1;
+            /* One soft, static gradient */
+            background: radial-gradient(circle at 10% 20%, rgba(224, 195, 252, 0.3) 0%, transparent 40%),
+                        radial-gradient(circle at 90% 80%, rgba(142, 197, 252, 0.3) 0%, transparent 40%);
+            pointer-events: none;
         }
+        /* Layout Container */
+        .app-container {
             display: flex;
+            width: 95%;
+            height: 92%;
+            max-width: 1400px;
+            margin: 4vh auto;
             background: var(--glass-bg);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            box-shadow: var(--glass-shadow);
+            overflow: hidden;
+            position: relative;
         }
+        /* --- Sidebar --- */
+        .sidebar {
+            width: 280px;
+            min-width: 280px;
+            border-right: 1px solid rgba(255, 255, 255, 0.3);
             display: flex;
+            flex-direction: column;
+            padding: var(--spacing-md);
+            background: rgba(255,255,255,0.1);
+            transition: transform 0.3s ease;
         }
+        /* Removed Search Bar as requested */
+        .contact-list {
+            list-style: none;
+            margin-top: var(--spacing-md);
+            overflow-y: auto;
+            flex-grow: 1;
         }
+        /* Custom Scrollbar for minimal look */
+        .contact-list::-webkit-scrollbar {
+            width: 4px;
+        }
+        .contact-list::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.05);
+            border-radius: 4px;
+        }
+        .contact-item {
             display: flex;
             align-items: center;
+            padding: 10px;
+            margin-bottom: 4px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            position: relative;
         }
+        /* Reduced hover effects */
+        .contact-item:hover {
+            background: rgba(255, 255, 255, 0.3);
         }
+        .contact-item.active {
+            background: rgba(255, 255, 255, 0.5);
         }
+        /* Smaller avatars */
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-right: 12px;
+            border: 1px solid rgba(255,255,255,0.5);
+        }
+        .contact-info {
             display: flex;
             flex-direction: column;
+            overflow: hidden;
         }
+        .contact-name {
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: var(--text-primary);
         }
+        .last-msg {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-weight: 300; /* Reduced weight variation */
         }
+        /* --- Main Chat Area --- */
+        .chat-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
         }
+        /* --- Header --- */
+        header {
+            height: 60px; /* Reduced height */
+            min-height: 60px;
             display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 var(--spacing-lg);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 0.2);
         }
+        .chat-title h2 {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--text-primary);
         }
+        .chat-title span {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 400;
+            margin-left: 8px;
         }
+        /* Branding */
+        .branding {
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        .branding a {
+            text-decoration: none;
+            color: var(--text-secondary);
+            transition: color 0.2s;
+        }
+        .branding a:hover {
+            color: #6a82fb;
         }
+        /* --- Messages Area --- */
+        .messages-container {
+            flex: 1;
+            padding: var(--spacing-lg);
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 12px; /* Tighter spacing */
+        }
+        .message {
+            max-width: 70%;
+            padding: 10px 16px; /* Tighter padding */
+            font-size: 0.95rem; /* Slightly smaller text */
             line-height: 1.5;
             position: relative;
+            animation: slideUpFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+            opacity: 0;
+            transform: translateY(10px);
         }
+        @keyframes slideUpFade {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .message.received {
+            align-self: flex-start;
+            background: var(--msg-received-bg);
+            color: var(--msg-text);
+            /* No border as requested */
+            border-radius: 18px 18px 18px 4px; /* Asymmetry */
         }
+        .message.sent {
+            align-self: flex-end;
+            background: var(--msg-sent-bg);
+            color: var(--msg-text);
+            /* No border as requested */
+            border-radius: 18px 18px 4px 18px; /* Asymmetry */
         }
+        .message-time {
             display: block;
+            font-size: 0.65rem;
             margin-top: 4px;
             text-align: right;
+            opacity: 0.6;
         }
         /* --- Input Area --- */
         .input-area {
+            padding: var(--spacing-md) var(--spacing-lg);
+            background: rgba(255, 255, 255, 0.25);
+            border-top: 1px solid rgba(255, 255, 255, 0.3);
             display: flex;
             align-items: center;
             gap: 12px;
         }
         .input-wrapper {
+            flex: 1;
             position: relative;
         }
             width: 100%;
             padding: 14px 20px;
             border-radius: 30px;
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            background: rgba(255, 255, 255, 0.6);
+            font-family: var(--font-main);
             font-size: 0.95rem;
+            color: var(--text-primary);
             outline: none;
             transition: all 0.2s ease;
+            /* Remove attachment button means we have space */
         }
+        input[type="text"]:focus {
+            background: rgba(255, 255, 255, 0.8);
+            border-color: rgba(255, 255, 255, 0.8);
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
         }
+        input[type="text"]::placeholder {
+            color: #9ca3af;
         }
         .send-btn {
             width: 46px;
             height: 46px;
             border-radius: 50%;
+            border: none;
+            background: #6a82fb; /* Slightly more saturated accent for action */
+            color: white;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
+            transition: transform 0.1s ease, background 0.2s;
+            box-shadow: 0 4px 12px rgba(106, 130, 251, 0.3);
         }
         .send-btn:hover {
+            background: #5a72eb;
+            transform: scale(1.02); /* Subtle scale, not floating */
         }
         .send-btn:active {
             transform: scale(0.95);
         }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .app-container {
+                width: 100%;
+                height: 100%;
+                border-radius: 0;
+                border: none;
+                margin: 0;
+            }
+            .sidebar {
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                z-index: 10;
+                background: rgba(255,255,255,0.95);
+                transform: translateX(-100%);
+                box-shadow: 2px 0 10px rgba(0,0,0,0.05);
+            }
+            .sidebar.open {
+                transform: translateX(0);
+            }
+            header {
+                padding: 0 var(--spacing-md);
+            }
+            .mobile-menu-toggle {
+                display: block;
+                margin-right: 12px;
+                color: var(--text-primary);
+                cursor: pointer;
+                font-size: 1.2rem;
+            }
+        }
+        @media (min-width: 769px) {
+            .mobile-menu-toggle {
+                display: none;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="ambient-bg"></div>
     <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+            <!-- Contacts -->
+            <ul class="contact-list" id="contactList">
+                <!-- Contacts generated by JS -->
+            </ul>
+        </aside>
+        <!-- Main Chat -->
+        <main class="chat-area">
+            <!-- Header -->
+            <header>
+                <div style="display: flex; align-items: center;">
+                    <i class="fas fa-bars mobile-menu-toggle" id="menuToggle"></i>
+                    <div class="chat-title">
+                        <h2 id="activeChatName">Select a chat</h2>
+                        <span id="activeChatStatus"></span>
+                    </div>
                 </div>
+                <div class="branding">
+                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
                 </div>
+            </header>
+            <!-- Messages -->
+            <div class="messages-container" id="messagesContainer">
+                <!-- Messages generated by JS -->
+                <div class="message received">
+                    Hello! Select a friend to start chatting with the minimal glass interface.
                 </div>
             </div>
+            <!-- Input -->
+            <div class="input-area">
+                <div class="input-wrapper">
+                    <input type="text" id="messageInput" placeholder="Type a message..." autocomplete="off">
                 </div>
+                <button class="send-btn" id="sendBtn">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
             </div>
         </main>
     </div>
     <script>
+        // Data Mockup
+        const contacts = [
+            { id: 1, name: "Alice Moore", avatar: "https://picsum.photos/seed/alice/100/100", lastMsg: "See you tomorrow!", status: "Online" },
+            { id: 2, name: "Bob Smith", avatar: "https://picsum.photos/seed/bob/100/100", lastMsg: "Is the project ready?", status: "Away" },
+            { id: 3, name: "Clara Oswald", avatar: "https://picsum.photos/seed/clara/100/100", lastMsg: "That looks amazing.", status: "Online" },
+            { id: 4, name: "David Tennant", avatar: "https://picsum.photos/seed/david/100/100", lastMsg: "Fantastic!", status: "Offline" },
+            { id: 5, name: "Emma Watson", avatar: "https://picsum.photos/seed/emma/100/100", lastMsg: "Book club is on Friday.", status: "Online" }
+        ];
+        const chatHistory = {
+            1: [
+                { type: 'received', text: "Hey! How are you doing?", time: "10:00 AM" },
+                { type: 'sent', text: "I'm doing great, thanks! Just redesigning this UI.", time: "10:02 AM" },
+                { type: 'received', text: "Oh nice, is it the glassmorphism one?", time: "10:03 AM" },
+                { type: 'sent', text: "Yeah, making it much more restrained and minimal.", time: "10:05 AM" },
+                { type: 'received', text: "See you tomorrow!", time: "10:06 AM" }
+            ],
+            2: [
+                { type: 'received', text: "Is the project ready?", time: "09:30 AM" }
+            ],
+            3: [
+                { type: 'sent', text: "I sent you the new mockups.", time: "Yesterday" },
+                { type: 'received', text: "That looks amazing.", time: "Yesterday" }
+            ]
+        };
+        let activeContactId = 1;
+        // DOM Elements
+        const contactListEl = document.getElementById('contactList');
+        const messagesContainerEl = document.getElementById('messagesContainer');
+        const activeChatNameEl = document.getElementById('activeChatName');
+        const activeChatStatusEl = document.getElementById('activeChatStatus');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const sidebar = document.getElementById('sidebar');
+        const menuToggle = document.getElementById('menuToggle');
+        // Initialize
+        function init() {
+            renderContacts();
+            loadChat(activeContactId);
+            // Mobile Menu Toggle
+            menuToggle.addEventListener('click', () => {
+                sidebar.classList.toggle('open');
+            });
+            // Close sidebar when clicking outside on mobile
+            document.addEventListener('click', (e) => {
+                if (window.innerWidth <= 768) {
+                    if (!sidebar.contains(e.target) && !menuToggle.contains(e.target)) {
+                        sidebar.classList.remove('open');
+                    }
+                }
+            });
+        }
+        // Render Sidebar
+        function renderContacts() {
+            contactListEl.innerHTML = '';
+            contacts.forEach(contact => {
+                const li = document.createElement('li');
+                li.className = `contact-item ${contact.id === activeContactId ? 'active' : ''}`;
+                li.onclick = () => {
+                    activeContactId = contact.id;
+                    renderContacts(); // Re-render to update active state
+                    loadChat(contact.id);
+                    if (window.innerWidth <= 768) sidebar.classList.remove('open');
+                };
+                li.innerHTML = `
+                    <img src="${contact.avatar}" alt="${contact.name}" class="avatar">
+                    <div class="contact-info">
+                        <span class="contact-name">${contact.name}</span>
+                        <span class="last-msg">${contact.lastMsg}</span>
+                    </div>
+                `;
+                contactListEl.appendChild(li);
+            });
+        }
+        // Load Chat Messages
+        function loadChat(id) {
+            const contact = contacts.find(c => c.id === id);
+            activeChatNameEl.textContent = contact.name;
+            activeChatStatusEl.textContent = contact.status;
+            messagesContainerEl.innerHTML = '';
+            const messages = chatHistory[id] || [];
+            if (messages.length === 0) {
+                const emptyState = document.createElement('div');
+                emptyState.className = 'message received';
+                emptyState.style.textAlign = 'center';
+                emptyState.style.alignSelf = 'center';
+                emptyState.style.background = 'transparent';
+                emptyState.style.color = '#999';
+                emptyState.textContent = "Start a conversation with " + contact.name;
+                messagesContainerEl.appendChild(emptyState);
+            } else {
+                messages.forEach(msg => {
+                    appendMessage(msg.text, msg.type, msg.time, false);
+                });
             }
+            scrollToBottom();
+        }
+        // Append Message to DOM
+        function appendMessage(text, type, time = null, animate = true) {
+            const div = document.createElement('div');
+            div.className = `message ${type}`;
+            // Format time if not provided
+            const now = new Date();
+            const timeString = time || now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            div.innerHTML = `
+                ${text}
+                <span class="message-time">${timeString}</span>
+            `;
+            // Disable animation if loading history
+            if (!animate) {
+                div.style.animation = 'none';
+                div.style.opacity = '1';
+                div.style.transform = 'translateY(0)';
             }
+            messagesContainerEl.appendChild(div);
+            scrollToBottom();
+        }
+        // Scroll Helper
+        function scrollToBottom() {
+            messagesContainerEl.scrollTop = messagesContainerEl.scrollHeight;
+        }
+        // Send Message Logic
+        function handleSend() {
+            const text = messageInput.value.trim();
+            if (!text) return;
+            // Add user message
+            appendMessage(text, 'sent');
+            // Update history (mock)
+            if (!chatHistory[activeContactId]) chatHistory[activeContactId] = [];
+            chatHistory[activeContactId].push({ type: 'sent', text: text, time: new Date().toLocaleTimeString() });
+            // Update sidebar preview
+            const contact = contacts.find(c => c.id === activeContactId);
+            contact.lastMsg = "You: " + text;
+            renderContacts();
+            messageInput.value = '';
+            messageInput.focus();
+            // Mock Reply
+            setTimeout(() => {
+                const replies = [
+                    "That sounds interesting!",
+                    "I'll have to check that out.",
+                    "Cool.",
+                    "Can you tell me more?",
+                    "Okay, noted."
+                ];
+                const randomReply = replies[Math.floor(Math.random() * replies.length)];
+                appendMessage(randomReply, 'received');
+                chatHistory[activeContactId].push({ type: 'received', text: randomReply, time: new Date().toLocaleTimeString() });
+                contact.lastMsg = randomReply;
+                renderContacts();
+            }, 1500 + Math.random() * 1000);
+        }
+        // Event Listeners
+        sendBtn.addEventListener('click', handleSend);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') handleSend();
         });
+        // Start App
+        init();
     </script>
 </body>
 </html>