423 lines
17 KiB
HTML
423 lines
17 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% trans "Report an Observation" %} - Al Hammadi</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
{% else %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
{% endif %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- Arabic Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
body {
|
|
font-family: 'Tajawal', sans-serif;
|
|
}
|
|
{% endif %}
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px 0;
|
|
}
|
|
.form-container {
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
padding: 40px;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.logo-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.logo-header h1 {
|
|
color: #333;
|
|
font-size: 1.8rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
.logo-header p {
|
|
color: #666;
|
|
margin-bottom: 0;
|
|
}
|
|
.section-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #667eea;
|
|
}
|
|
.severity-option {
|
|
cursor: pointer;
|
|
padding: 10px 15px;
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
}
|
|
.severity-option:hover {
|
|
border-color: #667eea;
|
|
}
|
|
.severity-option.selected {
|
|
border-color: #667eea;
|
|
background: #f0f3ff;
|
|
}
|
|
.severity-low { border-left: 4px solid #28a745; }
|
|
.severity-medium { border-left: 4px solid #ffc107; }
|
|
.severity-high { border-left: 4px solid #dc3545; }
|
|
.severity-critical { border-left: 4px solid #343a40; }
|
|
.anonymous-notice {
|
|
background: #e8f4fd;
|
|
border: 1px solid #b8daff;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.anonymous-notice i {
|
|
color: #0056b3;
|
|
}
|
|
.btn-submit {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
padding: 12px 40px;
|
|
font-size: 1.1rem;
|
|
border-radius: 8px;
|
|
}
|
|
.btn-submit:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.optional-badge {
|
|
font-size: 0.75rem;
|
|
color: #6c757d;
|
|
font-weight: normal;
|
|
}
|
|
.file-upload-area {
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.file-upload-area:hover {
|
|
border-color: #667eea;
|
|
background: #f8f9ff;
|
|
}
|
|
.file-upload-area i {
|
|
font-size: 2rem;
|
|
color: #667eea;
|
|
}
|
|
.language-switcher {
|
|
position: absolute;
|
|
top: 20px;
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
left: 20px;
|
|
{% else %}
|
|
right: 20px;
|
|
{% endif %}
|
|
}
|
|
.language-switcher .btn {
|
|
background: rgba(255,255,255,0.9);
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
transition: all 0.2s;
|
|
}
|
|
.language-switcher .btn:hover {
|
|
background: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
|
|
}
|
|
.language-switcher .dropdown-menu {
|
|
min-width: 120px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
}
|
|
.language-switcher .dropdown-item {
|
|
padding: 10px 20px;
|
|
}
|
|
.language-switcher .dropdown-item:hover {
|
|
background: #f0f3ff;
|
|
}
|
|
.language-switcher .dropdown-item.active {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Language Switcher -->
|
|
<div class="language-switcher">
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-globe me-1"></i>
|
|
{% if LANGUAGE_CODE == 'ar' %}العربية{% else %}English{% endif %}
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<form action="{% url 'set_language' %}" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="language" value="en">
|
|
<input type="hidden" name="next" value="{{ request.path }}">
|
|
<button type="submit" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active{% endif %}">
|
|
<span class="me-2">🇬🇧</span> English
|
|
</button>
|
|
</form>
|
|
</li>
|
|
<li>
|
|
<form action="{% url 'set_language' %}" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="language" value="ar">
|
|
<input type="hidden" name="next" value="{{ request.path }}">
|
|
<button type="submit" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active{% endif %}">
|
|
<span class="me-2">🇸🇦</span> العربية
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="form-container">
|
|
<!-- Header -->
|
|
<div class="logo-header">
|
|
<h1><i class="bi bi-eye-fill text-primary me-2"></i>{% trans "Report an Observation" %}</h1>
|
|
<p class="text-muted">{% trans "Help us improve by reporting issues you notice" %}</p>
|
|
</div>
|
|
|
|
<!-- Anonymous Notice -->
|
|
<div class="anonymous-notice">
|
|
<i class="bi bi-shield-check me-2"></i>
|
|
<strong>{% trans "Anonymous Reporting" %}</strong>
|
|
<p class="mb-0 mt-1 small">
|
|
{% trans "You can submit this report anonymously. Providing your information is optional but may help us follow up if needed." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Messages -->
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<!-- Form -->
|
|
<form method="post" enctype="multipart/form-data" id="observationForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- Honeypot field (hidden) -->
|
|
{{ form.website }}
|
|
|
|
<!-- Category -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-tag me-2"></i>{% trans "Category" %}
|
|
<span class="optional-badge">({% trans "optional" %})</span>
|
|
</h5>
|
|
{{ form.category }}
|
|
{% if form.category.errors %}
|
|
<div class="text-danger small mt-1">{{ form.category.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Severity -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>{% trans "Severity" %}
|
|
</h5>
|
|
<div class="row g-2">
|
|
<div class="col-6 col-md-3">
|
|
<div class="severity-option severity-low" data-value="low">
|
|
<i class="bi bi-info-circle text-success"></i>
|
|
<div class="small mt-1">{% trans "Low" %}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="severity-option severity-medium selected" data-value="medium">
|
|
<i class="bi bi-exclamation-circle text-warning"></i>
|
|
<div class="small mt-1">{% trans "Medium" %}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="severity-option severity-high" data-value="high">
|
|
<i class="bi bi-exclamation-triangle text-danger"></i>
|
|
<div class="small mt-1">{% trans "High" %}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="severity-option severity-critical" data-value="critical">
|
|
<i class="bi bi-x-octagon text-dark"></i>
|
|
<div class="small mt-1">{% trans "Critical" %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="severity" id="severityInput" value="medium">
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-card-heading me-2"></i>{% trans "Title" %}
|
|
<span class="optional-badge">({% trans "optional" %})</span>
|
|
</h5>
|
|
{{ form.title }}
|
|
{% if form.title.errors %}
|
|
<div class="text-danger small mt-1">{{ form.title.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-card-text me-2"></i>{% trans "Description" %}
|
|
<span class="text-danger">*</span>
|
|
</h5>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<div class="text-danger small mt-1">{{ form.description.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">{% trans "Please describe what you observed in detail." %}</div>
|
|
</div>
|
|
|
|
<!-- Location -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-geo-alt me-2"></i>{% trans "Location" %}
|
|
<span class="optional-badge">({% trans "optional" %})</span>
|
|
</h5>
|
|
{{ form.location_text }}
|
|
{% if form.location_text.errors %}
|
|
<div class="text-danger small mt-1">{{ form.location_text.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Incident Date/Time -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-calendar-event me-2"></i>{% trans "When did this occur?" %}
|
|
</h5>
|
|
{{ form.incident_datetime }}
|
|
{% if form.incident_datetime.errors %}
|
|
<div class="text-danger small mt-1">{{ form.incident_datetime.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-paperclip me-2"></i>{% trans "Attachments" %}
|
|
<span class="optional-badge">({% trans "optional" %})</span>
|
|
</h5>
|
|
<div class="file-upload-area" onclick="document.getElementById('attachments').click()">
|
|
<i class="bi bi-cloud-upload"></i>
|
|
<p class="mb-0 mt-2">{% trans "Click to upload files" %}</p>
|
|
<p class="small text-muted mb-0">{% trans "Images, PDF, Word, Excel (max 10MB each)" %}</p>
|
|
</div>
|
|
<input type="file" id="attachments" name="attachments" multiple
|
|
accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx"
|
|
style="display: none;" onchange="updateFileList()">
|
|
<div id="fileList" class="mt-2"></div>
|
|
</div>
|
|
|
|
<!-- Reporter Information (Optional) -->
|
|
<div class="mb-4">
|
|
<h5 class="section-title">
|
|
<i class="bi bi-person me-2"></i>{% trans "Your Information" %}
|
|
<span class="optional-badge">({% trans "optional" %})</span>
|
|
</h5>
|
|
<p class="text-muted small mb-3">
|
|
{% trans "Providing your information helps us follow up if needed. Leave blank to submit anonymously." %}
|
|
</p>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">{% trans "Staff ID" %}</label>
|
|
{{ form.reporter_staff_id }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">{% trans "Name" %}</label>
|
|
{{ form.reporter_name }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">{% trans "Phone" %}</label>
|
|
{{ form.reporter_phone }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">{% trans "Email" %}</label>
|
|
{{ form.reporter_email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<div class="text-center mt-4">
|
|
<button type="submit" class="btn btn-primary btn-submit btn-lg">
|
|
<i class="bi bi-send me-2"></i>{% trans "Submit Observation" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Track Link -->
|
|
<div class="text-center mt-4">
|
|
<a href="{% url 'observations:observation_track' %}" class="text-muted">
|
|
<i class="bi bi-search me-1"></i>{% trans "Track an existing observation" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Severity selection
|
|
document.querySelectorAll('.severity-option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
document.querySelectorAll('.severity-option').forEach(o => o.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
document.getElementById('severityInput').value = this.dataset.value;
|
|
});
|
|
});
|
|
|
|
// File list display
|
|
function updateFileList() {
|
|
const input = document.getElementById('attachments');
|
|
const fileList = document.getElementById('fileList');
|
|
fileList.innerHTML = '';
|
|
|
|
if (input.files.length > 0) {
|
|
const list = document.createElement('ul');
|
|
list.className = 'list-unstyled mb-0';
|
|
|
|
for (let i = 0; i < input.files.length; i++) {
|
|
const li = document.createElement('li');
|
|
li.className = 'small text-muted';
|
|
li.innerHTML = `<i class="bi bi-file-earmark me-1"></i>${input.files[i].name}`;
|
|
list.appendChild(li);
|
|
}
|
|
|
|
fileList.appendChild(list);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|