Hugging Face's logo

Spaces:
privateuserh
/
uaphe-vbeta1-02
Running

App Files Community
uaphe-vbeta1-02 / index.html
privateuserh's picture
privateuserh
Add 3 files
af986fc verified
raw
history blame contribute delete
50.1 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>
<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);
}
/* Breaking news panel */
.breaking-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, #ef4444, #dc2626);
color: white;
padding: 12px;
z-index: 100;
transform: translateY(100%);
transition: transform 0.3s ease-out;
box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
}
.breaking-panel.show {
transform: translateY(0);
}
/* ASR modal */
.asr-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #1e293b;
border: 1px solid #3b82f6;
border-radius: 8px;
padding: 20px;
width: 90%;
max-width: 500px;
z-index: 1000;
opacity: 0;
transition: all 0.3s ease;
}
.asr-modal.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.asr-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.asr-modal-overlay.active {
opacity: 1;
pointer-events: all;
}
/* Recording animation */
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.recording {
animation: pulse 1.5s infinite;
}
/* QR code popup */
.qr-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #1e293b;
padding: 20px;
border-radius: 8px;
z-index: 1001;
transition: transform 0.3s ease;
text-align: center;
border: 1px solid #3b82f6;
width: 90%;
max-width: 300px;
}
.qr-popup.active {
transform: translate(-50%, -50%) scale(1);
}
/* NFC modal */
.nfc-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #1e293b;
border: 1px solid #10b981;
border-radius: 8px;
padding: 20px;
width: 90%;
max-width: 400px;
z-index: 1002;
opacity: 0;
transition: all 0.3s ease;
}
.nfc-modal.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* NFC animation */
@keyframes nfc-pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.nfc-scanning {
animation: nfc-pulse 2s infinite;
}
/* UAP Shape Selector */
.shape-option {
border: 2px solid transparent;
transition: all 0.2s;
cursor: pointer;
}
.shape-option:hover {
transform: scale(1.05);
}
.shape-option.selected {
border-color: #3b82f6;
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
/* Shape icons - Updated to glowing white stencil outlines */
.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;
}
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
position: relative;
}
.circle::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid white;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
box-sizing: border-box;
}
.square {
width: 30px;
height: 30px;
background-color: transparent;
position: relative;
}
.square::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border: 2px solid white;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
box-sizing: border-box;
}
.cylinder {
width: 25px;
height: 35px;
border-radius: 50%/10px;
background-color: transparent;
position: relative;
}
.cylinder::before {
content: '';
position: absolute;
width: 25px;
height: 35px;
border-radius: 50%/10px;
border: 2px solid white;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
box-sizing: border-box;
}
.chevron {
width: 30px;
height: 30px;
position: relative;
}
.chevron::before, .chevron::after {
content: '';
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: transparent;
border: 2px solid white;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}
.chevron::before {
left: 0;
transform: skew(0deg, 30deg);
border-right: none;
border-bottom: none;
}
.chevron::after {
right: 0;
transform: skew(0deg, -30deg);
border-left: none;
border-bottom: none;
}
.tictac {
width: 50px;
height: 20px;
background-color: transparent;
border-radius: 10px;
position: relative;
}
.tictac::before {
content: '';
position: absolute;
width: 50px;
height: 20px;
border-radius: 10px;
border: 2px solid white;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
box-sizing: border-box;
}
/* Disclaimer text */
.disclaimer {
font-size: 0.7rem;
color: #64748b;
font-style: italic;
}
/* Glowing effect for all shapes */
.shape-icon div::before {
animation: shape-glow 2s infinite alternate;
}
@keyframes shape-glow {
from { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)); }
to { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)); }
}
</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">
<!-- 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>
<!-- Recent Posts Grid -->
<section>
<h2 class="text-xl font-semibold text-white mb-6 flex items-center">
<i class="fas fa-bolt text-blue-400 mr-2"></i> 2024 Sightings
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Post 1 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-green-500 text-white text-xs font-semibold px-2 py-0.5 rounded">NEW</span>
<span class="text-slate-400 text-xs ml-2">May 15, 2024</span>
</div>
<h3 class="font-semibold text-white mb-2">Triangle UAP over Arizona</h3>
<p class="text-slate-300 text-sm mb-4">Multiple witnesses report silent black triangle with lights hovering near Phoenix. No radar confirmation.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Source: NUFORC #123456</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('Triangle UAP over Arizona', 'https://uap-pulse.example.com/posts/2024-arizona-triangle')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
<!-- Post 2 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-purple-500 text-white text-xs font-semibold px-2 py-0.5 rounded">HISTORIC</span>
<span class="text-slate-4 00 text-xs ml-2">April 2024</span>
</div>
<h3 class="font-semibold text-white mb-2">Congressional Hearing Update</h3>
<p class="text-slate-300 text-sm mb-4">New whistleblower testimony reveals previously undisclosed UAP retrieval program. Pentagon denies claims.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Source: National Archives</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('Congressional Hearing Update', 'https://uap-pulse.example.com/posts/2024-congress-hearing')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
<!-- Post 3 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-yellow-500 text-white text-xs font-semibold px-2 py-0.5 rounded">ANALYSIS</span>
<span class="text-slate-400 text-xs ml-2">March 2024</span>
</div>
<h3 class="font-semibold text-white mb-2">Navy Pilot Encounters</h3>
<p class="text-slate-300 text-sm mb-4">"The objects accelerated like nothing I've ever seen" - F/A-18 pilot describes 2004 Nimitz encounter in new interview.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Source: Space.com</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('Navy Pilot Encounters', 'https://uap-pulse.example.com/posts/2024-navy-encounters')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
<!-- Post 4 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-red-500 text-white text-xs font-semibold px-2 py-0.5 rounded">WARNING</span>
<span class="text-slate-400 text-xs ml-2">February 2024</span>
</div>
<h3 class="font-semibold text-white mb-2">UAP Flight Safety Concerns</h3>
<p class="text-slate-300 text-sm mb-4">FAA reports increase in near-misses with unidentified objects. New reporting procedures implemented for pilots.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Source: Defense.gov</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('UAP Flight Safety Concerns', 'https://uap-pulse.example.com/posts/2024-flight-safety')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
<!-- Post 5 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-blue-500 text-white text-xs font-semibold px-2 py-0.5 rounded">REPORT</span>
<span class="text-slate-400 text-xs ml-2">January 2024</span>
</div>
<h3 class="font-semibold text-white mb-2">Global UAP Sightings Spike</h3>
<p class="text-slate-300 text-sm mb-4">NUFORC data shows 37% increase in credible reports since 2020. Most common shapes: spheres, triangles, cylinders.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Source: NUFORC Stats</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('Global UAP Sightings Spike', 'https://uap-pulse.example.com/posts/2024-global-spike')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
<!-- Post 6 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-indigo-500 text-white text-xs font-semibold px-2 py-0.5 rounded">SCIENCE</span>
<span class="text-slate-400 text-xs ml-2">December 2023</span>
</div>
<h3 class="font-semibold text-white mb-2">New Analysis of 1967 Malmstrom Case</h3>
<p class="text-slate-300 text-sm mb-4">Researchers claim new evidence suggests UAP may have temporarily disabled nuclear missiles. Military records partially confirm.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Source: Wikipedia/UAP</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('New Analysis of 1967 Malmstrom Case', 'https://uap-pulse.example.com/posts/2023-malmstrom')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
</div>
</section>
<!-- 2025 Sightings Section -->
<section class="mt-16">
<h2 class="text-xl font-semibold text-white mb-6 flex items-center">
<i class="fas fa-calendar text-blue-400 mr-2"></i> 2025 Projections
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Projection 1 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-pink-500 text-white text-xs font-semibold px-2 py-0.5 rounded">FUTURE</span>
<span class="text-slate-400 text-xs ml-2">Q1 2025</span>
</div>
<h3 class="font-semibold text-white mb-2">NASA UAP Study Results</h3>
<p class="text-slate-300 text-sm mb-4">Anticipated release of NASA's comprehensive UAP study expected to recommend new scientific approaches to phenomenon.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Projected Source: NASA</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('NASA UAP Study Results', 'https://uap-pulse.example.com/projections/2025-nasa-study')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
<!-- Projection 2 -->
<article class="post-card rounded-lg p-5 shadow-md hover:shadow-blue-500/10">
<div class="flex items-center mb-3">
<span class="bg-teal-500 text-white text-xs font-semibold px-2 py-0.5 rounded">FUTURE</span>
<span class="text-slate-400 text-xs ml-2">Q2 2025</span>
</div>
<h3 class="font-semibold text-white mb-2">International UAP Task Force</h3>
<p class="text-slate-300 text-sm mb-4">Pentagon officials suggest multinational UAP investigation team may form to share data across allied nations.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-500">Projected Source: DoD</span>
<button class="text-blue-400 hover:text-blue-200 text-xs" onclick="generateQR('International UAP Task Force', 'https://uap-pulse.example.com/projections/2025-intl-task-force')">
<i class="fas fa-qrcode"></i>
</button>
</div>
</article>
</div>
</section>
<!-- Resources Section -->
<section class="mt-16">
<h2 class="text-xl font-semibold text-white mb-6 flex items-center">
<i class="fas fa-book-open text-blue-400 mr-2"></i> Official Resources
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700">
<h3 class="font-medium text-white mb-3 flex items-center">
<i class="fas fa-shield-alt text-blue-400 mr-2"></i> Defense Department
</h3>
<p class="text-slate-300 text-sm mb-4">Pentagon's official UAP Task Force reports and declassified documents.</p>
<span class="text-xs text-slate-500">Reference: Defense.gov/UAP</span>
</div>
<div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700">
<h3 class="font-medium text-white mb-3 flex items-center">
<i class="fas fa-archive text-blue-400 mr-2"></i> National Archives
</h3>
<p class="text-slate-300 text-sm mb-4">Historical UAP records including Project Blue Book and other declassified materials.</p>
<span class="text-xs text-slate-500">Reference: Archives.gov/UAP</span>
</div>
<div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700">
<h3 class="font-medium text-white mb-3 flex items-center">
<i class="fas fa-globe-americas text-blue-400 mr-2"></i> NUFORC
</h3>
<p class="text-slate-300 text-sm mb-4">Largest public database of UFO sightings with global reports since 1974.</p>
<span class="text-xs text-slate-500">Reference: NUFORC.org</span>
</div>
<div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700">
<h3 class="font-medium text-white mb-3 flex items-center">
<i class="fas fa-rocket text-blue-400 mr-2"></i> Space.com
</h3>
<p class="text-slate-300 text-sm mb-4">Scientific analysis of UAP phenomena and space-related explanations.</p>
<span class="text-xs text-slate-500">Reference: Space.com/UFO</span>
</div>
</div>
</section>
</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>
<!-- Breaking News Panel -->
<div class="breaking-panel" id="breakingPanel">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<span class="bg-white text-red-600 font-bold px-2 py-0.5 rounded mr-3">BREAKING</span>
<span class="text-white font-medium" id="breakingText">Mass UAP sighting reported over New York City - multiple witnesses confirm unusual lights</span>
</div>
<button class="text-white hover:text-gray-200 ml-4" onclick="closeBreakingPanel()">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Floating Action Buttons -->
<div class="fixed bottom-6 right-6 flex flex-col space-y-3">
<button class="bg-red-600 hover:bg-red-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-all" onclick="showBreakingPanel()">
<i class="fas fa-bell"></i>
</button>
<button class="bg-blue-600 hover:bg-blue-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-all" onclick="openASRModal()">
<i class="fas fa-plus"></i>
</button>
<button class="bg-green-600 hover:bg-green-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-all" id="nfcButton" onclick="openNFCModal()">
<i class="fas fa-wifi"></i>
</button>
</div>
<!-- ASR Modal -->
<div class="asr-modal" id="asrModal">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-white">Create New UAP Report</h3>
<button class="text-slate-400 hover:text-white" onclick="closeASRModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-300 mb-1">Title</label>
<input type="text" id="postTitle" class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-blue-500">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-300 mb-1">Content</label>
<textarea id="postContent" rows="4" class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
</div>
<!-- UAP Shape Selector -->
<div class="mb-4">
<label class="block text-sm font-medium text-slate-300 mb-2">UAP Shape</label>
<div class="grid grid-cols-3 gap-3">
<div class="shape-option rounded-lg p-2" onclick="selectShape('triangle')">
<div class="shape-icon">
<div class="triangle"></div>
</div>
<p class="text-xs text-center mt-1 text-slate-300">Triangle</p>
</div>
<div class="shape-option rounded-lg p-2" onclick="selectShape('circle')">
<div class="shape-icon">
<div class="circle"></div>
</div>
<p class="text-xs text-center mt-1 text-slate-300">Sphere</p>
</div>
<div class="shape-option rounded-lg p-2" onclick="selectShape('square')">
<div class="shape-icon">
<div class="square"></div>
</div>
<p class="text-xs text-center mt-1 text-slate-300">Cube</p>
</div>
<div class="shape-option rounded-lg p-2" onclick="selectShape('cylinder')">
<div class="shape-icon">
<div class="cylinder"></div>
</div>
<p class="text-xs text-center mt-1 text-slate-300">Cylinder</p>
</div>
<div class="shape-option rounded-lg p-2" onclick="selectShape('chevron')">
<div class="shape-icon">
<div class="chevron"></div>
</div>
<p class="text-xs text-center mt-1 text-slate-300">Chevron</p>
</div>
<div class="shape-option rounded-lg p-2" onclick="selectShape('tictac')">
<div class="shape-icon">
<div class="tictac"></div>
</div>
<p class="text-xs text-center mt-1 text-slate-300">Tic-Tac</p>
</div>
</div>
</div>
<!-- Galaxy and Civilization Selector -->
<div class="mb-4">
<label class="block text-sm font-medium text-slate-300 mb-1">Possible Origin (Optional)</label>
<div class="grid grid-cols-2 gap-3">
<div>
<select id="galaxySelect" class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
<option value="">Select Galaxy</option>
<option value="Milky Way">Milky Way</option>
<option value="Andromeda">Andromeda</option>
<option value="Triangulum">Triangulum</option>
<option value="Messier 87">Messier 87</option>
<option value="Large Magellanic Cloud">Large Magellanic Cloud</option>
<option value="Small Magellanic Cloud">Small Magellanic Cloud</option>
<option value="Pinwheel">Pinwheel</option>
<option value="Sombrero">Sombrero</option>
<option value="Whirlpool">Whirlpool</option>
<option value="Other">Other/Unknown</option>
</select>
</div>
<div>
<select id="civilizationSelect" class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
<option value="">Select Civilization</option>
<option value="Pleiadeans">Pleiadeans</option>
<option value="Arcturians">Arcturians</option>
<option value="Zeta Reticuli">Zeta Reticuli</option>
<option value="Lyrans">Lyrans</option>
<option value="Orion">Orion</option>
<option value="Sirians">Sirians</option>
<option value="Andromedans">Andromedans</option>
<option value="Anunnaki">Anunnaki</option>
<option value="Reptilians">Reptilians</option>
<option value="Other">Other/Unknown</option>
</select>
</div>
</div>
<p class="disclaimer mt-1">Note: Origin selection represents the reporter's opinion only</p>
</div>
<div class="flex items-center mb-4">
<button id="recordButton" class="bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded flex items-center" onclick="toggleRecording()">
<i class="fas fa-microphone mr-2"></i> Start Recording
</button>
<span id="recordingStatus" class="text-slate-400 text-sm ml-3 hidden">
<i class="fas fa-circle text-red-500 mr-1"></i> Recording...
</span>
</div>
<div class="flex justify-end space-x-3">
<button class="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded" onclick="closeASRModal()">
Cancel
</button>
<button class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded" onclick="createPost()">
Create Post
</button>
</div>
</div>
<div class="asr-modal-overlay" id="asrModalOverlay"></div>
<!-- QR Code Popup -->
<div class="qr-popup" id="qrPopup">
<div class="flex justify-between items-center mb-3">
<h3 class="text-sm font-semibold text-white" id="qrTitle"></h3>
<button class="text-slate-400 hover:text-white" onclick="closeQRPopup()">
<i class="fas fa-times"></i>
</button>
</div>
<div id="qrCode" class="mb-3 mx-auto"></div>
<p class="text-xs text-slate-400">Scan to share this story</p>
<button class="mt-3 bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded text-sm flex items-center mx-auto" onclick="sendViaNFC()">
<i class="fas fa-wifi mr-1"></i> Send via NFC
</button>
</div>
<!-- NFC Modal -->
<div class="nfc-modal" id="nfcModal">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-white">NFC Transmitter</h3>
<button class="text-slate-400 hover:text-white" onclick="closeNFCModal()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="text-center mb-6">
<div class="bg-green-600/20 border-2 border-green-500 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-3" id="nfcIcon">
<i class="fas fa-wifi text-3xl text-green-400"></i>
</div>
<p class="text-slate-300 text-sm" id="nfcStatus">Ready to transmit selected QR code</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 mb-4">
<h4 class="text-sm font-medium text-white mb-2">Selected Story</h4>
<p class="text-slate-300 text-sm" id="nfcStoryTitle">No story selected</p>
</div>
<div class="flex justify-center">
<button class="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded flex items-center" id="nfcTransmitButton" onclick="startNFCTransmission()">
<i class="fas fa-bolt mr-2"></i> Begin Transmission
</button>
</div>
</div>
<script>
// Simple animation for post cards on scroll
document.addEventListener('DOMContentLoaded', function() {
const posts = document.querySelectorAll('.post-card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
posts.forEach((post, index) => {
post.style.opacity = '0';
post.style.transform = 'translateY(20px)';
post.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
observer.observe(post);
});
// Typewriter effect for header
setTimeout(() => {
document.querySelector('.typewriter').style.borderRight = 'none';
}, 3500);
// Show breaking news panel after delay
setTimeout(showBreakingPanel, 10000);
// Initialize NFC variables
window.currentQRData = null;
window.currentQRTitle = null;
// Initialize shape selection
window.selectedShape = null;
});
// Breaking news panel functions
function showBreakingPanel() {
const panel = document.getElementById('breakingPanel');
panel.classList.add('show');
// Rotate through different breaking news items
const breakingTexts = [
"Mass UAP sighting reported over New York City - multiple witnesses confirm unusual lights",
"Pentagon confirms leaked video shows unknown object entering ocean at hypersonic speed",
"BREAKING: Congressional committee demands immediate release of all UAP-related documents",
"Scientists detect unusual atmospheric anomalies coinciding with recent UAP sightings"
];
let currentIndex = 0;
setInterval(() => {
currentIndex = (currentIndex + 1) % breakingTexts.length;
document.getElementById('breakingText').textContent = breakingTexts[currentIndex];
}, 15000);
}
function closeBreakingPanel() {
document.getElementById('breakingPanel').classList.remove('show');
}
// ASR modal functions
function openASRModal() {
document.getElementById('asrModal').classList.add('active');
document.getElementById('asrModalOverlay').classList.add('active');
// Reset form
document.getElementById('postTitle').value = '';
document.getElementById('postContent').value = '';
document.getElementById('galaxySelect').value = '';
document.getElementById('civilizationSelect').value = '';
// Reset shape selection
if (window.selectedShape) {
document.querySelector(`.shape-option[onclick="selectShape('${window.selectedShape}')"]`).classList.remove('selected');
window.selectedShape = null;
}
}
function closeASRModal() {
document.getElementById('asrModal').classList.remove('active');
document.getElementById('asrModalOverlay').classList.remove('active');
stopRecording();
}
// Shape selection function
function selectShape(shape) {
// Remove selection from all shapes
document.querySelectorAll('.shape-option').forEach(option => {
option.classList.remove('selected');
});
// Add selection to clicked shape
const selectedOption = document.querySelector(`.shape-option[onclick="selectShape('${shape}')"]`);
selectedOption.classList.add('selected');
window.selectedShape = shape;
}
function toggleRecording() {
const recordButton = document.getElementById('recordButton');
const recordingStatus = document.getElementById('recordingStatus');
if (recordButton.innerHTML.includes('Start')) {
// Start recording
recordButton.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Recording';
recordButton.classList.remove('bg-red-600', 'hover:bg-red-500');
recordButton.classList.add('bg-red-700', 'hover:bg-red-600');
recordingStatus.classList.remove('hidden');
// Simulate ASR transcription
setTimeout(() => {
document.getElementById('postContent').value = "I witnessed multiple bright lights in triangular formation moving silently over the city at approximately 9:30 PM. The objects made sudden 90-degree turns without slowing down. No visible propulsion or sound. Duration: about 2 minutes before disappearing behind clouds.";
}, 2000);
} else {
// Stop recording
stopRecording();
}
}
function stopRecording() {
const recordButton = document.getElementById('recordButton');
const recordingStatus = document.getElementById('recordingStatus');
recordButton.innerHTML = '<i class="fas fa-microphone mr-2"></i> Start Recording';
recordButton.classList.add('bg-red-600', 'hover:bg-red-500');
recordButton.classList.remove('bg-red-700', 'hover:bg-red-600');
recordingStatus.classList.add('hidden');
}
function createPost() {
const title = document.getElementById('postTitle').value;
const content = document.getElementById('postContent').value;
const galaxy = document.getElementById('galaxySelect').value;
const civilization = document.getElementById('civilizationSelect').value;
if (title && content) {
let originInfo = '';
if (galaxy || civilization) {
originInfo = `\n\nPossible Origin: ${galaxy ? galaxy : 'Unknown galaxy'}${civilization ? ` (${civilization})` : ''}`;
}
alert(`New post created!\nTitle: ${title}\nContent: ${content}${originInfo}`);
closeASRModal();
// Generate QR code for the new post
generateQR(title, `https://uap-pulse.example.com/posts/${Date.now()}`);
} else {
alert('Please fill in both title and content');
}
}
// QR code functions
function generateQR(title, url) {
const qrPopup = document.getElementById('qrPopup');
const qrTitle = document.getElementById('qrTitle');
const qrCode = document.getElementById('qrCode');
qrTitle.textContent = title;
qrCode.innerHTML = '';
// Store current QR data for NFC transmission
window.currentQRData = url;
window.currentQRTitle = title;
// Generate QR code
const qr = qrcode(0, 'L');
qr.addData(url);
qr.make();
qrCode.innerHTML = qr.createImgTag(4);
// Show popup
qrPopup.classList.add('active');
document.getElementById('asrModalOverlay').classList.add('active');
}
function closeQRPopup() {
document.getElementById('qrPopup').classList.remove('active');
document.getElementById('asrModalOverlay').classList.remove('active');
}
// NFC functions
function openNFCModal() {
const nfcModal = document.getElementById('nfcModal');
const nfcStoryTitle = document.getElementById('nfcStoryTitle');
// Update with current story if available
if (window.currentQRTitle) {
nfcStoryTitle.textContent = window.currentQRTitle;
document.getElementById('nfcTransmitButton').disabled = false;
} else {
nfcStoryTitle.textContent = "No story selected";
document.getElementById('nfcTransmitButton').disabled = true;
}
nfcModal.classList.add('active');
document.getElementById('asrModalOverlay').classList.add('active');
}
function closeNFCModal() {
document.getElementById('nfcModal').classList.remove('active');
document.getElementById('asrModalOverlay').classList.remove('active');
stopNFCTransmission();
}
function sendViaNFC() {
closeQRPopup();
openNFCModal();
}
function startNFCTransmission() {
const nfcIcon = document.getElementById('nfcIcon');
const nfcStatus = document.getElementById('nfcStatus');
const nfcButton = document.getElementById('nfcButton');
const transmitButton = document.getElementById('nfcTransmitButton');
if (!window.currentQRData) {
nfcStatus.textContent = "Error: No data to transmit";
return;
}
// Visual feedback
nfcIcon.classList.add('nfc-scanning');
nfcStatus.textContent = "Transmitting data via NFC...";
transmitButton.disabled = true;
transmitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Transmitting';
nfcButton.classList.add('nfc-scanning');
// Simulate NFC transmission
setTimeout(() => {
stopNFCTransmission();
nfcStatus.textContent = "Transmission complete!";
// Show success message
setTimeout(() => {
nfcStatus.textContent = "Ready to transmit selected QR code";
}, 2000);
}, 3000);
}
function stopNFCTransmission() {
const nfcIcon = document.getElementById('nfcIcon');
const nfcStatus = document.getElementById('nfcStatus');
const nfcButton = document.getElementById('nfcButton');
const transmitButton = document.getElementById('nfcTransmitButton');
nfcIcon.classList.remove('nfc-scanning');
nfcButton.classList.remove('nfc-scanning');
transmitButton.disabled = false;
transmitButton.innerHTML = '<i class="fas fa-bolt mr-2"></i> Begin Transmission';
}
</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/uaphe-vbeta1-02" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>