divine animated magic psychedelic hallucination visual optical illusion website

README.md

@@ -1,10 +1,13 @@
 ---
-title: Psychedelic Visionarium
-emoji: 🐠
-colorFrom: indigo
-colorTo: purple
+title: Psychedelic Visionarium ✨
+colorFrom: blue
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,113 @@
+class PsychedelicFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: rgba(0, 0, 0, 0.9);
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    padding: 3rem 2rem;
+                    margin-top: 4rem;
+                }
+                
+                .footer-content {
+                    max-width: 7xl;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 3rem;
+                }
+                
+                .footer-section h3 {
+                    font-family: 'Orbitron', monospace;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                    background: linear-gradient(45deg, #ff00ff, #00ffff);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .footer-link {
+                    color: rgba(255, 255, 255, 0.7);
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .footer-link:hover {
+                    color: #ff00ff;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-link {
+                    color: rgba(255, 255, 255, 0.7);
+                    transition: color 0.3s ease;
+                }
+                
+                .social-link:hover {
+                    color: #ff00ff;
+                }
+                
+                .footer-bottom {
+                    max-width: 7xl;
+                    margin: 2rem auto 0;
+                    padding-top: 2rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    text-align: center;
+                    color: rgba(255, 255, 255, 0.5);
+                }
+                
+                @media (max-width: 768px) {
+                    footer {
+                        padding: 2rem 1rem;
+                    }
+                }
+            </style>
+            <footer>
+                <div class="footer-content">
+                    <div class="footer-section">
+                        <h3>Psychedelic Visionarium</h3>
+                        <p class="text-white/70">Exploring the boundaries of perception through divine animated magic and optical illusions.</p>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Quick Links</h3>
+                        <div class="footer-links">
+                            <a href="index.html" class="footer-link">Home</a>
+                            <a href="gallery.html" class="footer-link">Gallery</a>
+                            <a href="create.html" class="footer-link">Create</a>
+                            <a href="about.html" class="footer-link">About</a>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Connect</h3>
+                        <div class="social-links">
+                            <a href="#" class="social-link"><i data-feather="instagram"></i></a>
+                            <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+                            <a href="#" class="social-link"><i data-feather="github"></i></a>
+                            <a href="#" class="social-link"><i data-feather="youtube"></i></a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="footer-bottom">
+                    <p>&copy; 2024 Psychedelic Visionarium. All realities reserved. ✨</p>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('psychedelic-footer', PsychedelicFooter);

components/navbar.js

@@ -0,0 +1,134 @@
+class PsychedelicNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    width: 100%;
+                    z-index: 1000;
+                }
+                
+                nav {
+                    background: rgba(0, 0, 0, 0.8);
+                    backdrop-filter: blur(20px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                    padding: 1rem 2rem;
+                }
+                
+                .nav-content {
+                    max-width: 7xl;
+                    margin: 0 auto;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    font-family: 'Orbitron', monospace;
+                    font-weight: 900;
+                    font-size: 1.5rem;
+                    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: white;
+                    text-decoration: none;
+                    font-weight: 500;
+                    position: relative;
+                    transition: all 0.3s ease;
+                }
+                
+                .nav-link:hover {
+                    color: #ff00ff;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -5px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background: linear-gradient(45deg, #ff00ff, #00ffff);
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    nav {
+                        padding: 1rem;
+                    }
+                    
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                    
+                    .nav-links {
+                        display: none;
+                        position: absolute;
+                        top: 100%;
+                        left: 0;
+                        width: 100%;
+                        background: rgba(0, 0, 0, 0.9);
+                        flex-direction: column;
+                        padding: 1rem;
+                        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                    }
+                    
+                    .nav-links.active {
+                        display: flex;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="nav-content">
+                    <a href="index.html" class="logo">PSYCHEDELIC ✨</a>
+                    
+                    <button class="mobile-menu-btn">
+                        <i data-feather="menu"></i>
+                    </button>
+                    
+                    <div class="nav-links">
+                        <a href="index.html" class="nav-link">Home</a>
+                        <a href="gallery.html" class="nav-link">Gallery</a>
+                        <a href="create.html" class="nav-link">Create</a>
+                        <a href="about.html" class="nav-link">About</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+        
+        // Add mobile menu functionality
+        const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+        const navLinks = this.shadowRoot.querySelector('.nav-links');
+        
+        menuBtn.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+    }
+}
+
+customElements.define('psychedelic-navbar', PsychedelicNavbar);

index.html

@@ -1,19 +1,67 @@
-<!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>Psychedelic Visionarium ✨</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-black overflow-x-hidden">
+    <psychedelic-navbar></psychedelic-navbar>
+    
+    <main>
+        <!-- Hero Section -->
+        <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 psychedelic-bg"></div>
+            <div class="relative z-10 text-center px-4">
+                <h1 class="text-6xl md:text-8xl font-bold mb-6 psychedelic-text animate-pulse">
+                    PSYCHEDELIC<br>VISIONARIUM
+                </h1>
+                <p class="text-xl md:text-2xl mb-8 text-white/80 font-light">
+                    Where reality melts into divine animated magic
+                </p>
+                <button class="psychedelic-btn px-8 py-4 text-lg font-semibold rounded-full transform hover:scale-105 transition-all duration-300">
+                    Enter the Portal
+                </button>
+            </div>
+        </section>
+
+        <!-- Optical Illusions Gallery -->
+        <section class="py-20 px-4">
+            <div class="max-w-7xl mx-auto">
+                <h2 class="text-4xl md:text-6xl font-bold text-center mb-16 psychedelic-text">Optical Wonders</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="illusions-grid">
+                    <!-- Illusions will be loaded dynamically -->
+                </div>
+            </div>
+        </section>
+
+        <!-- Interactive Canvas -->
+        <section class="py-20 px-4 bg-gradient-to-b from-black to-purple-900/20">
+            <div class="max-w-6xl mx-auto text-center">
+                <h2 class="text-4xl md:text-6xl font-bold mb-8 psychedelic-text">Create Your Vision</h2>
+                <div class="bg-black/50 rounded-2xl p-8 border border-purple-500/30">
+                    <canvas id="psychedelic-canvas" class="w-full h-96 rounded-xl cursor-crosshair"></canvas>
+                    <div class="flex justify-center gap-4 mt-6">
+                        <button onclick="clearCanvas()" class="psychedelic-btn px-6 py-3 rounded-full">Clear</button>
+                        <button onclick="toggleAnimation()" class="psychedelic-btn px-6 py-3 rounded-full">Animate</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <psychedelic-footer></psychedelic-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,191 @@
+// Optical Illusions Data
+const illusions = [
+    {
+        title: "Spinning Vortex",
+        description: "A mesmerizing spiral that appears to spin infinitely",
+        type: "spiral",
+        colors: ["#ff00ff", "#00ffff", "#ffff00"]
+    },
+    {
+        title: "Floating Grid",
+        description: "Grid patterns that seem to float and transform",
+        type: "grid",
+        colors: ["#ff0066", "#6600ff", "#00ff99"]
+    },
+    {
+        title: "Morphing Circles",
+        description: "Circles that continuously change shape and size",
+        type: "circles",
+        colors: ["#ff5500", "#55ff00", "#0055ff"]
+    },
+    {
+        title: "Pulsating Waves",
+        description: "Waves that create a breathing, living pattern",
+        type: "waves",
+        colors: ["#ff00aa", "#aa00ff", "#00aaff"]
+    },
+    {
+        title: "Kaleidoscope",
+        description: "Symmetrical patterns that shift and transform",
+        type: "kaleidoscope",
+        colors: ["#ffff00", "#ff00ff", "#00ffff"]
+    },
+    {
+        title: "Infinity Tunnel",
+        description: "A tunnel that appears to extend into infinity",
+        type: "tunnel",
+        colors: ["#ff0000", "#00ff00", "#0000ff"]
+    }
+];
+
+// Canvas Variables
+let canvas, ctx;
+let isAnimating = false;
+let animationId;
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initializeIllusions();
+    initializeCanvas();
+    startBackgroundAnimations();
+});
+
+// Initialize Optical Illusions Gallery
+function initializeIllusions() {
+    const grid = document.getElementById('illusions-grid');
+    
+    illusions.forEach((illusion, index) => {
+        const card = document.createElement('div');
+        card.className = 'illusion-card p-6';
+        card.innerHTML = `
+            <div class="w-full h-48 mb-4 rounded-lg ${illusion.type} ${index % 2 === 0 ? 'floating' : 'breathing'}" 
+                 style="background: conic-gradient(from 0deg, ${illusion.colors.join(', ')});"></div>
+            <h3 class="text-xl font-bold mb-2 psychedelic-text">${illusion.title}</h3>
+            <p class="text-white/70">${illusion.description}</p>
+        `;
+        grid.appendChild(card);
+    });
+}
+
+// Initialize Interactive Canvas
+function initializeCanvas() {
+    canvas = document.getElementById('psychedelic-canvas');
+    ctx = canvas.getContext('2d');
+    
+    // Set canvas size
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    
+    // Add drawing functionality
+    let isDrawing = false;
+    let lastX = 0;
+    let lastY = 0;
+    let hue = 0;
+    
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', stopDrawing);
+    canvas.addEventListener('mouseout', stopDrawing);
+    
+    function startDrawing(e) {
+        isDrawing = true;
+        [lastX, lastY] = [e.offsetX, e.offsetY];
+    }
+    
+    function draw(e) {
+        if (!isDrawing) return;
+        
+        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+        ctx.lineWidth = 3;
+        ctx.lineJoin = 'round';
+        ctx.lineCap = 'round';
+        
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(e.offsetX, e.offsetY);
+        ctx.stroke();
+        
+        [lastX, lastY] = [e.offsetX, e.offsetY];
+        hue = (hue + 1) % 360;
+    }
+    
+    function stopDrawing() {
+        isDrawing = false;
+    }
+}
+
+// Canvas Functions
+function clearCanvas() {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+function toggleAnimation() {
+    isAnimating = !isAnimating;
+    
+    if (isAnimating) {
+        animateCanvas();
+    } else {
+        cancelAnimationFrame(animationId);
+    }
+}
+
+function animateCanvas() {
+    if (!isAnimating) return;
+    
+    // Create psychedelic animation
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    const time = Date.now() * 0.001;
+    
+    for (let i = 0; i < 5; i++) {
+        const x = Math.sin(time * 0.5 + i) * canvas.width * 0.3 + canvas.width * 0.5;
+        const y = Math.cos(time * 0.7 + i) * canvas.height * 0.3 + canvas.height * 0.5;
+        const radius = Math.sin(time + i) * 50 + 70;
+        
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.strokeStyle = `hsl(${(time * 50 + i * 72) % 360}, 100%, 50%)`;
+        ctx.lineWidth = 3;
+        ctx.stroke();
+    }
+    
+    animationId = requestAnimationFrame(animateCanvas);
+}
+
+// Background Animations
+function startBackgroundAnimations() {
+    // Add floating particles
+    createFloatingParticles();
+    
+    // Add occasional color shifts
+    setInterval(() => {
+        document.documentElement.style.setProperty('--hue-rotate', `${Math.random() * 360}deg`);
+    }, 3000);
+}
+
+function createFloatingParticles() {
+    const particlesContainer = document.createElement('div');
+    particlesContainer.className = 'fixed inset-0 pointer-events-none';
+    document.body.appendChild(particlesContainer);
+    
+    for (let i = 0; i < 20; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'absolute w-2 h-2 rounded-full';
+        particle.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
+        particle.style.left = `${Math.random() * 100}%`;
+        particle.style.top = `${Math.random() * 100}%`;
+        particle.style.animation = `floating ${6 + Math.random() * 4}s ease-in-out infinite`;
+        particle.style.animationDelay = `${Math.random() * 5}s`;
+        particlesContainer.appendChild(particle);
+    }
+}
+
+// Handle window resize
+window.addEventListener('resize', function() {
+    if (canvas) {
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+    }
+});

style.css

@@ -1,28 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Space Grotesk', sans-serif;
+    background: #000;
+    color: white;
+    overflow-x: hidden;
+}
+
+.psychedelic-bg {
+    background: 
+        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+    animation: bgPulse 8s ease-in-out infinite alternate;
+}
+
+@keyframes bgPulse {
+    0% {
+        filter: hue-rotate(0deg);
+        transform: scale(1);
+    }
+    100% {
+        filter: hue-rotate(360deg);
+        transform: scale(1.1);
+    }
+}
+
+.psychedelic-text {
+    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
+    background-size: 400% 400%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: gradientShift 3s ease infinite;
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.psychedelic-btn {
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    position: relative;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.psychedelic-btn::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
+    background-size: 400% 400%;
+    border-radius: inherit;
+    z-index: -1;
+    animation: gradientShift 3s ease infinite;
+}
+
+.illusion-card {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.illusion-card:hover {
+    transform: translateY(-10px) scale(1.02);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 20px 40px rgba(255, 0, 255, 0.3);
+}
+
+.illusion-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transition: left 0.5s ease;
+}
+
+.illusion-card:hover::before {
+    left: 100%;
+}
+
+.floating {
+    animation: floating 6s ease-in-out infinite;
+}
+
+@keyframes floating {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-20px) rotate(180deg); }
+}
+
+.spiral {
+    animation: spiral 4s linear infinite;
+}
+
+@keyframes spiral {
+    0% { transform: rotate(0deg) scale(1); }
+    50% { transform: rotate(180deg) scale(1.2); }
+    100% { transform: rotate(360deg) scale(1); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.morphing-grid {
+    animation: morph 8s ease-in-out infinite;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes morph {
+    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.glow {
+    filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.7));
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.breathing {
+    animation: breathing 4s ease-in-out infinite;
 }
+
+@keyframes breathing {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.1); opacity: 0.8; }
+}