| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>UFO Blogger - The Truth Is Out There</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"> |
| <style> |
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0) rotate(0deg); |
| } |
| 50% { |
| transform: translateY(-20px) rotate(5deg); |
| } |
| } |
| |
| @keyframes beam { |
| 0% { |
| opacity: 0.3; |
| height: 0; |
| } |
| 50% { |
| opacity: 0.7; |
| height: 150px; |
| } |
| 100% { |
| opacity: 0; |
| height: 0; |
| } |
| } |
| |
| .ufo { |
| animation: float 6s ease-in-out infinite; |
| transition: all 0.3s ease; |
| } |
| |
| .ufo:hover { |
| transform: scale(1.1) !important; |
| filter: drop-shadow(0 0 10px #3b82f6); |
| } |
| |
| .ufo-beam { |
| position: absolute; |
| bottom: -150px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 3px; |
| background: linear-gradient(to bottom, rgba(59, 130, 246, 0.8), transparent); |
| border-radius: 50%; |
| } |
| |
| .ufo-container:hover .ufo-beam { |
| animation: beam 2s infinite; |
| } |
| |
| .hidden-message { |
| opacity: 0; |
| transition: all 0.5s ease; |
| max-height: 0; |
| overflow: hidden; |
| } |
| |
| .show-message { |
| opacity: 1; |
| max-height: 500px; |
| } |
| |
| .secret-button { |
| position: fixed; |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: white; |
| font-size: 12px; |
| } |
| |
| .secret-button:hover { |
| background: rgba(59, 130, 246, 0.5); |
| transform: scale(1.2); |
| } |
| |
| body { |
| background: #0f172a; |
| color: #e2e8f0; |
| overflow-x: hidden; |
| min-height: 100vh; |
| } |
| |
| .blog-post { |
| background: rgba(15, 23, 42, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(59, 130, 246, 0.2); |
| transition: all 0.3s ease; |
| } |
| |
| .blog-post:hover { |
| border-color: rgba(59, 130, 246, 0.5); |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); |
| } |
| |
| .glow-text { |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); |
| } |
| |
| .alien-text { |
| font-family: 'Courier New', monospace; |
| color: #10b981; |
| } |
| |
| .cursor-trail { |
| position: fixed; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: rgba(59, 130, 246, 0.5); |
| pointer-events: none; |
| transform: translate(-50%, -50%); |
| z-index: 9999; |
| mix-blend-mode: screen; |
| } |
| </style> |
| </head> |
| <body class="relative"> |
| |
| <div id="cursor-trail" class="cursor-trail"></div> |
| |
| |
| <div class="secret-button" style="top: 20%; left: 10%;" onclick="revealMessage(1)">?</div> |
| <div class="secret-button" style="top: 70%; left: 85%;" onclick="revealMessage(2)">?</div> |
| <div class="secret-button" style="top: 40%; left: 5%;" onclick="revealMessage(3)">?</div> |
| <div class="secret-button" style="top: 10%; left: 90%;" onclick="revealMessage(4)">?</div> |
| <div class="secret-button" style="top: 80%; left: 15%;" onclick="revealMessage(5)">?</div> |
| |
| |
| <div id="ufo-container-1" class="ufo-container absolute top-20 left-1/4 z-10"> |
| <div class="ufo w-16 h-8 bg-gray-700 rounded-full relative"> |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-4 bg-blue-500 rounded-full"></div> |
| <div class="ufo-beam"></div> |
| </div> |
| </div> |
| |
| <div id="ufo-container-2" class="ufo-container absolute top-1/3 right-1/4 z-10"> |
| <div class="ufo w-20 h-10 bg-gray-600 rounded-full relative"> |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-5 bg-green-500 rounded-full"></div> |
| <div class="ufo-beam"></div> |
| </div> |
| </div> |
| |
| <div id="ufo-container-3" class="ufo-container absolute bottom-1/4 left-1/3 z-10"> |
| <div class="ufo w-12 h-6 bg-gray-800 rounded-full relative"> |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-3 bg-purple-500 rounded-full"></div> |
| <div class="ufo-beam"></div> |
| </div> |
| </div> |
| |
| |
| <header class="py-10 px-4 sm:px-6 lg:px-8 text-center relative z-20"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 glow-text">UFO Blogger</h1> |
| <p class="text-xl md:text-2xl mb-6">The truth is out there... and we're reporting it!</p> |
| |
| <div class="max-w-2xl mx-auto relative"> |
| <input type="text" placeholder="Search for alien encounters..." |
| class="w-full px-4 py-2 rounded-full bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-full"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </header> |
| |
| |
| <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-20"> |
| |
| <div class="blog-post rounded-lg p-6 mb-10 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-transparent"></div> |
| <div class="relative z-10"> |
| <div class="flex items-center mb-4"> |
| <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded mr-2">Featured</span> |
| <span class="text-gray-400 text-sm">Posted 2 days ago</span> |
| </div> |
| <h2 class="text-2xl md:text-3xl font-bold mb-3 glow-text">Massive UFO Sighting Over Nevada Desert</h2> |
| <p class="mb-4">Multiple witnesses report seeing a fleet of unidentified flying objects performing impossible maneuvers near Area 51. Military officials deny any knowledge...</p> |
| <div class="flex justify-between items-center"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Read More</button> |
| <div class="flex space-x-2"> |
| <span class="text-gray-400"><i class="fas fa-eye mr-1"></i> 4.2K</span> |
| <span class="text-gray-400"><i class="fas fa-comment mr-1"></i> 187</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10"> |
| |
| <div class="blog-post rounded-lg p-4"> |
| <img src="https://source.unsplash.com/random/600x400/?ufo" alt="UFO" class="w-full h-48 object-cover rounded mb-4"> |
| <h3 class="text-xl font-bold mb-2">Alien Abduction Stories: Fact or Fiction?</h3> |
| <p class="text-gray-400 text-sm mb-3">We analyze the most famous abduction claims and the science behind them.</p> |
| <div class="flex justify-between items-center"> |
| <button class="text-blue-400 hover:text-blue-300 text-sm">Read More →</button> |
| <span class="text-gray-500 text-xs">5 min read</span> |
| </div> |
| </div> |
| |
| |
| <div class="blog-post rounded-lg p-4"> |
| <img src="https://source.unsplash.com/random/600x400/?space" alt="Space" class="w-full h-48 object-cover rounded mb-4"> |
| <h3 class="text-xl font-bold mb-2">NASA's Unexplained Anomalies</h3> |
| <p class="text-gray-400 text-sm mb-3">Strange objects caught on camera during space missions that NASA can't explain.</p> |
| <div class="flex justify-between items-center"> |
| <button class="text-blue-400 hover:text-blue-300 text-sm">Read More →</button> |
| <span class="text-gray-500 text-xs">8 min read</span> |
| </div> |
| </div> |
| |
| |
| <div class="blog-post rounded-lg p-4"> |
| <img src="https://source.unsplash.com/random/600x400/?alien" alt="Alien" class="w-full h-48 object-cover rounded mb-4"> |
| <h3 class="text-xl font-bold mb-2">The Roswell Incident: New Evidence</h3> |
| <p class="text-gray-400 text-sm mb-3">Recently declassified documents shed new light on the infamous 1947 crash.</p> |
| <div class="flex justify-between items-center"> |
| <button class="text-blue-400 hover:text-blue-300 text-sm">Read More →</button> |
| <span class="text-gray-500 text-xs">12 min read</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="hidden-message-1" class="hidden-message bg-gray-800 border border-blue-500 rounded-lg p-4 mb-6"> |
| <h3 class="text-lg font-bold text-blue-400 mb-2">SECRET MESSAGE #1</h3> |
| <p class="alien-text">Greetings Earthling. We have been monitoring your planet. Your primitive technology amuses us. Resistance is futile.</p> |
| </div> |
| |
| <div id="hidden-message-2" class="hidden-message bg-gray-800 border border-green-500 rounded-lg p-4 mb-6"> |
| <h3 class="text-lg font-bold text-green-400 mb-2">SECRET MESSAGE #2</h3> |
| <p class="alien-text">The truth about UFOs is being hidden by your governments. Look to the skies on the next full moon.</p> |
| </div> |
| |
| <div id="hidden-message-3" class="hidden-message bg-gray-800 border border-purple-500 rounded-lg p-4 mb-6"> |
| <h3 class="text-lg font-bold text-purple-400 mb-2">SECRET MESSAGE #3</h3> |
| <p class="alien-text">We come in peace. Take us to your leader. Just kidding, we already know where they are.</p> |
| </div> |
| |
| <div id="hidden-message-4" class="hidden-message bg-gray-800 border border-yellow-500 rounded-lg p-4 mb-6"> |
| <h3 class="text-lg font-bold text-yellow-400 mb-2">SECRET MESSAGE #4</h3> |
| <p class="alien-text">The answer to life, the universe, and everything is... actually we forgot. Too much space travel.</p> |
| </div> |
| |
| <div id="hidden-message-5" class="hidden-message bg-gray-800 border border-red-500 rounded-lg p-4 mb-6"> |
| <h3 class="text-lg font-bold text-red-400 mb-2">SECRET MESSAGE #5</h3> |
| <p class="alien-text">DANGER! Do not trust the reptilians! They walk among you! (This message will self-destruct in 5... 4... 3...)</p> |
| </div> |
| |
| |
| <div class="blog-post rounded-lg p-6 text-center"> |
| <h3 class="text-xl font-bold mb-3">Join Our UFO Alert Newsletter</h3> |
| <p class="mb-4">Get instant notifications about UFO sightings in your area!</p> |
| <div class="max-w-md mx-auto flex"> |
| <input type="email" placeholder="Your email address" |
| class="flex-grow px-4 py-2 rounded-l bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r"> |
| Subscribe <i class="fas fa-paper-plane ml-1"></i> |
| </button> |
| </div> |
| </div> |
| </main> |
| |
| |
| <footer class="py-8 px-4 sm:px-6 lg:px-8 text-center text-gray-500 text-sm relative z-20"> |
| <div class="mb-4"> |
| <a href="#" class="mx-2 hover:text-blue-400">About</a> |
| <a href="#" class="mx-2 hover:text-blue-400">Contact</a> |
| <a href="#" class="mx-2 hover:text-blue-400">Privacy</a> |
| <a href="#" class="mx-2 hover:text-blue-400">Terms</a> |
| </div> |
| <p>© 2023 UFO Blogger. All rights reserved. (Unless the aliens say otherwise)</p> |
| <p class="mt-2 text-xs">Disclaimer: The views expressed on this site may or may not be those of extraterrestrial beings.</p> |
| </footer> |
| |
| <script> |
| |
| function moveUFOs() { |
| const ufos = [ |
| { element: document.getElementById('ufo-container-1'), speed: 0.5 }, |
| { element: document.getElementById('ufo-container-2'), speed: 0.3 }, |
| { element: document.getElementById('ufo-container-3'), speed: 0.7 } |
| ]; |
| |
| let positions = [ |
| { x: 25, y: 20, directionX: 1, directionY: 1 }, |
| { x: 75, y: 30, directionX: -1, directionY: 1 }, |
| { x: 50, y: 40, directionX: 1, directionY: -1 } |
| ]; |
| |
| function updatePositions() { |
| ufos.forEach((ufo, index) => { |
| |
| positions[index].x += 0.2 * ufo.speed * positions[index].directionX; |
| positions[index].y += 0.1 * ufo.speed * positions[index].directionY; |
| |
| |
| if (positions[index].x > 90 || positions[index].x < 10) { |
| positions[index].directionX *= -1; |
| } |
| if (positions[index].y > 80 || positions[index].y < 10) { |
| positions[index].directionY *= -1; |
| } |
| |
| |
| ufo.element.style.left = `${positions[index].x}%`; |
| ufo.element.style.top = `${positions[index].y}%`; |
| }); |
| |
| requestAnimationFrame(updatePositions); |
| } |
| |
| updatePositions(); |
| } |
| |
| |
| function revealMessage(number) { |
| const message = document.getElementById(`hidden-message-${number}`); |
| message.classList.toggle('show-message'); |
| |
| |
| setTimeout(() => { |
| message.classList.remove('show-message'); |
| }, 5000); |
| } |
| |
| |
| function setupCursorTrail() { |
| const cursor = document.getElementById('cursor-trail'); |
| let posX = 0, posY = 0; |
| let mouseX = 0, mouseY = 0; |
| |
| document.addEventListener('mousemove', (e) => { |
| mouseX = e.clientX; |
| mouseY = e.clientY; |
| }); |
| |
| function updateCursor() { |
| posX += (mouseX - posX) / 10; |
| posY += (mouseY - posY) / 10; |
| |
| cursor.style.left = `${posX}px`; |
| cursor.style.top = `${posY}px`; |
| |
| requestAnimationFrame(updateCursor); |
| } |
| |
| updateCursor(); |
| } |
| |
| |
| let typedKeys = []; |
| document.addEventListener('keydown', (e) => { |
| typedKeys.push(e.key.toLowerCase()); |
| if (typedKeys.length > 3) typedKeys.shift(); |
| |
| if (typedKeys.join('') === 'ufo') { |
| summonExtraUFOs(); |
| typedKeys = []; |
| } |
| }); |
| |
| function summonExtraUFOs() { |
| for (let i = 0; i < 3; i++) { |
| const ufo = document.createElement('div'); |
| ufo.className = 'ufo-container absolute z-10'; |
| ufo.style.left = `${Math.random() * 80 + 10}%`; |
| ufo.style.top = `${Math.random() * 80 + 10}%`; |
| |
| const size = Math.random() * 20 + 10; |
| const color = `hsl(${Math.random() * 360}, 70%, 50%)`; |
| |
| ufo.innerHTML = ` |
| <div class="ufo w-${size} h-${size/2} bg-gray-700 rounded-full relative"> |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-${size-6} h-${size/2-3} rounded-full" style="background: ${color}"></div> |
| <div class="ufo-beam"></div> |
| </div> |
| `; |
| |
| document.body.appendChild(ufo); |
| |
| |
| animateNewUFO(ufo); |
| } |
| |
| |
| const alert = document.createElement('div'); |
| alert.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg z-50'; |
| alert.textContent = 'You summoned more UFOs! The aliens are pleased.'; |
| document.body.appendChild(alert); |
| |
| setTimeout(() => { |
| alert.remove(); |
| }, 3000); |
| } |
| |
| function animateNewUFO(ufoElement) { |
| let x = parseFloat(ufoElement.style.left); |
| let y = parseFloat(ufoElement.style.top); |
| let directionX = Math.random() > 0.5 ? 1 : -1; |
| let directionY = Math.random() > 0.5 ? 1 : -1; |
| const speed = Math.random() * 0.3 + 0.2; |
| |
| function updatePosition() { |
| x += 0.2 * speed * directionX; |
| y += 0.1 * speed * directionY; |
| |
| if (x > 90 || x < 10) directionX *= -1; |
| if (y > 80 || y < 10) directionY *= -1; |
| |
| ufoElement.style.left = `${x}%`; |
| ufoElement.style.top = `${y}%`; |
| |
| requestAnimationFrame(updatePosition); |
| } |
| |
| updatePosition(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| moveUFOs(); |
| setupCursorTrail(); |
| |
| |
| document.querySelectorAll('.ufo').forEach(ufo => { |
| ufo.addEventListener('click', () => { |
| const beam = ufo.querySelector('.ufo-beam'); |
| beam.style.animation = 'none'; |
| void beam.offsetWidth; |
| beam.style.animation = 'beam 2s'; |
| |
| |
| const messages = [ |
| "Beam activated!", |
| "Hello human!", |
| "We mean no harm!", |
| "Resistance is futile!", |
| "Take me to your leader!", |
| "We come in peace!" |
| ]; |
| |
| const randomMsg = messages[Math.floor(Math.random() * messages.length)]; |
| |
| const msgElement = document.createElement('div'); |
| msgElement.className = 'absolute top-full left-1/2 transform -translate-x-1/2 mt-2 bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap'; |
| msgElement.textContent = randomMsg; |
| ufo.appendChild(msgElement); |
| |
| setTimeout(() => { |
| msgElement.remove(); |
| }, 2000); |
| }); |
| }); |
| }); |
| </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=Aycheff/blogger" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
