Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add green-screen friendly versions

Browse source 
Create green-screen versions of interactives, accessible via "/gs-dark" and "/gs-lite" paths. Hide layout elements, set green background, and adjust text/element colors for optimal green screen use.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-19 13:59:42 +00:00
parent 8f53036a3a
commit fb312235f3
4 changed files with 82 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/pages/theme-pages/discrete-math/Foundations.tsx
View file

@ -11,6 +11,7 @@ interface Interactive {
description: string;
tags: string[];
component: React.ComponentType;
greenScreenPath: string;
}
const interactives: Interactive[] = [
@ -20,6 +21,7 @@ const interactives: Interactive[] = [
description: "Learn how numbers are represented in binary (base-2) format through an interactive guessing game.",
tags: ["binary", "numbers", "conversion", "representation"],
component: BinaryNumberGame,
greenScreenPath: "/binary-number-game",
},
];
@ -57,8 +59,22 @@ const Foundations = () => {
Back to Discrete Math →
</Link>
</div>
<div className="bg-background border rounded-lg p-6">
<InteractiveComponent />
<div className="bg-background border rounded-lg p-6 space-y-4">
<BinaryNumberGame />
<div className="flex gap-2 pt-4 border-t">
<Link
to={`${selectedInteractive.greenScreenPath}/gs-lite`}
className="px-3 py-1 text-sm bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
>
Green Screen (Light)
</Link>
<Link
to={`${selectedInteractive.greenScreenPath}/gs-dark`}
className="px-3 py-1 text-sm bg-green-700 text-white rounded hover:bg-green-800 transition-colors"
>
Green Screen (Dark)
</Link>
</div>
</div>
<button
onClick={() => setSelectedInteractive(null)}