441 lines
24 KiB
HTML
441 lines
24 KiB
HTML
<!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>
|