{technique}

\n {stepTexts[currentStep]}\n

\n {countdown} seconds\n

\n Cycle: {cycleCount + 1} / {maxCycles}\n

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

\n Breathing Exercise Complete!\n \n \n

\n )}\n

\n );\n };\n\n return (\n

🧘 Breathing Techniques

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

\n {selectedTechnique && !isGuided && (\n

{selectedTechnique}

\n {breathingTechniques[selectedTechnique].description}\n

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

{step}

\n )}\n \n

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

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: 'system-ui, sans-serif',\n maxWidth: '600px',\n margin: '0 auto',\n padding: '20px',\n textAlign: 'center',\n backgroundColor: '#f0f4f8',\n minHeight: '100vh'\n },\n title: {\n color: '#2c3e50',\n marginBottom: '30px'\n },\n buttonContainer: {\n display: 'flex',\n justifyContent: 'center',\n gap: '15px',\n marginBottom: '30px'\n },\n button: {\n padding: '10px 20px',\n backgroundColor: '#3498db',\n color: 'white',\n border: 'none',\n borderRadius: '5px',\n cursor: 'pointer',\n transition: 'background-color 0.3s'\n },\n startButton: {\n marginTop: '20px',\n padding: '12px 24px',\n backgroundColor: '#2ecc71',\n color: 'white',\n border: 'none',\n borderRadius: '5px',\n cursor: 'pointer',\n fontSize: '16px'\n },\n instructionContainer: {\n backgroundColor: 'white',\n borderRadius: '10px',\n padding: '20px',\n boxShadow: '0 4px 6px rgba(0,0,0,0.1)'\n },\n description: {\n fontStyle: 'italic',\n color: '#7f8c8d',\n marginBottom: '20px'\n },\n steps: {\n textAlign: 'left',\n lineHeight: '1.6'\n },\n closeButton: {\n marginTop: '20px',\n padding: '8px 16px',\n backgroundColor: '#e74c3c',\n color: 'white',\n border: 'none',\n borderRadius: '5px',\n cursor: 'pointer'\n },\n footer: {\n marginTop: '20px',\n fontSize: '0.8em',\n color: '#7f8c8d'\n },\n sourceLink: {\n color: '#3498db',\n textDecoration: 'none'\n },\n guidedContainer: {\n backgroundColor: 'white',\n borderRadius: '10px',\n padding: '30px',\n boxShadow: '0 4px 6px rgba(0,0,0,0.1)',\n marginTop: '20px'\n },\n stepInstruction: {\n fontSize: '20px',\n marginBottom: '20px',\n color: '#2c3e50'\n },\n countdown: {\n fontSize: '48px',\n fontWeight: 'bold',\n color: '#3498db'\n },\n cycleInfo: {\n fontSize: '18px',\n color: '#7f8c8d',\n marginTop: '10px'\n },\n completedMessage: {\n marginTop: '20px',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '15px'\n },\n restartButton: {\n padding: '10px 20px',\n backgroundColor: '#2ecc71',\n color: 'white',\n border: 'none',\n borderRadius: '5px',\n cursor: 'pointer'\n },\n quitButton: {\n padding: '10px 20px',\n backgroundColor: '#e74c3c',\n color: 'white',\n border: 'none',\n borderRadius: '5px',\n cursor: 'pointer'\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 Breathing Techniques\n \n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/nemonicui/BreathingInstructional/code/main.tsx","extension","actionData","errors"]