ikan Uploader :
Directory : /var/www/html/ayushmancamps.shardahospital.org/ayushman/Lead/templates/lead/
Upload File : |
| Current File : /var/www/html/ayushmancamps.shardahospital.org/ayushman/Lead/templates/lead/lead_form.html |
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayushman Camp - Lead Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color:rgb(238, 166, 10);
--primary-hover:rgb(214, 139, 0);
--secondary-color: #f59e0b;
--light-bg: #f8fafc;
--text-dark: #1e293b;
--text-light: #64748b;
--border-color: #e2e8f0;
--success-color: #10b981;
}
body {
background-color: var(--light-bg);
color: var(--text-dark);
font-family: 'Poppins', sans-serif;
line-height: 1.6;
}
.navbar {
background-color: white !important;
padding: 12px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.navbar-brand img {
height: 42px;
transition: transform 0.3s ease;
}
.navbar-brand:hover img {
transform: scale(1.05);
}
.contact-info {
display: flex;
align-items: center;
gap: 15px;
}
.contact-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
border-radius: 8px;
background-color: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-badge:hover {
background-color: rgba(37, 99, 235, 0.2);
}
.contact-badge i {
font-size: 16px;
}
.card {
border: none;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
margin-top: 40px;
margin-bottom: 60px;
overflow: hidden;
border-top: 4px solid var(--primary-color);
}
.card-header {
background-color: white;
border-bottom: 1px solid var(--border-color);
padding: 20px 30px;
}
.card-body {
padding: 30px;
}
.card-title {
color: var(--text-dark);
margin-bottom: 5px;
font-weight: 700;
font-size: 1.5rem;
}
.card-subtitle {
color: var(--text-light);
font-weight: 400;
font-size: 0.9rem;
margin-bottom: 25px;
}
.form-label {
font-weight: 500;
margin-bottom: 8px;
color: var(--text-dark);
font-size: 0.9rem;
}
.required-field::after {
content: '*';
color: #ef4444;
margin-left: 4px;
}
.form-control, .form-select {
padding: 12px 15px;
border-radius: 8px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
font-size: 0.95rem;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-control::placeholder {
color: #94a3b8;
opacity: 1;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
padding: 12px 28px;
border-radius: 8px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
text-transform: uppercase;
font-size: 0.9rem;
}
.btn-primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.btn-primary:active {
transform: translateY(0);
}
.select2-container--default .select2-selection--single {
height: 46px;
border: 1px solid var(--border-color);
border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 46px;
padding-left: 15px;
color: var(--text-dark);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 44px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--primary-color);
}
.form-section {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px dashed var(--border-color);
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 10px;
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
font-size: 1rem;
}
.input-group-text {
background-color: #f1f5f9;
border: 1px solid var(--border-color);
color: var(--text-light);
}
.form-note {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 6px;
}
.success-message {
background-color: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--success-color);
padding: 15px;
border-radius: 4px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.success-message i {
color: var(--success-color);
font-size: 1.2rem;
}
.success-message p {
margin: 0;
color: var(--text-dark);
font-size: 0.95rem;
}
.form-check-input {
width: 18px;
height: 18px;
margin-top: 0.2em;
}
.form-check-label {
margin-left: 5px;
}
@media (max-width: 768px) {
.card {
margin-top: 20px;
margin-bottom: 40px;
}
.card-body {
padding: 20px;
}
.contact-info {
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.contact-badge {
padding: 6px 12px;
}
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade {
animation: fadeIn 0.5s ease-out forwards;
}
/* Delay animations for form elements */
.form-group {
opacity: 0;
animation: fadeIn 0.5s ease-out forwards;
}
.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }
.form-group:nth-child(6) { animation-delay: 0.6s; }
.form-group:nth-child(7) { animation-delay: 0.7s; }
.form-group:nth-child(8) { animation-delay: 0.8s; }
.form-group:nth-child(9) { animation-delay: 0.9s; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white shadow-sm">
<div class="container">
<div class="d-flex align-items-center w-100 justify-content-between">
<!-- Logo/Brand -->
<a class="navbar-brand">
{% if site_logo %}
<img style="height:30px" src="{{ site_logo.image.url }}" alt="{{ site_logo.name }}" class="img-fluid">
{% else %}
<img style="height:30px" src="{% static 'logo.png' %}" alt="Default Logo" class="img-fluid">
{% endif %}
</a>
<!-- Contact Information -->
<div class="contact-info">
<a href="tel:+918447333999" class="contact-badge">
<i class="fas fa-phone-alt"></i>
<span class="text-sm" >+91 84473 33999</span>
</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="card animate-fade">
<div class="card-header">
<h3 class="card-title">Ayushman Camp Registration</h3>
<p class="card-subtitle">Fill out the form below to register for our health camp services</p>
</div>
<div class="card-body">
{% if messages %}
{% for message in messages %}
<div class="success-message animate-fade">
<i class="fas fa-check-circle"></i>
<p>{{ message }}</p>
</div>
{% endfor %}
{% endif %}
<form method="POST" class="mt-2">
{% csrf_token %}
<div class="form-section">
<h5 class="section-title"><i class="fas fa-user-circle"></i> Personal Information</h5>
<div class="row">
<div class="col-md-6 mb-3 form-group">
<label class="form-label required-field">Patient Full Name</label>
<input type="text" name="customer_name" class="form-control" placeholder="Enter your full name" required>
<p class="form-note">As per government ID proof</p>
</div>
<div class="col-md-6 mb-3 form-group">
<label class="form-label required-field">Phone Number / Whatsapp Number</label>
<div class="input-group">
<span class="input-group-text">+91</span>
<input type="tel" name="customer_phone" class="form-control" placeholder="XXXXXXXXXX" required>
</div>
</div>
</div>
</div>
<div class="form-section">
<h5 class="section-title"><i class="fas fa-heartbeat"></i> Health Information</h5>
<div class="mb-3 form-group">
<label class="form-label">Chronic Illness (if any)</label>
<textarea name="chronic_illness" class="form-control" rows="3" placeholder="Describe any chronic illnesses or health conditions"></textarea>
</div>
</div>
<div class="form-section">
<h5 class="section-title"><i class="fas fa-calendar-alt"></i> Visit Details</h5>
<div class="row">
<div class="col-md-6 mb-3 form-group">
<label class="form-label required-field">Preferred Visit Date For Hospital</label>
<input type="date" name="preferred_visit_time" class="form-control" required>
</div>
<div class="col-md-6 mb-3 form-group">
<label class="form-label required-field">Camp Location</label>
<select name="camp_id" class="form-select" required>
<option value="" selected disabled>Select camp location</option>
{% for camp in camps %}
<option value="{{ camp.id }}">{{ camp.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="form-section">
<h5 class="section-title"><i class="fas fa-id-card"></i> Ayushman Bharat Details</h5>
<div class="row">
<div class="col-md-6 mb-3 form-group">
<label class="form-label required-field">Ayushman Bharat Beneficiary</label>
<select name="ayushman_status" class="form-select" required>
<option value="" selected disabled>Select status</option>
<option value="Yes">Yes, I have Ayushman Bharat</option>
<option value="No">No, I don't have Ayushman Bharat</option>
</select>
</div>
<div class="col-md-6 mb-3 form-group" id="ayushmanNumberField" style="display: none;">
<label class="form-label">Ayushman Bharat Number</label>
<input type="text" name="ayushman_number" class="form-control" placeholder="Enter 14-digit Ayushman number">
<p class="form-note">Format: XXXX-XXXX-XXXX-XX</p>
</div>
</div>
</div>
<div class="form-section">
<h5 class="section-title"><i class="fas fa-user-md"></i> Representative Information</h5>
<div class="mb-3 form-group">
<label class="form-label">Camp Executive (Optional)</label>
<select name="employee_id" class="form-select employee-select">
<option value="" selected disabled>Select representative</option>
{% for emp in employees %}
<option value="{{ emp.id }}">{{ emp.name }} ({{ emp.phone }})</option>
{% endfor %}
</select>
<p class="form-note">Leave blank if you don't have a specific representative</p>
</div>
</div>
<div class="form-section">
<h5 class="section-title"><i class="fas fa-user-md"></i> Doctor Information</h5>
<div class="mb-3 form-group">
<label class="form-label">Camp Doctor (Optional)</label>
<select name="campdoctor_id" class="form-select doctor-select">
<option value="" selected disabled>Select doctor</option>
{% for doctor in campdoctors %}
<option value="{{ doctor.id }}">{{ doctor.name }} </option>
{% endfor %}
</select>
<p class="form-note">Leave blank if you don't have a specific doctor</p>
</div>
</div>
<div class="form-section p-4 border rounded" style="background-color: #fff3e0;">
<h5 class="section-title text-orange mb-3">
<i class="fas fa-user-plus me-2 text-orange"></i> Referral Information
</h5>
<!-- Referred Category -->
<div class="mb-3">
<label for="referredcategory_id" class="form-label text-orange fw-semibold">Referred Category:</label>
<select id="referredcategory_id" name="referredcategory_id" class="form-select" required>
<option value="">Select Category</option>
{% for cat in referredcategories %}
<option value="{{ cat.id }}">{{ cat.name }}</option>
{% endfor %}
</select>
</div>
<!-- Referred Subcategory -->
<div class="mb-3">
<label for="referredsubcategory_id" class="form-label text-orange fw-semibold">Referred Subcategory:</label>
<select id="referredsubcategory_id" name="referredsubcategory_id" class="form-select">
<option value="">Select Subcategory</option>
{% for sub in referredsubcategories %}
<option value="{{ sub.id }}" data-category="{{ sub.category.id }}">{{ sub.name }}</option>
{% endfor %}
</select>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const categorySelect = document.getElementById('referredcategory_id');
const subcategorySelect = document.getElementById('referredsubcategory_id');
const allSubOptions = Array.from(subcategorySelect.options);
categorySelect.addEventListener('change', function () {
const selectedCategory = this.value;
subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
allSubOptions.forEach(option => {
if (option.dataset.category === selectedCategory) {
subcategorySelect.appendChild(option);
}
});
});
});
</script>
<div class="form-section">
<h5 class="section-title"><i class="fas fa-check-circle"></i> Additional Information</h5>
<div class="mb-3 form-group form-check">
<input type="checkbox" name="ageless70" class="form-check-input" id="ageless70Check">
<label class="form-check-label" for="ageless70Check">Age less than 70 years</label>
</div>
</div>
<div class="d-grid mt-4">
<button type="submit" class="btn btn-primary btn-lg">
<i class="fas fa-paper-plane me-2"></i> Submit Registration
</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
// Initialize Select2
$('.employee-select').select2({
placeholder: 'Search representative by name or phone',
width: '100%',
allowClear: true
});
$('.doctor-select').select2({
placeholder: 'Search doctor by name or specialization',
width: '100%',
allowClear: true
});
$('.referral-select').select2({
placeholder: 'Select referral category',
width: '100%',
allowClear: true
});
$('.subcategory-select').select2({
placeholder: 'Select referral subcategory',
width: '100%',
allowClear: true
});
// Show/hide Ayushman number field based on selection
$('select[name="ayushman_status"]').change(function() {
if ($(this).val() === 'Yes') {
$('#ayushmanNumberField').slideDown();
} else {
$('#ayushmanNumberField').slideUp();
}
});
// Format phone number input
$('input[name="customer_phone"]').on('input', function() {
$(this).val($(this).val().replace(/[^0-9]/g, '').substring(0, 10));
});
// Set minimum date for visit date (today)
const today = new Date().toISOString().split('T')[0];
$('input[name="preferred_visit_time"]').attr('min', today);
});
</script>
</body>
</html>
{% comment %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lead Form</title>
</head>
<body>
<h1>Lead Registration Form</h1>
{% if messages %}
<ul>
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form method="POST">
{% csrf_token %}
<!-- Site Logo (if any) -->
{% if site_logo %}
<img src="{{ site_logo.image.url }}" alt="Site Logo" height="80">
{% endif %}
<!-- Customer Info -->
<label>Customer Name:</label>
<input type="text" name="customer_name" required><br>
<label>Customer Phone:</label>
<input type="text" name="customer_phone" required><br>
<label>Chronic Illness:</label>
<input type="text" name="chronic_illness"><br>
<label>Preferred Visit Time:</label>
<input type="time" name="preferred_visit_time"><br>
<label>Ayushman Status:</label>
<input type="text" name="ayushman_status"><br>
<label>Ayushman Number:</label>
<input type="text" name="ayushman_number"><br>
<label>Age ≥ 70:</label>
<input type="checkbox" name="ageless70"><br>
<!-- Camp -->
<label>Camp:</label>
<select name="camp_id" required>
<option value="">Select Camp</option>
{% for camp in camps %}
<option value="{{ camp.id }}">{{ camp.name }}</option>
{% endfor %}
</select><br>
<!-- Employee -->
<label>Employee:</label>
<select name="employee_id">
<option value="">Select Employee (Optional)</option>
{% for emp in employees %}
<option value="{{ emp.id }}">{{ emp.name }}</option>
{% endfor %}
</select><br>
<!-- Camp Doctor -->
<label>Camp Doctor:</label>
<select name="campdoctor_id">
<option value="">Select Doctor (Optional)</option>
{% for doc in campdoctors %}
<option value="{{ doc.id }}">{{ doc.name }}</option>
{% endfor %}
</select><br>
<!-- Referred Category -->
<label>Referred Category:</label>
<select id="referredcategory_id" name="referredcategory_id" required>
<option value="">Select Category</option>
{% for cat in referredcategories %}
<option value="{{ cat.id }}">{{ cat.name }}</option>
{% endfor %}
</select><br>
<!-- Referred Subcategory -->
<label>Referred Subcategory:</label>
<select id="referredsubcategory_id" name="referredsubcategory_id">
<option value="">Select Subcategory</option>
{% for sub in referredsubcategories %}
<option value="{{ sub.id }}" data-category="{{ sub.category.id }}">{{ sub.name }}</option>
{% endfor %}
</select><br>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
<!-- JavaScript to Filter Subcategories -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const categorySelect = document.getElementById('referredcategory_id');
const subcategorySelect = document.getElementById('referredsubcategory_id');
const allSubOptions = Array.from(subcategorySelect.options);
categorySelect.addEventListener('change', function () {
const selectedCategory = this.value;
subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
allSubOptions.forEach(option => {
if (option.dataset.category === selectedCategory) {
subcategorySelect.appendChild(option);
}
});
});
});
</script>
</body>
</html> {% endcomment %}
Kontol Shell Bypass