index.html

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Setup Wizard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/svelte@3.59.1"></script>
    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .spinner {
            animation: spin 1.5s linear infinite;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
    <div id="app" class="container mx-auto px-4 py-12">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">Project Setup Wizard</h1>
            <p class="text-lg text-gray-600">Select the features you want for your new project</p>
        </div>
        
        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300">
            <!-- Progress Bar -->
            <div class="h-2 bg-gray-200">
                <div id="progress" class="h-full bg-primary progress-bar" style="width: 0%"></div>
            </div>
            
            <!-- Form Container -->
            <div id="form-container" class="p-8">
                <div id="step-1" class="fade-in">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Core Features</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="checkbox checkbox-primary" name="authentication" />
                                        <span class="ml-3 text-lg font-medium">Authentication</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">User signup, login, password reset, and session management</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="checkbox checkbox-primary" name="commerce" />
                                        <span class="ml-3 text-lg font-medium">E-commerce</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Product catalog, shopping cart, and payment processing</p>
                                </div>
                            </div>
                        </label>
                    </div>
                    
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Database Options</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="radio" name="database" class="radio radio-primary" value="sqlite" checked />
                                        <span class="ml-3 text-lg font-medium">SQLite (Local)</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Simple file-based database, great for development and small projects</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="radio" name="database" class="radio radio-primary" value="postgres" />
                                        <span class="ml-3 text-lg font-medium">PostgreSQL</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Powerful relational database for production applications</p>
                                </div>
                            </div>
                        </label>
                    </div>
                    
                    <div class="flex justify-end">
                        <button onclick="nextStep()" class="btn btn-primary px-8">Next</button>
                    </div>
                </div>
                
                <div id="step-2" class="hidden fade-in">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Additional Features</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="checkbox checkbox-primary" name="dashboard" />
                                        <span class="ml-3 text-lg font-medium">User Dashboard</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Personalized dashboard for users with stats and quick actions</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="checkbox checkbox-primary" name="analytics" />
                                        <span class="ml-3 text-lg font-medium">Analytics</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Track user behavior and application metrics</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="checkbox checkbox-primary" name="notifications" />
                                        <span class="ml-3 text-lg font-medium">Notifications</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">In-app and email notification system</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="feature-card cursor-pointer">
                            <div class="card bg-base-100 shadow-md h-full transition-all duration-300">
                                <div class="card-body">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="checkbox checkbox-primary" name="blog" />
                                        <span class="ml-3 text-lg font-medium">Blog System</span>
                                    </div>
                                    <p class="mt-2 text-gray-600">Content management for articles and posts</p>
                                </div>
                            </div>
                        </label>
                    </div>
                    
                    <div class="flex justify-between">
                        <button onclick="prevStep()" class="btn btn-ghost">Back</button>
                        <button onclick="submitForm()" class="btn btn-primary px-8">Generate Project</button>
                    </div>
                </div>
            </div>
            
            <!-- Processing Animation -->
            <div id="processing-container" class="hidden p-12 text-center">
                <div class="flex flex-col items-center justify-center">
                    <div class="spinner mb-6">
                        <svg class="w-16 h-16 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </div>
                    <h2 class="text-2xl font-semibold text-gray-800 mb-2">Setting up your project</h2>
                    <p class="text-gray-600 mb-6">We're adding all the selected features to your project...</p>
                    
                    <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
                        <div id="setup-progress" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                    </div>
                    
                    <div id="status-messages" class="text-left w-full max-w-md mx-auto space-y-2">
                        <!-- Status messages will be added here -->
                    </div>
                </div>
            </div>
            
            <!-- Results -->
            <div id="results-container" class="hidden p-8">
                <div class="card bg-base-100 shadow-lg">
                    <div class="card-body">
                        <div class="text-center">
                            <div class="inline-block p-4 rounded-full bg-green-100 text-green-600 mb-4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <h2 class="text-2xl font-semibold text-gray-800 mb-2">Project Generated Successfully!</h2>
                            <p class="text-gray-600 mb-6">Your project with all selected features is ready to use.</p>
                            
                            <div class="bg-gray-50 rounded-lg p-6 mb-6 text-left">
                                <h3 class="font-medium text-gray-800 mb-3">Next Steps:</h3>
                                <ol class="list-decimal list-inside space-y-2 text-gray-700">
                                    <li>Run <code class="bg-gray-200 px-2 py-1 rounded">npm install</code> to install dependencies</li>
                                    <li>Configure your database connection in <code class="bg-gray-200 px-2 py-1 rounded">.env</code></li>
                                    <li>Run <code class="bg-gray-200 px-2 py-1 rounded">npm run dev</code> to start development server</li>
                                </ol>
                            </div>
                            
                            <button onclick="resetForm()" class="btn btn-primary">Start New Project</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentStep = 1;
        const totalSteps = 2;
        
        function updateProgress() {
            const progress = (currentStep / totalSteps) * 100;
            document.getElementById('progress').style.width = `${progress}%`;
        }
        
        function nextStep() {
            if (currentStep < totalSteps) {
                document.getElementById(`step-${currentStep}`).classList.add('hidden');
                currentStep++;
                document.getElementById(`step-${currentStep}`).classList.remove('hidden');
                updateProgress();
            }
        }
        
        function prevStep() {
            if (currentStep > 1) {
                document.getElementById(`step-${currentStep}`).classList.add('hidden');
                currentStep--;
                document.getElementById(`step-${currentStep}`).classList.remove('hidden');
                updateProgress();
            }
        }
        
        function submitForm() {
            // Show processing animation
            document.getElementById('form-container').classList.add('hidden');
            document.getElementById('processing-container').classList.remove('hidden');
            
            // Simulate processing steps
            simulateProcessing();
        }
        
        function simulateProcessing() {
            const steps = [
                "Initializing project structure...",
                "Configuring authentication system...",
                "Setting up database connection...",
                "Adding e-commerce functionality...",
                "Creating user dashboard components...",
                "Integrating analytics package...",
                "Configuring notification system...",
                "Setting up blog system...",
                "Installing dependencies...",
                "Finalizing project setup..."
            ];
            
            const statusContainer = document.getElementById('status-messages');
            const progressBar = document.getElementById('setup-progress');
            
            let current = 0;
            const total = steps.length;
            
            const interval = setInterval(() => {
                if (current < total) {
                    // Add status message
                    const message = document.createElement('div');
                    message.className = 'flex items-center text-gray-700';
                    message.innerHTML = `
                        <svg class="w-5 h-5 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        ${steps[current]}
                    `;
                    statusContainer.appendChild(message);
                    
                    // Update progress bar
                    const progress = ((current + 1) / total) * 100;
                    progressBar.style.width = `${progress}%`;
                    
                    current++;
                    
                    // Scroll to bottom of messages
                    statusContainer.scrollTop = statusContainer.scrollHeight;
                } else {
                    clearInterval(interval);
                    
                    // After processing is complete, show results
                    setTimeout(() => {
                        document.getElementById('processing-container').classList.add('hidden');
                        document.getElementById('results-container').classList.remove('hidden');
                    }, 1000);
                }
            }, 800);
        }
        
        function resetForm() {
            // Reset form
            document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(input => {
                if (input.name === 'database' && input.value === 'sqlite') {
                    input.checked = true;
                } else {
                    input.checked = false;
                }
            });
            
            // Reset UI
            document.getElementById('results-container').classList.add('hidden');
            document.getElementById('processing-container').classList.add('hidden');
            document.getElementById('form-container').classList.remove('hidden');
            
            // Reset progress
            currentStep = 1;
            document.getElementById('step-2').classList.add('hidden');
            document.getElementById('step-1').classList.remove('hidden');
            updateProgress();
            
            // Clear status messages
            document.getElementById('status-messages').innerHTML = '';
            document.getElementById('setup-progress').style.width = '0%';
        }
    </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=techydad06/starter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>