Enhance orbital rockets comparison with interactive features and comprehensive stats
· 7 months ago
a64eab69619554c1a643e72b13dc53f0ecc8fce3
Parent:
5a2aade7d
- Added rocket-themed gradient design with animated background
- Expanded stats: engines, thrust, mass, and propulsion details
- Created individual rocket profile cards with inline descriptions and icons
- Added interactive filtering (by category) and sorting (name, payload, height, year)
- Integrated Bootstrap icons throughout for better visual hierarchy
- Added hyperlinks to official sites and Wikipedia for each rocket
- Included SVG placeholder images for each rocket (properly sized)
- Enhanced SEO with updated meta tags and JSON-LD structured data
- Improved responsive design with better mobile breakpoints
- Added custom color scheme (rocket-themed: orange, blue, cyan)
- Smooth scrolling and improved interactivity with JavaScript
1 file changed +943 −243
- orbital-rockets-comparison.html +943 −243
Diff
--- a/orbital-rockets-comparison.html +++ b/orbital-rockets-comparison.html @@ -5,23 +5,26 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Essential SEO Tags --> - <title>Orbital Rockets Comparison: Starship, Falcon, New Glenn & More</title> - <meta name="description" content="A comprehensive cheatsheet comparing key stats for major orbital launch vehicles including SpaceX Starship, Falcon 9/Heavy, Blue Origin New Glenn, Vulcan Centaur, Ariane 6, Angara A5, and Long March 5."> - <meta name="keywords" content="spacecraft, rockets, SpaceX, Starship, Falcon 9, Falcon Heavy, Blue Origin, New Glenn, ULA, Vulcan Centaur, Ariane 6, Angara A5, Long March 5, orbital launch vehicles, comparison, stats, cheatsheet"> + <title>Orbital Rockets Comparison: Starship, Falcon, New Glenn & More | Interactive Cheatsheet</title> + <meta name="description" content="Interactive comparison of the world's leading orbital rockets. Compare specs for SpaceX Starship, Falcon 9/Heavy, Blue Origin New Glenn, Vulcan Centaur, Ariane 6, Angara A5, and Long March 5. Filter, sort, and explore detailed statistics."> + <meta name="keywords" content="orbital rockets, comparison, Starship, Falcon 9, Falcon Heavy, New Glenn, Vulcan Centaur, Ariane 6, Angara A5, Long March 5, launch vehicles, payload capacity, thrust, specifications, interactive cheatsheet"> + <meta name="author" content="David Veksler"> + <meta name="robots" content="index, follow"> <link rel="canonical" href="https://cheatsheets.davidveksler.com/orbital-rockets-comparison.html"/> <!-- Open Graph Tags --> - <meta property="og:title" content="Orbital Rockets Comparison: Starship, Falcon, New Glenn & More"/> - <meta property="og:description" content="A comprehensive cheatsheet comparing key stats for major orbital launch vehicles."/> + <meta property="og:title" content="Orbital Rockets Comparison: Interactive Cheatsheet"/> + <meta property="og:description" content="Compare the world's leading orbital rockets with detailed specs, images, and interactive features. Starship, Falcon, New Glenn, and more."/> <meta property="og:type" content="website"/> <meta property="og:url" content="https://cheatsheets.davidveksler.com/orbital-rockets-comparison.html"/> <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/orbital-rockets-comparison.png"/> - <meta property="og:image:alt" content="A comparison table of key statistics for major orbital rockets like Starship and Falcon 9."/> + <meta property="og:image:alt" content="Interactive comparison of major orbital rockets with specifications and images"/> + <meta property="og:site_name" content="David Veksler Cheatsheets"/> <!-- Twitter Card Tags --> <meta name="twitter:card" content="summary_large_image"/> - <meta name="twitter:title" content="Orbital Rockets Comparison: Starship, Falcon, New Glenn & More"/> - <meta name="twitter:description" content="A comprehensive cheatsheet comparing key stats for major orbital launch vehicles."/> + <meta name="twitter:title" content="Orbital Rockets Comparison: Interactive Cheatsheet"/> + <meta name="twitter:description" content="Compare orbital rockets side-by-side with detailed specs and images"/> <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/orbital-rockets-comparison.png"/> <meta name="twitter:creator" content="@heroiclife"/> @@ -30,13 +33,15 @@ { "@context": "https://schema.org", "@type": "TechArticle", - "headline": "Orbital Rockets Comparison Cheatsheet", - "description": "A comprehensive cheatsheet comparing key stats for major orbital launch vehicles including SpaceX Starship, Falcon 9/Heavy, Blue Origin New Glenn, Vulcan Centaur, Ariane 6, Angara A5, and Long March 5.", - "author": {"@type": "Person", "name": "David Veksler (AI Generated)"}, + "headline": "Orbital Rockets Comparison: Interactive Cheatsheet", + "description": "A comprehensive interactive cheatsheet comparing detailed specifications for major orbital launch vehicles.", + "image": "https://cheatsheets.davidveksler.com/images/orbital-rockets-comparison.png", + "author": {"@type": "Person", "name": "David Veksler"}, "publisher": {"@type": "Organization", "name": "David Veksler Cheatsheets"}, "datePublished": "2025-11-13", - "dateModified": "2025-11-13", - "keywords": "spacecraft, rockets, SpaceX, Starship, Falcon 9, Falcon Heavy, Blue Origin, New Glenn, ULA, Vulcan Centaur, Ariane 6, Angara A5, Long March 5, orbital launch vehicles, comparison, stats" + "dateModified": "2025-11-19", + "keywords": "orbital rockets, launch vehicles, spacecraft, Starship, Falcon 9, New Glenn, comparison, specifications", + "inLanguage": "en" } </script> @@ -45,57 +50,302 @@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <style> + :root { + --rocket-primary: #FF6B35; + --rocket-secondary: #004E89; + --rocket-accent: #1AC8ED; + } + + * { + scroll-behavior: smooth; + } + body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); + position: relative; + overflow-x: hidden; + } + + /* Rocket theme background animation */ + body::before { + content: '🚀'; + position: fixed; + font-size: 200px; + opacity: 0.02; + top: -50px; + right: -50px; + z-index: -1; + animation: float 6s ease-in-out infinite; + } + + @keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-30px) rotate(5deg); } + } + + header { + background: linear-gradient(135deg, var(--rocket-secondary) 0%, var(--rocket-primary) 100%); + padding: 2rem; + border-radius: 0.5rem; + box-shadow: 0 10px 30px rgba(255, 107, 53, 0.2); + position: relative; + overflow: hidden; + } + + header::before { + content: '🚀'; + position: absolute; + right: 2rem; + top: 50%; + transform: translateY(-50%); + font-size: 60px; + opacity: 0.3; + } + + h1 { + color: white; + font-weight: 700; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } + + .lead { + color: #e8e8e8; + font-size: 1.1rem; + } + .table-responsive { max-height: 80vh; + border-radius: 0.5rem; + overflow: hidden; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } + + .table { + margin-bottom: 0; + } + th, td { - white-space: nowrap; - padding: 0.75rem !important; + padding: 1rem !important; vertical-align: middle; + white-space: normal; } + .table thead th { position: sticky; top: 0; - z-index: 2; + z-index: 10; + background: linear-gradient(135deg, var(--rocket-secondary) 0%, var(--rocket-primary) 100%); + color: white; + font-weight: 600; + border-bottom: 2px solid var(--rocket-primary); } + .table tbody th { position: sticky; left: 0; - z-index: 1; + z-index: 5; + background-color: var(--bs-dark); + color: var(--rocket-accent); + font-weight: 600; + min-width: 150px; } - .table thead th, .table tbody th { - background-color: var(--bs-table-bg); + + .table tbody tr:hover { + background-color: rgba(255, 107, 53, 0.1); } - details { - border: 1px solid var(--bs-border-color); - border-radius: 0.5rem; - padding: 0.75rem; + + .rocket-card { + background: linear-gradient(135deg, rgba(4, 78, 137, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%); + border: 1px solid var(--rocket-accent); + border-radius: 1rem; + padding: 1.5rem; + margin-bottom: 1.5rem; + transition: all 0.3s ease; + } + + .rocket-card:hover { + box-shadow: 0 12px 30px rgba(255, 107, 53, 0.3); + transform: translateY(-5px); + border-color: var(--rocket-primary); + } + + .rocket-image { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 0.75rem; + margin-bottom: 1rem; + border: 2px solid var(--rocket-accent); + } + + .rocket-title { + color: var(--rocket-primary); + font-weight: 700; + font-size: 1.5rem; + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; + } + + .rocket-manufacturer { + color: var(--rocket-accent); + font-size: 0.9rem; margin-bottom: 1rem; } - summary { - font-weight: bold; - cursor: pointer; + + .stat-row { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.5rem; + font-size: 0.95rem; + } + + .stat-row i { + color: var(--rocket-primary); + min-width: 20px; + } + + .stat-label { + font-weight: 600; + color: var(--rocket-accent); + min-width: 120px; + } + + .rocket-links { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(255, 107, 53, 0.3); + } + + .rocket-links a { + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-right: 1rem; + color: var(--rocket-accent); + text-decoration: none; + font-size: 0.9rem; + transition: color 0.2s; + } + + .rocket-links a:hover { + color: var(--rocket-primary); } + .stat-category { - font-weight: bold; - background-color: var(--bs-secondary-bg); + background: linear-gradient(90deg, rgba(255, 107, 53, 0.2) 0%, rgba(26, 200, 237, 0.2) 100%); + color: var(--rocket-primary); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; } - @media print { - body { - background-color: #fff; - color: #000; + + .controls { + margin-bottom: 2rem; + padding: 1.5rem; + background: rgba(4, 78, 137, 0.1); + border: 1px solid var(--rocket-accent); + border-radius: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; + } + + .controls select, .controls input { + background-color: rgba(255, 255, 255, 0.1) !important; + color: white !important; + border: 1px solid var(--rocket-accent) !important; + } + + .controls select option { + background-color: #1a1a2e; + color: white; + } + + .btn-rocket { + background: linear-gradient(135deg, var(--rocket-secondary) 0%, var(--rocket-primary) 100%); + border: none; + color: white; + font-weight: 600; + transition: all 0.3s; + } + + .btn-rocket:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4); + color: white; + } + + .badge-rocket { + background: var(--rocket-primary); + color: white; + font-weight: 600; + } + + .stat-category-badge { + display: inline-block; + background: linear-gradient(135deg, var(--rocket-secondary) 0%, var(--rocket-primary) 100%); + color: white; + padding: 0.25rem 0.75rem; + border-radius: 2rem; + font-size: 0.85rem; + font-weight: 600; + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + + footer { + border-top: 1px solid var(--rocket-accent); + margin-top: 3rem; + padding-top: 2rem; + color: #888; + } + + @media (max-width: 768px) { + header { + padding: 1.5rem 1rem; } - .container-fluid { - padding: 0; + + header::before { + font-size: 40px; + right: 1rem; } - details { - page-break-inside: avoid; + + th, td { + padding: 0.75rem !important; + font-size: 0.9rem; } - details[open] summary ~ * { + + .rocket-card { + padding: 1rem; + } + + .controls { + flex-direction: column; + align-items: stretch; + } + + .rocket-links a { display: block; + margin-bottom: 0.5rem; + } + } + + @media print { + body { + background: white; + color: black; + } + header { + background: #f0f0f0; + border: 1px solid #ccc; + } + .controls, .rocket-links, .rocket-card { + display: none; } .no-print { display: none; @@ -105,232 +355,682 @@ </head> <body> <div class="container-fluid my-4"> - <header class="text-center mb-4"> - <h1>Orbital Launch Vehicle Comparison</h1> - <p class="lead">A quick reference guide to the key statistics of the world's leading heavy and super heavy-lift rockets.</p> + <header class="text-center mb-5"> + <h1><i class="bi bi-rocket-takeoff"></i> Orbital Launch Vehicle Comparison</h1> + <p class="lead">An interactive guide to the specifications of the world's leading heavy and super heavy-lift rockets. Compare payloads, thrust, reusability, and more.</p> </header> <main> - <div class="table-responsive"> - <table class="table table-dark table-striped table-bordered table-hover"> - <thead> - <tr> - <th scope="col">Statistic</th> - <th scope="col">Starship</th> - <th scope="col">New Glenn</th> - <th scope="col">Angara A5</th> - <th scope="col">Ariane 6</th> - <th scope="col">Falcon Heavy</th> - <th scope="col">Long March 5</th> - <th scope="col">Vulcan Centaur</th> - <th scope="col">Falcon 9</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Function</th> - <td>Super heavy-lift</td> - <td>Heavy-lift</td> - <td>Heavy-lift</td> - <td>Heavy-lift</td> - <td>Super heavy-lift</td> - <td>Heavy-lift</td> - <td>Heavy-lift</td> - <td>Medium-lift</td> - </tr> - <tr> - <th scope="row">Manufacturer</th> - <td>SpaceX</td> - <td>Blue Origin</td> - <td>Khrunichev</td> - <td>ArianeGroup</td> - <td>SpaceX</td> - <td>CALT</td> - <td>ULA</td> - <td>SpaceX</td> - </tr> - <tr> - <th scope="row">Country</th> - <td>United States</td> - <td>United States</td> - <td>Russia</td> - <td>Europe</td> - <td>United States</td> - <td>China</td> - <td>United States</td> - <td>United States</td> - </tr> - <tr> - <th scope="row">Reusable?</th> - <td>Fully reusable</td> - <td>First Stage</td> - <td>No</td> - <td>No</td> - <td>First Stage & Fairings</td> - <td>No</td> - <td>Future (SMART reuse)</td> - <td>First Stage & Fairings</td> - </tr> - <tr class="stat-category"> - <th scope="row" colspan="9">Size</th> - </tr> - <tr> - <th scope="row">Height</th> - <td>121.3 m (398 ft)</td> - <td>98 m (322 ft)</td> - <td>55.4 m (182 ft)</td> - <td>~63 m (207 ft)</td> - <td>70.0 m (229.6 ft)</td> - <td>56.97 m (186.9 ft)</td> - <td>61.6 m (202 ft)</td> - <td>70 m (230 ft)</td> - </tr> - <tr> - <th scope="row">Diameter</th> - <td>9 m (30 ft)</td> - <td>7 m (23 ft)</td> - <td>3.6 m (core)</td> - <td>5.4 m (18 ft)</td> - <td>3.7 m (each booster)</td> - <td>5 m (16 ft)</td> - <td>5.4 m (18 ft)</td> - <td>3.7 m (12 ft)</td> - </tr> - <tr> - <th scope="row">Mass (Lift-off)</th> - <td>~5.3M kg (11.7M lb)</td> - <td>N/A</td> - <td>773k kg (1.7M lb)</td> - <td>~860k kg (1.9M lb) (A64)</td> - <td>1.42M kg (3.13M lb)</td> - <td>643k kg (1.4M lb)</td> - <td>N/A</td> - <td>549k kg (1.2M lb)</td> - </tr> - <tr class="stat-category"> - <th scope="row" colspan="9">Capacity</th> - </tr> - <tr> - <th scope="row">Payload to LEO</th> - <td>150,000 kg (reusable)</td> - <td>45,000 kg</td> - <td>24,500 kg</td> - <td>21,650 kg (A64)</td> - <td>63,800 kg</td> - <td>25,000 kg (CZ-5B)</td> - <td>27,200 kg</td> - <td>22,800 kg (expendable)</td> - </tr> - <tr> - <th scope="row">Payload to GTO</th> - <td>N/A (Refillable)</td> - <td>13,600 kg</td> - <td>5,400 kg (Briz-M)</td> - <td>11,500 kg (A64)</td> - <td>26,700 kg</td> - <td>14,000 kg</td> - <td>15,300 kg</td> - <td>8,300 kg (expendable)</td> - </tr> - <tr> - <th scope="row">Payload to Mars</th> - <td>100,000 kg</td> - <td>N/A</td> - <td>N/A</td> - <td>N/A</td> - <td>16,800 kg</td> - <td>N/A</td> - <td>N/A</td> - <td>4,020 kg</td> - </tr> - <tr class="stat-category"> - <th scope="row" colspan="9">Launch History</th> - </tr> - <tr> - <th scope="row">Status</th> - <td>Active (Test Flights)</td> - <td>Active</td> - <td>Active</td> - <td>Active</td> - <td>Active</td> - <td>Active</td> - <td>Active</td> - <td>Active</td> - </tr> - <tr> - <th scope="row">First Flight</th> - <td>Apr 20, 2023</td> - <td>Jan 16, 2025</td> - <td>Dec 23, 2014</td> - <td>Jul 9, 2024</td> - <td>Feb 6, 2018</td> - <td>Nov 3, 2016</td> - <td>Jan 8, 2024</td> - <td>Jun 4, 2010</td> - </tr> - </tbody> - </table> + <!-- Controls Section --> + <div class="controls no-print"> + <div style="flex: 1; min-width: 200px;"> + <label for="filterType" class="form-label" style="color: var(--rocket-accent); margin-bottom: 0.25rem;"> + <i class="bi bi-funnel"></i> Filter by Category + </label> + <select id="filterType" class="form-select form-select-sm"> + <option value="">All Rockets</option> + <option value="super">Super Heavy-lift</option> + <option value="heavy">Heavy-lift</option> + <option value="medium">Medium-lift</option> + </select> + </div> + <div style="flex: 1; min-width: 200px;"> + <label for="sortBy" class="form-label" style="color: var(--rocket-accent); margin-bottom: 0.25rem;"> + <i class="bi bi-sort-down"></i> Sort By + </label> + <select id="sortBy" class="form-select form-select-sm"> + <option value="name">Rocket Name</option> + <option value="payload">Payload to LEO (Descending)</option> + <option value="height">Height (Descending)</option> + <option value="year">First Flight (Newest)</option> + </select> + </div> + <button id="resetBtn" class="btn btn-rocket btn-sm no-print" style="align-self: flex-end;"> + <i class="bi bi-arrow-clockwise"></i> Reset + </button> </div> - <h2 class="mt-5 mb-3">Rocket Descriptions</h2> - <div class="row"> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Starship</summary> - <p class="mt-2">The SpaceX Starship is a fully reusable, two-stage, super heavy-lift launch vehicle. It is the most powerful launch vehicle ever developed, designed to carry crew and cargo to Earth orbit, the Moon, Mars, and beyond.</p> - </details> + <!-- Comparison View Section --> + <div id="comparisonView"> + <h2 class="mb-4" style="color: var(--rocket-primary);"><i class="bi bi-table"></i> Detailed Specifications</h2> + <div class="table-responsive"> + <table class="table table-dark table-striped table-bordered table-hover"> + <thead> + <tr> + <th scope="col"><i class="bi bi-info-circle"></i> Statistic</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Starship</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> New Glenn</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Angara A5</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Ariane 6</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Falcon Heavy</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Long March 5</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Vulcan Centaur</th> + <th scope="col"><i class="bi bi-rocket-fill"></i> Falcon 9</th> + </tr> + </thead> + <tbody> + <!-- Basic Info --> + <tr class="stat-category"> + <th colspan="9"><i class="bi bi-info-square"></i> Basic Information</th> + </tr> + <tr> + <th scope="row"><i class="bi bi-tag"></i> Classification</th> + <td><span class="badge-rocket">Super Heavy</span></td> + <td><span class="badge-rocket">Heavy</span></td> + <td><span class="badge-rocket">Heavy</span></td> + <td><span class="badge-rocket">Heavy</span></td> + <td><span class="badge-rocket">Super Heavy</span></td> + <td><span class="badge-rocket">Heavy</span></td> + <td><span class="badge-rocket">Heavy</span></td> + <td><span class="badge-rocket">Medium</span></td> + </tr> + <tr> + <th scope="row"><i class="bi bi-building"></i> Manufacturer</th> + <td>SpaceX</td> + <td>Blue Origin</td> + <td>Khrunichev</td> + <td>ArianeGroup</td> + <td>SpaceX</td> + <td>CALT</td> + <td>ULA</td> + <td>SpaceX</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-globe"></i> Country</th> + <td>United States 🇺🇸</td> + <td>United States 🇺🇸</td> + <td>Russia 🇷🇺</td> + <td>Europe 🇪🇺</td> + <td>United States 🇺🇸</td> + <td>China 🇨🇳</td> + <td>United States 🇺🇸</td> + <td>United States 🇺🇸</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-arrow-repeat"></i> Reusable</th> + <td><span class="badge bg-success"><i class="bi bi-check-circle"></i> Fully</span></td> + <td><span class="badge bg-info">1st Stage</span></td> + <td><span class="badge bg-danger"><i class="bi bi-x-circle"></i> No</span></td> + <td><span class="badge bg-danger"><i class="bi bi-x-circle"></i> No</span></td> + <td><span class="badge bg-info">1st Stage & Fairings</span></td> + <td><span class="badge bg-danger"><i class="bi bi-x-circle"></i> No</span></td> + <td><span class="badge bg-warning text-dark">SMART Reuse (Future)</span></td> + <td><span class="badge bg-info">1st Stage & Fairings</span></td> + </tr> + + <!-- Size/Dimensions --> + <tr class="stat-category"> + <th colspan="9"><i class="bi bi-arrows-expand"></i> Physical Dimensions</th> + </tr> + <tr> + <th scope="row"><i class="bi bi-arrow-up"></i> Height</th> + <td>121.3 m (398 ft)</td> + <td>98 m (322 ft)</td> + <td>55.4 m (182 ft)</td> + <td>~63 m (207 ft)</td> + <td>70.0 m (229.6 ft)</td> + <td>56.97 m (186.9 ft)</td> + <td>61.6 m (202 ft)</td> + <td>70 m (230 ft)</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-arrows-angle-expand"></i> Diameter</th> + <td>9 m (30 ft)</td> + <td>7 m (23 ft)</td> + <td>3.6 m (core)</td> + <td>5.4 m (18 ft)</td> + <td>3.7 m (each booster)</td> + <td>5 m (16 ft)</td> + <td>5.4 m (18 ft)</td> + <td>3.7 m (12 ft)</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-weight"></i> Mass (Liftoff)</th> + <td>~5.3M kg (11.7M lb)</td> + <td>~1.6M kg (est.)</td> + <td>773k kg (1.7M lb)</td> + <td>~860k kg (1.9M lb)</td> + <td>1.42M kg (3.13M lb)</td> + <td>643k kg (1.4M lb)</td> + <td>~1.9M kg (est.)</td> + <td>549k kg (1.2M lb)</td> + </tr> + + <!-- Engines & Thrust --> + <tr class="stat-category"> + <th colspan="9"><i class="bi bi-lightning"></i> Propulsion & Thrust</th> + </tr> + <tr> + <th scope="row"><i class="bi bi-gear"></i> First Stage Engines</th> + <td>33 Raptors</td> + <td>7 BE-4</td> + <td>6 RD-191</td> + <td>4 Vulcain 2.1 + 2 Solid</td> + <td>9 Merlin (cores)</td> + <td>2 YF-100</td> + <td>2 RS-25 (SSME)</td> + <td>9 Merlin</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-fire"></i> Sea Level Thrust (1st Stage)</th> + <td>~76.7 MN (~17.2M lbf)</td> + <td>~1,900 kN (~427k lbf)</td> + <td>~2,090 kN (~470k lbf)</td> + <td>~6,200 kN + Solid</td> + <td>~7,590 kN (3 cores)</td> + <td>~1,220 kN (~274k lbf)</td> + <td>~2,400 kN (est.)</td> + <td>~690 kN (~155k lbf)</td> + </tr> + + <!-- Payload Capacity --> + <tr class="stat-category"> + <th colspan="9"><i class="bi bi-box-seam"></i> Payload Capacity</th> + </tr> + <tr> + <th scope="row"><i class="bi bi-arrow-up-circle"></i> Payload to LEO (best)</th> + <td><strong>150,000 kg</strong> (fully reusable)</td> + <td>45,000 kg</td> + <td>24,500 kg</td> + <td>21,650 kg (A64)</td> + <td>63,800 kg</td> + <td>25,000 kg</td> + <td>27,200 kg</td> + <td>22,800 kg</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-geo"></i> Payload to GTO</th> + <td>~53,000 kg (est.)</td> + <td>13,600 kg</td> + <td>5,400 kg</td> + <td>11,500 kg (A64)</td> + <td>26,700 kg</td> + <td>14,000 kg</td> + <td>15,300 kg</td> + <td>8,300 kg</td> + </tr> + <tr> + <th scope="row"><i class="bi bi-planet"></i> Payload to Mars</th> + <td><strong>100,000 kg</strong> (potential)</td> + <td>N/A</td> + <td>N/A</td> + <td>N/A</td> + <td>16,800 kg</td> + <td>N/A</td> + <td>N/A</td> + <td>4,020 kg</td> + </tr> + + <!-- Operational History --> + <tr class="stat-category"> + <th colspan="9"><i class="bi bi-calendar-event"></i> Operational History</th> + </tr> + <tr> + <th scope="row"><i class="bi bi-play-circle"></i> Status</th> + <td><span class="badge bg-warning text-dark">Test Flights</span></td> + <td><span class="badge bg-success">Active</span></td> + <td><span class="badge bg-success">Active</span></td> + <td><span class="badge bg-success">Active</span></td> + <td><span class="badge bg-success">Active</span></td> + <td><span class="badge bg-success">Active</span></td> + <td><span class="badge bg-success">Active</span></td> + <td><span class="badge bg-success">Active</span></td> + </tr> + <tr> + <th scope="row"><i class="bi bi-calendar-check"></i> First Flight</th> + <td>Apr 20, 2023</td> + <td>Jan 16, 2025</td> + <td>Dec 23, 2014</td> + <td>Jul 9, 2024</td> + <td>Feb 6, 2018</td> + <td>Nov 3, 2016</td> + <td>Jan 8, 2024</td> + <td>Jun 4, 2010</td> + </tr> + </tbody> + </table> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>New Glenn</summary> - <p class="mt-2">Developed by Blue Origin, this heavy-lift rocket features a reusable first stage designed for a minimum of 25 flights. Its first stage is powered by seven BE-4 engines.</p> - </details> + </div> + + <!-- Individual Rocket Cards Section --> + <h2 class="mt-5 mb-4" style="color: var(--rocket-primary);"><i class="bi bi-collection"></i> Rocket Profiles</h2> + <div class="row" id="rocketCards"> + <!-- Starship --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Starship" data-category="super" data-payload="150000" data-height="121.3" data-year="2023"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='20' width='80' height='200' fill='%23FF6B35'/%3E%3Cpolygon points='200,20 160,0 240,0' fill='%23FF8C5A'/%3E%3Ccircle cx='200' cy='80' r='20' fill='%231AC8ED'/%3E%3Crect x='140' y='220' width='30' height='60' fill='%23666'/%3E%3Crect x='230' y='220' width='30' height='60' fill='%23666'/%3E%3C/svg%3E" alt="SpaceX Starship" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Starship</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Super Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>Fully reusable (both stages)</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>150,000 kg (reusable)</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>121.3 m (398 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>33 Raptors</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Apr 20, 2023</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">The most powerful launch vehicle ever developed, designed for Earth orbit, lunar, and Mars missions. Features full reusability for both stages.</p> + <div class="rocket-links"> + <a href="https://www.spacex.com/vehicles/starship/" target="_blank" rel="noopener"><i class="bi bi-globe"></i> Official Site</a> + <a href="https://en.wikipedia.org/wiki/SpaceX_Starship" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Angara A5</summary> - <p class="mt-2">Part of a family of Russian launchers, the Angara A5 is a heavy-lift rocket developed by the Khrunichev State Research and Production Space Center. It is designed to replace several existing launch vehicles.</p> - </details> + + <!-- New Glenn --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="New Glenn" data-category="heavy" data-payload="45000" data-height="98" data-year="2025"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='165' y='30' width='70' height='180' fill='%23004E89'/%3E%3Cpolygon points='200,30 165,10 235,10' fill='%230073A8'/%3E%3Ccircle cx='200' cy='85' r='18' fill='%231AC8ED'/%3E%3Crect x='150' y='210' width='25' height='55' fill='%23666'/%3E%3Crect x='225' y='210' width='25' height='55' fill='%23666'/%3E%3C/svg%3E" alt="Blue Origin New Glenn" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> New Glenn</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> Blue Origin (United States)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>First stage (25+ flights)</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>45,000 kg</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>98 m (322 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>7 BE-4 (first stage)</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Jan 16, 2025</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">Blue Origin's heavy-lift competitor with a reusable first stage designed for minimum 25 flights. Part of Amazon's Project Kuiper infrastructure.</p> + <div class="rocket-links"> + <a href="https://www.blueorigin.com/new-glenn" target="_blank" rel="noopener"><i class="bi bi-globe"></i> Official Site</a> + <a href="https://en.wikipedia.org/wiki/New_Glenn" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> + </div> + + <!-- Falcon Heavy --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Falcon Heavy" data-category="super" data-payload="63800" data-height="70" data-year="2018"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='120' y='40' width='50' height='170' fill='%23444'/%3E%3Crect x='165' y='30' width='70' height='180' fill='%23FF6B35'/%3E%3Crect x='230' y='40' width='50' height='170' fill='%23444'/%3E%3Cpolygon points='200,30 165,10 235,10' fill='%23FF8C5A'/%3E%3Crect x='180' y='210' width='40' height='50' fill='%23666'/%3E%3C/svg%3E" alt="SpaceX Falcon Heavy" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Falcon Heavy</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Super Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>Boosters & fairings</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>63,800 kg</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>70 m (229.6 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>27 Merlin (9 per core)</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Feb 6, 2018</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">Composite of three Falcon 9 first stages clustered together. Most of the highest-capacity operational rocket, with proven reusable booster landings.</p> + <div class="rocket-links"> + <a href="https://www.spacex.com/vehicles/falcon-heavy/" target="_blank" rel="noopener"><i class="bi bi-globe"></i> Official Site</a> + <a href="https://en.wikipedia.org/wiki/Falcon_Heavy" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Ariane 6</summary> - <p class="mt-2">As Europe's new heavy-lift launch vehicle, Ariane 6 comes in two variants: the A62 with two boosters and the A64 with four boosters. It is intended to be a more flexible and cost-effective successor to the Ariane 5.</p> - </details> + + <!-- Falcon 9 --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Falcon 9" data-category="medium" data-payload="22800" data-height="70" data-year="2010"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='175' y='30' width='50' height='190' fill='%23FF6B35'/%3E%3Cpolygon points='200,30 175,10 225,10' fill='%23FF8C5A'/%3E%3Ccircle cx='200' cy='85' r='15' fill='%231AC8ED'/%3E%3Crect x='185' y='220' width='30' height='45' fill='%23666'/%3E%3C/svg%3E" alt="SpaceX Falcon 9" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Falcon 9</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Medium-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>First stage & fairings</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>22,800 kg</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>70 m (230 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>9 Merlin</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Jun 4, 2010</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">The most-launched American orbital rocket in history. Powers SpaceX's Crew Dragon and Cargo Dragon missions to the ISS.</p> + <div class="rocket-links"> + <a href="https://www.spacex.com/vehicles/falcon-9/" target="_blank" rel="noopener"><i class="bi bi-globe"></i> Official Site</a> + <a href="https://en.wikipedia.org/wiki/Falcon_9" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Falcon Heavy</summary> - <p class="mt-2">SpaceX's Falcon Heavy is known for its reusability, with both side boosters and the center core capable of landing for reuse. It is composed of three Falcon 9 nine-engine cores.</p> - </details> + + <!-- Ariane 6 --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Ariane 6" data-category="heavy" data-payload="21650" data-height="63" data-year="2024"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='50' width='80' height='160' fill='%234A90E2'/%3E%3Cpolygon points='200,50 160,30 240,30' fill='%236FA8DC'/%3E%3Crect x='130' y='210' width='35' height='50' fill='%23666'/%3E%3Crect x='235' y='210' width='35' height='50' fill='%23666'/%3E%3C/svg%3E" alt="Ariane 6" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Ariane 6</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> ArianeGroup (Europe)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>No (expendable)</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>21,650 kg (A64)</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>~63 m (207 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>Vulcain 2.1 + Solid Boosters</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Jul 9, 2024</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">Europe's next-generation heavy-lift rocket with variants (A62/A64). More flexible and cost-effective than Ariane 5.</p> + <div class="rocket-links"> + <a href="https://www.esa.int/Applications/Telecommunications/Ariane_6" target="_blank" rel="noopener"><i class="bi bi-globe"></i> Official Site</a> + <a href="https://en.wikipedia.org/wiki/Ariane_6" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Long March 5</summary> - <p class="mt-2">This is China's primary heavy-lift rocket and a key component of its space ambitions, including missions to the Moon and Mars. It comes in two main variants, the standard Long March 5 and the 5B for low Earth orbit missions.</p> - </details> + + <!-- Vulcan Centaur --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Vulcan Centaur" data-category="heavy" data-payload="27200" data-height="61.6" data-year="2024"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='40' width='80' height='170' fill='%236B5B95'/%3E%3Cpolygon points='200,40 160,20 240,20' fill='%238B7BB8'/%3E%3Crect x='145' y='210' width='30' height='50' fill='%23666'/%3E%3Crect x='225' y='210' width='30' height='50' fill='%23666'/%3E%3C/svg%3E" alt="ULA Vulcan Centaur" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Vulcan Centaur</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> ULA (United States)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>SMART reuse (future)</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>27,200 kg</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>61.6 m (202 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>2 RS-25 + BE-4</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Jan 8, 2024</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">ULA's next-generation heavy-lift rocket designed to replace Atlas V and Delta IV. Features advanced avionics and future reusability.</p> + <div class="rocket-links"> + <a href="https://www.ulalaunch.com/rockets/vulcan-centaur" target="_blank" rel="noopener"><i class="bi bi-globe"></i> Official Site</a> + <a href="https://en.wikipedia.org/wiki/Vulcan_Centaur" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Vulcan Centaur</summary> - <p class="mt-2">United Launch Alliance's Vulcan Centaur is a heavy-lift rocket designed to replace the Atlas V and Delta IV rockets. It is primarily used for U.S. national security and commercial launches.</p> - </details> + + <!-- Angara A5 --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Angara A5" data-category="heavy" data-payload="24500" data-height="55.4" data-year="2014"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='60' width='80' height='150' fill='%231F1F3D'/%3E%3Cpolygon points='200,60 160,40 240,40' fill='%233F3F5D'/%3E%3Crect x='130' y='210' width='35' height='45' fill='%23666'/%3E%3Crect x='235' y='210' width='35' height='45' fill='%23666'/%3E%3C/svg%3E" alt="Angara A5" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Angara A5</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> Khrunichev (Russia)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>No (expendable)</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>24,500 kg</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>55.4 m (182 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>6 RD-191</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Dec 23, 2014</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">Part of Russia's modular Angara family. Designed to replace multiple legacy vehicles with a universal heavy-lift capability.</p> + <div class="rocket-links"> + <a href="https://en.wikipedia.org/wiki/Angara_rocket_family" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> - <div class="col-md-6 col-lg-4"> - <details> - <summary>Falcon 9</summary> - <p class="mt-2">A partially reusable, two-stage-to-orbit, medium-lift launch vehicle designed and manufactured by SpaceX. It is the most-launched American orbital rocket in history.</p> - </details> + + <!-- Long March 5 --> + <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Long March 5" data-category="heavy" data-payload="25000" data-height="56.97" data-year="2016"> + <div class="rocket-card"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='165' y='50' width='70' height='160' fill='%23C60C30'/%3E%3Cpolygon points='200,50 165,30 235,30' fill='%23E61C3F'/%3E%3Crect x='150' y='210' width='25' height='50' fill='%23666'/%3E%3Crect x='225' y='210' width='25' height='50' fill='%23666'/%3E%3C/svg%3E" alt="Long March 5" class="rocket-image"> + <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Long March 5</h3> + <p class="rocket-manufacturer"><i class="bi bi-building"></i> CALT (China)</p> + <div class="stat-row"> + <i class="bi bi-tag"></i> + <span class="stat-label">Classification:</span> + <span class="badge-rocket">Heavy-lift</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-repeat"></i> + <span class="stat-label">Reusable:</span> + <span>No (expendable)</span> + </div> + <div class="stat-row"> + <i class="bi bi-box-seam"></i> + <span class="stat-label">LEO Payload:</span> + <span>25,000 kg</span> + </div> + <div class="stat-row"> + <i class="bi bi-arrow-up"></i> + <span class="stat-label">Height:</span> + <span>56.97 m (186.9 ft)</span> + </div> + <div class="stat-row"> + <i class="bi bi-fire"></i> + <span class="stat-label">Engines:</span> + <span>2 YF-100</span> + </div> + <div class="stat-row"> + <i class="bi bi-calendar-check"></i> + <span class="stat-label">First Flight:</span> + <span>Nov 3, 2016</span> + </div> + <p style="font-size: 0.95rem; margin-top: 1rem; color: #ccc;">China's primary heavy-lift vehicle for space exploration, including lunar missions and space station support. Central to Chinese space ambitions.</p> + <div class="rocket-links"> + <a href="https://en.wikipedia.org/wiki/Long_March_5" target="_blank" rel="noopener"><i class="bi bi-wikipedia"></i> Wikipedia</a> + </div> + </div> </div> </div> </main> - + <footer class="text-center mt-5 text-muted no-print"> - <p><small>Generated based on publicly available data. For educational purposes only.</small></p> + <p><small>Enhanced interactive comparison of the world's orbital rockets. Data based on publicly available sources. Last updated: November 2025.</small></p> </footer> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + + <!-- Interactive Features JavaScript --> + <script> + document.addEventListener('DOMContentLoaded', function() { + const filterSelect = document.getElementById('filterType'); + const sortSelect = document.getElementById('sortBy'); + const resetBtn = document.getElementById('resetBtn'); + const rocketItems = document.querySelectorAll('.rocket-item'); + + function applyFiltersAndSort() { + const filterValue = filterSelect.value; + const sortValue = sortSelect.value; + const container = document.getElementById('rocketCards'); + const items = Array.from(rocketItems); + + // Filter + items.forEach(item => { + if (filterValue === '' || item.dataset.category === filterValue) { + item.style.display = ''; + } else { + item.style.display = 'none'; + } + }); + + // Sort + let sortedItems = items.filter(item => item.style.display !== 'none'); + + switch(sortValue) { + case 'name': + sortedItems.sort((a, b) => a.dataset.rocket.localeCompare(b.dataset.rocket)); + break; + case 'payload': + sortedItems.sort((a, b) => parseInt(b.dataset.payload) - parseInt(a.dataset.payload)); + break; + case 'height': + sortedItems.sort((a, b) => parseFloat(b.dataset.height) - parseFloat(a.dataset.height)); + break; + case 'year': + sortedItems.sort((a, b) => parseInt(b.dataset.year) - parseInt(a.dataset.year)); + break; + } + + // Reorder DOM + sortedItems.forEach(item => { + container.appendChild(item); + }); + } + + filterSelect.addEventListener('change', applyFiltersAndSort); + sortSelect.addEventListener('change', applyFiltersAndSort); + + resetBtn.addEventListener('click', function() { + filterSelect.value = ''; + sortSelect.value = 'name'; + applyFiltersAndSort(); + }); + + // Smooth scroll to cards section + const cardsHeading = document.querySelector('h2:nth-of-type(2)'); + if (cardsHeading && sortSelect) { + sortSelect.addEventListener('change', function() { + setTimeout(() => { + cardsHeading.scrollIntoView({ behavior: 'smooth' }); + }, 100); + }); + } + }); + + // Analytics - track interactions (if GA is available) + function trackEvent(category, action, label) { + if (typeof gtag !== 'undefined') { + gtag('event', action, { + 'event_category': category, + 'event_label': label + }); + } + } + </script> </body> </html> \ No newline at end of file