File size: 11,639 Bytes
ee1baf1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 | <!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 -->
<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>
<!-- Landing Page -->
<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>
<!-- Question Flow -->
<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>
<!-- Text Input -->
<div class="answer-input" id="textInput" style="display: none;">
<input type="text" id="textAnswer" placeholder="Enter your answer...">
</div>
<!-- Textarea Input -->
<div class="answer-input" id="textareaInput" style="display: none;">
<textarea id="textareaAnswer" rows="4" placeholder="Enter your answer..."></textarea>
</div>
<!-- Number Input -->
<div class="answer-input" id="numberInput" style="display: none;">
<input type="number" id="numberAnswer" placeholder="Enter number...">
</div>
<!-- Button Options -->
<div class="answer-options" id="buttonOptions" style="display: none;"></div>
<!-- Multi-select Checkboxes -->
<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>
<!-- Loading Page -->
<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>
<!-- Results Page -->
<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">
<!-- Document cards will be inserted here -->
</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 -->
<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>
|