Hugging Face's logo

Spaces:
privateuserh
/
privateuserh-uaphe-vbeta1-03
Running

App Files Community
privateuserh-uaphe-vbeta1-03 / index.html
privateuserh's picture
privateuserh
Add 3 files
129c9f8 verified
raw
history blame contribute delete
43 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UAP Pulse - Concise UFO News</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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
<!-- Three.js for 3D visualization -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.post-card {
background: linear-gradient(145deg, #1e293b, #0f172a);
border-left: 3px solid #3b82f6;
transition: transform 0.2s;
}
.post-card:hover {
transform: translateY(-2px);
}
.nav-item {
position: relative;
}
.nav-item::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #3b82f6;
transition: width 0.3s;
}
.nav-item:hover::after {
width: 100%;
}
.typewriter {
overflow: hidden;
border-right: 2px solid #3b82f6;
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #3b82f6 }
}
.glow {
text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}
/* UAP Scanner Window */
.scanner-window {
position: relative;
width: 100%;
height: 400px;
background-color: #000;
border: 2px solid #3b82f6;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.scanner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(transparent 70%, rgba(59, 130, 246, 0.1) 100%);
pointer-events: none;
}
.scanner-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.5;
}
.scanner-crosshair {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border: 2px solid rgba(255, 0, 0, 0.7);
border-radius: 50%;
}
.scanner-crosshair::before, .scanner-crosshair::after {
content: '';
position: absolute;
background-color: rgba(255, 0, 0, 0.7);
}
.scanner-crosshair::before {
width: 2px;
height: 10px;
top: -12px;
left: 50%;
transform: translateX(-50%);
}
.scanner-crosshair::after {
width: 10px;
height: 2px;
top: 50%;
left: -12px;
transform: translateY(-50%);
}
.scanner-coordinates {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 4px;
font-family: monospace;
color: #3b82f6;
}
.scanner-controls {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
gap: 10px;
}
.scanner-btn {
background-color: rgba(59, 130, 246, 0.7);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.scanner-btn:hover {
background-color: rgba(59, 130, 246, 1);
transform: scale(1.1);
}
.scanner-btn.active {
background-color: rgba(239, 68, 68, 0.7);
}
.scanner-btn.active:hover {
background-color: rgba(239, 68, 68, 1);
}
.uap-marker {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px red;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.uap-info {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid #3b82f6;
border-radius: 4px;
padding: 5px;
color: white;
font-size: 12px;
pointer-events: none;
transform: translate(15px, -50%);
min-width: 120px;
display: none;
}
.uap-info::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent #3b82f6 transparent transparent;
}
/* 3D Viewer */
.viewer-3d {
width: 100%;
height: 400px;
background-color: #000;
border: 2px solid #3b82f6;
border-radius: 8px;
margin-top: 20px;
position: relative;
}
.viewer-controls {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 100;
display: flex;
gap: 10px;
}
.atmosphere-levels {
position: absolute;
right: 10px;
top: 10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 4px;
color: white;
font-size: 12px;
z-index: 100;
}
.atmosphere-level {
margin-bottom: 5px;
padding-left: 15px;
position: relative;
}
.atmosphere-level::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
}
.troposphere::before { background-color: #3b82f6; }
.stratosphere::before { background-color: #10b981; }
.mesosphere::before { background-color: #f59e0b; }
.thermosphere::before { background-color: #ef4444; }
.exosphere::before { background-color: #8b5cf6; }
/* Shape icons */
.shape-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid transparent;
position: relative;
}
.triangle::before {
content: '';
position: absolute;
top: 5px;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid white;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}
.triangle::after {
content: '';
position: absolute;
top: 6px;
left: -18px;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-bottom: 32px solid #1e293b;
}
/* Add other shape styles from original code here */
/* Add all other existing styles from original code here */
</style>
</head>
<body class="min-h-screen">
<!-- Header -->
<header class="bg-gradient-to-r from-blue-900 to-slate-900 shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-ufo text-3xl text-blue-400 mr-3"></i>
<h1 class="text-2xl md:text-3xl font-bold text-white">
<span class="typewriter glow">UAP PULSE</span>
</h1>
</div>
<nav class="flex space-x-6">
<a href="#" class="nav-item text-blue-300 hover:text-white py-2">Latest</a>
<a href="#" class="nav-item text-blue-300 hover:text-white py-2">Reports</a>
<a href="#" class="nav-item text-blue-300 hover:text-white py-2">History</a>
<a href="#" class="nav-item text-blue-300 hover:text-white py-2">Resources</a>
</nav>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- UAP Scanner Section -->
<section class="mb-12">
<h2 class="text-xl font-semibold text-white mb-4 flex items-center">
<i class="fas fa-satellite-dish text-blue-400 mr-2"></i> Live UAP Scanner
</h2>
<div class="scanner-window" id="scannerWindow">
<div class="scanner-grid"></div>
<div class="scanner-overlay"></div>
<div class="scanner-crosshair"></div>
<!-- UAP markers will be added here dynamically -->
<div class="scanner-coordinates" id="scannerCoords">
Lat: 0.0000° | Long: 0.0000° | Alt: 0m
</div>
<div class="scanner-controls">
<button class="scanner-btn" id="startScanner" title="Start Scanner">
<i class="fas fa-play"></i>
</button>
<button class="scanner-btn" id="stopScanner" title="Stop Scanner">
<i class="fas fa-stop"></i>
</button>
<button class="scanner-btn" id="captureUAP" title="Capture UAP">
<i class="fas fa-camera"></i>
</button>
</div>
<video id="scannerVideo" autoplay muted playsinline style="display: none;"></video>
<canvas id="scannerCanvas" style="display: none;"></canvas>
</div>
<!-- 3D Viewer -->
<div class="viewer-3d" id="viewer3d">
<div class="viewer-controls">
<button class="scanner-btn" id="resetView" title="Reset View">
<i class="fas fa-crosshairs"></i>
</button>
<button class="scanner-btn" id="toggleOrbit" title="Toggle Orbit Controls">
<i class="fas fa-globe"></i>
</button>
</div>
<div class="atmosphere-levels">
<div class="atmosphere-level troposphere">Troposphere (0-12km)</div>
<div class="atmosphere-level stratosphere">Stratosphere (12-50km)</div>
<div class="atmosphere-level mesosphere">Mesosphere (50-85km)</div>
<div class="atmosphere-level thermosphere">Thermosphere (85-600km)</div>
<div class="atmosphere-level exosphere">Exosphere (600km+)</div>
</div>
</div>
<!-- Detected UAPs List -->
<div class="mt-6 bg-slate-800/50 rounded-lg p-4 border border-slate-700">
<h3 class="font-medium text-white mb-3 flex items-center">
<i class="fas fa-list-ul text-blue-400 mr-2"></i> Detected UAPs
</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-slate-700">
<thead>
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">ID</th>
<th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Shape</th>
<th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Coordinates</th>
<th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Altitude</th>
<th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Atmosphere</th>
<th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="uapTableBody" class="divide-y divide-slate-700">
<!-- UAP entries will be added here dynamically -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Rest of the original content sections -->
<!-- Featured Post -->
<section class="mb-12">
<div class="bg-gradient-to-br from-blue-900/50 to-slate-900/50 rounded-xl p-6 shadow-xl border border-blue-800/30">
<div class="flex items-center mb-4">
<span class="bg-blue-500 text-white text-xs font-semibold px-2.5 py-0.5 rounded">BREAKING</span>
<span class="text-blue-300 text-sm ml-2">June 2024</span>
</div>
<h2 class="text-xl md:text-2xl font-bold text-white mb-3">Pentagon confirms new UAP footage from military pilots</h2>
<p class="text-blue-100 mb-4">"The footage shows unidentified objects exhibiting flight characteristics beyond known technology" - DoD spokesperson. Analysis ongoing.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-blue-300">Source: Defense.gov</span>
<button class="text-blue-400 hover:text-blue-200 text-sm flex items-center" onclick="generateQR('Pentagon confirms new UAP footage from military pilots', 'https://uap-pulse.example.com/posts/2024-pentagon-footage')">
<i class="fas fa-qrcode mr-1"></i> QR Code
</button>
</div>
</div>
</section>
<!-- Include all other original sections here -->
</main>
<!-- Footer -->
<footer class="bg-slate-900 mt-16 py-8 border-t border-slate-800">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center">
<i class="fas fa-ufo text-2xl text-blue-400 mr-2"></i>
<span class="text-xl font-bold text-white">UAP PULSE</span>
</div>
<p class="text-slate-400 text-sm mt-1">Concise updates on unidentified aerial phenomena</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-slate-400 hover:text-blue-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-slate-400 hover:text-blue-300">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="text-slate-400 hover:text-blue-300">
<i class="fab fa-reddit"></i>
</a>
<a href="#" class="text-slate-400 hover:text-blue-300">
<i class="fas fa-rss"></i>
</a>
</div>
</div>
<div class="border-t border-slate-800 mt-6 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-slate-500 text-sm mb-4 md:mb-0">© 2025 UAP Pulse. All rights reserved. Sponsored by SM+</p>
<div class="flex space-x-4">
<a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Privacy</a>
<a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Terms</a>
<a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Contact</a>
<a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Submit Report</a>
</div>
</div>
</div>
</footer>
<!-- Include all original modals and popups here -->
<script>
// UAP Scanner and 3D Viewer functionality
document.addEventListener('DOMContentLoaded', function() {
// Scanner variables
const scannerWindow = document.getElementById('scannerWindow');
const scannerVideo = document.getElementById('scannerVideo');
const scannerCanvas = document.getElementById('scannerCanvas');
const scannerCoords = document.getElementById('scannerCoords');
const startScannerBtn = document.getElementById('startScanner');
const stopScannerBtn = document.getElementById('stopScanner');
const captureUAPBtn = document.getElementById('captureUAP');
const uapTableBody = document.getElementById('uapTableBody');
// 3D Viewer variables
const viewer3d = document.getElementById('viewer3d');
const resetViewBtn = document.getElementById('resetView');
const toggleOrbitBtn = document.getElementById('toggleOrbit');
// Three.js variables
let scene, camera, renderer, controls;
let uapObjects = [];
let orbitEnabled = true;
// UAP detection variables
let detectedUAPs = [];
let scannerActive = false;
let scanInterval;
let frameCount = 0;
// Initialize 3D viewer
function init3DViewer() {
// Create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// Create camera
camera = new THREE.PerspectiveCamera(75, viewer3d.clientWidth / viewer3d.clientHeight, 0.1, 1000);
camera.position.z = 50;
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(viewer3d.clientWidth, viewer3d.clientHeight);
viewer3d.appendChild(renderer.domElement);
// Add controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
// Add ambient light
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// Add directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// Add Earth sphere
const geometry = new THREE.SphereGeometry(15, 32, 32);
const material = new THREE.MeshPhongMaterial({
color: 0x3b82f6,
specular: 0x111111,
shininess: 30
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
// Add atmosphere levels as transparent spheres
const addAtmosphereLayer = (radius, color, opacity) => {
const layerGeometry = new THREE.SphereGeometry(radius, 32, 32);
const layerMaterial = new THREE.MeshBasicMaterial({
color: color,
side: THREE.BackSide,
transparent: true,
opacity: opacity
});
const layer = new THREE.Mesh(layerGeometry, layerMaterial);
scene.add(layer);
};
// Add atmosphere layers (scaled down for visualization)
addAtmosphereLayer(15.5, 0x3b82f6, 0.2); // Troposphere
addAtmosphereLayer(16, 0x10b981, 0.15); // Stratosphere
addAtmosphereLayer(16.5, 0xf59e0b, 0.1); // Mesosphere
addAtmosphereLayer(17.5, 0xef4444, 0.08); // Thermosphere
addAtmosphereLayer(20, 0x8b5cf6, 0.05); // Exosphere
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = viewer3d.clientWidth / viewer3d.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(viewer3d.clientWidth, viewer3d.clientHeight);
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
if (orbitEnabled) {
controls.update();
}
renderer.render(scene, camera);
}
animate();
}
// Initialize scanner
function initScanner() {
// Set up scanner buttons
startScannerBtn.addEventListener('click', startScanner);
stopScannerBtn.addEventListener('click', stopScanner);
captureUAPBtn.addEventListener('click', captureUAP);
// Set up 3D viewer buttons
resetViewBtn.addEventListener('click', resetView);
toggleOrbitBtn.addEventListener('click', toggleOrbitControls);
// Initialize 3D viewer
init3DViewer();
}
// Start scanner
function startScanner() {
if (scannerActive) return;
// Request camera access
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
scannerVideo.srcObject = stream;
scannerVideo.style.display = 'block';
scannerActive = true;
startScannerBtn.classList.add('active');
// Start detection loop
scanInterval = setInterval(detectUAPs, 100);
})
.catch(function(err) {
console.error("Error accessing camera: ", err);
alert("Could not access camera. Please ensure you've granted camera permissions.");
});
}
// Stop scanner
function stopScanner() {
if (!scannerActive) return;
clearInterval(scanInterval);
const stream = scannerVideo.srcObject;
const tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
scannerVideo.srcObject = null;
scannerVideo.style.display = 'none';
scannerActive = false;
startScannerBtn.classList.remove('active');
// Clear any existing UAP markers
clearUAPMarkers();
}
// Detect UAPs in video feed (simulated)
function detectUAPs() {
if (!scannerActive) return;
frameCount++;
// Simulate UAP detection (in a real app, this would use computer vision)
if (frameCount % 30 === 0) {
// Random chance to detect a UAP
if (Math.random() > 0.7) {
const uapId = 'UAP-' + Date.now().toString().slice(-4);
const shapes = ['triangle', 'circle', 'square', 'cylinder', 'chevron', 'tictac'];
const shape = shapes[Math.floor(Math.random() * shapes.length)];
// Random position in scanner window
const x = Math.random() * 80 + 10; // 10-90%
const y = Math.random() * 80 + 10; // 10-90%
// Random altitude (0-1000km)
const altitude = Math.random() * 1000;
// Determine atmosphere layer
let atmosphere, atmosphereColor;
if (altitude < 12) {
atmosphere = 'Troposphere';
atmosphereColor = '#3b82f6';
} else if (altitude < 50) {
atmosphere = 'Stratosphere';
atmosphereColor = '#10b981';
} else if (altitude < 85) {
atmosphere = 'Mesosphere';
atmosphereColor = '#f59e0b';
} else if (altitude < 600) {
atmosphere = 'Thermosphere';
atmosphereColor = '#ef4444';
} else {
atmosphere = 'Exosphere';
atmosphereColor = '#8b5cf6';
}
// Generate random coordinates near user's location (simulated)
const lat = (Math.random() * 2 - 1) * 5 + 40; // ~40°N ±5°
const long = (Math.random() * 2 - 1) * 5 + (-70); // ~70°W ±5°
// Create UAP object
const uap = {
id: uapId,
shape: shape,
x: x,
y: y,
lat: lat,
long: long,
altitude: altitude.toFixed(2),
atmosphere: atmosphere,
atmosphereColor: atmosphereColor,
timestamp: new Date().toLocaleTimeString()
};
detectedUAPs.push(uap);
addUAPMarker(uap);
addUAPToTable(uap);
addUAPTo3DViewer(uap);
// Update coordinates display
scannerCoords.textContent = `Lat: ${lat.toFixed(4)}° | Long: ${long.toFixed(4)}° | Alt: ${altitude.toFixed(2)}km | ${atmosphere}`;
}
}
// Simulate movement of existing UAPs
detectedUAPs.forEach(uap => {
// Small random movement
uap.x += (Math.random() - 0.5) * 0.5;
uap.y += (Math.random() - 0.5) * 0.5;
// Update marker position
const marker = document.querySelector(`.uap-marker[data-id="${uap.id}"]`);
if (marker) {
marker.style.left = `${uap.x}%`;
marker.style.top = `${uap.y}%`;
}
// Update 3D position
updateUAPIn3DViewer(uap);
});
}
// Add UAP marker to scanner view
function addUAPMarker(uap) {
clearUAPMarkers(); // Clear previous markers for demo purposes
const marker = document.createElement('div');
marker.className = 'uap-marker';
marker.dataset.id = uap.id;
marker.style.left = `${uap.x}%`;
marker.style.top = `${uap.y}%`;
marker.style.backgroundColor = uap.atmosphereColor;
marker.style.boxShadow = `0 0 10px ${uap.atmosphereColor}`;
// Add info tooltip
const info = document.createElement('div');
info.className = 'uap-info';
info.innerHTML = `
<strong>${uap.id}</strong><br>
Shape: ${uap.shape}<br>
Alt: ${uap.altitude}km<br>
${uap.atmosphere}
`;
marker.appendChild(info);
// Show info on hover
marker.addEventListener('mouseenter', () => {
info.style.display = 'block';
});
marker.addEventListener('mouseleave', () => {
info.style.display = 'none';
});
scannerWindow.appendChild(marker);
}
// Clear all UAP markers
function clearUAPMarkers() {
document.querySelectorAll('.uap-marker').forEach(marker => {
marker.remove();
});
}
// Add UAP to table
function addUAPToTable(uap) {
const row = document.createElement('tr');
row.className = 'hover:bg-slate-700/50';
row.innerHTML = `
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-white">${uap.id}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.shape}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.lat.toFixed(4)}°, ${uap.long.toFixed(4)}°</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.altitude}km</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">
<span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: ${uap.atmosphereColor}"></span>
${uap.atmosphere}
</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">
<button class="text-blue-400 hover:text-blue-200 mr-2" onclick="focusUAP('${uap.id}')">
<i class="fas fa-search"></i>
</button>
<button class="text-red-400 hover:text-red-200" onclick="removeUAP('${uap.id}')">
<i class="fas fa-trash"></i>
</button>
</td>
`;
uapTableBody.appendChild(row);
}
// Add UAP to 3D viewer
function addUAPTo3DViewer(uap) {
// Scale down altitude for visualization (Earth radius = 15 units)
const scaledAltitude = parseFloat(uap.altitude) / 1000 * 15 + 15;
// Convert lat/long to 3D position
const phi = (90 - uap.lat) * (Math.PI / 180);
const theta = (uap.long + 180) * (Math.PI / 180);
const x = scaledAltitude * Math.sin(phi) * Math.cos(theta);
const y = scaledAltitude * Math.cos(phi);
const z = scaledAltitude * Math.sin(phi) * Math.sin(theta);
// Create UAP object based on shape
let geometry, material;
switch(uap.shape) {
case 'triangle':
geometry = new THREE.ConeGeometry(0.5, 1, 3);
break;
case 'circle':
geometry = new THREE.SphereGeometry(0.5);
break;
case 'square':
geometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
break;
case 'cylinder':
geometry = new THREE.CylinderGeometry(0.4, 0.4, 1, 32);
break;
case 'chevron':
// Create a chevron shape using a custom geometry
const chevronShape = new THREE.Shape();
chevronShape.moveTo(-0.5, 0.5);
chevronShape.lineTo(0, -0.5);
chevronShape.lineTo(0.5, 0.5);
geometry = new THREE.ExtrudeGeometry(chevronShape, {
depth: 0.2,
bevelEnabled: false
});
break;
case 'tictac':
geometry = new THREE.CapsuleGeometry(0.3, 1, 4, 8);
break;
default:
geometry = new THREE.SphereGeometry(0.5);
}
material = new THREE.MeshPhongMaterial({
color: new THREE.Color(uap.atmosphereColor),
emissive: new THREE.Color(uap.atmosphereColor),
emissiveIntensity: 0.5,
specular: 0x111111,
shininess: 30
});
const uapObject = new THREE.Mesh(geometry, material);
uapObject.position.set(x, y, z);
uapObject.userData.uapId = uap.id;
// Rotate to face outward from Earth
uapObject.lookAt(0, 0, 0);
// Add to scene
scene.add(uapObject);
// Store reference
uapObjects.push({
id: uap.id,
object: uapObject
});
}
// Update UAP position in 3D viewer
function updateUAPIn3DViewer(uap) {
const uapObj = uapObjects.find(obj => obj.id === uap.id);
if (!uapObj) return;
// Scale down altitude for visualization
const scaledAltitude = parseFloat(uap.altitude) / 1000 * 15 + 15;
// Convert lat/long to 3D position
const phi = (90 - uap.lat) * (Math.PI / 180);
const theta = (uap.long + 180) * (Math.PI / 180);
const x = scaledAltitude * Math.sin(phi) * Math.cos(theta);
const y = scaledAltitude * Math.cos(phi);
const z = scaledAltitude * Math.sin(phi) * Math.sin(theta);
// Update position
uapObj.object.position.set(x, y, z);
// Rotate to face outward from Earth
uapObj.object.lookAt(0, 0, 0);
}
// Capture UAP (take screenshot)
function captureUAP() {
if (!scannerActive || detectedUAPs.length === 0) {
alert("No UAPs detected to capture!");
return;
}
// Get the latest UAP
const uap = detectedUAPs[detectedUAPs.length - 1];
// In a real app, this would capture the actual video frame
// For demo, we'll just show an alert
alert(`Captured UAP ${uap.id}\nShape: ${uap.shape}\nCoordinates: ${uap.lat.toFixed(4)}°, ${uap.long.toFixed(4)}°\nAltitude: ${uap.altitude}km (${uap.atmosphere})`);
// Highlight the UAP in the table
const rows = uapTableBody.querySelectorAll('tr');
rows[rows.length - 1].classList.add('bg-blue-900/30');
setTimeout(() => {
rows[rows.length - 1].classList.remove('bg-blue-900/30');
}, 2000);
}
// Reset 3D view
function resetView() {
camera.position.set(0, 0, 50);
camera.lookAt(0, 0, 0);
controls.target.set(0, 0, 0);
}
// Toggle orbit controls
function toggleOrbitControls() {
orbitEnabled = !orbitEnabled;
controls.enabled = orbitEnabled;
toggleOrbitBtn.classList.toggle('active');
}
// Focus on a specific UAP in 3D view
window.focusUAP = function(uapId) {
const uap = detectedUAPs.find(u => u.id === uapId);
if (!uap) return;
const uapObj = uapObjects.find(obj => obj.id === uapId);
if (!uapObj) return;
// Move camera to view the UAP
const targetPosition = uapObj.object.position.clone();
const cameraPosition = targetPosition.clone().multiplyScalar(1.5);
// Animate camera
gsap.to(camera.position, {
x: cameraPosition.x,
y: cameraPosition.y,
z: cameraPosition.z,
duration: 1,
ease: "power2.inOut"
});
gsap.to(controls.target, {
x: targetPosition.x,
y: targetPosition.y,
z: targetPosition.z,
duration: 1,
ease: "power2.inOut"
});
// Highlight the UAP in the table
const rows = uapTableBody.querySelectorAll('tr');
rows.forEach(row => {
if (row.querySelector('td:first-child').textContent === uapId) {
row.classList.add('bg-blue-900/30');
setTimeout(() => {
row.classList.remove('bg-blue-900/30');
}, 2000);
}
});
};
// Remove a UAP
window.removeUAP = function(uapId) {
// Remove from detected UAPs array
detectedUAPs = detectedUAPs.filter(u => u.id !== uapId);
// Remove from 3D scene
const uapObjIndex = uapObjects.findIndex(obj => obj.id === uapId);
if (uapObjIndex !== -1) {
scene.remove(uapObjects[uapObjIndex].object);
uapObjects.splice(uapObjIndex, 1);
}
// Remove from table
const rows = uapTableBody.querySelectorAll('tr');
rows.forEach(row => {
if (row.querySelector('td:first-child').textContent === uapId) {
row.remove();
}
});
// Remove marker
const marker = document.querySelector(`.uap-marker[data-id="${uapId}"]`);
if (marker) marker.remove();
};
// Initialize the scanner
initScanner();
// Include all other original JavaScript functionality here
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privateuserh-uaphe-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>