/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const breathingTechniques = { "4-7-8 Breathing": { description: "A calming technique that helps reduce anxiety and promote relaxation.", steps: [ "Exhale completely through your mouth", "Close your mouth and inhale through your nose for 4 seconds", "Hold your breath for 7 seconds", "Exhale completely through your mouth for 8 seconds", "Repeat the cycle 4 times" ] }, "Box Breathing": { description: "A method used by Navy SEALs to stay calm and focused.", steps: [ "Inhale for 4 seconds", "Hold your breath for 4 seconds", "Exhale for 4 seconds", "Hold empty lungs for 4 seconds", "Repeat the cycle 4-5 times" ] }, "Alternate Nostril Breathing": { description: "A yogic technique to balance energy and reduce stress.", steps: [ "Close right nostril with thumb, inhale through left nostril", "Close left nostril with ring finger, exhale through right nostril", "Inhale through right nostril", "Close right nostril, exhale through left nostril", "Repeat for 5-10 cycles" ] } }; function App() { const [selectedTechnique, setSelectedTechnique] = useState(null); const [isGuided, setIsGuided] = useState(false); const [currentStep, setCurrentStep] = useState(0); const [countdown, setCountdown] = useState(0); const [cycleCount, setCycleCount] = useState(0); useEffect(() => { let timer; if (isGuided && ( selectedTechnique === "4-7-8 Breathing" || selectedTechnique === "Box Breathing" || selectedTechnique === "Alternate Nostril Breathing" )) { if (countdown > 0) { timer = setTimeout(() => setCountdown(countdown - 1), 1000); } else { // Move to next step based on current technique switch (selectedTechnique) { case "4-7-8 Breathing": switch (currentStep) { case 0: // First step setCurrentStep(1); setCountdown(4); break; case 1: // Second step setCurrentStep(2); setCountdown(7); break; case 2: // Third step setCurrentStep(3); setCountdown(8); break; case 3: // Fourth step (complete cycle) const next4x7Cycle = cycleCount + 1; setCycleCount(next4x7Cycle); if (next4x7Cycle < 4) { setCurrentStep(0); setCountdown(4); } else { // Exercise complete setIsGuided(false); setCurrentStep(0); setCycleCount(0); } break; } break; case "Box Breathing": switch (currentStep) { case 0: // First step setCurrentStep(1); setCountdown(4); break; case 1: // Second step setCurrentStep(2); setCountdown(4); break; case 2: // Third step setCurrentStep(3); setCountdown(4); break; case 3: // Fourth step (complete cycle) const nextBoxCycle = cycleCount + 1; setCycleCount(nextBoxCycle); if (nextBoxCycle < 5) { setCurrentStep(0); setCountdown(4); } else { // Exercise complete setIsGuided(false); setCurrentStep(0); setCycleCount(0); } break; } break; case "Alternate Nostril Breathing": switch (currentStep) { case 0: // Inhale left nostril setCurrentStep(1); setCountdown(4); break; case 1: // Exhale right nostril setCurrentStep(2); setCountdown(4); break; case 2: // Inhale right nostril setCurrentStep(3); setCountdown(4); break; case 3: // Exhale left nostril (complete cycle) const nextNostrilCycle = cycleCount + 1; setCycleCount(nextNostrilCycle); if (nextNostrilCycle < 5) { setCurrentStep(0); setCountdown(4); } else { // Exercise complete setIsGuided(false); setCurrentStep(0); setCycleCount(0); } break; } break; } } } return () => clearTimeout(timer); }, [isGuided, countdown, currentStep, cycleCount, selectedTechnique]); const startGuidedBreathing = () => { setIsGuided(true); setCurrentStep(0); setCountdown(4); setCycleCount(0); }; const renderStepInstruction = () => { const technique = selectedTechnique; let stepTexts, maxCycles; switch (technique) { case "4-7-8 Breathing": stepTexts = [ "Exhale completely through your mouth", "Inhale through your nose for 4 seconds", "Hold your breath for 7 seconds", "Exhale completely through your mouth for 8 seconds" ]; maxCycles = 4; break; case "Box Breathing": stepTexts = [ "Inhale for 4 seconds", "Hold your breath for 4 seconds", "Exhale for 4 seconds", "Hold empty lungs for 4 seconds" ]; maxCycles = 5; break; case "Alternate Nostril Breathing": stepTexts = [ "Close right nostril, inhale through left nostril", "Close left nostril, exhale through right nostril", "Close right nostril, inhale through right nostril", "Close left nostril, exhale through left nostril" ]; maxCycles = 5; break; } return (

{technique}

{stepTexts[currentStep]}

{countdown} seconds

Cycle: {cycleCount + 1} / {maxCycles}

{!isGuided && cycleCount === (maxCycles - 1) && (

Breathing Exercise Complete!

)}

); }; return (

🧘 Breathing Techniques

{Object.keys(breathingTechniques).map((technique) => ( ))}

{selectedTechnique && !isGuided && (

{selectedTechnique}

{breathingTechniques[selectedTechnique].description}

{( selectedTechnique === "4-7-8 Breathing" || selectedTechnique === "Box Breathing" || selectedTechnique === "Alternate Nostril Breathing" ) ? ( ) : (

{step}

)}

)} {( (selectedTechnique === "4-7-8 Breathing" || selectedTechnique === "Box Breathing" || selectedTechnique === "Alternate Nostril Breathing") && isGuided ) && renderStepInstruction()}

); } const styles = { container: { fontFamily: 'system-ui, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '20px', textAlign: 'center', backgroundColor: '#f0f4f8', minHeight: '100vh' }, title: { color: '#2c3e50', marginBottom: '30px' }, buttonContainer: { display: 'flex', justifyContent: 'center', gap: '15px', marginBottom: '30px' }, button: { padding: '10px 20px', backgroundColor: '#3498db', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', transition: 'background-color 0.3s' }, startButton: { marginTop: '20px', padding: '12px 24px', backgroundColor: '#2ecc71', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', fontSize: '16px' }, instructionContainer: { backgroundColor: 'white', borderRadius: '10px', padding: '20px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }, description: { fontStyle: 'italic', color: '#7f8c8d', marginBottom: '20px' }, steps: { textAlign: 'left', lineHeight: '1.6' }, closeButton: { marginTop: '20px', padding: '8px 16px', backgroundColor: '#e74c3c', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }, footer: { marginTop: '20px', fontSize: '0.8em', color: '#7f8c8d' }, sourceLink: { color: '#3498db', textDecoration: 'none' }, guidedContainer: { backgroundColor: 'white', borderRadius: '10px', padding: '30px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', marginTop: '20px' }, stepInstruction: { fontSize: '20px', marginBottom: '20px', color: '#2c3e50' }, countdown: { fontSize: '48px', fontWeight: 'bold', color: '#3498db' }, cycleInfo: { fontSize: '18px', color: '#7f8c8d', marginTop: '10px' }, completedMessage: { marginTop: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '15px' }, restartButton: { padding: '10px 20px', backgroundColor: '#2ecc71', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }, quitButton: { padding: '10px 20px', backgroundColor: '#e74c3c', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Breathing Techniques

`, { headers: { "content-type": "text/html", }, }); }

BreathingInstructional