Spaces:

basheer1414
/

aiui

Running

App Files Files Community

basheer1414 commited on Jul 22

Commit

e71285d

verified ·

1 Parent(s): f658523

Are there small settings button right down side of the main window it's so inside the settings I need for settings for the glass morphism for the particular window so make sure that everything is so small tiny and I need you to add there - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1070 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Aiui
-emoji: 😻
-colorFrom: indigo
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: aiui
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1070 @@
-<!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>Interactive Card Grid</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .card {
+            width: 190px;
+            height: 250px;
+            background: linear-gradient(-45deg, rgb(9, 16, 109), rgba(0,255,239,1));
+            border-radius: 20px;
+            box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
+            transition: 0.5s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .card::after {
+            content: "HOVER ME";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-weight: bold;
+            text-shadow: 1px 1px 4px rgb(0,0,0);
+            transition: 0.3s;
+            font-size: 18px;
+            letter-spacing: 2px;
+        }
+        .card:hover {
+            scale: 1.1;
+            border-radius: 20px 80px;
+            box-shadow: 11px 11px 25px rgba(0, 0, 0, 0.5);
+            transform: rotateY(5deg) rotateX(-5deg);
+        }
+        .card:hover::after {
+            content: "THANKS";
+            color: aqua;
+        }
+        .card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
+            transform: rotate(45deg);
+            transition: 0.5s;
+            opacity: 0;
+        }
+        .card:hover::before {
+            animation: shine 0.5s ease-in-out;
+            opacity: 1;
+        }
+        @keyframes shine {
+            0% {
+                transform: translateX(-100%) translateY(-100%) rotate(45deg);
+            }
+            100% {
+                transform: translateX(100%) translateY(100%) rotate(45deg);
+            }
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0px);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        .glow {
+            box-shadow: 0 0 20px rgba(0,255,239,0.5);
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from {
+                box-shadow: 0 0 20px rgba(0,255,239,0.5);
+            }
+            to {
+                box-shadow: 0 0 30px rgba(0,255,239,0.8), 0 0 40px rgba(0,255,239,0.6);
+            }
+        }
+        @keyframes voice {
+            0%, 100% {
+                transform: scaleY(1);
+            }
+            50% {
+                transform: scaleY(1.5);
+            }
+        }
+        .particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: rgba(0,255,239,0.8);
+            border-radius: 50%;
+            pointer-events: none;
+            animation: particle-float 3s ease-out forwards;
+        }
+        @keyframes particle-float {
+            0% {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100px) scale(0);
+                opacity: 0;
+            }
+        }
+        .modal {
+            backdrop-filter: blur(5px);
+            background: rgba(0, 0, 0, 0.8);
+        }
+        .modal-content {
+            background: linear-gradient(135deg, rgba(9, 16, 109, 0.9), rgba(0, 0, 0, 0.9));
+            border: 1px solid rgba(0,255,239,0.3);
+            box-shadow: 0 0 50px rgba(0,255,239,0.2);
+        }
+        .chat-container {
+            width: 240px;
+            height: 360px;
+            background: rgba(235, 142, 253, 0.15);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border-radius: 22px;
+            border: 1px solid rgba(255, 255, 255, 0.34);
+            box-shadow:
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5),
+                inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+                inset 0 0 22px 11px rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .chat-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(
+                90deg,
+                transparent,
+                rgba(255, 255, 255, 0.8),
+                transparent
+            );
+        }
+        .chat-container::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100%;
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 0.8),
+                transparent,
+                rgba(255, 255, 255, 0.3)
+            );
+        }
+        .chat-container:hover {
+            scale: 1.02;
+            box-shadow: 11px 11px 25px rgba(0, 0, 0, 0.5);
+        }
+        .chat-messages {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(0,255,239,0.5) transparent;
+        }
+        .chat-messages::-webkit-scrollbar {
+            width: 6px;
+        }
+        .chat-messages::-webkit-scrollbar-track {
+            background: rgba(0,0,0,0.1);
+            border-radius: 10px;
+        }
+        .chat-messages::-webkit-scrollbar-thumb {
+            background: rgba(0,255,239,0.5);
+            border-radius: 10px;
+        }
+        .message {
+            margin-bottom: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .message.user {
+            background: rgba(0,255,239,0.2);
+            margin-left: auto;
+            border-bottom-right-radius: 5px;
+        }
+        .message.assistant {
+            background: rgba(255,255,255,0.1);
+            margin-right: auto;
+            border-bottom-left-radius: 5px;
+        }
+        /* =====  CYBER-TOGGLE  ===== */
+        .cyber-toggle {
+            --hue: 180;
+            --core-size: 20px; /* Half of 40px */
+            display: inline-block;
+            padding: 1rem; /* Half of 2rem */
+            background: transparent;
+            border-radius: 17.5px; /* Half of 35px */
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s ease-in-out;
+        }
+        .cyber-toggle:hover {
+            transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
+        }
+        .cyber-input {
+            position: absolute;
+            opacity: 0;
+        }
+        .cyber-label {
+            display: block;
+            cursor: pointer;
+            width: var(--core-size);
+            height: calc(var(--core-size) / 2);
+            position: relative;
+            transition: filter 0.3s ease;
+        }
+        .cyber-core {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background: #1a1a2f;
+            border-radius: 20px; /* Half of 40px */
+            transition: all 0.4s ease;
+            overflow: hidden;
+            box-shadow:
+                /* Adjusted shadow values for smaller size */
+                inset 0 2px 6px rgba(255, 255, 255, 0.1),
+                inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+        }
+        .cyber-toggle-circle {
+            position: absolute;
+            /* width/height calculation already based on --core-size */
+            background: #ffffff;
+            border-radius: 50%;
+            top: 2px; /* Half of 4px */
+            left: 2px; /* Half of 4px */
+            transition: transform 0.4s ease;
+            box-shadow:
+                /* Adjusted shadow values for smaller size */
+                0 1px 4px rgba(0, 0, 0, 0.3),
+                inset 0 0.5px 1px rgba(255, 255, 255, 0.8);
+        }
+        .cyber-power-line {
+            position: absolute;
+            width: calc(var(--core-size) * 1.14159 + 4rem);
+            height: 2px;
+            background: linear-gradient(
+                135deg,
+                hsl(280, 80%, 40%),
+                hsl(320, 70%, 50%),
+                hsl(340, 85%, 45%)
+            );
+            top: 50%;
+            left: calc(-1 * (var(--core-size) + 2rem));
+            transform: translateY(-220%);
+            opacity: 0;
+            pointer-events: none;
+        }
+        .cyber-power-ring {
+            position: absolute;
+            inset: -2px;
+            outline: 3px solid transparent;
+            border-radius: 12px;
+            opacity: 0;
+            transform: scale(1);
+            pointer-events: none;
+            box-shadow: 0 0 6px transparent;
+            background: linear-gradient(
+                to right,
+                rgba(99, 49, 49, 0.2) 0%,
+                rgba(31, 28, 212, 0.2) 15%,
+                rgba(64, 6, 112, 0.2) 30%,
+                rgba(131, 33, 161, 0.2) 45%,
+                rgba(132, 14, 179, 0.2) 60%,
+                rgba(255, 0, 242, 0.2) 100%
+            );
+            background-size: 200% 100%;
+        }
+        .cyber-input:checked ~ .cyber-label .cyber-core {
+            background: #242444;
+            box-shadow:
+                inset 0 4px 24px rgba(255, 255, 255, 0.2),
+                inset 0 -4px 12px rgba(0, 0, 0, 0.6),
+                0 0 8px rgba(79, 78, 78, 0.6);
+        }
+        .cyber-input:checked ~ .cyber-label .cyber-toggle-circle {
+            transform: translateX(calc(var(--core-size) / 2));
+        }
+        .cyber-input:checked + .cyber-label .cyber-power-line {
+            animation: power-line-in 0.6s ease forwards;
+        }
+        .cyber-input:checked + .cyber-label .cyber-power-ring {
+            animation:
+                power-ring-appear 0.6s ease 0.3s forwards,
+                ring-glow 2.5s linear infinite 0.9s;
+        }
+        .cyber-input:checked + .cyber-label .cyber-power-ring .ring-particle {
+            animation: ring-particle-fly 1s ease-out infinite var(--delay);
+        }
+        .cyber-input:not(:checked) + .cyber-label .cyber-power-ring {
+            animation: power-ring-break 0.8s ease forwards;
+        }
+        .cyber-power-ring .ring-particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: #ffffff;
+            border-radius: 50%;
+            opacity: 0;
+            left: var(--x);
+            top: var(--y);
+        }
+        @keyframes power-line-in {
+            0% {
+                opacity: 1;
+                transform: translateY(-50%) translateX(-100%);
+            }
+            50% {
+                opacity: 1;
+                transform: translateY(-50%) translateX(0);
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-50%) translateX(100%);
+            }
+        }
+        @keyframes power-ring-appear {
+            0% {
+                opacity: 0;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.1);
+            }
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+        @keyframes ring-glow {
+            0% {
+                background-position: 0% 0;
+                box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
+            }
+            50% {
+                background-position: 100% 0;
+                box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
+            }
+            100% {
+                background-position: 200% 0;
+                box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
+            }
+        }
+        @keyframes power-ring-break {
+            0% {
+                opacity: 1;
+                clip-path: inset(0 0 0 0);
+            }
+            25% {
+                clip-path: inset(0 25% 0 25%);
+            }
+            50% {
+                clip-path: inset(25% 25% 25% 25%);
+            }
+            75% {
+                clip-path: inset(40% 40% 40% 40%);
+            }
+            100% {
+                opacity: 0;
+                clip-path: inset(50% 50% 50% 50%);
+            }
+        }
+        @keyframes ring-particle-fly {
+            0% {
+                opacity: 1;
+                transform: translate(0, 0);
+            }
+            100% {
+                opacity: 0;
+                transform: translate(var(--px), var(--py));
+            }
+        }
+        .cyber-particles {
+            position: absolute;
+            inset: 0;
+        }
+        .particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: hsl(var(--hue), 100%, 70%);
+            border-radius: 50%;
+            opacity: 0;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .cyber-input:checked ~ .cyber-label .particle {
+            animation: particle-fly 0.8s ease-out forwards;
+        }
+        @keyframes particle-fly {
+            0% {
+                opacity: 1;
+                transform: translate(-50%, -50%);
+            }
+            100% {
+                opacity: 0;
+                transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
+            }
+        }
+        .particle:nth-child(1) {
+            --dx: 20px;
+            --dy: -20px;
+        }
+        .particle:nth-child(2) {
+            --dx: -15px;
+            --dy: 25px;
+        }
+        .particle:nth-child(3) {
+            --dx: 25px;
+            --dy: 15px;
+        }
+        .particle:nth-child(4) {
+            --dx: -20px;
+            --dy: -15px;
+        }
+        .particle:nth-child(5) {
+            --dx: 0px;
+            --dy: -30px;
+        }
+        .cyber-label:hover .cyber-core {
+            transform: scale(1.05);
+            filter: brightness(1.2);
+            box-shadow:
+                inset 0 4px 24px rgba(255, 255, 255, 0.3),
+                inset 0 -4px 12px rgba(0, 0, 0, 0.5);
+        }
+        .cyber-input:active ~ .cyber-label .cyber-core {
+            transform: scale(0.95);
+        }
+        .cyber-input:focus-visible ~ .cyber-label .cyber-core {
+            outline: 2px solid hsl(var(--hue), 100%, 50%);
+            outline-offset: 4px;
+        }
+        .cyber-glare {
+            position: absolute;
+            width: 50%;
+            height: 100%;
+            background: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.1) 0%,
+                transparent 100%
+            );
+            transform: skewX(-20deg);
+            filter: blur(2px);
+        }
+        .cyber-toggle::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-image:
+                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+            background-size: 20px 20px;
+            mix-blend-mode: overlay;
+        }
+        /* =====  END CYBER-TOGGLE  ===== */
+        .glass-card-colored {
+            width: 240px;
+            height: 360px;
+            background: rgba(235, 142, 253, 0.15);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border-radius: 22px;
+            border: 1px solid rgba(255, 255, 255, 0.34);
+            box-shadow:
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5),
+                inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+                inset 0 0 22px 11px rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .glass-card-colored::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(
+                90deg,
+                transparent,
+                rgba(255, 255, 255, 0.8),
+                transparent
+            );
+        }
+        .glass-card-colored::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100%;
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 0.8),
+                transparent,
+                rgba(255, 255, 255, 0.3)
+            );
+        }
+    </style>
+</head>
+<body id="appBody" class="min-h-screen flex items-center justify-center p-4 transition-colors duration-300 bg-slate-100 dark:bg-gray-900">
+    <!-- Glass-morph settings button (bottom-right) -->
+    <button id="glassSettingsBtn"
+            title="Glass settings"
+            class="fixed bottom-3 right-3 z-50 w-5 h-5 text-cyan-400 hover:text-cyan-300 transition-transform hover:scale-125">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm-8.5-2c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm17 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2z"/></svg>
+    </button>
+    <!-- Dark / Light Mode Toggle -->
+    <div class="fixed top-4 right-4 z-50 flex flex-col items-center space-y-2">
+        <div class="cyber-toggle">
+            <input id="toggle" class="cyber-input" type="checkbox" />
+            <label for="toggle" class="cyber-label">
+                <div class="cyber-core">
+                    <div class="cyber-toggle-circle"></div>
+                </div>
+                <div class="cyber-power-line"></div>
+                <div class="cyber-power-ring">
+                    <div style="--x: 10%; --y: 20%; --px: 15px; --py: -10px; --delay: 0.1s;" class="ring-particle"></div>
+                    <div style="--x: 70%; --y: 30%; --px: -10px; --py: 15px; --delay: 0.3s;" class="ring-particle"></div>
+                    <div style="--x: 40%; --y: 80%; --px: 20px; --py: 10px; --delay: 0.5s;" class="ring-particle"></div>
+                    <div style="--x: 90%; --y: 60%; --px: -15px; --py: -15px; --delay: 0.7s;" class="ring-particle"></div>
+                </div>
+                <div class="cyber-particles">
+                    <div class="particle"></div>
+                    <div class="particle"></div>
+                    <div class="particle"></div>
+                    <div class="particle"></div>
+                    <div class="particle"></div>
+                </div>
+            </label>
+        </div>
+        <!-- Settings button -->
+        <button id="settingsBtn" title="Settings" class="w-6 h-6 text-cyan-400 hover:text-cyan-300 transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+        </button>
+    </div>
+    <div class="container mx-auto">
+        <!-- Chat Interface Area -->
+        <div class="max-w-2xl mx-auto mb-8">
+            <div class="chat-container w-full h-[500px] rounded-[20px] shadow-[10px_10px_15px_rgba(0,0,0,0.5)] relative overflow-hidden transition-colors duration-300 bg-gradient-to-br from-blue-200 via-cyan-100 to-teal-100 dark:from-blue-900 dark:via-cyan-800 dark:to-teal-900">
+                <!-- Chat Header -->
+                <div class="chat-header p-4 border-b border-cyan-400/30">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 bg-green-400 rounded-full mr-2 animate-pulse"></div>
+                            <span class="text-white font-semibold">Eva</span>
+                        </div>
+                        <div class="text-cyan-400">
+                            <i class="fas fa-microphone"></i>
+                        </div>
+                    </div>
+                </div>
+                <!-- Chat Messages -->
+                <div class="chat-messages h-80 p-4 overflow-y-auto" id="chatMessages">
+                    <div class="text-center text-gray-300 py-8">
+                        <i class="fas fa-comments text-4xl mb-4 opacity-50"></i>
+                        <p>Start speaking or type a message...</p>
+                    </div>
+                </div>
+                <!-- Input Area -->
+                <div class="chat-input p-4 border-t border-cyan-400/30">
+                    <div class="flex items-center space-x-2">
+                        <input type="text"
+                               id="userInput"
+                               placeholder="Type your message or click to speak..."
+                               class="flex-1 bg-black/20 border border-cyan-400/30 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400">
+                        <button id="voiceBtn" class="bg-cyan-500 hover:bg-cyan-600 text-white p-2 rounded-lg transition duration-300">
+                            <i class="fas fa-microphone"></i>
+                        </button>
+                        <button id="sendBtn" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-lg transition duration-300">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Voice Visualizer -->
+                <div id="voiceVisualizer" class="absolute bottom-20 left-0 right-0 hidden">
+                    <div class="flex justify-center items-end space-x-1 h-16">
+                        <div class="w-1 bg-cyan-400 rounded" style="height: 20%; animation: voice 0.5s ease-in-out infinite;"></div>
+                        <div class="w-1 bg-cyan-400 rounded" style="height: 40%; animation: voice 0.5s ease-in-out infinite 0.1s;"></div>
+                        <div class="w-1 bg-cyan-400 rounded" style="height: 60%; animation: voice 0.5s ease-in-out infinite 0.2s;"></div>
+                        <div class="w-1 bg-cyan-400 rounded" style="height: 80%; animation: voice 0.5s ease-in-out infinite 0.3s;"></div>
+                        <div class="w-1 bg-cyan-400 rounded" style="height: 100%; animation: voice 0.5s ease-in-out infinite 0.4s;"></div>
+                    </div>
+                </div>
+                <!-- Microphone Icon in Center -->
+                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-2">
+                            <i class="fas fa-microphone text-2xl text-cyan-400"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Removed cards and stats section -->
+    </div>
+    <!-- Card Modal (unchanged) -->
+    <div id="modal" class="modal fixed inset-0 hidden items-center justify-center z-50">
+        <div class="modal-content rounded-lg p-8 max-w-md mx-4 text-center">
+            <h2 class="text-2xl font-bold text-white mb-4">Card Unlocked!</h2>
+            <p class="text-gray-300 mb-6">You discovered the secret of card <span id="cardNumber" class="text-cyan-400 font-bold"></span>!</p>
+            <button id="closeModal" class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
+                Awesome!
+            </button>
+        </div>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settingsModal"
+         class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden items-center justify-center z-[60]">
+        <div class="bg-slate-800/90 border border-cyan-400/30 rounded-xl p-6 w-[320px] space-y-4">
+            <h3 class="text-cyan-300 text-lg font-semibold mb-2">Theme Settings</h3>
+            <!-- Gradient selector -->
+            <div>
+                <label class="text-sm text-gray-300 block mb-1">Gradient</label>
+                <div id="gradientPalette" class="grid grid-cols-5 gap-1">
+                    <!-- palettes filled by JS -->
+                </div>
+            </div>
+            <button id="closeSettings"
+                    class="w-full mt-2 bg-cyan-500 hover:bg-cyan-600 text-white rounded py-1 text-sm">
+                Close
+            </button>
+        </div>
+    </div>
+    <!-- Glass-morph Settings Mini Modal -->
+    <div id="glassSettingsModal"
+         class="fixed bottom-12 right-3 z-50 hidden bg-gray-900/90 backdrop-blur-md border border-cyan-400/30 rounded-lg p-2 w-48 text-xs text-white shadow-lg">
+        <h4 class="text-cyan-300 mb-1">Glass Style</h4>
+        <label class="block mb-1"><input type="color" id="glassColor" value="#eb8efdd9" class="w-4 h-4 rounded border-none"> Color</label>
+        <label class="block mb-1">Blur <input type="range" id="glassBlur" min="0" max="30" value="15" class="w-full h-1 bg-gray-700 rounded appearance-none"></label>
+        <label class="block mb-1">Border <input type="range" id="glassBorder" min="0" max="1" step="0.05" value="0.34" class="w-full h-1 bg-gray-700 rounded appearance-none"></label>
+        <label class="block mb-1">Shadow <input type="range" id="glassShadow" min="0" max="1" step="0.05" value="0.5" class="w-full h-1 bg-gray-700 rounded appearance-none"></label>
+    </div>
+    <!-- Animated Background Particles -->
+    <div id="particleCanvas" class="fixed top-0 left-0 -z-10 overflow-hidden">
+        <canvas id="particles" class="absolute inset-0 w-full h-full"></canvas>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
+    <script>
+        // Make the chat box draggable via header & resizable
+        interact('.chat-container')
+            .resizable({
+                edges: { left: true, right: true, bottom: true, top: true },
+                listeners: {
+                    move(event) {
+                        const { target } = event;
+                        // Only update width/height, do NOT translate
+                        target.style.width = `${event.rect.width}px`;
+                        target.style.height = `${event.rect.height}px`;
+                    }
+                }
+            });
+        interact('.chat-header')
+            .draggable({
+                inertia: true,
+                listeners: {
+                    move(event) {
+                        const container = document.querySelector('.chat-container');
+                        let x = (parseFloat(container.getAttribute('data-x')) || 0) + event.dx;
+                        let y = (parseFloat(container.getAttribute('data-y')) || 0) + event.dy;
+                        container.style.transform = `translate(${x}px, ${y}px)`;
+                        container.setAttribute('data-x', x);
+                        container.setAttribute('data-y', y);
+                    }
+                }
+            });
+        // Dark/light mode toggle
+        const toggle  = document.getElementById('toggle');
+        const appBody = document.getElementById('appBody');
+        // init
+        if (localStorage.theme === 'dark') {
+            appBody.classList.add('dark');
+            toggle.checked = true;
+        }
+        toggle.addEventListener('change', () => {
+            if (toggle.checked) {
+                appBody.classList.add('dark');
+                localStorage.theme = 'dark';
+            } else {
+                appBody.classList.remove('dark');
+                localStorage.theme = 'light';
+            }
+        });
+        const modal = document.getElementById('modal');
+        const cardNumberSpan = document.getElementById('cardNumber');
+        const closeModalBtn = document.getElementById('closeModal');
+        // --- Settings panel ---
+        const settingsBtn   = document.getElementById('settingsBtn');
+        const settingsModal = document.getElementById('settingsModal');
+        const closeSettings = document.getElementById('closeSettings');
+        const eyePicker     = document.getElementById('eyeColorPicker');
+        const textPicker    = document.getElementById('textColorPicker');
+        const gradPalette   = document.getElementById('gradientPalette');
+        const chatContainer = document.querySelector('.chat-container');
+        settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));
+        closeSettings.addEventListener('click', () => settingsModal.classList.add('hidden'));
+        settingsModal.addEventListener('click', (e) => {
+            if (e.target === settingsModal) settingsModal.classList.add('hidden');
+        });
+        // -- mini glass-morph controls
+        const glassBtn  = document.getElementById('glassSettingsBtn');
+        const glassMod  = document.getElementById('glassSettingsModal');
+        const glassColor = document.getElementById('glassColor');
+        const glassBlur  = document.getElementById('glassBlur');
+        const glassBorder = document.getElementById('glassBorder');
+        const glassShadow = document.getElementById('glassShadow');
+        glassBtn.addEventListener('click', () => glassMod.classList.toggle('hidden'));
+        function updateGlass() {
+            const color = glassColor.value;
+            const blur  = glassBlur.value;
+            const bord  = glassBorder.value
+            const shad  = glassShadow.value
+            const container = document.querySelector('.chat-container');
+            container.style.background          = color + Math.round(bord*255).toString(16).padStart(2,'0');
+            container.style.backdropFilter      = `blur(${blur}px)`;
+            container.style.webkitBackdropFilter= `blur(${blur}px)`;
+            container.style.borderColor         = `rgba(255,255,255,${bord})`;
+            container.style.boxShadow           = `0 8px 32px rgba(0,0,0,${shad})`;
+        }
+        [glassColor, glassBlur, glassBorder, glassShadow].forEach(el => el.addEventListener('input', updateGlass));
+        updateGlass(); // init
+        // 20 gradients (10 light, 10 dark)
+        const lightGradients = [
+            'linear-gradient(135deg,#ffeaa7 0%,#fab1a0 50%,#fd79a8 100%)',
+            'linear-gradient(135deg,#a29bfe 0%,#6c5ce7 50%,#00cec9 100%)',
+            'linear-gradient(135deg,#74b9ff 0%,#0984e3 50%,#00cec9 100%)',
+            'linear-gradient(135deg,#fd79a8 0%,#e84393 50%,#a29bfe 100%)',
+            'linear-gradient(135deg,#00b894 0%,#00cec9 50%,#6c5ce7 100%)',
+            'linear-gradient(135deg,#fdcb6e 0%,#e17055 50%,#d63031 100%)',
+            'linear-gradient(135deg,#81ecec 0%,#74b9ff 50%,#a29bfe 100%)',
+            'linear-gradient(135deg,#55efc4 0%,#00b894 50%,#00cec9 100%)',
+            'linear-gradient(135deg,#fd79a8 0%,#fdcb6e 50%,#e17055 100%)',
+            'linear-gradient(135deg,#e17055 0%,#fab1a0 50%,#ffeaa7 100%)'
+        ];
+        const darkGradients = [
+            'linear-gradient(135deg,#2d3436 0%,#636e72 50%,#2d3436 100%)',
+            'linear-gradient(135deg,#192a56 0%,#273c75 50%,#487eb0 100%)',
+            'linear-gradient(135deg,#2d3436 0%,#636e72 50%,#b2bec3 100%)',
+            'linear-gradient(135deg,#192a56 0%,#40739e 50%,#0097e6 100%)',
+            'linear-gradient(135deg,#192a56 0%,#192a56 50%,#273c75 100%)',
+            'linear-gradient(135deg,#2f3640 0%,#353b48 50%,#192a56 100%)',
+            'linear-gradient(135deg,#192a56 0%,#40739e 50%,#192a56 100%)',
+            'linear-gradient(135deg,#2d3436 0%,#636e72 50%,#192a56 100%)',
+            'linear-gradient(135deg,#273c75 0%,#40739e 50%,#192a56 100%)',
+            'linear-gradient(135deg,#192a56 0%,#273c75 50%,#2d3436 100%)'
+        ];
+        // Build palette
+        [...lightGradients, ...darkGradients].forEach((g, i) => {
+            const swatch = document.createElement('button');
+            swatch.className = 'w-8 h-8 rounded border border-cyan-400/30 hover:scale-125 transition-transform';
+            swatch.style.background = g;
+            swatch.addEventListener('click', () => applyGradient(g));
+            gradPalette.appendChild(swatch);
+        });
+        // Apply saved gradient on load
+        const savedGrad = localStorage.getItem('bgGradient');
+        if (savedGrad) applyGradient(savedGrad);
+        function applyGradient(grad) {
+            appBody.style.background = grad;
+            appBody.style.backgroundAttachment = 'fixed';
+            localStorage.setItem('bgGradient', grad);
+        }
+        // Animated background particles
+        const canvas = document.getElementById('particles');
+        const ctx = canvas.getContext('2d');
+        let particles = [];
+        let animationId;
+        function resizeCanvas() {
+            canvas.width = window.innerWidth / 2;
+            canvas.height = window.innerHeight / 2;
+        }
+        class Particle {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = Math.random() * 4 + 2;
+                this.speedX = Math.random() * 0.5 - 0.25;
+                this.speedY = Math.random() * 0.5 - 0.25;
+                this.opacity = Math.random() * 0.5 + 0.1;
+                this.blur = 0; // sharp
+                this.hue = Math.random() * 360;
+            }
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
+                if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
+                this.hue = (this.hue + 0.5) % 360;
+                this.opacity = 0.4 + 0.3 * Math.sin(Date.now() * 0.002 + this.x * 0.01);
+            }
+            draw() {
+                ctx.save();
+                ctx.globalAlpha = this.opacity;
+                ctx.fillStyle = `hsl(${this.hue},100%,70%)`;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+        }
+        class Star {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = 1 + Math.random() * 2;
+                this.speedX = Math.random() * 0.3 - 0.15;
+                this.speedY = Math.random() * 0.3 - 0.15;
+                this.hue = Math.random() * 360;
+                this.twinkle = 0;
+            }
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
+                if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
+                this.hue = (this.hue + 0.3) % 360;
+                this.twinkle = 0.3 + 0.7 * Math.abs(Math.sin(Date.now() * 0.004 + this.x * 0.01));
+            }
+            draw() {
+                ctx.save();
+                ctx.globalAlpha = this.twinkle;
+                ctx.shadowColor = `hsl(${this.hue},100%,80%)`;
+                ctx.shadowBlur = 12;
+                ctx.fillStyle = `hsl(${this.hue},100%,80%)`;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+        }
+        function initParticles() {
+            particles = [];
+            const sharpCount   = Math.min(40, Math.floor((canvas.width * canvas.height) / 25000));
+            const starCount    = Math.min(30, Math.floor((canvas.width * canvas.height) / 30000));
+            for (let i = 0; i < sharpCount; i++) particles.push(new Particle());
+            for (let i = 0; i < starCount; i++)  particles.push(new Star());
+        }
+        function animateParticles() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            particles.forEach(particle => {
+                particle.update();
+                particle.draw();
+            });
+            animationId = requestAnimationFrame(animateParticles);
+        }
+        function startParticleAnimation() {
+            resizeCanvas();
+            initParticles();
+            animateParticles();
+        }
+        // Initialize particles on load
+        window.addEventListener('resize', () => {
+            resizeCanvas();
+            initParticles();
+        });
+        startParticleAnimation();
+        // Eye / Text color pickers
+        // Chat functionality
+        const chatMessages = document.getElementById('chatMessages');
+        const userInput = document.getElementById('userInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const voiceBtn = document.getElementById('voiceBtn');
+        const voiceVisualizer = document.getElementById('voiceVisualizer');
+        // Voice recognition setup
+        let recognition = null;
+        if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            recognition = new SpeechRecognition();
+            recognition.continuous = false;
+            recognition.interimResults = false;
+            recognition.lang = 'en-US';
+        }
+        // Chat event listeners
+        sendBtn.addEventListener('click', sendMessage);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        voiceBtn.addEventListener('click', toggleVoiceRecognition);
+        function addMessage(message, sender) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${sender}`;
+            messageDiv.textContent = message;
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message) return;
+            addMessage(message, 'user');
+            userInput.value = '';
+            // Simulate AI response (replace with actual API call)
+            setTimeout(() => {
+                const responses = [
+                    "I'm processing your request...",
+                    "Let me think about that...",
+                    "Interesting question!",
+                    "Here's what I found..."
+                ];
+                const response = responses[Math.floor(Math.random() * responses.length)];
+                addMessage(response, 'assistant');
+            }, 1000);
+        }
+        function toggleVoiceRecognition() {
+            if (!recognition) {
+                alert('Speech recognition not supported in this browser');
+                return;
+            }
+            if (voiceBtn.classList.contains('listening')) {
+                recognition.stop();
+                stopListening();
+            } else {
+                recognition.start();
+                voiceBtn.classList.add('listening');
+                voiceBtn.innerHTML = '<i class="fas fa-stop"></i>';
+                voiceVisualizer.classList.remove('hidden');
+            }
+        }
+        function stopListening() {
+            voiceBtn.classList.remove('listening');
+            voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+            voiceVisualizer.classList.add('hidden');
+        }
+        // Voice recognition events
+        if (recognition) {
+            recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                userInput.value = transcript;
+                sendMessage();
+            };
+            recognition.onend = () => {
+                stopListening();
+            };
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error:', event.error);
+                stopListening();
+            };
+        }
+        <!-- duplicate block removed -->
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=basheer1414/aiui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>