Added website from /var/www/
This commit is contained in:
jon
471
consultancy.html
Normal file
471
consultancy.html
Normal file
@@ -0,0 +1,471 @@
|
||||
<!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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
301
devkits.html
Normal file
301
devkits.html
Normal file
@@ -0,0 +1,301 @@
|
||||
<!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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
315
index.html
Normal file
315
index.html
Normal file
@@ -0,0 +1,315 @@
|
||||
<!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>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</nav>
|
||||
|
||||
<!-- 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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
373
opensource.html
Normal file
373
opensource.html
Normal file
@@ -0,0 +1,373 @@
|
||||
<!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>
|
||||
</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-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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</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 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 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 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>
|
||||
</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>
|
||||
</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
video-lazy.html
Normal file
780
video-lazy.html
Normal file
@@ -0,0 +1,780 @@
|
||||
<!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>
|
||||
780
videos.html
Normal file
780
videos.html
Normal file
@@ -0,0 +1,780 @@
|
||||
<!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>
|
||||
440
videosv1.html
Normal file
440
videosv1.html
Normal file
@@ -0,0 +1,440 @@
|
||||
<!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
Normal file
780
videosv2.html
Normal file
@@ -0,0 +1,780 @@
|
||||
<!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