\n {formatTime(time)}\n

\n );\n};\n\nfunction App() {\n const [workModeTime, setWorkModeTime] = useState(14400); // Default 4 hours\n const [funModeTime, setFunModeTime] = useState(14400);\n const [activeMode, setActiveMode] = useState('work');\n const [isRunning, setIsRunning] = useState(false);\n const timerRef = useRef(null);\n\n useEffect(() => {\n if (isRunning) {\n timerRef.current = setInterval(() => {\n if (activeMode === 'work') {\n setWorkModeTime(prev => {\n if (prev <= 1) {\n clearInterval(timerRef.current);\n setIsRunning(false);\n alert(\"Time's up! Switch to Fun Mode!\");\n return 0;\n }\n return prev - 1;\n });\n } else {\n setFunModeTime(prev => {\n if (prev <= 1) {\n clearInterval(timerRef.current);\n setIsRunning(false);\n alert(\"Time's up! Switch to Work Mode!\");\n return 0;\n }\n return prev - 1;\n });\n }\n }, 1000);\n }\n return () => clearInterval(timerRef.current);\n }, [isRunning, activeMode]);\n\n const pauseTimer = () => setIsRunning(false);\n const startTimer = () => setIsRunning(true);\n const switchMode = (mode) => {\n if (mode !== activeMode) {\n setActiveMode(mode);\n }\n };\n\n const resetTimer = () => {\n clearInterval(timerRef.current);\n setWorkModeTime(14400);\n setFunModeTime(14400);\n setActiveMode('work');\n setIsRunning(false);\n };\n\n const handleTimeInput = (mode, value) => {\n const [hours, minutes] = value.split(':').map(Number);\n const totalSeconds = (hours * 3600) + (minutes * 60);\n if (mode === 'work') setWorkModeTime(totalSeconds);\n if (mode === 'fun') setFunModeTime(totalSeconds);\n };\n\n const activeTime = activeMode === 'work' ? workModeTime : funModeTime;\n\n return (\n

⏱️ Productivity Timer

\n inspired by \n @waitbutwhy\n \n

\n handleTimeInput('work', e.target.value)}\n defaultValue=\"4:00\"\n disabled={isRunning}\n />\n handleTimeInput('fun', e.target.value)}\n defaultValue=\"4:00\"\n disabled={isRunning}\n />\n

\n \n \n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Productivity Timer\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody, html {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n height: 100%;\n width: 100%;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f0f0f0;\n}\n\n.productivity-timer {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n text-align: center;\n background-size: cover;\n background-position: center;\n transition: background-image 0.5s ease;\n}\n\n.work-mode {\n background-image: url('https://maxm-imggenurl.web.val.run/a-serious-library-scene-with-bookshelves-and-study-desks');\n}\n\n.fun-mode {\n background-image: url('https://maxm-imggenurl.web.val.run/a-serene-and-open-outdoor-scene-with-nature-and-relaxation');\n}\n\n.header {\n background-color: rgba(255, 255, 255, 0.9);\n padding: 1rem;\n border-radius: 10px;\n margin-bottom: 2rem;\n}\n\nh1 {\n font-size: 2.5rem;\n margin: 0 0 0.5rem 0;\n color: #333;\n}\n\n.subtitle {\n color: #444;\n margin: 0;\n font-size: 1rem;\n}\n\n.subtitle a {\n color: #0066cc;\n text-decoration: none;\n}\n\n.subtitle a:hover {\n text-decoration: underline;\n}\n\n.timer-inputs {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.timer-inputs input {\n padding: 0.5rem;\n font-size: 1rem;\n text-align: center;\n width: 80px;\n border: 1px solid #ccc;\n border-radius: 5px;\n transition: border-color 0.3s ease;\n background-color: rgba(255, 255, 255, 0.9);\n}\n\n.timer-inputs input:focus {\n outline: none;\n border-color: #0066cc;\n}\n\n.timer-inputs input:disabled {\n background-color: rgba(240, 240, 240, 0.7);\n cursor: not-allowed;\n}\n\n.timers-container {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.timer {\n font-size: 2rem;\n padding: 1rem;\n background-color: rgba(255, 255, 255, 0.9);\n border-radius: 10px;\n min-width: 200px;\n transition: background-color 0.3s ease, transform 0.3s ease;\n}\n\n.timer.active {\n background-color: rgba(255, 255, 255, 0.95);\n font-weight: bold;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);\n transform: scale(1.05);\n}\n\n.mode-switch-container {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\nbutton {\n padding: 0.5rem 1rem;\n font-size: 1rem;\n cursor: pointer;\n background-color: #0066cc;\n color: white;\n border: none;\n border-radius: 5px;\n transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.1s ease;\n}\n\nbutton:hover:not(:disabled) {\n background-color: #0052a3;\n transform: translateY(-2px);\n}\n\nbutton:active:not(:disabled) {\n transform: translateY(1px);\n}\n\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.global-controls {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.source-link {\n display: inline-block;\n margin-top: 1rem;\n color: #444;\n text-decoration: none;\n font-size: 0.9rem;\n background-color: rgba(255, 255, 255, 0.9);\n padding: 0.5rem 1rem;\n border-radius: 5px;\n}\n\n.source-link:hover {\n text-decoration: underline;\n background-color: rgba(255, 255, 255, 0.95);\n}\n\n@media (max-width: 600px) {\n .productivity-timer {\n padding: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n .subtitle {\n font-size: 0.9rem;\n }\n\n .timer {\n font-size: 1.5rem;\n padding: 0.75rem;\n min-width: 150px;\n }\n\n button {\n padding: 0.4rem 0.8rem;\n font-size: 0.9rem;\n }\n\n .timer-inputs {\n flex-direction: column;\n align-items: center;\n }\n\n .timer-inputs input {\n width: 100px;\n }\n\n .timers-container {\n flex-direction: column;\n align-items: center;\n }\n}\n`;","deleted","label","children",[],[104],"files",[154],"counts",{"_176":31,"_177":178,"_179":31,"_180":31},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_109":155,"_100":104,"_156":122,"_157":-5,"_158":142,"_159":106,"_160":27,"_111":185,"_105":162,"_163":164,"_165":166,"_167":27,"_168":-5,"_103":186},["D",1742388022305],[104],"upstreamProject",{"_109":189,"_100":101,"_118":-5,"_119":-5,"_116":117,"_21":190},"05a21818-275a-11f0-86ff-569c3dd06744",{"_98":191,"_137":192},"kaz","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJrQ3BCcUkyMEdWdnJJZDhQcVZZeGk4MUV2dSIsImluaXRpYWxzIjoiQUsifQ","upstreamBranch",{"_109":145,"_111":195,"_196":197,"_100":42,"_143":189,"_105":198,"_144":-5,"_146":-5,"_199":200,"_113":-5,"_135":27,"_116":117,"_151":191,"_150":101},["D",1746192804351],"updatedAt",["D",1742273168140],8,"lockfileKey","1746462572436-esm.town_v_kaz_comicalGreenAnaconda@8-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_98":99,"_100":101,"_102":42,"_105":106,"_103":104,"_107":205,"_152":209,"_172":213,"_183":214,"_181":216,"_217":218,"_221":27,"_222":-5,"_223":-5,"_224":-5,"_225":226},{"_109":110,"_100":101,"_111":206,"_113":-5,"_114":115,"_116":117,"_118":-5,"_119":-5,"_12":120,"_121":122,"_123":115,"_124":-5,"_125":31,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_135":27,"_21":207,"_139":208},["D",1746217793062],{"_98":99,"_137":138},{"_105":141,"_100":42,"_109":142,"_143":110,"_144":145,"_146":31,"_147":117,"_148":149,"_150":101,"_151":99},[210],{"_109":155,"_100":104,"_156":122,"_157":-5,"_158":142,"_159":106,"_160":27,"_111":161,"_105":162,"_163":164,"_165":166,"_167":27,"_168":-5,"_169":211,"_103":212},[],[104],[210],{"_109":155,"_100":104,"_156":122,"_157":-5,"_158":142,"_159":106,"_160":27,"_111":185,"_105":162,"_163":164,"_165":166,"_167":27,"_168":-5,"_103":215},[104],[],"upstream",{"_109":145,"_111":219,"_196":220,"_100":42,"_143":189,"_105":198,"_144":-5,"_146":-5,"_199":200,"_113":-5,"_135":27,"_116":117,"_151":191,"_150":101},["D",1746192804351],["D",1742273168140],"showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]