Spaces:

Boobs00
/

cipherecstasy

Running

App Files Files Community

Boobs00 commited on Apr 19, 2025

Commit

1d0c7e9

verified ·

1 Parent(s): 28cfaed

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +761 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

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

index.html CHANGED Viewed

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

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>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>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


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.”