Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lead Registration</title> | |
| <style> | |
| /* CSS Reset & Base */ | |
| * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } | |
| body { | |
| background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| /* Card Container */ | |
| .card { | |
| display: flex; | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| overflow: hidden; | |
| width: 1000px; | |
| max-width: 100%; | |
| min-height: 600px; | |
| } | |
| /* Left Panel (White) */ | |
| .left-panel { | |
| flex: 1; | |
| padding: 50px; | |
| background: #fff; | |
| } | |
| /* Right Panel (Blue) */ | |
| .right-panel { | |
| flex: 1; | |
| padding: 50px; | |
| background: #4d4dff; | |
| color: white; | |
| } | |
| /* Headings */ | |
| h2 { margin-bottom: 30px; font-weight: 600; font-size: 1.5rem; } | |
| .left-panel h2 { color: #3b4d81; } | |
| .right-panel h2 { color: white; } | |
| /* Form Grid System */ | |
| .form-row { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 25px; | |
| } | |
| .form-group { | |
| flex: 1; | |
| position: relative; | |
| } | |
| /* Inputs - General Styling */ | |
| input, select { | |
| width: 100%; | |
| padding: 12px 0 8px 0; | |
| border: none; | |
| outline: none; | |
| font-size: 0.95rem; | |
| transition: 0.3s; | |
| background: transparent; | |
| } | |
| /* Left Panel Input Styling (Light) */ | |
| .left-panel input, .left-panel select { | |
| border-bottom: 2px solid #ddd; | |
| color: #333; | |
| } | |
| .left-panel input::placeholder { | |
| color: #999; | |
| opacity: 1; | |
| } | |
| .left-panel input:focus, .left-panel select:focus { | |
| border-bottom-color: #4d4dff; | |
| } | |
| .left-panel select { | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right center; | |
| } | |
| .left-panel select option { | |
| color: #333; | |
| background: white; | |
| } | |
| /* Right Panel Input Styling (Dark/Blue) */ | |
| .right-panel input, .right-panel select { | |
| border-bottom: 2px solid rgba(255,255,255,0.4); | |
| color: white; | |
| } | |
| .right-panel input::placeholder { | |
| color: rgba(255,255,255,0.7); | |
| opacity: 1; | |
| } | |
| .right-panel select { | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right center; | |
| } | |
| .right-panel select option { | |
| color: #333; | |
| background: #4d4dff; | |
| } | |
| .right-panel input:focus, .right-panel select:focus { | |
| border-bottom-color: white; | |
| } | |
| /* Checkbox */ | |
| .checkbox-group { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.85rem; | |
| margin-top: 20px; | |
| margin-bottom: 30px; | |
| color: rgba(255,255,255,0.9); | |
| } | |
| .checkbox-group input { | |
| width: auto; | |
| margin-right: 10px; | |
| cursor: pointer; | |
| } | |
| .checkbox-group label { | |
| cursor: pointer; | |
| } | |
| /* Button */ | |
| .btn-submit { | |
| background: white; | |
| color: #4d4dff; | |
| border: none; | |
| padding: 12px 30px; | |
| border-radius: 25px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: all 0.2s; | |
| } | |
| .btn-submit:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 15px rgba(255,255,255,0.3); | |
| } | |
| .btn-submit:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: scale(1); | |
| } | |
| /* Alert Messages */ | |
| .alert { | |
| padding: 15px 20px; | |
| margin-bottom: 25px; | |
| border-radius: 8px; | |
| display: none; /* Hidden by default */ | |
| font-size: 0.9rem; | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| .alert.success { | |
| background: #d4edda; | |
| color: #155724; | |
| border-left: 4px solid #28a745; | |
| } | |
| .alert.error { | |
| background: #f8d7da; | |
| color: #721c24; | |
| border-left: 4px solid #dc3545; | |
| } | |
| .alert.show { | |
| display: block; /* Visible when class 'show' is added */ | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Responsive Mobile */ | |
| @media (max-width: 768px) { | |
| .card { flex-direction: column; } | |
| .left-panel, .right-panel { padding: 30px; } | |
| .form-row { flex-direction: column; gap: 15px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Link to Dashboard for Hugging Face Space --> | |
| <div style="position: absolute; top: 20px; right: 20px; z-index: 100;"> | |
| <a href="/" style="background: white; padding: 10px 20px; border-radius: 20px; text-decoration: none; font-weight: bold; color: #4d4dff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-size: 0.9rem;">View CRM Dashboard →</a> | |
| </div> | |
| <div class="card"> | |
| <!-- Left Side: General Info --> | |
| <div class="left-panel"> | |
| <h2>General Information</h2> | |
| <!-- Alert Box for Success/Error --> | |
| <div id="alertBox" class="alert"></div> | |
| <form id="leadForm"> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <input type="text" name="first_name" placeholder="First Name *" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="last_name" placeholder="Last Name *" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <input type="email" name="email" placeholder="Email Address *" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <select name="source" required> | |
| <option value="" disabled selected>How did you hear about us? *</option> | |
| <option value="Google Ads">Google Ads</option> | |
| <option value="Facebook">Facebook</option> | |
| <option value="LinkedIn">LinkedIn</option> | |
| <option value="Twitter">Twitter</option> | |
| <option value="Referral">Referral</option> | |
| <option value="Direct">Direct</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <input type="text" name="company" placeholder="Company Name (Optional)"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <select name="position"> | |
| <option value="" disabled selected>Position (Optional)</option> | |
| <option value="Developer">Developer</option> | |
| <option value="Manager">Manager</option> | |
| <option value="Director">Director</option> | |
| <option value="Executive">Executive</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side: Contact Details --> | |
| <div class="right-panel"> | |
| <h2>Additional Information</h2> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <select name="city" required> | |
| <option value="" disabled selected>City *</option> | |
| <option value="Dhaka">Dhaka</option> | |
| <option value="Chittagong">Chittagong</option> | |
| <option value="Winnipeg">Winnipeg</option> | |
| <option value="Toronto">Toronto</option> | |
| <option value="Vancouver">Vancouver</option> | |
| <option value="Montreal">Montreal</option> | |
| <option value="Calgary">Calgary</option> | |
| <option value="New York">New York</option> | |
| <option value="Los Angeles">Los Angeles</option> | |
| <option value="Chicago">Chicago</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <select name="budget" required> | |
| <option value="" disabled selected>Budget Range *</option> | |
| <option value="1000">Under $1,000</option> | |
| <option value="5000">$1,000 - $5,000</option> | |
| <option value="10000">$5,000 - $10,000</option> | |
| <option value="25000">$10,000 - $25,000</option> | |
| <option value="50000">$25,000 - $50,000</option> | |
| <option value="100000">$50,000+</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <input type="tel" name="phone" placeholder="Phone Number (Optional)"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <input type="text" name="address" placeholder="Street Address (Optional)"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <input type="text" name="zip_code" placeholder="Zip/Postal Code (Optional)"> | |
| </div> | |
| </div> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="terms" required> | |
| <label for="terms">I accept the Terms and Conditions *</label> | |
| </div> | |
| <button type="button" class="btn-submit" onclick="submitData()">Submit Lead</button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- JavaScript Handling Submission and Alerts --> | |
| <script> | |
| async function submitData() { | |
| const form = document.getElementById('leadForm'); | |
| const alertBox = document.getElementById('alertBox'); | |
| // 1. Reset Alert State (Important for re-submission) | |
| alertBox.className = 'alert'; | |
| alertBox.style.display = 'none'; | |
| // 2. Client-side Validation | |
| if (!form.checkValidity()) { | |
| showAlert("Please fill in all required fields marked with *", "error"); | |
| form.reportValidity(); | |
| return; | |
| } | |
| // 3. Gather Form Data | |
| const formData = new FormData(form); | |
| const data = Object.fromEntries(formData.entries()); | |
| // 4. UI Feedback (Disable Button) | |
| const btn = document.querySelector('.btn-submit'); | |
| const originalText = btn.innerText; | |
| btn.innerText = "Submitting..."; | |
| btn.disabled = true; | |
| try { | |
| // 5. Send POST Request | |
| const response = await fetch('/submit', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(data) | |
| }); | |
| const result = await response.json(); | |
| if (response.ok) { | |
| // --- SUCCESS --- | |
| const successMsg = result.message || "✅ Success! Lead submitted successfully."; | |
| showAlert(successMsg, "success"); | |
| // Reset form fields | |
| form.reset(); | |
| } else { | |
| // --- SERVER/n8n ERROR --- | |
| const errorMsg = result.error?.reason || result.message || "❌ Submission failed"; | |
| showAlert(`Error: ${errorMsg}`, "error"); | |
| } | |
| } catch (error) { | |
| // --- NETWORK ERROR --- | |
| showAlert(`❌ Connection Error: ${error.message}`, "error"); | |
| } finally { | |
| // 6. Reset Button State | |
| btn.innerText = originalText; | |
| btn.disabled = false; | |
| } | |
| } | |
| function showAlert(message, type) { | |
| const alertBox = document.getElementById('alertBox'); | |
| // Set message text | |
| alertBox.textContent = message; | |
| // Apply CSS classes (This triggers the visible styling) | |
| alertBox.className = `alert ${type} show`; | |
| // Ensure element is visible (Overrides any inline 'display: none') | |
| alertBox.style.display = 'block'; | |
| // Scroll user to the message | |
| alertBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | |
| // Auto-hide success messages after 7 seconds | |
| if (type === 'success') { | |
| setTimeout(() => { | |
| alertBox.style.display = 'none'; // Clean hide | |
| alertBox.className = 'alert'; | |
| }, 7000); | |
| } | |
| } | |
| // Allow submitting via Enter key | |
| document.getElementById('leadForm').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { | |
| e.preventDefault(); | |
| submitData(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |