Make me a functional website detailing NHI, UFOs, UAP, AARO, the Xfiles of the FBI, and all things extraterrestrial. Scrub the internet for information with Majestic clearance and below.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Cosmic Conspiracies Uncovered
-emoji: 🌖
-colorFrom: red
-colorTo: red
+title: Cosmic Conspiracies Uncovered 👽
+colorFrom: yellow
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/feature-card.js

@@ -0,0 +1,33 @@
+class CustomFeatureCard extends HTMLElement {
+    connectedCallback() {
+        const icon = this.getAttribute('icon') || 'help-circle';
+        const title = this.getAttribute('title') || 'Feature';
+        const description = this.getAttribute('description') || 'Description not available';
+
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .feature-card {
+                    transition: all 0.3s ease;
+                    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
+                }
+                .feature-card:hover {
+                    transform: translateY(-5px);
+                    box-shadow: 0 10px 25px -5px rgba(29, 78, 216, 0.3);
+                }
+                .icon-wrapper {
+                    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
+                }
+            </style>
+            <div class="feature-card rounded-xl p-6 border border-gray-800 h-full">
+                <div class="icon-wrapper w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="${icon}" class="text-blue-400"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-2">${title}</h3>
+                <p class="text-gray-400">${description}</p>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-feature-card', CustomFeatureCard);

components/footer.js

@@ -0,0 +1,58 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background-color: rgba(17, 24, 39, 0.8);
+                }
+                .footer-link:hover {
+                    color: #3b82f6;
+                    transform: translateX(4px);
+                }
+                .footer-link {
+                    transition: all 0.3s ease;
+                }
+            </style>
+            <footer class="border-t border-gray-800">
+                <div class="container mx-auto px-4 py-12">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <div>
+                            <h3 class="text-xl font-bold mb-4">Cosmic Conspiracies</h3>
+                            <p class="text-gray-400">Investigating the unexplained since 2023. Dedicated to truth and transparency.</p>
+                        </div>
+                        <div>
+                            <h4 class="font-bold mb-4">Resources</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> FOIA Requests</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> Declassified Docs</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> Reporting Guide</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="font-bold mb-4">Government Links</h4>
+                            <ul class="space-y-2">
+                                <li><a href="https://www.aaro.mil" class="footer-link text-gray-400 flex items-center"><i data-feather="external-link" class="mr-1 w-4 h-4"></i> AARO Official</a></li>
+                                <li><a href="https://www.fbi.gov" class="footer-link text-gray-400 flex items-center"><i data-feather="external-link" class="mr-1 w-4 h-4"></i> FBI Vault</a></li>
+                                <li><a href="https://www.nasa.gov" class="footer-link text-gray-400 flex items-center"><i data-feather="external-link" class="mr-1 w-4 h-4"></i> NASA UAP</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="font-bold mb-4">Connect</h4>
+                            <div class="flex space-x-4">
+                                <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="twitter"></i></a>
+                                <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="youtube"></i></a>
+                                <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="github"></i></a>
+                                <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="mail"></i></a>
+                            </div>
+                            <p class="text-gray-500 text-sm mt-4">© 2023 Cosmic Conspiracies. All rights reserved.</p>
+                            <p class="text-gray-600 text-xs mt-2">Disclaimer: This site aggregates publicly available information only.</p>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,99 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: rgba(17, 24, 39, 0.8);
+                    backdrop-filter: blur(10px);
+                }
+                .nav-link {
+                    position: relative;
+                }
+                .nav-link:after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -2px;
+                    left: 0;
+                    background-color: #3b82f6;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover:after {
+                    width: 100%;
+                }
+            </style>
+            <nav class="fixed w-full z-50 border-b border-gray-800">
+                <div class="container mx-auto px-4">
+                    <div class="flex justify-between items-center py-4">
+                        <a href="/" class="flex items-center space-x-2">
+                            <i data-feather="activity" class="text-blue-400"></i>
+                            <span class="text-xl font-bold">CosmicConspiracies</span>
+                        </a>
+                        
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="#" class="nav-link">NHI Research</a>
+                            <a href="#" class="nav-link">Declassified Docs</a>
+                            <a href="#" class="nav-link">Sightings Map</a>
+                            <a href="#" class="nav-link">Whistleblowers</a>
+                            <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-700">
+                                <i data-feather="moon"></i>
+                            </button>
+                        </div>
+                        
+                        <button class="md:hidden focus:outline-none" id="mobileMenuButton">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                    
+                    <!-- Mobile menu -->
+                    <div class="md:hidden hidden py-4 border-t border-gray-800" id="mobileMenu">
+                        <div class="flex flex-col space-y-4">
+                            <a href="#" class="nav-link">NHI Research</a>
+                            <a href="#" class="nav-link">Declassified Docs</a>
+                            <a href="#" class="nav-link">Sightings Map</a>
+                            <a href="#" class="nav-link">Whistleblowers</a>
+                            <button id="darkModeToggleMobile" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 w-full">
+                                <i data-feather="moon"></i>
+                                <span>Toggle Dark Mode</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Initialize mobile menu toggle
+        const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
+        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
+        
+        if (mobileMenuButton && mobileMenu) {
+            mobileMenuButton.addEventListener('click', () => {
+                const isHidden = mobileMenu.classList.contains('hidden');
+                if (isHidden) {
+                    mobileMenu.classList.remove('hidden');
+                    mobileMenuButton.innerHTML = `<i data-feather="x"></i>`;
+                } else {
+                    mobileMenu.classList.add('hidden');
+                    mobileMenuButton.innerHTML = `<i data-feather="menu"></i>`;
+                }
+                feather.replace();
+            });
+        }
+
+        // Initialize dark mode toggle
+        const darkModeToggle = this.shadowRoot.getElementById('darkModeToggle');
+        const darkModeToggleMobile = this.shadowRoot.getElementById('darkModeToggleMobile');
+        
+        const toggleDarkMode = () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        };
+        
+        if (darkModeToggle) darkModeToggle.addEventListener('click', toggleDarkMode);
+        if (darkModeToggleMobile) darkModeToggleMobile.addEventListener('click', toggleDarkMode);
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/news-card.js

@@ -0,0 +1,45 @@
+class CustomNewsCard extends HTMLElement {
+    connectedCallback() {
+        const image = this.getAttribute('image') || 'http://static.photos/abstract/640x360/1';
+        const title = this.getAttribute('title') || 'News Title';
+        const date = this.getAttribute('date') || 'Date not available';
+        const excerpt = this.getAttribute('excerpt') || 'Excerpt not available';
+
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .news-card {
+                    transition: all 0.3s ease;
+                }
+                .news-card:hover {
+                    transform: translateY(-5px);
+                    box-shadow: 0 10px 25px -5px rgba(29, 78, 216, 0.3);
+                }
+                .image-container {
+                    height: 180px;
+                }
+                .news-image {
+                    transition: transform 0.5s ease;
+                }
+                .news-card:hover .news-image {
+                    transform: scale(1.05);
+                }
+            </style>
+            <div class="news-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 h-full flex flex-col">
+                <div class="image-container overflow-hidden">
+                    <img src="${image}" alt="${title}" class="news-image w-full h-full object-cover">
+                </div>
+                <div class="p-6 flex-grow">
+                    <div class="text-sm text-blue-400 mb-2">${date}</div>
+                    <h3 class="text-xl font-bold mb-3">${title}</h3>
+                    <p class="text-gray-400 mb-4">${excerpt}</p>
+                    <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300">
+                        Read More <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-news-card', CustomNewsCard);

index.html

@@ -1,19 +1,158 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cosmic Conspiracies Uncovered | NHI, UFOs & Government Secrets</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/feature-card.js"></script>
+    <script src="components/news-card.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="relative h-96 rounded-xl overflow-hidden mb-12">
+            <div class="absolute inset-0 bg-gradient-to-r from-purple-900/80 to-blue-900/80"></div>
+            <img src="http://static.photos/space/1200x630/42" alt="UFO in space" class="w-full h-full object-cover">
+            <div class="absolute inset-0 flex flex-col justify-center items-center text-center px-4">
+                <h1 class="text-4xl md:text-6xl font-bold mb-4">The Truth Is Out There</h1>
+                <p class="text-xl md:text-2xl max-w-3xl mb-8">Declassified documents, whistleblower testimonies, and unexplained phenomena</p>
+                <a href="#reports" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Explore Cases</a>
+            </div>
+        </section>
+
+        <!-- Key Topics -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Government Programs & Agencies</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <custom-feature-card 
+                    icon="eye" 
+                    title="AARO" 
+                    description="All-domain Anomaly Resolution Office - Pentagon's UFO investigation unit">
+                </custom-feature-card>
+                <custom-feature-card 
+                    icon="file-text" 
+                    title="X-Files" 
+                    description="FBI's declassified UFO documents spanning decades">
+                </custom-feature-card>
+                <custom-feature-card 
+                    icon="shield" 
+                    title="Majestic 12" 
+                    description="Alleged secret committee formed after Roswell incident">
+                </custom-feature-card>
+                <custom-feature-card 
+                    icon="activity" 
+                    title="NHI" 
+                    description="Non-Human Intelligence - The new terminology for UFO phenomena">
+                </custom-feature-card>
+            </div>
+        </section>
+
+        <!-- Recent Reports -->
+        <section id="reports" class="mb-16">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-3xl font-bold">Recent Declassified Reports</h2>
+                <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
+                    View All <i data-feather="chevron-right" class="ml-1"></i>
+                </a>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <custom-news-card 
+                    image="http://static.photos/technology/640x360/1"
+                    title="Pentagon UFO Report 2023"
+                    date="June 2023"
+                    excerpt="The latest AARO report reveals 510 UFO sightings with no conventional explanation">
+                </custom-news-card>
+                <custom-news-card 
+                    image="http://static.photos/aerial/640x360/2"
+                    title="FBI Vault Update"
+                    date="April 2023"
+                    excerpt="New batch of declassified documents released through FOIA requests">
+                </custom-news-card>
+                <custom-news-card 
+                    image="http://static.photos/science/640x360/3"
+                    title="Congressional Hearing"
+                    date="February 2023"
+                    excerpt="Whistleblower testimonies about reverse-engineering programs">
+                </custom-news-card>
+            </div>
+        </section>
+
+        <!-- Timeline Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8">UFO Timeline</h2>
+            <div class="relative">
+                <div class="absolute left-1/2 w-1 h-full bg-blue-800 transform -translate-x-1/2"></div>
+                
+                <div class="mb-8 flex justify-between items-center w-full right-timeline">
+                    <div class="order-1 w-5/12"></div>
+                    <div class="z-20 flex items-center order-1 bg-blue-600 shadow-xl w-8 h-8 rounded-full"></div>
+                    <div class="order-1 bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4">
+                        <h3 class="font-bold text-lg mb-1">1947 - Roswell Incident</h3>
+                        <p class="text-sm">The crash that started it all. Official explanation: weather balloon.</p>
+                    </div>
+                </div>
+
+                <div class="mb-8 flex justify-between items-center w-full left-timeline">
+                    <div class="order-1 bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4">
+                        <h3 class="font-bold text-lg mb-1">1952 - Washington D.C. Flyover</h3>
+                        <p class="text-sm">Multiple UFOs tracked on radar over the White House.</p>
+                    </div>
+                    <div class="z-20 flex items-center order-1 bg-blue-600 shadow-xl w-8 h-8 rounded-full"></div>
+                    <div class="order-1 w-5/12"></div>
+                </div>
+
+                <div class="mb-8 flex justify-between items-center w-full right-timeline">
+                    <div class="order-1 w-5/12"></div>
+                    <div class="z-20 flex items-center order-1 bg-blue-600 shadow-xl w-8 h-8 rounded-full"></div>
+                    <div class="order-1 bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4">
+                        <h3 class="font-bold text-lg mb-1">2004 - Nimitz Encounter</h3>
+                        <p class="text-sm">Navy pilots track UFO with advanced capabilities off California coast.</p>
+                    </div>
+                </div>
+
+                <div class="mb-8 flex justify-between items-center w-full left-timeline">
+                    <div class="order-1 bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4">
+                        <h3 class="font-bold text-lg mb-1">2020 - Pentagon Releases Videos</h3>
+                        <p class="text-sm">Official confirmation of previously leaked UFO footage.</p>
+                    </div>
+                    <div class="z-20 flex items-center order-1 bg-blue-600 shadow-xl w-8 h-8 rounded-full"></div>
+                    <div class="order-1 w-5/12"></div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Whistleblower Section -->
+        <section class="bg-gray-800 rounded-xl p-8 mb-16">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/3 mb-6 md:mb-0">
+                    <img src="http://static.photos/people/640x360/4" alt="Whistleblower" class="rounded-lg w-full max-w-xs mx-auto">
+                </div>
+                <div class="md:w-2/3 md:pl-8">
+                    <h2 class="text-3xl font-bold mb-4">Whistleblower Protection</h2>
+                    <p class="text-lg mb-4">Recent legislation has created new protections for government employees and contractors to come forward with information about UAP programs without fear of retaliation.</p>
+                    <div class="flex flex-wrap gap-4">
+                        <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">Submit Report</a>
+                        <a href="#" class="border border-blue-600 text-blue-400 hover:bg-blue-900/50 px-6 py-2 rounded-lg font-medium transition duration-300">Learn More</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,39 @@
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize any tooltips or popovers
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Dark mode toggle functionality
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        });
+    }
+
+    // Check for saved dark mode preference
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.documentElement.classList.add('dark');
+    } else if (localStorage.getItem('darkMode') === 'false') {
+        document.documentElement.classList.remove('dark');
+    }
+});
+
+// API fetch for UFO sightings data
+async function fetchUFOSightings() {
+    try {
+        const response = await fetch('https://data.nasa.gov/resource/gh4g-9sfh.json?$limit=5');
+        const data = await response.json();
+        console.log('UFO sightings data:', data);
+        // Process and display data here
+    } catch (error) {
+        console.error('Error fetching UFO sightings:', error);
+    }
+}
+
+// Call the function when the page loads
+window.addEventListener('load', fetchUFOSightings);

style.css

@@ -1,28 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Space Grotesk', sans-serif;
+}
+
+/* Timeline styles */
+.left-timeline {
+    flex-direction: row-reverse;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.right-timeline .order-1 {
+    text-align: right;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@media (max-width: 768px) {
+    .left-timeline, .right-timeline {
+        flex-direction: column;
+    }
+    
+    .left-timeline .order-1, 
+    .right-timeline .order-1 {
+        width: 100%;
+        text-align: left;
+    }
+    
+    .left-timeline .order-1, 
+    .right-timeline .order-1 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-track {
+    background: #1a202c;
 }
+
+::-webkit-scrollbar-thumb {
+    background: #4a5568;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #718096;
+}