Hugging Face's logo

Spaces:
docto41
/
hypersite
Running

App Files Community
hypersite / index.html
docto41's picture
docto41
Add 2 files
be85ae4 verified
raw
history blame contribute delete
38.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HyperSite Builder Pro | AI-Powered Website Creation</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>
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.gradient-bg {
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.sidebar {
transition: all 0.3s ease;
}
.preview-iframe {
transform-origin: top left;
transition: transform 0.3s ease;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
#ai-generation-progress {
transition: width 0.5s ease;
}
.domain-checker {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.code-editor {
font-family: 'Courier New', monospace;
background-color: #1e293b;
color: #f8fafc;
}
.line-numbers {
user-select: none;
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-900">HyperSite Pro</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center space-x-8">
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">AI Generator</a>
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Domains</a>
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Export</a>
<button id="publish-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
<i class="fas fa-rocket mr-1"></i> Publish
</button>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button id="mobile-menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">AI Generator</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Domains</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Export</a>
<button class="w-full text-left block px-3 py-2 text-base font-medium text-purple-600">
<i class="fas fa-rocket mr-1"></i> Publish
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="pt-16 flex h-screen">
<!-- Left Sidebar - Components -->
<div class="sidebar w-64 bg-white border-r border-gray-200 overflow-y-auto">
<div class="p-4">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-800">AI Generator</h2>
<button id="refresh-ai" class="text-purple-600 hover:text-purple-800">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Website Type</label>
<select id="website-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
<option>E-commerce</option>
<option>Portfolio</option>
<option>Business</option>
<option>Blog</option>
<option>Landing Page</option>
<option>SAAS</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Industry</label>
<select id="industry-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
<option>Technology</option>
<option>Fashion</option>
<option>Food & Beverage</option>
<option>Health & Wellness</option>
<option>Finance</option>
<option>Education</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Color Scheme</label>
<div class="flex space-x-2">
<div id="color-purple" class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer border-2 border-white shadow-md tooltip">
<div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Purple</div>
</div>
<div id="color-blue" class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer border-2 border-white shadow-md tooltip">
<div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Blue</div>
</div>
<div id="color-green" class="w-8 h-8 rounded-full bg-green-500 cursor-pointer border-2 border-white shadow-md tooltip">
<div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Green</div>
</div>
<div id="color-red" class="w-8 h-8 rounded-full bg-red-500 cursor-pointer border-2 border-white shadow-md tooltip">
<div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Red</div>
</div>
<div id="color-custom" class="w-8 h-8 rounded-full bg-gray-300 cursor-pointer border-2 border-white shadow-md flex items-center justify-center tooltip">
<i class="fas fa-sliders-h text-gray-600 text-xs"></i>
<div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Custom</div>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Content Length</label>
<div class="flex items-center space-x-2">
<input type="range" min="100" max="1000" value="300" class="w-full" id="content-length">
<span class="text-sm text-gray-500" id="content-length-value">300 lines</span>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Additional Features</label>
<div class="space-y-2">
<div class="flex items-center">
<input type="checkbox" id="responsive" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
<label for="responsive" class="ml-2 block text-sm text-gray-700">Responsive Design</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="seo" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
<label for="seo" class="ml-2 block text-sm text-gray-700">SEO Optimized</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="animations" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="animations" class="ml-2 block text-sm text-gray-700">Animations</label>
</div>
</div>
</div>
<button id="generate-site" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md font-medium transition duration-300 flex items-center justify-center pulse-animation">
<i class="fas fa-magic mr-2"></i> Generate Website
</button>
<div class="mt-4 hidden" id="ai-progress-container">
<div class="text-sm text-gray-600 mb-1 flex justify-between">
<span>AI Generation Progress</span>
<span id="ai-progress-percent">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="ai-generation-progress" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<!-- Main Editor Area -->
<div class="flex-1 overflow-auto bg-gray-100 p-6">
<div class="max-w-6xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<div class="flex space-x-4">
<div class="relative">
<button id="domain-btn" class="px-4 py-1.5 bg-purple-600 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-globe mr-2"></i> Domain
</button>
<div class="absolute left-0 mt-2 w-80 bg-white rounded-md shadow-lg z-10 hidden" id="domain-dropdown">
<div class="p-4 domain-checker rounded-t-md">
<h3 class="text-white font-medium mb-2">Get Your Domain</h3>
<div class="flex">
<input type="text" placeholder="yourdomain" class="flex-1 px-3 py-2 rounded-l-md focus:outline-none">
<select class="px-2 py-2 border-l border-gray-300 rounded-r-md focus:outline-none bg-white">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.io</option>
<option>.shop</option>
</select>
</div>
<button id="check-domain" class="w-full mt-3 bg-white text-purple-600 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">
Check Availability
</button>
</div>
<div class="p-4 bg-gray-50">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">Free SSL Included</span>
</div>
<span class="text-sm font-medium">$12.99/yr</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">Privacy Protection</span>
</div>
<span class="text-sm font-medium">Free</span>
</div>
<button id="buy-domain" class="w-full mt-3 bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded-md text-sm font-medium">
Buy & Connect
</button>
</div>
</div>
</div>
<button id="code-editor-btn" class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-code mr-2"></i> Code Editor
</button>
</div>
<div class="flex space-x-2">
<button id="desktop-view" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">
<i class="fas fa-desktop mr-1"></i>
</button>
<button id="tablet-view" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">
<i class="fas fa-tablet-alt mr-1"></i>
</button>
<button id="mobile-view" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">
<i class="fas fa-mobile-alt mr-1"></i>
</button>
<button id="preview-btn" class="px-3 py-1 bg-purple-100 text-purple-600 hover:bg-purple-200 rounded-md text-sm font-medium">
<i class="fas fa-eye mr-1"></i> Preview
</button>
</div>
</div>
<!-- AI Generation Status -->
<div id="ai-generation-status" class="hidden p-4 bg-blue-50 border-b border-blue-100">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-robot text-blue-500"></i>
</div>
<div class="ml-3 flex-1">
<p class="text-sm text-blue-700">
<span class="font-medium">AI is generating your website...</span> This may take a few moments for larger sites.
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button id="dismiss-ai-status" type="button" class="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-blue-50">
<span class="sr-only">Dismiss</span>
<i class="fas fa-times h-5 w-5"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Code Editor (Hidden by default) -->
<div id="code-editor-container" class="hidden">
<div class="flex border-b border-gray-200">
<button id="html-tab" class="px-4 py-2 text-sm font-medium border-b-2 border-purple-500 text-purple-600">index.html</button>
<button id="css-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">styles.css</button>
<button id="js-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">script.js</button>
<div class="ml-auto flex">
<button id="copy-code" class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
<i class="fas fa-copy"></i>
</button>
<button id="download-code" class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
<i class="fas fa-download"></i>
</button>
</div>
</div>
<div class="code-editor p-4 h-96 overflow-auto">
<div class="flex">
<div class="line-numbers pr-4 text-gray-500 text-right select-none">
<!-- Line numbers will be inserted here by JS -->
</div>
<div class="flex-1">
<pre><code id="generated-code">
<!-- Generated code will appear here -->
</code></pre>
</div>
</div>
</div>
</div>
<!-- Visual Editor -->
<div id="visual-editor">
<div id="editor-area" class="p-6 min-h-[80vh]">
<!-- Empty state -->
<div id="empty-state" class="flex flex-col items-center justify-center py-12 text-center">
<div class="mb-6 floating">
<i class="fas fa-robot text-6xl text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">AI-Powered Website Builder</h3>
<p class="text-gray-500 max-w-md mb-6">Describe your website and our AI will generate a complete, professional site up to 1000 lines of code</p>
<button id="try-generator" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center">
<i class="fas fa-magic mr-2"></i> Try AI Generator
</button>
</div>
<!-- This is where AI-generated components will appear -->
<div id="components-container" class="space-y-6 hidden">
<!-- Components will be added here dynamically -->
</div>
</div>
</div>
</div>
</div>
<!-- Right Sidebar - Export & Download -->
<div class="sidebar w-80 bg-white border-l border-gray-200 overflow-y-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Export & Publish</h2>
<div class="mb-6">
<h3 class="font-medium text-gray-700 mb-3">Download Options</h3>
<div class="space-y-3">
<button id="download-html" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
<div class="flex items-center">
<i class="fas fa-file-code text-blue-500 mr-3 text-xl"></i>
<span>HTML Files</span>
</div>
<i class="fas fa-download text-gray-400"></i>
</button>
<button id="download-zip" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
<div class="flex items-center">
<i class="fas fa-file-archive text-purple-500 mr-3 text-xl"></i>
<span>ZIP Archive</span>
</div>
<i class="fas fa-download text-gray-400"></i>
</button>
<button id="github-export" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
<div class="flex items-center">
<i class="fab fa-github text-gray-800 mr-3 text-xl"></i>
<span>GitHub Repository</span>
</div>
<i class="fas fa-external-link-alt text-gray-400"></i>
</button>
</div>
</div>
<div class="mb-6">
<h3 class="font-medium text-gray-700 mb-3">Publish Options</h3>
<div class="space-y-3">
<button id="hyper-hosting" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
<div class="flex items-center">
<i class="fas fa-cloud text-blue-400 mr-3 text-xl"></i>
<span>HyperSite Hosting</span>
</div>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Recommended</span>
</button>
<button id="aws-publish" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
<div class="flex items-center">
<i class="fab fa-aws text-orange-500 mr-3 text-xl"></i>
<span>AWS S3</span>
</div>
<i class="fas fa-external-link-alt text-gray-400"></i>
</button>
<button id="drive-publish" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
<div class="flex items-center">
<i class="fab fa-google-drive text-blue-500 mr-3 text-xl"></i>
<span>Google Drive</span>
</div>
<i class="fas fa-external-link-alt text-gray-400"></i>
</button>
</div>
</div>
<div class="p-4 bg-gray-50 rounded-md border border-gray-200">
<h3 class="font-medium text-gray-700 mb-2">Auto SSL Certificate</h3>
<p class="text-sm text-gray-600 mb-3">Your site will be automatically secured with a free SSL certificate when published.</p>
<div class="flex items-center">
<i class="fas fa-lock text-green-500 mr-2"></i>
<span class="text-sm font-medium">https://yoursite.com</span>
</div>
</div>
<button id="publish-now" class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md font-medium transition duration-300">
<i class="fas fa-rocket mr-2"></i> Publish Now
</button>
</div>
</div>
</div>
<!-- Preview Modal -->
<div id="preview-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">Live Preview</h3>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<span class="h-3 w-3 rounded-full bg-green-400 mr-2"></span>
<span class="text-sm text-gray-600">SSL Secured</span>
</div>
<button id="close-preview" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="mt-2">
<iframe id="site-preview" class="w-full h-[80vh] border border-gray-200 rounded-md" src="about:blank"></iframe>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button id="publish-from-preview" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
<i class="fas fa-cloud-upload-alt mr-2"></i> Publish Now
</button>
<button id="download-from-preview" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
<i class="fas fa-download mr-2"></i> Download ZIP
</button>
</div>
</div>
</div>
</div>
<!-- Success Notification -->
<div id="success-notification" class="fixed bottom-4 right-4 hidden">
<div class="bg-green-500 text-white px-4 py-3 rounded-md shadow-lg flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-check-circle"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium" id="success-message">Operation completed successfully!</p>
</div>
<div class="ml-auto pl-3">
<button id="dismiss-notification" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Update content length display
const contentLength = document.getElementById('content-length');
const contentLengthValue = document.getElementById('content-length-value');
contentLength.addEventListener('input', function() {
contentLengthValue.textContent = `${this.value} lines`;
});
// Domain dropdown toggle
const domainButton = document.getElementById('domain-btn');
const domainDropdown = document.getElementById('domain-dropdown');
domainButton.addEventListener('click', function(e) {
e.stopPropagation();
domainDropdown.classList.toggle('hidden');
});
document.addEventListener('click', function() {
domainDropdown.classList.add('hidden');
});
// Code editor toggle
const codeEditorButton = document.getElementById('code-editor-btn');
const codeEditorContainer = document.getElementById('code-editor-container');
const visualEditor = document.getElementById('visual-editor');
codeEditorButton.addEventListener('click', function() {
codeEditorContainer.classList.toggle('hidden');
visualEditor.classList.toggle('hidden');
if (!codeEditorContainer.classList.contains('hidden')) {
// Generate line numbers when code editor is shown
const lineNumbers = document.querySelector('.line-numbers');
lineNumbers.innerHTML = '';
// Add line numbers (simulating 1000 lines for demo)
for (let i = 1; i <= 1000; i++) {
const lineNumber = document.createElement('div');
lineNumber.textContent = i;
lineNumbers.appendChild(lineNumber);
}
// Simulate generated code (in a real app this would be the actual generated code)
const generatedCode = document.getElementById('generated-code');
generatedCode.textContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Generated Website</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom styles generated by AI */
.hero-section {
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-900">AI Generated</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center space-x-8">
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a>
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Pricing</a>
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section text-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-5xl font-bold mb-6 animate-fade-in">Welcome to Your AI-Generated Website</h1>
<p class="text-xl mb-8 max-w-3xl mx-auto animate-fade-in">This complete website was generated automatically with 1000+ lines of clean, responsive code.</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300 animate-fade-in">
Get Started
</button>
<button class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition duration-300 animate-fade-in">
Learn More
</button>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Amazing Features</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Everything you need to succeed online</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-bolt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3 text-center">Lightning Fast</h3>
<p class="text-gray-600 text-center">Optimized for speed with clean code and modern techniques.</p>
</div>
<div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-mobile-alt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3 text-center">Fully Responsive</h3>
<p class="text-gray-600 text-center">Looks perfect on all devices from mobile to desktop.</p>
</div>
<div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-search text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3 text-center">SEO Ready</h3>
<p class="text-gray-600 text-center">Built with search engine optimization best practices.</p>
</div>
</div>
</div>
</section>
<!-- More sections would continue here... -->
<!-- This is just a sample - the AI would generate 1000+ lines of complete website code -->
<script src="script.js"></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=docto41/hypersite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>