| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>LegalDocs AI - Startup Legal Document Generator</title>
|
| <link rel="stylesheet" href="/static/style.css">
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
| </head>
|
| <body>
|
|
|
| <header class="header">
|
| <div class="header-content">
|
| <div class="logo">
|
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
| <path d="M16 4L4 10V18C4 24 16 28 16 28C16 28 28 24 28 18V10L16 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M12 16L15 19L21 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </svg>
|
| <span>LegalDocs AI</span>
|
| </div>
|
| <nav class="nav">
|
| <a href="#" class="nav-link">About</a>
|
| <a href="#" class="nav-link">Contact</a>
|
| </nav>
|
| </div>
|
| </header>
|
|
|
|
|
| <section id="landingPage" class="section active">
|
| <div class="hero-container">
|
| <div class="hero-content">
|
| <h1 class="hero-title">Smart Legal Document Planning for Your Startup</h1>
|
| <p class="hero-subtitle">Answer a few questions and get a personalized list of legal documents your startup needs—powered by AI</p>
|
| <div class="hero-features">
|
| <div class="feature-item">
|
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <polyline points="20 6 9 17 4 12"></polyline>
|
| </svg>
|
| <span>No Login Required</span>
|
| </div>
|
| <div class="feature-item">
|
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <polyline points="20 6 9 17 4 12"></polyline>
|
| </svg>
|
| <span>AI-Powered Analysis</span>
|
| </div>
|
| <div class="feature-item">
|
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <polyline points="20 6 9 17 4 12"></polyline>
|
| </svg>
|
| <span>Instant Results</span>
|
| </div>
|
| </div>
|
| <button class="cta-button" onclick="startQuestionnaire()">
|
| Generate My Document List
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M5 12h14M12 5l7 7-7 7"/>
|
| </svg>
|
| </button>
|
| <p class="hero-note">Takes only 2-3 minutes • Completely free</p>
|
| </div>
|
| <div class="hero-illustration">
|
| <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
| <rect x="50" y="80" width="300" height="240" rx="8" fill="#1a237e" opacity="0.1"/>
|
| <rect x="80" y="120" width="240" height="30" rx="4" fill="#d4af37" opacity="0.3"/>
|
| <rect x="80" y="170" width="200" height="20" rx="4" fill="#1a237e" opacity="0.2"/>
|
| <rect x="80" y="210" width="220" height="20" rx="4" fill="#1a237e" opacity="0.2"/>
|
| <rect x="80" y="250" width="180" height="20" rx="4" fill="#1a237e" opacity="0.2"/>
|
| <circle cx="320" cy="100" r="30" fill="#d4af37" opacity="0.5"/>
|
| <path d="M310 100L318 108L335 91" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
| </svg>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="questionPage" class="section">
|
| <div class="question-container">
|
| <div class="progress-bar">
|
| <div class="progress-fill" id="progressFill"></div>
|
| </div>
|
| <div class="question-counter" id="questionCounter">Question 1 of 30</div>
|
|
|
| <div class="question-card" id="questionCard">
|
| <h2 class="question-text" id="questionText"></h2>
|
| <div class="question-subtitle" id="questionSubtitle"></div>
|
|
|
|
|
| <div class="answer-input" id="textInput" style="display: none;">
|
| <input type="text" id="textAnswer" placeholder="Enter your answer...">
|
| </div>
|
|
|
|
|
| <div class="answer-input" id="textareaInput" style="display: none;">
|
| <textarea id="textareaAnswer" rows="4" placeholder="Enter your answer..."></textarea>
|
| </div>
|
|
|
|
|
| <div class="answer-input" id="numberInput" style="display: none;">
|
| <input type="number" id="numberAnswer" placeholder="Enter number...">
|
| </div>
|
|
|
|
|
| <div class="answer-options" id="buttonOptions" style="display: none;"></div>
|
|
|
|
|
| <div class="answer-checkboxes" id="checkboxOptions" style="display: none;"></div>
|
|
|
| <div class="question-actions">
|
| <button class="btn-secondary" id="backBtn" onclick="goBack()" style="display: none;">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M19 12H5M12 19l-7-7 7-7"/>
|
| </svg>
|
| Back
|
| </button>
|
| <button class="btn-primary" id="nextBtn" onclick="nextQuestion()">
|
| Next
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M5 12h14M12 5l7 7-7 7"/>
|
| </svg>
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="loadingPage" class="section">
|
| <div class="loading-container">
|
| <div class="loading-spinner">
|
| <svg width="100" height="100" viewBox="0 0 100 100">
|
| <circle cx="50" cy="50" r="40" stroke="#1a237e" stroke-width="8" fill="none" stroke-dasharray="251.2" stroke-dashoffset="0">
|
| <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.5s" repeatCount="indefinite"/>
|
| </circle>
|
| </svg>
|
| </div>
|
| <h2 class="loading-title">Generating Your Document List...</h2>
|
| <p class="loading-text">Our AI is analyzing your startup needs and creating a personalized legal document roadmap</p>
|
| <div class="loading-steps">
|
| <div class="loading-step active">
|
| <div class="step-icon">✓</div>
|
| <div class="step-text">Processing answers</div>
|
| </div>
|
| <div class="loading-step">
|
| <div class="step-icon">2</div>
|
| <div class="step-text">Analyzing requirements</div>
|
| </div>
|
| <div class="loading-step">
|
| <div class="step-icon">3</div>
|
| <div class="step-text">Generating recommendations</div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="resultsPage" class="section">
|
| <div class="results-container">
|
| <div class="results-header">
|
| <h1 class="results-title">Your Required Legal Documents</h1>
|
| <p class="results-subtitle">Based on your startup profile, here are the documents you need</p>
|
| <div class="results-actions">
|
| <button class="btn-download" onclick="downloadPDF()">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
| </svg>
|
| Download PDF Report
|
| </button>
|
| <button class="btn-regenerate" onclick="regenerate()">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
| </svg>
|
| Regenerate
|
| </button>
|
| <button class="btn-secondary" onclick="startOver()">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
| </svg>
|
| Start Over
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div class="documents-grid" id="documentsGrid">
|
|
|
| </div>
|
|
|
| <div class="optional-documents-section" id="optionalSection" style="display: none;">
|
| <h2 class="section-title">Optional Documents</h2>
|
| <p class="section-subtitle">Consider these as your startup grows</p>
|
| <div class="documents-grid" id="optionalDocumentsGrid"></div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <footer class="footer">
|
| <div class="footer-content">
|
| <div class="footer-section">
|
| <h3>LegalDocs AI</h3>
|
| <p>AI-powered legal document planning for startups</p>
|
| </div>
|
| <div class="footer-section">
|
| <h4>Legal</h4>
|
| <a href="#">Terms of Service</a>
|
| <a href="#">Privacy Policy</a>
|
| <a href="#">Disclaimer</a>
|
| </div>
|
| <div class="footer-section">
|
| <h4>Resources</h4>
|
| <a href="#">Documentation</a>
|
| <a href="#">API Reference</a>
|
| <a href="#">Support</a>
|
| </div>
|
| <div class="footer-section">
|
| <h4>Contact</h4>
|
| <a href="#">Email Us</a>
|
| <a href="#">Schedule Call</a>
|
| </div>
|
| </div>
|
| <div class="footer-bottom">
|
| <p>© 2025 LegalDocs AI. All rights reserved. | This tool provides informational guidance only and does not constitute legal advice.</p>
|
| </div>
|
| </footer>
|
|
|
| <script src="/static/app.js"></script>
|
| </body>
|
| </html>
|
|
|
