Spaces:

Captaindreamer
/

pirate-dreamers-cove

Running

App Files Files Community

Captaindreamer commited on May 25

Commit

f6304fc

verified ·

1 Parent(s): f83170c

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: pirate-dreamers-cove
+emoji: 🐳
+colorFrom: green
 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,644 @@
-<!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>Captain Dreamer - The Legendary Pirate</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>
+        .flag-upload {
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+        }
+        .flag-upload input[type="file"] {
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: #f59e0b;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .quote-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .quote-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        @media (max-width: 768px) {
+            .parallax {
+                background-attachment: scroll;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans">
+    <!-- Flag Upload Modal -->
+    <div id="flagModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-amber-400">Upload Your Pirate Flag</h3>
+                <button onclick="closeFlagModal()" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <div class="flag-upload bg-gray-700 rounded-lg p-4 text-center cursor-pointer border-2 border-dashed border-gray-600 hover:border-amber-400 transition">
+                    <i class="fas fa-flag text-4xl mb-2 text-amber-400"></i>
+                    <p class="mb-2">Click to upload your pirate flag</p>
+                    <span class="text-sm text-gray-400">PNG, JPG (Max 2MB)</span>
+                    <input type="file" id="flagInput" accept="image/*" onchange="handleFlagUpload()">
+                </div>
+            </div>
+            <div id="flagPreviewContainer" class="hidden mb-4">
+                <p class="text-sm mb-2">Flag Preview:</p>
+                <img id="flagPreview" src="" alt="Flag Preview" class="max-h-32 mx-auto">
+            </div>
+            <button onclick="saveFlag()" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded transition">
+                Set as Flag
+            </button>
+        </div>
+    </div>
+    <!-- Header with Flag -->
+    <header class="relative overflow-hidden">
+        <div class="absolute inset-0 bg-black opacity-50"></div>
+        <div id="flagContainer" class="absolute top-4 left-4 z-10 w-24 h-16 bg-gray-800 flex items-center justify-center rounded">
+            <i class="fas fa-skull-crossbones text-3xl text-amber-500"></i>
+            <button onclick="openFlagModal()" class="absolute -bottom-2 -right-2 bg-amber-500 rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-amber-600 transition">
+                <i class="fas fa-edit"></i>
+            </button>
+        </div>
+        <div class="relative z-1 container mx-auto px-4 py-16 text-center">
+            <h1 class="text-5xl md:text-7xl font-bold mb-4 text-amber-400">CAPTAIN DREAMER</h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8">The Most Legendary Pirate of the Seven Seas</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#personality" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105">
+                    <i class="fas fa-brain mr-2"></i> Personality
+                </a>
+                <a href="#quotes" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105">
+                    <i class="fas fa-quote-left mr-2"></i> Quotes
+                </a>
+            </div>
+        </div>
+    </header>
+    <!-- Navigation -->
+    <nav class="sticky top-0 bg-gray-800 shadow-lg z-40">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center py-3">
+                <div class="flex items-center space-x-4">
+                    <a href="#" class="text-amber-400 font-bold text-xl flex items-center">
+                        <i class="fas fa-skull-crossbones mr-2"></i> Dreamer
+                    </a>
+                </div>
+                <div class="hidden md:flex space-x-6">
+                    <a href="#personality" class="nav-link text-white hover:text-amber-400">Personality</a>
+                    <a href="#quotes" class="nav-link text-white hover:text-amber-400">Quotes</a>
+                    <a href="#gallery" class="nav-link text-white hover:text-amber-400">Gallery</a>
+                </div>
+                <button class="md:hidden text-white focus:outline-none" id="mobileMenuButton">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+            <div class="md:hidden hidden py-2" id="mobileMenu">
+                <a href="#personality" class="block py-2 text-white hover:text-amber-400">Personality</a>
+                <a href="#quotes" class="block py-2 text-white hover:text-amber-400">Quotes</a>
+                <a href="#gallery" class="block py-2 text-white hover:text-amber-400">Gallery</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main>
+        <!-- Personality Section -->
+        <section id="personality" class="py-16 bg-gray-900">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl md:text-4xl font-bold text-amber-400 mb-4">Personality</h2>
+                    <div class="w-24 h-1 bg-amber-500 mx-auto"></div>
+                </div>
+                <div class="grid md:grid-cols-1 gap-8">
+                    <div class="bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-xl transition">
+                        <div class="text-amber-400 text-4xl mb-6 text-center">
+                            <i class="fas fa-user"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold text-white mb-4 text-center">The True Nature of Captain Dreamer</h3>
+                        <p class="text-gray-300 text-lg mb-6">
+                            Goofy and dumb on the outside, Captain Dreamer presents himself as a carefree, bumbling pirate who seems more likely to trip over his own feet than command a ship. His exaggerated clumsiness and silly antics often make enemies underestimate him, but this is all part of his clever ruse.
+                        </p>
+                        <p class="text-gray-300 text-lg mb-6">
+                            Beneath this facade lies a sharp mind that never stops analyzing. He sees patterns others miss, anticipates moves before they're made, and always has multiple backup plans. Though he appears weak, he possesses surprising strength and skill in battle - when he chooses to reveal it.
+                        </p>
+                        <p class="text-gray-300 text-lg mb-6">
+                            His deepest loyalty is to his crew, whom he loves fiercely. He would sacrifice anything for them, though he'd never admit it in so many words. His leadership style is unorthodox but effective - he leads with humor and heart rather than fear.
+                        </p>
+                        <p class="text-gray-300 text-lg">
+                            The only authorities he recognizes are God and his mother (who still scolds him for his life choices). He bows to no king, no navy, no pirate code except his own moral compass. This stubborn independence has gotten him into trouble more times than he can count, but he wouldn't have it any other way.
+                        </p>
+                    </div>
+                </div>
+                <div class="mt-12 bg-gray-800 p-8 rounded-lg shadow-lg">
+                    <h3 class="text-2xl font-bold text-white mb-6 text-center">Captain's Code</h3>
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div class="flex items-start">
+                            <div class="text-amber-400 mr-4 mt-1">
+                                <i class="fas fa-check-circle text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold text-white mb-2">Respect the Sea</h4>
+                                <p class="text-gray-300">
+                                    The ocean gives and takes - never forget you're at her mercy. Never pollute her waters
+                                    or disrespect her power.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="text-amber-400 mr-4 mt-1">
+                                <i class="fas fa-check-circle text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold text-white mb-2">Honor Among Thieves</h4>
+                                <p class="text-gray-300">
+                                    A pirate's word is binding. Deceit is for politicians and merchants - we steal openly
+                                    and with pride.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="text-amber-400 mr-4 mt-1">
+                                <i class="fas fa-check-circle text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold text-white mb-2">Protect the Weak</h4>
+                                <p class="text-gray-300">
+                                    Only prey upon those who can defend themselves. The helpless deserve our protection,
+                                    not our predation.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="text-amber-400 mr-4 mt-1">
+                                <i class="fas fa-check-circle text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold text-white mb-2">Freedom Above All</h4>
+                                <p class="text-gray-300">
+                                    No man should be shackled, whether by chains or by laws. The open sea is the only
+                                    true home for free souls.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Quotes Section -->
+        <section id="quotes" class="py-16 bg-gray-800 parallax" style="background-image: url('https://images.unsplash.com/photo-1508514177221-188e1e464088?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Legendary Quotes</h2>
+                    <div class="w-24 h-1 bg-amber-500 mx-auto"></div>
+                </div>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div class="quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
+                        <div class="text-amber-400 text-3xl mb-4">
+                            <i class="fas fa-quote-left"></i>
+                        </div>
+                        <p class="text-white italic mb-4">
+                            "A ship in harbor is safe, but that's not what ships are built for. And neither are pirates."
+                        </p>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-skull"></i>
+                            </div>
+                            <div>
+                                <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                                <p class="text-gray-400 text-sm">During the Battle of Black Cove</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
+                        <div class="text-amber-400 text-3xl mb-4">
+                            <i class="fas fa-quote-left"></i>
+                        </div>
+                        <p class="text-white italic mb-4">
+                            "Gold is nice, but freedom is priceless. That's why I steal both."
+                        </p>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-coins"></i>
+                            </div>
+                            <div>
+                                <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                                <p class="text-gray-400 text-sm">To the Governor of Tortuga</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
+                        <div class="text-amber-400 text-3xl mb-4">
+                            <i class="fas fa-quote-left"></i>
+                        </div>
+                        <p class="text-white italic mb-4">
+                            "The only rules that matter are these: what a man can do and what a man can't do."
+                        </p>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-book"></i>
+                            </div>
+                            <div>
+                                <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                                <p class="text-gray-400 text-sm">Pirate Code, Article 1</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
+                        <div class="text-amber-400 text-3xl mb-4">
+                            <i class="fas fa-quote-left"></i>
+                        </div>
+                        <p class="text-white italic mb-4">
+                            "I'm not a bad man. I'm just a pirate who's exceptionally good at his job."
+                        </p>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-grin"></i>
+                            </div>
+                            <div>
+                                <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                                <p class="text-gray-400 text-sm">To his First Mate</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
+                        <div class="text-amber-400 text-3xl mb-4">
+                            <i class="fas fa-quote-left"></i>
+                        </div>
+                        <p class="text-white italic mb-4">
+                            "The horizon is just the edge of tomorrow's adventure."
+                        </p>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-sun"></i>
+                            </div>
+                            <div>
+                                <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                                <p class="text-gray-400 text-sm">Journal Entry</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
+                        <div class="text-amber-400 text-3xl mb-4">
+                            <i class="fas fa-quote-left"></i>
+                        </div>
+                        <p class="text-white italic mb-4">
+                            "They call me a criminal. I prefer the term 'self-employed naval consultant'."
+                        </p>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-gavel"></i>
+                            </div>
+                            <div>
+                                <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                                <p class="text-gray-400 text-sm">Courtroom Testimony</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-12 text-center">
+                    <button onclick="addNewQuote()" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105">
+                        <i class="fas fa-plus mr-2"></i> Add Your Own Quote
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- Gallery Section -->
+        <section id="gallery" class="py-16 bg-gray-900">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl md:text-4xl font-bold text-amber-400 mb-4">Gallery</h2>
+                <div class="w-24 h-1 bg-amber-500 mx-auto"></div>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="group relative overflow-hidden rounded-lg shadow-lg">
+                    <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1368&q=80"
+                         alt="Captain Dreamer's Ship"
+                         class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
+                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
+                        <p class="text-white text-lg font-bold">The Golden Revenge</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-lg shadow-lg">
+                    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Captain's Treasure"
+                         class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
+                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
+                        <p class="text-white text-lg font-bold">Dreamer's Treasure</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-lg shadow-lg">
+                    <img src="https://images.unsplash.com/photo-1563291074-ce0c0f8aeea7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Pirate Weapons"
+                         class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
+                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
+                        <p class="text-white text-lg font-bold">Dreamer's Arsenal</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-lg shadow-lg">
+                    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Pirate Map"
+                         class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
+                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
+                        <p class="text-white text-lg font-bold">Secret Maps</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-lg shadow-lg">
+                    <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1368&q=80"
+                         alt="Pirate Crew"
+                         class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
+                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
+                        <p class="text-white text-lg font-bold">The Crew</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-lg shadow-lg">
+                    <div class="w-full h-64 bg-gray-800 flex items-center justify-center">
+                        <div class="text-center p-4">
+                            <i class="fas fa-plus text-4xl text-amber-400 mb-3"></i>
+                            <p class="text-white">Upload Your Own Image</p>
+                            <input type="file" id="galleryUpload" class="hidden" accept="image/*" onchange="handleGalleryUpload(event)">
+                            <button onclick="document.getElementById('galleryUpload').click()" class="mt-3 bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded transition">
+                                Choose File
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Banner Upload Section -->
+    <section class="py-16 bg-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold text-amber-400 mb-4">Customize Your Banner</h2>
+                <div class="w-24 h-1 bg-amber-500 mx-auto"></div>
+            </div>
+            <div class="bg-gray-700 rounded-lg p-8 max-w-4xl mx-auto">
+                <div id="bannerPreview" class="relative h-64 mb-6 rounded-lg overflow-hidden bg-gray-900 flex items-center justify-center">
+                    <img id="bannerImage" src="" alt="Banner Preview" class="hidden w-full h-full object-cover">
+                    <p class="text-gray-400 text-lg">Banner Preview</p>
+                </div>
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <div class="flex-1">
+                        <label class="block text-gray-300 mb-2">Banner Text</label>
+                        <input type="text" id="bannerText" placeholder="Enter banner text" class="w-full bg-gray-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-amber-500">
+                    </div>
+                    <div class="flex-1">
+                        <label class="block text-gray-300 mb-2">Upload Banner Image</label>
+                        <div class="flex">
+                            <input type="file" id="bannerUpload" class="hidden" accept="image/*" onchange="handleBannerUpload(event)">
+                            <button onclick="document.getElementById('bannerUpload').click()" class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-l transition">
+                                Choose File
+                            </button>
+                            <input type="text" id="bannerFileName" placeholder="No file chosen" class="flex-1 bg-gray-600 text-white px-4 py-2 rounded-r focus:outline-none" readonly>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6 flex justify-center">
+                    <button onclick="updateBanner()" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105">
+                        <i class="fas fa-save mr-2"></i> Save Banner
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+<!-- Footer -->
+<footer class="bg-gray-900 py-8 border-t border-gray-800">
+    <div class="container mx-auto px-4">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-4 md:mb-0">
+                <a href="#" class="text-amber-400 font-bold text-xl flex items-center">
+                    <i class="fas fa-skull-crossbones mr-2"></i> Captain Dreamer
+                </a>
+                <p class="text-gray-400 mt-2">The Legend Lives On</p>
+            </div>
+            <div class="flex space-x-6">
+                <a href="#" class="text-gray-400 hover:text-amber-400 transition">
+                    <i class="fab fa-twitter text-xl"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-amber-400 transition">
+                    <i class="fab fa-instagram text-xl"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-amber-400 transition">
+                    <i class="fab fa-youtube text-xl"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-amber-400 transition">
+                    <i class="fab fa-discord text-xl"></i>
+                </a>
+            </div>
+        </div>
+        <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
+            <p>© 2023 Captain Dreamer. All rights reserved. | Designed with <i class="fas fa-heart text-red-500"></i> by the crew</p>
+        </div>
+    </div>
+</footer>
+<script>
+    // Mobile menu toggle
+    document.getElementById('mobileMenuButton').addEventListener('click', function() {
+        const menu = document.getElementById('mobileMenu');
+        menu.classList.toggle('hidden');
+    });
+    // Smooth scrolling for navigation links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+    // Flag upload functionality
+    function openFlagModal() {
+        document.getElementById('flagModal').classList.remove('hidden');
+    }
+    function closeFlagModal() {
+        document.getElementById('flagModal').classList.add('hidden');
+        document.getElementById('flagPreviewContainer').classList.add('hidden');
+    }
+    function handleFlagUpload() {
+        const input = document.getElementById('flagInput');
+        const preview = document.getElementById('flagPreview');
+        const previewContainer = document.getElementById('flagPreviewContainer');
+        if (input.files && input.files[0]) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                preview.src = e.target.result;
+                previewContainer.classList.remove('hidden');
+            }
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+    function saveFlag() {
+        const preview = document.getElementById('flagPreview');
+        const flagContainer = document.getElementById('flagContainer');
+        if (preview.src) {
+            flagContainer.innerHTML = `
+                <img src="${preview.src}" alt="Pirate Flag" class="w-full h-full object-cover rounded">
+                <button onclick="openFlagModal()" class="absolute -bottom-2 -right-2 bg-amber-500 rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-amber-600 transition">
+                    <i class="fas fa-edit"></i>
+                </button>
+            `;
+        }
+        closeFlagModal();
+    }
+    // Quote functionality
+    function addNewQuote() {
+        const quote = prompt("Enter Captain Dreamer's new quote:");
+        if (quote) {
+            const author = prompt("Enter the context (when/where it was said):");
+            const quotesContainer = document.querySelector('#quotes .grid');
+            const newQuote = document.createElement('div');
+            newQuote.className = 'quote-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg';
+            newQuote.innerHTML = `
+                <div class="text-amber-400 text-3xl mb-4">
+                    <i class="fas fa-quote-left"></i>
+                </div>
+                <p class="text-white italic mb-4">"${quote}"</p>
+                <div class="flex items-center">
+                    <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-skull"></i>
+                    </div>
+                    <div>
+                        <p class="text-amber-400 font-semibold">Captain Dreamer</p>
+                        <p class="text-gray-400 text-sm">${author || 'New addition'}</p>
+                    </div>
+                </div>
+            `;
+            quotesContainer.appendChild(newQuote);
+            newQuote.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            // Add hover effect to the new quote
+            newQuote.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-5px)';
+                this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.2)';
+            });
+            newQuote.addEventListener('mouseleave', function() {
+                this.style.transform = '';
+                this.style.boxShadow = '';
+            });
+        }
+    }
+    // Gallery upload functionality
+    function handleGalleryUpload(event) {
+        const input = event.target;
+        const fileName = input.files[0] ? input.files[0].name : 'No file chosen';
+        document.getElementById('galleryFileName').textContent = fileName;
+        if (input.files && input.files[0]) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                // Create new gallery item
+                const galleryContainer = document.querySelector('#gallery .grid');
+                const newGalleryItem = document.createElement('div');
+                newGalleryItem.className = 'group relative overflow-hidden rounded-lg shadow-lg';
+                newGalleryItem.innerHTML = `
+                    <img src="${e.target.result}"
+                         alt="Uploaded Image"
+                         class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
+                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
+                        <p class="text-white text-lg font-bold">New Addition</p>
+                    </div>
+                `;
+                // Insert before the upload button
+                galleryContainer.insertBefore(newGalleryItem, galleryContainer.lastElementChild);
+                // Scroll to the new item
+                newGalleryItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+    // Banner upload functionality
+    function handleBannerUpload(event) {
+        const input = event.target;
+        const fileName = input.files[0] ? input.files[0].name : 'No file chosen';
+        document.getElementById('bannerFileName').value = fileName;
+        if (input.files && input.files[0]) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const bannerImage = document.getElementById('bannerImage');
+                bannerImage.src = e.target.result;
+                bannerImage.classList.remove('hidden');
+                const bannerPreview = document.getElementById('bannerPreview');
+                bannerPreview.querySelector('p').classList.add('hidden');
+            }
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+    function updateBanner() {
+        const bannerText = document.getElementById('bannerText').value;
+        const bannerImage = document.getElementById('bannerImage');
+        if (bannerText) {
+            alert(`Banner updated with text: "${bannerText}"${bannerImage.src ? ' and new image' : ''}`);
+        } else if (bannerImage.src) {
+            alert('Banner image updated');
+        } else {
+            alert('Please add text or upload an image for the banner');
+        }
+    }
+</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=Captaindreamer/pirate-dreamers-cove" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ can you remove capetain dreamers legend for now?
2	+ remove Brilliant Strategist Captain Dreamer's mind is as sharp as his cutlass. He can outmaneuver any navy, predict storms days in advance, and always has three escape plans ready before attacking. Loyal to His Crew While feared by enemies, Dreamer is beloved by his crew. He shares all plunder equally, never leaves a man behind, and would rather walk the plank himself than see his crew suffer. Charismatic Rogue With a wink and a smile, Dreamer can charm his way out of (or into) any situation. His quick wit and silver tongue are as legendary as his swordsmanship. and put this in one box "Goofy and dumb and weak on the outside tho inside he deeply loves his crew he is sharp minded and he wont bow nor listen to any commands from anyone only ones he will listen to are God and His mother he is also very powerfull in battles