Spaces:

spyderps5
/

undefined

Running

undefined / index.html

A detailed prompt for generating a high-tech dashboard view of the Iran-Pakistan border surveillance has been created. This prompt incorporates a multifaceted depiction of the border, surveillance technologies, and a sophisticated user interface for monitoring activities.

ef3764b verified 6 months ago

raw

history blame contribute delete

15 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>BorderVision 360° \| Real-time Border Monitoring</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap');

	.holographic {
	background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
	border: 1px solid rgba(0, 255, 255, 0.2);
	}

	.radar-scan {
	background: conic-gradient(from 0deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 255, 255, 0.8) 20%, rgba(0, 255, 255, 0.1) 40%);
	animation: radar 4s linear infinite;
	}

	@keyframes radar {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

	.pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	@keyframes pulse {
	50% { opacity: 0.5; }
	}
	</style>
	</head>
	<body class="bg-gray-900 text-cyan-100 font-mono" id="vanta-bg">
	<div class="container mx-auto px-4 py-8">
	<!-- Header -->
	<header class="flex justify-between items-center mb-8">
	<div class="flex items-center space-x-2">
	<i data-feather="eye" class="text-cyan-400"></i>
	<h1 class="text-2xl font-bold font-orbitron text-cyan-400">BorderVision 360°</h1>
	</div>
	<div class="flex items-center space-x-4">
	<div class="flex items-center space-x-2">
	<span class="text-xs">LIVE</span>
	<div class="w-3 h-3 rounded-full bg-red-500 pulse"></div>
	</div>
	<div class="text-sm">
	<span id="current-time" class="font-light"></span>
	</div>
	</div>
	</header>

	<!-- Main Dashboard -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Left Column -->
	<div class="space-y-6">
	<!-- Status Overview -->
	<div class="holographic rounded-lg p-4">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i data-feather="activity" class="mr-2"></i>
	System Status
	</h2>
	<div class="grid grid-cols-2 gap-4">
	<div class="bg-gray-800 bg-opacity-50 rounded p-3">
	<div class="text-xs text-gray-400">Drone Coverage</div>
	<div class="text-xl font-bold text-cyan-400">87%</div>
	<div class="h-1 mt-1 bg-gray-700 rounded-full">
	<div class="h-1 bg-cyan-400 rounded-full" style="width: 87%"></div>
	</div>
	</div>
	<div class="bg-gray-800 bg-opacity-50 rounded p-3">
	<div class="text-xs text-gray-400">Sensors Online</div>
	<div class="text-xl font-bold text-cyan-400">24/28</div>
	<div class="h-1 mt-1 bg-gray-700 rounded-full">
	<div class="h-1 bg-green-400 rounded-full" style="width: 85%"></div>
	</div>
	</div>
	<div class="bg-gray-800 bg-opacity-50 rounded p-3">
	<div class="text-xs text-gray-400">Patrol Status</div>
	<div class="text-xl font-bold text-cyan-400">Active</div>
	<div class="flex items-center mt-1">
	<div class="w-2 h-2 rounded-full bg-green-400 mr-1"></div>
	<div class="text-xs text-gray-400">All units operational</div>
	</div>
	</div>
	<div class="bg-gray-800 bg-opacity-50 rounded p-3">
	<div class="text-xs text-gray-400">Border Integrity</div>
	<div class="text-xl font-bold text-cyan-400">72%</div>
	<div class="h-1 mt-1 bg-gray-700 rounded-full">
	<div class="h-1 bg-yellow-400 rounded-full" style="width: 72%"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- Activity Feed -->
	<div class="holographic rounded-lg p-4">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i data-feather="list" class="mr-2"></i>
	Recent Activity
	</h2>
	<div class="space-y-3">
	<div class="flex items-start">
	<div class="mr-3 text-xs text-gray-400">14:23</div>
	<div>
	<div class="text-sm">Vehicle detected in Sector 7</div>
	<div class="text-xs text-gray-400">Zamyad pickup, moving northwest</div>
	</div>
	</div>
	<div class="flex items-start">
	<div class="mr-3 text-xs text-gray-400">14:07</div>
	<div>
	<div class="text-sm">Ground sensor triggered</div>
	<div class="text-xs text-gray-400">Possible foot traffic near Tower 12</div>
	</div>
	</div>
	<div class="flex items-start">
	<div class="mr-3 text-xs text-gray-400">13:52</div>
	<div>
	<div class="text-sm">Patrol unit arrival</div>
	<div class="text-xs text-gray-400">Unit Bravo-7 reached checkpoint</div>
	</div>
	</div>
	<div class="flex items-start">
	<div class="mr-3 text-xs text-gray-400">13:38</div>
	<div>
	<div class="text-sm">Drone deployment</div>
	<div class="text-xs text-gray-400">Recon UAV launched to Sector 4</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Center Column (Map) -->
	<div class="lg:col-span-2">
	<div class="holographic rounded-lg overflow-hidden">
	<div class="relative">
	<!-- Map Container -->
	<div class="h-96 bg-gray-800 relative">
	<img src="http://static.photos/technology/1200x630/42" alt="Border Map" class="w-full h-full object-cover opacity-40">

	<!-- Map Overlays -->
	<div class="absolute inset-0 p-4">
	<div class="relative h-full">
	<!-- Border Line -->
	<div class="absolute left-10 top-0 bottom-0 w-1 bg-red-500 bg-opacity-50"></div>

	<!-- Observation Towers -->
	<div class="absolute left-8 top-1/4">
	<div class="flex flex-col items-center">
	<div class="w-4 h-4 rounded-full bg-cyan-400 pulse"></div>
	<div class="text-xs mt-1">Tower 12</div>
	</div>
	</div>
	<div class="absolute left-8 top-3/4">
	<div class="flex flex-col items-center">
	<div class="w-4 h-4 rounded-full bg-cyan-400 pulse"></div>
	<div class="text-xs mt-1">Tower 7</div>
	</div>
	</div>

	<!-- Smuggling Routes -->
	<div class="absolute left-12 top-1/3 w-16 h-1 bg-yellow-500 bg-opacity-30 transform rotate-12"></div>
	<div class="absolute left-14 top-2/3 w-20 h-1 bg-yellow-500 bg-opacity-30 transform rotate-8"></div>

	<!-- Moving Vehicles -->
	<div class="absolute left-28 top-1/3 animate-pulse">
	<i data-feather="truck" class="text-blue-400 w-4 h-4"></i>
	</div>
	<div class="absolute left-24 top-2/3 animate-pulse">
	<i data-feather="truck" class="text-blue-400 w-4 h-4"></i>
	</div>

	<!-- Radar Animation -->
	<div class="absolute right-4 bottom-4 w-16 h-16 rounded-full radar-scan flex items-center justify-center">
	<div class="w-12 h-12 rounded-full bg-gray-800 bg-opacity-90"></div>
	</div>

	<!-- Drone Feed -->
	<div class="absolute right-4 top-4 w-32 h-24 bg-black bg-opacity-70 border border-cyan-400 rounded overflow-hidden">
	<div class="absolute top-0 left-0 right-0 bg-cyan-900 bg-opacity-50 text-center py-0.5 text-xs">
	Drone 3 Feed
	</div>
	<div class="h-full flex items-center justify-center">
	<i data-feather="wifi" class="text-gray-600 animate-pulse"></i>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Map Controls -->
	<div class="bg-gray-800 bg-opacity-50 p-3 flex justify-between items-center">
	<div class="flex space-x-2">
	<button class="p-1 rounded bg-gray-700 hover:bg-gray-600">
	<i data-feather="zoom-in" class="w-4 h-4"></i>
	</button>
	<button class="p-1 rounded bg-gray-700 hover:bg-gray-600">
	<i data-feather="zoom-out" class="w-4 h-4"></i>
	</button>
	<button class="p-1 rounded bg-gray-700 hover:bg-gray-600">
	<i data-feather="maximize" class="w-4 h-4"></i>
	</button>
	</div>
	<div class="text-sm">
	<span class="text-gray-400">Sector:</span>
	<span class="font-medium">7-East</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Metrics Row -->
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
	<div class="holographic rounded-lg p-4">
	<div class="flex justify-between">
	<div>
	<div class="text-sm text-gray-400">Vehicles Crossed</div>
	<div class="text-2xl font-bold">14</div>
	</div>
	<div class="text-green-400">
	<i data-feather="trending-up" class="w-6 h-6"></i>
	</div>
	</div>
	<div class="mt-2 text-xs text-gray-400">Last 24 hours</div>
	</div>
	<div class="holographic rounded-lg p-4">
	<div class="flex justify-between">
	<div>
	<div class="text-sm text-gray-400">Interceptions</div>
	<div class="text-2xl font-bold">9</div>
	</div>
	<div class="text-yellow-400">
	<i data-feather="alert-triangle" class="w-6 h-6"></i>
	</div>
	</div>
	<div class="mt-2 text-xs text-gray-400">64% success rate</div>
	</div>
	<div class="holographic rounded-lg p-4">
	<div class="flex justify-between">
	<div>
	<div class="text-sm text-gray-400">Active Patrols</div>
	<div class="text-2xl font-bold">6</div>
	</div>
	<div class="text-cyan-400">
	<i data-feather="users" class="w-6 h-6"></i>
	</div>
	</div>
	<div class="mt-2 text-xs text-gray-400">12 personnel active</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Vanta.js Background
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0x00ffff,
	backgroundColor: 0x0,
	size: 0.7
	});

	// Update current time
	function updateTime() {
	const
	</body>
	</html>