Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Global News Hub - Putin Challenges Trump from New Delhi</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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #dc2626; | |
| --secondary-color: #1f2937; | |
| --accent-color: #eab308; | |
| --bg-color: #ffffff; | |
| --text-color: #111827; | |
| --text-light: #6b7280; | |
| --border-color: #e5e7eb; | |
| --shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 25px 50px rgba(0,0,0,0.15); | |
| --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #dc2626 100%); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="dark"] { | |
| --bg-color: #0f0f23; | |
| --text-color: #f9fafb; | |
| --text-light: #9ca3af; | |
| --border-color: #374151; | |
| --shadow: 0 10px 25px rgba(0,0,0,0.4); | |
| --shadow-lg: 0 25px 50px rgba(0,0,0,0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| background: var(--bg-color); | |
| overflow-x: hidden; | |
| } | |
| /* Header */ | |
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| background: rgba(255,255,255,0.95); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| [data-theme="dark"] header { | |
| background: rgba(15,15,35,0.95); | |
| } | |
| .header-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 70px; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| background: var(--gradient-hero); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav a { | |
| text-decoration: none; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| nav a:hover { | |
| color: var(--primary-color); | |
| } | |
| nav a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-color); | |
| transition: var(--transition); | |
| } | |
| nav a:hover::after { | |
| width: 100%; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: 1px solid var(--border-color); | |
| color: var(--text-color); | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .theme-toggle:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| transform: scale(1.05); | |
| } | |
| .built-with { | |
| font-size: 0.85rem; | |
| color: var(--text-light); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .built-with:hover { | |
| color: var(--primary-color); | |
| } | |
| /* News Ticker */ | |
| .ticker { | |
| background: var(--secondary-color); | |
| color: white; | |
| padding: 0.5rem 0; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .ticker-content { | |
| display: inline-block; | |
| animation: ticker 25s linear infinite; | |
| } | |
| @keyframes ticker { | |
| 0% { transform: translate3d(100%, 0, 0); } | |
| 100% { transform: translate3d(-100%, 0, 0); } | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| position: relative; | |
| height: clamp(60vh, 80vw, 90vh); | |
| background: var(--gradient-hero); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: white; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="g" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff11"/><stop offset="50%" stop-color="%23ffffff00"/><stop offset="100%" stop-color="%23ffffff00"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23g)"><animate attributeName="r" values="100;150;100" dur="3s" repeatCount="indefinite"/></circle><circle cx="800" cy="300" r="80" fill="url(%23g)"><animate attributeName="r" values="80;120;80" dur="4s" repeatCount="indefinite"/></circle></svg>') no-repeat center/cover; | |
| animation: float 20s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(180deg); } | |
| } | |
| .hero-content { | |
| max-width: 1200px; | |
| padding: 0 2rem; | |
| z-index: 2; | |
| position: relative; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 5vw, 4.5rem); | |
| font-weight: 800; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.1; | |
| text-shadow: 0 4px 10px rgba(0,0,0,0.3); | |
| } | |
| .hero p { | |
| font-size: 1.3rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.95; | |
| max-width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .cta-button { | |
| background: rgba(255,255,255,0.2); | |
| backdrop-filter: blur(10px); | |
| border: 2px solid rgba(255,255,255,0.3); | |
| color: white; | |
| padding: 1rem 2.5rem; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .cta-button:hover { | |
| background: white; | |
| color: var(--secondary-color); | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* Main Content */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 4rem auto; | |
| padding: 0 2rem; | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 4rem; | |
| } | |
| /* Article Cards */ | |
| .articles { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3rem; | |
| } | |
| .article-card { | |
| display: flex; | |
| gap: 2rem; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| .article-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .article-image { | |
| flex: 0 0 300px; | |
| height: 250px; | |
| background: var(--gradient-hero); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .article-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(45deg, #ff6b6b, #4ecdc4); | |
| opacity: 0.8; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| } | |
| .article-content { | |
| padding: 2rem; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .article-tag { | |
| display: inline-block; | |
| background: var(--accent-color); | |
| color: var(--secondary-color); | |
| padding: 0.3rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| width: fit-content; | |
| } | |
| .article-title { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| line-height: 1.3; | |
| margin-bottom: 1rem; | |
| color: var(--text-color); | |
| } | |
| .article-excerpt { | |
| color: var(--text-light); | |
| margin-bottom: 1.5rem; | |
| flex: 1; | |
| } | |
| .article-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| position: sticky; | |
| top: 100px; | |
| height: fit-content; | |
| } | |
| .sidebar-widget { | |
| background: var(--bg-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .sidebar h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--text-color); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .social-links a { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 1.2rem; | |
| transition: var(--transition); | |
| } | |
| .social-twitter { background: #1da1f2; } | |
| .social-facebook { background: #1877f2; } | |
| .social-linkedin { background: #0077b5; } | |
| .social-links a:hover { | |
| transform: translateY(-3px) scale(1.1); | |
| } | |
| /* Video Widget */ | |
| .video-widget { | |
| position: relative; | |
| height: 200px; | |
| background: #000; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| margin-bottom: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .video-widget:hover { | |
| transform: scale(1.02); | |
| } | |
| .video-widget::after { | |
| content: '▶'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 4rem; | |
| color: white; | |
| z-index: 2; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: var(--bg-color); | |
| max-width: 900px; | |
| max-height: 90vh; | |
| border-radius: 20px; | |
| overflow-y: auto; | |
| position: relative; | |
| animation: modalSlide 0.4s ease-out; | |
| } | |
| @keyframes modalSlide { | |
| from { opacity: 0; transform: scale(0.9) translateY(-50px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| .modal-header { | |
| padding: 2rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 1.5rem; | |
| right: 2rem; | |
| background: none; | |
| border: none; | |
| font-size: 2rem; | |
| color: var(--text-light); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .close-modal:hover { | |
| color: var(--primary-color); | |
| } | |
| .modal-body { | |
| padding: 2rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--secondary-color); | |
| color: white; | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| margin-top: 4rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .container { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .sidebar { | |
| position: static; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-container { | |
| padding: 0 1rem; | |
| flex-wrap: wrap; | |
| } | |
| nav ul { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .article-card { | |
| flex-direction: column; | |
| } | |
| .article-image { | |
| flex: none; | |
| height: 200px; | |
| width: 100%; | |
| } | |
| } | |
| /* Animations */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: var(--transition); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--border-color); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary-color); | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-container"> | |
| <div class="logo">Global News Hub</div> | |
| <nav> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#world">World</a></li> | |
| <li><a href="#politics">Politics</a></li> | |
| <li><a href="#india">India</a></li> | |
| <li><a href="#us">US</a></li> | |
| </ul> | |
| </nav> | |
| <div class="header-actions"> | |
| <button class="theme-toggle" id="themeToggle" title="Toggle Dark Mode"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="ticker"> | |
| <div class="ticker-content"> | |
| 🔴 Breaking: Putin warns Trump amid rising tensions | India stands firm | US markets react | More updates coming... | |
| </div> | |
| </div> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>Putin challenges Trump from New Delhi; 'Don't even try to make India…' | US in shock</h1> | |
| <p>In a stunning address during his visit to New Delhi, Russian President Vladimir Putin issued a direct challenge to US President-elect Donald Trump, urging him not to pressure India on geopolitical issues. The statement has sent shockwaves through Washington.</p> | |
| <a href="#" class="cta-button" id="readMoreBtn"> | |
| <i class="fas fa-newspaper"></i> Read Full Story | |
| </a> | |
| </div> | |
| </section> | |
| <main class="container"> | |
| <section class="articles"> | |
| <article class="article-card reveal"> | |
| <div class="article-image"></div> | |
| <div class="article-content"> | |
| <span class="article-tag">Breaking</span> | |
| <h2 class="article-title">Putin's Full Statement: "India is a Sovereign Power – Hands Off!"</h2> | |
| <p class="article-excerpt">Putin, speaking alongside Indian PM Narendra Modi, emphasized Russia's strategic partnership with India and warned against any attempts to coerce New Delhi into aligning against Moscow. "Don't even try to make India choose sides," he declared.</p> | |
| <div class="article-meta"> | |
| <span><i class="fas fa-clock"></i> 2 hours ago</span> | |
| <span><i class="fas fa-eye"></i> 1.2M views</span> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="article-card reveal"> | |
| <div class="article-image" style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);"></div> | |
| <div class="article-content"> | |
| <span class="article-tag">US Reaction</span> | |
| <h2 class="article-title">White House in Turmoil: Trump's Team Scrambles for Response</h2> | |
| <p class="article-excerpt">US officials express shock at Putin's bold move from Indian soil. Trump's incoming administration hints at potential sanctions, but analysts warn of escalating global tensions.</p> | |
| <div class="article-meta"> | |
| <span><i class="fas fa-clock"></i> 1 hour ago</span> | |
| <span><i class="fas fa-eye"></i> 850K views</span> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="article-card reveal"> | |
| <div class="article-image" style="background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);"></div> | |
| <div class="article-content"> | |
| <span class="article-tag">India Stance</span> | |
| <h2 class="article-title">Modi Government Reaffirms Neutrality Amid Superpower Rivalry</h2> | |
| <p class="article-excerpt">India's Ministry of External Affairs issues statement supporting multi-polar world order, praising Putin's visit as a milestone in bilateral ties.</p> | |
| <div class="article-meta"> | |
| <span><i class="fas fa-clock"></i> 45 mins ago</span> | |
| <span><i class="fas fa-eye"></i> 650K views</span> | |
| </div> | |
| </div> | |
| </article> | |
| </section> | |
| <aside class="sidebar"> | |
| <div class="sidebar-widget"> | |
| <h3><i class="fas fa-play-circle"></i> Watch Live</h3> | |
| <div class="video-widget" id="videoWidget"> | |
| <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; z-index: 1; display: none;">Video playing...</p> | |
| </div> | |
| <p style="font-size: 0.9rem; color: var(--text-light);">Putin's New Delhi Speech Highlights</p> | |
| </div> | |
| <div class="sidebar-widget"> | |
| <h3><i class="fas fa-share-alt"></i> Share This Story</h3> | |
| <div class="social-links"> | |
| <a href="#" class="social-twitter" title="Twitter"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-facebook" title="Facebook"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="social-linkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Full Article Modal --> | |
| <div class="modal" id="articleModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Putin challenges Trump from New Delhi; 'Don't even try to make India…' | US in shock</h2> | |
| <button class="close-modal" id="closeModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <p><strong>New Delhi, India:</strong> In an unprecedented diplomatic maneuver, Russian President Vladimir Putin used his high-profile visit to India to deliver a pointed message to US President-elect Donald Trump. Speaking at a joint press conference with Prime Minister Narendra Modi, Putin stated, "Don't even try to make India bend to your will. India is a great civilization and a sovereign power."</p> | |
| <p>The remarks, made against the backdrop of strengthening Russia-India ties, have stunned observers in Washington. Analysts suggest this is Putin's way of signaling that India will not be easily swayed in the emerging US-Russia rivalry.</p> | |
| <p>Trump's team has yet to respond officially, but sources indicate internal shock and hurried strategy sessions. Markets reacted with volatility, as investors weigh the implications for global supply chains and energy deals.</p> | |
| <blockquote>"This is a clear red line," Putin added, referencing India's strategic autonomy policy.</blockquote> | |
| <p>Further developments expected as Modi government reaffirms commitment to non-alignment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2024 Global News Hub. All rights reserved. | Stay informed, stay ahead.</p> | |
| </footer> | |
| <script> | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const body = document.body; | |
| themeToggle.addEventListener('click', () => { | |
| body.dataset.theme = body.dataset.theme === 'dark' ? 'light' : 'dark'; | |
| const icon = themeToggle.querySelector('i'); | |
| icon.classList.toggle('fa-moon'); | |
| icon.classList.toggle('fa-sun'); | |
| }); | |
| // Modal | |
| const readMoreBtn = document.getElementById('readMoreBtn'); | |
| const articleModal = document.getElementById('articleModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| readMoreBtn.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| articleModal.classList.add('active'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| articleModal.classList.remove('active'); | |
| }); | |
| articleModal.addEventListener('click', (e) => { | |
| if (e.target === articleModal) { | |
| articleModal.classList.remove('active'); | |
| } | |
| }); | |
| // Video Widget | |
| const videoWidget = document.getElementById('videoWidget'); | |
| videoWidget.addEventListener('click', () => { | |
| const playText = videoWidget.querySelector('p'); | |
| playText.style.display = 'block'; | |
| setTimeout(() => { | |
| playText.style.display = 'none'; | |
| alert('Simulated video playback. Putin\'s speech highlights playing! (Demo)'); | |
| }, 2000); | |
| }); | |
| // Scroll Animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); | |
| // Smooth Scroll for Nav | |
| document.querySelectorAll('nav a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |