feat: implement core Go application with web server
- Add Go modules with required dependencies (Gin, UUID, JWT, etc.) - Implement main web server with landing page endpoint - Add comprehensive API endpoints for health and status - Include proper error handling and request validation - Set up CORS middleware and security headers
This commit is contained in:
YourDreamNameHere
1592
output/web/templates/accessible_landing.html
Normal file
1592
output/web/templates/accessible_landing.html
Normal file
File diff suppressed because it is too large
Load Diff
328
output/web/templates/index.html
Normal file
328
output/web/templates/index.html
Normal file
@@ -0,0 +1,328 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>YourDreamNameHere - Sovereign Data Hosting</title>
|
||||
<meta name="description" content="Launch your own sovereign data hosting business with automated domain registration, VPS provisioning, and Cloudron installation.">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<a href="/" class="nav-logo">
|
||||
<img src="/static/images/logo.svg" alt="YourDreamNameHere" class="logo-img">
|
||||
<span class="logo-text">YourDreamNameHere</span>
|
||||
</a>
|
||||
|
||||
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#features" class="nav-link">Features</a></li>
|
||||
<li><a href="#pricing" class="nav-link">Pricing</a></li>
|
||||
<li><a href="#how-it-works" class="nav-link">How It Works</a></li>
|
||||
<li><a href="/login" class="nav-link">Login</a></li>
|
||||
<li><a href="/register" class="btn btn-primary">Get Started</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Launch Your Sovereign Data Hosting Business</h1>
|
||||
<p class="hero-subtitle">
|
||||
Transform ideas into fully operational hosting platforms with automated domain registration,
|
||||
VPS provisioning, and Cloudron installation - all for $250/month.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="/register" class="btn btn-primary btn-large">Start Your Journey</a>
|
||||
<a href="#how-it-works" class="btn btn-secondary btn-large">Learn More</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">3</span>
|
||||
<span class="stat-label">Simple Steps</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">30</span>
|
||||
<span class="stat-label">Minute Setup</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">100%</span>
|
||||
<span class="stat-label">Sovereign</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="features" class="features">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Everything You Need to Succeed</h2>
|
||||
<p class="section-subtitle">Our platform handles the technical complexity so you can focus on your business</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Domain Registration</h3>
|
||||
<p class="feature-description">Automatic domain registration through OVH with DNS configuration included.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">VPS Provisioning</h3>
|
||||
<p class="feature-description">Instant VPS deployment with optimized security configurations and performance.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Cloudron Installation</h3>
|
||||
<p class="feature-description">Automated Cloudron setup with application marketplace and user management.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
|
||||
<line x1="1" y1="10" x2="23" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Back Office</h3>
|
||||
<p class="feature-description">Dolibarr integration for complete business management and invoicing.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Security First</h3>
|
||||
<p class="feature-description">Enterprise-grade security with automatic updates and monitoring.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">24/7 Support</h3>
|
||||
<p class="feature-description">Expert support whenever you need it to ensure your business runs smoothly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="how-it-works" class="how-it-works">
|
||||
<div class="container">
|
||||
<h2 class="section-title">How It Works</h2>
|
||||
<p class="section-subtitle">Launch your hosting business in three simple steps</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h3 class="step-title">Sign Up & Choose Domain</h3>
|
||||
<p class="step-description">Create your account and select your perfect domain name. We'll check availability in real-time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h3 class="step-title">Complete Payment</h3>
|
||||
<p class="step-description">Secure payment through Stripe. Your subscription includes everything - no hidden fees.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h3 class="step-title">Receive Your Cloudron Invite</h3>
|
||||
<p class="step-description">Sit back while we handle everything. You'll receive an email to complete your Cloudron setup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing" class="pricing">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Simple, Transparent Pricing</h2>
|
||||
<p class="section-subtitle">One price for everything you need to launch your hosting business</p>
|
||||
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-header">
|
||||
<h3 class="pricing-title">Sovereign Hosting</h3>
|
||||
<div class="pricing-price">
|
||||
<span class="currency">$</span>
|
||||
<span class="amount">250</span>
|
||||
<span class="period">/month</span>
|
||||
</div>
|
||||
<p class="pricing-description">Complete hosting business solution</p>
|
||||
</div>
|
||||
|
||||
<ul class="pricing-features">
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Domain Registration (OVH)
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
VPS Provisioning & Setup
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Cloudron Installation
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
DNS Configuration
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
SSL Certificate Setup
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Admin Email Invitation
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Dolibarr Back Office
|
||||
</li>
|
||||
<li class="feature-included">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
24/7 Technical Support
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="pricing-action">
|
||||
<a href="/register" class="btn btn-primary btn-large">Get Started Now</a>
|
||||
<p class="pricing-guarantee">Cancel anytime • No setup fees • No hidden costs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">Ready to Launch Your Hosting Business?</h2>
|
||||
<p class="cta-subtitle">Join the sovereign hosting revolution today</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/register" class="btn btn-primary btn-large">Start Your Free Trial</a>
|
||||
<a href="/contact" class="btn btn-secondary btn-large">Contact Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<div class="footer-logo">
|
||||
<img src="/static/images/logo.svg" alt="YourDreamNameHere" class="logo-img">
|
||||
<span class="logo-text">YourDreamNameHere</span>
|
||||
</div>
|
||||
<p class="footer-description">
|
||||
Empowering entrepreneurs to launch sovereign data hosting businesses with automated infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3 class="footer-title">Product</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#pricing">Pricing</a></li>
|
||||
<li><a href="#how-it-works">How It Works</a></li>
|
||||
<li><a href="/api/docs">API Documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3 class="footer-title">Company</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/about">About Us</a></li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
<li><a href="/careers">Careers</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3 class="footer-title">Support</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/help">Help Center</a></li>
|
||||
<li><a href="/status">System Status</a></li>
|
||||
<li><a href="/privacy">Privacy Policy</a></li>
|
||||
<li><a href="/terms">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 YourDreamNameHere.com. All rights reserved.</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Twitter">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="LinkedIn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/>
|
||||
<rect x="2" y="9" width="4" height="12"/>
|
||||
<circle cx="4" cy="4" r="2"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/minimal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
523
output/web/templates/landing.html
Normal file
523
output/web/templates/landing.html
Normal file
@@ -0,0 +1,523 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>YourDreamNameHere - Launch Your Sovereign Hosting Business</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary-color: #10b981;
|
||||
--text-dark: #1f2937;
|
||||
--text-light: #6b7280;
|
||||
--bg-light: #f9fafb;
|
||||
--bg-white: #ffffff;
|
||||
--border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-dark);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
padding: 1rem 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 120px 0 80px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.hero .subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.95;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
animation: fadeInUp 0.8s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
/* CTA Form */
|
||||
.cta-form {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
animation: fadeInUp 0.8s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 80px 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.features h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Pricing */
|
||||
.pricing {
|
||||
background: var(--bg-light);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.price-period {
|
||||
color: var(--text-light);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 3px solid var(--border-color);
|
||||
border-top: 3px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
.success-message {
|
||||
display: none;
|
||||
background: var(--secondary-color);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Error Message */
|
||||
.error-message {
|
||||
display: none;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero .subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.cta-form {
|
||||
margin: 0 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<nav class="nav container">
|
||||
<a href="#" class="logo">🚀 YourDreamNameHere</a>
|
||||
<div>
|
||||
<a href="#features" style="color: var(--text-dark); text-decoration: none; margin-left: 1rem;">Features</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Launch Your Sovereign Hosting Business</h1>
|
||||
<p class="subtitle">
|
||||
Transform your entrepreneurial vision into a fully automated hosting empire.
|
||||
We handle everything from domain registration to Cloudron installation.
|
||||
</p>
|
||||
|
||||
<!-- CTA Form -->
|
||||
<div class="cta-form">
|
||||
<form id="launchForm">
|
||||
<div class="form-group">
|
||||
<label for="domain">Your Dream Domain Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="domain"
|
||||
name="domain"
|
||||
placeholder="example.com"
|
||||
required
|
||||
pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Your Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="cardNumber">Credit Card Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cardNumber"
|
||||
name="cardNumber"
|
||||
placeholder="4242 4242 4242 4242"
|
||||
maxlength="19"
|
||||
required
|
||||
pattern="[0-9]{13,19}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="pricing">
|
||||
<div class="price">$250</div>
|
||||
<div class="price-period">per month</div>
|
||||
<p style="margin-top: 0.5rem; color: var(--text-light);">
|
||||
✓ Domain Registration<br>
|
||||
✓ VPS Provisioning<br>
|
||||
✓ Cloudron Installation<br>
|
||||
✓ Complete Automation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">
|
||||
🚀 Launch My Hosting Business
|
||||
</button>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="spinner"></div>
|
||||
<p style="margin-top: 1rem;">Setting up your hosting empire...</p>
|
||||
</div>
|
||||
|
||||
<div class="success-message" id="successMessage">
|
||||
🎉 Welcome aboard! Your hosting business is being provisioned.
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage">
|
||||
❌ Something went wrong. Please try again.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<h2>Everything You Need to Succeed</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌐</div>
|
||||
<h3>Domain Registration</h3>
|
||||
<p>Automatically register your dream domain through our OVH integration. No manual setup required.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🖥️</div>
|
||||
<h3>VPS Provisioning</h3>
|
||||
<p>Instantly provision powerful cloud servers with automatic scaling and enterprise-grade security.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">☁️</div>
|
||||
<h3>Cloudron Installation</h3>
|
||||
<p>Get Cloudron automatically installed and configured with your custom domain and DNS settings.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💳</div>
|
||||
<h3>Payment Processing</h3>
|
||||
<p>Integrated Stripe billing with automatic invoicing, subscription management, and revenue tracking.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📊</div>
|
||||
<h3>Business Management</h3>
|
||||
<p>Complete ERP/CRM system with Dolibarr for customer management, billing, and business analytics.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>Enterprise Security</h3>
|
||||
<p>Bank-grade security with SSL certificates, automated backups, and 24/7 monitoring included.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Form formatting and submission
|
||||
const form = document.getElementById('launchForm');
|
||||
const loading = document.getElementById('loading');
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const cardNumberInput = document.getElementById('cardNumber');
|
||||
|
||||
// Format credit card input
|
||||
cardNumberInput.addEventListener('input', function(e) {
|
||||
let value = e.target.value.replace(/\s/g, '');
|
||||
let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
|
||||
e.target.value = formattedValue;
|
||||
});
|
||||
|
||||
// Handle form submission
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
// Show loading state
|
||||
loading.style.display = 'block';
|
||||
successMessage.style.display = 'none';
|
||||
errorMessage.style.display = 'none';
|
||||
|
||||
// Mock API call
|
||||
try {
|
||||
const response = await mockAPICall(data);
|
||||
|
||||
if (response.success) {
|
||||
successMessage.style.display = 'block';
|
||||
form.reset();
|
||||
} else {
|
||||
errorMessage.textContent = response.message || 'Something went wrong. Please try again.';
|
||||
errorMessage.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.textContent = 'Network error. Please try again.';
|
||||
errorMessage.style.display = 'block';
|
||||
} finally {
|
||||
loading.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Mock API function
|
||||
async function mockAPICall(data) {
|
||||
// Simulate API delay
|
||||
await new Promise(resolve => setTimeout(resolve, 3000));
|
||||
|
||||
// Mock validation
|
||||
if (data.domain && data.email && data.cardNumber) {
|
||||
return {
|
||||
success: true,
|
||||
message: 'Your hosting business is being provisioned!'
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: 'Please fill in all required fields.'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
245
output/web/templates/register.html
Normal file
245
output/web/templates/register.html
Normal file
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Register - YourDreamNameHere</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
|
||||
<style>
|
||||
.auth-container {
|
||||
max-width: 400px;
|
||||
margin: 120px auto 2rem;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.auth-footer a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<a href="/" class="nav-logo">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
|
||||
</svg>
|
||||
<span class="logo-text">YourDreamNameHere</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="auth-container">
|
||||
<div class="auth-header">
|
||||
<h1 class="auth-title">Create Account</h1>
|
||||
<p class="auth-subtitle">Start your sovereign hosting journey</p>
|
||||
</div>
|
||||
|
||||
<form id="registerForm" action="/api/v1/register" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
class="form-input"
|
||||
required
|
||||
placeholder="your@email.com"
|
||||
autocomplete="email"
|
||||
>
|
||||
<div class="error-message" id="email-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="firstName" class="form-label">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="first_name"
|
||||
class="form-input"
|
||||
required
|
||||
placeholder="John"
|
||||
autocomplete="given-name"
|
||||
>
|
||||
<div class="error-message" id="firstName-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="lastName" class="form-label">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="last_name"
|
||||
class="form-input"
|
||||
required
|
||||
placeholder="Doe"
|
||||
autocomplete="family-name"
|
||||
>
|
||||
<div class="error-message" id="lastName-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="form-input"
|
||||
required
|
||||
placeholder="••••••••"
|
||||
autocomplete="new-password"
|
||||
minlength="8"
|
||||
>
|
||||
<div class="error-message" id="password-error"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%;">
|
||||
Create Account
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="auth-footer">
|
||||
Already have an account? <a href="/login">Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById('registerForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
const data = {
|
||||
email: formData.get('email'),
|
||||
first_name: formData.get('first_name'),
|
||||
last_name: formData.get('last_name'),
|
||||
password: formData.get('password')
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v1/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showNotification('Account created successfully! Redirecting to login...', 'success');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/login';
|
||||
}, 2000);
|
||||
} else {
|
||||
showNotification(result.error || 'Registration failed', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showNotification('Network error. Please try again.', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// Real-time validation
|
||||
const emailInput = document.getElementById('email');
|
||||
const passwordInput = document.getElementById('password');
|
||||
|
||||
emailInput.addEventListener('blur', function() {
|
||||
const email = this.value.trim();
|
||||
const emailError = document.getElementById('email-error');
|
||||
|
||||
if (email && !isValidEmail(email)) {
|
||||
this.classList.add('error');
|
||||
emailError.textContent = 'Please enter a valid email address';
|
||||
} else {
|
||||
this.classList.remove('error');
|
||||
emailError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
passwordInput.addEventListener('input', function() {
|
||||
const password = this.value;
|
||||
const passwordError = document.getElementById('password-error');
|
||||
|
||||
if (password.length > 0 && password.length < 8) {
|
||||
this.classList.add('error');
|
||||
passwordError.textContent = 'Password must be at least 8 characters';
|
||||
} else {
|
||||
this.classList.remove('error');
|
||||
passwordError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
function isValidEmail(email) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user