Spaces:

YiSHuA
/

absurd-aquarium

Running

App Files Files Community

josh commited on May 14

Commit

b42ab77

verified ·

1 Parent(s): f2c08a0

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +937 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: absurd-aquarium
+emoji: 🐳
+colorFrom: purple
+colorTo: green
 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,937 @@
-<!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>Virtual Fish Tank</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>
+        @keyframes bubble-float {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) rotate(360deg);
+                opacity: 0;
+            }
+        }
+        @keyframes fish-swim {
+            0% {
+                transform: translateX(-100px);
+            }
+            100% {
+                transform: translateX(calc(100vw + 100px));
+            }
+        }
+        @keyframes tail-wag {
+            0%, 100% {
+                transform: translateY(-50%) rotate(0deg);
+            }
+            50% {
+                transform: translateY(-50%) rotate(30deg);
+            }
+        }
+        @keyframes fin-wave {
+            0%, 100% {
+                transform: rotate(-10deg);
+            }
+            50% {
+                transform: rotate(10deg);
+            }
+        }
+        @keyframes mouth-open {
+            0%, 100% {
+                transform: scaleY(1);
+            }
+            50% {
+                transform: scaleY(0.8);
+            }
+        }
+        .bubble {
+            animation: bubble-float linear infinite;
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.6);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+        }
+        .fish {
+            position: absolute;
+            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
+            z-index: 10;
+        }
+        .fish-body {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+        }
+        .fish-tail {
+            position: absolute;
+            right: -15px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-right: 20px solid;
+            animation: tail-wag 0.5s infinite;
+        }
+        .fish-eye {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background-color: black;
+            border-radius: 50%;
+            top: 25%;
+            left: 20%;
+        }
+        .fish-pupil {
+            position: absolute;
+            width: 3px;
+            height: 3px;
+            background-color: white;
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+        }
+        .fish-fin {
+            position: absolute;
+            width: 15px;
+            height: 30px;
+            border-radius: 50%;
+            top: 10%;
+            left: 30%;
+            animation: fin-wave 0.7s infinite;
+            transform-origin: bottom;
+        }
+        .fish-dorsal-fin {
+            position: absolute;
+            width: 10px;
+            height: 30px;
+            top: -15px;
+            left: 40%;
+            animation: fin-wave 0.9s infinite;
+            transform-origin: bottom;
+        }
+        .fish-mouth {
+            position: absolute;
+            width: 10px;
+            height: 5px;
+            background-color: rgba(0, 0, 0, 0.3);
+            border-radius: 50%;
+            bottom: 20%;
+            left: 10%;
+            transform-origin: center;
+            animation: mouth-open 2s infinite;
+        }
+        .fish-stripe {
+            position: absolute;
+            height: 4px;
+            background-color: rgba(0, 0, 0, 0.2);
+            border-radius: 2px;
+            top: 40%;
+            left: 25%;
+            width: 50%;
+        }
+        .fish-spot {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        .plant {
+            position: absolute;
+            bottom: 0;
+            width: 40px;
+            height: 150px;
+            background: linear-gradient(to top, #2e8b57, #3cb371);
+            clip-path: polygon(
+                50% 0%,
+                60% 20%,
+                70% 30%,
+                60% 40%,
+                70% 50%,
+                60% 60%,
+                70% 70%,
+                60% 80%,
+                50% 90%,
+                40% 80%,
+                30% 70%,
+                40% 60%,
+                30% 50%,
+                40% 40%,
+                30% 30%,
+                40% 20%,
+                50% 0%
+            );
+            z-index: 1;
+        }
+        .rock {
+            position: absolute;
+            bottom: 0;
+            width: 80px;
+            height: 40px;
+            background: linear-gradient(to top, #696969, #808080);
+            border-radius: 50% 50% 0 0;
+            z-index: 2;
+        }
+        .controls {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px;
+            border-radius: 10px;
+            z-index: 100;
+            backdrop-filter: blur(5px);
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .control-group {
+            display: flex;
+            gap: 5px;
+        }
+        .toggle-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            padding: 8px 12px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .toggle-btn:hover {
+            background: rgba(255, 255, 255, 0.4);
+        }
+        .toggle-btn.active {
+            background: #3b82f6;
+        }
+        .stats {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px;
+            border-radius: 10px;
+            z-index: 100;
+            backdrop-filter: blur(5px);
+            color: white;
+            font-family: Arial, sans-serif;
+            font-size: 14px;
+        }
+        .food {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #FF6347;
+            border-radius: 50%;
+            z-index: 5;
+        }
+        /* Fish type specific styles */
+        .fish-type-1 .fish-body {
+            background: linear-gradient(135deg, #FF6347 0%, #FF8C00 100%);
+        }
+        .fish-type-2 .fish-body {
+            background: linear-gradient(135deg, #4682B4 0%, #87CEEB 100%);
+        }
+        .fish-type-3 .fish-body {
+            background: linear-gradient(135deg, #32CD32 0%, #ADFF2F 100%);
+        }
+        .fish-type-4 .fish-body {
+            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+        }
+        .fish-type-5 .fish-body {
+            background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
+        }
+        .fish-type-6 .fish-body {
+            background: linear-gradient(135deg, #9370DB 0%, #BA55D3 100%);
+        }
+        .fish-type-7 .fish-body {
+            background: linear-gradient(135deg, #20B2AA 0%, #00FFFF 100%);
+        }
+        .fish-type-8 .fish-body {
+            background: linear-gradient(135deg, #FF4500 0%, #FF8C00 50%, #FF4500 100%);
+        }
+        .fish-type-9 .fish-body {
+            background: linear-gradient(135deg, #4B0082 0%, #9400D3 100%);
+        }
+        .fish-type-10 .fish-body {
+            background: linear-gradient(135deg, #008000 0%, #00FF00 100%);
+        }
+    </style>
+</head>
+<body class="bg-blue-900 overflow-hidden h-screen w-screen m-0 p-0">
+    <div id="fish-tank" class="relative h-full w-full">
+        <!-- Elements will be added here by JS -->
+    </div>
+    <div class="stats">
+        <div>Fish: <span id="fish-count">0</span></div>
+        <div>Food: <span id="food-count">0</span></div>
+        <div>Species: <span id="species-count">0</span></div>
+    </div>
+    <div class="controls">
+        <div class="control-group">
+            <button id="toggle-bubbles" class="toggle-btn active" title="Toggle Bubbles">
+                <i class="fas fa-water"></i>
+            </button>
+            <button id="toggle-fish" class="toggle-btn active" title="Toggle Fish">
+                <i class="fas fa-fish"></i>
+            </button>
+            <button id="toggle-plants" class="toggle-btn active" title="Toggle Plants">
+                <i class="fas fa-leaf"></i>
+            </button>
+        </div>
+        <div class="control-group">
+            <button id="toggle-rocks" class="toggle-btn active" title="Toggle Rocks">
+                <i class="fas fa-mountain"></i>
+            </button>
+            <button id="toggle-lights" class="toggle-btn active" title="Toggle Lights">
+                <i class="fas fa-lightbulb"></i>
+            </button>
+            <button id="add-fish" class="toggle-btn" title="Add Fish">
+                <i class="fas fa-plus"></i>
+            </button>
+        </div>
+        <div class="control-group">
+            <button id="add-food" class="toggle-btn" title="Add Food">
+                <i class="fas fa-utensils"></i>
+            </button>
+            <button id="add-special-fish" class="toggle-btn" title="Add Special Fish">
+                <i class="fas fa-star"></i>
+            </button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const tank = document.getElementById('fish-tank');
+            const fishCountElement = document.getElementById('fish-count');
+            const foodCountElement = document.getElementById('food-count');
+            const speciesCountElement = document.getElementById('species-count');
+            let bubblesEnabled = true;
+            let fishEnabled = true;
+            let plantsEnabled = true;
+            let rocksEnabled = true;
+            let lightsEnabled = true;
+            let fishList = [];
+            let foodList = [];
+            let speciesSet = new Set();
+            // Fish class with enhanced variations
+            class Fish {
+                constructor(special = false) {
+                    this.element = document.createElement('div');
+                    this.element.className = 'fish';
+                    // Random fish type (1-10)
+                    this.type = special ?
+                        Math.floor(Math.random() * 3) + 8 : // Special types 8-10
+                        Math.floor(Math.random() * 7) + 1;  // Regular types 1-7
+                    this.element.classList.add(`fish-type-${this.type}`);
+                    this.size = Math.random() * 30 + 30;
+                    this.speed = Math.random() * 0.5 + 0.5;
+                    this.top = Math.random() * 80 + 10;
+                    this.direction = Math.random() > 0.5 ? 1 : -1; // 1 for right, -1 for left
+                    this.x = Math.random() * (window.innerWidth - 100) + 50;
+                    this.y = this.top / 100 * window.innerHeight;
+                    this.width = this.size;
+                    this.height = this.size;
+                    this.hunger = 0;
+                    this.growth = 1;
+                    this.target = null;
+                    this.changeDirectionTimer = 0;
+                    this.changeDirectionInterval = Math.random() * 3000 + 2000; // 2-5 seconds
+                    this.element.style.width = `${this.width}px`;
+                    this.element.style.height = `${this.height}px`;
+                    this.element.style.top = `${this.y}px`;
+                    this.element.style.left = `${this.x}px`;
+                    // Flip fish if going left
+                    if (this.direction === -1) {
+                        this.element.style.transform = 'scaleX(-1)';
+                    }
+                    const fishBody = document.createElement('div');
+                    fishBody.className = 'fish-body';
+                    const fishTail = document.createElement('div');
+                    fishTail.className = 'fish-tail';
+                    fishTail.style.borderRightColor = this.getTailColor();
+                    const fishEye = document.createElement('div');
+                    fishEye.className = 'fish-eye';
+                    const fishPupil = document.createElement('div');
+                    fishPupil.className = 'fish-pupil';
+                    fishEye.appendChild(fishPupil);
+                    const fishFin = document.createElement('div');
+                    fishFin.className = 'fish-fin';
+                    fishFin.style.backgroundColor = this.getFinColor();
+                    const fishDorsalFin = document.createElement('div');
+                    fishDorsalFin.className = 'fish-dorsal-fin';
+                    fishDorsalFin.style.backgroundColor = this.getFinColor();
+                    const fishMouth = document.createElement('div');
+                    fishMouth.className = 'fish-mouth';
+                    fishBody.appendChild(fishTail);
+                    fishBody.appendChild(fishEye);
+                    fishBody.appendChild(fishFin);
+                    fishBody.appendChild(fishDorsalFin);
+                    fishBody.appendChild(fishMouth);
+                    // Add patterns based on fish type
+                    this.addPatterns(fishBody);
+                    this.element.appendChild(fishBody);
+                    tank.appendChild(this.element);
+                    fishList.push(this);
+                    speciesSet.add(this.type);
+                    updateFishCount();
+                    updateSpeciesCount();
+                    this.animationId = null;
+                    this.animate();
+                }
+                getTailColor() {
+                    // Return slightly darker color for tail
+                    const tailColors = [
+                        '#D4532B', '#36648B', '#2AAD2A', '#D4B700', '#D45391',
+                        '#7B58C7', '#1A9282', '#D43A00', '#3D0066', '#006600'
+                    ];
+                    return tailColors[this.type - 1];
+                }
+                getFinColor() {
+                    // Return slightly lighter color for fins
+                    const finColors = [
+                        '#FF8C69', '#69A3D1', '#69FF69', '#FFE769', '#FF8CB9',
+                        '#B08CFF', '#69E3D1', '#FF8C69', '#8C69D1', '#69D169'
+                    ];
+                    return finColors[this.type - 1];
+                }
+                addPatterns(fishBody) {
+                    // Add different patterns based on fish type
+                    switch(this.type) {
+                        case 1: // Orange with stripes
+                            const stripe1 = document.createElement('div');
+                            stripe1.className = 'fish-stripe';
+                            stripe1.style.top = '30%';
+                            fishBody.appendChild(stripe1);
+                            const stripe2 = document.createElement('div');
+                            stripe2.className = 'fish-stripe';
+                            stripe2.style.top = '50%';
+                            fishBody.appendChild(stripe2);
+                            break;
+                        case 2: // Blue with spots
+                            for (let i = 0; i < 5; i++) {
+                                const spot = document.createElement('div');
+                                spot.className = 'fish-spot';
+                                spot.style.top = `${Math.random() * 60 + 20}%`;
+                                spot.style.left = `${Math.random() * 60 + 20}%`;
+                                fishBody.appendChild(spot);
+                            }
+                            break;
+                        case 5: // Pink with heart spots
+                            for (let i = 0; i < 3; i++) {
+                                const heart = document.createElement('div');
+                                heart.innerHTML = '❤️';
+                                heart.style.position = 'absolute';
+                                heart.style.fontSize = '8px';
+                                heart.style.top = `${Math.random() * 60 + 20}%`;
+                                heart.style.left = `${Math.random() * 60 + 20}%`;
+                                fishBody.appendChild(heart);
+                            }
+                            break;
+                        case 8: // Special - Tiger stripes
+                            for (let i = 0; i < 5; i++) {
+                                const stripe = document.createElement('div');
+                                stripe.className = 'fish-stripe';
+                                stripe.style.height = '6px';
+                                stripe.style.backgroundColor = 'black';
+                                stripe.style.top = `${i * 15 + 20}%`;
+                                fishBody.appendChild(stripe);
+                            }
+                            break;
+                        case 9: // Special - Purple with stars
+                            for (let i = 0; i < 3; i++) {
+                                const star = document.createElement('div');
+                                star.innerHTML = '⭐';
+                                star.style.position = 'absolute';
+                                star.style.fontSize = '6px';
+                                star.style.top = `${Math.random() * 60 + 20}%`;
+                                star.style.left = `${Math.random() * 60 + 20}%`;
+                                fishBody.appendChild(star);
+                            }
+                            break;
+                        case 10: // Special - Green with leaf pattern
+                            const leaf1 = document.createElement('div');
+                            leaf1.innerHTML = '🍃';
+                            leaf1.style.position = 'absolute';
+                            leaf1.style.fontSize = '10px';
+                            leaf1.style.top = '30%';
+                            leaf1.style.left = '40%';
+                            fishBody.appendChild(leaf1);
+                            const leaf2 = document.createElement('div');
+                            leaf2.innerHTML = '🍃';
+                            leaf2.style.position = 'absolute';
+                            leaf2.style.fontSize = '10px';
+                            leaf2.style.top = '50%';
+                            leaf2.style.left = '30%';
+                            fishBody.appendChild(leaf2);
+                            break;
+                    }
+                }
+                animate(timestamp) {
+                    if (!fishEnabled) {
+                        cancelAnimationFrame(this.animationId);
+                        return;
+                    }
+                    // Update position based on direction
+                    this.x += this.speed * this.direction;
+                    // Check if fish is at tank boundaries
+                    if (this.x <= 0) {
+                        this.x = 0;
+                        this.direction = 1;
+                        this.element.style.transform = 'scaleX(1)';
+                    } else if (this.x >= window.innerWidth - this.width) {
+                        this.x = window.innerWidth - this.width;
+                        this.direction = -1;
+                        this.element.style.transform = 'scaleX(-1)';
+                    }
+                    // Random direction changes
+                    this.changeDirectionTimer += 16; // assuming 60fps
+                    if (this.changeDirectionTimer >= this.changeDirectionInterval) {
+                        this.changeDirectionTimer = 0;
+                        if (Math.random() < 0.3) { // 30% chance to change direction
+                            this.direction *= -1;
+                            this.element.style.transform = this.direction === 1 ? 'scaleX(1)' : 'scaleX(-1)';
+                        }
+                    }
+                    // Check for food or smaller fish
+                    if (!this.target) {
+                        this.findTarget();
+                    } else {
+                        this.chaseTarget();
+                    }
+                    // Apply movement
+                    this.element.style.left = `${this.x}px`;
+                    this.element.style.top = `${this.y}px`;
+                    // Random vertical movement
+                    if (Math.random() < 0.05) {
+                        this.y += (Math.random() - 0.5) * 5;
+                        // Keep fish within tank bounds
+                        this.y = Math.max(0, Math.min(window.innerHeight - this.height, this.y));
+                        this.top = (this.y / window.innerHeight) * 100;
+                    }
+                    this.animationId = requestAnimationFrame((ts) => this.animate(ts));
+                }
+                findTarget() {
+                    // Look for food first
+                    for (let food of foodList) {
+                        if (this.isCloseTo(food.x, food.y, 200)) {
+                            this.target = food;
+                            return;
+                        }
+                    }
+                    // Then look for smaller fish
+                    for (let otherFish of fishList) {
+                        if (otherFish !== this &&
+                            otherFish.growth < this.growth * 0.8 &&
+                            this.isCloseTo(otherFish.x, otherFish.y, 300)) {
+                            this.target = otherFish;
+                            return;
+                        }
+                    }
+                    // No target found, reset hunger
+                    this.hunger = 0;
+                    this.target = null;
+                }
+                chaseTarget() {
+                    if (!this.target || !this.target.element) {
+                        this.target = null;
+                        return;
+                    }
+                    // Calculate direction to target
+                    const dx = this.target.x - this.x;
+                    const dy = this.target.y - this.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    // Move toward target
+                    if (distance > 0) {
+                        this.x += (dx / distance) * this.speed * 1.5;
+                        this.y += (dy / distance) * this.speed * 1.5;
+                        // Update direction based on movement
+                        if (dx > 0 && this.direction === -1) {
+                            this.direction = 1;
+                            this.element.style.transform = 'scaleX(1)';
+                        } else if (dx < 0 && this.direction === 1) {
+                            this.direction = -1;
+                            this.element.style.transform = 'scaleX(-1)';
+                        }
+                    }
+                    // Check if reached target
+                    if (distance < this.width / 2) {
+                        this.eatTarget();
+                    }
+                }
+                eatTarget() {
+                    if (!this.target) return;
+                    if (this.target instanceof Fish) {
+                        // Eat another fish
+                        this.target.remove();
+                        this.growth += 0.2;
+                        this.size *= 1.1;
+                        this.width = this.size;
+                        this.height = this.size;
+                        this.element.style.width = `${this.width}px`;
+                        this.element.style.height = `${this.height}px`;
+                    } else {
+                        // Eat food
+                        this.target.remove();
+                        this.growth += 0.05;
+                        if (this.growth > 1.5) this.growth = 1.5;
+                    }
+                    this.target = null;
+                    this.hunger = 0;
+                }
+                isCloseTo(x, y, radius) {
+                    const dx = x - this.x;
+                    const dy = y - this.y;
+                    return (dx * dx + dy * dy) < radius * radius;
+                }
+                remove() {
+                    cancelAnimationFrame(this.animationId);
+                    this.element.remove();
+                    fishList = fishList.filter(f => f !== this);
+                    // Update species count if this was the last of its type
+                    const typesRemaining = new Set(fishList.map(f => f.type));
+                    if (!typesRemaining.has(this.type)) {
+                        speciesSet.delete(this.type);
+                        updateSpeciesCount();
+                    }
+                    updateFishCount();
+                }
+            }
+            // Food class
+            class Food {
+                constructor(x, y) {
+                    this.element = document.createElement('div');
+                    this.element.className = 'food';
+                    this.x = x || Math.random() * window.innerWidth;
+                    this.y = y || Math.random() * window.innerHeight * 0.8 + window.innerHeight * 0.2;
+                    this.element.style.left = `${this.x}px`;
+                    this.element.style.top = `${this.y}px`;
+                    tank.appendChild(this.element);
+                    foodList.push(this);
+                    updateFoodCount();
+                    // Food disappears after some time
+                    this.timeout = setTimeout(() => {
+                        this.remove();
+                    }, 20000);
+                }
+                remove() {
+                    clearTimeout(this.timeout);
+                    this.element.remove();
+                    foodList = foodList.filter(f => f !== this);
+                    updateFoodCount();
+                }
+            }
+            // Create bubbles
+            function createBubble() {
+                if (!bubblesEnabled) return;
+                const bubble = document.createElement('div');
+                bubble.className = 'bubble';
+                const size = Math.random() * 20 + 10;
+                const left = Math.random() * 100;
+                const duration = Math.random() * 15 + 10;
+                const delay = Math.random() * 5;
+                bubble.style.width = `${size}px`;
+                bubble.style.height = `${size}px`;
+                bubble.style.left = `${left}%`;
+                bubble.style.bottom = '0';
+                bubble.style.animationDuration = `${duration}s`;
+                bubble.style.animationDelay = `${delay}s`;
+                tank.appendChild(bubble);
+                // Remove bubble after animation completes
+                setTimeout(() => {
+                    bubble.remove();
+                }, duration * 1000);
+            }
+            // Create plants
+            function createPlants() {
+                if (!plantsEnabled) return;
+                for (let i = 0; i < 10; i++) {
+                    const plant = document.createElement('div');
+                    plant.className = 'plant';
+                    const left = Math.random() * 100;
+                    const height = Math.random() * 100 + 100;
+                    plant.style.left = `${left}%`;
+                    plant.style.height = `${height}px`;
+                    tank.appendChild(plant);
+                }
+            }
+            // Create rocks
+            function createRocks() {
+                if (!rocksEnabled) return;
+                for (let i = 0; i < 5; i++) {
+                    const rock = document.createElement('div');
+                    rock.className = 'rock';
+                    const left = Math.random() * 100;
+                    const width = Math.random() * 100 + 50;
+                    const height = Math.random() * 40 + 20;
+                    rock.style.left = `${left}%`;
+                    rock.style.width = `${width}px`;
+                    rock.style.height = `${height}px`;
+                    tank.appendChild(rock);
+                }
+            }
+            // Toggle lights
+            function toggleLights() {
+                if (lightsEnabled) {
+                    document.body.classList.remove('bg-blue-900');
+                    document.body.classList.add('bg-blue-950');
+                } else {
+                    document.body.classList.remove('bg-blue-950');
+                    document.body.classList.add('bg-blue-900');
+                }
+            }
+            // Update fish count display
+            function updateFishCount() {
+                fishCountElement.textContent = fishList.length;
+            }
+            // Update food count display
+            function updateFoodCount() {
+                foodCountElement.textContent = foodList.length;
+            }
+            // Update species count display
+            function updateSpeciesCount() {
+                speciesCountElement.textContent = speciesSet.size;
+            }
+            // Initialize tank
+            function initTank() {
+                // Clear existing elements
+                while (tank.firstChild) {
+                    tank.removeChild(tank.firstChild);
+                }
+                fishList = [];
+                foodList = [];
+                speciesSet = new Set();
+                if (plantsEnabled) createPlants();
+                if (rocksEnabled) createRocks();
+                // Start fish and bubbles
+                if (fishEnabled) {
+                    for (let i = 0; i < 5; i++) {
+                        setTimeout(() => new Fish(), i * 2000);
+                    }
+                }
+                if (bubblesEnabled) {
+                    setInterval(createBubble, 500);
+                }
+                updateFishCount();
+                updateFoodCount();
+                updateSpeciesCount();
+            }
+            // Control buttons
+            document.getElementById('toggle-bubbles').addEventListener('click', function() {
+                bubblesEnabled = !bubblesEnabled;
+                this.classList.toggle('active');
+            });
+            document.getElementById('toggle-fish').addEventListener('click', function() {
+                fishEnabled = !fishEnabled;
+                this.classList.toggle('active');
+                if (fishEnabled) {
+                    for (let i = 0; i < 3; i++) {
+                        setTimeout(() => new Fish(), i * 1000);
+                    }
+                } else {
+                    fishList.forEach(fish => fish.remove());
+                }
+            });
+            document.getElementById('toggle-plants').addEventListener('click', function() {
+                plantsEnabled = !plantsEnabled;
+                this.classList.toggle('active');
+                if (plantsEnabled) {
+                    createPlants();
+                } else {
+                    document.querySelectorAll('.plant').forEach(plant => plant.remove());
+                }
+            });
+            document.getElementById('toggle-rocks').addEventListener('click', function() {
+                rocksEnabled = !rocksEnabled;
+                this.classList.toggle('active');
+                if (rocksEnabled) {
+                    createRocks();
+                } else {
+                    document.querySelectorAll('.rock').forEach(rock => rock.remove());
+                }
+            });
+            document.getElementById('toggle-lights').addEventListener('click', function() {
+                lightsEnabled = !lightsEnabled;
+                this.classList.toggle('active');
+                toggleLights();
+            });
+            document.getElementById('add-fish').addEventListener('click', function() {
+                new Fish();
+            });
+            document.getElementById('add-special-fish').addEventListener('click', function() {
+                new Fish(true); // Add special fish
+            });
+            document.getElementById('add-food').addEventListener('click', function(e) {
+                // Add food at random position
+                new Food();
+            });
+            // Add food when clicking on tank
+            tank.addEventListener('click', function(e) {
+                if (e.target === tank) {
+                    new Food(e.clientX, e.clientY);
+                }
+            });
+            // Handle window resize
+            window.addEventListener('resize', function() {
+                fishList.forEach(fish => {
+                    // Keep fish within new bounds
+                    fish.x = Math.min(fish.x, window.innerWidth - fish.width);
+                    fish.y = Math.min(fish.y, window.innerHeight - fish.height);
+                    fish.element.style.left = `${fish.x}px`;
+                    fish.element.style.top = `${fish.y}px`;
+                });
+                foodList.forEach(food => {
+                    // Keep food within new bounds
+                    food.x = Math.min(food.x, window.innerWidth);
+                    food.y = Math.min(food.y, window.innerHeight);
+                    food.element.style.left = `${food.x}px`;
+                    food.element.style.top = `${food.y}px`;
+                });
+            });
+            // Initialize the tank
+            initTank();
+            toggleLights();
+        });
+    </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=jofe34/absurd-aquarium" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ make fish unique, have a variety of variations of fins and colores multiple colors for some