Spaces:

ndtran0101
/

anycoder-9ebba308

Running

File size: 42,661 Bytes

be382d1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Destroy the Earth - Ultimate Guide</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #ff4757;
            --secondary: #ff6b81;
            --accent: #ffa502;
            --dark: #0a0a0f;
            --darker: #050508;
            --light: #f8f8f8;
            --glow: rgba(255, 71, 87, 0.5);
        }

        body {
            font-family: 'Rajdhani', sans-serif;
            background: var(--darker);
            color: var(--light);
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* Animated Background */
        .stars-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            background: 
                radial-gradient(ellipse at center, #1a1a2e 0%, var(--darker) 100%);
        }

        .stars-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, #fff, transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 90px 40px, #fff, transparent),
                radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
                radial-gradient(1px 1px at 230px 80px, #fff, transparent),
                radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
                radial-gradient(1px 1px at 370px 50px, #fff, transparent),
                radial-gradient(2px 2px at 450px 180px, rgba(255,255,255,0.8), transparent);
            background-repeat: repeat;
            background-size: 500px 200px;
            animation: twinkle 8s ease-in-out infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }

        /* Header */
        header {
            position: relative;
            z-index: 10;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,71,87,0.3);
            background: linear-gradient(180deg, rgba(10,10,15,0.9) 0%, transparent 100%);
        }

        .logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            text-shadow: 0 0 20px var(--glow);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo:hover {
            color: var(--secondary);
            transition: all 0.3s ease;
        }

        .anycoder-link {
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .anycoder-link:hover {
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: 0 0 20px var(--glow);
        }

        /* Hero Section */
        .hero {
            position: relative;
            z-index: 5;
            text-align: center;
            padding: 80px 20px;
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .earth-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto 40px;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .earth {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #4facfe 0%, #00f2fe 50%, #0a2463 100%);
            box-shadow: 
                0 0 60px rgba(79, 172, 254, 0.6),
                inset -30px -30px 60px rgba(0,0,0,0.5),
                inset 20px 20px 40px rgba(255,255,255,0.1);
            position: relative;
            overflow: hidden;
        }

        .earth::before {
            content: '';
            position: absolute;
            top: 20%;
            left: 10%;
            width: 40%;
            height: 30%;
            background: rgba(34, 139, 34, 0.6);
            border-radius: 50%;
            filter: blur(10px);
        }

        .earth::after {
            content: '';
            position: absolute;
            bottom: 30%;
            right: 15%;
            width: 30%;
            height: 25%;
            background: rgba(34, 139, 34, 0.5);
            border-radius: 50%;
            filter: blur(15px);
        }

        .atmosphere {
            position: absolute;
            top: -10%;
            left: -10%;
            width: 120%;
            height: 120%;
            border-radius: 50%;
            background: radial-gradient(circle, transparent 60%, rgba(135, 206, 250, 0.3) 100%);
            pointer-events: none;
        }

        .hero h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(2rem, 5vw, 4rem);
            font-weight: 900;
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: none;
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { filter: drop-shadow(0 0 20px var(--glow)); }
            50% { filter: drop-shadow(0 0 40px var(--glow)); }
        }

        .hero p {
            font-size: 1.2rem;
            max-width: 600px;
            color: rgba(255,255,255,0.7);
            line-height: 1.8;
        }

        .warning-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 30px;
            padding: 12px 24px;
            background: rgba(255, 71, 87, 0.1);
            border: 2px solid var(--primary);
            border-radius: 30px;
            font-size: 0.9rem;
            color: var(--primary);
            animation: warning-pulse 2s ease-in-out infinite;
        }

        @keyframes warning-pulse {
            0%, 100% { box-shadow: 0 0 20px var(--glow); }
            50% { box-shadow: 0 0 40px var(--glow), 0 0 60px var(--glow); }
        }

        /* Methods Section */
        .methods-section {
            position: relative;
            z-index: 5;
            padding: 60px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .section-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            text-align: center;
            margin-bottom: 50px;
            color: var(--light);
        }

        .section-title span {
            color: var(--primary);
        }

        .methods-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            padding: 20px;
        }

        .method-card {
            background: linear-gradient(145deg, rgba(20,20,30,0.9), rgba(10,10,15,0.9));
            border: 1px solid rgba(255,71,87,0.2);
            border-radius: 20px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            cursor: pointer;
        }

        .method-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }

        .method-card:hover::before {
            transform: scaleX(1);
        }

        .method-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            box-shadow: 0 20px 40px rgba(255,71,87,0.2);
        }

        .method-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
        }

        .method-card h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--light);
        }

        .method-card p {
            color: rgba(255,255,255,0.6);
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .energy-requirement {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            background: rgba(255,165,2,0.1);
            border-radius: 10px;
            font-size: 0.85rem;
            color: var(--accent);
        }

        .energy-bar {
            flex: 1;
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            overflow: hidden;
        }

        .energy-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            border-radius: 3px;
            transition: width 1s ease;
        }

        .difficulty {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 15px;
            font-size: 0.85rem;
            color: rgba(255,255,255,0.5);
        }

        .difficulty-stars {
            display: flex;
            gap: 4px;
        }

        .difficulty-stars i {
            color: var(--accent);
        }

        /* Detailed Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px);
            z-index: 1000;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: linear-gradient(145deg, #1a1a2e, #0a0a0f);
            border: 1px solid rgba(255,71,87,0.3);
            border-radius: 30px;
            padding: 40px;
            max-width: 800px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            animation: modalSlide 0.4s ease;
        }

        @keyframes modalSlide {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border: none;
            background: rgba(255,71,87,0.1);
            border-radius: 50%;
            color: var(--primary);
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: var(--primary);
            color: white;
        }

        .modal h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--primary);
        }

        .modal h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            margin: 25px 0 15px;
            color: var(--accent);
        }

        .modal p {
            color: rgba(255,255,255,0.7);
            line-height: 1.8;
            margin-bottom: 15px;
        }

        .science-box {
            background: rgba(79, 172, 254, 0.1);
            border: 1px solid rgba(79, 172, 254, 0.3);
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
        }

        .science-box h4 {
            color: #4facfe;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .math-formula {
            font-family: 'Courier New', monospace;
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            color: #00f2fe;
            text-align: center;
            font-size: 1.1rem;
        }

        /* Timeline Section */
        .timeline-section {
            position: relative;
            z-index: 5;
            padding: 60px 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .timeline {
            position: relative;
            padding: 20px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--primary), transparent);
        }

        .timeline-item {
            display: flex;
            justify-content: flex-end;
            padding-right: calc(50% + 30px);
            position: relative;
            margin-bottom: 40px;
        }

        .timeline-item:nth-child(even) {
            justify-content: flex-start;
            padding-right: 0;
            padding-left: calc(50% + 30px);
        }

        .timeline-content {
            background: rgba(20,20,30,0.8);
            border: 1px solid rgba(255,71,87,0.2);
            border-radius: 15px;
            padding: 20px;
            max-width: 400px;
            transition: all 0.3s ease;
        }

        .timeline-content:hover {
            border-color: var(--primary);
            transform: scale(1.02);
        }

        .timeline-dot {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: var(--primary);
            border-radius: 50%;
            box-shadow: 0 0 20px var(--glow);
        }

        .timeline-content h4 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .timeline-content p {
            color: rgba(255,255,255,0.6);
            font-size: 0.9rem;
        }

        /* Footer */
        footer {
            position: relative;
            z-index: 5;
            text-align: center;
            padding: 40px 20px;
            border-top: 1px solid rgba(255,71,87,0.2);
            margin-top: 60px;
        }

        .footer-warning {
            font-size: 1.5rem;
            margin-bottom: 20px;
            animation: warning-shake 0.5s ease-in-out infinite;
        }

        @keyframes warning-shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .footer-text {
            color: rgba(255,255,255,0.5);
            font-size: 0.9rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .footer-links {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .footer-links a {
            color: rgba(255,255,255,0.4);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .methods-grid {
                grid-template-columns: 1fr;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item,
            .timeline-item:nth-child(even) {
                padding-left: 60px;
                padding-right: 0;
                justify-content: flex-start;
            }

            .timeline-dot {
                left: 20px;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .earth-container {
                width: 200px;
                height: 200px;
            }

            header {
                flex-direction: column;
                gap: 15px;
            }
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--darker);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--secondary);
        }

        /* Particle System */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary);
            border-radius: 50%;
            animation: rise 10s infinite;
            opacity: 0;
        }

        @keyframes rise {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                transform: translateY(-100vh) scale(1);
                opacity: 0;
            }
        }

        /* Destruction Progress */
        .destruction-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: rgba(255,71,87,0.2);
            z-index: 100;
            display: none;
        }

        .destruction-progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
            background-size: 200% 100%;
            animation: gradient-move 2s linear infinite;
        }

        @keyframes gradient-move {
            0% { background-position: 0% 0%; }
            100% { background-position: 200% 0%; }
        }
    </style>
</head>
<body>
    <div class="stars-bg"></div>
    <div class="particles" id="particles"></div>
    
    <header>
        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="logo">
            <i class="fas fa-globe-americas"></i>
            EARTH.DESTROY
        </a>
        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
    </header>

    <section class="hero">
        <div class="earth-container">
            <div class="earth"></div>
            <div class="atmosphere"></div>
        </div>
        <h1>How To Destroy The Earth</h1>
        <p>A Scientific Exploration of Hypothetical Planetary Destruction Methods</p>
        <div class="warning-badge">
            <i class="fas fa-exclamation-triangle"></i>
            FOR ENTERTAINMENT PURPOSES ONLY - ALL METHODS ARE THEORETICAL
        </div>
    </section>

    <section class="methods-section">
        <h2 class="section-title">Available <span>Destruction Methods</span></h2>
        <div class="methods-grid">
            <div class="method-card" onclick="openModal('collisional')">
                <i class="fas fa-meteor method-icon" style="color: #ff6b6b;"></i>
                <h3>Giant Impact</h3>
                <p>Smash a massive asteroid or planet into Earth to completely obliterate its structure and merge with another celestial body.</p>
                <div class="energy-requirement">
                    <i class="fas fa-bolt"></i>
                    <span>Energy: ~10³⁰ Joules</span>
                    <div class="energy-bar">
                        <div class="energy-fill" style="width: 95%;"></div>
                    </div>
                </div>
                <div class="difficulty">
                    <span>Difficulty:</span>
                    <div class="difficulty-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
            </div>

            <div class="method-card" onclick="openModal('blackhole')">
                <i class="fas fa-circle method-icon" style="color: #a55eea;"></i>
                <h3>Black Hole Consumption</h3>
                <p>Introduce a microscopic black hole that will gradually consume Earth's mass until nothing remains.</p>
                <div class="energy-requirement">
                    <i class="fas fa-bolt"></i>
                    <span>Energy: Variable</span>
                    <div class="energy-bar">
                        <div class="energy-fill" style="width: 100%;"></div>
                    </div>
                </div>
                <div class="difficulty">
                    <span>Difficulty:</span>
                    <div class="difficulty-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
            </div>

            <div class="method-card" onclick="openModal('antimatter')">
                <i class="fas fa-atom method-icon" style="color: #4facfe;"></i>
                <h3>Antimatter Annihilation</h3>
                <p>Convert Earth's mass entirely into energy using matter-antimatter reactions for total destruction.</p>
                <div class="energy-requirement">
                    <i class="fas fa-bolt"></i>
                    <span>Energy: ~10⁴⁷ Joules</span>
                    <div class="energy-bar">
                        <div class="energy-fill" style="width: 85%;"></div>
                    </div>
                </div>
                <div class="difficulty">
                    <span>Difficulty:</span>
                    <div class="difficulty-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>

            <div class="method-card" onclick="openModal('friction')">
                <i class="fas fa-fire method-icon" style="color: #ffa502;"></i>
                <h3>Orbital Decay</h3>
                <p>Gradually decrease Earth's orbital velocity until it spirals into the Sun, vaporizing completely.</p>
                <div class="energy-requirement">
                    <i class="fas fa-bolt"></i>
                    <span>Energy: ~10³³ Joules</span>
                    <div class="energy-bar">
                        <div class="energy-fill" style="width: 60%;"></div>
                    </div>
                </div>
                <div class="difficulty">
                    <span>Difficulty:</span>
                    <div class="difficulty-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>

            <div class="method-card" onclick="openModal('bomb')">
                <i class="fas fa-bomb method-icon" style="color: #ff4757;"></i>
                <h3>Core Detonation</h3>
                <p>Use enough nuclear fusion/fission weapons to trigger runaway chain reactions in Earth's core.</p>
                <div class="energy-requirement">
                    <i class="fas fa-bolt"></i>
                    <span>Energy: ~10³⁸ Joules</span>
                    <div class="energy-bar">
                        <div class="energy-fill" style="width: 70%;"></div>
                    </div>
                </div>
                <div class="difficulty">
                    <span>Difficulty:</span>
                    <div class="difficulty-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>

            <div class="method-card" onclick="openModal('sun')">
                <i class="fas fa-sun method-icon" style="color: #ffd32a;"></i>
                <h3>Accelerated Solar Expansion</h3>
                <p>Cause the Sun to expand into a red giant that engulfs and burns Earth to nothing.</p>
                <div class="energy-requirement">
                    <i class="fas fa-bolt"></i>
                    <span>Energy: ~10⁴¹ Joules</span>
                    <div class="energy-bar">
                        <div class="energy-fill" style="width: 75%;"></div>
                    </div>
                </div>
                <div class="difficulty">
                    <span>Difficulty:</span>
                    <div class="difficulty-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="timeline-section">
        <h2 class="section-title">The <span>Science</span> of Destruction</h2>
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <h4>The Gravitational Binding Energy</h4>
                    <p>To completely destroy Earth, you need to overcome its gravitational binding energy - approximately 2.49 × 10³² Joules.</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <h4>The Roche Limit</h4>
                    <p>Approaching a massive body within the Roche limit will cause tidal forces to tear Earth apart.</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <h4>Mass-Energy Equivalence</h4>
                    <p>E = mc² shows that Earth's mass (~6 × 10²⁴ kg) contains approximately 5.4 × 10⁴¹ Joules of potential energy.</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                    <h4>Runaway Chain Reactions</h4>
                    <p>Once certain thresholds are crossed, destruction becomes self-sustaining through feedback loops.</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="warning-shake">⚠️</div>
        <h3 style="margin-bottom: 15px; color: var(--primary);">This is purely hypothetical!</h3>
        <p class="footer-text">
            All methods described on this page are purely theoretical and based on our current understanding of physics.
            Earth has survived 4.5 billion years of asteroid impacts, supervolcanoes, and cosmic radiation.
            The probability of any of these scenarios occurring is astronomically small.
        </p>
        <div class="footer-links">
            <a href="#">Scientific Accuracy</a>
            <a href="#">References</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </footer>

    <!-- Modals -->
    <div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
        <div class="modal" id="modalContent">
            <button class="modal-close" onclick="closeModal(event)">
                <i class="fas fa-times"></i>
            </button>
            <div id="modalBody"></div>
        </div>
    </div>

    <div class="destruction-bar" id="destructionBar">
        <div class="destruction-progress"></div>
    </div>

    <script>
        // Particle System
        function createParticles() {
            const container = document.getElementById('particles');
            const colors = ['#ff4757', '#ff6b81', '#ffa502', '#4facfe', '#a55eea'];
            
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.background = colors[Math.floor(Math.random() * colors.length)];
                particle.style.animationDelay = Math.random() * 10 + 's';
                particle.style.animationDuration = (Math.random() * 5 + 5) + 's';
                container.appendChild(particle);
            }
        }

        createParticles();

        // Modal Content Data
        const modalData = {
            collisional: {
                title: 'Giant Impact',
                icon: 'fa-meteor',
                color: '#ff6b6b',
                content: `
                    <h3>Theoretical Foundation</h3>
                    <p>The most scientifically plausible method of destroying Earth is through a catastrophic collision with another massive celestial body. This has happened before in our solar system's history - the Moon is believed to have formed from a collision between Earth and a Mars-sized protoplanet called "Theia".</p>
                    
                    <div class="science-box">
                        <h4><i class="fas fa-flask"></i> Required Conditions</h4>
                        <p>To completely destroy Earth, the impacting body must deliver enough kinetic energy to exceed Earth's gravitational binding energy (2.49 × 10³² J). This requires an object with at least 1/10th Earth's mass traveling at escape velocity (11.2 km/s) or faster.</p>
                    </div>

                    <h3>The Math</h3>
                    <div class="math-formula">KE = ½mv²</div>
                    <p>Where m is the mass of the impactor and v is the relative velocity. For total destruction, KE must exceed U = (3GM²)/(5R)</p>
                    
                    <h3>Consequences</h3>
                    <p>The impact would:</p>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Instantly vaporize both planetary bodies</li>
                        <li>Scatter debris across the inner solar system</li>
                        <li>Create a new asteroid belt</li>
                        <li>Potentially form a new planet over millions of years</li>
                    </ul>
                `
            },
            blackhole: {
                title: 'Black Hole Consumption',
                icon: 'fa-circle',
                color: '#a55eea',
                content: `
                    <h3>Theoretical Foundation</h3>
                    <p>A black hole of sufficient mass would consume Earth through gravitational spaghettification and eventual singularity formation. However, creating or obtaining a black hole is far beyond any conceivable technology.</p>
                    
                    <div class="science-box">
                        <h4><i class="fas fa-flask"></i> Types of Black Holes</h4>
                        <p><strong>Primordial:</strong> Theoretical tiny black holes that could have formed in the early universe. Mass of a small asteroid, size of a proton.</p>
                        <p><strong>Stellar:</strong> Formed from collapsed stars, 5-100 solar masses.</p>
                        <p><strong>Supermassive:</strong> Millions to billions of solar masses, found in galaxy centers.</p>
                    </div>

                    <h3>Consumption Timeline</h3>
                    <div class="math-formula">t = (5120πG²M³)/(ℏc⁶) × ρ⁻¹</div>
                    <p>For a primordial black hole of 10¹² kg, consumption would take approximately 10 billion years. Larger black holes consume faster at first but slower as they grow.</p>
                    
                    <h3>Hawking Radiation</h3>
                    <p>Small black holes emit Hawking radiation and actually lose mass over time. They would need to be massive enough to consume Earth faster than they evaporate.</p>
                `
            },
            antimatter: {
                title: 'Antimatter Annihilation',
                icon: 'fa-atom',
                color: '#4facfe',
                content: `
                    <h3>Theoretical Foundation</h3>
                    <p>When matter meets antimatter, they annihilate and convert entirely to energy according to E=mc². This is the most efficient energy release mechanism known to physics.</p>
                    
                    <div class="science-box">
                        <h4><i class="fas fa-flask"></i> The Math of Annihilation</h4>
                        <p>For 1 kg of matter + 1 kg of antimatter:</p>
                        <div class="math-formula">E = 2kg × (3 × 10⁸ m/s)² = 1.8 × 10¹⁷ Joules</div>
                        <p>This is equivalent to about 43 megatons of TNT - for just 2 kilograms of antimatter!</p>
                    </div>

                    <h3>Earth's Destruction Potential</h3>
                    <p>To completely destroy Earth, you would need an amount of antimatter equal to half of Earth's mass (~3 × 10²⁴ kg). The energy released would be approximately 5.4 × 10⁴¹ Joules.</p>
                    
                    <h3>Practical Challenges</h3>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Current annual antimatter production: picograms</li>
                        <li>Storage requires magnetic containment in a perfect vacuum</li>
                        <li>Cost estimates: $62.5 trillion per gram</li>
                        <li>Total cost would exceed global GDP by many orders of magnitude</li>
                    </ul>
                `
            },
            friction: {
                title: 'Orbital Decay',
                icon: 'fa-fire',
                color: '#ffa502',
                content: `
                    <h3>Theoretical Foundation</h3>
                    <p>By reducing Earth's orbital velocity, we could cause it to spiral into the Sun. This is theoretically possible but requires energy on a scale that's difficult to comprehend.</p>
                    
                    <div class="science-box">
                        <h4><i class="fas fa-flask"></i> Required Energy</h4>
                        <p>To de-orbit Earth completely:</p>
                        <div class="math-formula">Δv ≈ 12 km/s (to lower periapsis to solar surface)</div>
                        <p>With continuous thrust at 1g: ~65 days</p>
                        <p>Total energy required: ~10³³ Joules</p>
                    </div>

                    <h3>Methods Considered</h3>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Mass drivers launching payloads at tangential angles</li>
                        <li>Tidal friction using nearby massive objects</li>
                        <li>Focused solar radiation pressure</li>
                        <li>Kinetic impactors in precise trajectories</li>
                    </ul>
                    
                    <h3>The End Result</h3>
                    <p>As Earth approaches the Sun:</p>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Atmosphere stripped away by solar wind</li>
                        <li>Oceans boil at 1000°C</li>
                        <li>Surface rock melts and vaporizes</li>
                        <li>Final entry creates a spectacular meteor display</li>
                    </ul>
                `
            },
            bomb: {
                title: 'Core Detonation',
                icon: 'fa-bomb',
                color: '#ff4757',
                content: `
                    <h3>Theoretical Foundation</h3>
                    <p>Triggering a runaway reaction in Earth's core could theoretically cause catastrophic expansion and destruction. However, our current understanding suggests this isn't practically achievable.</p>
                    
                    <div class="science-box">
                        <h4><i class="fas fa-flask"></i> Earth's Core Facts</h4>
                        <p><strong>Iron-Nickel Core:</strong> ~3,400 km radius, pressure ~360 GPa, temperature ~6,000°C</p>
                        <p><strong>Current State:</strong> Stable due to pressure-gravity equilibrium</p>
                        <p><strong>Nuclear Fuel:</strong> Contains uranium, thorium, potassium-40 (radioactive)</p>
                    </div>

                    <h3>Why This is Extremely Difficult</h3>
                    <div class="math-formula">P_ext > P_internal to initiate collapse, or P_thermal > P_gravity for explosion</div>
                    <p>The energy required to disrupt core equilibrium far exceeds humanity's current and foreseeable capabilities. We'd need to deliver ~10³⁸ Joules directly to the core.</p>
                    
                    <h3>What Would Happen</h3>
                    <p>If somehow achieved, the core could:</p>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Trigger massive volcanic events (flood basalts)</li>
                        <li>Disrupt magnetic field (atmospheric stripping)</li>
                        <li>Cause surface restructuring</li>
                        <li>Complete destruction is uncertain - Earth might just "reset"</li>
                    </ul>
                `
            },
            sun: {
                title: 'Accelerated Solar Expansion',
                icon: 'fa-sun',
                color: '#ffd32a',
                content: `
                    <h3>Theoretical Foundation</h3>
                    <p>In about 5 billion years, the Sun will naturally expand into a red giant and likely consume Mercury, Venus, and possibly Earth. Accelerating this process is theoretically possible but extraordinary difficult.</p>
                    
                    <div class="science-box">
                        <h4><i class="fas fa-flask"></i> Natural Timeline</h4>
                        <p><strong>Main Sequence:</strong> ~10 billion years total (5 remaining)</p>
                        <p><strong>Red Giant Phase:</strong> ~1 billion years</p>
                        <p><strong>Maximum Radius:</strong> ~250 million km (Earth currently at 150 million km)</p>
                    </div>

                    <h3>Acceleration Methods (Theoretical)</h3>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Add mass to the Sun from nearby stellar mergers</li>
                        <li>Disrupt the stellar equilibrium with focused energy</li>
                        <li>Trigger premature helium flash through temperature manipulation</li>
                    </ul>
                    
                    <h3>Energy Requirements</h3>
                    <div class="math-formula">ΔM/M ≈ 10⁴¹ / (GM²/R) Joules needed</div>
                    <p>To significantly accelerate solar evolution would require energy input approaching the total output of the Sun itself over millions of years.</p>
                    
                    <h3>Destruction Outcome</h3>
                    <p>When the Sun expands:</p>
                    <ul style="margin-left: 20px; color: rgba(255,255,255,0.7); line-height: 2;">
                        <li>Earth's oceans boil within days</li>
                        <li>Surface rock begins to melt within weeks</li>
                        <li>Atmosphere stripped by intense solar wind</li>
                        <li>Complete vaporization within months</li>
                    </ul>
                `
            }
        };

        // Modal Functions
        function openModal(methodId) {
            const data = modalData[methodId];
            const overlay = document.getElementById('modalOverlay');
            const body = document.getElementById('modalBody');
            
            body.innerHTML = `
                <h2><i class="fas ${data.icon}" style="