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

43
src/components/GreenScreenWrapper.tsx Normal file
View file

@ -0,0 +1,43 @@
interface GreenScreenWrapperProps {
children: React.ReactNode;
mode: 'lite' | 'dark';
}
const GreenScreenWrapper = ({ children, mode }: GreenScreenWrapperProps) => {
const bgColor = 'bg-[#00ff00]'; // Pure green for chroma key
const textColor = mode === 'lite' ? 'text-black' : 'text-white';
return (
<div className={`min-h-screen ${bgColor} ${textColor} p-8`}>
<style>
{`
/* Override all colors for green screen mode */
.green-screen * {
background-color: transparent !important;
border-color: ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
color: ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
}
.green-screen button {
background-color: ${mode === 'lite' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'} !important;
border: 2px solid ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
}
.green-screen button:hover {
background-color: ${mode === 'lite' ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.2)'} !important;
}
.green-screen input {
background-color: ${mode === 'lite' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)'} !important;
border: 2px solid ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
}
`}
</style>
<div className="green-screen max-w-4xl mx-auto">
{children}
</div>
</div>
);
};
export default GreenScreenWrapper;