Spaces:

SakibAhmed
/

form

Sleeping

App Files Files Community

SakibAhmed commited on Dec 5, 2025

Commit

a6f8728

verified ·

1 Parent(s): fe6b222

Upload index.html

Browse files

Files changed (1) hide show

index.html +426 -0

index.html ADDED Viewed

	@@ -0,0 +1,426 @@

+<!DOCTYPE html>
+<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 &rarr;</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>