Spaces:

Marv12
/

nice

Running

App Files Files Community

Marv12 commited on May 8

Commit

09d6f0c

verified ·

1 Parent(s): c4ef219

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: nice
+emoji: 🐳
+colorFrom: pink
 colorTo: yellow
 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,725 @@
-<!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>Cosmic Portfolio Experience</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        :root {
+            --color-pink: #ff9ff3;
+            --color-gold: #feca57;
+            --color-lavender: #9c88ff;
+            --color-teal: #00d2d3;
+            --color-dark: #1e272e;
+        }
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            color: white;
+            background: linear-gradient(135deg, #1e272e 0%, #2d3436 100%);
+        }
+        #nebula-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.7;
+        }
+        .glass-orb {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 50%;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            transition: all 0.3s ease;
+        }
+        .floating-shard {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.2);
+            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .isometric-tile {
+            transform-style: preserve-3d;
+            transform: rotateX(15deg) rotateY(-15deg);
+            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+            box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        .isometric-tile:hover {
+            transform: rotateX(0deg) rotateY(0deg) translateY(-10px);
+        }
+        .progress-robot {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-color: var(--color-gold);
+            border-radius: 50%;
+            animation: weld 2s infinite alternate;
+        }
+        @keyframes weld {
+            0% { box-shadow: 0 0 5px var(--color-gold); }
+            100% { box-shadow: 0 0 20px var(--color-gold); }
+        }
+        .color-wheel {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: conic-gradient(
+                red, yellow, lime, cyan, blue, magenta, red
+            );
+            cursor: grab;
+        }
+        .radial-menu {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            z-index: 100;
+            transition: all 0.3s ease;
+        }
+        .radial-menu:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+        }
+        .radial-items {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            pointer-events: none;
+            opacity: 0;
+            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .radial-item {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(5px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .radial-item:hover {
+            transform: scale(1.2);
+            background: rgba(255, 255, 255, 0.3);
+        }
+        .heartbeat {
+            animation: heartbeat 1.5s ease-in-out infinite both;
+        }
+        @keyframes heartbeat {
+            0% { transform: scale(1); }
+            25% { transform: scale(1.1); }
+            50% { transform: scale(1); }
+            75% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .draggable-card {
+            cursor: grab;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            touch-action: none;
+        }
+        .draggable-card:active {
+            cursor: grabbing;
+            transform: scale(1.05) !important;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
+        }
+        .paint-drip {
+            position: relative;
+            overflow: hidden;
+        }
+        .paint-drip::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 150%;
+            height: 150%;
+            background: linear-gradient(45deg, var(--color-pink), var(--color-lavender));
+            border-radius: 40%;
+            transform: translateX(-50%) rotate(0deg);
+            animation: rotate 10s linear infinite;
+            opacity: 0.3;
+            z-index: -1;
+        }
+        @keyframes rotate {
+            0% { transform: translateX(-50%) rotate(0deg); }
+            100% { transform: translateX(-50%) rotate(360deg); }
+        }
+        .avatar-tooltip {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--color-teal);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .avatar-tooltip:hover {
+            transform: scale(1.2);
+        }
+        .tooltip-content {
+            position: absolute;
+            width: 200px;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
+            color: var(--color-dark);
+            font-size: 0.9rem;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            transform: translateY(10px);
+        }
+        .avatar-tooltip:hover .tooltip-content {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .bounce-button {
+            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .bounce-button:active {
+            transform: scale(0.95);
+        }
+        .parallax-banner {
+            transform-style: preserve-3d;
+            transition: all 0.5s ease-out;
+        }
+    </style>
+</head>
+<body>
+    <!-- Nebula Background -->
+    <div id="nebula-bg"></div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex flex-col justify-center items-center relative overflow-hidden">
+        <!-- Floating Glass Orb -->
+        <div class="glass-orb w-64 h-64 flex justify-center items-center mb-12" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-perspective="1000">
+            <h1 class="text-4xl font-bold text-center">Welcome</h1>
+        </div>
+        <!-- Floating Geometric Shards -->
+        <div id="shard-container" class="relative w-full h-32 mb-20">
+            <!-- Shards will be positioned here by JavaScript -->
+        </div>
+        <h2 class="text-6xl font-bold mb-8 text-center">Let's Create Something <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-purple-600">Extraordinary</span></h2>
+        <p class="text-xl max-w-2xl text-center mb-12 opacity-80">A fusion of love, trust, and creativity in every pixel and line of code</p>
+        <button class="bounce-button px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300">
+            Explore My Universe
+        </button>
+        <!-- Scroll Indicator -->
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <div class="w-6 h-10 border-2 border-white rounded-full flex justify-center">
+                <div class="w-1 h-2 bg-white rounded-full mt-2 animate-pulse"></div>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio Sections -->
+    <section class="py-20 px-4 sm:px-8 max-w-7xl mx-auto">
+        <h2 class="text-4xl font-bold mb-16 text-center">My Creative Cosmos</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+            <!-- Isometric Tile 1 -->
+            <div class="isometric-tile bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg p-8 relative overflow-hidden group">
+                <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity"></div>
+                <div class="relative z-10">
+                    <div class="w-16 h-16 bg-pink-500 rounded-full mb-6 flex items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Design Philosophy</h3>
+                    <p class="text-gray-300 mb-6">Where aesthetics meet purpose in perfect harmony</p>
+                    <div class="h-1 w-full bg-gray-700 rounded-full mb-4">
+                        <div class="h-1 bg-pink-500 rounded-full" style="width: 85%">
+                            <div class="progress-robot" style="left: calc(85% - 15px); top: -15px;"></div>
+                        </div>
+                    </div>
+                    <p class="text-sm text-gray-400">85% mastery</p>
+                </div>
+            </div>
+            <!-- Isometric Tile 2 -->
+            <div class="isometric-tile bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg p-8 relative overflow-hidden group">
+                <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity"></div>
+                <div class="relative z-10">
+                    <div class="w-16 h-16 bg-purple-500 rounded-full mb-6 flex items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Code Craftsmanship</h3>
+                    <p class="text-gray-300 mb-6">Elegant solutions to complex problems</p>
+                    <div class="h-1 w-full bg-gray-700 rounded-full mb-4">
+                        <div class="h-1 bg-purple-500 rounded-full" style="width: 92%">
+                            <div class="progress-robot" style="left: calc(92% - 15px); top: -15px;"></div>
+                        </div>
+                    </div>
+                    <p class="text-sm text-gray-400">92% mastery</p>
+                </div>
+            </div>
+            <!-- Isometric Tile 3 -->
+            <div class="isometric-tile bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg p-8 relative overflow-hidden group">
+                <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity"></div>
+                <div class="relative z-10">
+                    <div class="w-16 h-16 bg-teal-500 rounded-full mb-6 flex items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">Innovation Engine</h3>
+                    <p class="text-gray-300 mb-6">Pushing boundaries with every project</p>
+                    <div class="h-1 w-full bg-gray-700 rounded-full mb-4">
+                        <div class="h-1 bg-teal-500 rounded-full" style="width: 78%">
+                            <div class="progress-robot" style="left: calc(78% - 15px); top: -15px;"></div>
+                        </div>
+                    </div>
+                    <p class="text-sm text-gray-400">78% mastery</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Creativity Section -->
+    <section class="py-20 px-4 sm:px-8 max-w-7xl mx-auto">
+        <div class="paint-drip bg-gray-800 rounded-3xl p-12 mb-20 relative overflow-hidden">
+            <h2 class="text-4xl font-bold mb-6">Generative Art Playground</h2>
+            <p class="text-xl mb-12 max-w-3xl">Interact with these tools to create your own unique compositions</p>
+            <div class="flex flex-col lg:flex-row gap-12">
+                <!-- Color Wheel -->
+                <div class="flex-1">
+                    <h3 class="text-2xl font-bold mb-6">Color Spectrum Explorer</h3>
+                    <div class="color-wheel mx-auto mb-6" id="color-wheel"></div>
+                    <div class="text-center">
+                        <p class="mb-4">Selected color: <span id="selected-color" class="font-bold">#FF0000</span></p>
+                        <button class="px-6 py-2 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20 transition">Save Palette</button>
+                    </div>
+                </div>
+                <!-- Draggable Cards -->
+                <div class="flex-1">
+                    <h3 class="text-2xl font-bold mb-6">Modular Composition</h3>
+                    <p class="mb-6">Drag and rearrange these elements to create your own layout</p>
+                    <div class="grid grid-cols-3 gap-4" id="card-grid">
+                        <div class="draggable-card bg-pink-500 aspect-square rounded-lg flex items-center justify-center">1</div>
+                        <div class="draggable-card bg-purple-500 aspect-square rounded-lg flex items-center justify-center">2</div>
+                        <div class="draggable-card bg-teal-500 aspect-square rounded-lg flex items-center justify-center">3</div>
+                        <div class="draggable-card bg-yellow-500 aspect-square rounded-lg flex items-center justify-center">4</div>
+                        <div class="draggable-card bg-blue-500 aspect-square rounded-lg flex items-center justify-center">5</div>
+                        <div class="draggable-card bg-green-500 aspect-square rounded-lg flex items-center justify-center">6</div>
+                    </div>
+                </div>
+            </div>
+            <!-- Avatar Tooltip -->
+            <div class="avatar-tooltip absolute top-8 right-8">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <div class="tooltip-content">
+                    <p>This interactive section showcases my passion for creative coding and generative art. Play with the tools to see how dynamic digital experiences can be!</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Call to Action -->
+    <section class="py-32 px-4 sm:px-8 relative overflow-hidden">
+        <div class="parallax-banner max-w-4xl mx-auto bg-gradient-to-r from-pink-500 to-purple-600 rounded-3xl p-12 text-center">
+            <h2 class="text-5xl font-bold mb-6 heartbeat">Let's Build the Future Together</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">I'm passionate about creating digital experiences that resonate with love, trust, and understanding.</p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button class="bounce-button px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-opacity-90 transition">
+                    Start a Project
+                </button>
+                <button class="bounce-button px-8 py-4 bg-black bg-opacity-30 text-white font-bold rounded-full hover:bg-opacity-50 transition">
+                    Learn More About Me
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Radial Menu -->
+    <div class="radial-menu" id="radial-menu">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+        <div class="radial-items" id="radial-items">
+            <div class="radial-item" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+            </div>
+            <div class="radial-item" style="top: 20%; left: 50%; transform: translateX(-50%);">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                </svg>
+            </div>
+            <div class="radial-item" style="top: 50%; left: 80%; transform: translateY(-50%);">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9-3-9m-9 9a9 9 0 019-9" />
+                </svg>
+            </div>
+            <div class="radial-item" style="top: 80%; left: 50%; transform: translateX(-50%);">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+            </div>
+            <div class="radial-item" style="top: 50%; left: 20%; transform: translateY(-50%);">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize Three.js Nebula Background
+        document.addEventListener('DOMContentLoaded', function() {
+            // Create nebula background
+            const nebulaBg = document.getElementById('nebula-bg');
+            const scene = new THREE.Scene();
+            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            nebulaBg.appendChild(renderer.domElement);
+            // Create particles for nebula
+            const particlesGeometry = new THREE.BufferGeometry();
+            const particleCount = 5000;
+            const posArray = new Float32Array(particleCount * 3);
+            const colorArray = new Float32Array(particleCount * 3);
+            for(let i = 0; i < particleCount * 3; i++) {
+                posArray[i] = (Math.random() - 0.5) * 10;
+                colorArray[i] = Math.random() * 0.5 + 0.5; // Pastel colors
+            }
+            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+            particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorArray, 3));
+            const particlesMaterial = new THREE.PointsMaterial({
+                size: 0.05,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending
+            });
+            const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
+            scene.add(particlesMesh);
+            camera.position.z = 5;
+            // Animation loop for nebula
+            function animateNebula() {
+                requestAnimationFrame(animateNebula);
+                particlesMesh.rotation.x += 0.0001;
+                particlesMesh.rotation.y += 0.0002;
+                // Gentle pulsing effect
+                particlesMesh.scale.x = 1 + Math.sin(Date.now() * 0.001) * 0.05;
+                particlesMesh.scale.y = 1 + Math.sin(Date.now() * 0.001) * 0.05;
+                renderer.render(scene, camera);
+            }
+            animateNebula();
+            // Handle window resize
+            window.addEventListener('resize', function() {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+            // Create floating shards that spell "Understanding"
+            const shardContainer = document.getElementById('shard-container');
+            const word = "Understanding";
+            const shardCount = 100;
+            for(let i = 0; i < shardCount; i++) {
+                const shard = document.createElement('div');
+                shard.className = 'floating-shard';
+                // Random size
+                const size = Math.random() * 20 + 10;
+                shard.style.width = `${size}px`;
+                shard.style.height = `${size}px`;
+                // Random position
+                shard.style.left = `${Math.random() * 100}%`;
+                shard.style.top = `${Math.random() * 100}%`;
+                // Random color
+                const colors = ['rgba(255, 159, 243, 0.6)', 'rgba(254, 202, 87, 0.6)', 'rgba(156, 136, 255, 0.6)'];
+                shard.style.background = colors[Math.floor(Math.random() * colors.length)];
+                shardContainer.appendChild(shard);
+            }
+            // Animate shards to form the word
+            setTimeout(() => {
+                const shards = document.querySelectorAll('.floating-shard');
+                const centerX = shardContainer.offsetWidth / 2;
+                const centerY = shardContainer.offsetHeight / 2;
+                // Create positions for each letter
+                const letterPositions = [];
+                const fontSize = 80;
+                const fontWidth = fontSize * 0.6;
+                const startX = centerX - (word.length * fontWidth) / 2;
+                // Create a canvas to get pixel data for the word
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                canvas.width = shardContainer.offsetWidth;
+                canvas.height = shardContainer.offsetHeight;
+                ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`;
+                ctx.fillStyle = 'white';
+                ctx.textAlign = 'center';
+                ctx.fillText(word, centerX, centerY + fontSize/3);
+                // Get pixel data
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+                // Find all non-transparent pixels
+                const points = [];
+                for(let y = 0; y < canvas.height; y += 4) {
+                    for(let x = 0; x < canvas.width; x += 4) {
+                        const index = (y * canvas.width + x) * 4;
+                        if(imageData[index + 3] > 0) {
+                            points.push({x, y});
+                        }
+                    }
+                }
+                // Assign shards to letter positions
+                shards.forEach((shard, index) => {
+                    if(index < points.length) {
+                        const point = points[index];
+                        gsap.to(shard, {
+                            x: point.x - parseFloat(shard.style.left),
+                            y: point.y - parseFloat(shard.style.top),
+                            duration: 2,
+                            ease: "elastic.out(1, 0.5)"
+                        });
+                    }
+                });
+            }, 2000);
+            // Initialize tilt.js for glass orb
+            VanillaTilt.init(document.querySelector(".glass-orb"), {
+                max: 15,
+                speed: 400,
+                glare: true,
+                "max-glare": 0.2,
+            });
+            // Radial menu interaction
+            const radialMenu = document.getElementById('radial-menu');
+            const radialItems = document.getElementById('radial-items');
+            let menuOpen = false;
+            radialMenu.addEventListener('click', function() {
+                menuOpen = !menuOpen;
+                if(menuOpen) {
+                    radialItems.style.opacity = '1';
+                    radialItems.style.pointerEvents = 'auto';
+                    // Animate items out
+                    const items = radialItems.querySelectorAll('.radial-item');
+                    items.forEach((item, index) => {
+                        const angle = (index / items.length) * Math.PI * 2;
+                        const radius = 120;
+                        const x = Math.cos(angle) * radius;
+                        const y = Math.sin(angle) * radius;
+                        gsap.fromTo(item,
+                            { x: 0, y: 0, opacity: 0 },
+                            { x: x, y: y, opacity: 1, duration: 0.5, delay: index * 0.1, ease: "back.out(1.7)" }
+                        );
+                    });
+                } else {
+                    radialItems.style.opacity = '0';
+                    radialItems.style.pointerEvents = 'none';
+                    // Animate items back
+                    const items = radialItems.querySelectorAll('.radial-item');
+                    items.forEach((item) => {
+                        gsap.to(item,
+                            { x: 0, y: 0, opacity: 0, duration: 0.3, ease: "back.in(1.7)" }
+                        );
+                    });
+                }
+            });
+            // Color wheel interaction
+            const colorWheel = document.getElementById('color-wheel');
+            const selectedColor = document.getElementById('selected-color');
+            colorWheel.addEventListener('mousemove', function(e) {
+                const rect = colorWheel.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                const angle = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;
+                const normalizedAngle = (angle + 360) % 360;
+                // Convert angle to hue (0-360)
+                const hue = Math.round(normalizedAngle);
+                // Calculate saturation based on distance from center
+                const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+                const saturation = Math.min(100, Math.round(distance / (rect.width / 2) * 100));
+                // Set fixed lightness for this demo
+                const lightness = 50;
+                selectedColor.textContent = `HSL(${hue}, ${saturation}%, ${lightness}%)`;
+                selectedColor.style.color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+            });
+            // Draggable cards
+            const cardGrid = document.getElementById('card-grid');
+            const cards = document.querySelectorAll('.draggable-card');
+            cards.forEach(card => {
+                let posX = 0, posY = 0, mouseX = 0, mouseY = 0;
+                let isDragging = false;
+                card.addEventListener('mousedown', function(e) {
+                    isDragging = true;
+                    mouseX = e.clientX;
+                    mouseY = e.clientY;
+                    // Bring to front
+                    card.style.zIndex = '10';
+                    card.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.3)';
+                    document.addEventListener('mousemove', moveCard);
+                    document.addEventListener('mouseup', function() {
+                        isDragging = false;
+                        card.style.zIndex = '1';
+                        card.style.boxShadow = '';
+                        document.removeEventListener('mousemove', moveCard);
+                    });
+                });
+                function moveCard(e) {
+                    if(isDragging) {
+                        const dx = e.clientX - mouseX;
+                        const dy = e.clientY - mouseY;
+                        posX += dx;
+                        posY += dy;
+                        card.style.transform = `translate(${posX}px, ${posY}px) rotate(${posX * 0.1}deg)`;
+                        mouseX = e.clientX;
+                        mouseY = e.clientY;
+                    }
+                }
+            });
+            // Parallax effect for CTA banner
+            const parallaxBanner = document.querySelector('.parallax-banner');
+            window.addEventListener('mousemove', function(e) {
+                const x = e.clientX / window.innerWidth;
+                const y = e.clientY / window.innerHeight;
+                parallaxBanner.style.transform = `rotateX(${(y - 0.5) * 5}deg) rotateY(${(x - 0.5) * 5}deg)`;
+            });
+            // Spring physics for bounce buttons
+            const bounceButtons = document.querySelectorAll('.bounce-button');
+            bounceButtons.forEach(button => {
+                button.addEventListener('mouseenter', function() {
+                    gsap.to(button, {
+                        scale: 1.05,
+                        duration: 0.3,
+                        ease: "elastic.out(1, 0.5)"
+                    });
+                });
+                button.addEventListener('mouseleave', function() {
+                    gsap.to(button, {
+                        scale: 1,
+                        duration: 0.3,
+                        ease: "elastic.out(1, 0.5)"
+                    });
+                });
+            });
+        });
+    </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=Marv12/nice" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes