Files
bmthTech-website/opensource.html
Jon c275258a65 Redesign site with comma.ai-inspired monochrome theme
Complete rebuild: white/black palette, Hanken Grotesk + JetBrains Mono
typography, shared style.css, and five separate pages (index, devkits,
opensource, consultancy, videos). Real product content, pricing, and
video elements with replaceable src paths throughout. Removes old
v1/v2/lazy video experiments.

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

342 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open Source Software — Bournemouth Technology</title>
<meta name="description" content="Free, open-source drone software stack. Flight controllers, AI models, simulation tools, and more. MIT licensed.">
<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">
</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" class="active">Open Source</a>
<a href="consultancy.html">Consultancy</a>
<a href="videos.html">Videos</a>
</nav>
<a href="devkits.html" class="btn btn-dark btn-sm">Buy a devkit</a>
</div>
</div>
</nav>
<!-- PAGE HERO (dark) -->
<section class="section-dark" style="padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);border-bottom:1px solid rgba(255,255,255,0.1);">
<div class="container">
<div class="eyebrow">Software · Free forever</div>
<h1 style="font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-0.04em;line-height:0.95;margin-top:14px;max-width:820px;">Open Source<br>Software.</h1>
<p style="font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:rgba(255,255,255,0.66);max-width:620px;margin-top:22px;">Free, open-source drone software stack. Flight controllers, AI models, simulation tools, and more.</p>
<div style="margin-top:32px;display:flex;flex-wrap:wrap;gap:13px;">
<a href="#repos" class="btn btn-white btn-md">Explore projects</a>
<a href="#community" class="btn btn-ghost-dark btn-md">Join Discord</a>
</div>
</div>
</section>
<!-- WHY OPEN SOURCE -->
<section class="section">
<div class="container">
<div class="eyebrow" style="margin-bottom:14px;">Why open source?</div>
<h2 class="section-title" style="margin-top:0;">Built on trust,<br>not lock-in.</h2>
<div class="grid-3" style="margin-top:48px;">
<div class="why-card">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="margin-bottom:16px;" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
<h3>No Lock-In</h3>
<p>Full source code access. Modify, extend, and deploy without vendor restrictions.</p>
</div>
<div class="why-card">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="margin-bottom:16px;" aria-hidden="true"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
<h3>Community Driven</h3>
<p>Contributions from developers worldwide. Better code, faster innovation.</p>
</div>
<div class="why-card">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="margin-bottom:16px;" aria-hidden="true"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
<h3>Learn &amp; Build</h3>
<p>Educational friendly. Perfect for research, teaching, and experimentation.</p>
</div>
</div>
</div>
</section>
<!-- IMPACT STATS -->
<section class="section-off" style="padding:0;">
<div class="container">
<div class="stat-strip">
<div class="stat-item">
<div class="stat-num">10k+</div>
<div class="stat-label">GitHub Stars</div>
</div>
<div class="stat-item">
<div class="stat-num">300+</div>
<div class="stat-label">Contributors</div>
</div>
<div class="stat-item">
<div class="stat-num">50+</div>
<div class="stat-label">Countries</div>
</div>
<div class="stat-item">
<div class="stat-num">5k+</div>
<div class="stat-label">Deployments</div>
</div>
</div>
</div>
</section>
<!-- REPOS -->
<section id="repos" class="section">
<div class="container">
<div class="eyebrow" style="margin-bottom:14px;">Projects</div>
<h2 class="section-title" style="margin-top:0;">Six repos. One stack.</h2>
<p style="font-size:17px;color:var(--ink-2);margin-top:16px;max-width:560px;line-height:1.55;">Clone our repos, join the community, and start developing your drone applications today.</p>
<div class="grid-3" style="margin-top:48px;">
<div class="repo-card">
<div class="repo-card-top">
<h3>Flight Core</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
2.4k
</div>
</div>
<p class="repo-desc">Real-time flight controller firmware for ARM microcontrollers. PID loops, sensor fusion, and MAVLink support.</p>
<div class="repo-meta">
<span class="repo-lang">C / C++</span>
<span class="repo-license">MIT</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>Vision Suite</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
1.8k
</div>
</div>
<p class="repo-desc">Computer vision and AI inference toolkit. YOLO models, object detection, and semantic segmentation optimised for edge hardware.</p>
<div class="repo-meta">
<span class="repo-lang">Python</span>
<span class="repo-license">Apache 2.0</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>Ground Control Station</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
3.1k
</div>
</div>
<p class="repo-desc">Cross-platform mission planning software. Waypoint editor, live telemetry, and geofencing tools in the browser.</p>
<div class="repo-meta">
<span class="repo-lang">JavaScript / React</span>
<span class="repo-license">GPLv3</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>ROS2 Middleware</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
890
</div>
</div>
<p class="repo-desc">ROS2 packages for drone control. Nodes, topics, and services covering navigation, sensors, and actuator control.</p>
<div class="repo-meta">
<span class="repo-lang">C++ / Python</span>
<span class="repo-license">BSD-3</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>DroneKit API</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
1.2k
</div>
</div>
<p class="repo-desc">High-level Python scripting interface for autonomous missions. Simple API, comprehensive docs, and example scripts.</p>
<div class="repo-meta">
<span class="repo-lang">Python</span>
<span class="repo-license">MIT</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>SimDrone</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
650
</div>
</div>
<p class="repo-desc">Physics-based simulation environment. Test firmware and autonomy code against realistic aerodynamics before maiden flight.</p>
<div class="repo-meta">
<span class="repo-lang">C++ / Python</span>
<span class="repo-license">Apache 2.0</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
</div>
</div>
</section>
<!-- QUICKSTART + COMMUNITY -->
<section id="community" class="section section-dark">
<div class="container">
<div class="two-col">
<div>
<div class="eyebrow">Get started</div>
<h2 class="section-title">Up and running in minutes.</h2>
<p class="section-body">Clone a repo, spin up the simulator, and start flying — no hardware required to begin.</p>
<div style="margin-top:34px;display:flex;flex-wrap:wrap;gap:13px;">
<a href="#" class="btn btn-white btn-md">Read the docs</a>
<a href="#" class="btn btn-ghost-dark btn-md">View on GitHub</a>
</div>
<div style="margin-top:48px;border-top:1px solid rgba(255,255,255,0.12);padding-top:40px;">
<div class="eyebrow" style="margin-bottom:20px;">Community</div>
<div style="display:flex;flex-direction:column;gap:16px;">
<div style="display:flex;align-items:center;gap:14px;">
<div style="width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.8" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
</div>
<div>
<div style="font-size:15px;font-weight:600;color:#fff;">Discussion Forums</div>
<div style="font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px;">800+ active developers</div>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;">
<div style="width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.8" aria-hidden="true"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
</div>
<div>
<div style="font-size:15px;font-weight:600;color:#fff;">Discord Server</div>
<div style="font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px;">Real-time help and discussion</div>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;">
<div style="width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div>
<div style="font-size:15px;font-weight:600;color:#fff;">Monthly Contributor Calls</div>
<div style="font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px;">Roadmap, demos, and Q&amp;A</div>
</div>
</div>
</div>
</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" style="line-height:1.9;">
<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>
<br>
<div style="margin-top:20px;"><span class="t-prompt">$ </span>git clone github.com/bournemouth-tech/vision-suite</div>
<div><span class="t-prompt">$ </span>pip install -r requirements.txt</div>
<div><span class="t-prompt">$ </span>python detect.py --model yolo-drone-v3</div>
<div><span class="t-arrow"></span> inference engine ready · 15fps</div>
<span class="t-comment"># Apache 2.0 · modify freely</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-band">
<div class="container">
<h2>Fork it. Fly it. Ship it.</h2>
<p>All our software is free forever, MIT or Apache licensed. No strings attached.</p>
<div class="cta-band-btns">
<a href="#" class="btn btn-dark btn-lg">View on GitHub</a>
<a href="devkits.html" class="btn btn-outline btn-lg">Get the hardware</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="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="opensource.html">Discord</a>
<a href="consultancy.html">Contact</a>
<a href="videos.html">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>
</body>
</html>