134 lines
7.2 KiB
HTML
134 lines
7.2 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Sign Acknowledgement" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
|
|
<i data-lucide="file-signature" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-navy">{% trans "Sign Acknowledgement" %}</h1>
|
|
<p class="text-slate text-sm">{% trans "Please review and sign below" %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Acknowledgement Content -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
|
|
<h2 class="font-bold text-navy text-lg">{{ acknowledgement.title }}</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
{% if acknowledgement.description %}
|
|
<div class="prose max-w-none text-slate mb-6">
|
|
{{ acknowledgement.description|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if acknowledgement.pdf_document %}
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-4">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="file-text" class="w-8 h-8 text-blue"></i>
|
|
<div class="flex-1">
|
|
<p class="font-semibold text-navy">{% trans "PDF Document" %}</p>
|
|
<p class="text-sm text-slate">{% trans "Please review the full document before signing" %}</p>
|
|
</div>
|
|
<a href="{{ acknowledgement.pdf_document.url }}" target="_blank"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-blue text-white rounded-lg font-semibold hover:bg-navy transition">
|
|
<i data-lucide="external-link" class="w-4 h-4"></i>
|
|
{% trans "View PDF" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Signature Form -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden sticky top-6">
|
|
<div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-blue to-navy">
|
|
<h3 class="font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="pen-tool" class="w-5 h-5"></i>
|
|
{% trans "Digital Signature" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" class="space-y-4">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Your Full Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="signature_name" required
|
|
value="{{ request.user.get_full_name }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'Enter your full name' %}">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Employee ID" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="signature_employee_id" required
|
|
value="{{ request.user.employee_id|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'Enter your employee ID' %}">
|
|
</div>
|
|
|
|
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-circle" class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5"></i>
|
|
<p class="text-sm text-amber-800">
|
|
{% trans "By entering your name and employee ID, you acknowledge that you have read, understood, and agree to comply with this policy." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Checkbox -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox" name="confirm" required
|
|
class="mt-1 w-5 h-5 text-blue bg-white border-slate-300 rounded focus:ring-blue focus:ring-2">
|
|
<span class="text-sm text-navy font-medium">
|
|
{% trans "I confirm that I have read and understood this acknowledgement." %}
|
|
<span class="text-red-500">*</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<button type="submit"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-semibold hover:from-emerald-600 hover:to-emerald-700 transition shadow-lg shadow-emerald-200">
|
|
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
{% trans "Sign Acknowledgement" %}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="{% url 'accounts:simple_acknowledgements:employee_list' %}"
|
|
class="text-sm text-slate hover:text-blue transition">
|
|
{% trans "Cancel and go back" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %}
|