356 lines
24 KiB
HTML
356 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="en" class="scroll-smooth">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Leitan GPS · Support & Downloads for Construction Machinery</title>
|
||
<meta name="description" content="Find product manuals, firmware/software downloads, knowledge base articles, and how‑to videos for construction machinery GPS automation." />
|
||
<meta name="theme-color" content="#0ea5e9" />
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%230ea5e9'/%3E%3Cpath d='M50 20a30 30 0 1030 30A30 30 0 0050 20zm0 10a20 20 0 11-20 20A20 20 0 0150 30z' fill='white'/%3E%3C/svg%3E" />
|
||
|
||
<!-- Tailwind v4 Play CDN -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<script type="tailwind-config">
|
||
export default {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
brand: {
|
||
50: '#eff6ff',
|
||
100: '#dbeafe',
|
||
200: '#bfdbfe',
|
||
300: '#93c5fd',
|
||
400: '#60a5fa',
|
||
500: '#3b82f6',
|
||
600: '#2563eb',
|
||
700: '#1d4ed8',
|
||
800: '#1e40af',
|
||
900: '#1e3a8a'
|
||
}
|
||
},
|
||
boxShadow: {
|
||
soft: '0 10px 30px rgba(0,0,0,0.06)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
html { scroll-behavior: smooth; }
|
||
::selection { background: #bfdbfe; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-white text-gray-800 antialiased dark:bg-gray-950 dark:text-gray-100">
|
||
<!-- Decorative BG -->
|
||
<div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
|
||
<div class="absolute -top-32 left-1/2 h-80 w-[1100px] -translate-x-1/2 rounded-full bg-gradient-to-r from-brand-400/30 via-sky-400/20 to-cyan-400/30 blur-3xl dark:from-brand-600/30 dark:via-sky-600/20 dark:to-cyan-600/30"></div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<header id="top" class="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/60 bg-white/80 border-b border-gray-200/70 dark:bg-gray-950/70 dark:border-gray-800">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div class="flex h-16 items-center justify-between">
|
||
<!-- Logo -->
|
||
<a href="#" class="flex items-center gap-2">
|
||
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-white shadow-soft">L</span>
|
||
<span class="font-semibold">Leitan GPS</span>
|
||
</a>
|
||
|
||
<!-- Desktop Nav -->
|
||
<nav class="hidden md:flex items-center gap-8 text-sm">
|
||
<a href="#support" class="hover:text-brand-600 dark:hover:text-brand-400">Support</a>
|
||
<a href="#catalog" class="hover:text-brand-600 dark:hover:text-brand-400">Catalog</a>
|
||
<span class="h-5 w-px bg-gray-300/60 dark:bg-gray-700"></span>
|
||
<!-- Language (no real switch yet) -->
|
||
<div class="flex items-center gap-3" role="group" aria-label="Language">
|
||
<button type="button" class="text-xs px-2 py-1 rounded border border-gray-300/80 hover:border-brand-500 hover:text-brand-600 dark:border-gray-700 dark:hover:border-brand-500" title="Italiano (not implemented)">IT</button>
|
||
<button type="button" class="text-xs px-2 py-1 rounded border border-brand-500 text-brand-700 dark:text-brand-300" aria-pressed="true" title="English">EN</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex items-center gap-3">
|
||
<a href="/employee/index.html" class="hidden sm:inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm hover:border-brand-500 hover:text-brand-600 dark:bg-gray-900 dark:border-gray-700">Employee Portal</a>
|
||
<button id="themeToggle" aria-label="Toggle theme" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white shadow-sm hover:border-brand-500 dark:bg-gray-900 dark:border-gray-700">
|
||
<svg id="iconSun" class="h-5 w-5 hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2m0 14v2m9-9h-2M5 12H3m15.364-6.364l-1.414 1.414M7.05 16.95l-1.414 1.414m0-11.314l1.414 1.414M16.95 16.95l1.414 1.414"/><circle cx="12" cy="12" r="4"/></svg>
|
||
<svg id="iconMoon" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
|
||
</button>
|
||
<button class="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white shadow-sm hover:border-brand-500 dark:bg-gray-900 dark:border-gray-700" aria-label="Open menu" id="menuBtn">
|
||
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div id="mobileMenu" class="md:hidden hidden border-t border-gray-200 dark:border-gray-800 py-3">
|
||
<nav class="grid gap-2 text-sm">
|
||
<a href="#support" class="px-2 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Support</a>
|
||
<a href="#catalog" class="px-2 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Catalog</a>
|
||
<div class="flex items-center gap-2 px-2 pt-2">
|
||
<button type="button" class="text-xs px-2 py-1 rounded border border-gray-300/80 dark:border-gray-700">IT</button>
|
||
<button type="button" class="text-xs px-2 py-1 rounded border border-brand-500 text-brand-700 dark:text-brand-300">EN</button>
|
||
<a href="/employee/index.html" class="ml-auto text-xs px-2 py-1 rounded border border-gray-300/80 dark:border-gray-700">Employee</a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero: laser-focused on Support -->
|
||
<section class="relative" id="hero">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-10 py-16 lg:py-24 items-center">
|
||
<div>
|
||
<p class="inline-flex items-center gap-2 rounded-full border border-brand-200 bg-white/80 px-3 py-1 text-xs text-brand-700 shadow-sm dark:bg-gray-900/70 dark:border-brand-800 dark:text-brand-300">
|
||
<span class="h-2 w-2 rounded-full bg-brand-500"></span> Support & Downloads
|
||
</p>
|
||
<h1 class="mt-5 text-4xl font-bold tracking-tight sm:text-5xl">
|
||
Find manuals, firmware and videos
|
||
<br class="hidden sm:block" />in seconds
|
||
</h1>
|
||
<p class="mt-5 text-base text-gray-600 dark:text-gray-300 max-w-2xl">
|
||
Search by <strong>model</strong> or <strong>serial number</strong> to jump straight to all resources linked to a product: documentation, software, knowledge base, and how‑to videos.
|
||
</p>
|
||
|
||
<!-- Global Search (mock: redirect to /support with query) -->
|
||
<form id="globalSearch" class="mt-6">
|
||
<label class="relative block">
|
||
<input id="q" type="text" placeholder="Search by model or serial (e.g. A1 or SN-A1-2025…)" class="w-full rounded-xl border border-gray-300 bg-white px-4 py-4 pr-12 text-base shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 dark:bg-gray-950 dark:border-gray-800" />
|
||
<button class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm hover:border-brand-500 dark:bg-gray-900 dark:border-gray-700" type="submit" aria-label="Search">
|
||
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"/></svg>
|
||
</button>
|
||
</label>
|
||
<p class="mt-2 text-xs text-gray-500">Tip: You can also paste a serial number to resolve its model automatically (demo mapping later).</p>
|
||
</form>
|
||
|
||
<div class="mt-8 flex flex-wrap gap-3">
|
||
<a href="#support" class="inline-flex items-center justify-center rounded-xl bg-brand-600 px-5 py-3 text-white shadow-soft hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500">Go to Support</a>
|
||
<a href="#catalog" class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white px-5 py-3 text-gray-900 shadow-sm hover:border-brand-500 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700">Browse Catalog</a>
|
||
</div>
|
||
|
||
<div class="mt-6 flex items-center gap-6 text-xs text-gray-500 dark:text-gray-400">
|
||
<div class="flex items-center gap-2"><svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.5 4.21l.61-1.22A2 2 0 0110 2h4a2 2 0 011.79 1l.61 1.22A2 2 0 0018 6v12a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 011.5-1.79z"/></svg> Multi‑language manuals</div>
|
||
<div class="flex items-center gap-2"><svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-2.21 0-4 1.79-4 4v3H6a2 2 0 00-2 2v1h16v-1a2 2 0 00-2-2h-2v-3c0-2.21-1.79-4-4-4z"/></svg> Role‑based access (internal)</div>
|
||
<div class="flex items-center gap-2"><svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5h12M9 3v2m-6 6h12M9 9v2M3 17h12M9 15v2M17 8l4 4-4 4"/></svg> Firmware & tools</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="relative rounded-2xl border border-gray-200 bg-white p-3 shadow-soft dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="aspect-video w-full overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
|
||
<img src="https://images.pexels.com/photos/280140/pexels-photo-280140.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1600" alt="Construction machinery with cranes — Pexels" class="h-full w-full object-cover"/>
|
||
</div>
|
||
<div class="mt-3 flex items-center justify-between">
|
||
<div class="text-sm text-gray-600 dark:text-gray-300">2‑min overview: wiring & installation</div>
|
||
<a href="#support" class="inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm border border-gray-300 hover:border-brand-500 dark:border-gray-700">
|
||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg>
|
||
Watch
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pexels Media Strip -->
|
||
<section id="media" class="py-10 sm:py-14">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div class="flex items-end justify-between">
|
||
<h2 class="text-xl sm:text-2xl font-semibold">Field visuals</h2>
|
||
<a href="https://www.pexels.com/search/construction%20machinery/" target="_blank" rel="noopener" class="text-sm hover:text-brand-600 dark:hover:text-brand-400">More on Pexels</a>
|
||
</div>
|
||
<div class="mt-6 grid gap-4 sm:grid-cols-3">
|
||
<!-- Photo 1 -->
|
||
<a href="https://www.pexels.com/photo/excavator-at-construction-site-14452156/" target="_blank" rel="noopener" class="group relative overflow-hidden rounded-2xl aspect-[16/9]">
|
||
<img src="https://images.pexels.com/photos/14452156/pexels-photo-14452156.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1600" alt="Excavator at construction site — Pexels" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
|
||
<div class="absolute left-3 bottom-3 text-white text-sm">Excavator on site</div>
|
||
</a>
|
||
<!-- Photo 2 -->
|
||
<a href="https://www.pexels.com/photo/construction-site-build-construction-work-159306/" target="_blank" rel="noopener" class="group relative overflow-hidden rounded-2xl aspect-[16/9]">
|
||
<img src="https://images.pexels.com/photos/159306/construction-site-build-construction-work-159306.jpeg" alt="Construction site — Pexels" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
|
||
<div class="absolute left-3 bottom-3 text-white text-sm">Heavy machinery</div>
|
||
</a>
|
||
<!-- Video tile (opens Pexels) -->
|
||
<a href="https://www.pexels.com/video/time-lapse-video-of-an-excavator-5342014/" target="_blank" rel="noopener" class="group relative overflow-hidden rounded-2xl aspect-[16/9]">
|
||
<img src="https://images.pexels.com/photos/280140/pexels-photo-280140.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1600" alt="Construction cranes — Pexels" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/>
|
||
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition-colors"></div>
|
||
<div class="absolute inset-0 grid place-items-center">
|
||
<span class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-white/90 shadow-soft">
|
||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg>
|
||
</span>
|
||
</div>
|
||
<div class="absolute left-3 bottom-3 flex items-center gap-2 text-white text-sm">
|
||
<span class="inline-flex items-center gap-1 rounded bg-black/40 px-2 py-0.5 text-xs">Video · Pexels</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400">Media courtesy of Pexels. Replace with your brand footage anytime.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Categories / Catalog Anchor -->
|
||
<section id="catalog" class="py-12 sm:py-16">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div class="mx-auto max-w-3xl text-center">
|
||
<h2 class="text-2xl sm:text-3xl font-semibold">Browse by category</h2>
|
||
<p class="mt-3 text-gray-600 dark:text-gray-300">Positioning units, sensors and antennas for heavy machinery automation.</p>
|
||
</div>
|
||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
<a href="#support" class="group rounded-2xl border border-gray-200 bg-white p-6 shadow-soft hover:shadow-lg transition-shadow dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300">
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>
|
||
</div>
|
||
<h3 class="mt-4 font-semibold">Positioning units</h3>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Multi‑GNSS, multi‑frequency receivers (IP67).</p>
|
||
</a>
|
||
<a href="#support" class="group rounded-2xl border border-gray-200 bg-white p-6 shadow-soft hover:shadow-lg transition-shadow dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300">
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7h18M3 12h18M3 17h18"/></svg>
|
||
</div>
|
||
<h3 class="mt-4 font-semibold">Sensors (IMU)</h3>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">6‑axis attitude, vibration‑resistant.</p>
|
||
</a>
|
||
<a href="#support" class="group rounded-2xl border border-gray-200 bg-white p-6 shadow-soft hover:shadow-lg transition-shadow dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300">
|
||
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>
|
||
</div>
|
||
<h3 class="mt-4 font-semibold">Antennas & accessories</h3>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Low‑noise LNA, magnetic/flange mounts.</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Support (anchor-preview) -->
|
||
<section id="support" class="py-12 sm:py-16 bg-gray-50 dark:bg-gray-900/30 border-y border-gray-200/70 dark:border-gray-800">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div class="mx-auto max-w-3xl text-center">
|
||
<h2 class="text-2xl sm:text-3xl font-semibold">Support & Downloads</h2>
|
||
<p class="mt-3 text-gray-600 dark:text-gray-300">Jump to a product’s resources with model or serial. Latest updates are listed below for quick access.</p>
|
||
</div>
|
||
|
||
<!-- Latest updates (demo) -->
|
||
<div class="mt-8 grid gap-6 lg:grid-cols-3">
|
||
<article class="rounded-2xl border border-gray-200 bg-white p-6 shadow-soft dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="text-xs text-gray-500">Manual · Updated Jul 8, 2025</div>
|
||
<h3 class="mt-1 font-semibold">A1 Wiring & Installation (v1.8, EN)</h3>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">PDF · 2.3MB · SHA256‑…d9c</p>
|
||
<div class="mt-3 flex gap-2">
|
||
<a href="#" class="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:border-brand-500 dark:border-gray-700">Download</a>
|
||
<a href="#" class="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:border-brand-500 dark:border-gray-700">Version history</a>
|
||
</div>
|
||
</article>
|
||
<article class="rounded-2xl border border-gray-200 bg-white p-6 shadow-soft dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="text-xs text-gray-500">Firmware · Updated Jun 20, 2025</div>
|
||
<h3 class="mt-1 font-semibold">IMU‑PRO Firmware (v2.2)</h3>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">BIN · 18.4MB · MD5‑…6a5 · Compat: IMU‑PRO hw v2.x+</p>
|
||
<div class="mt-3 flex gap-2">
|
||
<a href="#" class="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:border-brand-500 dark:border-gray-700">Download</a>
|
||
<a href="#" class="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:border-brand-500 dark:border-gray-700">Release notes</a>
|
||
</div>
|
||
</article>
|
||
<article class="rounded-2xl border border-gray-200 bg-white p-6 shadow-soft dark:bg-gray-900 dark:border-gray-800">
|
||
<div class="text-xs text-gray-500">Video · New</div>
|
||
<h3 class="mt-1 font-semibold">A1 Quick Install (2:13)</h3>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">720p / 1080p · Poster preview</p>
|
||
<div class="mt-3 flex gap-2">
|
||
<a href="#" class="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:border-brand-500 dark:border-gray-700">Watch</a>
|
||
<a href="#" class="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:border-brand-500 dark:border-gray-700">KB article</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="mt-12 border-t border-gray-200/70 dark:border-gray-800">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
|
||
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||
<div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-white shadow-soft">L</span>
|
||
<span class="font-semibold">Leitan GPS</span>
|
||
</div>
|
||
<p class="mt-3 text-sm text-gray-600 dark:text-gray-300">Support & Downloads for construction machinery GPS automation.</p>
|
||
</div>
|
||
<div>
|
||
<div class="font-semibold">Product</div>
|
||
<ul class="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li><a href="#catalog" class="hover:underline">Positioning units</a></li>
|
||
<li><a href="#catalog" class="hover:underline">Sensors (IMU)</a></li>
|
||
<li><a href="#catalog" class="hover:underline">Antennas & accessories</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="font-semibold">Resources</div>
|
||
<ul class="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li><a href="#support" class="hover:underline">Support & downloads</a></li>
|
||
<li><a href="#" class="hover:underline">Privacy policy</a></li>
|
||
<li><a href="#" class="hover:underline">Cookie preferences</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="font-semibold">Contact</div>
|
||
<ul class="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>support@example.com</li>
|
||
<li>Mon–Fri, 09:00–18:00</li>
|
||
<li>Italy / Singapore</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
|
||
<div>© 2025 Leitan Tech. All rights reserved.</div>
|
||
<a href="#top" class="inline-flex items-center gap-1 hover:text-brand-600 dark:hover:text-brand-400">Back to top <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<script>
|
||
// Theme init
|
||
(function() {
|
||
const stored = localStorage.getItem('theme');
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
if (stored === 'dark' || (!stored && prefersDark)) {
|
||
document.documentElement.classList.add('dark');
|
||
}
|
||
})();
|
||
|
||
// Theme toggle
|
||
const themeBtn = document.getElementById('themeToggle');
|
||
const sun = document.getElementById('iconSun');
|
||
const moon = document.getElementById('iconMoon');
|
||
function syncIcons() {
|
||
const isDark = document.documentElement.classList.contains('dark');
|
||
sun.classList.toggle('hidden', !isDark);
|
||
moon.classList.toggle('hidden', isDark);
|
||
}
|
||
themeBtn?.addEventListener('click', () => {
|
||
document.documentElement.classList.toggle('dark');
|
||
const isDark = document.documentElement.classList.contains('dark');
|
||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||
syncIcons();
|
||
});
|
||
syncIcons();
|
||
|
||
// Mobile menu
|
||
const menuBtn = document.getElementById('menuBtn');
|
||
const mobileMenu = document.getElementById('mobileMenu');
|
||
menuBtn?.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
|
||
|
||
// Global search (demo): redirect to /support with query param
|
||
document.getElementById('globalSearch')?.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const q = (document.getElementById('q')?.value || '').trim();
|
||
if (!q) return;
|
||
// In real app: detect SN vs model, map SN -> model then deep link to product resource
|
||
window.location.href = '/support/index.html?q=' + encodeURIComponent(q);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|