benny/ThorsHammerNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f9a5d74460434887e7f967d6a6431bc6eb15f631
ThorsHammerNew/templates/base.html
Ben Mosley 5d86aa000c Initial Commit
2026-04-25 12:03:54 -05:00

181 lines
9.3 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Thor's Hammer Electrical LLC{% endblock %}</title>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZJ4YKQNNG1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZJ4YKQNNG1');
</script>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome 6 Free -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Google Fonts: Oswald -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="{{ url_for('static', filename='images/Logo.png') }}">
<style>
body { font-family: 'Inter', system-ui, sans-serif; background-color: #080808; }
.font-oswald { font-family: 'Oswald', sans-serif; }
.glow-yellow { box-shadow: 0 0 20px rgba(250, 204, 21, 0.4), 0 0 60px rgba(250, 204, 21, 0.15); }
.glow-yellow-sm { box-shadow: 0 0 12px rgba(250, 204, 21, 0.35); }
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(250, 204, 21, 0.15); }
.grid-bg {
background-image:
linear-gradient(rgba(250,204,21,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(250,204,21,0.03) 1px, transparent 1px);
background-size: 60px 60px;
}
.honeypot { position: absolute; left: -9999px; top: -9999px; }
.text-gradient {
background: linear-gradient(135deg, #facc15, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-link {
position: relative;
padding: 6px 14px;
color: #d1d5db;
font-weight: 500;
transition: color 0.2s;
border-radius: 6px;
}
.nav-link:hover { color: #facc15; background: rgba(255,255,255,0.04); }
.nav-link.active { color: #facc15; }
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="text-white antialiased" style="background-color: #080808;">
<!-- Navbar -->
<nav style="background-color: #0f0f0f; border-bottom: 1px solid rgba(250,204,21,0.15);" class="sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Brand -->
<a href="{{ url_for('index') }}" class="flex items-center gap-3 group flex-shrink-0">
<img src="{{ url_for('static', filename='images/Logo.png') }}" alt="Logo" class="h-10 w-10 rounded-full ring-2 ring-yellow-400/30 group-hover:ring-yellow-400/70 transition-all">
<span class="font-oswald text-lg font-bold text-white group-hover:text-yellow-400 transition-colors tracking-wide hidden sm:block">
Thor's Hammer Electrical
</span>
</a>
<!-- Desktop Links -->
<div class="hidden md:flex items-center gap-1">
<a href="{{ url_for('index') }}" class="nav-link">Home</a>
<a href="{{ url_for('about') }}" class="nav-link">About</a>
<a href="{{ url_for('services') }}" class="nav-link">Services</a>
<a href="{{ url_for('reviews') }}" class="nav-link">Reviews</a>
<a href="{{ url_for('contact') }}" class="nav-link">Contact</a>
<a href="{{ url_for('work_order') }}"
class="ml-3 px-5 py-2 bg-yellow-400 text-black font-oswald font-bold tracking-wider text-sm rounded-lg hover:bg-yellow-300 transition-all glow-yellow-sm">
<i class="fa-solid fa-bolt mr-1"></i> WORK ORDER
</a>
</div>
<!-- Mobile Toggle -->
<button id="mobile-btn" type="button" aria-label="Toggle navigation" class="md:hidden p-2 rounded-lg text-gray-400 hover:text-yellow-400 hover:bg-white/5 transition-all">
<svg id="icon-open" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg id="icon-close" class="h-6 w-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden pb-4 border-t border-white/5 mt-2 pt-3">
<div class="flex flex-col gap-1">
<a href="{{ url_for('index') }}" class="nav-link">Home</a>
<a href="{{ url_for('about') }}" class="nav-link">About</a>
<a href="{{ url_for('services') }}" class="nav-link">Services</a>
<a href="{{ url_for('reviews') }}" class="nav-link">Reviews</a>
<a href="{{ url_for('contact') }}" class="nav-link">Contact</a>
<a href="{{ url_for('work_order') }}"
class="mt-2 px-5 py-3 bg-yellow-400 text-black font-oswald font-bold tracking-wider text-sm rounded-lg text-center hover:bg-yellow-300 transition-all">
<i class="fa-solid fa-bolt mr-1"></i> SUBMIT WORK ORDER
</a>
</div>
</div>
</div>
</nav>
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="max-w-7xl mx-auto px-4 pt-4 space-y-2">
{% for category, message in messages %}
<div class="px-4 py-3 rounded-lg border text-sm font-medium
{% if category == 'success' %}bg-green-950 border-green-500/50 text-green-300
{% elif category == 'danger' %}bg-red-950 border-red-500/50 text-red-300
{% else %}bg-yellow-950 border-yellow-500/50 text-yellow-300{% endif %}">
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- Main Content -->
{% block content %}{% endblock %}
<!-- Footer -->
<footer style="background-color: #0f0f0f; border-top: 1px solid rgba(250,204,21,0.12);" class="mt-24 py-12">
<div class="max-w-7xl mx-auto px-4 text-center">
<div class="flex justify-center mb-5">
<img src="{{ url_for('static', filename='images/Logo.png') }}" alt="Logo"
class="h-14 w-14 rounded-full ring-2 ring-yellow-400/30">
</div>
<p class="font-oswald text-2xl text-yellow-400 tracking-widest mb-1">THOR'S HAMMER ELECTRICAL LLC</p>
<p class="text-gray-600 text-sm mb-2">Levelland, Texas</p>
<p class="text-gray-600 text-sm mb-6">&copy; 2025 Thor's Hammer Electrical LLC. All rights reserved.</p>
<div class="flex justify-center gap-4 flex-wrap">
<a href="{{ url_for('index') }}" class="text-gray-500 hover:text-yellow-400 text-sm transition-colors">Home</a>
<a href="{{ url_for('about') }}" class="text-gray-500 hover:text-yellow-400 text-sm transition-colors">About</a>
<a href="{{ url_for('services') }}" class="text-gray-500 hover:text-yellow-400 text-sm transition-colors">Services</a>
<a href="{{ url_for('reviews') }}" class="text-gray-500 hover:text-yellow-400 text-sm transition-colors">Reviews</a>
<a href="{{ url_for('contact') }}" class="text-gray-500 hover:text-yellow-400 text-sm transition-colors">Contact</a>
<a href="{{ url_for('work_order') }}" class="text-yellow-500 hover:text-yellow-300 text-sm transition-colors font-medium">Submit Work Order</a>
</div>
<div class="mt-8 pt-6 border-t border-white/5">
<a href="https://www.bennyshouse.net" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-gray-500 hover:text-gray-300 text-xs transition-all">
Web Design by Benny's House
</a>
</div>
</div>
</footer>
<script>
const btn = document.getElementById('mobile-btn');
const menu = document.getElementById('mobile-menu');
const iconOpen = document.getElementById('icon-open');
const iconClose = document.getElementById('icon-close');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
iconOpen.classList.toggle('hidden');
iconClose.classList.toggle('hidden');
});
</script>
{% block extra_scripts %}{% endblock %}
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink