781 lines
39 KiB
HTML
781 lines
39 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;
|
|
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>
|