<!-- Application Structure Plan: A single-page, thematic dashboard design is used over a linear report structure to enhance user exploration and understanding. The flow is guided by a sticky navigation bar, moving from the "Why" (regulatory context) to the "What" (emissions, cost, infrastructure, technical challenges) and finally the "So What" (verdict and stakeholder recommendations). This architecture allows users to either follow a narrative path or jump to specific topics of interest, such as the interactive TCO calculator. The key interaction is designed around exploring the "Promise vs. Peril" of ammonia, making the conditional nature of its viability the central theme. This structure was chosen to make the dense, multi-faceted report content more digestible and engaging for a professional audience. -->
<!-- Visualization & Content Choices:
- IMO Regulations (Goal: Inform): A CSS-based timeline shows the regulatory pressure driving the fuel transition.
- WtW Emissions (Goal: Compare): An interactive Chart.js bar chart allows users to compare different ammonia "colors" against fossil fuels, visually demonstrating the importance of the production pathway.
- N2O Risk (Goal: Inform): A simple HTML/CSS visual compares best/worst-case scenarios to highlight the critical, non-CO2 emissions risk.
- TCO Analysis (Goal: Compare/Explore): An interactive Chart.js bar chart with a slider for carbon price. This is the key interactive element, allowing users to discover the "tipping point" where ammonia becomes economically competitive, directly illustrating a core conclusion of the report.
- Onboard Systems (Goal: Organize/Inform): An HTML/CSS-based interactive diagram with clickable hotspots explains the complex onboard technology. This avoids static images and encourages user engagement.
- Safety Framework (Goal: Organize/Inform): An HTML/CSS concentric circle diagram visualizes the defense-in-depth safety strategy.
- Stakeholder Recommendations (Goal: Inform): An HTML/CSS accordion cleanly presents targeted information without cluttering the page.
- All choices adhere to the NO SVG/Mermaid rule, using Chart.js for canvas-based charts and structured HTML/CSS for diagrams. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #F8F7F4;
color: #374151;
}
.chart-container {
position: relative;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 50vh;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.nav-link {
transition: color 0.3s ease, border-color 0.3s ease;
border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link.active {
color: #4B8A8B;
border-bottom-color: #4B8A8B;
}
.custom-tooltip {
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
position: absolute;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
z-index: 10;
width: 200px;
}
#ship-diagram .component {
position: absolute;
background-color: white;
border: 2px solid #9ca3af;
border-radius: 0.5rem;
padding: 0.5rem;
text-align: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
#ship-diagram .component:hover {
border-color: #4B8A8B;
transform: scale(1.05);
z-index: 20;
}
#ship-diagram .connector {
position: absolute;
background-color: #9ca3af;
z-index: -1;
}
.fade-in-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.accordion-header {
transition: background-color 0.2s, transform 0.2s ease;
}
.accordion-header:hover {
transform: scale(1.02);
}
</style>
<!-- Header & Navigation -->
<header id="header" class="bg-[#F8F7F4]/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
<div class="container mx-auto px-4">
<nav class="flex items-center justify-between py-4">
<div class="text-xl font-bold text-gray-800">
<span class="text-[#2C3E50]">Ammonia Fuel</span>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#overview" class="nav-link text-gray-600 font-semibold pb-1">The Big Picture</a>
<a href="#emissions" class="nav-link text-gray-600 font-semibold pb-1">Emissions</a>
<a href="#economics" class="nav-link text-gray-600 font-semibold pb-1">Economics</a>
<a href="#infrastructure" class="nav-link text-gray-600 font-semibold pb-1">Global Rollout</a>
<a href="#tech" class="nav-link text-gray-600 font-semibold pb-1">Tech & Safety</a>
<a href="#verdict" class="nav-link text-gray-600 font-semibold pb-1">The Verdict</a>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-gray-700 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</nav>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<a href="#overview" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">The Big Picture</a>
<a href="#emissions" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">Emissions</a>
<a href="#economics" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">Economics</a>
<a href="#infrastructure" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">Global Rollout</a>
<a href="#tech" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">Tech & Safety</a>
<a href="#verdict" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">The Verdict</a>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8 md:py-12">
<!-- Hero Section -->
<section class="text-center mb-16 md:mb-24 fade-in-section">
<h1 class="text-4xl md:text-6xl font-bold text-[#2C3E50] mb-4">Ammonia-Powered Ships</h1>
<p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-600">A promising but perilous path to decarbonizing maritime transport. This interactive report explores the critical factors shaping ammonia's future as a marine fuel.</p>
</section>
<!-- Section 1: The Big Picture -->
<section id="overview" class="py-12 md:py-16 scroll-mt-20 fade-in-section">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-[#2C3E50]">The Big Picture: A Regulatory Push</h2>
<p class="mt-4 max-w-3xl mx-auto text-gray-600">The global shipping industry is not choosing to change; it's being mandated to. Aggressive new regulations from the International Maritime Organization (IMO) are forcing a rapid transition away from fossil fuels, making the search for alternatives like ammonia an urgent necessity. This section outlines the regulatory landscape that sets the stage for this transformation.</p>
</div>
<div class="relative mt-8">
<div class="border-l-4 border-[#4B8A8B] ml-4 md:ml-0 md:border-t-4 md:border-l-0 md:mx-auto md:w-full md:max-w-5xl">
<div class="flex flex-col md:flex-row justify-between -ml-6 md:ml-0 md:-mt-6">
<div class="timeline-item mb-12 md:mb-0">
<div class="dot bg-[#4B8A8B]"></div>
<h3 class="font-bold text-lg text-[#2C3E50]">2023: Raised Ambition</h3>
<p class="text-sm text-gray-600">IMO adopts a revised GHG strategy, targeting net-zero emissions "by or around 2050" and setting crucial interim checkpoints for 2030 and 2040.</p>
</div>
<div class="timeline-item mb-12 md:mb-0">
<div class="dot bg-[#4B8A8B]"></div>
<h3 class="font-bold text-lg text-[#2C3E50]">2027: Enforcement Begins</h3>
<p class="text-sm text-gray-600">The 'Net-Zero Framework' enters into force, establishing mandatory GHG intensity reduction targets for fuels on a Well-to-Wake basis.</p>
</div>
<div class="timeline-item mb-12 md:mb-0">
<div class="dot bg-[#D97706]"></div>
<h3 class="font-bold text-lg text-[#2C3E50]">2028: Carbon Price Live</h3>
<p class="text-sm text-gray-600">A global carbon pricing mechanism starts, penalizing non-compliance with prices up to $380/tonne of CO₂eq, fundamentally altering fuel economics.</p>
</div>
<div class="timeline-item">
<div class="dot bg-[#4B8A8B]"></div>
<h3 class="font-bold text-lg text-[#2C3E50]">2030: First Checkpoint</h3>
<p class="text-sm text-gray-600">Target of 20-30% absolute GHG reduction. Mandates that at least 5% of shipping's energy comes from zero or near-zero emission fuels.</p>
</div>
</div>
</div>
</div>
<style>
.timeline-item { position: relative; width: 100%; padding-left: 1.5rem; md:padding-left: 0; md:padding-top: 1.5rem; md:w-1/4; }
.timeline-item .dot { position: absolute; top: 0.25rem; left: -0.625rem; height: 20px; width: 20px; border-radius: 50%; border: 4px solid #F8F7F4; }
@media (min-width: 768px) {
.timeline-item .dot { top: -0.625rem; left: 50%; transform: translateX(-50%); }
}
</style>
</section>
<!-- Section 2: Emissions Reality -->
<section id="emissions" class="py-12 md:py-16 scroll-mt-20 bg-white rounded-2xl shadow-lg my-12 fade-in-section">
<div class="text-center mb-12 px-4">
<h2 class="text-3xl md:text-4xl font-bold text-[#2C3E50]">Emissions Reality: Promise vs. Peril</h2>
<p class="mt-4 max-w-3xl mx-auto text-gray-600">Ammonia's main appeal is its carbon-free chemical structure. However, its true climate impact depends entirely on how it's produced and combusted. This section explores the full "Well-to-Wake" emissions profile and the hidden risks that could undermine its green credentials.</p>
</div>
<div class="px-4">
<div class="flex justify-center flex-wrap gap-2 mb-8">
<button class="fuel-btn active" data-fuel="all">All Fuels</button>
<button class="fuel-btn" data-fuel="HFO">HFO</button>
<button class="fuel-btn" data-fuel="Grey Ammonia">Grey Ammonia</button>
<button class="fuel-btn" data-fuel="Blue Ammonia">Blue Ammonia</button>
<button class="fuel-btn" data-fuel="Green Ammonia">Green Ammonia</button>
</div>
<style>
.fuel-btn { padding: 8px 16px; border-radius: 9999px; background-color: #e5e7eb; color: #4b5563; font-weight: 600; transition: all 0.2s ease; border: 2px solid transparent; }
.fuel-btn:hover { background-color: #d1d5db; }
.fuel-btn.active { background-color: #DDEBEB; color: #4B8A8B; border-color: #4B8A8B; }
</style>
<div class="chart-container">
<canvas id="wtwEmissionsChart"></canvas>
</div>
</div>
<div class="mt-16 grid md:grid-cols-2 gap-8 px-4 items-center">
<div class="bg-amber-50 border-l-4 border-amber-400 p-6 rounded-r-lg">
<h3 class="text-xl font-bold text-amber-800">The Hidden Threat: Nitrous Oxide (N₂O)</h3>
<p class="mt-2 text-gray-700">The biggest risk to ammonia's climate case isn't CO₂—it's N₂O, a greenhouse gas <span class="font-bold">273 times more potent</span>. If not controlled, emissions of N₂O and unburned ammonia ('slip') from the engine could make ammonia's total climate impact <span class="font-bold text-red-600">worse than conventional fuel oil.</span></p>
<p class="mt-2 text-sm text-gray-500">Effective after-treatment technology to eliminate these emissions is not just an add-on; it's a non-negotiable prerequisite for ammonia to be a viable green fuel.</p>
</div>
<div class="text-center">
<h4 class="font-semibold text-lg mb-2">Climate Impact Scenarios for Green Ammonia</h4>
<div class="flex justify-around items-end max-w-sm mx-auto">
<div class="text-center">
<div class="h-24 w-16 bg-green-200 mx-auto rounded-t-lg relative flex items-end"><div class="h-[10%] w-full bg-green-500"></div></div>
<p class="font-semibold mt-1">Best Case</p>
<p class="text-sm text-gray-500">80% Better</p>
</div>
<div class="text-center">
<div class="h-24 w-16 bg-gray-200 mx-auto rounded-t-lg"></div>
<p class="font-semibold mt-1">Fuel Oil</p>
<p class="text-sm text-gray-500">Baseline</p>
</div>
<div class="text-center">
<div class="h-32 w-16 bg-red-200 mx-auto rounded-t-lg relative flex items-end"><div class="h-full w-full bg-red-500"></div></div>
<p class="font-semibold mt-1">Worst Case</p>
<p class="text-sm text-gray-500">24% Worse</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Economic Viability -->
<section id="economics" class="py-12 md:py-16 scroll-mt-20 fade-in-section">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-[#2C3E50]">The Cost Hurdle: Can We Afford It?</h2>
<p class="mt-4 max-w-3xl mx-auto text-gray-600">Today, green ammonia is far more expensive than conventional fuel, and the ships that use it cost more to build. Its economic viability is almost entirely dependent on one factor: the price of carbon. Use the slider below to see how carbon pricing can level the playing field and change the Total Cost of Ownership (TCO).</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="mb-8">
<label for="carbonPriceSlider" class="block font-bold text-lg text-center text-gray-700 mb-2">Carbon Price: $<span id="carbonPriceValue">150</span> / tonne CO₂eq</label>
<input id="carbonPriceSlider" type="range" min="0" max="400" value="150" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" style="accent-color: #D97706;">
</div>
<div class="chart-container">
<canvas id="tcoChart"></canvas>
</div>
<div class="mt-12 grid md:grid-cols-2 gap-8 text-center">
<div class="bg-white p-6 rounded-xl shadow">
<h3 class="font-bold text-lg text-[#2C3E50]">Newbuild Premium</h3>
<p class="text-5xl font-bold text-[#D97706] mt-2">+16%</p>
<p class="mt-2 text-gray-600">An ammonia dual-fuel vessel costs significantly more upfront than a conventional ship due to specialized tanks and safety systems.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow">
<h3 class="font-bold text-lg text-[#2C3E50]">Retrofit Cost</h3>
<p class="text-5xl font-bold text-[#D97706]">+24%</p>
<p class="mt-2 text-gray-600">Converting an existing vessel is even more expensive, costing up to 24% of the original newbuild price.</p>
</div>
</div>
</div>
</section>
<!-- Section 4: Global Availability -->
<section id="infrastructure" class="py-12 md:py-16 scroll-mt-20 bg-white rounded-2xl shadow-lg my-12 fade-in-section">
<div class="text-center mb-12 px-4">
<h2 class="text-3xl md:text-4xl font-bold text-[#2C3E50]">Global Rollout: The Chicken & Egg Problem</h2>
<p class="mt-4 max-w-3xl mx-auto text-gray-600">Shipowners won't buy ammonia-powered vessels without fuel, and energy companies won't produce green ammonia without demand. This section explains the immense scale-up required for production and the "Green Corridor" strategy being used to build the necessary bunkering infrastructure from scratch.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 text-center px-4">
<div class="bg-gray-100 p-6 rounded-xl">
<div class="text-4xl mb-2">🏗</div>
<h3 class="text-xl font-bold text-[#2C3E50]">180M Tonnes/Year</h3>
<p class="mt-2 text-gray-600">Current global "grey" ammonia production, mostly for fertilizer. This is unsuitable for decarbonization.</p>
</div>
<div class="bg-[#DDEBEB] p-6 rounded-xl">
<div class="text-4xl mb-2">⚓</div>
<h3 class="text-xl font-bold text-[#4B8A8B]">150M Tonnes/Year</h3>
<p class="mt-2 text-gray-600">Additional <span class="font-bold">green</span> ammonia needed to meet just 30% of marine fuel demand by 2050. A whole new industry is required.</p>
</div>
<div class="bg-gray-100 p-6 rounded-xl">
<div class="text-4xl mb-2">🚢</div>
<h3 class="text-xl font-bold text-[#2C3E50]">120 Ports</h3>
<p class="mt-2 text-gray-600">Number of ports that can handle ammonia as cargo today, but <span class="font-bold">none</span> are equipped for routine ship refueling (bunkering).</p>
</div>
</div>
<div class="mt-12 px-4">
<h3 class="text-2xl font-bold text-center text-[#2C3E50] mb-6">Solution: The "Green Corridor" Strategy</h3>
<div class="flex items-center justify-center space-x-2 md:space-x-4 text-center">
<div class="p-4 rounded-lg w-1/3">
<div class="text-4xl mb-2">⛅</div>
<h4 class="font-bold">1. Production Hub</h4>
<p class="text-sm text-gray-500">Concentrate investment in regions with cheap renewable energy (e.g., Australia, Middle East).</p>
</div>
<div class="flex-1 border-t-2 border-dashed border-gray-400"></div>
<div class="p-4 rounded-lg w-1/3">
<div class="text-4xl mb-2">🚢</div>
<h4 class="font-bold">2. Dedicated Route</h4>
<p class="text-sm text-gray-500">Align producers, ports, and shipowners along a single, high-volume trade lane.</p>
</div>
<div class="flex-1 border-t-2 border-dashed border-gray-400"></div>
<div class="p-4 rounded-lg w-1/3">
<div class="text-4xl mb-2">⛽</div>
<h4 class="font-bold">3. Bunkering Hub</h4>
<p class="text-sm text-gray-500">Build the required refueling infrastructure at key ports on the route (e.g., Singapore, Rotterdam).</p>
</div>
</div>
</div>
</section>
<!-- Section 5: Tech & Safety -->
<section id="tech" class="py-12 md:py-16 scroll-mt-20 fade-in-section">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-[#2C3E50]">The Engineering & Safety Challenge</h2>
<p class="mt-4 max-w-3xl mx-auto text-gray-600">Using ammonia requires a complete redesign of onboard systems. More critically, its high toxicity presents the single greatest barrier to adoption. Safety is not just a feature; it's the foundation upon which ammonia's future rests.</p>
</div>
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div>
<h3 class="text-2xl font-bold text-[#2C3E50] mb-4 text-center">Integrated Onboard System</h3>
<div id="ship-diagram" class="relative bg-gray-100 border-2 border-gray-200 rounded-lg p-4 h-[450px] md:h-[500px]">
<!-- Components -->
<div class="component" style="top: 5%; left: 5%;" data-title="Bunkering Station" data-text="Where fuel is received. Requires specialized hoses and emergency breakaway couplings to prevent leaks."><span class="text-2xl">📥</span><div class="text-xs font-bold">Bunkering</div></div>
<div class="component" style="top: 30%; left: 25%;" data-title="Type-C Fuel Tank" data-text="A cryogenic/pressurized tank made of specialized steel. It is much larger and more expensive than a conventional fuel tank, leading to cargo capacity loss."><span class="text-2xl">📦</span><div class="text-xs font-bold">Fuel Tank</div></div>
<div class="component" style="top: 65%; left: 35%;" data-title="Fuel Supply System (AFSS)" data-text="A complex module of pumps and heat exchangers that prepares the ammonia for the engine at the correct temperature and pressure."><span class="text-2xl">⚙️</span><div class="text-xs font-bold">Supply Unit</div></div>
<div class="component" style="top: 75%; left: 65%;" data-title="Dual-Fuel Engine" data-text="Combusts ammonia with a small amount of pilot fuel (e.g., MGO) to ensure stable ignition. Commercial engines are expected by 2025-2026."><span class="text-2xl">🔥</span><div class="text-xs font-bold">Engine</div></div>
<div class="component" style="top: 40%; left: 80%;" data-title="Exhaust After-Treatment" data-text="Critical for safety and climate. An SCR system reduces NOx, and a second catalyst eliminates dangerous ammonia slip."><span class="text-2xl">💨</span><div class="text-xs font-bold">Exhaust</div></div>
<!-- Connectors -->
<div class="connector" style="top: 15%; left: 20%; width: 8%; height: 4px;"></div>
<div class="connector" style="top: 42%; left: 40%; width: 8%; height: 4px; transform: rotate(45deg);"></div>
<div class="connector" style="top: 78%; left: 51%; width: 15%; height: 4px;"></div>
<div class="connector" style="top: 60%; left: 81%; width: 4px; height: 18%;"></div>
<div class="connector" style="top: 60%; left: 78%; width: 10%; height: 4px; transform: rotate(-45deg);"></div>
<div id="diagram-tooltip" class="custom-tooltip"></div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold text-[#2C3E50] mb-4 text-center">Multi-Layered Safety Framework</h3>
<div class="relative w-full aspect-square max-w-md mx-auto flex items-center justify-center">
<div class="absolute rounded-full bg-red-100" style="width: 100%; height: 100%;">
<div class="layer-text top-4">Emergency Response</div>
</div>
<div class="absolute rounded-full bg-orange-100" style="width: 75%; height: 75%;">
<div class="layer-text top-3">Procedures & People</div>
</div>
<div class="absolute rounded-full bg-yellow-100" style="width: 50%; height: 50%;">
<div class="layer-text top-2">Active Mitigation</div>
</div>
<div class="absolute rounded-full bg-green-100" style="width: 25%; height: 25%;">
<div class="layer-text top-1">Inherent Design</div>
</div>
<div class="absolute text-center p-2 text-xs font-bold text-green-900">Core</div>
</div>
<style>
.layer-text { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; text-align: center; }
</style>
<p class="text-center mt-4 text-gray-600">Safety relies on a "defense-in-depth" approach, from core design choices to emergency planning. Unlike other fuels, the primary hazard is not fire, but <span class="font-bold">extreme toxicity</span>.</p>
</div>
</div>
</section>
<!-- Section 6: The Verdict -->
<section id="verdict" class="py-12 md:py-16 scroll-mt-20 bg-white rounded-2xl shadow-lg my-12 fade-in-section">
<div class="text-center mb-12 px-4">
<h2 class="text-3xl md:text-4xl font-bold text-[#2C3E50]">The Verdict: A Conditional Future</h2>
<p class="mt-4 max-w-3xl mx-auto text-gray-600">Ammonia is not a silver bullet, but it is a leading contender for decarbonizing deep-sea shipping. Its success is not guaranteed; it depends on the industry's ability to overcome immense challenges. This final section provides a balanced scorecard and strategic recommendations.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-5 gap-4 px-4 mb-12">
<div class="card"><div class="title">Emissions</div><div class="rating good">Conditional</div><div class="desc">Zero CO₂, but high risk from N₂O and slip.</div></div>
<div class="card"><div class="title">Economics</div><div class="rating bad">Negative</div><div class="desc">High fuel and CAPEX costs. Viability depends on high carbon prices.</div></div>
<div class="card"><div class="title">Availability</div><div class="rating bad">Challenging</div><div class="desc">Massive production scale-up and new infrastructure required.</div></div>
<div class="card"><div class="title">Technology</div><div class="rating neutral">Progressing</div><div class="desc">Engines are near, but onboard integration and cargo loss are key issues.</div></div>
<div class="card"><div class="title">Safety</div><div class="rating bad">Major Barrier</div><div class="desc">High toxicity is the single biggest hurdle to adoption.</div></div>
</div>
<style>
.card .title { font-weight: 700; color: #1f2937; }
.card .rating { font-weight: 600; font-size: 1.125rem; margin: 0.25rem 0; }
.card .rating.good { color: #16a34a; }
.card .rating.neutral { color: #f59e0b; }
.card .rating.bad { color: #dc2626; }
.card .desc { font-size: 0.875rem; color: #4b5563; }
</style>
<div class="max-w-4xl mx-auto mt-8 px-4">
<h3 class="text-2xl font-bold text-[#2C3E50] mb-6 text-center">Recommendations for Stakeholders</h3>
<div id="accordion" class="space-y-3">
<div class="accordion-item">
<button class="accordion-header">For Shipowners</button>
<div class="accordion-content">Invest in fuel flexibility (dual-fuel vessels) and maximize energy efficiency to reduce costs and future penalties. Engage in pilot projects to gain early experience.</div>
</div>
<div class="accordion-item">
<button class="accordion-header">For Ports & Fuel Suppliers</button>
<div class="accordion-content">Collaborate on "Green Corridor" initiatives to develop strategic bunkering infrastructure. Fuel suppliers must accelerate investment in green ammonia production, securing offtake agreements.</div>
</div>
<div class="accordion-item">
<button class="accordion-header">For Regulators</button>
<div class="accordion-content">Provide long-term policy certainty with a clear, escalating carbon price. Use public funds to de-risk first-mover projects and fund critical R&D in safety and emissions mitigation.</div>
</div>
<div class="accordion-item">
<button class="accordion-header">For Technology Providers</button>
<div class="accordion-content">Focus on delivering proven, reliable, and holistic systems that integrate propulsion, fuel handling, and safety. The long-term performance of emissions after-treatment is paramount.</div>
</div>
</div>
<style>
.accordion-header { width: 100%; text-align: left; padding: 1rem; background-color: #e5e7eb; color: #1f2937; font-weight: 600; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.accordion-header:hover { background-color: #d1d5db; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: white; padding: 0 1rem; border-radius: 0 0 0.5rem 0.5rem; }
.accordion-content.open { max-height: 200px; padding: 1rem; }
.accordion-header::after { content: '+'; font-size: 1.5rem; transition: transform 0.3s; }
.accordion-header.open::after { content: '-'; transform: rotate(180deg); }
</style>
</div>
</section>
</main>
<footer class="bg-gray-800 text-white mt-16 fade-in-section">
<div class="container mx-auto px-4 py-8">
<div class="grid md:grid-cols-2 gap-8 items-start">
<div>
<h3 class="font-bold text-lg mb-4">Sources & Further Reading</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
<a href="https://www.google.com/search?q=International+Maritime+Organization+(IMO)+GHG+Strategy+Reports" target="_blank" rel="noopener noreferrer" class="source-link">IMO GHG Strategy Reports</a>
<a href="https://www.google.com/search?q=DNV+Ammonia+as+a+Marine+Fuel+Whitepaper" target="_blank" rel="noopener noreferrer" class="source-link">DNV - Ammonia Whitepapers</a>
<a href="https://www.google.com/search?q=MAN+Energy+Solutions+Ammonia+Engine" target="_blank" rel="noopener noreferrer" class="source-link">MAN ES Tech Docs</a>
<a href="https://www.google.com/search?q=W%C3%A4rtsil%C3%A4+Ammonia+Engine" target="_blank" rel="noopener noreferrer" class="source-link">Wärtsilä Tech Docs</a>
<a href="https://www.google.com/search?q=The+World+Bank+Role+of+LNG+in+Shipping+Transition" target="_blank" rel="noopener noreferrer" class="source-link">World Bank - Fuel Transition</a>
<a href="https://www.google.com/search?q=International+Energy+Agency+(IEA)+Future+of+Hydrogen" target="_blank" rel="noopener noreferrer" class="source-link">IEA - Future of Hydrogen</a>
<a href="https://www.google.com/search?q=M%C3%A6rsk+Mc-Kinney+M%C3%B8ller+Center+for+Zero+Carbon+Shipping" target="_blank" rel="noopener noreferrer" class="source-link">MMMCZCS Research</a>
<a href="https://www.google.com/search?q=S%26P+Global+Platts+Ammonia+Fuel+Price" target="_blank" rel="noopener noreferrer" class="source-link">S&P Global Platts - Pricing</a>
</div>
<style>.source-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #9ca3af; text-decoration: none; transition: color 0.3s ease; } .source-link:hover { color: #ffffff; } .source-link::after { content: '↗'; font-size: 0.8em; }</style>
</div>
<div class="text-center md:text-right mt-8 md:mt-0">
<p>Interactive report created based on expert analysis of ammonia as a marine fuel.</p>
<p class="text-xs text-gray-400 mt-2">This is a synthesized, interactive representation and not the original source document.</p>
</div>
</div>
</div>
</footer>
<script type="module">
import Chart from 'https://cdn.jsdelivr.net/npm/chart.js/auto/+esm';
document.addEventListener('DOMContentLoaded', function () {
// Mobile Menu
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Active Nav Link on Scroll
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
window.onscroll = () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
if (pageYOffset >= sectionTop - 150) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').includes(current)) {
link.classList.add('active');
}
});
};
// Accordion Logic
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const currentlyOpen = document.querySelector('.accordion-header.open');
if (currentlyOpen && currentlyOpen !== header) {
currentlyOpen.classList.remove('open');
currentlyOpen.nextElementSibling.classList.remove('open');
}
header.classList.toggle('open');
header.nextElementSibling.classList.toggle('open');
});
});
// Interactive Diagram Tooltip
const components = document.querySelectorAll('#ship-diagram .component');
const tooltip = document.getElementById('diagram-tooltip');
const diagram = document.getElementById('ship-diagram');
components.forEach(component => {
component.addEventListener('mouseenter', (e) => {
const title = component.dataset.title;
const text = component.dataset.text;
tooltip.innerHTML = `<div class="font-bold text-gray-800">${title}</div><div class="text-sm text-gray-600">${text}</div>`;
const diagramRect = diagram.getBoundingClientRect();
const compRect = component.getBoundingClientRect();
let top = compRect.top - diagramRect.top + (compRect.height / 2);
let left = compRect.left - diagramRect.left + compRect.width + 15;
tooltip.style.opacity = '1';
if (left + tooltip.offsetWidth > diagram.offsetWidth) {
left = compRect.left - diagramRect.left - tooltip.offsetWidth - 15;
}
top = top - (tooltip.offsetHeight/2);
if (top < 0) top = 5;
if (top + tooltip.offsetHeight > diagram.offsetHeight) top = diagram.offsetHeight - tooltip.offsetHeight - 5;
tooltip.style.top = `${top}px`;
tooltip.style.left = `${left}px`;
});
component.addEventListener('mouseleave', () => {
tooltip.style.opacity = '0';
});
});
// Chart.js Label Wrapper
function wrapText(context) {
const label = context.label || '';
const maxLength = 16;
if (label.length > maxLength) {
const parts = [];
let currentPart = '';
label.split(' ').forEach(word => {
if (currentPart.length + word.length < maxLength) {
currentPart += word + ' ';
} else {
parts.push(currentPart.trim());
currentPart = word + ' ';
}
});
parts.push(currentPart.trim());
return parts;
}
return label;
}
// --- Emissions Chart ---
const wtwEmissionsData = {
'HFO': { 'Well-to-Tank': 100, 'Tank-to-Wake': 585 },
'MGO': { 'Well-to-Tank': 120, 'Tank-to-Wake': 570 },
'LNG': { 'Well-to-Tank': 150, 'Tank-to-Wake': 450 },
'Grey Ammonia': { 'Well-to-Tank': 982, 'Tank-to-Wake': 43 },
'Blue Ammonia': { 'Well-to-Tank': 162, 'Tank-to-Wake': 43 },
'Green Ammonia': { 'Well-to-Tank': 49, 'Tank-to-Wake': 43 }
};
const wtwCtx = document.getElementById('wtwEmissionsChart').getContext('2d');
let wtwChart;
function renderWtwChart(filter = 'all') {
const filteredData = (filter === 'all') ? wtwEmissionsData : { [filter]: wtwEmissionsData[filter] };
const labels = Object.keys(filteredData);
const wttData = labels.map(label => filteredData[label]['Well-to-Tank']);
const ttwData = labels.map(label => filteredData[label]['Tank-to-Wake']);
const chartData = {
labels: labels,
datasets: [
{
label: 'Well-to-Tank (Production)',
data: wttData,
backgroundColor: '#D97706',
borderColor: '#b45309',
borderWidth: 1
},
{
label: 'Tank-to-Wake (Combustion)',
data: ttwData,
backgroundColor: '#2C3E50',
borderColor: '#1e293b',
borderWidth: 1
}
]
};
if (wtwChart) {
wtwChart.destroy();
}
wtwChart = new Chart(wtwCtx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 1000,
easing: 'easeOutQuart'
},
scales: {
x: { stacked: true },
y: { stacked: true, title: { display: true, text: 'gCO₂eq / kWh' } }
},
plugins: {
title: { display: true, text: 'Well-to-Wake GHG Emissions Comparison', font: {size: 16} },
tooltip: {
callbacks: {
footer: (tooltipItems) => {
let total = 0;
tooltipItems.forEach(function(tooltipItem) {
total += tooltipItem.dataset.data[tooltipItem.dataIndex];
});
return 'Total: ' + total.toFixed(0);
}
}
}
}
}
});
}
document.querySelectorAll('.fuel-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelector('.fuel-btn.active').classList.remove('active');
e.target.classList.add('active');
renderWtwChart(e.target.dataset.fuel);
});
});
// --- TCO Chart ---
const tcoSlider = document.getElementById('carbonPriceSlider');
const tcoValue = document.getElementById('carbonPriceValue');
const tcoCtx = document.getElementById('tcoChart').getContext('2d');
let tcoChart;
const baseTcoData = {
'HFO Vessel': { CAPEX: 150, OPEX: 75, FuelEX: 180, GHG_emissions: 1100 },
'Ammonia DF Newbuild': { CAPEX: 174, OPEX: 78, FuelEX: 450, GHG_emissions: 80 },
'Ammonia Retrofit': { CAPEX: 182, OPEX: 78, FuelEX: 415, GHG_emissions: 300 }
};
function updateTcoChart(carbonPrice = 150) {
const labels = Object.keys(baseTcoData);
const capexData = labels.map(label => baseTcoData[label].CAPEX);
const opexData = labels.map(label => baseTcoData[label].OPEX);
const fuelexData = labels.map(label => baseTcoData[label].FuelEX);
const ghgexData = labels.map(label => (baseTcoData[label].GHG_emissions * carbonPrice) / 1000); // converting to M USD
const chartData = {
labels: labels.map(label => wrapText({label})),
datasets: [
{ label: 'CAPEX/Conversion', data: capexData, backgroundColor: '#2C3E50' },
{ label: 'OPEX (Non-Fuel)', data: opexData, backgroundColor: '#4B8A8B' },
{ label: 'Fuel Cost', data: fuelexData, backgroundColor: '#64748b' },
{ label: 'Carbon Cost (GHGEX)', data: ghgexData, backgroundColor: '#D97706' },
]
};
if (!tcoChart) {
tcoChart = new Chart(tcoCtx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: { display: true, text: '25-Year Total Cost of Ownership (TCO)', font: { size: 16 } },
tooltip: { enabled: true }
},
scales: {
x: { stacked: true },
y: { stacked: true, title: { display: true, text: 'Million USD' } }
},
}
});
} else {
tcoChart.data = chartData;
tcoChart.update();
}
}
tcoSlider.addEventListener('input', (e) => {
const price = e.target.value;
tcoValue.textContent = price;
updateTcoChart(price);
});
// Animation on Scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
}, {
threshold: 0.1
});
document.querySelectorAll('.fade-in-section').forEach(section => {
observer.observe(section);
});
// Initial Renders
renderWtwChart();
updateTcoChart();
});
</script>
