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>
This commit is contained in:
Jon
684
consultancy.html
684
consultancy.html
@@ -1,471 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Consultancy | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Drone Integration Consultancy — Bournemouth Technology</title>
|
||||
<meta name="description" content="We package our devkits and open-source software into custom solutions for your industry. End-to-end deployment, training, and support.">
|
||||
<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 class="bg-[#1a1b2f] text-gray-200">
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
</a>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-green-400 font-semibold">Consultancy</a>
|
||||
<a href="videos.html" class="text-gray-300 hover:text-green-400 transition">Videos</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
<!-- 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" class="active">Consultancy</a>
|
||||
<a href="videos.html">Videos</a>
|
||||
</nav>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-dark btn-sm">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HERO -->
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">Consultancy · Use cases</div>
|
||||
<h1>Drone Integration<br>Consultancy.</h1>
|
||||
<p>We package our devkits and open-source software into custom solutions for your industry. End-to-end deployment, training, and support.</p>
|
||||
<div style="margin-top:32px;display:flex;flex-wrap:wrap;gap:13px;">
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-dark btn-lg">Talk to our team</a>
|
||||
<a href="#industries" class="btn btn-outline btn-lg">See use cases</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROCESS -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="eyebrow" style="margin-bottom:14px;">How we work</div>
|
||||
<h2 class="section-title" style="margin-top:0;margin-bottom:40px;">Four steps to deployment.</h2>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-num">01 · Discovery</div>
|
||||
<h3>Discovery</h3>
|
||||
<p>We learn about your use case, requirements, and constraints. No two deployments are the same — we start by listening.</p>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-green-400 font-semibold">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
|
||||
<div class="step">
|
||||
<div class="step-num">02 · Design</div>
|
||||
<h3>Design</h3>
|
||||
<p>We architect a solution combining hardware, software, and workflows tailored to your environment and team.</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
Drone Integration Consultancy
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
We package our devkits and open-source software into custom solutions for your industry. End-to-end deployment, training, and support.
|
||||
</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">03 · Deploy</div>
|
||||
<h3>Deploy</h3>
|
||||
<p>We build, test, and deliver the integrated system to your site. Rigorous QA at every stage before handoff.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">How We Work</h2>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-6 mb-12">
|
||||
<div class="text-center">
|
||||
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl font-bold text-white">1</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Discovery</h3>
|
||||
<p class="text-green-200 text-sm">We learn about your use case, requirements, and constraints.</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl font-bold text-white">2</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Design</h3>
|
||||
<p class="text-green-200 text-sm">We architect a solution combining hardware, software, and workflows.</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl font-bold text-white">3</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Deploy</h3>
|
||||
<p class="text-green-200 text-sm">We build, test, and deliver the integrated system to your site.</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl font-bold text-white">4</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Support</h3>
|
||||
<p class="text-green-200 text-sm">Ongoing training, maintenance, and feature development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-600">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-4">Our Approach</h3>
|
||||
<p class="text-green-200 mb-6">
|
||||
We don't sell off-the-shelf products. Every consultancy engagement is custom-tailored, combining our modular devkits with our open-source software stack to solve your specific drone challenge. You get a complete solution: hardware, firmware, AI models, ground control software, and operator training.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-green-300 mb-1">Custom Hardware Integration</h4>
|
||||
<p class="text-green-200 text-sm">Select and modify devkits to match your payload, range, and flight time needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-green-300 mb-1">Tailored Software Stack</h4>
|
||||
<p class="text-green-200 text-sm">Configure our open-source tools for your data pipeline and operational workflows.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-green-300 mb-1">AI Model Training</h4>
|
||||
<p class="text-green-200 text-sm">Fine-tune computer vision models on your specific detection or classification tasks.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
|
||||
<div>
|
||||
<h4 class="font-bold text-green-300 mb-1">Operator Training</h4>
|
||||
<p class="text-green-200 text-sm">On-site or remote training for your team to operate, maintain, and extend the system.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">04 · Support</div>
|
||||
<h3>Support</h3>
|
||||
<p>Ongoing training, maintenance, and feature development. We stay involved as your mission evolves.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Solutions -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-4 text-center">Industry Solutions</h2>
|
||||
<p class="text-center text-green-200 mb-10 max-w-2xl mx-auto">
|
||||
We've deployed drone solutions across these sectors, combining hardware and software for real-world impact.
|
||||
</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Agriculture -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="bg-green-600 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-seedling text-white text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-3">Agriculture</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Precision farming solutions for crop monitoring, health assessment, and targeted spraying. Our systems analyze multispectral imagery to detect stress, disease, and irrigation needs.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Heavy lift platform with 25min flight time</li>
|
||||
<li>• Multispectral camera sensor kit</li>
|
||||
<li>• RTK GPS for centimeter-accurate positioning</li>
|
||||
<li>• Optional spray mechanism attachment</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Vision Suite with NDVI processing</li>
|
||||
<li>• Custom AI models for crop disease detection</li>
|
||||
<li>• Mission planning software with field mapping</li>
|
||||
<li>• Cloud data pipeline for analysis reports</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Surveillance -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="bg-green-700 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-eye text-white text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-3">Surveillance & Security</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Autonomous perimeter monitoring with real-time alerting. Object detection, person tracking, and intrusion detection with live video streaming to security operations centers.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Edge compute kit with Jetson Nano</li>
|
||||
<li>• Dual camera system (RGB + thermal)</li>
|
||||
<li>• Extended battery for 30min patrol routes</li>
|
||||
<li>• 4G/5G telemetry for remote operation</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• YOLO-based person/vehicle detection</li>
|
||||
<li>• Real-time video streaming (WebRTC)</li>
|
||||
<li>• Automated alert generation system</li>
|
||||
<li>• Ground control with replay and analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delivery -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="bg-green-800 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-box text-white text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-3">Delivery & Logistics</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Last-mile autonomous delivery systems with precise drop-off capabilities. Route optimization, package tracking, and automated return-to-base functionality.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Heavy lift hexacopter (3kg payload)</li>
|
||||
<li>• Servo-actuated package release mechanism</li>
|
||||
<li>• Redundant power and GPS systems</li>
|
||||
<li>• Weather-resistant enclosures</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Autonomous waypoint navigation</li>
|
||||
<li>• Landing zone detection with vision</li>
|
||||
<li>• Fleet management dashboard</li>
|
||||
<li>• Real-time tracking and ETA updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infrastructure -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="bg-green-600 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-hard-hat text-white text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-3">Infrastructure Inspection</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Automated inspection of bridges, power lines, pipelines, and construction sites. High-resolution imaging, 3D reconstruction, and anomaly detection for predictive maintenance.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Base flight kit with stabilized gimbal</li>
|
||||
<li>• LIDAR sensor for 3D mapping</li>
|
||||
<li>• High-resolution RGB and thermal cameras</li>
|
||||
<li>• Obstacle avoidance sensors</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Photogrammetry and 3D reconstruction</li>
|
||||
<li>• Crack/defect detection AI models</li>
|
||||
<li>• Automated flight path generation</li>
|
||||
<li>• Inspection report generation tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Emergency -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="bg-green-500 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-ambulance text-white text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-3">Emergency Response</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Rapid-deployment systems for search and rescue, disaster assessment, and emergency supply delivery. Thermal imaging for person detection and real-time situation awareness.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Quick-deploy base flight platform</li>
|
||||
<li>• Thermal camera for person detection</li>
|
||||
<li>• Loudspeaker and lighting modules</li>
|
||||
<li>• Emergency payload release system</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Person detection in thermal imagery</li>
|
||||
<li>• Real-time mapping and coordinate sharing</li>
|
||||
<li>• Multi-drone coordination system</li>
|
||||
<li>• Emergency protocol automation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Environmental -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="bg-green-700 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-leaf text-white text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-3">Environmental Monitoring</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Long-range environmental data collection for wildlife tracking, pollution monitoring, forestry management, and climate research. Time-series analysis and GIS integration.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Extended-range platform (50min flight)</li>
|
||||
<li>• Environmental sensor array (temp, humidity, gas)</li>
|
||||
<li>• High-zoom camera for wildlife observation</li>
|
||||
<li>• Data logging and storage modules</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
|
||||
<ul class="text-green-200 text-sm space-y-1">
|
||||
<li>• Time-series sensor data analysis</li>
|
||||
<li>• Wildlife detection and tracking models</li>
|
||||
<li>• GIS integration for spatial mapping</li>
|
||||
<li>• Long-term data aggregation and reporting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- WHAT WE DELIVER -->
|
||||
<section class="section section-off">
|
||||
<div class="container">
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<div class="eyebrow">Services</div>
|
||||
<h2 class="section-title">End-to-end, not off-the-shelf.</h2>
|
||||
<p class="section-body">We deliver complete systems — from circuit board to operator dashboard — built on our open-source foundation so you own the result.</p>
|
||||
<ul class="feature-list on-off" 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>
|
||||
Custom hardware + software integration
|
||||
</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>
|
||||
End-to-end solution design
|
||||
</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>
|
||||
AI model training for your use case
|
||||
</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>
|
||||
Industry-specific deployments
|
||||
</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>
|
||||
Operator and support staff training
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Our Consultancy -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Why Choose Us</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-cubes text-green-400 text-2xl mb-3"></i>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Modular & Flexible</h3>
|
||||
<p class="text-green-200 text-sm">We don't force proprietary systems. Our solutions are modular, allowing you to swap components and scale as needed.</p>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-code-branch text-green-400 text-2xl mb-3"></i>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Open Source Foundation</h3>
|
||||
<p class="text-green-200 text-sm">Built on open-source software you can inspect, modify, and own forever. No licensing fees or vendor lock-in.</p>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-tachometer-alt text-green-400 text-2xl mb-3"></i>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Rapid Deployment</h3>
|
||||
<p class="text-green-200 text-sm">From discovery to deployment in weeks, not months. Our pre-built modules accelerate time-to-value.</p>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-hands-helping text-green-400 text-2xl mb-3"></i>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Ongoing Partnership</h3>
|
||||
<p class="text-green-200 text-sm">We don't disappear after deployment. Ongoing support, feature development, and system optimization.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||||
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
|
||||
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Modular & Flexible</div>
|
||||
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">Every solution is built from our modular devkit and software stack — components swap in or out as your mission changes.</p>
|
||||
</div>
|
||||
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
|
||||
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Open-source foundation</div>
|
||||
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">No vendor lock-in. You own the deployed system. Full source access means your team can maintain and extend it.</p>
|
||||
</div>
|
||||
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
|
||||
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Rapid deployment</div>
|
||||
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">Our pre-integrated hardware and software stack dramatically reduces time from brief to first operational flight.</p>
|
||||
</div>
|
||||
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
|
||||
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Ongoing partnership</div>
|
||||
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">We don't disappear after delivery. Retainers for maintenance, new features, and fleet scaling are available.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section id="contact" class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6 text-center">Start Your Project</h2>
|
||||
<p class="text-green-200 mb-8 text-center">
|
||||
Tell us about your drone challenge. We'll schedule a discovery call to explore how we can help.
|
||||
</p>
|
||||
<!-- INDUSTRIES -->
|
||||
<section id="industries" class="section">
|
||||
<div class="container">
|
||||
<div class="eyebrow" style="margin-bottom:14px;">Industries</div>
|
||||
<h2 class="section-title" style="margin-top:0;">Where we deploy.</h2>
|
||||
<p style="font-size:17px;color:var(--ink-2);margin-top:16px;max-width:540px;line-height:1.55;">Real solutions across six sectors — from precision agriculture to emergency response.</p>
|
||||
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-600">
|
||||
<form class="space-y-4">
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required>
|
||||
<input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required>
|
||||
</div>
|
||||
<input type="text" placeholder="Company / Organization" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none">
|
||||
<select class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required>
|
||||
<option value="">Select Industry</option>
|
||||
<option value="agriculture">Agriculture</option>
|
||||
<option value="surveillance">Surveillance & Security</option>
|
||||
<option value="delivery">Delivery & Logistics</option>
|
||||
<option value="inspection">Infrastructure Inspection</option>
|
||||
<option value="emergency">Emergency Response</option>
|
||||
<option value="environmental">Environmental Monitoring</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
<textarea placeholder="Describe your project and requirements..." rows="5" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required></textarea>
|
||||
<button type="submit" class="w-full bg-green-500 text-[#22223b] px-8 py-4 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
Request Consultation
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-8">
|
||||
<a href="index.html" class="text-green-400 hover:text-green-300 transition">
|
||||
<i class="fas fa-home mr-2"></i> Back to Home
|
||||
</a>
|
||||
</div>
|
||||
<div class="industry-grid" style="margin-top:48px;">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
<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, and asset protection with live video streaming.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<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, and 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA / CONTACT -->
|
||||
<section class="section section-dark">
|
||||
<div class="container" style="max-width:700px;text-align:center;">
|
||||
<div class="eyebrow">Contact</div>
|
||||
<h2 class="section-title" style="font-size:clamp(38px,6vw,72px);margin-top:14px;">Bring us your hardest deployment.</h2>
|
||||
<p style="font-size:clamp(17px,1.6vw,20px);color:rgba(255,255,255,0.66);margin-top:22px;line-height:1.55;">Tell us your use case and we'll scope a solution. No commitment required — we'll reply within one working day.</p>
|
||||
<div style="margin-top:32px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center;">
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-white btn-lg">bournemouthtech@protonmail.com</a>
|
||||
</div>
|
||||
<div style="margin-top:18px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,0.4);">We typically respond within one working day.</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>
|
||||
|
||||
<script>
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
580
devkits.html
580
devkits.html
@@ -1,301 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Devkits | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Drone Hardware Devkits — Bournemouth Technology</title>
|
||||
<meta name="description" content="Complete hardware drone kits with CAD files, 3D printable components, PCB designs, and community support. From £1,999.">
|
||||
<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 class="bg-[#1a1b2f] text-gray-200">
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
</a>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-green-400 font-semibold">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-gray-300 hover:text-green-400 transition">Videos</a>
|
||||
<!-- 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" class="active">Devkits</a>
|
||||
<a href="opensource.html">Open Source</a>
|
||||
<a href="consultancy.html">Consultancy</a>
|
||||
<a href="videos.html">Videos</a>
|
||||
</nav>
|
||||
<a href="#products" class="btn btn-dark btn-sm">Buy a devkit</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HERO -->
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">Hardware</div>
|
||||
<h1>Drone Hardware<br>Devkits.</h1>
|
||||
<p>Complete hardware kits with CAD files, 3D printable components, PCB designs, and community support for building industrial drones.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHAT'S IN THE KIT -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="eyebrow" style="margin-bottom:14px;">Every kit includes</div>
|
||||
<h2 class="section-title" style="margin-top:0;max-width:540px;">Everything you need to build and fly.</h2>
|
||||
<div class="kit-includes">
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<h4>CAD Files & Drawings</h4>
|
||||
<p>STEP, STL, and DXF formats for full mechanical design access.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
<h4>3D Printable Models</h4>
|
||||
<p>STL files for all custom structural and mounting components.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
|
||||
</div>
|
||||
<h4>PCB Designs & Schematics</h4>
|
||||
<p>Gerber files and full schematic packs for every board.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
||||
</div>
|
||||
<h4>Bill of Materials</h4>
|
||||
<p>Full BOM with supplier links and component part numbers.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
|
||||
</div>
|
||||
<h4>Assembly Documentation</h4>
|
||||
<p>Step-by-step assembly guides and wiring diagrams.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
|
||||
</div>
|
||||
<h4>Community Forum Access</h4>
|
||||
<p>500+ active builders sharing mods, fixes, and flight tips.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCTS -->
|
||||
<section id="products" class="section section-off">
|
||||
<div class="container">
|
||||
<div class="eyebrow" style="margin-bottom:14px;">Products</div>
|
||||
<h2 class="section-title" style="margin-top:0;">Choose your platform.</h2>
|
||||
<p style="font-size:18px;color:var(--ink-2);margin-top:16px;max-width:540px;line-height:1.55;">Every kit ships with the same full documentation and community access. Pick the hardware that matches your mission.</p>
|
||||
|
||||
<div class="grid-3" style="margin-top:48px;gap:20px;">
|
||||
|
||||
<!-- Base Flight Kit -->
|
||||
<div class="product-card">
|
||||
<div class="product-card-tag">Quadcopter · Developer Platform</div>
|
||||
<h3>Base Flight Kit</h3>
|
||||
<div class="product-price">
|
||||
£1,999
|
||||
<span class="price-sub"> incl. VAT</span>
|
||||
</div>
|
||||
<p class="product-desc">Essential quadcopter platform for developers. The fastest path from CAD to first flight.</p>
|
||||
<ul class="product-features">
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
400mm wheelbase frame design
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Flight controller with STM32 MCU
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Power distribution board layout
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
ESC integration guides
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
2.4GHz radio antenna
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-dark btn-md" style="margin-top:auto;">Buy now</a>
|
||||
</div>
|
||||
|
||||
<!-- Edge Compute Kit (featured) -->
|
||||
<div class="product-card featured">
|
||||
<div class="product-card-tag">Quadcopter · AI Platform</div>
|
||||
<h3>Edge Compute Kit</h3>
|
||||
<div class="product-price">
|
||||
£4,999
|
||||
<span class="price-sub" style="color:rgba(255,255,255,0.5);"> incl. VAT</span>
|
||||
</div>
|
||||
<p class="product-desc">Advanced platform with onboard Linux computer integration for real-time AI inference.</p>
|
||||
<ul class="product-features">
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Raspberry Pi 4/5 Compute Module
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Dual camera mounting points
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Extended flight time (up to 25 min)
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
High-bandwidth telemetry
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Thermal management system
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-white btn-md" style="margin-top:auto;">Buy now</a>
|
||||
</div>
|
||||
|
||||
<!-- Heavy Lift -->
|
||||
<div class="product-card">
|
||||
<div class="product-card-tag">Hexacopter · Industrial</div>
|
||||
<h3>Heavy Lift Platform</h3>
|
||||
<div class="product-price" style="font-size:20px;color:var(--ink-3);">Contact for pricing</div>
|
||||
<p class="product-desc">High-payload hexacopter design for delivery, survey equipment, and heavy sensor packages.</p>
|
||||
<ul class="product-features">
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Hex frame with redundant motors
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
High-torque motor selection guide
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Payload release mechanism
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Custom consultancy included
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-outline btn-md" style="margin-top:auto;">Get in touch</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Sensor Expansion Pack -->
|
||||
<div class="product-card" style="margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;">
|
||||
<div>
|
||||
<div class="product-card-tag">Modular Add-on</div>
|
||||
<h3 style="font-size:22px;margin-top:8px;">Sensor Expansion Pack</h3>
|
||||
<p class="product-desc" style="margin-top:10px;">Modular sensor integration kit compatible with all platforms. Add multispectral, thermal, LiDAR, or custom sensors to any devkit.</p>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap;">
|
||||
<div class="product-price" style="font-size:18px;color:var(--ink-3);">Contact for pricing</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-outline btn-md">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COMMUNITY STATS -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="two-col" style="align-items:start;">
|
||||
<div>
|
||||
<div class="eyebrow">Community</div>
|
||||
<h2 class="section-title">Built by builders.</h2>
|
||||
<p class="section-body">Every kit plugs you into an active community of developers, pilots, and engineers sharing mods, tips, and builds.</p>
|
||||
<div style="margin-top:34px;">
|
||||
<a href="opensource.html" class="btn btn-dark btn-md">Join the community</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-strip" style="flex-direction:column;border:none;padding:0;gap:28px;">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">500+</div>
|
||||
<div class="stat-label">Active Builders</div>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-green-400 font-semibold">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
Drone Hardware Devkits
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
Complete hardware kits with CAD files, 3D printable components, PCB designs, and community support for building industrial drones.
|
||||
</p>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">1,200+</div>
|
||||
<div class="stat-label">Forum Topics</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What's Included -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8 text-center">What's Included in Every Kit</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-12">
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-drafting-compass text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">CAD Files & Drawings</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Full mechanical drawings in STEP, STL, and DXF formats. Modify, adapt, and manufacture your own frames and components.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-cube text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">3D Printable Models</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Ready-to-print STL files for mounts, enclosures, and structural parts. Print locally or send to fabrication services.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-microchip text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">PCB Designs & Schematics</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Gerber files, schematics, and layout files for all electronic boards. Order from any PCB manufacturer worldwide.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-list text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">Bill of Materials (BOM)</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Complete parts lists with supplier links, part numbers, and estimated costs. Source components easily and affordably.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-book text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">Assembly Documentation</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Step-by-step build guides, wiring diagrams, and troubleshooting tips to get your drone airborne.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-comments text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">Community Forum Access</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Join our active forums to discuss builds, share flight logs, troubleshoot issues, and collaborate with other builders.</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">50+</div>
|
||||
<div class="stat-label">Mods & Extensions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Available Kits -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Available Devkits</h2>
|
||||
<!-- CTA BAND -->
|
||||
<section class="cta-band section-off">
|
||||
<div class="container">
|
||||
<h2>Ready to build?</h2>
|
||||
<p>Pick your platform, fork the firmware, and start flying.</p>
|
||||
<div class="cta-band-btns">
|
||||
<a href="#products" class="btn btn-dark btn-lg">See all kits</a>
|
||||
<a href="consultancy.html" class="btn btn-outline btn-lg">Need something custom?</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="space-y-8">
|
||||
|
||||
<!-- Kit 1 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-600 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-helicopter text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Base Flight Kit</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£1999</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
Essential quadcopter platform for developers. Includes flight controller PCB, frame designs, motor mounts, and basic sensor integration points.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>400mm wheelbase frame design</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Flight controller with STM32 MCU</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Power distribution board layout</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>ESC integration guides</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>2.4GHz Radio Antenna</li>
|
||||
</ul>
|
||||
<!--<a href="#contact" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
Purchase Kit
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kit 2 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-700 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-server text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Edge Compute Kit</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£4999</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
Advanced platform with onboard Linux computer integration. Designed for AI inference, computer vision, and real-time data processing applications.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Raspberry Pi 4/5 Compute Module</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Dual camera mounting points</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Extended flight time design (up to 25min)</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>High-bandwidth telemetry interface</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Thermal management system</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kit 3 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-800 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-box-open text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Heavy Lift Platform</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£ CONTACT</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
High-payload hexacopter design for delivery, survey equipment, and heavy sensor packages. Built for reliability and endurance.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>650mm hexacopter frame</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Up to 3kg payload capacity</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Redundant power system</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Servo-actuated release mechanism</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>GPS + RTK integration ready</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kit 4 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-500 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-plug text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Sensor Expansion Pack</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£ CONTACT</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
Modular sensor integration kit compatible with all our platforms. Includes mounting hardware and interface boards for popular sensors.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>LIDAR mounting and interface PCB</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Multispectral camera mounts</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Thermal camera integration</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Environmental sensor array (temp, humidity, gas)</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Modular gimbal designs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 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>
|
||||
</section>
|
||||
|
||||
<!-- Community & Support -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Join the Builder Community</h2>
|
||||
<p class="text-green-200 mb-8 max-w-2xl mx-auto">
|
||||
Every devkit purchase includes lifetime access to our forums where you can share builds, get technical support, and collaborate on improvements.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-10">
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg">
|
||||
<div class="text-4xl text-green-400 mb-2">500+</div>
|
||||
<div class="text-green-200">Active Builders</div>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg">
|
||||
<div class="text-4xl text-green-400 mb-2">1200+</div>
|
||||
<div class="text-green-200">Forum Topics</div>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg">
|
||||
<div class="text-4xl text-green-400 mb-2">50+</div>
|
||||
<div class="text-green-200">Mods & Extensions</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fas fa-comments mr-2"></i> Visit Forums
|
||||
</a>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="contact" class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Ready to Build?</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Purchase a devkit or contact us for bulk orders and educational discounts.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="mailto:sales@bournemouth-tech.co.uk" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
||||
<i class="fas fa-envelope mr-2"></i> Contact
|
||||
</a>
|
||||
<a href="index.html" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-home mr-2"></i> Home
|
||||
</a>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
<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>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2025 Bournemouth Technology</span>
|
||||
<span>MIT licensed software · Made in Bournemouth, UK</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
608
index.html
608
index.html
@@ -1,315 +1,329 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bournemouth Technology | Drone Devkits, Open Software & Consultancy</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
</style>
|
||||
<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">
|
||||
</head>
|
||||
<body class="bg-[#1a1b2f] text-gray-200">
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
<!-- 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>
|
||||
</nav>
|
||||
<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, 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="opensource.html">Discord ↗</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 & 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>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-gray-300 hover:text-green-400 transition">Videos</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
|
||||
<div class="img-slot" style="height:clamp(360px,42vw,520px);" role="img" aria-label="Devkit photo">
|
||||
Drop a devkit / PCB photo here
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
Build. Share. Deploy.
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 mb-10 max-w-2xl mx-auto">
|
||||
Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="videos.html" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-circle-play"></i> Videos</a>
|
||||
<a href="#docs" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-book"></i> Docs</a>
|
||||
<a href="#" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition inline-flex items-center justify-center"><i class="fab fa-discord mr-2"></i> Discord </a>
|
||||
</div>
|
||||
<!-- OPEN SOURCE TEASER -->
|
||||
<section class="section section-dark">
|
||||
<div class="container">
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<div class="eyebrow">Software · Free forever</div>
|
||||
<h2 class="section-title">Open Source.</h2>
|
||||
<p class="section-body">Free virtual offering with open-source flight code, AI inference models, simulation environments, and forums for AI/drone innovation discussions.</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>
|
||||
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>
|
||||
Simulation & testing tools
|
||||
</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>
|
||||
Forum for AI & innovation
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Three Divisions -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<!-- <h2 class="text-3xl font-bold text-center text-green-300 mb-12">Three Divisions. One Ecosystem.</h2> -->
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Division 1: Devkits -->
|
||||
<div id="devkits" class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="bg-green-600 w-14 h-14 rounded-lg flex items-center justify-center mb-5">
|
||||
<i class="fas fa-cube text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-4">Devkits</h3>
|
||||
<p class="text-green-200 mb-6">
|
||||
Hardware drone kits with full CAD drawings, 3D-printable models, PCB designs, and community forums to discuss builds and flight mechanics.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Complete CAD files & schematics</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>3D printable components</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Bill of materials (BOM)</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Community forum for builds & flying</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="devkits.html" class="block text-center bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fa-solid fa-helicopter"></i> Devkits
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Division 2: Open Source Software -->
|
||||
<div id="opensource" class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="bg-green-700 w-14 h-14 rounded-lg flex items-center justify-center mb-5">
|
||||
<i class="fas fa-code text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-4">Open Source</h3>
|
||||
<p class="text-green-200 mb-6">
|
||||
Free virtual offering with open-source flight code, AI inference models, simulation environments, and forums for AI/drone innovation discussions.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Flight control firmware</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Vision & AI model libraries</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Simulation & testing tools</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Forum for AI & innovation</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#docs" class="block text-center bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fa-solid fa-book"></i> Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Division 3: Consultancy -->
|
||||
<div id="consultancy" class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="bg-green-800 w-14 h-14 rounded-lg flex items-center justify-center mb-5">
|
||||
<i class="fas fa-users text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-4">Use Cases</h3>
|
||||
<p class="text-green-200 mb-6">
|
||||
Work with our team to deploy packaged drone solutions for your specific industrial application requirements.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Custom hardware + software integration</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>End-to-end solution design</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Industry-specific deployments</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
||||
<span>Training pilots and support staff</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="consultancy.html" class="block text-center bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fa-solid fa-question"></i> Consultancy
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Applications -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center text-green-300 mb-4">Industry Solutions</h2>
|
||||
<p class="text-center text-green-200 mb-12 max-w-2xl mx-auto">
|
||||
Our consultancy combines devkits and open software to solve real drone challenges across these sectors.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Agriculture -->
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
||||
<div class="text-green-400 text-3xl mb-3">
|
||||
<i class="fas fa-seedling"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-3">Agriculture</h3>
|
||||
<p class="text-green-200 text-sm mb-4">
|
||||
Precision farming, crop monitoring, and autonomous spraying solutions using multispectral sensors and AI analytics.
|
||||
</p>
|
||||
<p class="text-green-400 text-xs font-semibold">
|
||||
→ Hardware: Sensor kits + Flight platforms<br>
|
||||
→ Software: Vision models + Data pipelines
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Surveillance -->
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
||||
<div class="text-green-400 text-3xl mb-3">
|
||||
<i class="fas fa-eye"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-3">Surveillance & Security</h3>
|
||||
<p class="text-green-200 text-sm mb-4">
|
||||
Autonomous perimeter monitoring, real-time alerting, and asset protection with live video streaming.
|
||||
</p>
|
||||
<p class="text-green-400 text-xs font-semibold">
|
||||
→ Hardware: Camera rigs + Telemetry systems<br>
|
||||
→ Software: Object detection + Alert frameworks
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Delivery -->
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
||||
<div class="text-green-400 text-3xl mb-3">
|
||||
<i class="fas fa-box"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-3">Delivery & Logistics</h3>
|
||||
<p class="text-green-200 text-sm mb-4">
|
||||
Last-mile drone delivery, payload management, and autonomous route planning for urban and rural zones.
|
||||
</p>
|
||||
<p class="text-green-400 text-xs font-semibold">
|
||||
→ Hardware: Heavy-lift frames + Drop mechanisms<br>
|
||||
→ Software: Navigation stack + Fleet management
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Inspection -->
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
||||
<div class="text-green-400 text-3xl mb-3">
|
||||
<i class="fas fa-hard-hat"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-3">Infrastructure Inspection</h3>
|
||||
<p class="text-green-200 text-sm mb-4">
|
||||
Automated bridge surveys, power line monitoring, pipeline inspection, and construction tracking.
|
||||
</p>
|
||||
<p class="text-green-400 text-xs font-semibold">
|
||||
→ Hardware: LIDAR modules + Thermal cameras<br>
|
||||
→ Software: 3D reconstruction + Anomaly detection
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Emergency -->
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
||||
<div class="text-green-400 text-3xl mb-3">
|
||||
<i class="fas fa-ambulance"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-3">Emergency Response</h3>
|
||||
<p class="text-green-200 text-sm mb-4">
|
||||
Search and rescue, disaster assessment, fire monitoring, and medical supply delivery in critical situations.
|
||||
</p>
|
||||
<p class="text-green-400 text-xs font-semibold">
|
||||
→ Hardware: Rapid-deploy kits + Payload bays<br>
|
||||
→ Software: Mapping tools + Emergency protocols
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Environmental -->
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
||||
<div class="text-green-400 text-3xl mb-3">
|
||||
<i class="fas fa-leaf"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-3">Environmental Monitoring</h3>
|
||||
<p class="text-green-200 text-sm mb-4">
|
||||
Wildlife tracking, pollution sampling, forestry management, and climate research data collection.
|
||||
</p>
|
||||
<p class="text-green-400 text-xs font-semibold">
|
||||
→ Hardware: Environmental sensors + Long-range platforms<br>
|
||||
→ Software: Time-series analysis + GIS integration
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 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>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section id="contact" class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Get Started</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Whether you're buying devkits, contributing to open source, or need a full consultancy package — we're here to help.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<a href="videos.html" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-circle-play"></i> Videos</a>
|
||||
<a href="#docs" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-book"></i> Docs</a>
|
||||
<a href="#" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition inline-flex items-center justify-center"><i class="fab fa-discord mr-2"></i> Discord </a>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
<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>
|
||||
</footer>
|
||||
<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>
|
||||
<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="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>
|
||||
|
||||
<script>
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
646
opensource.html
646
opensource.html
@@ -1,373 +1,341 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Open Source Software | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
</style>
|
||||
<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 class="bg-[#1a1b2f] text-gray-200">
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
</a>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
||||
<a href="opensource.html" class="text-green-400 font-semibold">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-gray-300 hover:text-green-400 transition">Videos</a>
|
||||
<!-- 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 & 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>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</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 id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-green-400 font-semibold">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
Open Source Software
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
Free, open-source drone software stack. Flight controllers, AI models, simulation tools, and more. Join our community of innovators.
|
||||
</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Why Open Source?</h2>
|
||||
<p class="text-green-200 mb-8 text-lg">
|
||||
We believe drone technology should be accessible, transparent, and community-driven. All our software is released under permissive licenses—use it commercially, fork it, contribute back, or learn from it.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-unlock text-green-400 text-3xl mb-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">No Lock-In</h3>
|
||||
<p class="text-green-200 text-sm">Full source code access. Modify, extend, and deploy without vendor restrictions.</p>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-users text-green-400 text-3xl mb-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Community Driven</h3>
|
||||
<p class="text-green-200 text-sm">Contributions from developers worldwide. Better code, faster innovation.</p>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<i class="fas fa-graduation-cap text-green-400 text-3xl mb-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Learn & Build</h3>
|
||||
<p class="text-green-200 text-sm">Educational friendly. Perfect for research, teaching, and experimentation.</p>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Software Projects -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Our Software Projects</h2>
|
||||
|
||||
<div class="space-y-8">
|
||||
|
||||
<!-- Project 1 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Flight Core</h3>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> MIT License</span>
|
||||
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 2.4k stars</span>
|
||||
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> C/C++</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-1"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-green-200 mb-4">
|
||||
Real-time flight controller firmware for ARM Cortex-M microcontrollers. Supports quadcopters, hexacopters, and fixed-wing platforms. Includes PID tuning, sensor fusion, and failsafe systems.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">STM32</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">IMU Fusion</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">MAVLink</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">FreeRTOS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 2 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Vision Suite</h3>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> Apache 2.0</span>
|
||||
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 1.8k stars</span>
|
||||
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> Python</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-1"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-green-200 mb-4">
|
||||
Computer vision and AI inference toolkit for drones. Pre-trained models for object detection, tracking, semantic segmentation, and pose estimation. Optimized for edge devices like Jetson and Raspberry Pi.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">TensorFlow</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">PyTorch</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">OpenCV</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">YOLO</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">ONNX</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 3 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Ground Control Station</h3>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> GPLv3</span>
|
||||
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 3.1k stars</span>
|
||||
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> JavaScript/React</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-1"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-green-200 mb-4">
|
||||
Cross-platform ground control software with mission planning, telemetry visualization, and real-time video streaming. Works with MAVLink-compatible flight controllers.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Electron</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">WebRTC</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Mapbox</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">MAVLink</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 4 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">ROS2 Middleware</h3>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> BSD-3</span>
|
||||
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 890 stars</span>
|
||||
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> C++/Python</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-1"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-green-200 mb-4">
|
||||
ROS2 packages for drone control, navigation, and sensor integration. Includes launch files, message definitions, and example workflows for rapid prototyping.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">ROS2 Humble</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Navigation2</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Gazebo</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">PX4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 5 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">DroneKit API</h3>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> MIT License</span>
|
||||
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 1.2k stars</span>
|
||||
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> Python</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-1"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-green-200 mb-4">
|
||||
High-level Python API for controlling drones. Simple scripting interface for autonomous missions, waypoint navigation, and real-time telemetry. Perfect for rapid prototyping.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Python 3.8+</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Asyncio</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">REST API</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">WebSocket</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 6 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">SimDrone</h3>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> Apache 2.0</span>
|
||||
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 650 stars</span>
|
||||
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> C++/Python</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-1"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-green-200 mb-4">
|
||||
Physics-based drone simulation environment for testing and validation. Simulate sensors, weather conditions, and failure scenarios before real-world deployment.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Gazebo</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Unity3D</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">SITL</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Physics Engine</span>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Community -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Join the Community</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-comments text-green-400 text-3xl mr-4"></i>
|
||||
<h3 class="text-2xl font-bold text-green-300">Discussion Forums</h3>
|
||||
</div>
|
||||
<p class="text-green-200 mb-6">
|
||||
Discuss AI models, share flight algorithms, troubleshoot issues, and collaborate on new features. Active community of 800+ developers.
|
||||
</p>
|
||||
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
Join Forums
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fab fa-discord text-green-400 text-3xl mr-4"></i>
|
||||
<h3 class="text-2xl font-bold text-green-300">Discord Server</h3>
|
||||
</div>
|
||||
<p class="text-green-200 mb-6">
|
||||
Real-time chat with developers, maintainers, and contributors. Get help, share projects, and participate in code reviews.
|
||||
</p>
|
||||
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
Join Discord
|
||||
</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="bg-[#292b3d] p-8 rounded-xl border border-green-600 text-center">
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-4">Want to Contribute?</h3>
|
||||
<p class="text-green-200 mb-6 max-w-2xl mx-auto">
|
||||
We welcome pull requests, bug reports, and feature suggestions. Check our contribution guidelines on GitHub and join our monthly contributor calls.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#" class="bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fab fa-github mr-2"></i> Contribution Guide
|
||||
</a>
|
||||
<a href="#" class="border-2 border-green-500 text-green-400 px-6 py-3 rounded-lg font-bold hover:bg-green-500 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-calendar mr-2"></i> Monthly Calls
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Community Impact</h2>
|
||||
<div class="grid md:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold text-green-400 mb-2">10k+</div>
|
||||
<div class="text-green-200">GitHub Stars</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 class="text-center">
|
||||
<div class="text-4xl font-bold text-green-400 mb-2">300+</div>
|
||||
<div class="text-green-200">Contributors</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 class="text-center">
|
||||
<div class="text-4xl font-bold text-green-400 mb-2">50+</div>
|
||||
<div class="text-green-200">Countries</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 class="text-center">
|
||||
<div class="text-4xl font-bold text-green-400 mb-2">5k+</div>
|
||||
<div class="text-green-200">Deployments</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&A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Start Building with Open Source</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Clone our repos, join the community, and start developing your drone applications today.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
||||
<i class="fab fa-github mr-2"></i> Browse Repositories
|
||||
</a>
|
||||
<a href="index.html" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-home mr-2"></i> Back to Home
|
||||
</a>
|
||||
</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 && 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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
<!-- 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>
|
||||
</footer>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
780
video-lazy.html
780
video-lazy.html
@@ -1,780 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Videos | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.video-container:hover .video-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.video-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(74, 222, 128, 0.2);
|
||||
border-top-color: #4ade80;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Play Button Overlay */
|
||||
.play-button-overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(74, 222, 128, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.play-button-overlay:hover {
|
||||
background: rgba(74, 222, 128, 1);
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
|
||||
.play-button-overlay i {
|
||||
color: #22223b;
|
||||
font-size: 30px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.video-container.loaded .play-button-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-container.loading .play-button-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Poster image styling */
|
||||
.video-poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-container.loaded .video-poster {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#1a1b2f] text-gray-200">
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
</a>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-green-400 font-semibold">Videos</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-green-400 font-semibold">Videos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
<i class="fas fa-play-circle mr-3"></i>Video Gallery
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
Watch our drones in action. Flight tests, tutorials, project showcases, and real-world deployments.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Categories -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
|
||||
<!-- Featured Video -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8"></h2>
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl border border-green-600">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/featured-thumbnail.jpg" alt="Featured video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="bmth-80m.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<!-- <div class="video-overlay"> <h3 class="text-white font-bold">Featured Demonstration</h3> </div> -->
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Aerial Photography - Bournemouth</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
High altitude shots open opportunites for the unscene. Across mountain ranges or desserts.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">1080p</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Active Deployment</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flight Tests & Demos -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Flight Tests & Demos</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="upton.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Base Flight Kit - First Flight</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Maiden flight of the Base Flight Kit. PID tuning, stability tests, and GPS hold demonstration.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Hardware</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/video2.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Drone Simulator</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Stress testing the simulator with a hexacopter. Flight time, stability, and emergency landing procedures.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Simulator</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/video3.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Autonomous Waypoint Navigation</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Fully autonomous mission with 12 waypoints. Ground control station view and onboard footage.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Hardware</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Navigation</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail4.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="droneRun.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Edge Compute Kit - Real-Time Object Detection</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Onboard YOLO inference running at 15fps. Live person and vehicle detection from aerial view.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">AI/Vision</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutorials -->
|
||||
<!--
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Build Tutorials</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial1.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Complete Build Guide - Base Flight Kit</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Step-by-step assembly from parts to first flight. Soldering, wiring, and configuration walkthrough.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">22:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial2.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Installing Flight Core Firmware</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
How to flash firmware, configure parameters, and calibrate sensors using the ground station software.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial3.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Setting Up Computer Vision Pipeline</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Configure the Vision Suite for onboard object detection. Model selection, optimization, and deployment.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">18:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial4.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial4.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">3D Printing Custom Parts</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Printer settings, material selection, and post-processing for drone components. PLA vs PETG comparison.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">9:20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Industry Deployments -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Industry Deployments</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="droneMoves.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Movement Estimation - Flying DashCam</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Walk, run, ride or drive with follow mode and benefit from object detection and segmentation - Think flying body-cam / dash-cam powered with AI.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Active Deployment</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="bath.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Infrastructure - Bath Canal Inspection</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Automated inspection of a bath canal for blockages and obstruction to the canal boats.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Active Deployment</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="jamming-text.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Jammers - The Last Line of Defense</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Pilot program for drone jamming in urban or rural areas. Autonomous navigation and precision tracking enable fast takedown.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Pilot Program</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment4.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src=""
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Surveillance - Perimeter Security</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
24/7 autonomous patrol system for a large industrial site. Thermal imaging and real-time alerts.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Pilot Program</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Community Videos -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Community Builds</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3" data-video-container>
|
||||
<img src="path/to/community1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/community1.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Custom Racing Quad</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Modified Base Flight Kit for FPV racing. 200mph+ capable.</p>
|
||||
<div class="text-gray-400 text-xs">by @droneracer_uk</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3" data-video-container>
|
||||
<img src="path/to/community2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/community2.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Car Show Room</h3>
|
||||
<p class="text-green-200 text-xs mb-2">1 Click showroom style circle video of vehicle.</p>
|
||||
<div class="text-gray-400 text-xs">by @realJonStarkey</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3" data-video-container>
|
||||
<img src="path/to/community3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/community3.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">University Research Project</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Student team using our kit for AI thesis project.</p>
|
||||
<div class="text-gray-400 text-xs">by @exeter_robotics</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Upload Your Video CTA -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Share Your Builds</h2>
|
||||
<p class="text-green-200 mb-8 max-w-2xl mx-auto">
|
||||
Built something awesome with our devkits? Share your videos with the community. The best submissions get featured on this page!
|
||||
</p>
|
||||
<a href="#contact" class="inline-block bg-green-500 text-[#22223b] px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fas fa-upload mr-2"></i> Submit Your Video
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Ready to Build?</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Get started with our devkits and open-source software today.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="devkits.html" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
||||
Browse Devkits
|
||||
</a>
|
||||
<a href="index.html" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-home mr-2"></i> Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Lazy Loading JavaScript -->
|
||||
<script>
|
||||
// Mobile menu toggle
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Lazy video loading functionality
|
||||
class LazyVideoLoader {
|
||||
constructor() {
|
||||
this.loadedVideos = new Set();
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Find all play button overlays
|
||||
const triggers = document.querySelectorAll('[data-load-trigger]');
|
||||
|
||||
triggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
const container = e.target.closest('[data-video-container]');
|
||||
this.loadVideo(container);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loadVideo(container) {
|
||||
if (!container) return;
|
||||
|
||||
// Get video element
|
||||
const video = container.querySelector('[data-lazy-video]');
|
||||
const videoSrc = video.getAttribute('data-src');
|
||||
|
||||
// Check if already loaded
|
||||
if (this.loadedVideos.has(videoSrc)) {
|
||||
this.playVideo(container, video);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading spinner
|
||||
const spinner = container.querySelector('.video-loading');
|
||||
const playButton = container.querySelector('[data-load-trigger]');
|
||||
|
||||
playButton.style.display = 'none';
|
||||
spinner.style.display = 'block';
|
||||
|
||||
// Set video source and load
|
||||
const source = video.querySelector('source');
|
||||
source.src = videoSrc;
|
||||
video.load();
|
||||
|
||||
// Handle video load events
|
||||
video.addEventListener('loadeddata', () => {
|
||||
this.loadedVideos.add(videoSrc);
|
||||
spinner.style.display = 'none';
|
||||
video.style.display = 'block';
|
||||
container.classList.add('loaded');
|
||||
this.playVideo(container, video);
|
||||
}, { once: true });
|
||||
|
||||
video.addEventListener('error', () => {
|
||||
spinner.style.display = 'none';
|
||||
playButton.style.display = 'flex';
|
||||
console.error('Error loading video:', videoSrc);
|
||||
alert('Failed to load video. Please check the file path.');
|
||||
}, { once: true });
|
||||
}
|
||||
|
||||
playVideo(container, video) {
|
||||
video.style.display = 'block';
|
||||
container.classList.add('loaded');
|
||||
|
||||
// Attempt to play
|
||||
const playPromise = video.play();
|
||||
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
console.log('Autoplay prevented, user interaction required:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize lazy video loader when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new LazyVideoLoader();
|
||||
});
|
||||
|
||||
// Optional: Intersection Observer for automatic loading when scrolled into view
|
||||
// Uncomment this section if you want videos to load automatically when visible
|
||||
/*
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '100px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const videoObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const container = entry.target;
|
||||
const loader = new LazyVideoLoader();
|
||||
// Optionally preload but don't autoplay
|
||||
// loader.loadVideo(container);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('[data-video-container]').forEach(container => {
|
||||
videoObserver.observe(container);
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1080
videos.html
1080
videos.html
File diff suppressed because it is too large
Load Diff
440
videosv1.html
440
videosv1.html
@@ -1,440 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Videos | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.video-container:hover .video-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#1a1b2f] text-gray-200">
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
</a>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-green-400 font-semibold">Videos</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-green-400 font-semibold">Videos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
<i class="fas fa-play-circle mr-3"></i>Video Gallery
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
Watch our drones in action. Flight tests, tutorials, project showcases, and real-world deployments.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Categories -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
|
||||
<!-- Featured Video -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Featured</h2>
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl border border-green-600">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/thumbnail.jpg">
|
||||
<source src="bmth.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Complete Agriculture Solution Demo</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
Full demonstration of our precision agriculture system in a 50-acre wheat field. Watch autonomous waypoint navigation, multispectral imaging, and real-time NDVI processing.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Agriculture</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">15 min</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">1080p</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flight Tests & Demos -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Flight Tests & Demos</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/thumbnail1.jpg">
|
||||
<source src="upton.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Base Flight Kit - First Flight</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Maiden flight of the Base Flight Kit. PID tuning, stability tests, and GPS hold demonstration.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Hardware</span>
|
||||
<span class="text-gray-400">5:32</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/thumbnail2.jpg">
|
||||
<source src="path/to/video2.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Heavy Lift Platform - 3kg Payload Test</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Stress testing the hexacopter with full 3kg payload. Flight time, stability, and emergency landing procedures.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Hardware</span>
|
||||
<span class="text-gray-400">8:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/thumbnail3.jpg">
|
||||
<source src="path/to/video3.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Autonomous Waypoint Navigation</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Fully autonomous mission with 12 waypoints. Ground control station view and onboard footage.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="text-gray-400">6:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/thumbnail4.jpg">
|
||||
<source src="SegE-skate-short.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Edge Compute Kit - Real-Time Object Detection</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
YOLO SegE on moving person and vehicle detection from aerial view.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">AI/Vision</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutorials -->
|
||||
<!--
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Build Tutorials</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/tutorial1.jpg">
|
||||
<source src="path/to/tutorial1.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Complete Build Guide - Base Flight Kit</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Step-by-step assembly from parts to first flight. Soldering, wiring, and configuration walkthrough.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">22:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/tutorial2.jpg">
|
||||
<source src="path/to/tutorial2.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Installing Flight Core Firmware</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
How to flash firmware, configure parameters, and calibrate sensors using the ground station software.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">12:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/tutorial3.jpg">
|
||||
<source src="path/to/tutorial3.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Setting Up Computer Vision Pipeline</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Configure the Vision Suite for onboard object detection. Model selection, optimization, and deployment.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">18:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/tutorial4.jpg">
|
||||
<source src="path/to/tutorial4.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">3D Printing Custom Parts</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Printer settings, material selection, and post-processing for drone components. PLA vs PETG comparison.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">9:20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Industry Deployments -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Industry Deployments</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/deployment1.jpg">
|
||||
<source src="droneRun.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Surveillance - Close Protection </h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Close quater surveillance and alerting. Multispectral imaging and AI-powered body cam in the sky.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Case Study</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/deployment2.jpg">
|
||||
<source src="bath.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Infrastructure - Bath Canal Inspection</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Automated inspection of a bath canal for blockages.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Case Study</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/deployment3.jpg">
|
||||
<source src="droneMoves.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Fitness - Workout Monitor</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Drone can set the pace for a run or ride. Monitor from ahead or behind, checking athlete form.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Case Study</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4">
|
||||
<video controls poster="path/to/deployment4.jpg">
|
||||
<source src="jamming.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Anti Jam - Jam Testing Video</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Testing the latest jammers against the drone wireless comms.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Case Study</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Community Videos -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Community Builds</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3">
|
||||
<video controls poster="path/to/community1.jpg">
|
||||
<source src="path/to/community1.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Custom Racing Quad</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Modified Base Flight Kit for FPV racing. 200mph+ capable.</p>
|
||||
<div class="text-gray-400 text-xs">by @droneracer_uk</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3">
|
||||
<video controls poster="path/to/community2.jpg">
|
||||
<source src="path/to/community2.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Marine Research Platform</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Waterproof modification for coastal wildlife monitoring.</p>
|
||||
<div class="text-gray-400 text-xs">by @ocean_tech</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3">
|
||||
<video controls poster="path/to/community3.jpg">
|
||||
<source src="path/to/community3.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">University Research Project</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Student team using our kit for AI thesis project.</p>
|
||||
<div class="text-gray-400 text-xs">by @exeter_robotics</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Upload Your Video CTA
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Share Your Builds</h2>
|
||||
<p class="text-green-200 mb-8 max-w-2xl mx-auto">
|
||||
Built something awesome with our devkits? Share your videos with the community. The best submissions get featured on this page!
|
||||
</p>
|
||||
<a href="#contact" class="inline-block bg-green-500 text-[#22223b] px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fas fa-upload mr-2"></i> Submit Your Video
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Ready to Build?</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Get started with our devkits and open-source software today.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="devkits.html" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
||||
Devkits
|
||||
</a>
|
||||
<a href="index.html" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-home mr-2"></i> Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
780
videosv2.html
780
videosv2.html
@@ -1,780 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Videos | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.video-container:hover .video-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.video-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(74, 222, 128, 0.2);
|
||||
border-top-color: #4ade80;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Play Button Overlay */
|
||||
.play-button-overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(74, 222, 128, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.play-button-overlay:hover {
|
||||
background: rgba(74, 222, 128, 1);
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
|
||||
.play-button-overlay i {
|
||||
color: #22223b;
|
||||
font-size: 30px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.video-container.loaded .play-button-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-container.loading .play-button-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Poster image styling */
|
||||
.video-poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-container.loaded .video-poster {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#1a1b2f] text-gray-200">
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center">
|
||||
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
||||
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
||||
</a>
|
||||
<div class="hidden md:flex space-x-6 text-sm">
|
||||
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-green-400 font-semibold">Videos</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-green-400 font-semibold">Videos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
<i class="fas fa-play-circle mr-3"></i>Video Gallery
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
Watch our drones in action. Flight tests, tutorials, project showcases, and real-world deployments.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Categories -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
|
||||
<!-- Featured Video -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8"></h2>
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl border border-green-600">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/featured-thumbnail.jpg" alt="Featured video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="bmth-80m.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<!-- <div class="video-overlay"> <h3 class="text-white font-bold">Featured Demonstration</h3> </div> -->
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Aerial Photography - Bournemouth</h3>
|
||||
<p class="text-green-200 mb-4">
|
||||
High altitude shots open opportunites for the unscene. Across mountain ranges or open air.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">1080p</span>
|
||||
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Active Deployment</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flight Tests & Demos -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Flight Tests & Demos</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="upton.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Base Flight Kit - First Flight</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Maiden flight of the Base Flight Kit. PID tuning, stability tests, and GPS hold demonstration.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Hardware</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/video2.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Drone Simulator</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Stress testing the simulator with a hexacopter. Flight time, stability, and emergency landing procedures.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Simulator</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/video3.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Autonomous Waypoint Navigation</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Fully autonomous mission with 12 waypoints. Ground control station view and onboard footage.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Hardware</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Navigation</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/thumbnail4.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="droneRun.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Edge Compute Kit - Real-Time Object Detection</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Onboard YOLO inference running at 15fps. Live person and vehicle detection from aerial view.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Software</span>
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">AI/Vision</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutorials -->
|
||||
<!--
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Build Tutorials</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial1.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Complete Build Guide - Base Flight Kit</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Step-by-step assembly from parts to first flight. Soldering, wiring, and configuration walkthrough.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">22:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial2.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Installing Flight Core Firmware</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
How to flash firmware, configure parameters, and calibrate sensors using the ground station software.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial3.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Setting Up Computer Vision Pipeline</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Configure the Vision Suite for onboard object detection. Model selection, optimization, and deployment.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">18:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/tutorial4.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/tutorial4.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">3D Printing Custom Parts</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Printer settings, material selection, and post-processing for drone components. PLA vs PETG comparison.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Tutorial</span>
|
||||
<span class="text-gray-400">9:20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Industry Deployments -->
|
||||
<div class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Industry Deployments</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="droneMoves.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Movement Estimation - Flying DashCam</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Walk, run, ride or drive with follow mode and benefit from object detection and segmentation - Think flying body-cam / dash-cam powered with AI.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Active Deployment</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="bath.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Infrastructure - Bath Canal Inspection</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Automated inspection of a bath canal for blockages and obstruction to the canal boats.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Active Deployment</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="jamming-text.webm"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Jammers - The Last Line of Defense</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
Pilot program for drone jamming in urban or rural areas. Autonomous navigation and precision tracking enable fast takedown.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Pilot Program</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-4" data-video-container>
|
||||
<img src="path/to/deployment4.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src=""
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-green-300 mb-2">Surveillance - Perimeter Security</h3>
|
||||
<p class="text-green-200 text-sm mb-3">
|
||||
24/7 autonomous patrol system for a large industrial site. Thermal imaging and real-time alerts.
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs">
|
||||
<span class="bg-green-900 text-green-300 px-2 py-1 rounded">Pilot Program</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Community Videos -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8">Community Builds</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3" data-video-container>
|
||||
<img src="path/to/community1.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/community1.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Custom Racing Quad</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Modified Base Flight Kit for FPV racing. 200mph+ capable.</p>
|
||||
<div class="text-gray-400 text-xs">by @droneracer_uk</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3" data-video-container>
|
||||
<img src="path/to/community2.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/community2.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">Car Show Room</h3>
|
||||
<p class="text-green-200 text-xs mb-2">1 Click showroom style circle video of vehicle.</p>
|
||||
<div class="text-gray-400 text-xs">by @realJonStarkey</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-4 rounded-xl hover-lift border border-green-700">
|
||||
<div class="video-container mb-3" data-video-container>
|
||||
<img src="path/to/community3.jpg" alt="Video thumbnail" class="video-poster" loading="lazy">
|
||||
<div class="play-button-overlay" data-load-trigger>
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="video-loading" style="display: none;"></div>
|
||||
<video
|
||||
data-src="path/to/community3.mp4"
|
||||
data-lazy-video
|
||||
controls
|
||||
preload="none"
|
||||
style="display: none;">
|
||||
<source type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-300 mb-2">University Research Project</h3>
|
||||
<p class="text-green-200 text-xs mb-2">Student team using our kit for AI thesis project.</p>
|
||||
<div class="text-gray-400 text-xs">by @exeter_robotics</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Upload Your Video CTA -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Share Your Builds</h2>
|
||||
<p class="text-green-200 mb-8 max-w-2xl mx-auto">
|
||||
Built something awesome with our devkits? Share your videos with the community. The best submissions get featured on this page!
|
||||
</p>
|
||||
<a href="#contact" class="inline-block bg-green-500 text-[#22223b] px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fas fa-upload mr-2"></i> Submit Your Video
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Ready to Build?</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Get started with our devkits and open-source software today.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="devkits.html" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
||||
Browse Devkits
|
||||
</a>
|
||||
<a href="index.html" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-home mr-2"></i> Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
||||
<p>Open source. Modular. Built by developers, for developers.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Lazy Loading JavaScript -->
|
||||
<script>
|
||||
// Mobile menu toggle
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Lazy video loading functionality
|
||||
class LazyVideoLoader {
|
||||
constructor() {
|
||||
this.loadedVideos = new Set();
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Find all play button overlays
|
||||
const triggers = document.querySelectorAll('[data-load-trigger]');
|
||||
|
||||
triggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
const container = e.target.closest('[data-video-container]');
|
||||
this.loadVideo(container);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loadVideo(container) {
|
||||
if (!container) return;
|
||||
|
||||
// Get video element
|
||||
const video = container.querySelector('[data-lazy-video]');
|
||||
const videoSrc = video.getAttribute('data-src');
|
||||
|
||||
// Check if already loaded
|
||||
if (this.loadedVideos.has(videoSrc)) {
|
||||
this.playVideo(container, video);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading spinner
|
||||
const spinner = container.querySelector('.video-loading');
|
||||
const playButton = container.querySelector('[data-load-trigger]');
|
||||
|
||||
playButton.style.display = 'none';
|
||||
spinner.style.display = 'block';
|
||||
|
||||
// Set video source and load
|
||||
const source = video.querySelector('source');
|
||||
source.src = videoSrc;
|
||||
video.load();
|
||||
|
||||
// Handle video load events
|
||||
video.addEventListener('loadeddata', () => {
|
||||
this.loadedVideos.add(videoSrc);
|
||||
spinner.style.display = 'none';
|
||||
video.style.display = 'block';
|
||||
container.classList.add('loaded');
|
||||
this.playVideo(container, video);
|
||||
}, { once: true });
|
||||
|
||||
video.addEventListener('error', () => {
|
||||
spinner.style.display = 'none';
|
||||
playButton.style.display = 'flex';
|
||||
console.error('Error loading video:', videoSrc);
|
||||
alert('Failed to load video. Please check the file path.');
|
||||
}, { once: true });
|
||||
}
|
||||
|
||||
playVideo(container, video) {
|
||||
video.style.display = 'block';
|
||||
container.classList.add('loaded');
|
||||
|
||||
// Attempt to play
|
||||
const playPromise = video.play();
|
||||
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
console.log('Autoplay prevented, user interaction required:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize lazy video loader when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new LazyVideoLoader();
|
||||
});
|
||||
|
||||
// Optional: Intersection Observer for automatic loading when scrolled into view
|
||||
// Uncomment this section if you want videos to load automatically when visible
|
||||
/*
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '100px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const videoObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const container = entry.target;
|
||||
const loader = new LazyVideoLoader();
|
||||
// Optionally preload but don't autoplay
|
||||
// loader.loadVideo(container);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('[data-video-container]').forEach(container => {
|
||||
videoObserver.observe(container);
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user