/* global window React */ const { useState } = React; const { I } = window; // ─── Login page (reference-inspired) ──────────────────────────────────── function LoginPage({ onLogin }) { const [email, setEmail] = useState("registrant@demo.com"); const [password, setPassword] = useState("••••••••••••"); const [remember, setRemember] = useState(false); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const submit = (e) => { e?.preventDefault(); setError(null); setLoading(true); setTimeout(() => { const e1 = email.trim().toLowerCase(); if (e1 === "registrant@demo.com") { onLogin({ role: "registrant", name: "Maria Hartmann", company: "AgriDemo Holdings", initials: "MH", email: e1 }); } else if (e1 === "regulator@demo.com") { onLogin({ role: "regulator", name: "James Carter", company: "USEPA · OPPTS", initials: "JC", email: e1 }); } else { setError("Use registrant@demo.com or regulator@demo.com to sign in to the demo."); } setLoading(false); }, 350); }; const fillRegistrant = () => { setEmail("registrant@demo.com"); setPassword("••••••••••••"); }; const fillRegulator = () => { setEmail("regulator@demo.com"); setPassword("••••••••••••"); }; return (
USEPA RaC Platform

Log in to your Rules-as-Code account

Submit field-trial data, run automated assessments against OPPTS 860.1500, and track regulatory review.

setEmail(e.target.value)} placeholder="you@example.com" />
setPassword(e.target.value)} placeholder="••••••••" />
{error &&
{error}
}
Forgot password?
Demo accounts Click an account to auto-fill, then LOG IN.
New to the RaC Platform?
Mock-up A demonstration of the Rules-as-Code workflow for USEPA OPPTS 860.1500 (Crop Field Trials, Group 15). No data is persisted; outcomes are pre-computed for two demo scenarios.
); } // ─── Isometric hero ───────────────────────────────────────────────────── function HeroIso() { // Simple isometric grid of bars + spheres in primary palette return ( {/* Bars: faux-isometric - top diamond + two side parallelograms */} {/* helper: a bar starting at (x,y), width w, depth d, height h */} {makeBars().map((b, i) => ( ))} {/* Spheres */} ); } function Bar({ x, y, w, d, h, color }) { // top diamond (rhombus): (x,y) (x+w, y-w*0.5) (x+w+d, y+d*0.5-w*0.5) (x+d, y+d*0.5) const top = `${x},${y} ${x+w},${y - w*0.5} ${x+w+d},${y + d*0.5 - w*0.5} ${x+d},${y + d*0.5}`; const left = `${x},${y} ${x+d},${y + d*0.5} ${x+d},${y + d*0.5 + h} ${x},${y + h}`; const right = `${x+d},${y + d*0.5} ${x+w+d},${y + d*0.5 - w*0.5} ${x+w+d},${y + d*0.5 - w*0.5 + h} ${x+d},${y + d*0.5 + h}`; const a = color === "mint" ? "url(#bar1a)" : "url(#bar2a)"; const b = color === "mint" ? "url(#bar1b)" : "url(#bar2b)"; const top2 = color === "mint" ? "#3eddb5" : "#5263db"; return ( ); } function makeBars() { // Hand-placed scattered isometric bars return [ { x: 120, y: 320, w: 200, d: 36, h: 36, color: "mint" }, { x: 80, y: 400, w: 240, d: 36, h: 36, color: "blue" }, { x: 280, y: 460, w: 220, d: 36, h: 36, color: "mint" }, { x: 360, y: 280, w: 180, d: 36, h: 36, color: "blue" }, { x: 220, y: 200, w: 220, d: 36, h: 36, color: "mint" }, { x: 420, y: 470, w: 180, d: 36, h: 36, color: "mint" }, { x: 60, y: 560, w: 200, d: 36, h: 36, color: "blue" }, { x: 320, y: 600, w: 200, d: 36, h: 36, color: "blue" }, { x: 440, y: 130, w: 140, d: 36, h: 36, color: "mint" }, { x: 100, y: 130, w: 160, d: 36, h: 36, color: "blue" }, ]; } window.LoginPage = LoginPage;