-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrafuma.html
More file actions
251 lines (238 loc) · 15 KB
/
Copy pathrafuma.html
File metadata and controls
251 lines (238 loc) · 15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Verification | Hope Alive Online Radio</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header class="bg-white border-bottom sticky-top">
<nav class="navbar navbar-expand-lg navbar-light container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<img src="assets/images/HAR-LOGO.jpeg" alt="Hope Alive Radio" class="company-logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Employee Verification</a></li>
<li class="nav-item"><a class="nav-link" href="https://hopealiveradio.co.za/contacts/">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Verification Banner -->
<div class="verification-banner bg-success text-white py-2 text-center animate-fade-in">
<div class="container">
<i class="bi bi-patch-check-fill me-2"></i>
<span class="fw-bold">OFFICIAL VERIFICATION PORTAL</span>
</div>
</div>
<main class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Employee Verification Card -->
<div class="card employee-card shadow-lg border-0 overflow-hidden animate-slide-up">
<div class="card-header brand-bg-primary text-dark text-center py-4">
<h2 class="h4 mb-0 fw-bold">Employee Verification Card</h2>
</div>
<div class="card-body p-4 p-md-5">
<!-- Verification Status -->
<div class="text-center mb-4">
<span class="badge bg-success fs-5 px-4 py-2 rounded-pill shadow-sm">
VERIFIED EMPLOYEE <i class="bi bi-check-lg"></i>
</span>
</div>
<div class="row align-items-center mb-5">
<div class="col-md-4 text-center mb-4 mb-md-0">
<!-- Profile Photo -->
<div class="profile-photo-container mx-auto shadow">
<img src="assets/images/rafumo.jpg" alt="Hope Alive Logo" class="img-fluid rounded-circle">
</div>
</div>
<div class="col-md-8">
<!-- Employee Details -->
<div class="employee-details">
<h3 class="h2 fw-bold text-dark mb-3">Rafuma Mufamadi</h3>
<div class="row g-3">
<div class="col-6">
<label class="text-muted small text-uppercase fw-bold">Employee Number</label>
<p class="fw-semibold mb-0">HAR-INT-008</p>
</div>
<div class="col-6">
<label class="text-muted small text-uppercase fw-bold">Status</label>
<p class="text-success fw-bold mb-0">Active</p>
</div>
<div class="col-6">
<label class="text-muted small text-uppercase fw-bold">Department</label>
<p class="fw-semibold mb-0">Information Technology</p>
</div>
<div class="col-6">
<label class="text-muted small text-uppercase fw-bold">Position</label>
<p class="fw-semibold mb-0">Software dev / Technical Support</p>
</div>
<div class="col-6">
<label class="text-muted small text-uppercase fw-bold">Office Location</label>
<p class="fw-semibold mb-0">Chloorkop</p>
</div>
<div class="col-6">
<label class="text-muted small text-uppercase fw-bold">Expiry Date</label>
<p class="fw-semibold mb-0">30 june 2027</p>
</div>
</div>
</div>
</div>
</div>
<!-- Emergency Verification Section -->
<div class="alert alert-light border-start border-brand-primary border-4 mb-5">
<h4 class="h6 fw-bold text-dark mb-3">AUTHORIZED ACCESS</h4>
<p class="small mb-3">Employee currently authorized to represent the company. Permitted to attend:</p>
<div class="row g-2">
<div class="col-md-6">
<ul class="list-unstyled small mb-0">
<li><i class="bi bi-check2-circle text-success me-2"></i>Live Broadcasts</li>
<li><i class="bi bi-check2-circle text-success me-2"></i>Media Briefings</li>
<li><i class="bi bi-check2-circle text-success me-2"></i>Public Events</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled small mb-0">
<li><i class="bi bi-check2-circle text-success me-2"></i>Community Outreach</li>
<li><i class="bi bi-check2-circle text-success me-2"></i>Corporate Functions</li>
</ul>
</div>
</div>
</div>
<!-- Additional Information (Collapsible) -->
<div class="accordion mb-5" id="employeeAccordion">
<div class="accordion-item border-0 shadow-sm">
<h2 class="accordion-header">
<button class="accordion-button collapsed fw-bold text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInfo">
Additional Employee Information
</button>
</h2>
<div id="collapseInfo" class="accordion-collapse collapse" data-bs-parent="#employeeAccordion">
<div class="accordion-body bg-light">
<div class="row g-3">
<div class="col-md-6">
<label class="text-muted small text-uppercase fw-bold">Work Email</label>
<p class="mb-0">info@hopealiveradio.co.za</p>
</div>
<div class="col-md-6">
<label class="text-muted small text-uppercase fw-bold">Supervisor</label>
<p class="mb-0">Muzi Mthetwa</p>
</div>
<div class="col-md-6">
<label class="text-muted small text-uppercase fw-bold">Start Date</label>
<p class="mb-0">01 april 2026</p>
</div>
<div class="col-md-6">
<label class="text-muted small text-uppercase fw-bold">Equipment Assigned</label>
<p class="mb-0">LAPTOP</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Security Features -->
<div class="bg-dark text-white p-4 rounded-3 mb-5">
<div class="d-flex align-items-center mb-3">
<div class="shield-icon me-3">
<i class="bi bi-shield-check text-success fs-1"></i>
</div>
<div>
<h4 class="h6 fw-bold mb-1">QR VERIFIED</h4>
<p class="small mb-0 text-secondary">Unique Code: <span id="verificationCode" class="text-white fw-mono">HA-SEC-8829-XP</span></p>
</div>
<button class="btn btn-outline-light btn-sm ms-auto" onclick="copyCode()">
<i class="bi bi-copy"></i>
</button>
</div>
<p class="small text-secondary mb-0">
<i class="bi bi-info-circle me-1"></i> This employee record is stored in the company database and was verified at <span id="timestamp" class="text-white"></span>.
</p>
</div>
<!-- Contact Verification -->
<div class="contact-section">
<h4 class="h6 fw-bold text-dark mb-4">CONTACT VERIFICATION</h4>
<div class="row g-4 text-center">
<div class="col-6 col-md-3">
<div class="p-3 border rounded h-100">
<i class="bi bi-telephone text-dark fs-4 mb-2 d-block"></i>
<span class="small text-muted d-block">HR Dept</span>
<a href="tel:+27671531089" class="small fw-bold text-decoration-none text-dark">067 153 1089</a>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 border rounded h-100">
<i class="bi bi-headset text-dark fs-4 mb-2 d-block"></i>
<span class="small text-muted d-block">Station Desk</span>
<a href="tel:+27671531089" class="small fw-bold text-decoration-none text-dark">067 153 1089</a>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 border rounded h-100">
<i class="bi bi-envelope text-dark fs-4 mb-2 d-block"></i>
<span class="small text-muted d-block">Email</span>
<a href="mailto:verify@hopealive.co.za" class="small fw-bold text-decoration-none text-dark">info@hopealiveradio.co.za</a>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 border rounded h-100">
<i class="bi bi-globe text-dark fs-4 mb-2 d-block"></i>
<span class="small text-muted d-block">Website</span>
<a href="#" class="small fw-bold text-decoration-none text-dark">www.hopealive.co.za</a>
</div>
</div>
</div>
</div>
<!-- Actions -->
<div class="mt-5 pt-4 border-top text-center">
<button class="btn btn-brand-primary px-4 me-2" onclick="window.print()">
<i class="bi bi-printer me-2"></i> Print Details
</button>
<button class="btn btn-outline-secondary px-4">
<i class="bi bi-share me-2"></i> Share Link
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-dark text-white py-5 mt-5">
<div class="container text-center">
<div class="logo-placeholder mx-auto mb-3">HA</div>
<h5 class="fw-bold mb-4">Hope Alive Online Radio</h5>
<p class="text-secondary small mb-4">
1 Beynon Cl, Chloorkop, Edenvale, 1624, South Africa
</p>
<div class="footer-links mb-4">
<a href="#" class="text-secondary text-decoration-none mx-2">Privacy Policy</a>
<a href="#" class="text-secondary text-decoration-none mx-2">Terms of Use</a>
<a href="#" class="text-secondary text-decoration-none mx-2">Contact Support</a>
</div>
<p class="text-secondary small mb-0">
© 2025 Hope Alive Online Radio. All rights reserved.
</p>
</div>
</footer>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>