Hugging Face's logo

Spaces:
techguy1
/
pretty
Running

App Files Community
pretty / index.html
techguy1's picture
techguy1
Add 3 files
91f45b0 verified
raw
history blame contribute delete
18.4 kB
<!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>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;My AI-Generated Website&lt;/title&gt;
 &lt;link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body class="bg-gray-50"&gt;
 &lt;header class="bg-white shadow-sm"&gt;
 &lt;div class="container mx-auto px-4 py-6"&gt;
 &lt;h1 class="text-3xl font-bold text-blue-600"&gt;Welcome to My Site&lt;/h1&gt;
 &lt;/div&gt;
 &lt;/header&gt;
 &lt;main class="container mx-auto px-4 py-12"&gt;
 &lt;section class="text-center"&gt;
 &lt;h2 class="text-2xl font-semibold mb-4"&gt;Generated by DeepSite AI&lt;/h2&gt;
 &lt;p class="text-gray-600 max-w-2xl mx-auto"&gt;
 This entire website was created automatically based on my simple description.
 &lt;/p&gt;
 &lt;/section&gt;
 &lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</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>