2025-06-30 07:54:31 -04:00
<!DOCTYPE html>
< html lang = "en" class = "scroll-smooth" >
2025-06-29 14:55:49 -04:00
< head >
2025-06-30 07:54:31 -04:00
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > GridFire< / title >
<!-- Tailwind CSS for styling -->
< script src = "https://cdn.tailwindcss.com" > < / script >
<!-- Google Fonts: Inter -->
< 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=Inter:wght@400;500;600;700&display=swap" rel = "stylesheet" >
< style >
/* Define color variables for light and dark themes */
:root {
--bg-color: #f0f4f8;
--text-color: #1a202c;
--header-bg: transparent;
--card-bg: #ffffff;
--border-color: rgba(0, 0, 0, 0.1);
--link-color: #2b6cb0;
--link-hover-color: #2c5282;
--modal-bg: #ffffff;
--mobile-menu-bg: rgba(240, 248, 255, 0.95);
}
html.dark {
--bg-color: #0d1117;
--text-color: #e2e8f0;
--header-bg: transparent;
--card-bg: #1e293b;
--border-color: rgba(255, 255, 255, 0.1);
--link-color: #63b3ed;
--link-hover-color: #90cdf4;
--modal-bg: #1e293b;
--mobile-menu-bg: rgba(13, 17, 23, 0.95);
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Styling for header, cards, and modal to use CSS variables */
.main-header {
background-color: var(--header-bg);
transition: background-color 0.3s ease;
}
.content-card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
}
.modal-card {
background-color: var(--modal-bg);
}
.mobile-menu-overlay {
background-color: var(--mobile-menu-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
< / style >
2025-06-29 14:55:49 -04:00
< / head >
2025-06-30 07:54:31 -04:00
< body class = "min-h-screen" >
<!-- Hero Section with Canvas Background -->
< div id = "hero-section" class = "relative h-[60vh] min-h-[400px] max-h-[600px] w-full overflow-hidden" >
<!-- The canvas element for the fusion simulation background -->
< canvas id = "fusionCanvas" class = "absolute top-0 left-0 w-full h-full z-0" > < / canvas >
<!-- Header and Navigation -->
< header class = "absolute top-0 left-0 right-0 z-20 main-header" >
< nav class = "container mx-auto px-4 sm:px-6 lg:px-8" >
< div class = "flex items-center justify-between h-16" >
< div class = "flex items-center" >
< a href = "#home" class = "font-bold text-xl" > GridFire< / a >
< / div >
< div class = "hidden sm:flex items-center space-x-6" >
< a href = "#home" class = "nav-link text-sm font-medium hover:text-[var(--link-hover-color)] transition-colors" > Home< / a >
< a href = "#intro" class = "nav-link text-sm font-medium hover:text-[var(--link-hover-color)] transition-colors" > Intro< / a >
< a href = "https://github.com/4D-STAR/GridFire" target = "_blank" class = "text-sm font-medium hover:text-[var(--link-hover-color)] transition-colors" > GitHub< / a >
< button id = "funding-btn" class = "text-sm font-medium hover:text-[var(--link-hover-color)] transition-colors" > Funding< / button >
< / div >
<!-- Mobile Menu Button -->
< div class = "sm:hidden" >
< button id = "mobile-menu-btn" class = "p-2 rounded-md focus:outline-none" >
< svg class = "h-6 w-6" stroke = "currentColor" fill = "none" viewBox = "0 0 24 24" >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M4 6h16M4 12h16m-7 6h7" > < / path >
< / svg >
< / button >
< / div >
< / div >
< / nav >
< / header >
2025-06-29 14:55:49 -04:00
< / div >
2025-06-30 07:54:31 -04:00
<!-- Mobile Menu, hidden by default -->
< div id = "mobile-menu" class = "hidden sm:hidden fixed inset-0 z-40" >
< div class = "mobile-menu-overlay absolute inset-0" > < / div >
< div class = "relative flex flex-col items-center justify-center h-full space-y-8" >
< button id = "close-mobile-menu-btn" class = "absolute top-5 right-5 p-2" >
< svg class = "h-8 w-8" stroke = "currentColor" fill = "none" viewBox = "0 0 24 24" >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M6 18L18 6M6 6l12 12" > < / path >
< / svg >
< / button >
< a href = "#home" class = "mobile-nav-link text-2xl font-bold" > Home< / a >
< a href = "#intro" class = "mobile-nav-link text-2xl font-bold" > Docs< / a >
< a href = "https://github.com/4D-STAR/GridFire" target = "_blank" class = "mobile-nav-link text-2xl font-bold" > GitHub< / a >
< button id = "mobile-funding-btn" class = "mobile-nav-link text-2xl font-bold" > Funding< / button >
< / div >
< / div >
<!-- Main Content Area -->
< main class = "container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 space-y-12" >
<!-- Home Section -->
< section id = "home" class = "pt-8 -mt-8" >
< div class = "content-card rounded-xl p-8 max-w-3xl mx-auto shadow-lg" >
< h1 class = "text-3xl sm:text-4xl font-bold mb-4" > GridFire< / h1 >
< h2 class = "text-xl sm:text-lg font-bold mb-5" > A General Purpose Nuclear Network< / h2 >
< p class = "mb-6 text-lg" > A graph-first nuclear network supporting dynamic network topologies. GridFire is intended to be easy to use and very adaptable to a variety of physical situations.< / p >
< div class = "flex space-x-4" >
< a href = "html/index.html" class = "nav-link-btn bg-[var(--link-color)] text-white px-5 py-2 rounded-lg font-semibold hover:bg-[var(--link-hover-color)] transition-colors" > Read the Docs< / a >
< / div >
< / div >
< / section >
< section id = "intro" class = "pt-8 -mt-8" >
< div class = "content-card rounded-xl p-8 max-w-4xl mx-auto shadow-lg" >
< h1 class = "text-3xl font-bold mb-6" > Usage< / h1 >
< h2 class = "text-2xl font-semibold mb-3" > Introduction< / h2 >
< p class = "mb-4" > GridFire is written in C++ but we maintain a robust set of Python bindings. These call the underlying C++ code, meaning that they are nearly as performant as the raw C++. Here we provide a short demonstration of how to use GridFire in Python.< / p >
< h2 class = "text-2xl font-semibold mb-3" > Core Concepts< / h2 >
< p class = "mb-4" > GridFire separates the network into four main parts.< / p >
< ul class = "mb-4 list-disc list-inside space-y-2" >
< li > < b > Species:< / b > These represent individual isotopes, tracking things such as their mass, beta decay energy, quantum numbers, and half-life. < / li >
< li > < b > Reactions:< / b > These represent reactions. All reactions from REACLIB, which include only reactant species up to and including iron, are included. Each reaction can evaluate the reaction rate based on the REACLIB formula. < / li >
< li > < b > Engines:< / b > Engines encode the underlying physical network. These can be either simplified networks (like `approx8Engine`) or more robust but slower networks (like `GraphEngine`). Engines are not directly evaluated; rather, solvers use engines to find abundances and energies. < / li >
< li > < b > Solvers:< / b > Solvers take an engine and know how to integrate it through time. This can either be a simple evaluation of the network topology or it can include more complex approximations such as QSE. < / li >
< / ul >
< h2 class = "text-2xl font-semibold mb-3" > Python Example< / h2 >
< pre class = "bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-md text-sm overflow-x-auto" > < code > from gridfire import GraphEngine, DirectSolver, NetIn
from gridfire.composition import Composition
baseComposition = Composition(["H-1", "He-4"], [0.7, 0.3])
engine = GraphEngine(baseComposition)
solver = DirectSolver(engine)
inputParams = NetIn(composition, 0.1, 100, 0, 1e17, 1e-16) // (composition, T9, density, intialEnergy, tMax, dt0)
results = solver.evaluate(inputParams)
< / code > < / pre >
< / div >
< / section >
< / main >
<!-- Footer -->
< footer class = "border-t border-[var(--border-color)] mt-12 py-8" >
< div class = "container mx-auto text-center text-sm text-[var(--text-color)] opacity-70" >
< p > © < span id = "footer-copyright-year" > < / span > 4D-STAR Collaboration. All Rights Reserved.< / p >
< / div >
< / footer >
<!-- Funding Modal -->
< div id = "funding-modal" class = "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 hidden" >
< div class = "modal-card w-full max-w-lg m-4 p-8 rounded-xl shadow-2xl relative" >
< button id = "close-modal-btn" class = "absolute top-4 right-4 text-2xl font-bold hover:text-gray-500" > × < / button >
< h2 class = "text-2xl font-bold mb-4" > Funding information< / h2 >
< p class = "mb-6" > 4D-STAR is funded by European Research Council (ERC) under the Horizon Europe programme (Synergy Grant agreement No. 101071505: 4D-STAR)< / p >
< p class = "mb-6" > Work for this project is funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or the European Research< / p >
< p class = "mb-6" > © < span id = "modal-copyright-year" > < / span > 4D-STAR Collaboration. < / p >
< / div >
< / div >
< script >
// --- THEME SWITCHER ---
const htmlEl = document.documentElement;
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
function applyTheme(isDark) {
htmlEl.classList.toggle("dark", isDark);
}
applyTheme(prefersDarkScheme.matches);
prefersDarkScheme.addEventListener("change", (e) => applyTheme(e.matches));
// --- PAGE NAVIGATION & MODAL ---
document.addEventListener('DOMContentLoaded', () => {
const fundingBtn = document.getElementById('funding-btn');
const modal = document.getElementById('funding-modal');
const closeModalBtn = document.getElementById('close-modal-btn');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const closeMobileMenuBtn = document.getElementById('close-mobile-menu-btn');
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
const mobileFundingBtn = document.getElementById('mobile-funding-btn');
// Dynamic Copyright Year
const currentYear = new Date().getFullYear();
document.getElementById('footer-copyright-year').textContent = currentYear;
document.getElementById('modal-copyright-year').textContent = currentYear;
function openModal() { modal.classList.remove('hidden'); }
function closeModal() { modal.classList.add('hidden'); }
function openMobileMenu() { mobileMenu.classList.remove('hidden'); }
function closeMobileMenu() { mobileMenu.classList.add('hidden'); }
// Desktop navigation
fundingBtn.addEventListener('click', openModal);
closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
// Mobile navigation
mobileMenuBtn.addEventListener('click', openMobileMenu);
closeMobileMenuBtn.addEventListener('click', closeMobileMenu);
mobileFundingBtn.addEventListener('click', () => {
closeMobileMenu();
openModal();
});
// Smooth scrolling for all anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
if (!mobileMenu.classList.contains('hidden')) {
closeMobileMenu();
}
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
// --- PARTICLE SIMULATION SCRIPT ---
const canvas = document.getElementById('fusionCanvas');
const heroSection = document.getElementById('hero-section');
const ctx = canvas.getContext('2d');
const MAX_PARTICLES = 150;
const SPAWN_RATE = 2;
const PARTICLE_LIFETIME_MIN = 500;
const PARTICLE_LIFETIME_MAX = 1000;
const PARTICLE_COLORS_DARK = ['#aedff7', '#d9faff', '#ffffff', '#fff4d6', '#ffdd75', '#ffc94e'];
const PARTICLE_COLORS_LIGHT = ['#555555', '#444444', '#333333', '#222222', '#111111', '#000000'];
let particles = [];
let particleIdCounter = 0;
function resizeCanvas() {
canvas.width = heroSection.clientWidth;
canvas.height = heroSection.clientHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function random(min, max) { return Math.random() * (max - min) + min; }
function gaussianRandom(mean = 0, stdev = 1) {
let u = 1 - Math.random();
let v = Math.random();
let z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
return z * stdev + mean;
}
class Particle {
constructor() {
this.id = particleIdCounter++;
const distribution = Math.min(canvas.width, canvas.height) / 4;
this.x = gaussianRandom(0, distribution);
this.y = gaussianRandom(0, distribution / 1.5);
this.z = random(1, 6);
this.vx = random(-0.4, 0.4);
this.vy = random(-0.2, 0.2);
this.vz = random(-0.01, 0.01);
this.baseRadius = random(1.5, 3.5);
this.components = [{ id: this.id, lifetime: random(PARTICLE_LIFETIME_MIN, PARTICLE_LIFETIME_MAX) }];
}
project() {
const scale = 1 / (this.z * 0.5 + 1);
const projX = (this.x * scale) + canvas.width / 2;
const projY = (this.y * scale) + canvas.height / 2;
const radiusMultiplier = 1 + (this.components.length * 0.1);
const projRadius = this.baseRadius * scale * radiusMultiplier;
const opacity = Math.max(0, 1 - (this.z / 8));
return { projX, projY, projRadius, opacity };
}
update() {
this.components.forEach(c => c.lifetime--);
this.x += this.vx; this.y += this.vy; this.z += this.vz;
if (this.z < = 0.5 || this.z >= 7) {
this.vz *= -1;
this.z = Math.max(0.51, Math.min(6.99, this.z));
}
const pullFactor = 0.0005;
this.vx -= this.x * pullFactor;
this.vy -= this.y * pullFactor;
}
draw(ctx) {
const { projX, projY, projRadius, opacity } = this.project();
if (projRadius < 0.3 | | opacity < = 0 ) return ;
const isDark = document.documentElement.classList.contains('dark');
const colors = isDark ? PARTICLE_COLORS_DARK : PARTICLE_COLORS_LIGHT;
const colorIndex = Math.min(this.components.length - 1, colors.length - 1);
const color = colors[colorIndex];
ctx.beginPath();
ctx.arc(projX, projY, projRadius, 0, Math.PI * 2);
ctx.globalAlpha = opacity;
ctx.shadowColor = color;
ctx.shadowBlur = projRadius * 3;
ctx.fillStyle = color;
ctx.fill();
}
}
function handleSpawning() {
for (let i = 0; i < SPAWN_RATE ; i + + ) {
if (particles.length < MAX_PARTICLES ) particles . push ( new Particle ( ) ) ;
}
}
function handleCollisionsAndMerging() {
for (let i = 0; i < particles.length ; i + + ) {
for (let j = i + 1; j < particles.length ; j + + ) {
const p1 = particles[i]; const p2 = particles[j];
const p1Proj = p1.project(); const p2Proj = p2.project();
const dx = p1Proj.projX - p2Proj.projX; const dy = p1Proj.projY - p2Proj.projY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < p1Proj.projRadius + p2Proj . projRadius ) {
const absorber = (p1.components.length > p2.components.length || (p1.components.length === p2.components.length & & p1.z < p2.z ) ) ? p1 : p2 ;
const absorbed = (absorber === p1) ? p2 : p1;
const totalMass = absorber.components.length + absorbed.components.length;
absorber.vx = (absorber.vx * absorber.components.length + absorbed.vx * absorbed.components.length) / totalMass;
absorber.vy = (absorber.vy * absorber.components.length + absorbed.vy * absorbed.components.length) / totalMass;
absorber.vz = (absorber.vz * absorber.components.length + absorbed.vz * absorbed.components.length) / totalMass;
absorber.components.push(...absorbed.components);
absorber.baseRadius += absorbed.baseRadius * 0.4;
absorbed.components.forEach(c => c.lifetime = 0);
}
}
}
}
function animate() {
requestAnimationFrame(animate);
ctx.globalAlpha = 1; ctx.shadowBlur = 0;
const bodyBgColor = getComputedStyle(document.documentElement).getPropertyValue('--bg-color').trim();
const canvasBgColor = bodyBgColor.replace('rgb', 'rgba').replace(')', ', 0.25)');
ctx.fillStyle = canvasBgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
handleSpawning();
handleCollisionsAndMerging();
const nextParticles = [];
for (let i = 0; i < particles.length ; i + + ) {
const p = particles[i];
p.update();
const shouldDespawn = p.components.some(c => c.lifetime < = 0);
if (!shouldDespawn) {
p.draw(ctx);
nextParticles.push(p);
}
}
particles = nextParticles;
ctx.globalAlpha = 1; ctx.shadowBlur = 0;
}
animate();
< / script >
2025-06-29 14:55:49 -04:00
< / body >
< / html >
2025-06-30 07:54:31 -04:00
