182 lines
7.7 KiB
Plaintext
182 lines
7.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>A2P Compliance Wizard — Generate Compliant Websites & Packets</title>
|
|
<link rel="stylesheet" href="/public/css/form.css">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>">
|
|
</head>
|
|
<body>
|
|
<div class="page-bg"></div>
|
|
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-badge">
|
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
A2P 10DLC Compliance
|
|
</div>
|
|
<h1>Compliance Wizard</h1>
|
|
<p>Generate a fully compliant A2P website, opt-in flow, and TCR-ready compliance packet in minutes.</p>
|
|
</header>
|
|
|
|
<!-- Steps -->
|
|
<div class="steps">
|
|
<div class="step active">
|
|
<div class="step-num">1</div>
|
|
<span>Fill Info</span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<span>Generate</span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<span>Download</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="form-container">
|
|
<div id="errorBanner" class="error-banner"></div>
|
|
|
|
<form id="wizardForm" class="form-card" enctype="multipart/form-data">
|
|
|
|
<!-- Section 1: Agency Info -->
|
|
<div class="form-section">
|
|
<div class="section-title">Your Information</div>
|
|
<div class="section-subtitle">Agency or account owner details</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Your Name <span class="required">*</span></label>
|
|
<input type="text" name="agencyName" placeholder="John Smith" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Your Email <span class="required">*</span></label>
|
|
<input type="email" name="agencyEmail" placeholder="john@agency.com" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Client Info -->
|
|
<div class="form-section">
|
|
<div class="section-title">Client Business Information</div>
|
|
<div class="section-subtitle">Must match EIN / brand registration exactly</div>
|
|
|
|
<div class="form-group">
|
|
<label>Client Legal Business Name <span class="required">*</span></label>
|
|
<input type="text" name="businessName" placeholder="Naples Cleaning LLC" required>
|
|
<div class="field-hint">Must match EIN paperwork exactly — no special characters</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Client Business Address <span class="required">*</span></label>
|
|
<input type="text" name="businessAddress" placeholder="123 Main St, Naples, FL 34102" required>
|
|
<div class="field-hint">Full address matching EIN paperwork</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Client Support Email <span class="required">*</span></label>
|
|
<input type="email" name="businessEmail" placeholder="support@naplescleaning.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Client Business Phone <span class="required">*</span></label>
|
|
<input type="tel" name="businessPhone" placeholder="(239) 555-0123" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Business Description <span class="required">*</span></label>
|
|
<textarea name="businessDescription" placeholder="Describe the client's business in 1-2 sentences. What do they do? Who do they serve? Where are they located?" rows="3" required></textarea>
|
|
<div class="field-hint">This is used to generate all website content and compliance text</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3: Logo -->
|
|
<div class="form-section">
|
|
<div class="section-title">Client Logo</div>
|
|
<div class="section-subtitle">Used on the generated website (optional but recommended)</div>
|
|
|
|
<div class="logo-upload">
|
|
<input type="file" id="logoInput" name="logo" accept="image/*">
|
|
<div class="logo-upload-icon">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
|
|
<polyline points="17 8 12 3 7 8"/>
|
|
<line x1="12" y1="3" x2="12" y2="15"/>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-upload-text">Click to upload or drag & drop</div>
|
|
<div class="logo-upload-hint">PNG, JPG, SVG, or WebP — max 5MB</div>
|
|
<img id="logoPreview" class="logo-preview" style="display:none" alt="Logo preview">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4: Compliance Acknowledgment -->
|
|
<div class="form-section">
|
|
<div class="section-title">Compliance Acknowledgment</div>
|
|
<div class="section-subtitle">Required before generation</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="tcpaConsent" name="tcpaConsent" required>
|
|
<label for="tcpaConsent" class="checkbox-label">
|
|
I confirm that the client business is aware of and agrees to comply with TCPA regulations, A2P 10DLC messaging requirements, and all applicable SMS/MMS messaging laws. The generated website and compliance materials are tools to support registration — the client is responsible for maintaining ongoing compliance.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<div class="submit-section">
|
|
<button type="submit" id="submitBtn" class="btn-submit">
|
|
<span class="btn-text">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
Generate Compliance Package
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loadingOverlay" class="loading-overlay">
|
|
<div class="loading-card">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-title">Building Your Compliance Package</div>
|
|
<div class="loading-message">Preparing your request...</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-steps">
|
|
<div class="progress-step">
|
|
<div class="progress-step-icon"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg></div>
|
|
<span>Generating AI content</span>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="progress-step-icon"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg></div>
|
|
<span>Building website pages</span>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="progress-step-icon"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg></div>
|
|
<span>Taking screenshots</span>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="progress-step-icon"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg></div>
|
|
<span>Assembling compliance packet</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
A2P Compliance Wizard · Built for agencies who demand compliance
|
|
</footer>
|
|
|
|
<script src="/public/js/form.js"></script>
|
|
</body>
|
|
</html>
|