Spaces:

HIMANSHU2737
/

anycoder-80173924

Running

App Files Files Community

HIMANSHU2737 commited on Dec 5, 2025

Commit

5da2928

verified ·

1 Parent(s): bcecb40

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +424 -407

index.html CHANGED Viewed

@@ -3,18 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>India Powers Past Japan: 4th Largest Economy in the World</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --saffron: #FF9933;
-            --white: #FFFFFF;
-            --green: #138808;
-            --navy: #0F172A;
-            --gold: #FFD700;
-            --shadow: 0 20px 40px rgba(0,0,0,0.1);
-            --shadow-lg: 0 30px 60px rgba(0,0,0,0.2);
-            --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         * {
@@ -24,53 +26,82 @@
         }
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
-            color: var(--navy);
             overflow-x: hidden;
-            background: linear-gradient(135deg, var(--white) 0%, #f8f9ff 100%);
         }
         header {
             position: fixed;
             top: 0;
             width: 100%;
-            background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(20px);
             z-index: 1000;
-            padding: 1rem clamp(1rem, 3vw, 2rem);
-            display: flex;
-            justify-content: space-between;
             align-items: center;
-            box-shadow: var(--shadow);
         }
         .logo {
-            font-size: clamp(1.2rem, 2.5vw, 2rem);
-            font-weight: bold;
-            background: linear-gradient(135deg, var(--saffron), var(--green));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
         }
         .built-with {
             font-size: 0.9rem;
-            color: var(--navy);
         }
-        .built-with a {
-            color: var(--gold);
             text-decoration: none;
-            font-weight: 600;
         }
-        .built-with a:hover {
-            text-decoration: underline;
         }
         .hero {
             height: 100vh;
             display: flex;
@@ -78,10 +109,9 @@
             justify-content: center;
             align-items: center;
             text-align: center;
-            background: linear-gradient(135deg, var(--saffron) 0%, var(--white) 50%, var(--green) 100%);
             position: relative;
             overflow: hidden;
-            color: var(--white);
         }
         .hero::before {
@@ -91,473 +121,460 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="50%" cy="50%"><stop offset="0%" stop-color="rgba(255,255,255,0.3)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><circle cx="20" cy="20" r="2" fill="url(%23g)"><animate attributeName="r" values="2;3;2" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="80" r="1.5" fill="url(%23g)"><animate attributeName="r" values="1.5;2.5;1.5" dur="4s" repeatCount="indefinite"/></circle><circle cx="50" cy="30" r="2.5" fill="url(%23g)"><animate attributeName="r" values="2.5;3.5;2.5" dur="2.5s" repeatCount="indefinite"/></circle></svg>') repeat;
-            animation: sparkle 20s linear infinite;
-            opacity: 0.6;
         }
-        @keyframes sparkle {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(100px, 100px); }
         }
-        .hero h1 {
-            font-size: clamp(3rem, 8vw, 6rem);
-            font-weight: 900;
-            margin-bottom: 1rem;
-            text-shadow: 0 10px 30px rgba(0,0,0,0.3);
-            animation: heroIn 2s ease-out;
         }
-        @keyframes heroIn {
-            from { transform: scale(0.5) translateY(50px); opacity: 0; }
-            to { transform: scale(1) translateY(0); opacity: 1; }
         }
-        .hero p {
-            font-size: clamp(1.2rem, 3vw, 2rem);
             margin-bottom: 2rem;
-            animation: heroIn 2s ease-out 0.3s both;
-        }
-        .flag {
-            width: 100px;
-            height: 60px;
-            background: linear-gradient(to bottom, var(--saffron) 0% 33%, var(--white) 33% 66%, var(--green) 66% 100%);
-            border-radius: 10px;
-            margin: 1rem 0;
-            animation: wave 3s ease-in-out infinite;
-            box-shadow: var(--shadow-lg);
-        }
-        @keyframes wave {
-            0%, 100% { transform: rotate(0deg); }
-            50% { transform: rotate(5deg); }
         }
-        .scroll-indicator {
-            position: absolute;
-            bottom: 2rem;
-            font-size: 1.5rem;
-            animation: bounce 2s infinite;
         }
-        @keyframes bounce {
-            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
-            40% { transform: translateY(-10px); }
-            60% { transform: translateY(-5px); }
         }
-        section {
-            padding: clamp(4rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem);
             max-width: 1400px;
             margin: 0 auto;
         }
-        .stats {
-            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-        }
-        .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 2rem;
-            margin-top: 3rem;
         }
-        .stat-card {
-            background: var(--white);
-            padding: 2.5rem 2rem;
-            border-radius: 20px;
-            text-align: center;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-            position: relative;
-            overflow: hidden;
         }
-        .stat-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 4px;
-            background: linear-gradient(90deg, var(--saffron), var(--green));
-            transition: left 0.5s;
         }
-        .stat-card:hover::before {
-            left: 0;
         }
-        .stat-card:hover {
-            transform: translateY(-15px) scale(1.05);
-            box-shadow: var(--shadow-lg);
         }
-        .stat-icon {
-            font-size: 3rem;
-            background: linear-gradient(135deg, var(--saffron), var(--green));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 1rem;
         }
-        .stat-value {
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            font-weight: bold;
-            color: var(--navy);
-            margin-bottom: 0.5rem;
         }
-        .stat-label {
-            color: #64748b;
-            font-weight: 600;
         }
-        .comparison {
-            background: var(--white);
-            border-radius: 20px;
-            padding: 3rem;
-            box-shadow: var(--shadow);
-            margin: 4rem auto;
-            max-width: 1000px;
         }
-        .comparison h2 {
             text-align: center;
-            font-size: clamp(2rem, 4vw, 2.5rem);
-            margin-bottom: 2rem;
-            background: linear-gradient(135deg, var(--saffron), var(--green));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .chart-container {
-            position: relative;
-            height: 400px;
-            margin: 2rem 0;
         }
-        canvas {
-            width: 100%;
-            height: 100%;
-            border-radius: 15px;
         }
-        .timeline {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 2rem;
-            margin-top: 3rem;
         }
-        @media (min-width: 768px) {
-            .timeline {
-                grid-template-columns: 1fr 1fr;
-            }
         }
-        .milestone {
-            background: linear-gradient(135deg, var(--saffron), var(--green));
-            color: var(--white);
-            padding: 2rem;
-            border-radius: 15px;
-            position: relative;
-            animation: slideIn 1s ease-out forwards;
-            opacity: 0;
-            transform: translateX(-50px);
         }
-        .milestone:nth-child(even) {
-            transform: translateX(50px);
         }
-        @media (min-width: 768px) {
-            .milestone:nth-child(even) {
-                transform: translateX(50px);
-            }
         }
-        @keyframes slideIn {
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
         }
-        .milestone i {
-            font-size: 2rem;
-            margin-bottom: 1rem;
-            display: block;
         }
-        .milestone h3 {
-            margin-bottom: 1rem;
         }
-        .facts {
-            background: linear-gradient(135deg, var(--green), var(--saffron));
-            color: var(--white);
-            clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
-            margin: 4rem 0;
-            transform: skewY(-2deg);
-            padding: 4rem 2rem;
         }
-        .facts-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            transform: skewY(2deg);
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
         }
-        .fact {
-            text-align: center;
-            font-size: 1.2rem;
         }
-        footer {
-            background: var(--navy);
-            color: var(--white);
-            text-align: center;
             padding: 2rem;
-            font-size: 0.9rem;
         }
-        .observe {
-            opacity: 0;
-            transform: translateY(50px);
-            transition: var(--transition);
         }
-        .observe.reveal {
-            opacity: 1;
-            transform: translateY(0);
         }
         @media (max-width: 768px) {
-            .hero h1 { font-size: 3rem; }
-            .comparison { padding: 2rem 1rem; }
-            .stats-grid { grid-template-columns: 1fr 1fr; }
         }
     </style>
 </head>
 <body>
     <header>
-        <div class="logo">
-            <i class="fas fa-chart-line"></i>
-            India Economy Surge
-        </div>
-        <div class="built-with">
-            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
         </div>
     </header>
-    <section class="hero">
-        <div class="flag"></div>
-        <h1>India Powers Past Japan</h1>
-        <p>Now the 4th Largest Economy in the World!</p>
-        <div class="scroll-indicator">
-            <i class="fas fa-chevron-down"></i>
-        </div>
     </section>
-    <section class="stats observe" id="stats">
-        <h2 style="text-align: center; font-size: clamp(2.5rem, 5vw, 3rem); margin-bottom: 1rem;">
-            Key Economic Milestones
-        </h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <i class="fas fa-dollar-sign stat-icon"></i>
-                <div class="stat-value">$4.0T</div>
-                <div class="stat-label">India's Nominal GDP (2024)</div>
-            </div>
-            <div class="stat-card">
-                <i class="fas fa-chart-line stat-icon"></i>
-                <div class="stat-value">7.2%</div>
-                <div class="stat-label">GDP Growth Rate</div>
-            </div>
-            <div class="stat-card">
-                <i class="fas fa-users stat-icon"></i>
-                <div class="stat-value">1.43B</div>
-                <div class="stat-label">Population Powerhouse</div>
-            </div>
-            <div class="stat-card">
-                <i class="fas fa-trophy stat-icon"></i>
-                <div class="stat-value">#4 Global</div>
-                <div class="stat-label">Economy Ranking</div>
-            </div>
         </div>
-    </section>
-    <section class="comparison observe" id="comparison">
-        <h2>India vs Japan: GDP Race</h2>
-        <div class="chart-container">
-            <canvas id="gdpChart"></canvas>
         </div>
-        <p style="text-align: center; font-style: italic; color: #64748b;">
-            *Data based on IMF projections and recent reports (Trillions USD, Nominal)
-        </p>
-    </section>
-    <section class="timeline" id="timeline">
-        <div class="milestone">
-            <i class="fas fa-rocket"></i>
-            <h3>2023: $3.73T</h3>
-            <p>India closes gap, growth surges amid global slowdown.</p>
-        </div>
-        <div class="milestone">
-            <i class="fas fa-flag-checkered"></i>
-            <h3>2024: Overtake!</h3>
-            <p>India surpasses Japan at $4.0T vs $4.1T, momentum unstoppable.</p>
-        </div>
-        <div class="milestone">
-            <i class="fas fa-arrow-up"></i>
-            <h3>2025 Proj: $4.3T</h3>
-            <p>India eyes #3 spot, challenging Germany.</p>
-        </div>
-        <div class="milestone">
-            <i class="fas fa-globe"></i>
-            <h3>2030 Goal: #3</h3>
-            <p>Path to become 3rd largest by 2027-28.</p>
-        </div>
-    </section>
-    <section class="facts observe" id="facts">
-        <div class="facts-content">
-            <div class="fact">
-                <i class="fas fa-bolt" style="font-size: 3rem; margin-bottom: 1rem; display: block;"></i>
-                Fastest growing major economy for a decade.
-            </div>
-            <div class="fact">
-                <i class="fas fa-industry" style="font-size: 3rem; margin-bottom: 1rem; display: block;"></i>
-                World's 3rd largest PPP economy already.
-            </div>
-            <div class="fact">
-                <i class="fas fa-mobile-alt" style="font-size: 3rem; margin-bottom: 1rem; display: block;"></i>
-                Digital India: 1B+ mobile users, UPI revolution.
-            </div>
-        </div>
-    </section>
-    <footer>
-        <p>&copy; 2024 India Economy Celebration | Data illustrative from IMF/World Bank | Made for inspiration</p>
-    </footer>
-    <script>
-        // Scroll reveal
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('reveal');
-                }
-            });
-        }, { threshold: 0.1 });
-        document.querySelectorAll('.observe').forEach(el => observer.observe(el));
-        // Timeline milestones reveal on scroll
-        const tlObserver = new IntersectionObserver((entries) => {
-            entries.forEach((entry, index) => {
-                if (entry.isIntersecting) {
-                    setTimeout(() => {
-                        entry.target.style.animationDelay = `${index * 0.2}s`;
-                        entry.target.style.animationPlayState = 'running';
-                    }, 100);
-                }
-            });
         });
-        document.querySelectorAll('.milestone').forEach(tlObserver.observe);
-        // GDP Chart
-        const canvas = document.getElementById('gdpChart');
-        const ctx = canvas.getContext('2d');
-        function resizeCanvas() {
-            canvas.width = canvas.offsetWidth;
-            canvas.height = canvas.offsetHeight;
-        }
-        window.addEventListener('resize', resizeCanvas);
-        resizeCanvas();
-        const data = {
-            labels: ['2020', '2021', '2022', '2023', '2024', '2025p'],
-            india: [2.67, 3.15, 3.39, 3.73, 4.0, 4.3],
-            japan: [5.05, 4.94, 4.26, 4.21, 4.11, 4.12]
-        };
-        const maxValue = Math.max(...data.india, ...data.japan);
-        const barWidth = canvas.width / data.labels.length / 2.5;
-        const padding = 40;
-        let animationProgress = 0;
-        function drawChart(progress) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            const barSpacing = (canvas.width - padding * 2) / data.labels.length;
-            data.labels.forEach((label, i) => {
-                const xIndia = padding + i * barSpacing;
-                const xJapan = xIndia + barSpacing / 2;
-                const heightIndia = (data.india[i] / maxValue) * (canvas.height - padding * 2) * progress;
-                const heightJapan = (data.japan[i] / maxValue) * (canvas.height - padding * 2) * progress;
-                // Japan bar (greyish)
-                ctx.fillStyle = '#94A3B8';
-                ctx.fillRect(xJapan, canvas.height - padding - heightJapan, barWidth, heightJapan);
-                ctx.fillStyle = '#475569';
-                ctx.font = 'bold 12px Segoe UI';
-                ctx.fillText(label, xJapan + barWidth / 2 - 15, canvas.height - 10);
-                // India bar (tricolor gradient)
-                const gradientIndia = ctx.createLinearGradient(xIndia, 0, xIndia + barWidth, 0);
-                gradientIndia.addColorStop(0, 'var(--saffron)');
-                gradientIndia.addColorStop(0.5, 'var(--white)');
-                gradientIndia.addColorStop(1, 'var(--green)');
-                ctx.fillStyle = gradientIndia;
-                ctx.fillRect(xIndia, canvas.height - padding - heightIndia, barWidth, heightIndia);
-                // Hover simulation - on real hover could add tooltip
-                if (i === 4) { // Highlight overtake year
-                    ctx.strokeStyle = '#FFD700';
-                    ctx.lineWidth = 4;
-                    ctx.strokeRect(xIndia, canvas.height - padding - heightIndia, barWidth, heightIndia);
-                }
-            });
-            // Axes
-            ctx.strokeStyle = '#e2e8f0';
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            ctx.moveTo(padding, padding);
-            ctx.lineTo(padding, canvas.height - padding);
-            ctx.lineTo(canvas.width - padding, canvas.height - padding);
-            ctx.stroke();
-            // Labels
-            ctx.fillStyle = '#64748b';
-            ctx.font = '14px Segoe UI';
-            ctx.fillText(`$${maxValue}T`, 10, 20);
-        }
-        // Animate chart on load
-        const animateChart = () => {
-            animationProgress += 0.05;
-            drawChart(animationProgress);
-            if (animationProgress < 1) {
-                requestAnimationFrame(animateChart);
-            }
-        };
-        setTimeout(animateChart, 500);
-        // Parallax effect on hero scroll
-        window.addEventListener('scroll', () => {
-            const scrolled = window.pageYOffset;
-            const hero = document.querySelector('.hero');
-            hero.style.transform = `translateY(${scrolled * 0.5}px)`;
         });
     </script>
 </body>

 <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.5.1/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: #1a1a2e;
+            --secondary-color: #16213e;
+            --accent-color: #e94560;
+            --text-primary: #ffffff;
+            --text-secondary: #b8bcc8;
+            --bg-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            --card-shadow: 0 20px 40px rgba(0,0,0,0.3);
+            --border-radius: 16px;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         * {
         }
         body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-gradient);
+            color: var(--text-primary);
             line-height: 1.6;
             overflow-x: hidden;
         }
+        /* Header */
         header {
             position: fixed;
             top: 0;
             width: 100%;
+            background: rgba(26, 26, 46, 0.95);
             backdrop-filter: blur(20px);
             z-index: 1000;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: grid;
+            grid-template-columns: auto 1fr auto;
             align-items: center;
+            gap: 2rem;
         }
         .logo {
+            font-size: 1.8rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, #e94560, #ff6b6b);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            text-decoration: none;
         }
         .built-with {
             font-size: 0.9rem;
+            color: var(--text-secondary);
+            text-decoration: none;
+            transition: var(--transition);
+        }
+        .built-with:hover {
+            color: var(--accent-color);
+        }
+        .nav-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
         }
+        nav a {
+            color: var(--text-secondary);
             text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
         }
+        nav a:hover {
+            color: var(--text-primary);
         }
+        /* Hero Section */
         .hero {
             height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             text-align: center;
+            padding: 0 2rem;
             position: relative;
             overflow: hidden;
         }
         .hero::before {
             left: 0;
             right: 0;
             bottom: 0;
+            background: url('https://images.unsplash.com/photo-1568650342229-6b21c09574ec?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover;
+            filter: brightness(0.4) saturate(1.2);
+            z-index: -1;
+            animation: parallax 20s linear infinite;
         }
+        @keyframes parallax {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0); }
         }
+        .headline {
+            font-size: clamp(2.5rem, 5vw, 4.5rem);
+            font-weight: 800;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, #ffffff, #e0e0e0);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: glow 2s ease-in-out infinite alternate;
         }
+        @keyframes glow {
+            from { text-shadow: 0 0 20px rgba(233, 69, 96, 0.5); }
+            to { text-shadow: 0 0 40px rgba(233, 69, 96, 0.8), 0 0 60px rgba(233, 69, 96, 0.4); }
         }
+        .subheadline {
+            font-size: 1.5rem;
+            color: var(--text-secondary);
+            max-width: 800px;
             margin-bottom: 2rem;
         }
+        .cta-button {
+            background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
+            color: white;
+            padding: 1rem 2.5rem;
+            border: none;
+            border-radius: var(--border-radius);
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: var(--card-shadow);
         }
+        .cta-button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 30px 60px rgba(233, 69, 96, 0.4);
         }
+        /* Main Content */
+        main {
+            padding: 8rem 0 4rem;
             max-width: 1400px;
             margin: 0 auto;
+            padding: 0 2rem;
         }
+        .grid {
             display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 4rem;
+            margin-bottom: 4rem;
         }
+        /* Article */
+        .article {
+            background: rgba(255,255,255,0.05);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 3rem;
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: var(--card-shadow);
         }
+        .article-header {
+            margin-bottom: 2rem;
         }
+        .article-meta {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-bottom: 1rem;
         }
+        .article-body {
+            font-size: 1.1rem;
+            line-height: 1.8;
         }
+        .quote {
+            background: rgba(233, 69, 96, 0.1);
+            border-left: 4px solid var(--accent-color);
+            padding: 2rem;
+            margin: 2rem 0;
+            font-style: italic;
+            font-size: 1.3rem;
+            position: relative;
         }
+        .quote::before {
+            content: '"';
+            font-size: 4rem;
+            color: var(--accent-color);
+            position: absolute;
+            top: -10px;
+            left: 20px;
         }
+        /* Sidebar */
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
         }
+        .widget {
+            background: rgba(255,255,255,0.05);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 2rem;
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: var(--card-shadow);
         }
+        .poll {
             text-align: center;
         }
+        .poll-question {
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
         }
+        .poll-options {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
         }
+        .poll-option {
+            background: rgba(255,255,255,0.1);
+            padding: 1rem;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
         }
+        .poll-option:hover {
+            background: rgba(233, 69, 96, 0.2);
         }
+        .poll-option input[type="radio"] {
+            margin-right: 1rem;
         }
+        .poll-vote {
+            background: var(--accent-color);
+            color: white;
+            border: none;
+            padding: 0.8rem 2rem;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: var(--transition);
         }
+        .results {
+            margin-top: 1rem;
+            font-weight: 600;
         }
+        .ticker {
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+            padding: 1rem 0;
+            overflow: hidden;
+            white-space: nowrap;
+            box-shadow: var(--card-shadow);
+            margin-bottom: 2rem;
         }
+        .ticker-content {
+            display: inline-block;
+            animation: ticker 30s linear infinite;
         }
+        @keyframes ticker {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
         }
+        /* Reactions */
+        .reactions {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
         }
+        .reaction {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.8rem 1.5rem;
+            background: rgba(255,255,255,0.1);
+            border-radius: 25px;
+            cursor: pointer;
+            transition: var(--transition);
+            font-size: 0.9rem;
         }
+        .reaction:hover {
+            background: rgba(233, 69, 96, 0.3);
+            transform: scale(1.05);
         }
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(10px);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
             padding: 2rem;
         }
+        .modal-content {
+            background: var(--secondary-color);
+            padding: 3rem;
+            border-radius: var(--border-radius);
+            max-width: 800px;
+            max-height: 80vh;
+            overflow-y: auto;
+            box-shadow: var(--card-shadow);
         }
+        .close {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
+            font-size: 2rem;
+            cursor: pointer;
+            color: var(--text-secondary);
         }
+        /* Responsive */
         @media (max-width: 768px) {
+            .container {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+            nav ul {
+                display: none;
+            }
+            .nav-toggle {
+                display: block;
+            }
+            .grid {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+            .hero {
+                padding: 2rem;
+            }
+            .article {
+                padding: 2rem 1.5rem;
+            }
+        }
+        /* Dark mode toggle */
+        .theme-toggle {
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.5rem;
+            cursor: pointer;
+            position: absolute;
+            top: 1.5rem;
+            right: 2rem;
+        }
+        body.dark {
+            --bg-gradient: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
         }
     </style>
 </head>
 <body>
     <header>
+        <div class="container">
+            <a href="#" class="logo">Global News Hub</a>
+            <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="#article">Article</a></li>
+                </ul>
+            </nav>
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with" title="Built with anycoder">
+                    <i class="fas fa-heart"></i> Built with anycoder
+                </a>
+                <button class="theme-toggle" id="themeToggle" title="Toggle Theme">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
+            <button class="nav-toggle"><i class="fas fa-bars"></i></button>
         </div>
     </header>
+    <section class="hero" id="home">
+        <h1 class="headline" id="headline">Putin challenges Trump from New Delhi; 'Don't even try to make India…' | US in shock</h1>
+        <p class="subheadline">Russian President issues stark warning amid rising geopolitical tensions. World watches as alliances shift.</p>
+        <button class="cta-button" onclick="openModal()">Read Full Story</button>
     </section>
+    <main>
+        <div class="grid">
+            <article class="article" id="article">
+                <div class="article-header">
+                    <h2>Putin challenges Trump from New Delhi; 'Don't even try to make India…'</h2>
+                    <div class="article-meta">
+                        <i class="fas fa-clock"></i> 2 hours ago
+                        <i class="fas fa-map-marker-alt"></i> New Delhi, India
+                        <i class="fas fa-user"></i> By Alexei Ivanov
+                    </div>
+                </div>
+                <div class="article-body">
+                    <p>In a stunning address from the heart of New Delhi, Russian President Vladimir Putin directly challenged incoming US President Donald Trump, warning him against any attempts to sway India into the Western fold. Speaking at a high-profile summit, Putin declared, <span class="quote">Don't even try to make India your puppet. India is a sovereign power, and Russia stands with it.</span></p>
+                    <p>The remarks, delivered amidst India's deepening ties with Russia, have sent shockwaves through Washington. US officials expressed dismay, with one anonymous source stating, "This is a direct affront to American interests in the Indo-Pacific."</p>
+                    <img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Putin in New Delhi" style="width:100%; border-radius: var(--border-radius); margin: 2rem 0; box-shadow: var(--card-shadow);">
+                    <p>Putin's visit underscores Russia's strategy to counter US influence in South Asia. With India purchasing Russian S-400 systems despite US sanctions threats, the rift appears unbridgeable. Analysts predict this could reshape global alliances.</p>
+                    <div class="reactions">
+                        <div class="reaction" onclick="react('shock')"><i class="fas fa-shocked"></i> Shock (1.2K)</div>
+                        <div class="reaction" onclick="react('fire')"><i class="fas fa-fire"></i> Trending (856)</div>
+                        <div class="reaction" onclick="react('share')"><i class="fas fa-share-alt"></i> Share</div>
+                    </div>
+                </div>
+            </article>
+            <aside class="sidebar">
+                <div class="widget ticker">
+                    <div class="ticker-content">
+                        🚨 Breaking: Putin-Trump tensions rise | India remains neutral | US Congress debates response | Stock markets volatile amid news...
+                    </div>
+                </div>
+                <div class="widget poll">
+                    <h3 class="poll-question">Is the US truly in shock?</h3>
+                    <div class="poll-options">
+                        <label class="poll-option">
+                            <input type="radio" name="poll" value="yes"> Yes, completely unexpected
+                        </label>
+                        <label class="poll-option">
+                            <input type="radio" name="poll" value="no"> No, expected power play
+                        </label>
+                        <label class="poll-option">
+                            <input type="radio" name="poll" value="neutral"> Neutral stance
+                        </label>
+                    </div>
+                    <button class="poll-vote" onclick="vote()">Vote Now</button>
+                    <div class="results" id="pollResults" style="display:none;">Thanks for voting! Results updating...</div>
+                </div>
+                <div class="widget">
+                    <h3>Related News</h3>
+                    <ul style="list-style:none;">
+                        <li><a href="#" style="color:var(--text-secondary); text-decoration:none;">Trump responds: 'India will choose freedom'</a></li>
+                        <li><a href="#" style="color:var(--text-secondary); text-decoration:none;">Modi hosts Putin: Strategic partnership deepens</a></li>
+                        <li><a href="#" style="color:var(--text-secondary); text-decoration:none;">US sanctions loom over India-Russia deal</a></li>
+                    </ul>
+                </div>
+            </aside>
         </div>
+    </main>
+    <!-- Modal -->
+    <div class="modal" id="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2>Full Exclusive Report</h2>
+            <p>Extended analysis: Putin's speech detailed Russia's unwavering support for BRICS nations. Trump camp hints at reciprocal tariffs. Stay tuned for updates.</p>
+            <video width="100%" controls style="border-radius: var(--border-radius); margin-top:1rem;">
+                <source src="https://example.com/putin-speech.mp4" type="video/mp4">
+            </video>
         </div>
+    </div>
+    <script>
+        // Typing animation for headline
+        const headline = document.getElementById('headline');
+        const fullText = headline.textContent;
+        headline.textContent = '';
+        let i = 0;
+        function typeWriter() {
+            if (i < fullText.length) {
+                headline.textContent += fullText.charAt(i);
+                i++;
+                setTimeout(typeWriter, 50);
+            }
+        }
+        window.addEventListener('load', typeWriter);
+        // Modal
+        function openModal() {
+            document.getElementById('modal').style.display = 'flex';
+        }
+        function closeModal() {
+            document.getElementById('modal').style.display = 'none';
+        }
+        // Poll
+        function vote() {
+            document.getElementById('pollResults').style.display = 'block';
+        }
+        // Reactions
+        function react(type) {
+            alert(`Reacted with ${type}!`);
+        }
+        // Theme toggle
+        const themeToggle = document.getElementById('themeToggle');
+        themeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark');
+            const icon = themeToggle.querySelector('i');
+            icon.classList.toggle('fa-moon');
+            icon.classList.toggle('fa-sun');
         });
+        // Nav toggle mobile
+        document.querySelector('.nav-toggle').addEventListener('click', () => {
+            const ul = document.querySelector('nav ul');
+            ul.style.display = ul.style.display === 'flex' ? 'none' : 'flex';
+        });
+        // Close modal on escape
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closeModal();
         });
     </script>
 </body>