Spaces:

huggingfacecurator
/

ai-crossover-writer-updated

Running

App Files Files Community

huggingfacecurator commited on 19 days ago

Commit

0ce0e5c

verified ·

1 Parent(s): 42c6dbc

Add 2 files

Browse files

Files changed (2) hide show

index.html +136 -54
prompts.txt +3 -2

index.html CHANGED Viewed

@@ -21,6 +21,11 @@
         .glow-box {
             box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
         }
         .iframe-container {
@@ -183,6 +188,46 @@
             font-size: 1.5rem;
             margin-right: 1rem;
         }
     </style>
 </head>
 <body class="text-gray-100">
@@ -190,7 +235,7 @@
         <!-- Header Section -->
         <header class="text-center mb-16">
             <div class="flex justify-center mb-6">
-                <div class="bg-blue-500/20 p-4 rounded-full glow-box">
                     <i class="fas fa-random text-5xl text-blue-400"></i>
                 </div>
             </div>
@@ -201,72 +246,67 @@
         <!-- Security Update Section -->
         <section class="mb-16">
             <div class="flex items-center justify-center mb-8">
-                <h2 class="text-3xl font-bold text-center glow-text">Security Updates</h2>
                 <span class="security-badge">
-                    <i class="fas fa-shield-alt"></i> IMPORTANT
                 </span>
             </div>
             <div class="max-w-4xl mx-auto">
-                <div class="update-card">
                     <div class="flex items-start">
-                        <div class="security-icon">
-                            <i class="fas fa-bug"></i>
                         </div>
                         <div>
                             <div class="update-date">
-                                <i class="far fa-calendar-alt"></i> Latest Update: April 2025
                             </div>
-                            <h3 class="text-xl font-semibold mb-2">XSS Protection Measures Implemented</h3>
                             <p class="text-gray-300 mb-3">
-                                Due to recent incidents involving "script kiddies" attempting to inject malicious code into our platform,
-                                we've implemented robust Cross-Site Scripting (XSS) protection measures.
                             </p>
-                            <div class="bg-gray-800/50 p-4 rounded-lg mb-3">
-                                <h4 class="font-medium text-red-400 mb-2">
-                                    <i class="fas fa-exclamation-triangle"></i> What happened?
                                 </h4>
                                 <p class="text-gray-300 text-sm">
-                                    Immature individuals ("script kiddies") thought it would be "cool" to try injecting JavaScript code
-                                    that could potentially harm other users' experience. These attacks were amateurish but disruptive.
                                 </p>
                             </div>
-                            <div class="bg-gray-800/50 p-4 rounded-lg">
-                                <h4 class="font-medium text-green-400 mb-2">
-                                    <i class="fas fa-shield-virus"></i> Our Response
-                                </h4>
-                                <ul class="text-gray-300 text-sm list-disc pl-5 space-y-1">
-                                    <li>Implemented strict input sanitization for all user-generated content</li>
-                                    <li>Added Content Security Policy (CSP) headers to prevent unauthorized script execution</li>
-                                    <li>Enhanced server-side validation for all API endpoints</li>
-                                    <li>Added real-time monitoring for suspicious activity</li>
-                                    <li>Improved error handling to prevent information leakage</li>
-                                </ul>
-                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="update-card">
                     <div class="flex items-start">
                         <div class="security-icon">
-                            <i class="fas fa-user-shield"></i>
                         </div>
                         <div>
                             <div class="update-date">
-                                <i class="far fa-calendar-alt"></i> Ongoing Commitment
                             </div>
-                            <h3 class="text-xl font-semibold mb-2">Our Security Promise</h3>
-                            <p class="text-gray-300">
-                                We take security seriously and will continue to monitor and improve our defenses against all types of attacks.
-                                While we understand the curiosity of beginners in cybersecurity, we cannot tolerate actions that disrupt
-                                the experience for our legitimate users.
-                            </p>
-                            <p class="text-gray-400 mt-3 text-sm">
-                                <i class="fas fa-info-circle"></i> If you're interested in ethical hacking, we recommend practicing on
-                                <a href="https://www.hackthebox.com" target="_blank" class="text-blue-400 hover:underline">proper platforms</a>
-                                designed for security research.
                             </p>
                         </div>
                     </div>
                 </div>
@@ -303,28 +343,70 @@
             <h2 class="text-3xl font-bold text-center mb-12 glow-text">Why Choose Our Crossover Writer?</h2>
             <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all">
-                    <div class="text-blue-400 text-4xl mb-4">
-                        <i class="fas fa-brain"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Advanced AI</h3>
-                    <p class="text-gray-300">Powered by cutting-edge AI that understands character personalities and universe rules to create believable crossovers.</p>
                 </div>
-                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all">
-                    <div class="text-purple-400 text-4xl mb-4">
-                        <i class="fas fa-random"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Endless Combinations</h3>
-                    <p class="text-gray-300">Mix and match any characters, worlds, or genres - from sci-fi to fantasy, superheroes to historical figures.</p>
                 </div>
-                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all">
-                    <div class="text-green-400 text-4xl mb-4">
-                        <i class="fas fa-magic"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Creative Inspiration</h3>
-                    <p class="text-gray-300">Break through writer's block with AI-generated crossover ideas that spark your imagination.</p>
                 </div>
             </div>
         </section>

         .glow-box {
             box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+            transition: all 0.3s ease;
+        }
+        .glow-box:hover {
+            box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
         }
         .iframe-container {
             font-size: 1.5rem;
             margin-right: 1rem;
         }
+        .feature-badge {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+            color: white;
+            font-size: 0.7rem;
+            font-weight: bold;
+            padding: 3px 8px;
+            border-radius: 20px;
+            z-index: 10;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+            }
+        }
+        .feature-card {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        .feature-icon {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
     </style>
 </head>
 <body class="text-gray-100">
         <!-- Header Section -->
         <header class="text-center mb-16">
             <div class="flex justify-center mb-6">
+                <div class="bg-blue-500/20 p-4 rounded-full glow-box pulse">
                     <i class="fas fa-random text-5xl text-blue-400"></i>
                 </div>
             </div>
         <!-- Security Update Section -->
         <section class="mb-16">
             <div class="flex items-center justify-center mb-8">
+                <h2 class="text-3xl font-bold text-center glow-text">Latest Updates</h2>
                 <span class="security-badge">
+                    <i class="fas fa-bolt"></i> NEW
                 </span>
             </div>
             <div class="max-w-4xl mx-auto">
+                <!-- Game Crossover Update -->
+                <div class="update-card relative">
+                    <div class="feature-badge">NEW</div>
                     <div class="flex items-start">
+                        <div class="text-blue-400 text-2xl mr-4">
+                            <i class="fas fa-gamepad"></i>
                         </div>
                         <div>
                             <div class="update-date">
+                                <i class="far fa-calendar-alt"></i> May 28, 2025
                             </div>
+                            <h3 class="text-xl font-semibold mb-2">Game Crossover Expansion</h3>
                             <p class="text-gray-300 mb-3">
+                                Yeah, it won't be a crossover if we don't have a script but.. yeah.
                             </p>
+                            <div class="bg-gray-800/50 p-4 rounded-lg">
+                                <h4 class="font-medium text-blue-400 mb-2">
+                                    <i class="fas fa-question-circle"></i> Why Game Crossovers?
                                 </h4>
                                 <p class="text-gray-300 text-sm">
+                                    Games offer unique interactive storytelling opportunities. By combining game characters with shows or other games,
+                                    we unlock new creative possibilities. Imagine Mario in the world of Game of Thrones, or Master Chief teaming up with
+                                    Spider-Man - the combinations are endless!
                                 </p>
                             </div>
                         </div>
                     </div>
                 </div>
+                <!-- Security Update -->
                 <div class="update-card">
                     <div class="flex items-start">
                         <div class="security-icon">
+                            <i class="fas fa-shield-alt"></i>
                         </div>
                         <div>
                             <div class="update-date">
+                                <i class="far fa-calendar-alt"></i> April 2025
                             </div>
+                            <h3 class="text-xl font-semibold mb-2">Security Improvements</h3>
+                            <p class="text-gray-300 mb-3">
+                                We've implemented robust Cross-Site Scripting (XSS) protection measures against amateur attacks.
                             </p>
+                            <div class="bg-gray-800/50 p-4 rounded-lg">
+                                <h4 class="font-medium text-green-400 mb-2">
+                                    <i class="fas fa-shield-virus"></i> Enhanced Protection
+                                </h4>
+                                <ul class="text-gray-300 text-sm list-disc pl-5 space-y-1">
+                                    <li>Strict input sanitization for all user content</li>
+                                    <li>Content Security Policy (CSP) headers</li>
+                                    <li>Improved server-side validation</li>
+                                    <li>Real-time monitoring for suspicious activity</li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>
             <h2 class="text-3xl font-bold text-center mb-12 glow-text">Why Choose Our Crossover Writer?</h2>
             <div class="grid md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all feature-card">
+                    <div class="text-center">
+                        <div class="feature-icon text-blue-400">
+                            <i class="fas fa-brain"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Advanced AI Technology</h3>
+                        <p class="text-gray-300">Our cutting-edge AI understands character personalities and universe rules to create believable crossovers that stay true to the original material.</p>
                     </div>
                 </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all feature-card">
+                    <div class="text-center">
+                        <div class="feature-icon text-purple-400">
+                            <i class="fas fa-random"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Endless Combinations</h3>
+                        <p class="text-gray-300">Mix and match any characters, worlds, or genres - from sci-fi to fantasy, superheroes to historical figures, with seamless integration.</p>
                     </div>
                 </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all feature-card">
+                    <div class="text-center">
+                        <div class="feature-icon text-green-400">
+                            <i class="fas fa-magic"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Creative Inspiration</h3>
+                        <p class="text-gray-300">Break through writer's block with AI-generated crossover ideas that spark your imagination and help you explore new storytelling possibilities.</p>
+                    </div>
+                </div>
+                <!-- Feature 4 -->
+                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all feature-card">
+                    <div class="text-center">
+                        <div class="feature-icon text-yellow-400">
+                            <i class="fas fa-gamepad"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Game Integration</h3>
+                        <p class="text-gray-300">Specialized support for video game characters and worlds, allowing unique crossovers between games and other media with authentic gameplay elements.</p>
+                    </div>
+                </div>
+                <!-- Feature 5 -->
+                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all feature-card">
+                    <div class="text-center">
+                        <div class="feature-icon text-red-400">
+                            <i class="fas fa-book-open"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Rich Storytelling</h3>
+                        <p class="text-gray-300">Generate detailed narratives with proper pacing, character development, and plot arcs that respect both source materials in your crossover.</p>
+                    </div>
+                </div>
+                <!-- Feature 6 -->
+                <div class="bg-gray-800/50 p-6 rounded-xl hover:glow-box transition-all feature-card">
+                    <div class="text-center">
+                        <div class="feature-icon text-pink-400">
+                            <i class="fas fa-users"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Character Consistency</h3>
+                        <p class="text-gray-300">Maintain authentic character voices and behaviors even when placed in unfamiliar settings or interacting with characters from different universes.</p>
                     </div>
                 </div>
             </div>
         </section>

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
-Add some section with update about added XSS attacks and the reason to this because of "script kiddies" think they're cool by inserting code (malicious code, XSS related) that ruins other people's projects.
-Change the "Latest Update" thing to "April 2025" and copyright thing to "2025 AI Crossover Writer". Keep all other text intact including the copyright sign.

+Add updates: Instead of show crossover, why not add game crossover with show or simulator? (also add why) and date this update to be late May 2025. Also, add multilingual support for this space (30+ languages). FIX ALL ISSUES AND IMPROVE IT AND KEEP EVERYTHING INTACT!
+Remove the language selection option and changed the game crossover expansion more to be like: "Yeah, it won't be a crossover if we don't have a script but.. yeah."
+Fix the why choose our crossover writer.. to be consistent and equal.