Spaces:

basheer1414
/

aiui

Running

App Files Files Community

basheer1414 commited on Jul 22

Commit

b806027

verified ·

1 Parent(s): 33adc07

r when i'm pressing it's not sending. and i paste pasted the API - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +620 -1073

index.html CHANGED Viewed

@@ -1,1096 +1,643 @@
 <!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">
-    <!-- tiny palette button inside chat-input row -->
-    <button id="paletteBtn"
-            title="Choose gradient"
-            class="bg-cyan-500 text-white text-xs px-1.5 py-0.5 rounded absolute bottom-4 right-16 z-10">
-        🎨
-    </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>
-    <!-- Gradient-Palette Pop-up -->
-    <div id="palettePopup"
-         class="hidden absolute bg-gray-900/90 backdrop-blur-md border border-cyan-400/30 rounded-lg p-2 z-20 text-xs w-48">
-        <h4 class="text-cyan-300 mb-1">Glass Gradients</h4>
-        <div id="glassGradients" class="grid grid-cols-2 gap-1">
-            <!-- filled by JS -->
         </div>
-    </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');
-        const paletteBtn  = document.getElementById('paletteBtn');
-        const palettePopup = document.getElementById('palettePopup');
-        const glassGradients = document.getElementById('glassGradients');
-        paletteBtn.addEventListener('click', () => palettePopup.classList.toggle('hidden'));
-        // build 10 gradient swatches
-        const lightGlass = [
-            'linear-gradient(135deg,#ffeaa7,#fab1a0)',
-            'linear-gradient(135deg,#a29bfe,#6c5ce7)',
-            'linear-gradient(135deg,#74b9ff,#0984e3)',
-            'linear-gradient(135deg,#fd79a8,#e84393)',
-            'linear-gradient(135deg,#55efc4,#00b894)'
-        ];
-        const darkGlass = [
-            'linear-gradient(135deg,#2d3436,#636e72)',
-            'linear-gradient(135deg,#192a56,#273c75)',
-            'linear-gradient(135deg,#192a56,#40739e)',
-            'linear-gradient(135deg,#2f3640,#353b48)',
-            'linear-gradient(135deg,#273c75,#192a56)'
-        ];
-        [...lightGlass, ...darkGlass].forEach(grad => {
-            const sw = document.createElement('button');
-            sw.className = 'w-full h-6 rounded border border-cyan-400/30 hover:scale-110 transition-transform';
-            sw.style.background = grad;
-            sw.addEventListener('click', () => {
-                chatContainer.style.background = grad;
-                palettePopup.classList.add('hidden');
-            });
-            glassGradients.appendChild(sw);
-        });
-        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>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Particle Corn-Field Animation</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    /* Full-screen canvas sits behind everything */
+    #particleCanvas {
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      background: linear-gradient(135deg, #0f172a, #312e81, #581c87);
+    }
+    /* From Uiverse.io by krokettenkoal */
+    :root {
+      --bg-col: #010101;
+      --space-col: #2d093a;
+      --galaxy-col: #460a42;
+    }
+    .card {
+      --bg-col: #010101;
+      --space-col: #2d093a;
+      --galaxy-col: #460a42;
+      --space-gradient: radial-gradient(ellipse at top, var(--bg-col), transparent),
+                       radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
+                       radial-gradient(ellipse at bottom right, var(--space-col), transparent);
+      --space-gradient-alt: radial-gradient(ellipse at top left, var(--space-col), transparent),
+                       radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
+                       radial-gradient(ellipse at bottom right, var(--bg-col), transparent);
+      --stars: radial-gradient(circle at 52% 54%, rgba(255, 255, 255, 0.582) 3px, transparent 4px),
+               radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.582) 2px, transparent 3px),
+               radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.582) 3px, transparent 8px),
+               radial-gradient(circle at 18% 21%, rgba(255, 255, 255, 0.582) 4px, transparent 5px),
+               radial-gradient(circle at 36% 9%, rgba(255, 255, 255, 0.582) 3px, transparent 5px),
+               radial-gradient(circle at 28% 31%, rgba(255, 255, 255, 0.39) 2px, transparent 3px),
+               radial-gradient(circle at 62% 61%, rgba(255, 255, 255, 0.532) 3px, transparent 4px),
+               radial-gradient(circle at 57% 66%, rgba(255, 255, 255, 0.842) 6px, transparent 8px),
+               radial-gradient(circle at 65% 71%, rgba(255, 255, 255, 0.534) 1px, transparent 3px),
+               radial-gradient(circle at 67% 68%, rgba(255, 255, 255, 0.651) 3px, transparent 3px),
+               radial-gradient(circle at 43% 44%, rgba(255, 255, 255, 0.74) 2px, transparent 6px),
+               radial-gradient(circle at 40% 39%, rgba(183, 243, 255, 0.842) 4px, transparent 10px),
+               radial-gradient(circle at 41% 40%, rgba(255, 255, 255, 0.699) 5px, transparent 6px),
+               radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.349) 2px, transparent 4px),
+               radial-gradient(circle at 39% 42%, rgba(255, 255, 255, 0.747) 5px, transparent 7px),
+               radial-gradient(circle at 80% 31%, rgba(255, 255, 255, 0.781) 4px, transparent 6px),
+               radial-gradient(circle at 25% 64%, rgba(255, 255, 255, 0.425) 3px, transparent 4px),
+               radial-gradient(circle at 41% 49%, rgba(255, 255, 255, 0.678) 3px, transparent 6px),
+               radial-gradient(circle at 50% 37%, rgba(255, 255, 255, 0.336) 1px, transparent 3px),
+               radial-gradient(circle at 4% 37%, rgba(255, 255, 255, 0.336) 1px, transparent 3px),
+               radial-gradient(circle at 8% 60%, rgba(255, 255, 255, 0.336) 1px, transparent 4px),
+               radial-gradient(circle at 12% 54%, rgba(255, 255, 255, 0.336) 1px, transparent 5px),
+               radial-gradient(circle at 6% 59%, rgba(255, 255, 255, 0.336) 2px, transparent 10px),
+               radial-gradient(circle at 9% 57%, rgba(255, 255, 255, 0.336) 1px, transparent 2px),
+               radial-gradient(circle at 14% 61%, rgba(255, 255, 255, 0.336) 2px, transparent 6px);
+      min-width: 30rem;
+      padding: 2rem 4rem;
+      border-radius: 2rem;
+      background-color: #010101;
+      background-image: var(--space-gradient), var(--stars);
+      background-size: 175% 200%;
+      background-repeat: no-repeat;
+      box-shadow: 5px 7px 20px var(--bg-col);
+      overflow: clip;
+      animation: space-drift 180s ease-in-out infinite;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 10;
+      cursor: grab;
+      user-select: none;
+      min-height: 300px;
+      min-width: 400px;
+    }
+    .heading {
+      font-size: 0.9rem;
+      text-align: center;
+      color: rgb(189, 188, 141);
+    }
+    .heading span {
+      font-size: 2.2rem;
+      font-weight: bold;
+      display: block;
+      font-style: italic;
+      margin-top: 0.25rem;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -moz-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: 15px 10px 55px plum;
+      text-transform: uppercase;
+      letter-spacing: 1rem;
+      z-index: 99;
+      animation: heading-stretch 0.7s forwards ease-out;
+    }
+    .heading span::before,
+    .heading span::after {
+      content: '—';
+    }
+    .content {
+      display: grid;
+      place-items: center;
+      padding: 2rem;
+      z-index: 1;
+    }
+    .item {
+      --item-duration: 8s;
+      --idx: 0;
+      display: flex;
+      grid-area: 1 / 1;
+      flex-flow: column nowrap;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 1.1rem;
+      text-transform: lowercase;
+      font-style: italic;
+      opacity: 0;
+      animation: item-fade var(--item-duration) infinite ease-in-out;
+      animation-delay: calc(var(--idx) * var(--item-duration) / 3);
+    }
+    .item svg {
+      width: 3rem;
+      height: 3rem;
+    }
+    .item--create {
+      --idx: 0;
+    }
+    .item--post {
+      --idx: 1;
+    }
+    .item--inspire {
+      --idx: 2;
+    }
+    /* Animation keyframes for card */
+    @keyframes space-drift {
+      0% { background-position: 0% 50%; }
+      33% { background-position: 80% 0%; }
+      67% { background-position: 80% 100%; }
+      100% { background-position: 0% 50%; }
+    }
+    @keyframes heading-stretch {
+      from {
+        opacity: 0.8;
+        transform: scale(0.8);
+        letter-spacing: normal;
+        filter: blur(50px);
+        text-shadow: none;
+      }
+      to {
+        opacity: unset;
+        transform: unset;
+        letter-spacing: 1rem;
+        filter: unset;
+      }
+    }
+    @keyframes item-fade {
+      0%, 20% {
+        opacity: 0;
+        transform: translateX(10px);
+        filter: blur(5px);
+      }
+      40%, 60% {
+        opacity: 1;
+        transform: unset;
+        filter: unset;
+      }
+      70%, 100% {
+        opacity: 0;
+        transform: translateX(-10px);
+        filter: blur(5px);
+      }
+    }
+    :root {
+      --bg-col: #010101;
+      --space-col: #2d093a;
+      --galaxy-col: #460a42;
+    }
+    /* Tiny Settings Panel */
+    #settingsPanel {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 20;
+      width: 240px;
+      background: rgba(15,15,15,0.95);
+      border-radius: 0.5rem;
+      padding: 0.75rem;
+      display: none;
+      flex-direction: column;
+      gap: 0.5rem;
+      font-size: 0.6rem;
+      color: #fff;
+      backdrop-filter: blur(4px);
+    }
+    #settingsPanel label {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+    #settingsPanel input[type="range"],
+    #settingsPanel input[type="number"] {
+      width: 100%;
+      height: 0.5rem;
+      font-size: 0.6rem;
+      padding: 0.1rem;
+    }
+    /* Modern colour pellets */
+    .colourPellet {
+      width: 0.8rem;
+      height: 0.8rem;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      display: inline-block;
+      margin-right: 0.15rem;
+    }
+  </style>
+</head>
+<body class="relative min-h-screen text-white flex flex-col items-center justify-center font-sans">
+  <canvas id="particleCanvas"></canvas>
+  <!-- From Uiverse.io by krokettenkoal -->
+  <div id="draggableCard" class="card relative flex flex-col min-w-0 w-full max-w-xl mx-auto !min-h-[28rem] !rounded-xl !p-0">
+    <!-- Header -->
+    <header class="flex items-center justify-between px-4 py-2 border-b border-white/20">
+      <div class="flex items-center gap-2">
+        <button id="newChatBtn" title="New Chat" class="p-1.5 rounded-full hover:bg-white/10 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg>
+        </button>
+        <button id="historyBtn" title="History" class="p-1.5 rounded-full hover:bg-white/10 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v4l3 3m7-7a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        </button>
+      </div>
+      <div class="flex items-center gap-2">
+        <select id="modelSelect" class="bg-slate-900/80 text-sm border border-white/20 rounded px-2 py-1 outline-none">
+          <option value="gpt-4o-mini">GPT-4o-mini</option>
+          <option value="gpt-4o">GPT-4o</option>
+          <option value="gpt-4-turbo">GPT-4-turbo</option>
+          <option value="claude-3-5-sonnet">Claude-3.5-Sonnet</option>
+          <option value="claude-3-5-haiku">Claude-3.5-Haiku</option>
+          <option value="claude-3-opus">Claude-3-Opus</option>
+          <option value="gemini-1.5-pro">Gemini-1.5-Pro</option>
+          <option value="gemini-1.5-flash">Gemini-1.5-Flash</option>
+          <option value="gemini-2-flash">Gemini-2-Flash</option>
+          <option value="llama-3.1-8b">Llama-3.1-8B</option>
+          <option value="llama-3.1-70b">Llama-3.1-70B</option>
+          <option value="llama-3.3-70b">Llama-3.3-70B</option>
+          <option value="mistral-large">Mistral-Large</option>
+          <option value="mistral-nemo">Mistral-Nemo</option>
+          <option value="command-r-plus">Cohere-Command-R+</option>
+          <option value="command-r">Cohere-Command-R</option>
+          <option value="gpt-3.5-turbo">GPT-3.5-Turbo</option>
+          <option value="claude-3-haiku">Claude-3-Haiku</option>
+          <option value="gemini-1.0-pro">Gemini-1.0-Pro</option>
+          <option value="llama-3-8b">Llama-3-8B</option>
+          <option value="mistral-7b">Mistral-7B</option>
+          <option value="command-light">Cohere-Command-Light</option>
+        </select>
+        <button id="settingsButton" class="p-1.5 rounded-full hover:bg-white/10 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m9-9h-6m-6 0H3m15.364-6.364l-4.242 4.242m-4.242 4.242l-4.242 4.242m12.728 0l-4.242-4.242m-4.242-4.242l-4.242-4.242"/></svg>
+        </button>
+        <button id="lockButton" class="p-1.5 rounded-full hover:bg-white/10 transition">
+          <svg id="lockIcon" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><circle cx="12" cy="16" r="1"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+          <svg id="unlockIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><circle cx="12" cy="16" r="1"/><path d="M7 11V7a5 5 0 019.9-1"/></svg>
+        </button>
+      </div>
+    </header>
+    <!-- Message list -->
+    <main id="chatWindow" class="flex-1 flex flex-col gap-3 p-3 overflow-y-auto text-sm">
+      <!-- messages appear here -->
+    </main>
+    <!-- Input row -->
+    <footer class="border-t border-white/20 p-3">
+      <div class="flex items-center gap-2">
+        <button id="micBtn" class="p-2 rounded-full hover:bg-white/10 transition shrink-0">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
         </button>
+        <button id="attachBtn" class="p-2 rounded-full hover:bg-white/10 transition shrink-0">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
+        </button>
+        <div class="flex-1 relative">
+          <input id="chatInput" type="text" placeholder="Type your message…" class="w-full bg-transparent border border-white/20 rounded-xl px-3 py-2 outline-none focus:border-white/40 transition"/>
         </div>
+        <button id="sendBtn" class="p-2 rounded-full hover:bg-white/10 transition shrink-0">
+          <svg class="w-5 h-5 rotate-90" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
+        </button>
+      </div>
+    </footer>
     <script>
+      const chatInput  = document.getElementById('chatInput');
+      const sendBtn    = document.getElementById('sendBtn');
+      const chatWindow = document.getElementById('chatWindow');
+      sendBtn.addEventListener('click', () => {
+        const text = chatInput.value.trim();
+        if (!text) return;
+        const msgDiv = document.createElement('div');
+        msgDiv.className = 'self-end bg-sky-600/80 rounded-lg px-3 py-2 max-w-xs break-words';
+        msgDiv.textContent = text;
+        chatWindow.appendChild(msgDiv);
+        chatInput.value = '';
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+      });
+      chatInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendBtn.click();
         }
+      });
+    </script>
+    <!-- History panel -->
+    <div id="historyPanel" class="hidden absolute top-12 left-3 w-64 max-h-60 border border-white/20 rounded-lg shadow-2xl z-20 overflow-y-auto text-sm">
+      <ul class="divide-y divide-white/10">
+        <li class="px-3 py-2 hover:bg-white/5 cursor-pointer">Chat 1 – Yesterday</li>
+        <li class="px-3 py-2 hover:bg-white/5 cursor-pointer">Chat 2 – 3 days ago</li>
+      </ul>
+    </div>
+    <div id="resizeHandle" class="absolute bottom-0 right-0 w-6 h-6 cursor-se-resize">
+      <svg class="w-full h-full text-white opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="9 15 15 9 15 15 9 9"></polyline>
+      </svg>
+    </div>
+  </div>
+  <!-- API Key Modal -->
+  <div id="apiModal" class="fixed inset-0 bg-black/50 z-30 flex items-center justify-center hidden">
+    <div class="bg-slate-800 rounded-lg p-6 w-80 text-white">
+      <h2 class="text-base font-semibold mb-2">Enter API Key</h2>
+      <p id="apiModelName" class="text-sm text-slate-300 mb-3"></p>
+      <input id="apiKeyInput" type="password" placeholder="Paste your API key here…"
+             class="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2 mb-3 text-sm outline-none focus:border-sky-500">
+      <div class="flex justify-end gap-2">
+        <button id="apiCancel" class="px-3 py-1 text-sm rounded bg-slate-600 hover:bg-slate-500">Cancel</button>
+        <button id="apiSave" class="px-3 py-1 text-sm rounded bg-sky-600 hover:bg-sky-500">Save</button>
+      </div>
+      <p id="apiSavedMsg" class="hidden text-xs text-green-400 mt-2">✓ API saved successfully</p>
+    </div>
+  </div>
+  <!-- Tiny Settings Panel -->
+  <div id="settingsPanel">
+    <label>
+      Opacity
+      <input type="range" id="opacitySlider" min="0" max="1" step="0.05" value="1">
+    </label>
+    <label>
+      Shadow Blur
+      <input type="range" id="shadowSlider" min="0" max="50" step="1" value="0">
+    </label>
+    <label>
+      Corner Curve
+      <input type="range" id="cornerSlider" min="0" max="50" step="1" value="24">
+    </label>
+    <label>
+      Colour Gradient
+      <div id="colourPalette">
+        <button class="colourPellet" style="background:#ff0055"></button>
+        <button class="colourPellet" style="background:#ff6b35"></button>
+        <button class="colourPellet" style="background:#ffcf40"></button>
+        <button class="colourPellet" style="background:#44d62c"></button>
+        <button class="colourPellet" style="background:#00bfff"></button>
+        <button class="colourPellet" style="background:#0047ab"></button>
+        <button class="colourPellet" style="background:#9d00ff"></button>
+        <button class="colourPellet" style="background:#ff00ff"></button>
+        <button class="colourPellet" style="background:#fd79a8"></button>
+        <button class="colourPellet" style="background:#a29bfe"></button>
+      </div>
+    </label>
+  </div>
+  <script>
+    /* ---------- DRAGGABLE & RESIZABLE CARD ---------- */
+    const card = document.getElementById('draggableCard');
+    const resizeHandle = document.getElementById('resizeHandle');
+    // Dragging variables
+    let isDragging = false;
+    let isResizing = false;
+    let currentX, currentY, initialX, initialY;
+    let xOffset = 0, yOffset = 0;
+    // Resizing variables
+    let startWidth, startHeight, startX, startY;
+    const lockButton = document.getElementById('lockButton');
+    const lockIcon = document.getElementById('lockIcon');
+    const unlockIcon = document.getElementById('unlockIcon');
+    let isLocked = false;
+    card.addEventListener('mousedown', dragStart);
+    resizeHandle.addEventListener('mousedown', resizeStart);
+    document.addEventListener('mousemove', dragMove);
+    document.addEventListener('mouseup', dragEnd);
+    lockButton.addEventListener('click', () => {
+      isLocked = !isLocked;
+      if (isLocked) {
+        lockIcon.classList.add('hidden');
+        unlockIcon.classList.remove('hidden');
+        card.style.cursor = 'default';
+        resizeHandle.style.display = 'none';
+      } else {
+        lockIcon.classList.remove('hidden');
+        unlockIcon.classList.add('hidden');
+        card.style.cursor = 'grab';
+        resizeHandle.style.display = 'block';
+      }
+    });
+    function dragStart(e) {
+      if (isLocked || e.target.tagName === 'BUTTON') return;
+      initialX = e.clientX - xOffset;
+      initialY = e.clientY - yOffset;
+      if (e.target === card || card.contains(e.target)) {
+        isDragging = true;
+      }
+    }
+    function resizeStart(e) {
+      if (isLocked) return;
+      e.stopPropagation();
+      isResizing = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      startWidth = parseInt(getComputedStyle(card).width, 10);
+      startHeight = parseInt(getComputedStyle(card).height, 10);
+    }
+    function dragMove(e) {
+      if (!isLocked && isDragging) {
+        e.preventDefault();
+        currentX = e.clientX - initialX;
+        currentY = e.clientY - initialY;
+        xOffset = currentX;
+        yOffset = currentY;
+        card.style.transform = `translate(calc(-50% + ${currentX}px), calc(-50% + ${currentY}px))`;
+      } else if (!isLocked && isResizing) {
+        e.preventDefault();
+        const newWidth = startWidth + (e.clientX - startX);
+        const newHeight = startHeight + (e.clientY - startY);
+        card.style.width = `${Math.max(300, newWidth)}px`;
+        card.style.height = `${Math.max(250, newHeight)}px`;
+      }
+    }
+    function dragEnd(e) {
+      initialX = currentX;
+      initialY = currentY;
+      isDragging = false;
+      isResizing = false;
+    }
+    /* ---------- TINY SETTINGS ---------- */
+    const settingsButton = document.getElementById('settingsButton');
+    const settingsPanel = document.getElementById('settingsPanel');
+    settingsButton.addEventListener('click', () => {
+      settingsPanel.style.display = settingsPanel.style.display === 'flex' ? 'none' : 'flex';
+    });
+    /* ---------- API-KEY MODAL LOGIC ---------- */
+    const modelSelect   = document.getElementById('modelSelect');
+    const apiModal    = document.getElementById('apiModal');
+    const apiModelName= document.getElementById('apiModelName');
+    const apiKeyInput = document.getElementById('apiKeyInput');
+    const apiSaveBtn  = document.getElementById('apiSave');
+    const apiCancelBtn= document.getElementById('apiCancel');
+    const apiSavedMsg = document.getElementById('apiSavedMsg');
+    modelSelect.addEventListener('change', () => {
+      apiModelName.textContent = `Model: ${modelSelect.value}`;
+      apiKeyInput.value = '';
+      apiSavedMsg.classList.add('hidden');
+      apiModal.classList.remove('hidden');
+    });
+    apiSaveBtn.addEventListener('click', () => {
+      localStorage.setItem(`api-${modelSelect.value}`, apiKeyInput.value.trim());
+      apiSavedMsg.classList.remove('hidden');
+      setTimeout(() => apiModal.classList.add('hidden'), 800);
+    });
+    apiCancelBtn.addEventListener('click', () => apiModal.classList.add('hidden'));
+    /* ---------- CONFIG ---------- */
+    const CONFIG = {
+      particleCount: 120,
+      particleRadius: () => Math.random() * 2.5 + 1, // 1–3.5
+      speed: () => Math.random() * 0.4 + 0.1,       // 0.1–0.5
+      hueShiftSpeed: 0.8,
+    };
+    /* ---------- CANVAS ---------- */
+    const canvas = document.getElementById('particleCanvas');
+    const ctx = canvas.getContext('2d');
+    let width, height, particles = [];
+    let hue = 200; // Start on a blue tone instead of yellow
+    /* ---------- RESIZE HANDLER ---------- */
+    function resize() {
+      width  = canvas.width  = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+      if (particles.length === 0) initParticles();
+    }
+    /* ---------- PARTICLE ---------- */
+    class Particle {
+      constructor() {
+        this.reset();
+        this.hue = Math.random() * 360;
+        this.saturation = 75 + Math.random() * 25;
+        this.lightness = 50 + Math.random() * 30;
+        this.shiny = Math.random() > 0.7;
+        this.blurred = Math.random() > 0.8;
+      }
+      reset() {
+        this.x = Math.random() * width;
+        this.y = Math.random() * height;
+        this.radius = CONFIG.particleRadius();
+        this.speed = CONFIG.speed();
+        this.angle = Math.random() * Math.PI * 2;
+      }
+      update() {
+        this.x += Math.cos(this.angle) * this.speed;
+        this.y += Math.sin(this.angle) * this.speed;
+        // Wrap around edges
+        if (this.x < -this.radius) this.x = width + this.radius;
+        if (this.x > width + this.radius) this.x = -this.radius;
+        if (this.y < -this.radius) this.y = height + this.radius;
+        if (this.y > height + this.radius) this.y = -this.radius;
+      }
+      draw() {
+        ctx.save();
+        if (this.blurred) {
+          ctx.filter = 'blur(2px)';
+        }
+        if (this.shiny) {
+          ctx.shadowBlur = 10;
+          ctx.shadowColor = `hsl(${this.hue}, ${this.saturation}%, ${this.lightness + 20}%)`;
+        }
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`;
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+    /* ---------- INITIALIZE PARTICLES ---------- */
+    function initParticles() {
+      particles = [];
+      for (let i = 0; i < CONFIG.particleCount; i++) {
+        particles.push(new Particle());
+      }
+    }
+    /* ---------- ANIMATION LOOP ---------- */
+    function animate() {
+      ctx.clearRect(0, 0, width, height);
+      particles.forEach(p => {
+        p.update();
+        p.draw();
+      });
+      requestAnimationFrame(animate);
+    }
+    /* ---------- EVENT LISTENERS ---------- */
+    window.addEventListener('resize', resize);
+    /* ---------- START ---------- */
+    resize();
+    animate();
+    /* ---------- Settings Controls ---------- */
+    const opacitySlider = document.getElementById('opacitySlider');
+    const shadowSlider  = document.getElementById('shadowSlider');
+    const cornerSlider  = document.getElementById('cornerSlider');
+    const colourPalette = document.getElementById('colourPalette');
+    opacitySlider.addEventListener('input', () => {
+      card.style.opacity = opacitySlider.value;
+    });
+    shadowSlider.addEventListener('input', () => {
+      card.style.boxShadow = `0 0 ${shadowSlider.value}px rgba(255,255,255,0.3)`;
+    });
+    cornerSlider.addEventListener('input', () => {
+      card.style.borderRadius = cornerSlider.value + 'px';
+    });
+    colourPalette.addEventListener('click', (e) => {
+      if (e.target.classList.contains('colourPellet')) {
+        const colour = e.target.style.background;
+        card.style.background = `linear-gradient(135deg, ${colour}, rgba(0,0,0,0.8))`;
+      }
+    });
+  </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>