8c5fbc4668
Removes the absolute-positioned overlay layout. The drone AI vision SVG now sits as a full-width block element sized by CSS height (clamp 360px–640px), with the Build/Share/Deploy copy in normal document flow beneath it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
480 lines
40 KiB
HTML
480 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Bournemouth Technology — Drone Devkits & Open Source</title>
|
|
<meta name="description" content="Hardware drone devkits, open-source flight software, and integrated consultancy for domestic and industrial solutions.">
|
|
<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=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script>
|
|
(function(){var t=localStorage.getItem('theme'),d=window.matchMedia('(prefers-color-scheme: dark)').matches;if(t==='dark'||(t===null&&d))document.documentElement.classList.add('dark');})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav class="nav">
|
|
<div class="nav-inner">
|
|
<a href="index.html" class="nav-logo">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
|
<rect x="6" y="6" width="12" height="12" rx="1.5"/>
|
|
<rect x="9.5" y="9.5" width="5" height="5" fill="currentColor" stroke="none"/>
|
|
<path d="M9 6V2.5M15 6V2.5M9 21.5V18M15 21.5V18M6 9H2.5M6 15H2.5M21.5 9H18M21.5 15H18"/>
|
|
</svg>
|
|
<span>Bournemouth Technology</span>
|
|
</a>
|
|
<div class="nav-right">
|
|
<nav class="nav-links" aria-label="Main">
|
|
<a href="devkits.html">Devkits</a>
|
|
<a href="opensource.html">Open Source</a>
|
|
<a href="consultancy.html">Consultancy</a>
|
|
<a href="videos.html">Videos</a>
|
|
<a href="worlds.html">Worlds</a>
|
|
</nav>
|
|
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
|
|
<svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
|
|
<svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
</button>
|
|
<a href="devkits.html" class="btn btn-dark btn-sm">Buy a devkit</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<header class="hero">
|
|
<!-- Plan-view drone silhouettes (z-index 0) -->
|
|
<div class="hero-bg" aria-hidden="true">
|
|
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.055;transform:rotate(14deg);">
|
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:absolute;top:150px;right:-40px;width:320px;opacity:0.045;transform:rotate(-9deg);">
|
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:absolute;top:90px;left:46%;width:120px;opacity:0.05;transform:rotate(26deg);">
|
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:absolute;bottom:35%;left:8%;width:150px;opacity:0.05;transform:rotate(-20deg);">
|
|
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
|
|
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
|
|
<rect x="41" y="41" width="18" height="18" rx="4"/>
|
|
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
|
|
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
|
|
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
|
|
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
|
|
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
|
|
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI vision drone graphic (z-index 1) -->
|
|
<div class="drone-vision-bg" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 860" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<radialGradient id="rotorG" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.16"/><stop offset="60%" stop-color="#0A0A0A" stop-opacity="0.06"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></radialGradient>
|
|
<linearGradient id="armG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3a3a3a"/><stop offset="100%" stop-color="#101010"/></linearGradient>
|
|
<linearGradient id="bodyTopG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4a4a4a"/><stop offset="100%" stop-color="#202020"/></linearGradient>
|
|
<linearGradient id="bodySideG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1c1c1c"/><stop offset="100%" stop-color="#0a0a0a"/></linearGradient>
|
|
<linearGradient id="chipHi" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6f6f6f"/><stop offset="100%" stop-color="#343434"/></linearGradient>
|
|
<radialGradient id="gimbalG" cx="38%" cy="30%" r="72%"><stop offset="0%" stop-color="#6a6a6a"/><stop offset="55%" stop-color="#2a2a2a"/><stop offset="100%" stop-color="#0a0a0a"/></radialGradient>
|
|
<radialGradient id="camHalo" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.12"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></radialGradient>
|
|
<linearGradient id="coneG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.06"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></linearGradient>
|
|
</defs>
|
|
<!-- Vision cone -->
|
|
<g>
|
|
<polygon points="900,250 40,836 1760,836" fill="url(#coneG)"/>
|
|
<polygon points="760,498 1040,498 1760,836 40,836" fill="#0A0A0A" fill-opacity="0.018"/>
|
|
<line x1="900" y1="250" x2="40" y2="836" stroke="#0A0A0A" stroke-width="1.2" stroke-opacity="0.32" stroke-dasharray="2 5"/>
|
|
<line x1="900" y1="250" x2="1760" y2="836" stroke="#0A0A0A" stroke-width="1.2" stroke-opacity="0.32" stroke-dasharray="2 5"/>
|
|
</g>
|
|
<!-- Perspective grid -->
|
|
<g><line x1="760.0" y1="498.0" x2="40.0" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="783.3" y1="498.0" x2="183.3" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="806.6" y1="498.0" x2="326.6" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="830.0" y1="498.0" x2="469.8" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="853.3" y1="498.0" x2="613.1" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="876.6" y1="498.0" x2="756.4" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="899.9" y1="498.0" x2="899.7" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="923.3" y1="498.0" x2="1042.9" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="946.6" y1="498.0" x2="1186.2" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="969.9" y1="498.0" x2="1329.5" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="993.2" y1="498.0" x2="1472.8" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="1016.6" y1="498.0" x2="1616.0" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="1039.9" y1="498.0" x2="1759.3" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="760.0" y1="498.0" x2="1040.0" y2="498.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.032"/><line x1="670.0" y1="540.3" x2="1130.0" y2="540.3" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.042"/><line x1="580.0" y1="582.5" x2="1220.0" y2="582.5" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.052"/><line x1="490.0" y1="624.8" x2="1310.0" y2="624.8" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.062"/><line x1="400.0" y1="667.0" x2="1400.0" y2="667.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.072"/><line x1="310.0" y1="709.3" x2="1490.0" y2="709.3" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.082"/><line x1="220.0" y1="751.5" x2="1580.0" y2="751.5" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.092"/><line x1="130.0" y1="793.8" x2="1670.0" y2="793.8" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.102"/><line x1="40.0" y1="836.0" x2="1760.0" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.112"/></g>
|
|
<!-- Surveilled perimeter -->
|
|
<g><polygon points="650.1,565.6 900.0,545.3 1168.6,572.4 1429.1,721.1 900.0,761.6 383.2,721.1" fill="#0A0A0A" fill-opacity="0.012" stroke="#0A0A0A" stroke-width="1.3" stroke-opacity="0.4" stroke-dasharray="7 5"/><circle cx="650.1" cy="565.6" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="900.0" cy="545.3" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="1168.6" cy="572.4" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="1429.1" cy="721.1" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="900.0" cy="761.6" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="383.2" cy="721.1" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><rect x="822.0" y="525.3" width="156" height="15" fill="#fff" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.4"/><text x="900.0" y="536.3" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="9.5" fill="#0A0A0A">SURVEILLED PERIMETER</text></g>
|
|
<!-- AI detection bounding boxes -->
|
|
<g>
|
|
<g><path d="M 551.0 645.5 L 551.0 631.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 551.0 631.2 L 565.2 631.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 594.0 631.2 L 608.2 631.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 608.2 631.2 L 608.2 645.5" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 551.0 661.5 L 551.0 675.7" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 551.0 675.7 L 565.2 675.7" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 594.0 675.7 L 608.2 675.7" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 608.2 675.7 L 608.2 661.5" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="551.0" y="616.2" width="79" height="13" fill="#0A0A0A"/><text x="556.0" y="626.2" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">vehicle 0.98</text></g>
|
|
<g><path d="M 705.8 690.0 L 705.8 678.3" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 705.8 678.3 L 717.5 678.3" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 730.7 678.3 L 742.4 678.3" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 742.4 678.3 L 742.4 690.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 705.8 725.1 L 705.8 736.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 705.8 736.8 L 717.5 736.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 730.7 736.8 L 742.4 736.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 742.4 736.8 L 742.4 725.1" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="705.8" y="663.3" width="74" height="13" fill="#0A0A0A"/><text x="710.8" y="673.3" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">person 0.95</text></g>
|
|
<g><path d="M 941.5 606.8 L 941.5 597.6" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 941.5 597.6 L 950.7 597.6" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 961.1 597.6 L 970.3 597.6" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 970.3 597.6 L 970.3 606.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 941.5 632.5 L 941.5 641.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 941.5 641.8 L 950.7 641.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 961.1 641.8 L 970.3 641.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 970.3 641.8 L 970.3 632.5" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="941.5" y="582.6" width="74" height="13" fill="#0A0A0A"/><text x="946.5" y="592.6" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">person 0.92</text></g>
|
|
<g><path d="M 1143.4 692.2 L 1143.4 676.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1143.4 676.8 L 1158.7 676.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1190.4 676.8 L 1205.8 676.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1205.8 676.8 L 1205.8 692.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1143.4 709.4 L 1143.4 724.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1143.4 724.8 L 1158.7 724.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1190.4 724.8 L 1205.8 724.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1205.8 724.8 L 1205.8 709.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="1143.4" y="661.8" width="79" height="13" fill="#0A0A0A"/><text x="1148.4" y="671.8" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">vehicle 0.96</text></g>
|
|
<g><path d="M 1232.4 640.4 L 1232.4 629.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1232.4 629.0 L 1243.7 629.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1268.9 629.0 L 1280.2 629.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1280.2 629.0 L 1280.2 640.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1232.4 653.1 L 1232.4 664.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1232.4 664.4 L 1243.7 664.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1268.9 664.4 L 1280.2 664.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1280.2 664.4 L 1280.2 653.1" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="1232.4" y="614.0" width="74" height="13" fill="#0A0A0A"/><text x="1237.4" y="624.0" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">object 0.90</text></g>
|
|
</g>
|
|
<!-- Alert pulse -->
|
|
<g>
|
|
<circle cx="1200.0" cy="667.0" r="6" fill="none" stroke="#0A0A0A" stroke-opacity="0.5" stroke-width="1.4">
|
|
<animate attributeName="r" values="6;17;6" dur="2.6s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-opacity" values="0.5;0;0.5" dur="2.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="1200.0" cy="667.0" r="9" fill="#0A0A0A"/>
|
|
<text x="1200.0" y="670.2" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="11" font-weight="700" fill="#fff">!</text>
|
|
</g>
|
|
<!-- Drone body (3/4 perspective) -->
|
|
<g transform="translate(600,-50)">
|
|
<g><ellipse cx="150" cy="250" rx="81.12" ry="26" fill="url(#rotorG)"/><ellipse cx="150" cy="250" rx="78.7" ry="25.2" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="150" cy="250" rx="48.7" ry="15.6" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="150" cy="256.2" rx="16.6" ry="7.8" fill="#0a0a0a"/><ellipse cx="150" cy="250" rx="15.6" ry="7.3" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="150" cy="250" rx="7.3" ry="3.5" fill="#5a5a5a"/><circle cx="150" cy="250" r="2.1" fill="#0a0a0a"/></g>
|
|
<g><ellipse cx="450" cy="250" rx="81.12" ry="26" fill="url(#rotorG)"/><ellipse cx="450" cy="250" rx="78.7" ry="25.2" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="450" cy="250" rx="48.7" ry="15.6" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="450" cy="256.2" rx="16.6" ry="7.8" fill="#0a0a0a"/><ellipse cx="450" cy="250" rx="15.6" ry="7.3" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="450" cy="250" rx="7.3" ry="3.5" fill="#5a5a5a"/><circle cx="450" cy="250" r="2.1" fill="#0a0a0a"/></g>
|
|
<g><ellipse cx="208" cy="150" rx="62.4" ry="20" fill="url(#rotorG)"/><ellipse cx="208" cy="150" rx="60.5" ry="19.4" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="208" cy="150" rx="37.4" ry="12.0" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="208" cy="154.8" rx="12.8" ry="6.0" fill="#0a0a0a"/><ellipse cx="208" cy="150" rx="12.0" ry="5.6" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="208" cy="150" rx="5.6" ry="2.7" fill="#5a5a5a"/><circle cx="208" cy="150" r="1.6" fill="#0a0a0a"/></g>
|
|
<g><ellipse cx="392" cy="150" rx="62.4" ry="20" fill="url(#rotorG)"/><ellipse cx="392" cy="150" rx="60.5" ry="19.4" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="392" cy="150" rx="37.4" ry="12.0" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="392" cy="154.8" rx="12.8" ry="6.0" fill="#0a0a0a"/><ellipse cx="392" cy="150" rx="12.0" ry="5.6" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="392" cy="150" rx="5.6" ry="2.7" fill="#5a5a5a"/><circle cx="392" cy="150" r="1.6" fill="#0a0a0a"/></g>
|
|
<polygon points="300,246 156,252 172,268 314,262" fill="url(#armG)"/>
|
|
<polygon points="300,246 444,252 428,268 286,262" fill="url(#armG)"/>
|
|
<polygon points="298,242 212,154 200,166 286,256" fill="url(#armG)"/>
|
|
<polygon points="302,242 388,154 400,166 314,256" fill="url(#armG)"/>
|
|
<polygon points="300,182 372,218 340,270 260,270 228,218" fill="url(#bodySideG)"/>
|
|
<polygon points="300,182 372,218 300,240 228,218" fill="url(#bodyTopG)"/>
|
|
<polygon points="300,196 344,218 300,236 256,218" fill="#262626" stroke="#6b6b6b" stroke-width="0.8" stroke-opacity="0.6"/>
|
|
<polygon points="300,208 320,218 300,228 280,218" fill="url(#chipHi)"/>
|
|
<circle cx="300" cy="218" r="3" fill="#8a8a8a"/>
|
|
<ellipse cx="300" cy="190" rx="17" ry="7.5" fill="#3d3d3d" stroke="#000" stroke-width="0.5"/>
|
|
<ellipse cx="300" cy="190" rx="9" ry="4" fill="#555"/>
|
|
<rect x="285" y="264" width="30" height="14" rx="4" fill="#1a1a1a"/>
|
|
<circle cx="300" cy="300" r="34" fill="url(#camHalo)"/>
|
|
<circle cx="300" cy="300" r="23" fill="url(#gimbalG)" stroke="#000" stroke-width="0.9"/>
|
|
<circle cx="300" cy="300" r="13" fill="#050505"/>
|
|
<circle cx="300" cy="300" r="6" fill="#1b1b1b"/>
|
|
<circle cx="296" cy="296" r="2.6" fill="#9a9a9a" fill-opacity="0.85"/>
|
|
<circle cx="300" cy="300" r="17" fill="none" stroke="#666" stroke-width="0.8" stroke-opacity="0.6"/>
|
|
<g font-family="'JetBrains Mono',monospace">
|
|
<line x1="344" y1="218" x2="450" y2="172" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.4"/>
|
|
<circle cx="344" cy="218" r="2.3" fill="#0A0A0A"/>
|
|
<text x="456" y="168" font-size="14" font-weight="600" fill="#0A0A0A">Onboard AI</text>
|
|
<text x="456" y="184" font-size="11" fill="#0A0A0A" fill-opacity="0.45">real-time inference</text>
|
|
<line x1="276" y1="312" x2="180" y2="358" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.4"/>
|
|
<circle cx="276" cy="312" r="2.3" fill="#0A0A0A"/>
|
|
<text x="70" y="356" font-size="14" font-weight="600" fill="#0A0A0A">4K Vision Camera</text>
|
|
<text x="70" y="372" font-size="11" fill="#0A0A0A" fill-opacity="0.45">gimbal-stabilised</text>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Copy below the vision graphic -->
|
|
<div style="position:relative;z-index:3;">
|
|
<div class="container" style="padding-top:48px;padding-bottom:52px;">
|
|
<div class="eyebrow">Drone development kits · Open source</div>
|
|
<h1 style="margin-top:14px;">Build.<br>Share.<br>Deploy.</h1>
|
|
<p style="max-width:520px;margin-top:20px;">Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
|
|
<div class="hero-ctas">
|
|
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
|
|
<a href="videos.html" class="btn btn-outline btn-lg">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
|
Watch videos
|
|
</a>
|
|
</div>
|
|
<div class="hero-links">
|
|
<a href="opensource.html">Docs ↗</a>
|
|
<a href="opensource.html">GitHub ↗</a>
|
|
<a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI capabilities strip -->
|
|
<div class="hero-caps-strip" style="position:relative;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--rule);">
|
|
<div class="container">
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding:22px 0;">
|
|
<div style="display:flex;align-items:center;gap:14px;">
|
|
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M12 3L19 20L12 16L5 20Z" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Navigation</div>
|
|
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Autonomous waypoint flight</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:14px;">
|
|
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="1"/><path d="M12 2.5V6M12 18V21.5M2.5 12H6M18 12H21.5" stroke-linecap="round"/><circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Tracking</div>
|
|
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Lock on & follow targets</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:14px;">
|
|
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M12 4L21 19H3Z" stroke-linejoin="round"/><line x1="12" y1="10" x2="12" y2="14.5" stroke-linecap="round"/><circle cx="12" cy="16.6" r="1.1" fill="currentColor" stroke="none"/></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Alerts</div>
|
|
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Real-time event detection</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:14px;">
|
|
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M2.5 12C6 6.5 18 6.5 21.5 12C18 17.5 6 17.5 2.5 12Z" stroke-linejoin="round"/><circle cx="12" cy="12" r="3.2"/></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Surveillance</div>
|
|
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Perimeter monitoring</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- DEVKITS TEASER -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="two-col">
|
|
<div>
|
|
<div class="eyebrow">Hardware</div>
|
|
<h2 class="section-title">Devkits.</h2>
|
|
<p class="section-body">Hardware drone kits with full CAD drawings, 3D-printable models, PCB designs, and community forums to discuss builds and flight mechanics.</p>
|
|
<ul class="feature-list" style="margin-top:34px;">
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Complete CAD files & schematics
|
|
</li>
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
3D-printable components
|
|
</li>
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Bill of materials (BOM)
|
|
</li>
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Community forum for builds & flying
|
|
</li>
|
|
</ul>
|
|
<div class="price-block">
|
|
<div>
|
|
<div class="price-from">From</div>
|
|
<div class="price-big">£1,999</div>
|
|
</div>
|
|
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit</a>
|
|
</div>
|
|
</div>
|
|
<div class="img-slot" style="height:clamp(360px,42vw,520px);" role="img" aria-label="Devkit photo">
|
|
Drop a devkit / PCB photo here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OPEN SOURCE TEASER -->
|
|
<section class="section section-dark">
|
|
<div class="container">
|
|
<div class="two-col">
|
|
<div>
|
|
<div class="eyebrow">Open stack · Free forever</div>
|
|
<h2 class="section-title">Open Source Stack.</h2>
|
|
<p class="section-body">Everything open — PCB schematics, CAD files, flight firmware, AI models, and ground control GUIs. Freedom to build and deploy without restriction.</p>
|
|
<ul class="feature-list on-dark" style="margin-top:34px;">
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
PCB schematics & CAD files
|
|
</li>
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Flight control firmware
|
|
</li>
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Vision & AI model libraries
|
|
</li>
|
|
<li>
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Ground control & mission planning GUI
|
|
</li>
|
|
</ul>
|
|
<div style="margin-top:34px;display:flex;flex-wrap:wrap;gap:13px;">
|
|
<a href="opensource.html" class="btn btn-white btn-md">Read the docs</a>
|
|
<a href="opensource.html" class="btn btn-ghost-dark btn-md">View on GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div class="terminal">
|
|
<div class="terminal-header">
|
|
<span class="terminal-dot"></span>
|
|
<span class="terminal-dot"></span>
|
|
<span class="terminal-dot"></span>
|
|
<span class="terminal-title">flightos — quickstart</span>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<div><span class="t-prompt">$ </span>git clone github.com/bournemouth-tech/flightos</div>
|
|
<div><span class="t-prompt">$ </span>cd flightos && make sim</div>
|
|
<div><span class="t-arrow">→</span> simulator ready · models loaded</div>
|
|
<span class="t-comment"># MIT licensed · fork it, fly it, ship it</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INDUSTRY USE CASES -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div style="max-width:640px;margin-bottom:52px;">
|
|
<div class="eyebrow">Consultancy · Use cases</div>
|
|
<h2 class="section-title">Industry solutions.</h2>
|
|
<p class="section-body">Work with our team to deploy packaged drone solutions for your specific industrial application requirements.</p>
|
|
</div>
|
|
<div class="industry-grid">
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Agriculture
|
|
</h3>
|
|
<p>Precision farming, crop monitoring, autonomous spraying with multispectral sensors and AI analytics.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
Surveillance & Security
|
|
</h3>
|
|
<p>Autonomous perimeter monitoring, real-time alerting, asset protection with live video streaming.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
|
|
Delivery & Logistics
|
|
</h3>
|
|
<p>Last-mile delivery, payload management, autonomous route planning for urban and rural zones.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
|
|
Infrastructure Inspection
|
|
</h3>
|
|
<p>Bridge surveys, power line monitoring, pipeline inspection, and construction site tracking.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
Emergency Response
|
|
</h3>
|
|
<p>Search & rescue, disaster assessment, fire monitoring, and medical supply delivery.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 2a10 10 0 100 20A10 10 0 0012 2z"/><path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20"/></svg>
|
|
Environmental Monitoring
|
|
</h3>
|
|
<p>Wildlife tracking, pollution sampling, forestry management, and climate research data collection.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|
Photography
|
|
</h3>
|
|
<p>Aerial stills and video for film, real estate, events, and commercial marketing — cinematic coverage from any altitude.</p>
|
|
</div>
|
|
<div class="industry-cell">
|
|
<h3>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
|
Environment Mapping & 3DGS
|
|
</h3>
|
|
<p>Photogrammetry and 3D Gaussian Splatting capture for photorealistic scene reconstruction — sites, structures, and terrain at scale.</p>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:32px;text-align:center;">
|
|
<a href="consultancy.html" class="btn-text">Learn about consultancy ↗</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA BAND -->
|
|
<section class="cta-band section-off">
|
|
<div class="container">
|
|
<h2>Start building today.</h2>
|
|
<p>Buy a kit, fork the code, or bring us your hardest deployment.</p>
|
|
<div class="cta-band-btns">
|
|
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
|
|
<a href="opensource.html" class="btn btn-outline btn-lg">Explore the source</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<div class="footer-logo">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
|
<rect x="6" y="6" width="12" height="12" rx="1.5"/>
|
|
<rect x="9.5" y="9.5" width="5" height="5" fill="currentColor" stroke="none"/>
|
|
<path d="M9 6V2.5M15 6V2.5M9 21.5V18M15 21.5V18M6 9H2.5M6 15H2.5M21.5 9H18M21.5 15H18"/>
|
|
</svg>
|
|
<span>Bournemouth Technology</span>
|
|
</div>
|
|
<p class="footer-tagline">Hardware, software, and consultancy for drone innovators.<br>Open source. Modular. Built by developers, for developers.</p>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-label">Product</div>
|
|
<div class="footer-col-links">
|
|
<a href="devkits.html">Devkits</a>
|
|
<a href="opensource.html">Open Source</a>
|
|
<a href="videos.html">Videos</a>
|
|
<a href="worlds.html">Worlds</a>
|
|
<a href="consultancy.html">Consultancy</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-label">Resources</div>
|
|
<div class="footer-col-links">
|
|
<a href="opensource.html">Documentation</a>
|
|
<a href="opensource.html">GitHub</a>
|
|
<a href="devkits.html">Bill of materials</a>
|
|
<a href="opensource.html">Community forum</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-label">Connect</div>
|
|
<div class="footer-col-links">
|
|
<a href="mailto:bournemouthtech@protonmail.com">Contact</a>
|
|
<a href="https://www.youtube.com/@JonStarkeyfilms">YouTube</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 2025 Bournemouth Technology</span>
|
|
<span>MIT licensed software · Made in Bournemouth, UK</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.getElementById('theme-toggle').addEventListener('click', function() {
|
|
var dark = document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('theme', dark ? 'dark' : 'light');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|