1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="description" 8 content="Explore our range of Remote Sensing, Geomatics and IT services designed to provide accurate and reliable information to help businesses make decisions."> 9 <title>Kabelik GmbH - Kabelik GmbH your Partner for Remote Sensing, Geomatics and IT Services</title> 10 <!-- Tailwind CSS for Styling --> 11
11<script src="https://cdn.tailwindcss.com"></script>
11 12 <!-- Three.js for 3D Rendering --> 13
13<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13 14 <!-- Font --> 15 <link 16 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=JetBrains+Mono:wght@400&display=swap" 17 rel="stylesheet"> 18 <link rel="icon" type="image/png" href="assets/favicon.png"> 19 20 <!-- NOTE: Tailwind Play CDN is used for development/demonstration. 21 For production, a compiled CSS file or Tailwind CLI should be used. --> 22 <style> 23 body { 24 margin: 0; 25 overflow-x: hidden; 26 background: #050505; 27 color: white; 28 font-family: 'Inter', sans-serif; 29 } 30 31 #canvas-container { 32 position: fixed; 33 top: 0; 34 left: 0; 35 width: 100%; 36 height: 100vh; 37 z-index: -1; 38 } 39 40 .glass-panel { 41 background: rgba(20, 20, 20, 0.6); 42 backdrop-filter: blur(12px); 43 border: 1px solid rgba(255, 255, 255, 0.1); 44 border-radius: 12px; 45 } 46 47 .tech-font { 48 font-family: 'JetBrains Mono', monospace; 49 } 50 51 .gradient-text { 52 background: linear-gradient(90deg, #a2d032 0%, #003a5d 100%); 53 -webkit-background-clip: text; 54 background-clip: text; 55 -webkit-text-fill-color: transparent; 56 } 57 58 /* Custom Scrollbar */ 59 ::-webkit-scrollbar {
60 width: 8px; 61 } 62 63 ::-webkit-scrollbar-track { 64 background: #050505; 65 } 66 67 ::-webkit-scrollbar-thumb { 68 background: #333; 69 border-radius: 4px; 70 } 71 72 /* Lightbox Custom Styles */ 73 #image-lightbox { 74 transition: opacity 0.3s ease; 75 } 76 #lightbox-img { 77 transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease; 78 } 79 </style> 80
80<script type="application/ld+json"> 81 { 82 "@context": "https://schema.org", 83 "@type": "Organization", 84 "name": "Kabelik GmbH", 85 "url": "https://www.kabelik.at", 86 "logo": "https://www.kabelik.at/assets/logo_transparent_1_278.png", 87 "description": "Expert Geomatics, LIDAR, and IT Services in Austria.", 88 "contactPoint": { 89 "@type": "ContactPoint", 90 "email": "[email protected]", 91 "contactType": "customer service" 92 }, 93 "address": { 94 "@type": "PostalAddress", 95 "streetAddress": "Merbotogasse 58D", 96 "addressLocality": "Wiener Neustadt", 97 "postalCode": "2700", 98 "addressCountry": "AT" 99 } 100 } 101 </script>
101 102 103 104 105 106 107</head> 108 109<body> 110 111 <!-- 3D Background Layer --> 112 <div id="canvas-container"></div> 113 114 <!-- Navigation --> 115 <nav class="fixed top-0 w-full p-6 flex justify-between items-center z-50 mix-blend-difference"> 116 <a href="#" class="flex items-center gap-2"> 117 <img src="./assets/logo_transparent_1_278.png" alt="Kabelik Logo" class="h-10 w-auto"> 118 </a> 119 <div class="hidden md:flex gap-2 lg:gap-3 xl:gap-4 text-[8px] lg:text-[9px] xl:text-[10px] font-bold tracking-widest text-[#a2d032] items-center"> 120 <a href="#lidar" class="hover:text-white transition">LIDAR</a> 121 <a href="#bathymetry" class="hover:text-white transition">BATHYMETRY</a> 122 <a href="#photogrammetry" class="hover:text-white transition">PHOTOGRAMMETRY</a> 123 <a href="#gaussian-splatting" class="hover:text-white transition">GAUSSIAN SPLATTING</a> 124 <a href="#fmv" class="hover:text-white transition">FMV TELEMETRY</a> 125 <a href="#orthophoto" class="hover:text-white transition">ORTHOPHOTO</a> 126 <a href="#thermal-imaging" class="hover:text-white transition">THERMAL</a> 127 <a href="#hyperspectral" class="hover:text-white transition">HYPERSPECTRAL</a> 128 <a href="#web-gis" class="hover:text-white transition">WEB/GIS</a> 129 <a href="#it-services" class="hover:text-white transition">IT SERVICES</a> 130 <a href="#projects" class="hover:text-white transition">PROJECTS</a> 131 <a href="#about-us" class="hover:text-white transition">ABOUT US</a> 132 <a href="#contact" class="hover:text-white transition">CONTACT</a> 133 </div> 134 <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" 135 class="border border-white/20 px-4 py-2 rounded-full text-[10px] sm:text-xs hover:bg-[#a2d032] hover:text-black hover:border-[#a2d032] transition flex items-center gap-2 font-bold tracking-widest text-[#a2d032]"> 136 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 137 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7m0 0l7 7m-7-7v18"> 138 </path> 139 </svg> 140 TOP 141 </button> 142 </nav> 143 144 <!-- Main Content --> 145 <main> 146 <!-- HERO SECTION --> 147 <section class="h-screen flex items-center px-6 md:px-20"> 148 <div class="max-w-2xl"> 149 <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest">DIGITAL TWIN TECHNOLOGY</div> 150 <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6"> 151 Capture Reality.<br> 152 <span class="gradient-text">Down to the pixel.</span> 153 </h1> 154 <p class="text-gray-400 text-lg mb-8 max-w-lg"> 155 Specialized in Airborne LiDAR, High-Res Bathymetry, and Photorealistic Gaussian Splatting for 156 engineering and simulation. 157 </p> 158 <div class="flex gap-4"> 159 <a href="#projects" 160 class="bg-[#a2d032] hover:bg-[#8ab32a] px-8 py-3 rounded-lg font-medium transition text-white inline-block text-center cursor-pointer"> 161 View Projects 162 </a> 163 <a href="#about-us" 164 class="glass-panel px-8 py-3 rounded-lg font-medium hover:bg-white/10 transition inline-block text-center cursor-pointer"> 165 Our Tech Stack 166 </a> 167 </div> 168 </div> 169 170 <!-- Floating UI Element simulating data --> 171 <div class="absolute right-10 bottom-20 glass-panel p-6 w-64 hidden md:block"> 172 <div class="flex justify-between text-xs text-gray-400 mb-2"> 173 <span>POINTS LOADED</span> 174 <span class="tech-font text-[#a2d032]">14,203,992</span> 175 </div> 176 <div class="flex justify-between text-xs text-gray-400 mb-2"> 177 <span>GROUND RES</span>
178 <span class="tech-font">2 cm/px</span> 179 </div> 180 <div class="h-1 w-full bg-gray-700 mt-2 overflow-hidden rounded-full"> 181 <div class="h-full bg-[#a2d032] w-2/3"></div> 182 </div> 183 </div> 184 </section> 185 186 <!-- LIDAR SECTION --> 187 <section id="lidar" 188 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 189 <div class="grid md:grid-cols-2 gap-16 items-center"> 190 <div class="glass-panel p-8 md:p-12"> 191 <h2 class="text-3xl font-bold mb-4">LIDAR</h2> 192 <p class="text-gray-400 mb-6"> 193 We deliver classified point clouds with extreme density. From forestry management to 194 infrastructure monitoring, our data integrates seamlessly into your GIS workflow. 195 </p> 196 <ul class="space-y-3 text-sm text-gray-300"> 197 <li class="flex items-center gap-2"> 198 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> 20+ points / m² density 199 </li> 200 <li class="flex items-center gap-2"> 201 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Full waveform analysis 202 </li> 203 <li class="flex items-center gap-2"> 204 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> DTM & DSM generation 205 </li> 206 </ul> 207 <div class="mt-8 pt-6 border-t border-white/10"> 208 <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Key Industry 209 Capability</div> 210 <div class="text-sm font-bold mb-1">Critical Infrastructure Monitoring</div> 211 <p class="text-xs text-gray-400">Large-scale LiDAR & Orthophoto acquisition for European power 212 grid expansion and corridor planning.</p> 213 </div> 214 </div> 215 <!-- Interactive Potree Viewer --> 216 <div 217 class="relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group"> 218 <iframe id="potree-iframe" src="lk6/lk.html" class="w-full h-full border-none" title="Potree Viewer" 219 allowfullscreen></iframe> 220 <button onclick="document.getElementById('potree-iframe').requestFullscreen()" 221 class="absolute top-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 p-2.5 rounded-lg hover:border-[#a2d032] hover:text-[#a2d032] transition-all opacity-0 group-hover:opacity-100 flex items-center gap-2 text-[10px] font-bold tracking-widest z-10"> 222 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 223 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 224 d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"> 225 </path> 226 </svg> 227 FULLSCREEN 228 </button> 229 </div> 230 </div> 231 </section> 232 233 <!-- BATHYMETRY SECTION --> 234 <section id="bathymetry" 235 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 236 <div class="grid md:grid-cols-2 gap-16 items-center"> 237 <div class="order-2 md:order-1 space-y-4"> 238 <div class="glass-panel overflow-hidden rounded-xl border border-white/10"> 239 <img src="assets/cross_section.webp" alt="Bathymetry Cross Section" 240 class="w-full h-auto opacity-80 hover:opacity-100 transition duration-500"> 241 <div class="p-4 bg-black/40 backdrop-blur-md">
242 <span class="tech-font text-[10px] text-gray-400 uppercase">Riverbed Cross-Section 243 Analysis</span> 244 </div> 245 </div> 246 <div class="grid grid-cols-2 gap-4"> 247 <div class="glass-panel overflow-hidden rounded-xl border border-white/10 font-bold uppercase"> 248 <img src="assets/15_dsm.webp" alt="Digital Surface Model" 249 class="w-full aspect-square object-cover opacity-60 hover:opacity-100 transition duration-500"> 250 <div class="p-2 text-center bg-black/40"> 251 <span class="tech-font text-[9px] text-gray-500">DSM VIEW</span> 252 </div> 253 </div> 254 <div class="glass-panel overflow-hidden rounded-xl border border-white/10 font-bold uppercase"> 255 <img src="assets/16_dtm.webp" alt="Digital Terrain Model" 256 class="w-full aspect-square object-cover opacity-60 hover:opacity-100 transition duration-500"> 257 <div class="p-2 text-center bg-black/40"> 258 <span class="tech-font text-[9px] text-gray-500">DTM VIEW</span> 259 </div> 260 </div> 261 </div> 262 </div> 263 <div class="glass-panel p-8 md:p-12 order-1 md:order-2"> 264 <h2 class="text-3xl font-bold mb-4">BATHYMETRY</h2> 265 <p class="text-gray-400 mb-6"> 266 Using green-wavelength laser technology, we map the underwater topography of rivers and lakes. 267 Seamlessly merging land and water data into a single mesh. 268 </p> 269 <div class="flex gap-4 mt-4"> 270 <div class="text-center"> 271 <div class="text-2xl font-bold underline decoration-[#a2d032]">ALB</div> 272 <div class="text-[9px] text-gray-500 tech-font uppercase">Active Sensors</div> 273 </div> 274 <div class="text-center border-l border-white/10 pl-4"> 275 <div class="text-2xl font-bold underline decoration-[#a2d032]">Refract</div> 276 <div class="text-[9px] text-gray-500 tech-font uppercase">Correction</div> 277 </div> 278 </div> 279 <div class="mt-8 pt-6 border-t border-white/10"> 280 <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Hydrology & 281 Defense</div> 282 <div class="text-sm font-bold mb-1">Sub-Surface Target Detection</div> 283 <p class="text-xs text-gray-400">Providing specialized expertise in bathymetric LiDAR for 284 riverbed modeling and underwater object identification.</p> 285 </div> 286 </div> 287 </div> 288 </section> 289 290 <!-- PHOTOGRAMMETRY SECTION --> 291 <section id="photogrammetry" 292 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 293 <div class="grid md:grid-cols-2 gap-16 items-center"> 294 <div class="glass-panel p-8 md:p-12"> 295 <div class="tech-font text-[#a2d032] text-xs mb-4">NEXT GEN VISUALIZATION</div> 296 <h2 class="text-3xl font-bold mb-4">PHOTOGRAMMETRY</h2> 297 <p class="text-gray-400 mb-6"> 298 Precision Digital Twins and Asset Monitoring. We deliver high-resolution 3D meshes and 3D Tiles 299 for 300 large-scale industrial infrastructure, refineries, and heritage sites, georeferenced to 301 sub-centimeter accuracy. 302 </p> 303 <ul class="space-y-3 text-sm text-gray-300"> 304 <li class="flex items-center gap-2">
305 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Sub-centimeter accuracy & 306 Georeferencing 307 </li> 308 <li class="flex items-center gap-2"> 309 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> High-fidelity 3D Reconstruction 310 </li> 311 <li class="flex items-center gap-2"> 312 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Seamless Web Integration (3D Tiles) 313 </li> 314 </ul> 315 <div class="mt-8 pt-6 border-t border-white/10"> 316 <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Latest 317 Technology</div> 318 <div class="text-sm font-bold mb-1">Industrial Digital Twins</div> 319 <p class="text-xs text-gray-400">Complete spatial reconstruction of complex industrial plants 320 for planning, maintenance, and virtual site visits.</p> 321 </div> 322 </div> 323 <!-- Interactive 3D Tiles Viewer --> 324 <div 325 class="relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group"> 326 <iframe id="cesium-iframe" src="3dtiles.html" class="w-full h-full border-none" 327 title="3D Tiles Viewer" allowfullscreen></iframe> 328 <button onclick="document.getElementById('cesium-iframe').requestFullscreen()" 329 class="absolute top-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 p-2.5 rounded-lg hover:border-[#a2d032] hover:text-[#a2d032] transition-all opacity-0 group-hover:opacity-100 flex items-center gap-2 text-[10px] font-bold tracking-widest z-10"> 330 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 331 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 332 d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"> 333 </path> 334 </svg> 335 FULLSCREEN 336 </button> 337 </div> 338 </div> 339 </section> 340 341 <!-- GAUSSIAN SPLATTING SECTION --> 342 <section id="gaussian-splatting" 343 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 344 <div class="grid md:grid-cols-2 gap-16 items-center"> 345 <div 346 class="order-2 md:order-1 relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group bg-black"> 347 348 <div id="splat-placeholder" 349 class="absolute inset-0 flex flex-col items-center justify-center bg-[#0a0a0a] z-20 transition-opacity duration-500"> 350 <!-- Add a subtle grid background for tech feel --> 351 <div class="absolute inset-0 opacity-20" 352 style="background-image: linear-gradient(#a2d032 1px, transparent 1px), linear-gradient(90deg, #a2d032 1px, transparent 1px); background-size: 40px 40px; background-position: center center;"> 353 </div> 354 355 <div class="relative z-10 flex flex-col items-center"> 356 <div class="tech-font text-[#a2d032] text-[10px] uppercase tracking-widest mb-4">Interactive 357 WebGL App</div> 358 <button onclick="loadSplatViewer()" 359 class="bg-[#a2d032] hover:bg-[#8ab32a] text-black px-6 py-3 rounded-lg font-bold tracking-widest uppercase transition-all hover:scale-105 flex items-center gap-3 shadow-[0_0_20px_rgba(162,208,50,0.3)] border border-[#c3f542]"> 360 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 361 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 362 d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"> 363 </path> 364 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 365 d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> 366 </svg> 367 LOAD 3D SPLAT VIEWER 368 </button> 369 <div class="text-[9px] text-gray-500 mt-4 tech-font uppercase">~High CPU usage ⢠GPU 370 Accelerated</div> 371 </div> 372 </div> 373 374 <iframe id="splat-iframe" data-src="gsplat-lod-benchmark/spark-view.html?file=input-lod.rad" 375 class="w-full h-full border-none" title="Gaussian Splatting Viewer" allowfullscreen></iframe> 376 377
377<script> 378 function loadSplatViewer() { 379 const iframe = document.getElementById('splat-iframe'); 380 const placeholder = document.getElementById('splat-placeholder'); 381 382 // Detect if user is on a mobile device 383 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 384 let src = iframe.getAttribute('data-src'); 385 if (isMobile) { 386 src = "gsplat-lod-benchmark/mobile.html?file=input-lod.rad"; 387 } 388 389 iframe.src = src; 390 placeholder.style.opacity = '0'; 391 setTimeout(() => placeholder.style.display = 'none', 500); 392 } 393 </script>
393 394 395 <button onclick="document.getElementById('splat-iframe').requestFullscreen()" 396 class="absolute top-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 p-2.5 rounded-lg hover:border-[#a2d032] hover:text-[#a2d032] transition-all opacity-0 group-hover:opacity-100 flex items-center gap-2 text-[10px] font-bold tracking-widest z-10"> 397 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 398 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 399 d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"> 400 </path> 401 </svg> 402 FULLSCREEN 403 </button> 404 </div> 405 <div class="glass-panel p-8 md:p-12 order-1 md:order-2"> 406 <div class="tech-font text-[#a2d032] text-xs mb-4">NOVEL VIEW SYNTHESIS</div> 407 <h2 class="text-3xl font-bold mb-4">GAUSSIAN SPLATTING</h2> 408 <p class="text-gray-400 mb-6"> 409 Achieving photorealistic details through state-of-the-art volumetric representation. This model 410 was created using a nadir only dataset out of a helicopter, achieving around 5cm resolution. 411 </p> 412 <ul class="space-y-3 text-sm text-gray-300"> 413 <li class="flex items-center gap-2"> 414 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Helicopter-based acquisition 415 </li> 416 <li class="flex items-center gap-2"> 417 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Nadir-only image capture 418 </li> 419 <li class="flex items-center gap-2"> 420 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> ~5cm spatial resolution 421 </li> 422 </ul> 423 <div class="mt-8 pt-6 border-t border-white/10"> 424 <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Performance 425 </div> 426 <div class="text-sm font-bold mb-1">High-Speed Web Rendering</div> 427 <p class="text-xs text-gray-400 mb-4">Real-time exploration of photorealistic scenes directly in 428 your browser.</p> 429 <a href="./gsplat-lod-benchmark/playcanvas-view.html" target="_blank" 430 class="inline-flex items-center gap-2 border border-white/20 px-4 py-2.5 rounded-lg text-[10px] hover:bg-[#a2d032] hover:text-[#050505] hover:border-[#a2d032] transition font-bold tracking-widest bg-white/5"> 431 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 432 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 433 d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"> 434 </path> 435 </svg> 436 OPEN ADVANCED SPLAT EDITOR 437 </a> 438 </div> 439 </div> 440 </div> 441 </section> 442 443 <!-- FULL MOTION VIDEO (FMV) SECTION --> 444 <section id="fmv" 445 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 446 <div class="grid md:grid-cols-2 gap-16 items-center"> 447 <div class="glass-panel p-8 md:p-12"> 448 <div class="tech-font text-[#a2d032] text-xs mb-4">REAL-TIME AIRBORNE SENSING</div> 449 <h2 class="text-3xl font-bold mb-4">FULL MOTION VIDEO (FMV)</h2> 450 <p class="text-gray-400 mb-6"> 451 Synchronized airborne video streaming with embedded MISB ST 0601 KLV telemetry. Our web viewer projects video live onto the 3D Cesium globe terrain while synchronizing aircraft flight paths and ground sensor footprints. 452 </p> 453 <ul class="space-y-3 text-sm text-gray-300"> 454 <li class="flex items-center gap-2">
455 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> 3-View Synchronized Playback (Video, 3D Cesium, 2D Map) 456 </li> 457 <li class="flex items-center gap-2"> 458 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> MISB ST 0601 / ST 0102 KLV Telemetry Decoding 459 </li> 460 <li class="flex items-center gap-2"> 461 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Client-Side Video Upload & Live Telemetry Parsing 462 </li> 463 </ul> 464 <div class="mt-8 pt-6 border-t border-white/10"> 465 <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Airborne Intelligence</div> 466 <div class="text-sm font-bold mb-1">Georectified Video Projection</div> 467 <p class="text-xs text-gray-400 mb-4">Interactive target tracking and footprint projection directly in the web browser.</p> 468 <a href="fmv.html" target="_blank" 469 class="inline-flex items-center gap-2 bg-[#a2d032] hover:bg-[#8ab32a] text-black px-6 py-3 rounded-lg font-bold tracking-widest uppercase transition-all hover:scale-105 shadow-[0_0_20px_rgba(162,208,50,0.3)]"> 470 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 471 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path> 472 </svg> 473 LAUNCH FMV VIEWER 474 </a> 475 </div> 476 </div> 477 <!-- Interactive FMV Preview --> 478 <div class="relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group"> 479 <iframe src="fmv.html" class="w-full h-full border-none" title="FMV Telemetry Viewer" allowfullscreen></iframe> 480 </div> 481 </div> 482 </section> 483 484 <!-- ORTHOPHOTO SECTION --> 485 <section id="orthophoto" 486 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 487 <div class="grid md:grid-cols-2 gap-16 items-center"> 488 <div class="glass-panel p-8 md:p-12"> 489 <div class="tech-font text-[#a2d032] text-xs mb-4">GEOMETRICALLY CORRECTED IMAGERY</div> 490 <h2 class="text-3xl font-bold mb-4">ORTHOPHOTO</h2> 491 <p class="text-gray-400 mb-6"> 492 We produce highly accurate, orthorectified aerial imagery with uniform scale and precise map 493 projections. Unlike raw aerial photographs, our orthophotos are fully corrected for topographic 494 relief, lens distortion, and camera tilt. 495 </p> 496 <ul class="space-y-3 text-sm text-gray-300"> 497 <li class="flex items-center gap-2"> 498 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Absolute geometric accuracy for 499 measurements 500 </li> 501 <li class="flex items-center gap-2"> 502 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Seamless GIS and CAD integration 503 </li> 504 <li class="flex items-center gap-2"> 505 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Up to 3cm Ground Sample Distance 506 (GSD) 507 </li> 508 </ul> 509 </div> 510 <div 511 class="relative h-[300px] md:h-[500px] rounded-xl overflow-hidden glass-panel border border-white/10 group"> 512 <img src="assets/39_ortho.webp" alt="Orthophoto 6cm GSD Lanzenkirchen" 513 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 514 <div 515 class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 max-w-[90%] text-right">
516 <span class="tech-font text-[9px] text-[#a2d032] block mb-1">DATA SAMPLE</span> 517 <span class="tech-font text-[10px] text-gray-300">Orthophoto 6cm GSD, Lanzenkirchen, 518 Austria</span> 519 </div> 520 </div> 521 </div> 522 </section> 523 524 <!-- THERMAL IMAGING SECTION --> 525 <section id="thermal-imaging" 526 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 527 <div class="grid md:grid-cols-2 gap-16 items-center"> 528 <div 529 class="order-2 md:order-1 relative h-[300px] md:h-[500px] rounded-xl overflow-hidden glass-panel border border-white/10 group"> 530 <img src="assets/40_thermal_imaging.webp" alt="Thermal Orthophoto 25cm GSD Schönkirchen" 531 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 532 <div 533 class="absolute bottom-4 left-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 max-w-[90%]"> 534 <span class="tech-font text-[9px] text-[#a2d032] block mb-1">DATA SAMPLE</span> 535 <span class="tech-font text-[10px] text-gray-300">Thermal Orthophoto 25cm GSD, Schönkirchen, 536 Austria</span> 537 </div> 538 </div> 539 <div class="glass-panel p-8 md:p-12 order-1 md:order-2"> 540 <div class="tech-font text-[#a2d032] text-xs mb-4">INFRARED THERMOGRAPHY (IRT)</div> 541 <h2 class="text-3xl font-bold mb-4">THERMAL IMAGING</h2> 542 <p class="text-gray-400 mb-6"> 543 Our advanced thermal imaging sensors detect long-infrared radiation (9â14 µm) to reveal thermal 544 signatures completely invisible to the naked eye. By capturing precise temperature distributions 545 across large geographical areas, our radiometric thermal orthophotos enable critical 546 applications. 547 </p> 548 <ul class="space-y-3 text-sm text-gray-300"> 549 <li class="flex items-center gap-2"> 550 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> District heating leak detection 551 </li> 552 <li class="flex items-center gap-2"> 553 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Sub-surface pipeline monitoring 554 </li> 555 <li class="flex items-center gap-2"> 556 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Night-time / zero-illumination 557 operability 558 </li> 559 </ul> 560 </div> 561 </div> 562 </section> 563 564 <!-- HYPERSPECTRAL IMAGING SECTION --> 565 <section id="hyperspectral" 566 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 567 <div class="grid md:grid-cols-2 gap-16 items-center"> 568 <div class="glass-panel p-8 md:p-12"> 569 <div class="tech-font text-[#a2d032] text-xs mb-4">MATERIAL CLASSIFICATION & SPECTRAL ANALYSIS</div> 570 <h2 class="text-3xl font-bold mb-4">HYPERSPECTRAL IMAGING</h2> 571 <p class="text-gray-400 mb-6"> 572 Capturing continuous spectral information across hundreds of narrow bands, our hyperspectral 573 workflows provide detailed biochemical and physical insights. We deliver atmospherically 574 corrected (VNIR/SWIR) data cubes that allow for precise material identification. 575 </p> 576 <ul class="space-y-3 text-sm text-gray-300"> 577 <li class="flex items-center gap-2">
578 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> High-fidelity spectrum per pixel 579 </li> 580 <li class="flex items-center gap-2"> 581 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Vegetation health & agricultural 582 analysis 583 </li> 584 <li class="flex items-center gap-2"> 585 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Environmental monitoring & mineral 586 mapping 587 </li> 588 </ul> 589 </div> 590 <div 591 class="relative h-[300px] md:h-[500px] rounded-xl overflow-hidden glass-panel border border-white/10 group"> 592 <img src="assets/26_vnir_swir_gras_asphalt-1.webp" alt="Hyperspectral Flightstrip" 593 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 594 <div 595 class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 max-w-[90%] text-right"> 596 <span class="tech-font text-[9px] text-[#a2d032] block mb-1">SPECTRAL COMPARISON</span> 597 <span class="tech-font text-[10px] text-gray-300">VNIR/SWIR. Asphalt vs Grass spectra in St. 598 Andrä, Austria.</span> 599 </div> 600 </div> 601 </div> 602 </section> 603 604 <!-- WEB/GIS SECTION --> 605 <section id="web-gis" 606 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 607 <div class="grid md:grid-cols-2 gap-16 items-center"> 608 <div class="glass-panel p-8 md:p-12"> 609 <div class="tech-font text-[#a2d032] text-xs mb-4">SPATIAL DATA ARCHITECTURE</div> 610 <h2 class="text-3xl font-bold mb-4">WEB/GIS</h2> 611 <p class="text-gray-400 mb-6"> 612 Custom Geoinformation data handling, conversion and enterprise management. We architect 613 high-performance Spatial Data Infrastructures for seamless data access and mobile field 614 workflows. 615 </p> 616 <ul class="space-y-4 text-sm text-gray-300"> 617 <li class="flex items-start gap-3"> 618 <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span> 619 <div> 620 <span class="font-bold text-white">GeoNode SDI Stack</span> 621 <p class="text-xs text-gray-400 mt-0.5">Enterprise spatial catalog for mapping, sharing, 622 and securely managing vector and raster datasets.</p> 623 </div> 624 </li> 625 <li class="flex items-start gap-3"> 626 <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span> 627 <div> 628 <span class="font-bold text-white">GeoServer & QGIS Server</span> 629 <p class="text-xs text-gray-400 mt-0.5">High-performance rendering engines providing 630 standardized OGC-compliant WMS and WFS web services.</p> 631 </div> 632 </li> 633 <li class="flex items-start gap-3"> 634 <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span> 635 <div> 636 <span class="font-bold text-white">Mergin Maps Server</span> 637 <p class="text-xs text-gray-400 mt-0.5">Enabling collaborative field data collection 638 natively synchronized with central enterprise databases.</p> 639 </div> 640 </li> 641 <li class="flex items-start gap-3">
642 <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span> 643 <div> 644 <span class="font-bold text-white">QWC2 Integrated Dashboards</span> 645 <p class="text-xs text-gray-400 mt-0.5">Custom QGIS Web Client 2 implementations for 646 deeply interactive web mapping applications and analysis tools.</p> 647 </div> 648 </li> 649 </ul> 650 </div> 651 <!-- QWC2 Interactive Map Viewer --> 652 <div class="h-full flex flex-col justify-center relative"> 653 <div class="glass-panel overflow-hidden rounded-xl border border-white/10 group relative"> 654 <img src="assets/qwc2.webp" alt="QWC2 Web GIS Client" 655 class="w-full h-auto opacity-80 group-hover:opacity-100 transition duration-500"> 656 <div 657 class="absolute bottom-4 left-4 bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-lg border border-white/10"> 658 <span class="tech-font text-[10px] text-[#a2d032] uppercase tracking-widest">QGIS Web Client 659 2</span> 660 </div> 661 </div> 662 </div> 663 </div> 664 </section> 665 666 <!-- IT SERVICES SECTION --> 667 <section id="it-services" 668 class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5"> 669 <div class="grid md:grid-cols-2 gap-16 items-center"> 670 <div 671 class="order-2 md:order-1 relative h-[300px] md:h-full rounded-xl overflow-hidden glass-panel border border-white/10 group"> 672 <img src="assets/41_msf7-jpg.webp" alt="IT Services Infrastructure" 673 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500"> 674 <div 675 class="absolute top-4 left-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 flex flex-col gap-0.5"> 676 <span class="tech-font text-[11px] text-[#a2d032] font-bold">msf6 > run 677 post/enterprise/infrastructure_pwn</span> 678 <span class="tech-font text-[9px] text-gray-400">[*] IT-Sec confirmed. We break our servers so 679 we know how to fix yours.</span> 680 </div> 681 </div> 682 <div class="glass-panel p-8 md:p-12 order-1 md:order-2"> 683 <h2 class="text-3xl font-bold mb-4">IT SERVICES</h2> 684 <p class="text-gray-400 mb-6"> 685 Professional IT infrastructure specialized in Linux, Mergin, Postgres (PostGIS), and QGIS Server 686 ecosystems. We also provide comprehensive Windows administration and support. 687 </p> 688 <ul class="space-y-3 text-sm text-gray-300"> 689 <li class="flex items-center gap-2"> 690 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Linux (Debian/Ubuntu) & Windows 691 Expert 692 </li> 693 <li class="flex items-center gap-2"> 694 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Scalable Cloud Infrastructure 695 (Nginx/Docker) 696 </li> 697 <li class="flex items-center gap-2"> 698 <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Enterprise Architecture & 24/7 699 Operations 700 </li> 701 </ul> 702 </div> 703 </div> 704 </section> 705 706 <!-- PROJECTS HIGHLIGHTS --> 707 <section id="projects" class="py-20 px-6 md:px-20 border-t border-white/5 bg-white/[0.02]"> 708 <div class="max-w-6xl mx-auto"> 709 <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest text-center">EXCELLENCE IN EXECUTION 710 </div> 711 <h2 class="text-4xl font-bold mb-12 text-center">SELECTED CASE STUDIES</h2> 712 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
713 <!-- Project 1 --> 714 <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500"> 715 <div class="flex justify-between items-start mb-4"> 716 <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Transmission 717 Grid</span> 718 </div> 719 <h4 class="font-bold mb-2">Power Corridor Monitoring</h4> 720 <p class="text-xs text-gray-400 mb-4">Operational LiDAR and Orthophoto campaigns for major 721 European power transmission networks.</p> 722 <div class="text-[9px] text-gray-500 tech-font uppercase">LiDAR ⢠Orthophoto ⢠Corridor Mapping 723 </div> 724 </div> 725 <!-- Project 2 --> 726 <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500"> 727 <div class="flex justify-between items-start mb-4"> 728 <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Energy 729 Sector</span> 730 </div> 731 <h4 class="font-bold mb-2">Aerial Infrastructure Thermography</h4> 732 <p class="text-xs text-gray-400 mb-4">Large-scale thermal monitoring of pipeline networks and 733 industrial assets for anomaly detection.</p> 734 <div class="text-[9px] text-gray-500 tech-font uppercase">Thermal Imaging ⢠Asset Management 735 </div> 736 </div> 737 <!-- Project 3 --> 738 <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500"> 739 <div class="flex justify-between items-start mb-4"> 740 <span 741 class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Sub-Aquatic</span> 742 </div> 743 <h4 class="font-bold mb-2">Bathymetric Mine Detection</h4> 744 <p class="text-xs text-gray-400 mb-4">Expert consulting and R&D for underwater target 745 identification through LiDAR bathymetry.</p> 746 <div class="text-[9px] text-gray-500 tech-font uppercase">Bathy-LiDAR ⢠R&D ⢠Defense Tech</div> 747 </div> 748 <!-- Project 4 --> 749 <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500"> 750 <div class="flex justify-between items-start mb-4"> 751 <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Industry 752 4.0</span> 753 </div> 754 <h4 class="font-bold mb-2">Industrial Facility Digital Twin</h4> 755 <p class="text-xs text-gray-400 mb-4">Generation of high-precision 3D meshes and Gaussian Splats 756 for petrochemical complex management.</p> 757 <div class="text-[9px] text-gray-500 tech-font uppercase">Gaussian Splats ⢠Asset Management 758 </div> 759 </div> 760 <!-- Project 5 --> 761 <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500"> 762 <div class="flex justify-between items-start mb-4"> 763 <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">IT & GIS</span> 764 </div> 765 <h4 class="font-bold mb-2">Fiber-Optic GIS Transformation</h4> 766 <p class="text-xs text-gray-400 mb-4">Transition of legacy GIS landscapes to high-performance 767 Open-Source stacks based on PostGIS.</p> 768 <div class="text-[9px] text-gray-500 tech-font uppercase">QGIS Server ⢠PostGIS ⢠Automation 769 </div> 770 </div> 771 <!-- Project 6 --> 772 <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500"> 773 <div class="flex justify-between items-start mb-4">
774 <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Hydrology</span> 775 </div> 776 <h4 class="font-bold mb-2">Riverbed & Sediment Analysis</h4> 777 <p class="text-xs text-gray-400 mb-4">Merging terrestrial and bathymetric data for seamless 778 terrain modeling and water management.</p> 779 <div class="text-[9px] text-gray-500 tech-font uppercase">Terrasolid ⢠LiDAR Bathymetry</div> 780 </div> 781 </div> 782 </div> 783 </section> 784 785 <!-- ABOUT US SECTION --> 786 <section id="about-us" class="py-20 px-6 md:px-20 border-t border-white/5"> 787 <div class="max-w-6xl mx-auto"> 788 <div class="grid md:grid-cols-3 gap-12"> 789 <div class="md:col-span-1"> 790 <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest">ESTABLISHED EXPERTISE</div> 791 <h2 class="text-4xl font-bold mb-8">KABELIK GMBH</h2> 792 <div class="glass-panel p-8"> 793 <p class="text-sm text-gray-400 leading-relaxed italic"> 794 "Bridging the gap between operational aviation experience and cutting-edge 795 Geoinformatics." 796 </p> 797 </div> 798 <div class="mt-8 space-y-4"> 799 <div class="glass-panel p-6"> 800 <h4 801 class="text-[10px] font-bold mb-4 tech-font text-gray-500 uppercase tracking-widest"> 802 Organizational Core</h4> 803 <div class="flex flex-wrap gap-2"> 804 <span 805 class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">GmbH 806 Entity</span> 807 <span 808 class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">Remote 809 Sensing</span> 810 <span 811 class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">Enterprise 812 IT</span> 813 <span 814 class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">GIS 815 Architecture</span> 816 <span 817 class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">Aviation 818 Operations</span> 819 </div> 820 </div> 821 </div> 822 </div> 823 <div class="md:col-span-2 space-y-10"> 824 <div> 825 <p class="text-2xl text-gray-200 leading-tight mb-6"> 826 Professional Remote Sensing, Geomatics, and IT Infrastructure. 827 </p> 828 <p class="text-gray-400 leading-relaxed text-sm mb-6"> 829 Kabelik GmbH is a specialized provider of high-end geospatial services and complex IT 830 infrastructure solutions. Based in Wiener Neustadt, we operate at the intersection of 831 aerial data acquisition and advanced data processing. 832 </p> 833 <p class="text-gray-400 leading-relaxed text-sm"> 834 Our focus lies on the entire value chain of remote sensing: from the strategic planning 835 and execution of sensor missions to the high-performance processing and refinement of 836 massive datasets into actionable Business Intelligence. We support industrial partners 837 and utility providers in managing complex spatial dataâefficie
837ntly, scalably, and at the 838 highest technological level. 839 </p> 840 </div> 841 842 <div class="grid md:grid-cols-2 gap-12"> 843 <div> 844 <h4 class="text-[#a2d032] tech-font text-[10px] uppercase tracking-widest mb-6">Service 845 Philosophy</h4> 846 <div class="space-y-6"> 847 <div class="relative pl-6 border-l border-[#a2d032]/30"> 848 <div class="absolute -left-[5px] top-0 w-2 h-2 bg-[#a2d032] rounded-full"></div> 849 <div class="text-sm font-bold">End-to-End Mission Management</div> 850 <p class="text-xs text-gray-400 mt-2">Integrating flight operations with data 851 analysis to ensure zero-loss information transfer.</p> 852 </div> 853 <div class="relative pl-6 border-l border-white/10"> 854 <div class="text-sm font-bold">Open-Source Excellence</div> 855 <p class="text-xs text-gray-400 mt-2">Developing scalable, vendor-independent 856 stacks based on QGIS, PostGIS, and Linux.</p> 857 </div> 858 <div class="relative pl-6 border-l border-white/10"> 859 <div class="text-sm font-bold">Infrastructure Reliability</div> 860 <p class="text-xs text-gray-400 mt-2">Providing enterprise-grade IT environments 861 for critical geospatial data processing.</p> 862 </div> 863 </div> 864 </div> 865 <div> 866 <h4 class="text-[#a2d032] tech-font text-[10px] uppercase tracking-widest mb-6"> 867 Certifications & Expertise</h4> 868 <div class="space-y-6"> 869 <div class="relative pl-6 border-l border-white/10"> 870 <div class="text-sm font-bold">Geoinformation Science</div> 871 <p class="text-xs text-gray-400">Deep expertise in LiDAR stripping, refraction 872 correction, and multi-sensor fusion.</p> 873 </div> 874 <div class="relative pl-6 border-l border-white/10"> 875 <div class="text-sm font-bold">IT Management & Strategy</div> 876 <p class="text-xs text-gray-400">Systemic approach to ITIL standards, cloud 877 architecture, and data security.</p> 878 </div> 879 <div class="mt-8 pt-8 border-t border-white/5"> 880 <div class="text-[10px] text-gray-500 tech-font uppercase tracking-widest mb-4"> 881 Strategic Partners</div> 882 <div class="text-[11px] text-gray-400 space-y-2"> 883 <div>⢠Airborne Operations Network</div> 884 <div>⢠Open-Source GIS Community</div> 885 <div>⢠High-Performance Computing Partners</div> 886 </div> 887 </div> 888 </div> 889 </div> 890 </div> 891 </div> 892 </div> 893 </div> 894 </section> 895 <!-- FOOTER --> 896 <footer id="contact" class="py-20 border-t border-white/5 text-center"> 897 <h2 class="text-2xl font-bold mb-8">Kabelik GmbH</h2> 898 <div class="text-sm text-gray-400 mb-8 tech-font space-x-4"> 899 <a href="mailto:[email protected]" class="hover:text-[#a2d032]">[email protected]</a> 900 </div> 901 <div class="text-sm text-gray-600 tech-font"> 902 Kabelik GmbH, Merbotogasse 58D<br> 903 2700 Wiener Neustadt<br> 904 AUSTRIA 905 </div> 906 <div class="mt-8 text-xs"> 907 <a href="legal.html" class="text-gray-500 hover:text-white transition underline">Privacy Policy & Legal 908 Notice</a> 909 </div> 910 </footer> 911 912 <!-- AIRCRAFT GALLERY --> 913 <section id="aircraft" class="py-20 px-6 md:px-20 border-t border-white/5"> 914 <div class="max-w-6xl mx-auto"> 915 <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest text-center">BEHIND THE SCENES</div> 916 <h2 class="text-4xl font-bold mb-12 text-center">AERIAL OPERATIONS & IMPRESSIONS</h2> 917 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 918 <div 919 class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative lg:col-span-2 h-64 md:h-80"> 920 <img src="assets/aircraft/01_aircraft_kabelik.webp" alt="Flight Operations" 921 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 922 </div> 923 <div 924 class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80"> 925 <img src="assets/aircraft/IMG_20140702_125323.webp" alt="Aircraft Pre-flight" 926 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 927 </div> 928 <div 929 class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80"> 930 <img src="assets/aircraft/IMG_4190.webp" alt="Aerial Mission" 931 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 932 </div> 933 <div 934 class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80"> 935 <img src="assets/aircraft/PXL_20250110_111320888.
935webp" alt="Aircraft Exterior" 936 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 937 </div> 938 <div 939 class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80"> 940 <img src="assets/aircraft/PXL_20250112_152612423.webp" alt="Aircraft Detailing" 941 class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105"> 942 </div> 943 </div> 944 </div> 945 </section> 946 947 </main> 948 949 <!-- COOKIE BANNER --> 950 <div id="cookie-banner" 951 class="fixed bottom-0 left-0 w-full z-[9999] p-6 translate-y-full transition-transform duration-500 flex justify-center pointer-events-none"> 952 <div 953 class="glass-panel p-6 md:p-8 w-full max-w-4xl pointer-events-auto border-t-2 border-[#a2d032] bg-[#050505]/95 shadow-2xl"> 954 <h3 class="text-xl font-bold mb-3 text-white">Privacy & Cookies</h3> 955 <p class="text-sm text-gray-400 mb-6 leading-relaxed"> 956 We use functional cookies to provide you with the best possible experience and continuously improve our 957 website. 958 Non-essential cookies or third-party tracking tools are only loaded with your active consent. 959 You can change your decision at any time. For more information, please read our 960 <a href="legal.html" class="text-[#a2d032] underline hover:text-white transition">Privacy Policy</a>. 961 </p> 962 <div class="flex flex-col sm:flex-row gap-4 justify-end"> 963 <button onclick="handleCookieConsent(false)" 964 class="px-6 py-2.5 rounded font-bold text-sm border border-white/20 text-white bg-white/5 hover:bg-white/15 transition text-center w-full sm:w-auto focus:outline-none"> 965 Essential Only (Reject) 966 </button> 967 <button onclick="handleCookieConsent(true)" 968 class="px-6 py-2.5 rounded font-bold text-sm border border-white/20 text-white bg-white/5 hover:bg-white/15 transition text-center w-full sm:w-auto focus:outline-none"> 969 Accept All 970 </button> 971 </div> 972 </div> 973 </div> 974 975
975<script> 976 document.addEventListener("DOMContentLoaded", () => { 977 const banner = document.getElementById("cookie-banner"); 978 const consent = localStorage.getItem("cookie_consent"); 979 980 if (!consent) { 981 setTimeout(() => { 982 banner.classList.remove("translate-y-full"); 983 }, 1000); 984 } else { 985 applyConsent(consent === "true"); 986 } 987 }); 988 989 function handleCookieConsent(accepted) { 990 localStorage.setItem("cookie_consent", accepted); 991 const banner = document.getElementById("cookie-banner"); 992 banner.classList.add("translate-y-full"); 993 applyConsent(accepted); 994 } 995 996 function applyConsent(accepted) { 997 if (accepted) { 998 console.log("Nicht-essenzielle Cookies und Scripte werden geladen..."); 999 // Hook to load non-essential scripts (e.g., analytics) 1000 } else { 1001 console.log("Nur essenzielle Cookies/Scripts sind aktiv."); 1002 } 1003 } 1004 </script>
1004 1005 1006 <!-- Three.js Logic for Background Animation --> 1007
1007<script> 1008 const scene = new THREE.Scene(); 1009 scene.fog = new THREE.FogExp2(0x050505, 0.002); 1010 1011 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 1012 const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); 1013 1014 renderer.setSize(window.innerWidth, window.innerHeight); 1015 document.getElementById('canvas-container').appendChild(renderer.domElement); 1016 1017 // CREATE PARTICLES (Simulating LiDAR Point Cloud) 1018 const geometry = new THREE.BufferGeometry(); 1019 const vertices = []; 1020 const colors = []; 1021 1022 const color1 = new THREE.Color(0xffffff); 1023 const color2 = new THREE.Color(0x999999); 1024 1025 for (let i = 0; i < 5000; i++) { 1026 const x = (Math.random() - 0.5) * 2000; 1027 const y = (Math.random() - 0.5) * 2000; 1028 const z = (Math.random() - 0.5) * 2000; 1029 vertices.push(x, y, z); 1030 1031 // Gradient color based on height (Y) 1032 const mixedColor = color1.clone().lerp(color2, Math.random()); 1033 colors.push(mixedColor.r, mixedColor.g, mixedColor.b); 1034 } 1035 1036 geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); 1037 geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); 1038 1039 const material = new THREE.PointsMaterial({ 1040 size: 3, 1041 vertexColors: true, 1042 transparent: true, 1043 opacity: 0.8 1044 }); 1045 1046 const starField = new THREE.Points(geometry, material); 1047 scene.add(starField); 1048 1049 camera.position.z = 100; 1050 1051 // ANIMATION LOOP 1052 let mouseX = 0; 1053 let mouseY = 0; 1054 1055 document.addEventListener('mousemove', (e) => { 1056 mouseX = e.clientX - window.innerWidth / 2; 1057 mouseY = e.clientY - window.innerHeight / 2; 1058 }); 1059 1060 function animate() { 1061 requestAnimationFrame(animate); 1062 1063 // Optimization: Pause rendering if scrolled past the hero section to save battery/CPU 1064 if (window.scrollY > window.innerHeight * 1.2) return; 1065 1066 // Gentle rotation 1067 starField.rotation.x += 0.0005; 1068 starField.rotation.y += 0.0005; 1069 1070 // Interactive movement 1071 camera.position.x += (mouseX * 0.05 - camera.position.x) * 0.05; 1072 camera.position.y += (-mouseY * 0.05 - camera.position.y) * 0.05; 1073 camera.lookAt(scene.position); 1074 1075 renderer.render(scene, camera); 1076 } 1077 1078 animate(); 1079 1080 // Handle Resize 1081 window.addEventListener('resize', () => { 1082 camera.aspect = window.innerWidth / window.innerHeight; 1083 camera.updateProjectionMatrix(); 1084 renderer.setSize(window.innerWidth, window.innerHeight); 1085 }); 1086 </script>
1086 1087 1088 <!-- Image Lightbox Modal --> 1089 <div id="image-lightbox" class="fixed inset-0 z-[10000] hidden bg-black/90 backdrop-blur-xl flex flex-col justify-center items-center p-4 opacity-0"> 1090 <!-- Close Button --> 1091 <button id="lightbox-close" class="absolute top-6 right-6 text-white/70 hover:text-[#a2d032] hover:scale-110 transition duration-300 z-50 p-2 focus:outline-none" aria-label="Close lightbox"> 1092 <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1093 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> 1094 </svg> 1095 </button> 1096 1097 <!-- Navigation Left Arrow --> 1098 <button id="lightbox-prev" class="absolute left-4 md:left-8 text-white/50 hover:text-[#a2d032] hover:scale-110 transition duration-300 z-50 p-3 bg-black/30 backdrop-blur-md rounded-full border border-white/10 hover:border-[#a2d032]/50 focus:outline-none" aria-label="Previous image"> 1099 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1100 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path> 1101 </svg> 1102 </button> 1103 1104 <!-- Image Container --> 1105 <div class="relative max-w-full max-h-[80vh] flex flex-col items-center justify-center"> 1106 <img id="lightbox-img" src="" alt="" class="max-w-full max-h-[75vh] object-contain rounded-lg shadow-2xl scale-95 border border-white/10"> 1107 </div> 1108 1109 <!-- Navigation Right Arrow --> 1110 <button id="lightbox-next" class="absolute right-4 md:right-8 text-white/50 hover:text-[#a2d032] hover:scale-110 transition duration-300 z-50 p-3 bg-black/30 backdrop-blur-md rounded-full border border-white/10 hover:border-[#a2d032]/50 focus:outline-none" aria-label="Next image"> 1111 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1112 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path> 1113 </svg> 1114 </button> 1115 1116 <!-- Caption / Info --> 1117 <div id="lightbox-caption-container" class="mt-6 text-center max-w-xl px-4 z-40"> 1118 <div id="lightbox-index" class="tech-font text-[#a2d032] text-[10px] tracking-widest uppercase mb-1">IMAGE 1 OF 10</div> 1119 <div id="lightbox-caption" class="text-sm font-medium text-gray-200 tracking-wide">Image Description</div> 1120 </div> 1121 </div> 1122 1123 <!-- Lightbox Script --> 1124
1124<script> 1125 document.addEventListener("DOMContentLoaded", () => { 1126 const lightbox = document.getElementById("image-lightbox"); 1127 const lightboxImg = document.getElementById("lightbox-img"); 1128 const lightboxCaption = document.getElementById("lightbox-caption"); 1129 const lightboxIndex = document.getElementById("lightbox-index"); 1130 const closeBtn = document.getElementById("lightbox-close"); 1131 const prevBtn = document.getElementById("lightbox-prev"); 1132 const nextBtn = document.getElementById("lightbox-next"); 1133 1134 // Select all content images in the sections (exclude logos or utility/template elements) 1135 const images = Array.from(document.querySelectorAll("main img, section img")).filter(img => { 1136 return !img.src.includes("logo_transparent") && !img.closest("nav"); 1137 }); 1138 1139 let currentIndex = 0; 1140 1141 // Add interactive zoom cursor and click listeners 1142 images.forEach((img, index) => { 1143 img.classList.add("cursor-zoom-in"); 1144 img.addEventListener("click", (e) => { 1145 e.stopPropagation(); 1146 openLightbox(index); 1147 }); 1148 }); 1149 1150 function openLightbox(index) { 1151 currentIndex = index; 1152 updateLightboxContent(); 1153 lightbox.classList.remove("hidden"); 1154 // Allow browser to render hidden state first, then transition opacity/scale 1155 setTimeout(() => { 1156 lightbox.classList.remove("opacity-0"); 1157 lightboxImg.classList.remove("scale-95"); 1158 }, 20); 1159 document.body.style.overflow = "hidden"; // Disable background scrolling 1160 } 1161 1162 function closeLightbox() { 1163 lightbox.classList.add("opacity-0"); 1164 lightboxImg.classList.add("scale-95"); 1165 setTimeout(() => { 1166 lightbox.classList.add("hidden"); 1167 document.body.style.overflow = ""; 1168 }, 300); 1169 } 1170 1171 function navigate(direction) { 1172 currentIndex = (currentIndex + direction + images.length) % images.length; 1173 1174 // Fade out/scale down the image, swap source, then fade in/scale up 1175 lightboxImg.style.opacity = "0"; 1176 lightboxImg.style.transform = "scale(0.95)"; 1177 1178 setTimeout(() => { 1179 updateLightboxContent(); 1180 lightboxImg.style.opacity = "1"; 1181 lightboxImg.style.transform = "scale(1)"; 1182 }, 150); 1183 } 1184 1185 function updateLightboxContent() { 1186 const img = images[currentIndex]; 1187 lightboxImg.src = img.src; 1188 lightboxImg.alt = img.alt; 1189 lightboxCaption.textContent = img.alt || "Aerial Operations Impression"; 1190 lightboxIndex.textContent = `IMAGE ${currentIndex + 1} OF ${images.length}`; 1191 } 1192 1193 closeBtn.addEventListener("click", closeLightbox); 1194 prevBtn.addEventListener("click", (e) => { 1195 e.stopPropagation(); 1196 navigate(-1); 1197 }); 1198 nextBtn.addEventListener("click", (e) => { 1199 e.stopPropagation(); 1200 navigate(1); 1201 }); 1202 1203 // Close when clicking outside the image container 1204 lightbox.addEventListener("click", (e) => { 1205 if (e.target === lightbox || e.target.id === "lightbox-img-container" || e.target === lightboxImg.parentElement) { 1206 closeLightbox(); 1207 } 1208 }); 1209 1210 // Keyboard support 1211 document.addEventListener("keydown", (e) => { 1212 if (lightbox.classList.contains("hidden")) return; 1213 1214 if (e.key === "Escape") { 1215 closeLightbox(); 1216 } else if (e.key === "ArrowLeft") { 1217 navigate(-1); 1218 } else if (e.key === "ArrowRight") { 1219 navigate(1); 1220 } 1221 }); 1222 }); 1223 </script>
1223 1224</body> 1225 1226</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.