Spaces:

Boobs00
/

cipherecstasy

Running

App Files Files Community

Boobs00 commited on Apr 19, 2025

Commit

b71c87f

verified ·

1 Parent(s): 6857c5a

Add 2 files

Browse files

Files changed (2) hide show

index.html +191 -679
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,9 +3,22 @@
 <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');
@@ -25,258 +38,70 @@
             color: #e0e0ff;
         }
-        /* ... (keep all previous CSS styles) ... */
-        /* New styles for auth modal */
-        .auth-modal {
             position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(15, 15, 26, 0.9);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
-            backdrop-filter: blur(5px);
-        }
-        .auth-container {
-            background: linear-gradient(145deg, rgba(30, 30, 45, 0.95), rgba(20, 20, 35, 0.95));
-            border-radius: 12px;
-            padding: 40px;
-            width: 100%;
-            max-width: 400px;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(56, 189, 248, 0.3);
-            text-align: center;
-        }
-        .auth-container h2 {
-            font-family: 'Orbitron', sans-serif;
-            color: var(--cool-blue);
-            margin-bottom: 20px;
-            font-size: 1.8rem;
-        }
-        .auth-input {
-            width: 100%;
-            padding: 12px 15px;
-            margin-bottom: 20px;
-            background: rgba(15, 15, 26, 0.7);
-            border: 1px solid rgba(56, 189, 248, 0.2);
-            border-radius: 6px;
-            color: white;
-            font-size: 1rem;
-            transition: all 0.3s ease;
-        }
-        .auth-input:focus {
-            outline: none;
-            border-color: var(--warm-amber);
-            box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
-        }
-        .auth-btn {
-            background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(139, 92, 246, 0.2));
-            border: 1px solid rgba(56, 189, 248, 0.3);
-            color: var(--cool-blue);
-            padding: 12px 25px;
-            border-radius: 6px;
-            font-family: 'Orbitron', sans-serif;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            width: 100%;
-            margin-top: 10px;
-        }
-        .auth-btn:hover {
-            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(139, 92, 246, 0.2));
-            color: var(--warm-amber);
-            border-color: rgba(245, 158, 11, 0.3);
-        }
-        .magic-link-sent {
-            color: var(--cool-blue);
-            margin-top: 20px;
-            font-size: 0.9rem;
-            display: none;
-        }
-        /* Sensory journey styles */
-        .journey-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1000;
-            background: rgba(15, 15, 26, 0.8);
             border-radius: 8px;
             padding: 15px;
-            width: 300px;
             backdrop-filter: blur(5px);
-            border: 1px solid rgba(56, 189, 248, 0.2);
-            transform: translateX(calc(100% + 20px));
-            transition: transform 0.3s ease;
-        }
-        .journey-container.active {
-            transform: translateX(0);
-        }
-        .journey-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-            color: var(--warm-amber);
-            font-family: 'Orbitron', sans-serif;
         }
-        .journey-toggle {
-            background: none;
-            border: none;
-            color: var(--cool-blue);
-            cursor: pointer;
-            font-size: 1.2rem;
-        }
-        .journey-toggle:hover {
-            color: var(--warm-amber);
-        }
-        .journey-form input {
-            width: 100%;
-            padding: 10px;
             margin-bottom: 10px;
-            background: rgba(15, 15, 26, 0.7);
-            border: 1px solid rgba(56, 189, 248, 0.2);
-            border-radius: 4px;
-            color: white;
-        }
-        .journey-form button {
-            background: rgba(56, 189, 248, 0.1);
-            border: 1px solid rgba(56, 189, 248, 0.3);
             color: var(--cool-blue);
-            padding: 8px 15px;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            width: 100%;
         }
-        .journey-form button:hover {
-            background: rgba(245, 158, 11, 0.1);
-            color: var(--warm-amber);
         }
-        .journey-result {
-            margin-top: 15px;
-            padding: 10px;
-            background: rgba(15, 15, 26, 0.5);
             border-radius: 4px;
-            border-left: 3px solid var(--electric-purple);
-            display: none;
-        }
-        .journey-loading {
-            display: none;
-            text-align: center;
-            margin: 15px 0;
-            color: var(--cool-blue);
-        }
-        .journey-loading i {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* User profile indicator */
-        .user-profile {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            z-index: 1000;
-            background: rgba(15, 15, 26, 0.8);
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
             cursor: pointer;
-            border: 1px solid rgba(56, 189, 248, 0.3);
-            transition: all 0.3s ease;
-        }
-        .user-profile:hover {
-            border-color: var(--warm-amber);
-            box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
-        }
-        .user-profile i {
-            color: var(--cool-blue);
-            font-size: 1.2rem;
         }
-        .user-profile.active {
             background: rgba(56, 189, 248, 0.2);
         }
-        .user-menu {
-            position: absolute;
-            top: 70px;
-            left: 0;
-            background: rgba(15, 15, 26, 0.9);
-            border-radius: 8px;
-            padding: 15px;
-            width: 200px;
-            border: 1px solid rgba(56, 189, 248, 0.3);
-            display: none;
-            backdrop-filter: blur(5px);
-        }
-        .user-profile.active .user-menu {
-            display: block;
-        }
-        .user-menu button {
-            background: none;
-            border: none;
-            color: #e0e0ff;
-            width: 100%;
-            text-align: left;
-            padding: 8px 0;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .user-menu button:hover {
             color: var(--warm-amber);
         }
-        .user-menu button i {
-            margin-right: 8px;
-            width: 20px;
-            text-align: center;
-        }
-        .user-email {
-            font-size: 0.8rem;
-            color: var(--cool-blue);
-            margin-bottom: 10px;
-            word-break: break-all;
-        }
     </style>
 </head>
 <body>
     <!-- User Profile Indicator -->
     <div class="user-profile" id="user-profile">
         <i class="fas fa-user"></i>
@@ -324,467 +149,154 @@
         </div>
     </div>
-    <!-- ... (keep all previous HTML content) ... -->
     <script>
-        // Backend API URL (in a real app, this would be your actual backend URL)
-        const API_URL = 'https://api.cipherecstasy.example.com';
-        // Mock backend functions (in a real app, these would be actual API calls)
-        class BackendService {
-            static async sendMagicLink(email) {
-                // In a real app, this would be a fetch() call to your backend
-                console.log(`Sending magic link to ${email}`);
-                // Simulate network delay
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                // Return a mock response
-                return {
-                    success: true,
-                    message: "Magic link sent"
-                };
-            }
-            static async verifyMagicLink(token) {
-                // In a real app, this would verify the token with your backend
-                console.log(`Verifying magic link token: ${token}`);
-                // Simulate network delay
-                await new Promise(resolve => setTimeout(resolve, 800));
-                // Return a mock user
-                return {
-                    success: true,
-                    user: {
-                        id: 'user_123',
-                        email: 'user@example.com',
-                        preferences: {
-                            pulseRate: 0.5,
-                            colors: ['cool-blue', 'electric-purple'],
-                            sounds: ['hum', 'heartbeat']
-                        }
-                    }
-                };
-            }
-            static async savePreferences(userId, preferences) {
-                // In a real app, this would save to your database
-                console.log(`Saving preferences for user ${userId}:`, preferences);
-                // Simulate network delay
-                await new Promise(resolve => setTimeout(resolve, 500));
-                return {
-                    success: true
-                };
-            }
-            static async generateSensoryJourney(descriptors) {
-                // In a real app, this would call your GPT microservice
-                console.log(`Generating sensory journey for: ${descriptors}`);
-                // Simulate API delay
-                await new Promise(resolve => setTimeout(resolve, 2000));
-                // Mock GPT response
-                const responses = [
-                    {
-                        description: "A warm, pulsating experience with deep amber hues and a slow, rhythmic heartbeat. Thunder rumbles in the distance as silky textures flow across your senses.",
-                        settings: {
-                            pulseRate: 0.7,
-                            colors: ['warm-amber', 'electric-purple'],
-                            sounds: ['heartbeat', 'thunder'],
-                            intensity: 0.8
-                        }
-                    },
-                    {
-                        description: "Cool blue electric currents with rapid pulses and high-frequency hums. The sensation of silk brushing against your skin as the system synchronizes with your breath.",
-                        settings: {
-                            pulseRate: 0.9,
-                            colors: ['cool-blue', 'deep-space'],
-                            sounds: ['hum', 'heartbeat'],
-                            intensity: 0.6
-                        }
-                    },
-                    {
-                        description: "A balanced journey between warmth and coolness, with medium-paced pulses and occasional thunder strikes. The colors shift gradually from amber to purple, creating a mesmerizing effect.",
-                        settings: {
-                            pulseRate: 0.5,
-                            colors: ['warm-amber', 'electric-purple'],
-                            sounds: ['hum', 'thunder'],
-                            intensity: 0.5
-                        }
-                    }
-                ];
-                return {
-                    success: true,
-                    journey: responses[Math.floor(Math.random() * responses.length)]
-                };
-            }
         }
-        // Auth and User Management
-        class AuthManager {
-            constructor() {
-                this.currentUser = null;
-                this.initAuth();
-            }
-            initAuth() {
-                // Check for existing session (in a real app, this would check cookies/localStorage)
-                const token = this.getMagicLinkToken();
-                if (token) {
-                    this.verifyToken(token);
-                } else {
-                    this.showAuthModal();
-                }
-            }
-            getMagicLinkToken() {
-                // In a real app, this would parse the URL for a magic link token
-                const params = new URLSearchParams(window.location.search);
-                return params.get('token');
-            }
-            async verifyToken(token) {
-                try {
-                    const response = await BackendService.verifyMagicLink(token);
-                    if (response.success) {
-                        this.currentUser = response.user;
-                        this.handleAuthenticated();
-                        // Remove token from URL
-                        window.history.replaceState({}, document.title, window.location.pathname);
-                    } else {
-                        this.showAuthModal();
-                    }
-                } catch (error) {
-                    console.error("Token verification failed:", error);
-                    this.showAuthModal();
-                }
-            }
-            async sendMagicLink(email) {
-                try {
-                    const response = await BackendService.sendMagicLink(email);
-                    if (response.success) {
-                        document.getElementById('magic-link-sent').style.display = 'block';
-                        document.getElementById('auth-email').value = '';
-                        // Hide after 3 seconds
-                        setTimeout(() => {
-                            document.getElementById('magic-link-sent').style.display = 'none';
-                        }, 3000);
-                    }
-                } catch (error) {
-                    console.error("Failed to send magic link:", error);
-                    alert("Failed to send magic link. Please try again.");
-                }
-            }
-            handleAuthenticated() {
-                this.hideAuthModal();
-                this.updateUI();
-                // Initialize audio manager with user preferences
-                if (window.audioManager) {
-                    window.audioManager.updateFromPreferences(this.currentUser.preferences);
-                }
-            }
-            showAuthModal() {
-                document.getElementById('auth-modal').style.display = 'flex';
-            }
-            hideAuthModal() {
-                document.getElementById('auth-modal').style.display = 'none';
-            }
-            updateUI() {
-                if (this.currentUser) {
-                    document.getElementById('user-email').textContent = this.currentUser.email;
-                    document.getElementById('user-profile').classList.add('active');
-                } else {
-                    document.getElementById('user-email').textContent = 'Not logged in';
-                    document.getElementById('user-profile').classList.remove('active');
-                }
-            }
-            logout() {
-                this.currentUser = null;
-                this.updateUI();
-                this.showAuthModal();
-                // In a real app, you would also clear cookies/localStorage
-                console.log("User logged out");
-            }
-        }
-        // Extended Audio Manager with Preferences
-        class AudioManagerWithPreferences extends AudioManager {
-            updateFromPreferences(preferences) {
-                // Update pleasure dial based on saved preferences
-                const pleasureDial = document.getElementById('pleasure-dial');
-                const intensity = preferences.pulseRate * 100;
-                pleasureDial.value = intensity;
-                this.pleasureIntensity = preferences.pulseRate;
-                document.getElementById('pleasure-value').textContent = `${intensity}%`;
-                // Update colors
-                this.updateColorScheme(preferences.colors);
-                // Update audio toggles
-                this.updateAudioToggles(preferences.sounds);
-                // Apply all changes
-                this.updatePleasureEffects();
-            }
-            updateColorScheme(colors) {
-                // In a real app, this would update the color scheme based on preferences
-                console.log("Updating color scheme to:", colors);
-                // Example: Update CSS variables based on selected colors
-                if (colors.includes('warm-amber')) {
-                    document.documentElement.style.setProperty('--warm-amber', 'rgba(245, 158, 11, 0.8)');
-                }
-                if (colors.includes('cool-blue')) {
-                    document.documentElement.style.setProperty('--cool-blue', 'rgba(56, 189, 248, 0.8)');
-                }
-                if (colors.includes('electric-purple')) {
-                    document.documentElement.style.setProperty('--electric-purple', 'rgba(139, 92, 246, 0.8)');
-                }
-            }
-            updateAudioToggles(sounds) {
-                // Toggle audio tracks based on preferences
-                const toggles = {
-                    'hum': document.getElementById('toggle-hum'),
-                    'heartbeat': document.getElementById('toggle-heartbeat'),
-                    'thunder': document.getElementById('toggle-thunder')
-                };
-                // Reset all toggles
-                Object.values(toggles).forEach(toggle => {
-                    toggle.classList.remove('active');
-                });
-                // Activate preferred sounds
-                sounds.forEach(sound => {
-                    if (toggles[sound]) {
-                        toggles[sound].classList.add('active');
-                        // Play the audio if it's preferred
-                        const audioElement = document.getElementById(`${sound}-audio`);
-                        if (audioElement) {
-                            audioElement.play().catch(e => console.log("Audio play error:", e));
-                        }
-                    }
-                });
-            }
-            async saveCurrentPreferences() {
-                if (!window.authManager.currentUser) return;
-                const preferences = {
-                    pulseRate: this.pleasureIntensity,
-                    colors: this.getCurrentColors(),
-                    sounds: this.getActiveSounds()
-                };
-                try {
-                    await BackendService.savePreferences(
-                        window.authManager.currentUser.id,
-                        preferences
-                    );
-                    console.log("Preferences saved successfully");
-                } catch (error) {
-                    console.error("Failed to save preferences:", error);
-                }
-            }
-            getCurrentColors() {
-                // In a real app, this would detect current color scheme
-                return ['cool-blue', 'electric-purple'];
-            }
-            getActiveSounds() {
-                const activeSounds = [];
-                if (document.getElementById('toggle-hum').classList.contains('active')) {
-                    activeSounds.push('hum');
-                }
-                if (document.getElementById('toggle-heartbeat').classList.contains('active')) {
-                    activeSounds.push('heartbeat');
-                }
-                if (document.getElementById('toggle-thunder').classList.contains('active')) {
-                    activeSounds.push('thunder');
-                }
-                return activeSounds;
-            }
-        }
-        // Sensory Journey Manager
-        class SensoryJourneyManager {
-            constructor() {
-                this.initJourneyPanel();
-            }
-            initJourneyPanel() {
-                document.getElementById('show-journey').addEventListener('click', () => {
-                    this.showJourneyPanel();
-                });
-                document.getElementById('hide-journey').addEventListener('click', () => {
-                    this.hideJourneyPanel();
-                });
-                document.getElementById('generate-journey').addEventListener('click', () => {
-                    this.generateJourney();
-                });
-                document.getElementById('apply-journey').addEventListener('click', () => {
-                    this.applyJourneySettings();
-                });
-            }
-            showJourneyPanel() {
-                document.getElementById('journey-container').classList.add('active');
-                document.getElementById('user-profile').classList.remove('active');
-            }
-            hideJourneyPanel() {
-                document.getElementById('journey-container').classList.remove('active');
-            }
-            async generateJourney() {
-                const input = document.getElementById('journey-input').value.trim();
-                if (!input) {
-                    alert("Please describe your desired journey");
-                    return;
-                }
-                // Show loading state
-                document.getElementById('journey-loading').style.display = 'block';
-                document.getElementById('journey-result').style.display = 'none';
-                try {
-                    const response = await BackendService.generateSensoryJourney(input);
-                    if (response.success) {
-                        this.displayJourneyResult(response.journey);
-                    } else {
-                        alert("Failed to generate journey. Please try again.");
-                    }
-                } catch (error) {
-                    console.error("Journey generation error:", error);
-                    alert("An error occurred while generating your journey");
-                } finally {
-                    document.getElementById('journey-loading').style.display = 'none';
-                }
-            }
-            displayJourneyResult(journey) {
-                document.getElementById('journey-text').textContent = journey.description;
-                document.getElementById('journey-result').style.display = 'block';
-                // Store the settings for later application
-                this.currentJourneySettings = journey.settings;
-            }
-            applyJourneySettings() {
-                if (!this.currentJourneySettings || !window.authManager.currentUser) return;
-                // Update audio manager with journey settings
-                if (window.audioManager) {
-                    // Convert pulse rate to 0-1 scale if needed
-                    const pulseRate = this.currentJourneySettings.pulseRate;
-                    // Update UI
-                    const pleasureDial = document.getElementById('pleasure-dial');
-                    pleasureDial.value = pulseRate * 100;
-                    document.getElementById('pleasure-value').textContent = `${Math.round(pulseRate * 100)}%`;
-                    // Update audio manager
-                    window.audioManager.pleasureIntensity = pulseRate;
-                    window.audioManager.updatePleasureEffects();
-                    // Update colors
-                    window.audioManager.updateColorScheme(this.currentJourneySettings.colors);
-                    // Update sounds
-                    window.audioManager.updateAudioToggles(this.currentJourneySettings.sounds);
-                    // Save preferences if user is logged in
-                    window.audioManager.saveCurrentPreferences();
-                    // Show confirmation
-                    alert("Journey settings applied successfully!");
-                }
-            }
-        }
-        // Initialize everything when DOM is loaded
-        window.addEventListener('DOMContentLoaded', () => {
-            // Initialize auth manager
-            window.authManager = new AuthManager();
-            // Initialize audio manager with preferences support
-            window.audioManager = new AudioManagerWithPreferences();
-            // Initialize sensory journey manager
-            new SensoryJourneyManager();
-            // Set up event listeners
-            document.getElementById('send-magic-link').addEventListener('click', () => {
-                const email = document.getElementById('auth-email').value.trim();
-                if (email) {
-                    window.authManager.sendMagicLink(email);
-                } else {
-                    alert("Please enter your email address");
-                }
-            });
-            document.getElementById('logout-btn').addEventListener('click', () => {
-                window.authManager.logout();
-            });
-            // Allow Enter key to send magic link
-            document.getElementById('auth-email').addEventListener('keypress', (e) => {
-                if (e.key === 'Enter') {
-                    document.getElementById('send-magic-link').click();
-                }
-            });
-            // Create electric elements
-            createElectricElements();
-            // Initialize WebGL particle system
-            const canvas = document.getElementById('webgl-canvas');
-            if (canvas) {
-                new ParticleSystem(canvas);
-            }
-            // Recreate elements periodically for variety
-            setInterval(() => {
-                document.getElementById('electric-nodes').innerHTML = '';
-                createElectricElements();
-            }, 10000);
         });
-        // ... (keep all remaining JavaScript functions like createElectricElements, ParticleSystem, etc.) ...
     </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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#0f0f1a">
+    <meta name="description" content="Algorithmic Ecstasy - A sensory experience combining visuals, sound, and rhythm">
     <title>CipherEcstasy - Algorithmic Ecstasy</title>
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json">
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <!-- Tailwind CSS -->
     <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');
             color: #e0e0ff;
         }
+        /* ... (all previous CSS styles remain unchanged) ... */
+        /* PWA Install Prompt */
+        .pwa-install-prompt {
             position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(15, 15, 26, 0.95);
+            border: 1px solid var(--electric-purple);
             border-radius: 8px;
             padding: 15px;
+            width: 90%;
+            max-width: 400px;
+            z-index: 1001;
+            display: none;
             backdrop-filter: blur(5px);
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
         }
+        .pwa-install-prompt p {
             margin-bottom: 10px;
             color: var(--cool-blue);
         }
+        .pwa-install-buttons {
+            display: flex;
+            gap: 10px;
         }
+        .pwa-install-btn {
+            flex: 1;
+            padding: 8px;
             border-radius: 4px;
             cursor: pointer;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
+        .pwa-install-confirm {
             background: rgba(56, 189, 248, 0.2);
+            border: 1px solid var(--cool-blue);
+            color: var(--cool-blue);
         }
+        .pwa-install-cancel {
+            background: rgba(30, 30, 45, 0.8);
+            border: 1px solid var(--warm-amber);
             color: var(--warm-amber);
         }
     </style>
 </head>
 <body>
+    <!-- PWA Install Prompt -->
+    <div class="pwa-install-prompt" id="pwa-install-prompt">
+        <p>Install CipherEcstasy for full immersive experience?</p>
+        <div class="pwa-install-buttons">
+            <button class="pwa-install-btn pwa-install-confirm" id="pwa-install-confirm">Install</button>
+            <button class="pwa-install-btn pwa-install-cancel" id="pwa-install-cancel">Later</button>
+        </div>
+    </div>
     <!-- User Profile Indicator -->
     <div class="user-profile" id="user-profile">
         <i class="fas fa-user"></i>
         </div>
     </div>
+    <!-- Main Content (keep all your existing content) -->
+    <div class="container mx-auto px-4 py-12">
+        <!-- ... (your existing content remains unchanged) ... -->
+    </div>
+    <!-- Service Worker Registration -->
     <script>
+        // Register Service Worker for PWA
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(registration => {
+                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                    })
+                    .catch(err => {
+                        console.log('ServiceWorker registration failed: ', err);
+                    });
+            });
         }
+        // PWA Install Prompt Logic
+        let deferredPrompt;
+        const pwaInstallPrompt = document.getElementById('pwa-install-prompt');
+        const pwaInstallConfirm = document.getElementById('pwa-install-confirm');
+        const pwaInstallCancel = document.getElementById('pwa-install-cancel');
+        window.addEventListener('beforeinstallprompt', (e) => {
+            // Prevent the mini-infobar from appearing on mobile
+            e.preventDefault();
+            // Stash the event so it can be triggered later
+            deferredPrompt = e;
+            // Show our custom install prompt
+            pwaInstallPrompt.style.display = 'block';
+        });
+        pwaInstallConfirm.addEventListener('click', async () => {
+            if (!deferredPrompt) return;
+            // Show the install prompt
+            deferredPrompt.prompt();
+            // Wait for the user to respond to the prompt
+            const { outcome } = await deferredPrompt.userChoice;
+            // Hide our custom prompt
+            pwaInstallPrompt.style.display = 'none';
+            // We've used the prompt, and can't use it again
+            deferredPrompt = null;
+        });
+        pwaInstallCancel.addEventListener('click', () => {
+            pwaInstallPrompt.style.display = 'none';
+        });
+        // Track PWA installation
+        window.addEventListener('appinstalled', () => {
+            console.log('PWA was installed');
+            pwaInstallPrompt.style.display = 'none';
+            deferredPrompt = null;
         });
+        // Check if running as PWA
+        function isRunningAsPWA() {
+            return window.matchMedia('(display-mode: standalone)').matches ||
+                   window.navigator.standalone ||
+                   document.referrer.includes('android-app://');
+        }
+        // All previous JavaScript remains unchanged
+        // ... (keep all your existing JavaScript code) ...
     </script>
+    <!-- Docker and Kubernetes deployment instructions (commented out in HTML) -->
+    <!--
+        Dockerfile:
+        ===========
+        # Use Node.js as base image
+        FROM node:18-alpine as builder
+        # Create app directory
+        WORKDIR /app
+        # Install dependencies
+        COPY package*.json ./
+        RUN npm install
+        # Bundle app source
+        COPY . .
+        # Build the app
+        RUN npm run build
+        # Production stage
+        FROM nginx:alpine
+        COPY --from=builder /app/dist /usr/share/nginx/html
+        COPY nginx.conf /etc/nginx/nginx.conf
+        EXPOSE 80
+        CMD ["nginx", "-g", "daemon off;"]
+        Kubernetes Deployment (deployment.yaml):
+        =======================================
+        apiVersion: apps/v1
+        kind: Deployment
+        metadata:
+          name: cipherecstasy
+          labels:
+            app: cipherecstasy
+        spec:
+          replicas: 3
+          selector:
+            matchLabels:
+              app: cipherecstasy
+          template:
+            metadata:
+              labels:
+                app: cipherecstasy
+            spec:
+              containers:
+              - name: cipherecstasy
+                image: your-registry/cipherecstasy:latest
+                ports:
+                - containerPort: 80
+                resources:
+                  requests:
+                    cpu: "100m"
+                    memory: "128Mi"
+                  limits:
+                    cpu: "500m"
+                    memory: "512Mi"
+              restartPolicy: Always
+        ---
+        apiVersion: v1
+        kind: Service
+        metadata:
+          name: cipherecstasy-service
+        spec:
+          selector:
+            app: cipherecstasy
+          ports:
+            - protocol: TCP
+              port: 80
+              targetPort: 80
+          type: LoadBalancer
+    -->
 <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 CHANGED Viewed

@@ -4,4 +4,5 @@ Enhance CSS interactions:   - On hover, elements should shift between cool blues
 Add a background canvas:   - Render kaleidoscopic bursts of color and silent fireworks on a WebGL canvas behind the UI.   - Synchronize patterns with user scroll and cursor movement—each pulse triggering a new bloom.   - Ensure smooth 60 fps animation and fallback to CSS keyframes on low‑power devices.
 Integrate audio assets:   - Embed a looping ambient “electric hum” track.   - Layer in heartbeat thumps and distant thunder hits that crescendo on user interaction.   - Expose volume controls and allow users to toggle individual stems (hum, heartbeat, thunder).
 Build interactive modules:   - Create a “Pleasure Dial” slider that amplifies pulse speed, color intensity, and audio volume simultaneously.   - Add haptic feedback support for compatible devices—vibrations pulsing in time with the dial.   - Log each interaction server‑side to drive future personalization.
-Wire up the backend:   - Use a simple user login (email + magic link) and store preferences for pulse rate, colors, and sounds.   - Generate personalized “sensory journeys” using a small GPT‑powered microservice: provide seed descriptors (“warmth,” “thunder,” “silk”) and return custom animations and text overlays.

 Add a background canvas:   - Render kaleidoscopic bursts of color and silent fireworks on a WebGL canvas behind the UI.   - Synchronize patterns with user scroll and cursor movement—each pulse triggering a new bloom.   - Ensure smooth 60 fps animation and fallback to CSS keyframes on low‑power devices.
 Integrate audio assets:   - Embed a looping ambient “electric hum” track.   - Layer in heartbeat thumps and distant thunder hits that crescendo on user interaction.   - Expose volume controls and allow users to toggle individual stems (hum, heartbeat, thunder).
 Build interactive modules:   - Create a “Pleasure Dial” slider that amplifies pulse speed, color intensity, and audio volume simultaneously.   - Add haptic feedback support for compatible devices—vibrations pulsing in time with the dial.   - Log each interaction server‑side to drive future personalization.
+Wire up the backend:   - Use a simple user login (email + magic link) and store preferences for pulse rate, colors, and sounds.   - Generate personalized “sensory journeys” using a small GPT‑powered microservice: provide seed descriptors (“warmth,” “thunder,” “silk”) and return custom animations and text overlays.
+Finalize and deploy:   - Configure Vercel or Netlify for CI/CD.   - Enable PWA features: offline cache, “Add to Home Screen,” and a custom splash screen.   - Write Dockerfile and Kubernetes manifest for scalable container deployment.