File size: 18,353 Bytes
91f45b0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSite - AI Website Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<header class="bg-white dark:bg-gray-800 shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-8 h-8 text-blue-500">
<path d="M7.809 18.746V24.19H13.254V18.746H7.809z" fill="#FF3270"/>
<path d="M18.746 18.746V24.19H24.19V18.746H18.746z" fill="#861FFF"/>
<path d="M7.809 7.81V13.254H13.254V7.81H7.809z" fill="#097EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.418C4 5.082 5.082 4 6.418 4H14.646c1.117 0 2.057.757 2.335 1.786 1.17-1.107 2.75-1.786 4.488-1.786 3.607 0 6.532 2.924 6.532 6.532 0 1.738-.679 3.318-1.786 4.488.73.278 1.487 1.218 1.487 2.335v8.228c0 1.335-1.082 2.418-2.418 2.418H17.064H14.937H6.418C5.082 28 4 26.918 4 25.582V15.159V14.937V6.418z" fill="black"/>
<path d="M21.468 7.81c-1.503 0-2.722 1.218-2.722 2.722 0 1.503 1.219 2.722 2.722 2.722 1.504 0 2.722-1.219 2.722-2.722 0-1.504-1.218-2.722-2.722-2.722z" fill="#FFD702"/>
</svg>
<span class="text-xl font-bold">DeepSite</span>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-blue-500 transition-colors">Home</a>
<a href="#" class="hover:text-blue-500 transition-colors">Features</a>
<a href="#" class="hover:text-blue-500 transition-colors">Examples</a>
<a href="#" class="hover:text-blue-500 transition-colors">Pricing</a>
</nav>
<button class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</header>
<main class="container mx-auto px-4 py-12">
<section class="text-center max-w-3xl mx-auto mb-16">
<h1 class="text-4xl md:text-5xl font-bold mb-6">
Create Beautiful Websites <span class="gradient-text">With AI</span>
</h1>
<p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
DeepSite lets you create and deploy websites using AI without any coding.
Just provide your ideas, and let DeepSite turn them into a functional website.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors">
Try It Now
</button>
<button class="border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 font-medium py-3 px-6 rounded-lg transition-colors">
Learn More
</button>
</div>
</section>
<section class="mb-16">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
<div class="p-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<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-500">index.html</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-4 rounded overflow-x-auto">
<pre class="text-sm font-mono text-gray-800 dark:text-gray-200"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My AI-Generated Website</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-6">
<h1 class="text-3xl font-bold text-blue-600">Welcome to My Site</h1>
</div>
</header>
<main class="container mx-auto px-4 py-12">
<section class="text-center">
<h2 class="text-2xl font-semibold mb-4">Generated by DeepSite AI</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
This entire website was created automatically based on my simple description.
</p>
</section>
</main>
</body>
</html></code></pre>
</div>
</div>
</div>
</div>
</section>
<section class="grid md:grid-cols-3 gap-8 mb-16">
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
<p class="text-gray-600 dark:text-gray-300">
Generate complete websites in seconds with our powerful AI technology.
</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">No Coding Required</h3>
<p class="text-gray-600 dark:text-gray-300">
Create professional websites without writing a single line of code.
</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
<div class="w-12 h-12 bg-pink-100 dark:bg-pink-900 rounded-full flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Responsive Design</h3>
<p class="text-gray-600 dark:text-gray-300">
All generated websites work perfectly on any device, from mobile to desktop.
</p>
</div>
</section>
<section class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-8 text-white mb-16">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to Build Your Website?</h2>
<p class="mb-6 opacity-90">
Join thousands of creators who are building websites faster than ever before.
</p>
<button class="bg-white text-blue-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition-colors">
Get Started for Free
</button>
</div>
</section>
</main>
<footer class="bg-gray-100 dark:bg-gray-800 py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-8 h-8 text-blue-500">
<path d="M7.809 18.746V24.19H13.254V18.746H7.809z" fill="#FF3270"/>
<path d="M18.746 18.746V24.19H24.19V18.746H18.746z" fill="#861FFF"/>
<path d="M7.809 7.81V13.254H13.254V7.81H7.809z" fill="#097EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.418C4 5.082 5.082 4 6.418 4H14.646c1.117 0 2.057.757 2.335 1.786 1.17-1.107 2.75-1.786 4.488-1.786 3.607 0 6.532 2.924 6.532 6.532 0 1.738-.679 3.318-1.786 4.488.73.278 1.487 1.218 1.487 2.335v8.228c0 1.335-1.082 2.418-2.418 2.418H17.064H14.937H6.418C5.082 28 4 26.918 4 25.582V15.159V14.937V6.418z" fill="black"/>
<path d="M21.468 7.81c-1.503 0-2.722 1.218-2.722 2.722 0 1.503 1.219 2.722 2.722 2.722 1.504 0 2.722-1.219 2.722-2.722 0-1.504-1.218-2.722-2.722-2.722z" fill="#FFD702"/>
</svg>
<span class="text-xl font-bold">DeepSite</span>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-300">
AI-powered website generation
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Features</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Pricing</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Examples</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Blog</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Privacy</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Terms</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">
© 2023 DeepSite. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script>
// Toggle dark mode
function toggleDarkMode() {
const html = document.documentElement;
html.classList.toggle('dark');
localStorage.setItem('darkMode', html.classList.contains('dark'));
}
// Check for saved dark mode preference
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.md\\:hidden');
const mobileMenu = document.querySelector('nav');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</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=techguy1/pretty" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |