Initial Commit
This commit is contained in:
Ben Mosley
171
templates/work_order.html
Normal file
171
templates/work_order.html
Normal file
@@ -0,0 +1,171 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Submit Work Order — Thor's Hammer Electrical LLC{% endblock %}
|
||||
|
||||
{% if recaptcha_site_key %}
|
||||
{% block extra_head %}
|
||||
<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}"></script>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ── PAGE HEADER ─────────────────────────────────────────── -->
|
||||
<section class="relative py-20 px-4 text-center overflow-hidden grid-bg">
|
||||
<div class="absolute inset-0 pointer-events-none"
|
||||
style="background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250,204,21,0.06) 0%, transparent 70%);"></div>
|
||||
<div class="relative z-10">
|
||||
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Get Service</p>
|
||||
<h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide mb-4">WORK ORDER</h1>
|
||||
<p class="text-gray-400 max-w-lg mx-auto">
|
||||
Fill out the form below and we'll be notified immediately. We'll follow up with you shortly.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── FORM ────────────────────────────────────────────────── -->
|
||||
<section class="py-16 px-4">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
|
||||
<div class="rounded-2xl border border-white/8 overflow-hidden" style="background-color: #111111;">
|
||||
<!-- Form header -->
|
||||
<div class="px-8 py-6 border-b border-white/8"
|
||||
style="background: linear-gradient(135deg, #161616, #131313);">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fa-solid fa-bolt text-yellow-400 text-xl"></i>
|
||||
<div>
|
||||
<h2 class="font-oswald text-xl font-bold text-white">New Work Order</h2>
|
||||
<p class="text-gray-500 text-xs mt-0.5">All fields are required</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form body -->
|
||||
<form id="work-order-form" action="{{ url_for('submit') }}" method="POST" class="px-8 py-8 space-y-6">
|
||||
|
||||
<!-- Honeypot: hidden from real users, bots fill it and get silently rejected -->
|
||||
<div class="honeypot" aria-hidden="true">
|
||||
<input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<!-- reCAPTCHA v3 token (populated by JS before submit) -->
|
||||
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
|
||||
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-300 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input type="text" id="name" name="name" required
|
||||
placeholder="John Smith"
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
|
||||
</div>
|
||||
|
||||
<!-- Job Description -->
|
||||
<div>
|
||||
<label for="job" class="block text-sm font-medium text-gray-300 mb-2">
|
||||
Job Description
|
||||
</label>
|
||||
<textarea id="job" name="job" required rows="3"
|
||||
placeholder="Describe the electrical work needed..."
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all resize-none"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<div>
|
||||
<label for="address" class="block text-sm font-medium text-gray-300 mb-2">
|
||||
Street Address
|
||||
</label>
|
||||
<input type="text" id="address" name="address" required
|
||||
placeholder="123 Main St"
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
|
||||
</div>
|
||||
|
||||
<!-- City / State / Zip -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||
<div class="col-span-2 sm:col-span-1">
|
||||
<label for="city" class="block text-sm font-medium text-gray-300 mb-2">City</label>
|
||||
<input type="text" id="city" name="city" required
|
||||
placeholder="Levelland"
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
|
||||
</div>
|
||||
<div>
|
||||
<label for="state" class="block text-sm font-medium text-gray-300 mb-2">State</label>
|
||||
<input type="text" id="state" name="state" required
|
||||
placeholder="TX" maxlength="2"
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all uppercase"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
|
||||
</div>
|
||||
<div>
|
||||
<label for="zipcode" class="block text-sm font-medium text-gray-300 mb-2">ZIP</label>
|
||||
<input type="text" id="zipcode" name="zipcode" required
|
||||
placeholder="79336" maxlength="5" pattern="\d{5}"
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label for="phone" class="block text-sm font-medium text-gray-300 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input type="tel" id="phone" name="phone" required
|
||||
placeholder="(806) 555-0123"
|
||||
class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
|
||||
transition-all"
|
||||
style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<div class="pt-2">
|
||||
<button type="submit"
|
||||
class="w-full py-4 bg-yellow-400 text-black font-oswald font-bold tracking-widest
|
||||
text-base rounded-lg hover:bg-yellow-300 active:scale-[0.99]
|
||||
transition-all glow-yellow">
|
||||
<i class="fa-solid fa-bolt mr-2"></i> SUBMIT WORK ORDER
|
||||
</button>
|
||||
<p class="text-center text-gray-600 text-xs mt-3">
|
||||
We'll receive a notification immediately and follow up with you.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% if recaptcha_site_key %}
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.getElementById('work-order-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const form = this;
|
||||
grecaptcha.ready(function() {
|
||||
grecaptcha.execute('{{ recaptcha_site_key }}', { action: 'submit' }).then(function(token) {
|
||||
document.getElementById('g-recaptcha-response').value = token;
|
||||
form.submit();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user