Spaces:

samirerty
/

anycoder-88b8f2bc

Running

App Files Files Community

samirerty commited on Jan 27

Commit

b3dc3ee

verified ·

1 Parent(s): bca8765

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +572 -19

index.html CHANGED Viewed

@@ -1,19 +1,572 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Glassmorphism Chat UI</title>
+  <!-- Importing Inter font -->
+  <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;600&display=swap" rel="stylesheet">
+  <!-- Importing Remix Icon -->
+  <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
+  <style>
+    /* --- CSS Variables & Reset --- */
+    :root {
+      /* Light Mode Palette */
+      --bg-body: #f0f4f8;
+      /* Glass Colors */
+      --glass-bg: rgba(255, 255, 255, 0.65);
+      --glass-border: rgba(255, 255, 255, 0.8);
+      --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+      --glass-highlight: rgba(255, 255, 255, 0.4);
+      /* Text Colors */
+      --text-main: #1e293b; /* Slate 800 */
+      --text-muted: #64748b; /* Slate 500 */
+      --text-on-gradient: #ffffff;
+      /* Accent / Gradients */
+      --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+      --accent-glow: rgba(168, 85, 247, 0.3);
+      /* Bubbles */
+      --bubble-sent-bg: var(--primary-gradient);
+      --bubble-sent-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+      --bubble-received-bg: rgba(255, 255, 255, 0.75);
+      --bubble-received-border: rgba(255, 255, 255, 0.9);
+      /* Spacing & Radius */
+      --radius-app: 32px;
+      --radius-bubble: 20px;
+      --radius-input: 28px;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background-color: var(--bg-body);
+      height: 100vh;
+      width: 100vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      color: var(--text-main);
+      position: relative;
+    }
+    /* --- Ambient Background Orbs (To show off the blur) --- */
+    .orb {
+      position: absolute;
+      border-radius: 50%;
+      filter: blur(80px);
+      z-index: -1;
+      opacity: 0.8;
+      animation: float 10s infinite ease-in-out;
+    }
+    .orb-1 {
+      width: 400px;
+      height: 400px;
+      background: #c7d2fe; /* Soft Indigo */
+      top: -50px;
+      left: -100px;
+      animation-delay: 0s;
+    }
+    .orb-2 {
+      width: 350px;
+      height: 350px;
+      background: #e9d5ff; /* Soft Purple */
+      bottom: -50px;
+      right: -50px;
+      animation-delay: -5s;
+    }
+    .orb-3 {
+      width: 200px;
+      height: 200px;
+      background: #fecaca; /* Soft Red/Pink */
+      top: 40%;
+      left: 60%;
+      animation-delay: -2s;
+    }
+    @keyframes float {
+      0%, 100% { transform: translate(0, 0); }
+      50% { transform: translate(30px, -30px); }
+    }
+    /* --- Main Glass Container --- */
+    .app-container {
+      width: 100%;
+      height: 100%;
+      max-width: 480px;
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid var(--glass-border);
+      box-shadow: var(--glass-shadow);
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: hidden;
+      transition: transform 0.3s ease;
+    }
+    /* Desktop specific styling */
+    @media (min-width: 481px) {
+      .app-container {
+        height: 90vh;
+        border-radius: var(--radius-app);
+      }
+    }
+    /* --- Header --- */
+    .chat-header {
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      padding: 1.5rem;
+      background: rgba(255, 255, 255, 0.4);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid var(--glass-border);
+      z-index: 10;
+    }
+    .header-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+    .header-title h1 {
+      font-size: 1.25rem;
+      font-weight: 700;
+      background: var(--primary-gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      letter-spacing: -0.03em;
+    }
+    .header-actions button {
+      background: rgba(255, 255, 255, 0.6);
+      border: 1px solid var(--glass-border);
+      color: var(--text-main);
+      width: 38px;
+      height: 38px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
+    }
+    .header-actions button:hover {
+      background: #ffffff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+    }
+    .header-meta {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .online-status {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background-color: #10b981;
+      border-radius: 50%;
+      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+    }
+    .anycoder-link {
+      color: #6366f1;
+      text-decoration: none;
+      font-weight: 600;
+      transition: opacity 0.2s;
+      position: relative;
+    }
+    .anycoder-link::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 2px;
+      bottom: -2px;
+      left: 0;
+      background-color: #6366f1;
+      transform: scaleX(0);
+      transform-origin: bottom right;
+      transition: transform 0.25s ease-out;
+    }
+    .anycoder-link:hover::after {
+      transform: scaleX(1);
+      transform-origin: bottom left;
+    }
+    /* --- Chat Body --- */
+    .chat-body {
+      flex: 1;
+      padding: 1.5rem;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+      scroll-behavior: smooth;
+    }
+    /* Light Scrollbar */
+    .chat-body::-webkit-scrollbar {
+      width: 5px;
+    }
+    .chat-body::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .chat-body::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+    }
+    /* Messages */
+    .message {
+      max-width: 80%;
+      padding: 14px 20px;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      position: relative;
+      animation: messagePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
+    }
+    /* Received (Left) - Glass Style */
+    .message.received {
+      align-self: flex-start;
+      background-color: var(--bubble-received-bg);
+      backdrop-filter: blur(8px);
+      border: 1px solid var(--bubble-received-border);
+      color: var(--text-main);
+      border-bottom-left-radius: 4px;
+      border-radius: var(--radius-bubble);
+    }
+    /* Sent (Right) - Gradient Style */
+    .message.sent {
+      align-self: flex-end;
+      background: var(--bubble-sent-bg);
+      color: var(--text-on-gradient);
+      border-bottom-right-radius: 4px;
+      border-radius: var(--radius-bubble);
+      box-shadow: var(--bubble-sent-shadow);
+      border: none;
+    }
+    .message-meta {
+      font-size: 0.65rem;
+      margin-top: 6px;
+      opacity: 0.7;
+      display: block;
+      text-align: right;
+      font-weight: 500;
+    }
+    /* Animations */
+    @keyframes messagePop {
+      0% {
+        opacity: 0;
+        transform: translateY(20px) scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    /* --- Empty State --- */
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-muted);
+      text-align: center;
+      padding-bottom: 80px;
+      animation: fadeIn 0.8s ease-out;
+    }
+    .empty-state i {
+      font-size: 3.5rem;
+      margin-bottom: 1rem;
+      color: #a855f7;
+      opacity: 0.5;
+      background: var(--glass-bg);
+      padding: 20px;
+      border-radius: 50%;
+      box-shadow: var(--glass-shadow);
+      backdrop-filter: blur(5px);
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* --- Input Area --- */
+    .chat-input-area {
+      padding: 1.5rem;
+      background: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(15px);
+      border-top: 1px solid var(--glass-border);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .input-wrapper {
+      flex: 1;
+      position: relative;
+      background-color: rgba(255, 255, 255, 0.6);
+      border-radius: var(--radius-input);
+      border: 1px solid var(--glass-border);
+      box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+    }
+    .input-wrapper:focus-within {
+      background-color: rgba(255, 255, 255, 0.9);
+      border-color: rgba(168, 85, 247, 0.4);
+      box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1);
+      transform: translateY(-1px);
+    }
+    #messageInput {
+      width: 100%;
+      border: none;
+      background: transparent;
+      padding: 16px 20px;
+      font-family: inherit;
+      font-size: 1rem;
+      color: var(--text-main);
+      outline: none;
+    }
+    #messageInput::placeholder {
+      color: var(--text-muted);
+      opacity: 0.8;
+    }
+    #sendBtn {
+      background: var(--primary-gradient);
+      color: white;
+      border: none;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+      flex-shrink: 0;
+    }
+    #sendBtn:hover {
+      transform: scale(1.05) translateY(-2px);
+      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
+    }
+    #sendBtn:active {
+      transform: scale(0.95);
+    }
+    #sendBtn i {
+      font-size: 1.3rem;
+      margin-left: 2px;
+    }
+  </style>
+</head>
+<body>
+  <!-- Animated Background Orbs -->
+  <div class="orb orb-1"></div>
+  <div class="orb orb-2"></div>
+  <div class="orb orb-3"></div>
+  <div class="app-container">
+    <!-- Header -->
+    <header class="chat-header">
+      <div class="header-top">
+        <div class="header-title">
+          <h1>Aura Chat</h1>
+        </div>
+        <div class="header-actions">
+          <button title="Menu">
+            <i class="ri-menu-5-line"></i>
+          </button>
+        </div>
+      </div>
+      <div class="header-meta">
+        <div class="online-status">
+          <span class="status-dot"></span>
+          <span>2 members online</span>
+        </div>
+        <!-- Mandatory Link -->
+        <span>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a></span>
+      </div>
+    </header>
+    <!-- Chat Body -->
+    <main class="chat-body" id="chatBody">
+      <div class="empty-state" id="emptyState">
+        <i class="ri-sparkling-2-line"></i>
+        <p>Welcome to the Light Mode.<br>Start the conversation.</p>
+      </div>
+      <!-- Dynamic Messages -->
+    </main>
+    <!-- Input Area -->
+    <footer class="chat-input-area">
+      <div class="input-wrapper">
+        <input type="text" id="messageInput" placeholder="Type a message..." autocomplete="off">
+      </div>
+      <button id="sendBtn" aria-label="Send Message">
+        <i class="ri-send-plane-fill"></i>
+      </button>
+    </footer>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const chatBody = document.getElementById('chatBody');
+      const messageInput = document.getElementById('messageInput');
+      const sendBtn = document.getElementById('sendBtn');
+      const emptyState = document.getElementById('emptyState');
+      // Initial simulation data
+      const initialMessages = [
+        { text: "Hello! This new glassmorphism design is so clean.", type: 'received', time: '10:00 AM' },
+        { text: "I love the light and airy feel. It's very modern.", type: 'sent', time: '10:01 AM' },
+        { text: "The floating background blobs are a nice touch.", type: 'received', time: '10:02 AM' }
+      ];
+      function getCurrentTime() {
+        const now = new Date();
+        let hours = now.getHours();
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12;
+        hours = hours ? hours : 12;
+        return `${hours}:${minutes} ${ampm}`;
+      }
+      function addMessage(text, type) {
+        // Hide empty state on first message
+        if (emptyState && emptyState.parentNode) {
+          emptyState.style.display = 'none';
+        }
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message', type);
+        const time = getCurrentTime();
+        messageDiv.innerHTML = `
+          ${escapeHtml(text)}
+          <span class="message-meta">${time}</span>
+        `;
+        chatBody.appendChild(messageDiv);
+        scrollToBottom();
+      }
+      function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+      }
+      function scrollToBottom() {
+        // Smooth scroll
+        chatBody.scrollTo({
+          top: chatBody.scrollHeight,
+          behavior: 'smooth'
+        });
+      }
+      function handleSend() {
+        const text = messageInput.value.trim();
+        if (text !== "") {
+          addMessage(text, 'sent');
+          messageInput.value = '';
+          messageInput.focus();
+          // Simulate a reply
+          setTimeout(() => {
+            const replies = [
+              "That's a great point!",
+              "I totally agree with you.",
+              "The UI looks amazing on mobile too.",
+              "Let's catch up later.",
+              "Sounds like a plan."
+            ];
+            const randomReply = replies[Math.floor(Math.random() * replies.length)];
+            addMessage(randomReply, 'received');
+          }, 1200 + Math.random() * 1000);
+        }
+      }
+      // Event Listeners
+      sendBtn.addEventListener('click', handleSend);
+      messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          handleSend();
+        }
+      });
+      // Load initial messages with staggered animation
+      setTimeout(() => {
+        initialMessages.forEach((msg, index) => {
+          setTimeout(() => {
+            addMessage(msg.text, msg.type);
+          }, index * 300);
+        });
+      }, 500);
+    });
+  </script>
+</body>
+</html>