|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Crossover Writer</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); |
|
|
} |
|
|
|
|
|
.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 { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
padding-top: 56.25%; |
|
|
} |
|
|
|
|
|
.responsive-iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
bottom: 0; |
|
|
right: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.typewriter h1 { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #3b82f6; |
|
|
white-space: nowrap; |
|
|
margin: 0 auto; |
|
|
letter-spacing: .15em; |
|
|
animation: |
|
|
typing 3.5s steps(40, end), |
|
|
blink-caret .75s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #3b82f6; } |
|
|
} |
|
|
|
|
|
.domain-badge { |
|
|
background: rgba(30, 58, 138, 0.5); |
|
|
border: 1px solid rgba(59, 130, 246, 0.5); |
|
|
border-radius: 20px; |
|
|
padding: 6px 12px; |
|
|
font-size: 0.8rem; |
|
|
margin: 0 4px; |
|
|
display: inline-block; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.domain-badge:hover { |
|
|
background: rgba(59, 130, 246, 0.3); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.feedback-section { |
|
|
background: rgba(30, 41, 59, 0.5); |
|
|
border-radius: 12px; |
|
|
padding: 2rem; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.feedback-input { |
|
|
background: rgba(15, 23, 42, 0.7); |
|
|
border: 1px solid rgba(59, 130, 246, 0.3); |
|
|
color: white; |
|
|
padding: 0.75rem 1rem; |
|
|
border-radius: 8px; |
|
|
width: 100%; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.feedback-input:focus { |
|
|
outline: none; |
|
|
border-color: rgba(59, 130, 246, 0.7); |
|
|
} |
|
|
|
|
|
.submit-btn { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.submit-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
background: rgba(30, 41, 59, 0.9); |
|
|
color: white; |
|
|
padding: 16px; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
|
|
transform: translateY(100px); |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.toast.show { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.security-badge { |
|
|
background: rgba(220, 38, 38, 0.2); |
|
|
border: 1px solid rgba(220, 38, 38, 0.5); |
|
|
color: #f87171; |
|
|
border-radius: 6px; |
|
|
padding: 4px 8px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
margin-left: 8px; |
|
|
} |
|
|
|
|
|
.security-badge i { |
|
|
margin-right: 4px; |
|
|
} |
|
|
|
|
|
.update-card { |
|
|
background: rgba(30, 41, 59, 0.7); |
|
|
border-left: 4px solid #3b82f6; |
|
|
border-radius: 8px; |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.update-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.update-date { |
|
|
color: #93c5fd; |
|
|
font-size: 0.85rem; |
|
|
margin-bottom: 0.5rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.update-date i { |
|
|
margin-right: 6px; |
|
|
} |
|
|
|
|
|
.security-icon { |
|
|
color: #f87171; |
|
|
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"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<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> |
|
|
<h1 class="text-5xl font-bold mb-4 glow-text typewriter">AI Crossover Writer</h1> |
|
|
<p class="text-xl text-blue-300 mb-8">Where your wildest crossover dreams come to life</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="mb-16"> |
|
|
<div class="text-center mb-8"> |
|
|
<p class="text-gray-400 mb-4">Try these working domains:</p> |
|
|
<div class="flex justify-center flex-wrap gap-2"> |
|
|
<span class="domain-badge" onclick="window.open('https://crossoverwriter.on.websim.ai', '_blank')">crossoverwriter.on.websim.ai</span> |
|
|
<span class="domain-badge" onclick="window.open('https://crossoverwriter--andytran.on.websim.ai', '_blank')">crossoverwriter--andytran.on.websim.ai</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-black/30 rounded-2xl overflow-hidden glow-box"> |
|
|
<div class="p-4 bg-gray-900 flex items-center"> |
|
|
<div class="flex space-x-2 mr-4"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="text-sm text-gray-400">crossoverwriter.on.websim.ai</div> |
|
|
</div> |
|
|
<div class="iframe-container"> |
|
|
<iframe class="responsive-iframe" src="https://crossoverwriter.on.websim.ai" allowfullscreen></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<section class="feedback-section glow-box"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-center glow-text">Report Bugs or Leave Feedback</h2> |
|
|
<form id="feedbackForm" class="max-w-lg mx-auto"> |
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-gray-300 mb-2">Name (optional)</label> |
|
|
<input type="text" id="name" class="feedback-input" placeholder="Your name"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-gray-300 mb-2">Email (optional)</label> |
|
|
<input type="email" id="email" class="feedback-input" placeholder="Your email"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-gray-300 mb-2">Your Feedback</label> |
|
|
<textarea id="message" class="feedback-input" rows="4" placeholder="Describe the bug or leave your feedback..." required></textarea> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<button type="submit" class="submit-btn">Submit Feedback</button> |
|
|
</div> |
|
|
</form> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="text-center text-gray-400 text-sm mt-16"> |
|
|
<p>© 2025 AI Crossover Writer. All rights reserved.</p> |
|
|
<p class="mt-2">Powered by advanced AI technology to bring your crossover dreams to life.</p> |
|
|
<div class="flex justify-center space-x-4 mt-4"> |
|
|
<a href="#" class="hover:text-blue-400"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="hover:text-pink-400"><i class="fab fa-discord"></i></a> |
|
|
<a href="#" class="hover:text-red-400"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast" class="toast"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>Preparing your email...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.domain-badge').forEach(badge => { |
|
|
badge.addEventListener('click', function() { |
|
|
const domain = this.textContent.trim(); |
|
|
window.open(`https://${domain}`, '_blank'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('feedbackForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
|
const toast = document.getElementById('toast'); |
|
|
toast.classList.add('show'); |
|
|
|
|
|
|
|
|
const subject = `Feedback for AI Crossover Writer${name ? ` from ${name}` : ''}`; |
|
|
const body = `Feedback Details:\n\n${message}\n\n${email ? `Reply to: ${email}` : ''}`; |
|
|
|
|
|
|
|
|
const encodedSubject = encodeURIComponent(subject); |
|
|
const encodedBody = encodeURIComponent(body); |
|
|
|
|
|
|
|
|
const mailtoLink = `mailto:[email protected],[email protected]?subject=${encodedSubject}&body=${encodedBody}`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
window.location.href = mailtoLink; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.remove('show'); |
|
|
}, 3000); |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
this.reset(); |
|
|
}); |
|
|
</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=huggingfacecurator/ai-crossover-writer-updated" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
