Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WeatherScope - Cyberpunk Weather App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --cyber-blue: #00f7ff; | |
| --cyber-pink: #ff00f7; | |
| --cyber-purple: #8a2be2; | |
| --cyber-dark: #0a0a1a; | |
| --cyber-light: #e0e0ff; | |
| --card-radius: 16px; | |
| --card-shadow: 0 10px 30px rgba(0, 247, 255, 0.2); | |
| --transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Rajdhani', sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%); | |
| color: var(--cyber-light); | |
| min-height: 100vh; | |
| padding: 40px 20px; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| /* Cyberpunk scanlines overlay */ | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| linear-gradient(rgba(0, 247, 255, 0.06) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 247, 255, 0.06) 1px, transparent 1px); | |
| background-size: 3px 3px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Cyberpunk grid overlay */ | |
| body::after { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| linear-gradient(to bottom, | |
| transparent 0%, | |
| rgba(138, 43, 226, 0.05) 50%, | |
| transparent 100%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| h1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 64px; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| margin-bottom: 16px; | |
| text-transform: uppercase; | |
| background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 10px rgba(0, 247, 255, 0.3); | |
| position: relative; | |
| display: inline-block; | |
| } | |
| h1::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 200px; | |
| height: 3px; | |
| background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent); | |
| box-shadow: 0 0 15px var(--cyber-blue); | |
| } | |
| .subtitle { | |
| font-size: 20px; | |
| color: var(--cyber-blue); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| font-weight: 300; | |
| letter-spacing: 1px; | |
| text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); | |
| } | |
| .weather-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .weather-card { | |
| background: rgba(10, 10, 26, 0.7); | |
| border-radius: var(--card-radius); | |
| box-shadow: var(--card-shadow); | |
| overflow: hidden; | |
| transition: var(--transition); | |
| position: relative; | |
| border: 1px solid rgba(0, 247, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .weather-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: var(--card-radius); | |
| border: 1px solid transparent; | |
| background: linear-gradient(135deg, rgba(0, 247, 255, 0.3), rgba(255, 0, 247, 0.1)) border-box; | |
| -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .weather-card:hover { | |
| transform: translateY(-10px) rotateX(5deg) rotateY(5deg); | |
| box-shadow: 0 15px 40px rgba(0, 247, 255, 0.3); | |
| } | |
| .weather-header { | |
| padding: 25px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .location { | |
| font-size: 26px; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| color: var(--cyber-blue); | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .date { | |
| font-size: 16px; | |
| color: var(--cyber-pink); | |
| margin-bottom: 15px; | |
| font-weight: 300; | |
| } | |
| .weather-main { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .temperature { | |
| font-size: 72px; | |
| font-weight: 300; | |
| margin-right: 15px; | |
| line-height: 1; | |
| background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .weather-icon { | |
| width: 70px; | |
| height: 70px; | |
| margin-right: 15px; | |
| filter: drop-shadow(0 0 5px var(--cyber-blue)); | |
| } | |
| .weather-description { | |
| font-size: 20px; | |
| font-weight: 500; | |
| color: var(--cyber-light); | |
| } | |
| .weather-details { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .detail-icon { | |
| width: 24px; | |
| height: 24px; | |
| margin-right: 10px; | |
| color: var(--cyber-blue); | |
| } | |
| .detail-value { | |
| font-size: 16px; | |
| color: var(--cyber-light); | |
| } | |
| .aqi-container { | |
| margin-top: 25px; | |
| border-top: 1px solid rgba(0, 247, 255, 0.2); | |
| padding-top: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .aqi-location { | |
| font-size: 14px; | |
| color: var(--cyber-pink); | |
| } | |
| .aqi-indicator { | |
| padding: 8px 15px; | |
| border-radius: 100px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .aqi-good { | |
| background-color: rgba(0, 255, 42, 0.1); | |
| color: #00ff2a; | |
| border: 1px solid rgba(0, 255, 42, 0.3); | |
| } | |
| .aqi-moderate { | |
| background-color: rgba(255, 204, 0, 0.1); | |
| color: #ffcc00; | |
| border: 1px solid rgba(255, 204, 0, 0.3); | |
| } | |
| .aqi-unhealthy { | |
| background-color: rgba(255, 0, 0, 0.1); | |
| color: #ff0000; | |
| border: 1px solid rgba(255, 0, 0, 0.3); | |
| } | |
| .weather-animation { | |
| height: 180px; | |
| width: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Sunny Animation */ | |
| .sunny-animation { | |
| background: linear-gradient(to bottom, #001a33 0%, #003366 100%); | |
| } | |
| .sun { | |
| position: absolute; | |
| width: 70px; | |
| height: 70px; | |
| background: #ffcc00; | |
| border-radius: 50%; | |
| box-shadow: 0 0 50px 20px #ffcc00; | |
| top: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| animation: sunPulse 4s infinite alternate; | |
| filter: drop-shadow(0 0 10px #ffcc00); | |
| } | |
| @keyframes sunPulse { | |
| 0% { box-shadow: 0 0 50px 20px #ffcc00; } | |
| 100% { box-shadow: 0 0 70px 30px #ffcc00; } | |
| } | |
| /* Cloudy Animation */ | |
| .cloudy-animation { | |
| background: linear-gradient(to bottom, #1a1a2e 0%, #2a2a4a 100%); | |
| } | |
| .cloud { | |
| position: absolute; | |
| background: rgba(224, 224, 255, 0.8); | |
| border-radius: 50%; | |
| filter: drop-shadow(0 0 5px rgba(0, 247, 255, 0.5)); | |
| } | |
| .cloud1 { | |
| width: 100px; | |
| height: 40px; | |
| top: 50px; | |
| left: 20%; | |
| animation: cloudMove 30s linear infinite; | |
| } | |
| .cloud2 { | |
| width: 140px; | |
| height: 55px; | |
| top: 30px; | |
| left: 50%; | |
| animation: cloudMove 40s linear infinite reverse; | |
| } | |
| .cloud3 { | |
| width: 80px; | |
| height: 30px; | |
| top: 70px; | |
| left: 70%; | |
| animation: cloudMove 35s linear infinite; | |
| } | |
| @keyframes cloudMove { | |
| 0% { transform: translateX(-150px); } | |
| 100% { transform: translateX(450px); } | |
| } | |
| /* Haze Animation */ | |
| .haze-animation { | |
| background: linear-gradient(to bottom, #2a2a4a 0%, #3a3a5a 100%); | |
| position: relative; | |
| } | |
| .haze-particle { | |
| position: absolute; | |
| background: rgba(255, 0, 247, 0.3); | |
| border-radius: 50%; | |
| animation: hazeFloat linear infinite; | |
| filter: blur(1px); | |
| } | |
| @keyframes hazeFloat { | |
| 0% { transform: translateY(0) translateX(0); opacity: 0; } | |
| 50% { opacity: 0.7; } | |
| 100% { transform: translateY(-150px) translateX(50px); opacity: 0; } | |
| } | |
| /* Rain Animation */ | |
| .rain-animation { | |
| background: linear-gradient(to bottom, #1a1a2e 0%, #2a2a4a 100%); | |
| } | |
| .raindrop { | |
| position: absolute; | |
| background: var(--cyber-blue); | |
| width: 2px; | |
| height: 20px; | |
| border-radius: 0 0 5px 5px; | |
| animation: rainFall linear infinite; | |
| filter: drop-shadow(0 0 5px var(--cyber-blue)); | |
| } | |
| @keyframes rainFall { | |
| 0% { transform: translateY(-50px); } | |
| 100% { transform: translateY(230px); } | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 80px; | |
| color: var(--cyber-blue); | |
| font-size: 14px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .refresh-btn { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 70px; | |
| height: 70px; | |
| background: linear-gradient(135deg, var(--cyber-blue), var(--cyber-purple)); | |
| color: var(--cyber-dark); | |
| border: none; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 0 20px rgba(0, 247, 255, 0.5); | |
| z-index: 10; | |
| font-size: 24px; | |
| font-weight: bold; | |
| } | |
| .refresh-btn:hover { | |
| transform: scale(1.1) rotate(180deg); | |
| box-shadow: 0 0 30px rgba(0, 247, 255, 0.8); | |
| } | |
| /* Cyberpunk glitch effect */ | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--cyber-dark); | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 var(--cyber-pink); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 5s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 var(--cyber-blue); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim2 5s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(144px, 9999px, 41px, 0); } | |
| 20% { clip: rect(138px, 9999px, 99px, 0); } | |
| 30% { clip: rect(17px, 9999px, 54px, 0); } | |
| 40% { clip: rect(94px, 9999px, 75px, 0); } | |
| 50% { clip: rect(54px, 9999px, 60px, 0); } | |
| 60% { clip: rect(108px, 9999px, 138px, 0); } | |
| 70% { clip: rect(132px, 9999px, 74px, 0); } | |
| 80% { clip: rect(22px, 9999px, 61px, 0); } | |
| 90% { clip: rect(64px, 9999px, 44px, 0); } | |
| 100% { clip: rect(10px, 9999px, 2px, 0); } | |
| } | |
| /* Floating cyberpunk elements */ | |
| .cyber-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(40px); | |
| opacity: 0.3; | |
| z-index: 0; | |
| } | |
| .orb-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--cyber-blue); | |
| top: -150px; | |
| right: -150px; | |
| } | |
| .orb-2 { | |
| width: 400px; | |
| height: 400px; | |
| background: var(--cyber-pink); | |
| bottom: -200px; | |
| left: -200px; | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 42px; | |
| } | |
| .weather-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .temperature { | |
| font-size: 56px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="cyber-orb orb-1"></div> | |
| <div class="cyber-orb orb-2"></div> | |
| <div class="container"> | |
| <header> | |
| <h1 class="glitch" data-text="WEATHERSCOPE">WEATHERSCOPE</h1> | |
| <p class="subtitle">REAL-TIME CYBER WEATHER DATA STREAM</p> | |
| </header> | |
| <div class="weather-grid"> | |
| <!-- Jaipur --> | |
| <div class="weather-card"> | |
| <div class="weather-animation sunny-animation" id="jaipur-animation"> | |
| <div class="sun"></div> | |
| </div> | |
| <div class="weather-header"> | |
| <h2 class="location">JAIPUR, INDIA</h2> | |
| <p class="date">Tuesday, June 6, 2023</p> | |
| <div class="weather-main"> | |
| <div class="temperature">34°</div> | |
| <img src="https://cdn.weatherbit.io/static/img/icons/c01d.png" alt="Clear sky" class="weather-icon"> | |
| <div class="weather-description">SUNNY</div> | |
| </div> | |
| <div class="weather-details"> | |
| <div class="detail-item"> | |
| <i class="fas fa-wind detail-icon"></i> | |
| <span class="detail-value">12 km/h</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-tint detail-icon"></i> | |
| <span class="detail-value">25%</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-sun detail-icon"></i> | |
| <span class="detail-value">UV 8</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-eye detail-icon"></i> | |
| <span class="detail-value">10 km</span> | |
| </div> | |
| </div> | |
| <div class="aqi-container"> | |
| <div class="aqi-location"> | |
| <i class="fas fa-map-marker-alt"></i> AMER FORT STATION | |
| </div> | |
| <div class="aqi-indicator aqi-moderate"> | |
| <i class="fas fa-smog"></i> AQI: 78 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Delhi --> | |
| <div class="weather-card"> | |
| <div class="weather-animation haze-animation" id="delhi-animation"> | |
| <!-- Haze particles will be added by JS --> | |
| </div> | |
| <div class="weather-header"> | |
| <h2 class="location">NEW DELHI, INDIA</h2> | |
| <p class="date">Tuesday, June 6, 2023</p> | |
| <div class="weather-main"> | |
| <div class="temperature">38°</div> | |
| <img src="https://cdn.weatherbit.io/static/img/icons/h01d.png" alt="Haze" class="weather-icon"> | |
| <div class="weather-description">HAZE</div> | |
| </div> | |
| <div class="weather-details"> | |
| <div class="detail-item"> | |
| <i class="fas fa-wind detail-icon"></i> | |
| <span class="detail-value">8 km/h</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-tint detail-icon"></i> | |
| <span class="detail-value">40%</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-sun detail-icon"></i> | |
| <span class="detail-value">UV 9</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-eye detail-icon"></i> | |
| <span class="detail-value">3 km</span> | |
| </div> | |
| </div> | |
| <div class="aqi-container"> | |
| <div class="aqi-location"> | |
| <i class="fas fa-map-marker-alt"></i> CONNAUGHT PLACE STATION | |
| </div> | |
| <div class="aqi-indicator aqi-unhealthy"> | |
| <i class="fas fa-smog"></i> AQI: 156 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New York --> | |
| <div class="weather-card"> | |
| <div class="weather-animation cloudy-animation" id="nyc-animation"> | |
| <div class="cloud cloud1"></div> | |
| <div class="cloud cloud2"></div> | |
| <div class="cloud cloud3"></div> | |
| </div> | |
| <div class="weather-header"> | |
| <h2 class="location">NEW YORK, USA</h2> | |
| <p class="date">Tuesday, June 6, 2023</p> | |
| <div class="weather-main"> | |
| <div class="temperature">22°</div> | |
| <img src="https://cdn.weatherbit.io/static/img/icons/c03d.png" alt="Cloudy" class="weather-icon"> | |
| <div class="weather-description">CLOUDY</div> | |
| </div> | |
| <div class="weather-details"> | |
| <div class="detail-item"> | |
| <i class="fas fa-wind detail-icon"></i> | |
| <span class="detail-value">18 km/h</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-tint detail-icon"></i> | |
| <span class="detail-value">65%</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-sun detail-icon"></i> | |
| <span class="detail-value">UV 4</span> | |
| </div> | |
| <div class="detail-item"> | |
| <i class="fas fa-eye detail-icon"></i> | |
| <span class="detail-value">8 km</span> | |
| </div> | |
| </div> | |
| <div class="aqi-container"> | |
| <div class="aqi-location"> | |
| <i class="fas fa-map-marker-alt"></i> MANHATTAN STATION | |
| </div> | |
| <div class="aqi-indicator aqi-good"> | |
| <i class="fas fa-smog"></i> AQI: 42 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2023 WEATHERSCOPE | CYBER WEATHER NETWORK v4.2</p> | |
| </footer> | |
| <button class="refresh-btn" id="refresh-btn"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Current date formatting | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| const today = new Date(); | |
| const dateString = today.toLocaleDateString('en-US', options); | |
| // Update all date elements | |
| document.querySelectorAll('.date').forEach(el => { | |
| el.textContent = dateString; | |
| }); | |
| // Create haze particles for Delhi | |
| const delhiAnimation = document.getElementById('delhi-animation'); | |
| for (let i = 0; i < 30; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('haze-particle'); | |
| // Random size between 5px and 20px | |
| const size = Math.random() * 15 + 5; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random animation duration | |
| const duration = Math.random() * 20 + 10; | |
| particle.style.animationDuration = `${duration}s`; | |
| // Random delay | |
| particle.style.animationDelay = `${Math.random() * 10}s`; | |
| // Random opacity | |
| particle.style.opacity = Math.random() * 0.5 + 0.3; | |
| delhiAnimation.appendChild(particle); | |
| } | |
| // Create rain for London (example - not in our cities) | |
| function createRain(container, count) { | |
| for (let i = 0; i < count; i++) { | |
| const drop = document.createElement('div'); | |
| drop.classList.add('raindrop'); | |
| // Random position | |
| drop.style.left = `${Math.random() * 100}%`; | |
| // Random animation duration | |
| const duration = Math.random() * 0.5 + 0.5; | |
| drop.style.animationDuration = `${duration}s`; | |
| // Random delay | |
| drop.style.animationDelay = `${Math.random() * 2}s`; | |
| container.appendChild(drop); | |
| } | |
| } | |
| // Refresh button functionality | |
| const refreshBtn = document.getElementById('refresh-btn'); | |
| refreshBtn.addEventListener('click', function() { | |
| // Add rotation animation | |
| this.classList.add('refreshing'); | |
| // Simulate data refresh | |
| setTimeout(() => { | |
| // In a real app, we would fetch new data here | |
| // Remove rotation animation | |
| this.classList.remove('refreshing'); | |
| // Show notification | |
| showNotification('DATA STREAM UPDATED'); | |
| }, 1500); | |
| }); | |
| // Show cyberpunk notification | |
| function showNotification(message) { | |
| const notification = document.createElement('div'); | |
| notification.textContent = message; | |
| notification.style.position = 'fixed'; | |
| notification.style.bottom = '20px'; | |
| notification.style.left = '50%'; | |
| notification.style.transform = 'translateX(-50%)'; | |
| notification.style.backgroundColor = 'var(--cyber-dark)'; | |
| notification.style.color = 'var(--cyber-blue)'; | |
| notification.style.padding = '12px 30px'; | |
| notification.style.borderRadius = '4px'; | |
| notification.style.boxShadow = '0 0 20px rgba(0, 247, 255, 0.5)'; | |
| notification.style.zIndex = '1000'; | |
| notification.style.animation = 'fadeInOut 3s forwards'; | |
| notification.style.border = '1px solid var(--cyber-blue)'; | |
| notification.style.fontFamily = "'Orbitron', sans-serif"; | |
| notification.style.fontWeight = 'bold'; | |
| notification.style.letterSpacing = '1px'; | |
| notification.style.textTransform = 'uppercase'; | |
| document.body.appendChild(notification); | |
| // Remove after animation | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 3000); | |
| } | |
| // Add CSS for notification animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeInOut { | |
| 0% { opacity: 0; transform: translateX(-50%) translateY(20px); } | |
| 10% { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| 90% { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } | |
| } | |
| .refreshing { | |
| animation: rotate 1.5s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Add cyberpunk glitch effect randomly | |
| setInterval(() => { | |
| const cards = document.querySelectorAll('.weather-card'); | |
| const randomCard = cards[Math.floor(Math.random() * cards.length)]; | |
| randomCard.classList.add('glitch-effect'); | |
| setTimeout(() => { | |
| randomCard.classList.remove('glitch-effect'); | |
| }, 300); | |
| }, 5000); | |
| }); | |
| </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |