Files
bmthTech-website/index.html
Jon e175430156 Add Worlds page and nav link; first world: Delph Woods
- worlds.html: new page matching videos.html style, grid of world cards
  with illustrated preview thumbnails and Explore links
- World card CSS added to style.css (.world-card, .world-card-preview,
  .world-enter)
- Delph Woods card links to worlds/delphwoods.html with a woodland SVG
  preview, description, and location/3DGS chips
- Worlds added to nav and footer Product column on all 5 existing pages
- CTA band on worlds page promotes consultancy for commissioning

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-13 20:17:46 +01:00

358 lines
20 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 &amp; 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">
<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>
<div class="hero-inner">
<div class="eyebrow">Drone development kits · Open source</div>
<h1>Build. Share. Deploy.</h1>
<p>Hardware devkits, a fully open-source stack, 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 class="hero-image-wrap">
<div class="img-slot" style="height:clamp(340px,50vw,620px);border-radius:24px;" role="img" aria-label="Hero product photo">
Drop your hero drone / devkit photo here
</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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp;&amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>