|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ArtGenius | AI-Powered Art Design</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#8B5CF6', |
|
|
secondary: '#EC4899', |
|
|
dark: '#1F2937', |
|
|
light: '#F9FAFB' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
|
|
color: #f3f4f6; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.drop-zone { |
|
|
border: 2px dashed #8B5CF6; |
|
|
border-radius: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
background: rgba(30, 41, 59, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.drop-zone.active { |
|
|
border-color: #EC4899; |
|
|
background: rgba(139, 92, 246, 0.1); |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: rgba(30, 41, 59, 0.7); |
|
|
border-radius: 1rem; |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3); |
|
|
} |
|
|
|
|
|
.tool-item { |
|
|
transition: all 0.2s ease; |
|
|
cursor: grab; |
|
|
} |
|
|
|
|
|
.tool-item:active { |
|
|
cursor: grabbing; |
|
|
} |
|
|
|
|
|
.generated-art { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.generated-art:hover { |
|
|
transform: scale(1.03); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.animate-fade-in-up { |
|
|
animation: fadeInUp 0.8s ease-out forwards; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
.delay-100 { |
|
|
animation-delay: 0.1s; |
|
|
} |
|
|
|
|
|
.delay-200 { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); } |
|
|
70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } |
|
|
} |
|
|
|
|
|
.artwork-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.artwork-grid { |
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header class="py-4 px-6 md:px-12"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> |
|
|
<i class="fas fa-palette text-white text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold">Art<span class="gradient-text">Genius</span></h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link font-medium">Home</a> |
|
|
<a href="#" class="nav-link font-medium">Gallery</a> |
|
|
<a href="#" class="nav-link font-medium">Tools</a> |
|
|
<a href="#" class="nav-link font-medium">Pricing</a> |
|
|
<a href="#" class="nav-link font-medium">About</a> |
|
|
</nav> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="px-4 py-2 rounded-full bg-primary hover:bg-purple-700 transition-colors"> |
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Sign In |
|
|
</button> |
|
|
<button class="md:hidden text-2xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6 md:px-12"> |
|
|
<div class="container mx-auto text-center max-w-4xl"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in-up">Transform Your <span class="gradient-text">Creativity</span> with AI</h1> |
|
|
<p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto animate-fade-in-up delay-100"> |
|
|
Drag, drop, and create stunning artworks with the power of AI. Integrates with Open Router and Fal for limitless creative possibilities. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 mb-16"> |
|
|
<button class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold hover:opacity-90 transition-opacity"> |
|
|
Start Creating |
|
|
</button> |
|
|
<button class="px-8 py-3 bg-gray-800 rounded-full font-bold hover:bg-gray-700 transition-colors"> |
|
|
View Gallery |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="drop-zone p-10 mb-8"> |
|
|
<div class="flex flex-col items-center justify-center h-64"> |
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-primary mb-4"></i> |
|
|
<h3 class="text-2xl font-bold mb-2">Drag & Drop Here</h3> |
|
|
<p class="text-gray-400 mb-4">Images, text, or videos to transform</p> |
|
|
<button class="px-6 py-2 bg-gray-700 rounded-full hover:bg-gray-600 transition-colors"> |
|
|
Or Browse Files |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gray-800 px-4 py-2 rounded-full text-sm"> |
|
|
Try it now - it's free! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6 md:px-12 bg-gray-900/50"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Creative <span class="gradient-text">Tools</span></h2> |
|
|
<p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto"> |
|
|
Drag these tools onto the canvas to start creating amazing artwork with AI assistance |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"> |
|
|
<div class="card p-6 text-center tool-item group hover:bg-gray-800/70 transition-all duration-300"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform"> |
|
|
<i class="fas fa-image text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-white">Image Generator</h3> |
|
|
<p class="text-gray-400 text-sm group-hover:text-gray-300">Create visuals from text prompts</p> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 text-center tool-item"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-text-height text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Text Styling</h3> |
|
|
<p class="text-gray-400 text-sm">Transform text into artistic elements</p> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 text-center tool-item"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-video text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Video Effects</h3> |
|
|
<p class="text-gray-400 text-sm">Apply AI filters to videos</p> |
|
|
</div> |
|
|
|
|
|
<div class="card p-6 text-center tool-item"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-magic text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Style Transfer</h3> |
|
|
<p class="text-gray-400 text-sm">Apply artistic styles to your media</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800/50 rounded-2xl p-8 max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-2xl font-bold mb-4">Integrated with <span class="gradient-text">Open Router</span> & <span class="gradient-text">Fal</span></h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Access the most powerful AI models through our seamless integrations. Generate stunning artwork with state-of-the-art technology. |
|
|
</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-primary mr-2"></i> |
|
|
<span>Real-time generation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-primary mr-2"></i> |
|
|
<span>Multiple AI models</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-primary mr-2"></i> |
|
|
<span>High-resolution output</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="bg-gray-700 rounded-xl p-4 mb-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<span class="text-sm text-gray-400">AI Model Console</span> |
|
|
</div> |
|
|
<div class="bg-gray-900 p-4 rounded"> |
|
|
<code class="text-green-400 text-sm"> |
|
|
$ artgen generate --prompt "surreal landscape"<br> |
|
|
> Using model: fal-ai/dreamshaper<br> |
|
|
> Generating high-res artwork...<br> |
|
|
> Artwork generated in 4.2s |
|
|
</code> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -right-4 -top-4 bg-gradient-to-r from-primary to-secondary text-white px-4 py-2 rounded-full text-sm font-bold"> |
|
|
Powered by AI |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6 md:px-12"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">AI-Generated <span class="gradient-text">Gallery</span></h2> |
|
|
<p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto"> |
|
|
Explore artwork created by our community using ArtGenius and AI models |
|
|
</p> |
|
|
|
|
|
<div class="artwork-grid gap-6"> |
|
|
<div class="generated-art rounded-xl overflow-hidden group relative"> |
|
|
<div class="bg-gradient-to-br from-purple-500 to-pink-500 aspect-square"></div> |
|
|
<div class="p-4 bg-gray-800 group-hover:bg-gray-700 transition-colors"> |
|
|
<h4 class="font-bold group-hover:text-primary transition-colors">Surreal Dreamscape</h4> |
|
|
<p class="text-gray-400 text-sm group-hover:text-gray-300 transition-colors">Created with Stable Diffusion</p> |
|
|
</div> |
|
|
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity"> |
|
|
<button class="px-4 py-2 bg-primary rounded-full hover:bg-purple-700 transition-colors"> |
|
|
<i class="fas fa-download mr-2"></i>Download |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="generated-art rounded-xl overflow-hidden"> |
|
|
<div class="bg-gradient-to-br from-blue-400 to-teal-500 aspect-square"></div> |
|
|
<div class="p-4 bg-gray-800"> |
|
|
<h4 class="font-bold">Oceanic Abyss</h4> |
|
|
<p class="text-gray-400 text-sm">Created with Fal Model</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="generated-art rounded-xl overflow-hidden"> |
|
|
<div class="bg-gradient-to-br from-yellow-400 to-red-500 aspect-square"></div> |
|
|
<div class="p-4 bg-gray-800"> |
|
|
<h4 class="font-bold">Desert Mirage</h4> |
|
|
<p class="text-gray-400 text-sm">Created with Open Router</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="generated-art rounded-xl overflow-hidden"> |
|
|
<div class="bg-gradient-to-br from-green-400 to-emerald-600 aspect-square"></div> |
|
|
<div class="p-4 bg-gray-800"> |
|
|
<h4 class="font-bold">Enchanted Forest</h4> |
|
|
<p class="text-gray-400 text-sm">Created with DALL-E</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold hover:opacity-90 transition-opacity"> |
|
|
Explore Full Gallery |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-24 px-6 md:px-12 bg-gradient-to-r from-primary/20 to-secondary/20"> |
|
|
<div class="container mx-auto text-center max-w-3xl"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Start Creating <span class="gradient-text">Today</span></h2> |
|
|
<p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto"> |
|
|
Join thousands of artists and designers transforming their creative process with AI |
|
|
</p> |
|
|
|
|
|
<div class="bg-gray-800 rounded-2xl p-8 inline-block"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-6"> |
|
|
<div class="bg-white text-gray-800 font-bold px-6 py-3 rounded-full pulse"> |
|
|
<i class="fas fa-bolt text-yellow-500 mr-2"></i>Free Forever Plan |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-lg">No credit card required</p> |
|
|
<p class="text-gray-400">Get started in seconds</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 px-6 md:px-12 border-t border-gray-800"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> |
|
|
<i class="fas fa-palette text-white"></i> |
|
|
</div> |
|
|
<h2 class="text-xl font-bold">Art<span class="gradient-text">Genius</span></h2> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
AI-powered art creation platform for designers, artists, and creatives. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Product</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Integrations</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Changelog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Community</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Subscribe</h3> |
|
|
<p class="text-gray-400 mb-4">Get the latest updates and news</p> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="Your email" class="bg-gray-800 rounded-l-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
<button class="bg-primary rounded-r-lg px-4 hover:bg-purple-700 transition-colors"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 ArtGenius. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const dropZone = document.querySelector('.drop-zone'); |
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropZone.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropZone.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropZone.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
dropZone.classList.add('active'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropZone.classList.remove('active'); |
|
|
} |
|
|
|
|
|
dropZone.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
|
|
|
if (files.length) { |
|
|
processFiles(files); |
|
|
} |
|
|
} |
|
|
|
|
|
function processFiles(files) { |
|
|
alert(`Processing ${files.length} file(s)...\n\nThis would be sent to Open Router/Fal for AI processing in a real application.`); |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const toolItems = document.querySelectorAll('.tool-item'); |
|
|
|
|
|
toolItems.forEach(item => { |
|
|
item.setAttribute('draggable', 'true'); |
|
|
|
|
|
item.addEventListener('dragstart', (e) => { |
|
|
e.dataTransfer.setData('text/plain', item.querySelector('h3').textContent); |
|
|
item.classList.add('opacity-50'); |
|
|
}); |
|
|
|
|
|
item.addEventListener('dragend', () => { |
|
|
item.classList.remove('opacity-50'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
dropZone.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
const toolName = e.dataTransfer.getData('text/plain'); |
|
|
if (toolName) { |
|
|
alert(`Adding ${toolName} to canvas...`); |
|
|
} |
|
|
}); |
|
|
</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=zdhpeter/art" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
