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.
Browse filesA High-Tech Command Center for Border Security
The generated image will feature a sophisticated dashboard providing a comprehensive overview of the Iran-Pakistan border. The map, forming the central element of the dashboard, will display the border on the far left, featuring a concrete fence with intermittent breaches. Along this border, small smuggling routes will be visible, with discreet vehicle movement along these paths.
The dashboard will be equipped with various data visualizations, including a counter for "Vehicles Crossed" and live updates on "Soldier Patrols." The user interface will have a modern, dark theme with holographic elements, giving it a futuristic feel.
Surveillance and Monitoring in Action
To enhance the sense of active surveillance, the image will include a satellite view integrated into the main map, providing a broader perspective of the border region. A drone will be depicted in the upper right corner, transmitting a live video feed to a smaller window on the dashboard.
Observation towers equipped with radar dishes will be positioned along the border on the map. These towers will have visible radar animations, indicating active scanning of the area. Additionally, small icons representing soldiers will be visible at various points along the border, with status indicators to show they are on active patrol. To complete the scene, icons for ground sensors and other surveillance equipment will be placed at strategic locations.
Smuggling Activities and Vehicle Details
The smuggling routes will appear as rough, unpaved tracks branching off from the main border. Along these routes, small, older model pickup trucks, such as the blue Zamyad pickups commonly used for smuggling in the region, will be shown moving discreetly.[1][2][3] Some of these vehicles will be depicted carrying barrels in their beds.
This detailed prompt aims to generate a visually rich and informative website that encapsulates the complex and technologically advanced nature of modern border surveillance.
- README.md +9 -5
- index.html +282 -19
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: undefined
|
| 3 |
+
colorFrom: red
|
| 4 |
+
colorTo: gray
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
index.html
CHANGED
|
@@ -1,19 +1,282 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>BorderVision 360° | Real-time Border Monitoring</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap');
|
| 13 |
+
|
| 14 |
+
.holographic {
|
| 15 |
+
background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
|
| 16 |
+
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
|
| 17 |
+
border: 1px solid rgba(0, 255, 255, 0.2);
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
.radar-scan {
|
| 21 |
+
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%);
|
| 22 |
+
animation: radar 4s linear infinite;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
@keyframes radar {
|
| 26 |
+
from { transform: rotate(0deg); }
|
| 27 |
+
to { transform: rotate(360deg); }
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.pulse {
|
| 31 |
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
@keyframes pulse {
|
| 35 |
+
50% { opacity: 0.5; }
|
| 36 |
+
}
|
| 37 |
+
</style>
|
| 38 |
+
</head>
|
| 39 |
+
<body class="bg-gray-900 text-cyan-100 font-mono" id="vanta-bg">
|
| 40 |
+
<div class="container mx-auto px-4 py-8">
|
| 41 |
+
<!-- Header -->
|
| 42 |
+
<header class="flex justify-between items-center mb-8">
|
| 43 |
+
<div class="flex items-center space-x-2">
|
| 44 |
+
<i data-feather="eye" class="text-cyan-400"></i>
|
| 45 |
+
<h1 class="text-2xl font-bold font-orbitron text-cyan-400">BorderVision 360°</h1>
|
| 46 |
+
</div>
|
| 47 |
+
<div class="flex items-center space-x-4">
|
| 48 |
+
<div class="flex items-center space-x-2">
|
| 49 |
+
<span class="text-xs">LIVE</span>
|
| 50 |
+
<div class="w-3 h-3 rounded-full bg-red-500 pulse"></div>
|
| 51 |
+
</div>
|
| 52 |
+
<div class="text-sm">
|
| 53 |
+
<span id="current-time" class="font-light"></span>
|
| 54 |
+
</div>
|
| 55 |
+
</div>
|
| 56 |
+
</header>
|
| 57 |
+
|
| 58 |
+
<!-- Main Dashboard -->
|
| 59 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
| 60 |
+
<!-- Left Column -->
|
| 61 |
+
<div class="space-y-6">
|
| 62 |
+
<!-- Status Overview -->
|
| 63 |
+
<div class="holographic rounded-lg p-4">
|
| 64 |
+
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
| 65 |
+
<i data-feather="activity" class="mr-2"></i>
|
| 66 |
+
System Status
|
| 67 |
+
</h2>
|
| 68 |
+
<div class="grid grid-cols-2 gap-4">
|
| 69 |
+
<div class="bg-gray-800 bg-opacity-50 rounded p-3">
|
| 70 |
+
<div class="text-xs text-gray-400">Drone Coverage</div>
|
| 71 |
+
<div class="text-xl font-bold text-cyan-400">87%</div>
|
| 72 |
+
<div class="h-1 mt-1 bg-gray-700 rounded-full">
|
| 73 |
+
<div class="h-1 bg-cyan-400 rounded-full" style="width: 87%"></div>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
<div class="bg-gray-800 bg-opacity-50 rounded p-3">
|
| 77 |
+
<div class="text-xs text-gray-400">Sensors Online</div>
|
| 78 |
+
<div class="text-xl font-bold text-cyan-400">24/28</div>
|
| 79 |
+
<div class="h-1 mt-1 bg-gray-700 rounded-full">
|
| 80 |
+
<div class="h-1 bg-green-400 rounded-full" style="width: 85%"></div>
|
| 81 |
+
</div>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="bg-gray-800 bg-opacity-50 rounded p-3">
|
| 84 |
+
<div class="text-xs text-gray-400">Patrol Status</div>
|
| 85 |
+
<div class="text-xl font-bold text-cyan-400">Active</div>
|
| 86 |
+
<div class="flex items-center mt-1">
|
| 87 |
+
<div class="w-2 h-2 rounded-full bg-green-400 mr-1"></div>
|
| 88 |
+
<div class="text-xs text-gray-400">All units operational</div>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="bg-gray-800 bg-opacity-50 rounded p-3">
|
| 92 |
+
<div class="text-xs text-gray-400">Border Integrity</div>
|
| 93 |
+
<div class="text-xl font-bold text-cyan-400">72%</div>
|
| 94 |
+
<div class="h-1 mt-1 bg-gray-700 rounded-full">
|
| 95 |
+
<div class="h-1 bg-yellow-400 rounded-full" style="width: 72%"></div>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
|
| 101 |
+
<!-- Activity Feed -->
|
| 102 |
+
<div class="holographic rounded-lg p-4">
|
| 103 |
+
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
| 104 |
+
<i data-feather="list" class="mr-2"></i>
|
| 105 |
+
Recent Activity
|
| 106 |
+
</h2>
|
| 107 |
+
<div class="space-y-3">
|
| 108 |
+
<div class="flex items-start">
|
| 109 |
+
<div class="mr-3 text-xs text-gray-400">14:23</div>
|
| 110 |
+
<div>
|
| 111 |
+
<div class="text-sm">Vehicle detected in Sector 7</div>
|
| 112 |
+
<div class="text-xs text-gray-400">Zamyad pickup, moving northwest</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="flex items-start">
|
| 116 |
+
<div class="mr-3 text-xs text-gray-400">14:07</div>
|
| 117 |
+
<div>
|
| 118 |
+
<div class="text-sm">Ground sensor triggered</div>
|
| 119 |
+
<div class="text-xs text-gray-400">Possible foot traffic near Tower 12</div>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
<div class="flex items-start">
|
| 123 |
+
<div class="mr-3 text-xs text-gray-400">13:52</div>
|
| 124 |
+
<div>
|
| 125 |
+
<div class="text-sm">Patrol unit arrival</div>
|
| 126 |
+
<div class="text-xs text-gray-400">Unit Bravo-7 reached checkpoint</div>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
<div class="flex items-start">
|
| 130 |
+
<div class="mr-3 text-xs text-gray-400">13:38</div>
|
| 131 |
+
<div>
|
| 132 |
+
<div class="text-sm">Drone deployment</div>
|
| 133 |
+
<div class="text-xs text-gray-400">Recon UAV launched to Sector 4</div>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</div>
|
| 139 |
+
|
| 140 |
+
<!-- Center Column (Map) -->
|
| 141 |
+
<div class="lg:col-span-2">
|
| 142 |
+
<div class="holographic rounded-lg overflow-hidden">
|
| 143 |
+
<div class="relative">
|
| 144 |
+
<!-- Map Container -->
|
| 145 |
+
<div class="h-96 bg-gray-800 relative">
|
| 146 |
+
<img src="http://static.photos/technology/1200x630/42" alt="Border Map" class="w-full h-full object-cover opacity-40">
|
| 147 |
+
|
| 148 |
+
<!-- Map Overlays -->
|
| 149 |
+
<div class="absolute inset-0 p-4">
|
| 150 |
+
<div class="relative h-full">
|
| 151 |
+
<!-- Border Line -->
|
| 152 |
+
<div class="absolute left-10 top-0 bottom-0 w-1 bg-red-500 bg-opacity-50"></div>
|
| 153 |
+
|
| 154 |
+
<!-- Observation Towers -->
|
| 155 |
+
<div class="absolute left-8 top-1/4">
|
| 156 |
+
<div class="flex flex-col items-center">
|
| 157 |
+
<div class="w-4 h-4 rounded-full bg-cyan-400 pulse"></div>
|
| 158 |
+
<div class="text-xs mt-1">Tower 12</div>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
<div class="absolute left-8 top-3/4">
|
| 162 |
+
<div class="flex flex-col items-center">
|
| 163 |
+
<div class="w-4 h-4 rounded-full bg-cyan-400 pulse"></div>
|
| 164 |
+
<div class="text-xs mt-1">Tower 7</div>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
|
| 168 |
+
<!-- Smuggling Routes -->
|
| 169 |
+
<div class="absolute left-12 top-1/3 w-16 h-1 bg-yellow-500 bg-opacity-30 transform rotate-12"></div>
|
| 170 |
+
<div class="absolute left-14 top-2/3 w-20 h-1 bg-yellow-500 bg-opacity-30 transform rotate-8"></div>
|
| 171 |
+
|
| 172 |
+
<!-- Moving Vehicles -->
|
| 173 |
+
<div class="absolute left-28 top-1/3 animate-pulse">
|
| 174 |
+
<i data-feather="truck" class="text-blue-400 w-4 h-4"></i>
|
| 175 |
+
</div>
|
| 176 |
+
<div class="absolute left-24 top-2/3 animate-pulse">
|
| 177 |
+
<i data-feather="truck" class="text-blue-400 w-4 h-4"></i>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<!-- Radar Animation -->
|
| 181 |
+
<div class="absolute right-4 bottom-4 w-16 h-16 rounded-full radar-scan flex items-center justify-center">
|
| 182 |
+
<div class="w-12 h-12 rounded-full bg-gray-800 bg-opacity-90"></div>
|
| 183 |
+
</div>
|
| 184 |
+
|
| 185 |
+
<!-- Drone Feed -->
|
| 186 |
+
<div class="absolute right-4 top-4 w-32 h-24 bg-black bg-opacity-70 border border-cyan-400 rounded overflow-hidden">
|
| 187 |
+
<div class="absolute top-0 left-0 right-0 bg-cyan-900 bg-opacity-50 text-center py-0.5 text-xs">
|
| 188 |
+
Drone 3 Feed
|
| 189 |
+
</div>
|
| 190 |
+
<div class="h-full flex items-center justify-center">
|
| 191 |
+
<i data-feather="wifi" class="text-gray-600 animate-pulse"></i>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<!-- Map Controls -->
|
| 199 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 flex justify-between items-center">
|
| 200 |
+
<div class="flex space-x-2">
|
| 201 |
+
<button class="p-1 rounded bg-gray-700 hover:bg-gray-600">
|
| 202 |
+
<i data-feather="zoom-in" class="w-4 h-4"></i>
|
| 203 |
+
</button>
|
| 204 |
+
<button class="p-1 rounded bg-gray-700 hover:bg-gray-600">
|
| 205 |
+
<i data-feather="zoom-out" class="w-4 h-4"></i>
|
| 206 |
+
</button>
|
| 207 |
+
<button class="p-1 rounded bg-gray-700 hover:bg-gray-600">
|
| 208 |
+
<i data-feather="maximize" class="w-4 h-4"></i>
|
| 209 |
+
</button>
|
| 210 |
+
</div>
|
| 211 |
+
<div class="text-sm">
|
| 212 |
+
<span class="text-gray-400">Sector:</span>
|
| 213 |
+
<span class="font-medium">7-East</span>
|
| 214 |
+
</div>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<!-- Metrics Row -->
|
| 220 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
| 221 |
+
<div class="holographic rounded-lg p-4">
|
| 222 |
+
<div class="flex justify-between">
|
| 223 |
+
<div>
|
| 224 |
+
<div class="text-sm text-gray-400">Vehicles Crossed</div>
|
| 225 |
+
<div class="text-2xl font-bold">14</div>
|
| 226 |
+
</div>
|
| 227 |
+
<div class="text-green-400">
|
| 228 |
+
<i data-feather="trending-up" class="w-6 h-6"></i>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
<div class="mt-2 text-xs text-gray-400">Last 24 hours</div>
|
| 232 |
+
</div>
|
| 233 |
+
<div class="holographic rounded-lg p-4">
|
| 234 |
+
<div class="flex justify-between">
|
| 235 |
+
<div>
|
| 236 |
+
<div class="text-sm text-gray-400">Interceptions</div>
|
| 237 |
+
<div class="text-2xl font-bold">9</div>
|
| 238 |
+
</div>
|
| 239 |
+
<div class="text-yellow-400">
|
| 240 |
+
<i data-feather="alert-triangle" class="w-6 h-6"></i>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="mt-2 text-xs text-gray-400">64% success rate</div>
|
| 244 |
+
</div>
|
| 245 |
+
<div class="holographic rounded-lg p-4">
|
| 246 |
+
<div class="flex justify-between">
|
| 247 |
+
<div>
|
| 248 |
+
<div class="text-sm text-gray-400">Active Patrols</div>
|
| 249 |
+
<div class="text-2xl font-bold">6</div>
|
| 250 |
+
</div>
|
| 251 |
+
<div class="text-cyan-400">
|
| 252 |
+
<i data-feather="users" class="w-6 h-6"></i>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
<div class="mt-2 text-xs text-gray-400">12 personnel active</div>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
|
| 262 |
+
<script>
|
| 263 |
+
// Vanta.js Background
|
| 264 |
+
VANTA.GLOBE({
|
| 265 |
+
el: "#vanta-bg",
|
| 266 |
+
mouseControls: true,
|
| 267 |
+
touchControls: true,
|
| 268 |
+
gyroControls: false,
|
| 269 |
+
minHeight: 200.00,
|
| 270 |
+
minWidth: 200.00,
|
| 271 |
+
scale: 1.00,
|
| 272 |
+
scaleMobile: 1.00,
|
| 273 |
+
color: 0x00ffff,
|
| 274 |
+
backgroundColor: 0x0,
|
| 275 |
+
size: 0.7
|
| 276 |
+
});
|
| 277 |
+
|
| 278 |
+
// Update current time
|
| 279 |
+
function updateTime() {
|
| 280 |
+
const
|
| 281 |
+
</body>
|
| 282 |
+
</html>
|