Spaces:

docto41
/

hypersite

Running

File size: 38,443 Bytes

<!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>