Hugging Face's logo

Spaces:
techydad06
/
starter
Running

App Files Community
starter / index.html
techydad06's picture
techydad06
undefined - Initial Deployment
3ae654c verified
Raw History Blame Contribute Delete
18.8 kB
<!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>