-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
311 lines (286 loc) · 17.8 KB
/
Copy pathcontact.html
File metadata and controls
311 lines (286 loc) · 17.8 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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact UAE Gratuity Calculator | Get Help with Gratuity Questions</title>
<meta name="description" content="Contact UAE Gratuity Calculator Pro for help with gratuity calculations, UAE labour law questions, or to report an issue. We typically respond within 24 hours.">
<meta name="keywords" content="contact UAE gratuity calculator, UAE labour law help, gratuity question UAE, MOHRE advice contact">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://mjunaid8204.github.io/gratuity-calculator-uae-pro/contact.html">
<link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ContactPage",
"name": "Contact UAE Gratuity Calculator Pro",
"url": "https://mjunaid8204.github.io/gratuity-calculator-uae-pro/contact.html",
"mainEntity": {
"@type": "Organization",
"name": "UAE Gratuity Calculator Pro",
"url": "https://mjunaid8204.github.io/gratuity-calculator-uae-pro/",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "Customer Support",
"availableLanguage": ["English", "Arabic"]
}
}
}
</script>
<style>
.contact-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
.contact-info-card { background: linear-gradient(135deg, var(--green-dark), var(--green)); color: white; border-radius: var(--radius-xl); padding: 2.5rem; }
.contact-info-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.contact-info-card > p { opacity: 0.9; margin-bottom: 2rem; font-size: 0.9rem; }
.contact-method { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: flex-start; }
.contact-method-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.15); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.contact-method h4 { color: rgba(255,255,255,0.85); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.2rem; }
.contact-method p, .contact-method a { color: white; font-weight: 600; font-size: 0.9rem; }
.contact-method a:hover { opacity: 0.8; }
.contact-divider { border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 1.5rem 0; }
.response-time { background: rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 1rem; font-size: 0.82rem; }
.response-time strong { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; }
.mohre-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.5rem; }
.mohre-card h4 { color: var(--green-dark); margin-bottom: 1rem; font-size: 1rem; }
.mohre-item { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.mohre-item .icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.form-card { background: white; border-radius: var(--radius-xl); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); padding: 2.5rem; }
.form-card h2 { color: var(--green-dark); margin-bottom: 0.5rem; font-size: 1.3rem; }
.form-card > p { color: var(--gray-600); font-size: 0.9rem; margin-bottom: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.success-msg { display: none; background: #e8f5e9; border: 2px solid #4caf50; border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.success-msg.show { display: block; animation: fadeIn 0.4s ease; }
.success-msg h3 { color: #2e7d32; margin-bottom: 0.5rem; }
.success-msg p { color: #555; font-size: 0.9rem; }
.faq-quick { background: var(--gray-50); border-radius: var(--radius-xl); padding: 2.5rem; margin-top: 3rem; }
.faq-quick h2 { color: var(--green-dark); margin-bottom: 1.5rem; font-size: 1.3rem; }
.quick-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.quick-faq-item { background: white; border-radius: var(--radius-md); padding: 1.25rem; border: 1px solid var(--gray-200); }
.quick-faq-item h4 { color: var(--black); font-size: 0.9rem; margin-bottom: 0.5rem; }
.quick-faq-item p { color: var(--gray-600); font-size: 0.82rem; line-height: 1.6; }
@media(max-width:900px) { .contact-wrap { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="flag-stripe" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
<nav class="navbar" role="navigation" aria-label="Main navigation">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<span class="flag">🇦🇪</span>
<div class="logo-text">UAE Gratuity <strong>Calculator</strong><span class="logo-sub">MOHRE Compliant 2024</span></div>
</a>
<ul class="nav-links" id="navLinks">
<li><a href="index.html">Home</a></li>
<li><a href="calculator.html">Calculator</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
<li><a href="calculator.html" class="nav-cta">Calculate Now</a></li>
</ul>
<button class="hamburger" onclick="toggleNav()" aria-label="Toggle menu"><span></span><span></span><span></span></button>
</div>
</nav>
<nav class="breadcrumb" aria-label="Breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li><a href="index.html">Home</a></li>
<li>Contact Us</li>
</ol>
</div>
</nav>
<div class="page-header">
<h1>💬 Contact Us</h1>
<p>Have a question about UAE gratuity? Need help with a calculation? We are here to help.</p>
</div>
<section class="section">
<div class="container">
<div class="contact-wrap">
<!-- Contact Info -->
<div>
<div class="contact-info-card">
<h3>Get in Touch</h3>
<p>We are a team of UAE labour law enthusiasts dedicated to helping workers understand their gratuity rights.</p>
<div class="contact-method">
<div class="contact-method-icon">💌</div>
<div><h4>Email Us</h4><a href="mailto:hello@uae-gratuity-calculator.com">hello@uae-gratuity-calculator.com</a></div>
</div>
<div class="contact-method">
<div class="contact-method-icon">💬</div>
<div><h4>WhatsApp</h4><a href="https://wa.me/971505599912" target="_blank" rel="noopener">+971 50 559 9912</a></div>
</div>
<div class="contact-method">
<div class="contact-method-icon">🇪🇦</div>
<div><h4>Based In</h4><p>Dubai, United Arab Emirates</p></div>
</div>
<div class="contact-method">
<div class="contact-method-icon">🏴</div>
<div><h4>Language Support</h4><p>English & Arabic</p></div>
</div>
<hr class="contact-divider">
<div class="response-time">
<strong>⏰ Response Time</strong>
We typically respond within 24 hours on business days (Mon–Fri, 9AM–6PM UAE time).
</div>
</div>
<!-- MOHRE Contact -->
<div class="mohre-card">
<h4>📡 MOHRE Official Contacts</h4>
<p style="font-size:0.82rem;color:var(--gray-600);margin-bottom:1rem">For official gratuity complaints or disputes, contact MOHRE directly:</p>
<div class="mohre-item"><span class="icon">📞</span><span><strong>Helpline:</strong> 800 60</span></div>
<div class="mohre-item"><span class="icon">📱</span><span><strong>WhatsApp:</strong> +971 50 559 9912</span></div>
<div class="mohre-item"><span class="icon">💌</span><span><strong>Email:</strong> info@mohre.gov.ae</span></div>
<div class="mohre-item"><span class="icon">🌐</span><a href="https://mohre.gov.ae" target="_blank" rel="noopener" style="color:var(--green)">Visit MOHRE Website</a></div>
<div class="mohre-item"><span class="icon">⏰</span><span>Mon–Thu: 7:30AM–3:30PM | Fri: 7:30AM–12PM</span></div>
</div>
</div>
<!-- Contact Form -->
<div>
<div class="form-card">
<h2>📝 Send Us a Message</h2>
<p>Fill out the form below and we will get back to you as soon as possible. For urgent gratuity disputes, contact MOHRE directly.</p>
<div id="successMsg" class="success-msg">
<h3>✅ Message Sent!</h3>
<p>Thank you for reaching out. We will respond within 24 hours on business days.</p>
</div>
<form id="contactForm" onsubmit="handleSubmit(event)" novalidate>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="firstName">First Name <span class="required">*</span></label>
<input type="text" id="firstName" class="form-control" placeholder="Your first name" required autocomplete="given-name">
</div>
<div class="form-group">
<label class="form-label" for="lastName">Last Name <span class="required">*</span></label>
<input type="text" id="lastName" class="form-control" placeholder="Your last name" required autocomplete="family-name">
</div>
</div>
<div class="form-group">
<label class="form-label" for="email">Email Address <span class="required">*</span></label>
<input type="email" id="email" class="form-control" placeholder="your@email.com" required autocomplete="email">
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject <span class="required">*</span></label>
<select id="subject" class="form-control" required>
<option value="">-- Select a topic --</option>
<option value="calculator">Question About Calculator</option>
<option value="gratuity-law">UAE Gratuity Law Question</option>
<option value="calculation-check">Want to Verify a Calculation</option>
<option value="mohre-complaint">Need Help with MOHRE Complaint</option>
<option value="limited-contract">Limited Contract Question</option>
<option value="unlimited-contract">Unlimited Contract Question</option>
<option value="freezone">Free Zone Gratuity Question</option>
<option value="bug">Report a Bug or Error</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="emirate">Your Emirate</label>
<select id="emirate" class="form-control">
<option value="">-- Select Emirate --</option>
<option>Dubai</option>
<option>Abu Dhabi</option>
<option>Sharjah</option>
<option>Ras Al Khaimah</option>
<option>Fujairah</option>
<option>Ajman</option>
<option>Umm Al Quwain</option>
<option>DIFC / Free Zone</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="contractType2">Contract Type</label>
<select id="contractType2" class="form-control">
<option value="">-- Select if relevant --</option>
<option>Limited Contract</option>
<option>Unlimited Contract</option>
<option>Free Zone Contract</option>
<option>Not Sure</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="message">Your Message <span class="required">*</span></label>
<textarea id="message" class="form-control" rows="5" placeholder="Please describe your question in detail. Include your years of service, monthly basic salary, and contract type if asking about a specific calculation." required></textarea>
<span class="form-hint">The more detail you provide, the better we can help you.</span>
</div>
<div class="form-group" style="flex-direction:row;align-items:flex-start;gap:0.75rem;margin-top:0.5rem">
<input type="checkbox" id="consent" required style="margin-top:3px;width:auto;flex-shrink:0">
<label for="consent" style="font-size:0.82rem;color:var(--gray-600);cursor:pointer;font-weight:400">
I understand that responses are general information only and not legal advice. For official disputes, I should contact MOHRE directly.
</label>
</div>
<div class="error-box" id="formError" role="alert"></div>
<button type="submit" class="btn btn-primary btn-full btn-lg mt-2">
💌 Send Message
</button>
</form>
</div>
</div>
</div>
<!-- Quick FAQs -->
<div class="faq-quick">
<h2>🔍 Common Questions We Get</h2>
<div class="quick-faq-grid">
<div class="quick-faq-item">
<h4>Can you tell me if my employer calculated my gratuity correctly?</h4>
<p>Yes! Describe your situation (salary, years, contract type) and we can check if the calculation aligns with UAE Labour Law 2024.</p>
</div>
<div class="quick-faq-item">
<h4>My employer refuses to pay gratuity. What should I do?</h4>
<p>Contact MOHRE directly at 800 60. They handle all official gratuity disputes. We can help you understand the process.</p>
</div>
<div class="quick-faq-item">
<h4>Does your calculator work for DIFC employees?</h4>
<p>DIFC follows its own employment law. Our main calculator covers UAE mainland. We have a blog post explaining DIFC differences.</p>
</div>
<div class="quick-faq-item">
<h4>Can I suggest a feature or report a bug?</h4>
<p>Absolutely! Use the contact form above and select "Report a Bug or Error". We review all feedback and improve regularly.</p>
</div>
<div class="quick-faq-item">
<h4>I need legal advice on my specific situation</h4>
<p>We provide general information only. For legal advice, contact a licensed UAE employment lawyer or MOHRE directly at 800 60.</p>
</div>
<div class="quick-faq-item">
<h4>Can I use your calculator on behalf of my employees?</h4>
<p>Yes! HR managers, payroll teams, and employers are welcome to use our calculator to estimate employee gratuity entitlements.</p>
</div>
</div>
</div>
</div>
</section>
<footer role="contentinfo">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo">🇦🇪 UAE Gratuity Calculator Pro</div>
<p>Free, accurate UAE Gratuity Calculator. MOHRE compliant 2024.</p>
</div>
<div class="footer-col"><h4>Quick Links</h4><ul><li><a href="index.html">Home</a></li><li><a href="calculator.html">Calculator</a></li><li><a href="blog.html">Blog</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li></ul></div>
<div class="footer-col"><h4>Legal</h4><ul><li><a href="privacy-policy.html">Privacy Policy</a></li><li><a href="disclaimer.html">Disclaimer</a></li></ul></div>
<div class="footer-col"><h4>Resources</h4><ul><li><a href="https://mohre.gov.ae" target="_blank" rel="noopener">MOHRE Official</a></li></ul></div>
</div>
<div class="footer-bottom"><div>© 2024 UAE Gratuity Calculator Pro.</div></div>
</footer>
<script>
function toggleNav() { document.getElementById('navLinks').classList.toggle('open'); }
document.querySelectorAll('.nav-links a').forEach(a => a.addEventListener('click', () => document.getElementById('navLinks').classList.remove('open')));
function handleSubmit(e) {
e.preventDefault();
const err = document.getElementById('formError');
err.classList.remove('show');
const fn = document.getElementById('firstName').value.trim();
const em = document.getElementById('email').value.trim();
const subj = document.getElementById('subject').value;
const msg = document.getElementById('message').value.trim();
const consent = document.getElementById('consent').checked;
if (!fn) { err.innerHTML = '⚠️ Please enter your first name.'; err.classList.add('show'); return; }
if (!em || !em.includes('@')) { err.innerHTML = '⚠️ Please enter a valid email address.'; err.classList.add('show'); return; }
if (!subj) { err.innerHTML = '⚠️ Please select a subject.'; err.classList.add('show'); return; }
if (msg.length < 20) { err.innerHTML = '⚠️ Please describe your question in more detail (at least 20 characters).'; err.classList.add('show'); return; }
if (!consent) { err.innerHTML = '⚠️ Please accept the terms to continue.'; err.classList.add('show'); return; }
document.getElementById('contactForm').style.display = 'none';
document.getElementById('successMsg').classList.add('show');
}
</script>
</body>
</html>