Spaces:

Boobs00
/

cipherecstasy

Running

App Files Files Community

Boobs00 commited on Apr 19, 2025

Commit

7d29ac3

verified ·

1 Parent(s): a935e93

Add 2 files

Browse files

Files changed (2) hide show

index.html +202 -711
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,758 +3,249 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CipherEcstasy - Secure Data Encryption</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">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: {
-                            50: '#f0f9ff',
-                            100: '#e0f2fe',
-                            200: '#bae6fd',
-                            300: '#7dd3fc',
-                            400: '#38bdf8',
-                            500: '#0ea5e9',
-                            600: '#0284c7',
-                            700: '#0369a1',
-                            800: '#075985',
-                            900: '#0c4a6e',
-                        },
-                        secondary: {
-                            50: '#f5f3ff',
-                            100: '#ede9fe',
-                            200: '#ddd6fe',
-                            300: '#c4b5fd',
-                            400: '#a78bfa',
-                            500: '#8b5cf6',
-                            600: '#7c3aed',
-                            700: '#6d28d9',
-                            800: '#5b21b6',
-                            900: '#4c1d95',
-                        },
-                        dark: '#0f172a',
-                        light: '#f8fafc',
-                    },
-                    fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                        mono: ['Fira Code', 'monospace'],
-                    },
-                }
-            }
-        }
-    </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #f8fafc;
-            color: #0f172a;
         }
-        .gradient-bg {
-            background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
         }
-        .encryption-card {
-            backdrop-filter: blur(16px);
-            background: rgba(255, 255, 255, 0.15);
-            border: 1px solid rgba(255, 255, 255, 0.2);
         }
-        .typewriter {
-            border-right: 3px solid;
-            white-space: nowrap;
-            overflow: hidden;
-            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
         }
-        @keyframes typing {
-            from { width: 0 }
-            to { width: 100% }
         }
-        @keyframes blink-caret {
-            from, to { border-color: transparent }
-            50% { border-color: #0ea5e9 }
         }
-        .pulse-animation {
-            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
         }
     </style>
 </head>
-<body class="min-h-screen">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-sm sticky top-0 z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0 flex items-center">
-                        <i class="fas fa-lock text-primary-600 text-2xl mr-2"></i>
-                        <span class="text-xl font-bold text-dark">Cipher<span class="text-primary-600">Ecstasy</span></span>
-                    </div>
-                </div>
-                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
-                    <a href="#" class="text-dark hover:text-primary-600 px-3 py-2 text-sm font-medium">Home</a>
-                    <a href="#" class="text-dark hover:text-primary-600 px-3 py-2 text-sm font-medium">Features</a>
-                    <a href="#" class="text-dark hover:text-primary-600 px-3 py-2 text-sm font-medium">API</a>
-                    <a href="#" class="text-dark hover:text-primary-600 px-3 py-2 text-sm font-medium">Pricing</a>
-                    <a href="#" class="text-dark hover:text-primary-600 px-3 py-2 text-sm font-medium">Docs</a>
-                </div>
-                <div class="hidden md:ml-6 md:flex md:items-center">
-                    <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
-                        Get Started
-                    </button>
-                </div>
-                <div class="-mr-2 flex items-center md:hidden">
-                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-dark hover:text-primary-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
-                        <span class="sr-only">Open main menu</span>
-                        <i class="fas fa-bars"></i>
-                    </button>
-                </div>
             </div>
         </div>
-        <!-- Mobile menu -->
-        <div class="hidden md:hidden" id="mobile-menu">
-            <div class="pt-2 pb-3 space-y-1 sm:px-3">
-                <a href="#" class="block px-3 py-2 text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Home</a>
-                <a href="#" class="block px-3 py-2 text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Features</a>
-                <a href="#" class="block px-3 py-2 text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">API</a>
-                <a href="#" class="block px-3 py-2 text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Pricing</a>
-                <a href="#" class="block px-3 py-2 text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Docs</a>
-                <div class="mt-4">
-                    <button class="block w-full px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
-                        Get Started
-                    </button>
-                </div>
-            </div>
         </div>
-    </nav>
-    <!-- Hero Section -->
-    <div class="gradient-bg">
-        <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
-            <div class="text-center">
-                <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
-                    <span class="block">Next-Gen Data Encryption</span>
-                    <span class="block text-primary-200">For the Modern Web</span>
-                </h1>
-                <p class="mt-6 max-w-lg mx-auto text-xl text-primary-100">
-                    CipherEcstasy provides military-grade encryption with an intuitive API and real-time data protection.
-                </p>
-                <div class="mt-10 flex justify-center space-x-4">
-                    <button class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 transition-all duration-300 hover:shadow-lg">
-                        Explore API
-                    </button>
-                    <button class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-700 hover:bg-primary-800 md:py-4 md:text-lg md:px-10 transition-all duration-300 hover:shadow-lg">
-                        Live Demo
-                    </button>
-                </div>
-            </div>
-        </div>
     </div>
-    <!-- Features Section -->
-    <div class="py-16 bg-white overflow-hidden">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center">
-                <h2 class="text-3xl font-extrabold tracking-tight text-dark sm:text-4xl">
-                    Powerful Encryption Features
-                </h2>
-                <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
-                    Built with modern cryptography standards and developer experience in mind.
-                </p>
-            </div>
-            <div class="mt-20 grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
-                <!-- Feature 1 -->
-                <div class="relative">
-                    <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
-                        <i class="fas fa-shield-alt text-xl"></i>
-                    </div>
-                    <div class="ml-16">
-                        <h3 class="text-lg font-medium text-dark">AES-256 Encryption</h3>
-                        <p class="mt-2 text-base text-gray-500">
-                            Industry-standard encryption algorithm with 256-bit keys for maximum security.
-                        </p>
-                    </div>
-                </div>
-                <!-- Feature 2 -->
-                <div class="relative">
-                    <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-500 text-white">
-                        <i class="fas fa-bolt text-xl"></i>
-                    </div>
-                    <div class="ml-16">
-                        <h3 class="text-lg font-medium text-dark">Real-time Processing</h3>
-                        <p class="mt-2 text-base text-gray-500">
-                            Encrypt and decrypt data in real-time with our low-latency API endpoints.
-                        </p>
-                    </div>
-                </div>
-                <!-- Feature 3 -->
-                <div class="relative">
-                    <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-600 text-white">
-                        <i class="fas fa-code text-xl"></i>
-                    </div>
-                    <div class="ml-16">
-                        <h3 class="text-lg font-medium text-dark">Developer Friendly</h3>
-                        <p class="mt-2 text-base text-gray-500">
-                            Clean REST API with TypeScript support and comprehensive documentation.
-                        </p>
-                    </div>
-                </div>
-                <!-- Feature 4 -->
-                <div class="relative">
-                    <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-600 text-white">
-                        <i class="fas fa-cloud text-xl"></i>
-                    </div>
-                    <div class="ml-16">
-                        <h3 class="text-lg font-medium text-dark">Cloud Ready</h3>
-                        <p class="mt-2 text-base text-gray-500">
-                            Deploy anywhere with Docker containers and Kubernetes support.
-                        </p>
-                    </div>
-                </div>
-                <!-- Feature 5 -->
-                <div class="relative">
-                    <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-700 text-white">
-                        <i class="fas fa-key text-xl"></i>
-                    </div>
-                    <div class="ml-16">
-                        <h3 class="text-lg font-medium text-dark">Key Management</h3>
-                        <p class="mt-2 text-base text-gray-500">
-                            Secure key storage and rotation policies built into the platform.
-                        </p>
-                    </div>
-                </div>
-                <!-- Feature 6 -->
-                <div class="relative">
-                    <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-700 text-white">
-                        <i class="fas fa-chart-line text-xl"></i>
-                    </div>
-                    <div class="ml-16">
-                        <h3 class="text-lg font-medium text-dark">Usage Analytics</h3>
-                        <p class="mt-2 text-base text-gray-500">
-                            Monitor encryption operations with detailed metrics and logs.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Encryption Demo -->
-    <div class="py-16 bg-gray-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:text-center">
-                <h2 class="text-3xl font-extrabold tracking-tight text-dark sm:text-4xl">
-                    Try It Out
-                </h2>
-                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
-                    See CipherEcstasy in action with our interactive demo.
-                </p>
-            </div>
-            <div class="mt-12 grid grid-cols-1 gap-8 lg:grid-cols-2">
-                <!-- Input Card -->
-                <div class="bg-white overflow-hidden shadow rounded-lg">
-                    <div class="px-4 py-5 sm:p-6">
-                        <div class="flex items-center">
-                            <div class="flex-shrink-0 bg-primary-500 rounded-md p-3">
-                                <i class="fas fa-keyboard text-white text-xl"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg leading-6 font-medium text-dark">Input Text</h3>
-                                <p class="mt-1 text-sm text-gray-500">Enter the text you want to encrypt or decrypt</p>
-                            </div>
-                        </div>
-                        <div class="mt-6">
-                            <textarea id="input-text" rows="6" class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md p-4 border" placeholder="Enter your sensitive data here..."></textarea>
-                        </div>
-                        <div class="mt-4 flex items-center">
-                            <input id="encryption-key" type="text" class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" placeholder="Encryption key (leave blank for demo key)">
-                            <button id="generate-key" class="ml-2 inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
-                                <i class="fas fa-random mr-1"></i> Generate
-                            </button>
-                        </div>
-                    </div>
-                    <div class="px-4 py-4 bg-gray-50 flex justify-between">
-                        <button id="encrypt-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
-                            <i class="fas fa-lock mr-2"></i> Encrypt
-                        </button>
-                        <button id="decrypt-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-secondary-600 hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500">
-                            <i class="fas fa-lock-open mr-2"></i> Decrypt
-                        </button>
-                        <button id="clear-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                            <i class="fas fa-trash-alt mr-2"></i> Clear
-                        </button>
-                    </div>
-                </div>
-                <!-- Output Card -->
-                <div class="bg-white overflow-hidden shadow rounded-lg">
-                    <div class="px-4 py-5 sm:p-6">
-                        <div class="flex items-center">
-                            <div class="flex-shrink-0 bg-secondary-500 rounded-md p-3">
-                                <i class="fas fa-file-code text-white text-xl"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg leading-6 font-medium text-dark">Output</h3>
-                                <p class="mt-1 text-sm text-gray-500">Your encrypted or decrypted data will appear here</p>
-                            </div>
-                        </div>
-                        <div class="mt-6">
-                            <div id="output-text" class="min-h-[150px] bg-gray-100 rounded-md p-4 font-mono text-sm overflow-auto">
-                                <p class="text-gray-500 italic">Results will appear here after encryption/decryption</p>
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <div class="flex items-center">
-                                <span class="text-sm font-medium text-gray-700 mr-2">Format:</span>
-                                <select id="output-format" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
-                                    <option>Base64</option>
-                                    <option>Hex</option>
-                                    <option>UTF-8</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="px-4 py-4 bg-gray-50 flex justify-between">
-                        <button id="copy-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                            <i class="fas fa-copy mr-2"></i> Copy
-                        </button>
-                        <button id="download-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                            <i class="fas fa-download mr-2"></i> Download
-                        </button>
-                        <button id="api-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
-                            <i class="fas fa-code mr-2"></i> API Request
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- API Section -->
-    <div class="py-16 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:text-center">
-                <h2 class="text-3xl font-extrabold tracking-tight text-dark sm:text-4xl">
-                    REST API Integration
-                </h2>
-                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
-                    Simple endpoints for seamless integration with your applications.
-                </p>
-            </div>
-            <div class="mt-12">
-                <div class="bg-gray-800 rounded-lg overflow-hidden">
-                    <div class="px-6 py-4 bg-gray-900 flex items-center">
-                        <div class="flex space-x-2">
-                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                        </div>
-                        <div class="ml-4 text-sm font-mono text-gray-300">api.cipherecstasy.com/v1/encrypt</div>
-                    </div>
-                    <div class="px-6 py-4">
-                        <div class="flex space-x-4">
-                            <div class="w-1/2">
-                                <div class="text-sm font-medium text-gray-300 mb-2">Request</div>
-                                <pre class="bg-gray-900 rounded p-4 text-gray-300 text-sm font-mono overflow-x-auto">
-<span class="text-purple-300">POST</span> /v1/encrypt HTTP/1.1
-Host: api.cipherecstasy.com
-Content-Type: application/json
-Authorization: Bearer your_api_key_here
-{
-  "data": "Sensitive information to encrypt",
-  "key": "optional-encryption-key",
-  "algorithm": "aes-256-cbc"
-}</pre>
-                            </div>
-                            <div class="w-1/2">
-                                <div class="text-sm font-medium text-gray-300 mb-2">Response</div>
-                                <pre class="bg-gray-900 rounded p-4 text-gray-300 text-sm font-mono overflow-x-auto">
-HTTP/1.1 200 OK
-Content-Type: application/json
-{
-  "success": true,
-  "data": "U2FsdGVkX1+3C9J4j6X5T8v7z1wYQ5uO7bKpZaGxLmE=",
-  "iv": "a1b2c3d4e5f6g7h8",
-  "timestamp": 1689876543,
-  "algorithm": "aes-256-cbc"
-}</pre>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                    <div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
-                        <div class="px-4 py-5 sm:p-6">
-                            <h3 class="text-lg font-medium text-dark">Encryption</h3>
-                            <p class="mt-2 text-sm text-gray-500">
-                                Secure your data with industry-standard encryption algorithms.
-                            </p>
-                            <div class="mt-4">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
-                                    POST /v1/encrypt
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
-                        <div class="px-4 py-5 sm:p-6">
-                            <h3 class="text-lg font-medium text-dark">Decryption</h3>
-                            <p class="mt-2 text-sm text-gray-500">
-                                Retrieve your original data with the correct encryption key.
-                            </p>
-                            <div class="mt-4">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800">
-                                    POST /v1/decrypt
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
-                        <div class="px-4 py-5 sm:p-6">
-                            <h3 class="text-lg font-medium text-dark">Key Generation</h3>
-                            <p class="mt-2 text-sm text-gray-500">
-                                Generate secure encryption keys for your applications.
-                            </p>
-                            <div class="mt-4">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                                    GET /v1/generate-key
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Stats Section -->
-    <div class="gradient-bg">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
-            <div class="max-w-4xl mx-auto text-center">
-                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-                    Trusted by developers worldwide
-                </h2>
-                <p class="mt-3 text-xl text-primary-200">
-                    Join thousands of developers securing their applications with CipherEcstasy.
-                </p>
-            </div>
-            <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-                <div class="bg-white bg-opacity-10 rounded-lg px-6 py-8 backdrop-filter backdrop-blur-sm">
-                    <div class="text-5xl font-bold text-white">4.8M+</div>
-                    <div class="mt-2 text-base text-primary-200">API Calls Daily</div>
-                </div>
-                <div class="bg-white bg-opacity-10 rounded-lg px-6 py-8 backdrop-filter backdrop-blur-sm">
-                    <div class="text-5xl font-bold text-white">98.9%</div>
-                    <div class="mt-2 text-base text-primary-200">Uptime</div>
-                </div>
-                <div class="bg-white bg-opacity-10 rounded-lg px-6 py-8 backdrop-filter backdrop-blur-sm">
-                    <div class="text-5xl font-bold text-white">15K+</div>
-                    <div class="mt-2 text-base text-primary-200">Active Developers</div>
-                </div>
-                <div class="bg-white bg-opacity-10 rounded-lg px-6 py-8 backdrop-filter backdrop-blur-sm">
-                    <div class="text-5xl font-bold text-white">&lt;50ms</div>
-                    <div class="mt-2 text-base text-primary-200">Average Latency</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- CTA Section -->
-    <div class="bg-white">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
-            <h2 class="text-3xl font-extrabold tracking-tight text-dark sm:text-4xl">
-                <span class="block">Ready to dive in?</span>
-                <span class="block text-primary-600">Start using CipherEcstasy today.</span>
-            </h2>
-            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-                <div class="inline-flex rounded-md shadow">
-                    <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700">
-                        Get started
-                    </a>
-                </div>
-                <div class="ml-3 inline-flex rounded-md shadow">
-                    <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary-600 bg-white hover:bg-gray-50">
-                        Live demo
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Footer -->
-    <footer class="bg-dark">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
-            <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-                <div>
-                    <h3 class="text-white text-lg font-semibold">CipherEcstasy</h3>
-                    <p class="mt-4 text-gray-400 text-sm">
-                        Next-generation encryption for modern web applications. Secure, fast, and developer-friendly.
-                    </p>
-                    <div class="mt-4 flex space-x-6">
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i class="fab fa-twitter"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i class="fab fa-github"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i class="fab fa-discord"></i>
-                        </a>
-                    </div>
-                </div>
-                <div>
-                    <h3 class="text-white text-lg font-semibold">Product</h3>
-                    <ul class="mt-4 space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Features</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Pricing</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-white text-lg font-semibold">Company</h3>
-                    <ul class="mt-4 space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">About</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-white text-lg font-semibold">Legal</h3>
-                    <ul class="mt-4 space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Security</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm">Compliance</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="mt-12 border-t border-gray-800 pt-8">
-                <p class="text-gray-400 text-sm text-center">
-                    &copy; 2023 CipherEcstasy. All rights reserved.
-                </p>
-            </div>
-        </div>
-    </footer>
-    <!-- API Request Modal -->
-    <div id="api-modal" class="hidden fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
-                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                    <div class="sm:flex sm:items-start">
-                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-                            <h3 class="text-lg leading-6 font-medium text-dark" id="modal-title">
-                                API Request Example
-                            </h3>
-                            <div class="mt-4">
-                                <div class="bg-gray-800 rounded-lg overflow-hidden">
-                                    <div class="px-6 py-4 bg-gray-900 flex items-center">
-                                        <div class="flex space-x-2">
-                                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                                        </div>
-                                        <div class="ml-4 text-sm font-mono text-gray-300">JavaScript Fetch Example</div>
-                                    </div>
-                                    <div class="px-6 py-4">
-                                        <pre class="bg-gray-900 rounded p-4 text-gray-300 text-sm font-mono overflow-x-auto">
-<span class="text-blue-300">const</span> <span class="text-purple-300">response</span> = <span class="text-blue-300">await</span> <span class="text-yellow-300">fetch</span>(<span class="text-green-300">'https://api.cipherecstasy.com/v1/encrypt'</span>, {
-  <span class="text-purple-300">method</span>: <span class="text-green-300">'POST'</span>,
-  <span class="text-purple-300">headers</span>: {
-    <span class="text-green-300">'Content-Type'</span>: <span class="text-green-300">'application/json'</span>,
-    <span class="text-green-300">'Authorization'</span>: <span class="text-green-300">'Bearer your_api_key_here'</span>
-  },
-  <span class="text-purple-300">body</span>: <span class="text-yellow-300">JSON</span>.<span class="text-yellow-300">stringify</span>({
-    <span class="text-green-300">data</span>: <span class="text-green-300">'Sensitive information to encrypt'</span>,
-    <span class="text-green-300">key</span>: <span class="text-green-300">'optional-encryption-key'</span>,
-    <span class="text-green-300">algorithm</span>: <span class="text-green-300">'aes-256-cbc'</span>
-  })
-});
-<span class="text-blue-300">const</span> <span class="text-purple-300">result</span> = <span class="text-blue-300">await</span> <span class="text-purple-300">response</span>.<span class="text-yellow-300">json</span>();
-<span class="text-yellow-300">console</span>.<span class="text-yellow-300">log</span>(<span class="text-purple-300">result</span>);</pre>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                    <button type="button" id="close-modal" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                        Close
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Mobile menu toggle
-        document.getElementById('mobile-menu-button').addEventListener('click', function() {
-            const menu = document.getElementById('mobile-menu');
-            menu.classList.toggle('hidden');
-        });
-        // Demo encryption functionality
-        document.getElementById('encrypt-btn').addEventListener('click', function() {
-            const inputText = document.getElementById('input-text').value;
-            const key = document.getElementById('encryption-key').value || 'demo-key-12345';
-            if (!inputText) {
-                alert('Please enter some text to encrypt');
-                return;
             }
-            // Simulate encryption (in a real app, this would call the API)
-            document.getElementById('output-text').innerHTML = `
-                <div class="flex items-center justify-between">
-                    <span class="font-semibold text-green-600">Encrypted Successfully</span>
-                    <span class="text-xs text-gray-500">AES-256-CBC</span>
-                </div>
-                <div class="mt-2 bg-gray-200 p-2 rounded text-gray-800 overflow-x-auto">
-                    ${btoa(`ENCRYPTED:${inputText}:WITH_KEY:${key}`)}
-                </div>
-                <div class="mt-2 text-xs text-gray-500">
-                    <span class="font-semibold">IV:</span> a1b2c3d4e5f6g7h8
-                </div>
-            `;
-        });
-        // Demo decryption functionality
-        document.getElementById('decrypt-btn').addEventListener('click', function() {
-            const inputText = document.getElementById('input-text').value;
-            const key = document.getElementById('encryption-key').value || 'demo-key-12345';
-            if (!inputText) {
-                alert('Please enter some encrypted text to decrypt');
-                return;
-            }
-            // Simulate decryption (in a real app, this would call the API)
-            try {
-                const decoded = atob(inputText);
-                if (decoded.startsWith('ENCRYPTED:') && decoded.includes(':WITH_KEY:')) {
-                    const parts = decoded.split(':WITH_KEY:');
-                    if (parts[1] === key) {
-                        const originalText = parts[0].replace('ENCRYPTED:', '');
-                        document.getElementById('output-text').innerHTML = `
-                            <div class="flex items-center justify-between">
-                                <span class="font-semibold text-green-600">Decrypted Successfully</span>
-                                <span class="text-xs text-gray-500">AES-256-CBC</span>
-                            </div>
-                            <div class="mt-2 bg-gray-200 p-2 rounded text-gray-800">
-                                ${originalText}
-                            </div>
-                        `;
-                    } else {
-                        throw new Error('Invalid key');
-                    }
-                } else {
-                    throw new Error('Invalid format');
-                }
-            } catch (e) {
-                document.getElementById('output-text').innerHTML = `
-                    <div class="flex items-center justify-between">
-                        <span class="font-semibold text-red-600">Decryption Failed</span>
-                        <span class="text-xs text-gray-500">AES-256-CBC</span>
-                    </div>
-                    <div class="mt-2 bg-red-100 p-2 rounded text-red-800">
-                        Error: ${e.message || 'Invalid encrypted data'}
-                    </div>
-                `;
-            }
-        });
-        // Generate random key
-        document.getElementById('generate-key').addEventListener('click', function() {
-            const randomKey = Array.from({length: 32}, () =>
-                Math.floor(Math.random() * 16).toString(16)
-            ).join('');
-            document.getElementById('encryption-key').value = randomKey;
-        });
-        // Clear inputs
-        document.getElementById('clear-btn').addEventListener('click', function() {
-            document.getElementById('input-text').value = '';
-            document.getElementById('encryption-key').value = '';
-            document.getElementById('output-text').innerHTML = '<p class="text-gray-500 italic">Results will appear here after encryption/decryption</p>';
-        });
-        // Copy output
-        document.getElementById('copy-btn').addEventListener('click', function() {
-            const outputText = document.getElementById('output-text').textContent;
-            if (outputText.includes('Results will appear here')) {
-                alert('Nothing to copy');
-                return;
-            }
-            navigator.clipboard.writeText(outputText).then(function() {
-                const btn = document.getElementById('copy-btn');
-                const originalHtml = btn.innerHTML;
-                btn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
-                setTimeout(function() {
-                    btn.innerHTML = originalHtml;
-                }, 2000);
-            });
-        });
-        // Download output
-        document.getElementById('download-btn').addEventListener('click', function() {
-            const outputText = document.getElementById('output-text').textContent;
-            if (outputText.includes('Results will appear here')) {
-                alert('Nothing to download');
-                return;
-            }
-            const blob = new Blob([outputText], {type: 'text/plain'});
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'cipherecstasy-output.txt';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        });
-        // Show API modal
-        document.getElementById('api-btn').addEventListener('click', function() {
-            document.getElementById('api-modal').classList.remove('hidden');
-        });
-        // Close API modal
-        document.getElementById('close-modal').addEventListener('click', function() {
-            document.getElementById('api-modal').classList.add('hidden');
         });
     </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=Boobs00/cipherecstasy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CipherEcstasy - Algorithmic Ecstasy</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>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
         body {
             font-family: 'Inter', sans-serif;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            background-color: #0f0f1a;
+            color: #e0e0ff;
         }
+        .hero-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
+        .grid-bg {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background:
+                linear-gradient(rgba(15, 15, 26, 0.9), rgba(15, 15, 26, 0.9)),
+                url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h40v40H0z" fill="none"/><path d="M20 0v40M0 20h40" stroke="%23444" stroke-width="0.5"/></svg>');
+            z-index: 1;
         }
+        .electric-current {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M-100,50 Q50,150 200,50 T500,50 T800,50 T1100,50" stroke="%2338bdf8" fill="none" stroke-width="2" opacity="0.3"/><path d="M-200,100 Q50,200 300,100 T700,100 T1100,100 T1500,100" stroke="%238b5cf6" fill="none" stroke-width="2" opacity="0.3"/></svg>');
+            z-index: 2;
+            animation: electricFlow 15s linear infinite;
+        }
+        @keyframes electricFlow {
+            0% { transform: translateX(-10%); }
+            100% { transform: translateX(10%); }
+        }
+        .pulse-glow {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, rgba(56, 189, 248, 0.15) 0%, rgba(15, 15, 26, 0) 70%);
+            z-index: 3;
+            animation: pulseGlow 6s ease-in-out infinite;
+        }
+        @keyframes pulseGlow {
+            0% { opacity: 0.3; transform: scale(0.8); }
+            50% { opacity: 0.8; transform: scale(1.1); }
+            100% { opacity: 0.3; transform: scale(0.8); }
         }
+        .neon-text {
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            text-align: center;
+            color: transparent;
+            background: linear-gradient(90deg, #38bdf8, #8b5cf6, #38bdf8);
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            background-clip: text;
+            text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
+            animation: shine 3s linear infinite, fadePulse 6s ease-in-out infinite;
+            z-index: 4;
+            position: relative;
         }
+        @keyframes shine {
+            to {
+                background-position: 200% center;
+            }
+        }
+        @keyframes fadePulse {
+            0% { opacity: 0.7; transform: scale(0.95); }
+            50% { opacity: 1; transform: scale(1.05); }
+            100% { opacity: 0.7; transform: scale(0.95); }
+        }
+        .electric-node {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background: #38bdf8;
+            border-radius: 50%;
+            box-shadow: 0 0 10px 2px #38bdf8;
+            z-index: 2;
+            animation: nodePulse 2s infinite alternate;
+        }
+        @keyframes nodePulse {
+            0% { transform: scale(1); opacity: 0.7; }
+            100% { transform: scale(1.5); opacity: 0.3; }
         }
+        .electric-arc {
+            position: absolute;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
+            z-index: 2;
+            animation: arcFlicker 0.5s infinite alternate;
         }
+        @keyframes arcFlicker {
+            0% { opacity: 0.3; }
+            100% { opacity: 0.8; }
+        }
+        .scroll-indicator {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 5;
+            color: rgba(224, 224, 255, 0.7);
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
+            40% { transform: translateY(-20px) translateX(-50%); }
+            60% { transform: translateY(-10px) translateX(-50%); }
         }
     </style>
 </head>
+<body>
+    <!-- Full-screen Hero Section -->
+    <div class="hero-container">
+        <!-- Dark grid background -->
+        <div class="grid-bg"></div>
+        <!-- Animated electric currents -->
+        <div class="electric-current"></div>
+        <!-- Pulsating glow effect -->
+        <div class="pulse-glow"></div>
+        <!-- Neon text overlay -->
+        <div class="neon-text px-4">
+            <div class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-4">Welcome to</div>
+            <div class="text-6xl sm:text-7xl md:text-8xl lg:text-9xl">Algorithmic Ecstasy</div>
+            <div class="mt-8 text-lg sm:text-xl md:text-2xl font-light" style="font-family: 'Inter', sans-serif;">
+                Experience the thrill of perfect encryption
             </div>
         </div>
+        <!-- Random electric nodes -->
+        <div id="electric-nodes"></div>
+        <!-- Scroll indicator -->
+        <div class="scroll-indicator">
+            <i class="fas fa-chevron-down text-2xl"></i>
         </div>
+    </div>
+    <!-- Rest of your content would go here -->
+    <div class="min-h-screen bg-dark text-white p-8">
+        <!-- Your existing sections would be placed here -->
+        <h2 class="text-3xl font-bold mb-4">Continue your journey...</h2>
+        <p>This is where the rest of your content would appear when users scroll down.</p>
     </div>
+    <script>
+        // Create random electric nodes and arcs
+        function createElectricElements() {
+            const container = document.getElementById('electric-nodes');
+            const nodeCount = 20;
+            for (let i = 0; i < nodeCount; i++) {
+                // Create node
+                const node = document.createElement('div');
+                node.className = 'electric-node';
+                // Random position
+                const left = Math.random() * 100;
+                const top = Math.random() * 100;
+                node.style.left = `${left}%`;
+                node.style.top = `${top}%`;
+                // Random delay for animation
+                node.style.animationDelay = `${Math.random() * 2}s`;
+                container.appendChild(node);
+                // Create arcs between some nodes
+                if (i > 0 && Math.random() > 0.7) {
+                    const prevNode = container.children[i-1];
+                    createArc(prevNode, node);
+                }
             }
+        }
+        function createArc(node1, node2) {
+            const container = document.getElementById('electric-nodes');
+            const arc = document.createElement('div');
+            arc.className = 'electric-arc';
+            // Get positions
+            const rect1 = node1.getBoundingClientRect();
+            const rect2 = node2.getBoundingClientRect();
+            // Calculate distance and angle
+            const dx = rect2.left - rect1.left;
+            const dy = rect2.top - rect1.top;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+            // Position the arc
+            arc.style.width = `${distance}px`;
+            arc.style.left = `${rect1.left + rect1.width/2}px`;
+            arc.style.top = `${rect1.top + rect1.height/2}px`;
+            arc.style.transform = `rotate(${angle}deg)`;
+            arc.style.transformOrigin = '0 0';
+            // Random animation properties
+            arc.style.animationDuration = `${0.3 + Math.random() * 0.7}s`;
+            arc.style.animationDelay = `${Math.random() * 2}s`;
+            container.appendChild(arc);
+        }
+        // Initialize on load
+        window.addEventListener('load', () => {
+            createElectricElements();
+            // Recreate elements periodically for variety
+            setInterval(() => {
+                document.getElementById('electric-nodes').innerHTML = '';
+                createElectricElements();
+            }, 10000);
         });
     </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=Boobs00/cipherecstasy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Deepsite, generate a full‑stack web application scaffold using Next.js for the frontend and Node.js/Express for the backend. - Include TypeScript, tailwind.css, and a REST API endpoint for real‑time data. - Name the project “CipherEcstasy.”


1	+ Deepsite, generate a full‑stack web application scaffold using Next.js for the frontend and Node.js/Express for the backend. - Include TypeScript, tailwind.css, and a REST API endpoint for real‑time data. - Name the project “CipherEcstasy.”
2	+ Refine the landing page: - Create a full‑screen hero with animated “electric currents” flowing across a dark grid background. - Implement a pulsating glow effect that mimics waves of tingling warmth radiating from the center. - Overlay the text “Welcome to Algorithmic Ecstasy” in neon gradient, fading in sync with the pulse.