Spaces:

samirerty
/

anycoder-88b8f2bc

Running

App Files Files Community

samirerty commited on Jan 27

Commit

41294c3

verified ·

1 Parent(s): c5d8270

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +434 -428

index.html CHANGED Viewed

@@ -1,438 +1,443 @@
 <!DOCTYPE html>
 <html lang="en">
-<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;
-        }
-        input[type="text"] {
-            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" },
@@ -446,7 +451,7 @@
                 { 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: [
@@ -530,7 +535,7 @@
                 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 {
@@ -620,6 +625,7 @@
         // Start App
         init();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Minimal Dark 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: Muted Dark Gradients & Dark Glass */
+      --bg-gradient-start: #1f2229;
+      --bg-gradient-end: #2c303a;
+      /* Muted Dark Blob Colors */
+      --blob-1: #2b3244;
+      --blob-2: #1e2536;
+      /* Dark Glass Variables */
+      --glass-bg: rgba(30, 35, 45, 0.4);
+      --glass-border: rgba(255, 255, 255, 0.08);
+      --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
+      --glass-blur: blur(12px);
+      --sidebar-bg: rgba(0, 0, 0, 0.2);
+      /* Typography */
+      --font-main: 'Nunito', sans-serif;
+      --text-primary: #e0e0e0; /* Soft white/gray */
+      --text-secondary: #9aa0a6; /* Muted gray */
+      /* Message Bubbles - Brightness differentiation, no color change */
+      --msg-sent-bg: rgba(255, 255, 255, 0.12); /* Lighter glass */
+      --msg-received-bg: rgba(0, 0, 0, 0.2); /* Darker glass */
+      --msg-text: #f0f0f0;
+      /* 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, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+      height: 100vh;
+      width: 100vw;
+      overflow: hidden;
+      color: var(--text-primary);
+      position: relative;
+    }
+    /*
+           Background: Muted dark gradients
+           Removed animations, static only
         */
+    .ambient-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      /* Deep, dark, static gradient blobs */
+      background: radial-gradient(circle at 10% 20%, rgba(43, 50, 68, 0.4) 0%, transparent 50%),
+        radial-gradient(circle at 90% 80%, rgba(30, 37, 54, 0.4) 0%, transparent 50%);
+      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 var(--glass-border);
+      display: flex;
+      flex-direction: column;
+      padding: var(--spacing-md);
+      background: var(--sidebar-bg);
+      transition: transform 0.3s ease;
+    }
+    .contact-list {
+      list-style: none;
+      margin-top: var(--spacing-md);
+      overflow-y: auto;
+      flex-grow: 1;
+    }
+    /* Dark Scrollbar */
+    .contact-list::-webkit-scrollbar {
+      width: 4px;
+    }
+    .contact-list::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      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;
+    }
+    /* Subtle hover states - no strong contrast */
+    .contact-item:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+    .contact-item.active {
+      background: rgba(255, 255, 255, 0.08);
+    }
+    /* Smaller avatars */
+    .avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin-right: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      opacity: 0.9;
+    }
+    .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: 400; /* Reduced variation */
+    }
+    /* --- Main Chat Area --- */
+    .chat-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+    /* --- Header --- */
+    header {
+      height: 56px; /* Reduced height */
+      min-height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--spacing-lg);
+      border-bottom: 1px solid var(--glass-border);
+      background: rgba(0, 0, 0, 0.15); /* Darker translucent background */
+    }
+    .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 - Subtle */
+    .branding {
+      font-size: 0.75rem;
+      font-weight: 400;
+      opacity: 0.7;
+    }
+    .branding a {
+      text-decoration: none;
+      color: var(--text-secondary);
+      transition: color 0.2s;
+    }
+    .branding a:hover {
+      color: var(--text-primary);
+    }
+    /* --- Messages Area --- */
+    .messages-container {
+      flex: 1;
+      padding: var(--spacing-lg);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .message {
+      max-width: 70%;
+      padding: 10px 16px;
+      font-size: 0.95rem;
+      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);
+      /* No borders */
+    }
+    @keyframes slideUpFade {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .message.received {
+      align-self: flex-start;
+      background: var(--msg-received-bg);
+      color: var(--msg-text);
+      border-radius: 18px 18px 18px 4px;
+    }
+    .message.sent {
+      align-self: flex-end;
+      background: var(--msg-sent-bg);
+      color: var(--msg-text);
+      border-radius: 18px 18px 4px 18px;
+    }
+    .message-time {
+      display: block;
+      font-size: 0.65rem;
+      margin-top: 4px;
+      text-align: right;
+      opacity: 0.5;
+    }
+    /* --- Input Area --- */
+    .input-area {
+      padding: var(--spacing-md) var(--spacing-lg);
+      background: rgba(0, 0, 0, 0.2);
+      border-top: 1px solid var(--glass-border);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .input-wrapper {
+      flex: 1;
+      position: relative;
+    }
+    input[type="text"] {
+      width: 100%;
+      padding: 14px 20px;
+      border-radius: 30px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.3);
+      font-family: var(--font-main);
+      font-size: 0.95rem;
+      color: var(--text-primary);
+      outline: none;
+      transition: all 0.2s ease;
+    }
+    input[type="text"]:focus {
+      background: rgba(0, 0, 0, 0.4);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
+    }
+    input[type="text"]::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+    }
+    .send-btn {
+      width: 46px;
+      height: 46px;
+      border-radius: 50%;
+      border: none;
+      background: #4a5568; /* Muted dark blue-grey */
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background 0.2s;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      /* No hover scaling */
+    }
+    .send-btn:hover {
+      background: #5a6578;
+    }
+    .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(20, 24, 30, 0.95);
+        backdrop-filter: blur(20px);
+        transform: translateX(-100%);
+        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
+      }
+      .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 dark 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" },
                 { 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 darker and quieter.", time: "10:05 AM" },
                 { type: 'received', text: "See you tomorrow!", time: "10:06 AM" }
             ],
             2: [
                 emptyState.style.textAlign = 'center';
                 emptyState.style.alignSelf = 'center';
                 emptyState.style.background = 'transparent';
+                emptyState.style.color = 'rgba(255, 255, 255, 0.3)';
                 emptyState.textContent = "Start a conversation with " + contact.name;
                 messagesContainerEl.appendChild(emptyState);
             } else {
         // Start App
         init();
+  </script>
 </body>
 </html>