TOMASO VALMAX Soundscape

\n \n \n \n \n \n \n

\n \n \n

\n );\n}\n\nfunction Meditation() {\n const mantras = [\n \"Tokens flow, I am whole\",\n \"With each token, I awaken\",\n \"Abundance of tokens surrounds me\",\n \"I breathe in tokens of light\",\n \"Tokens empower my journey\",\n \"In the river of tokens, I thrive\",\n ];\n\n const [meditationText, setMeditationText] = useState(\"\");\n const [timer, setTimer] = useState(0);\n const [isActive, setIsActive] = useState(false);\n const [technique, setTechnique] = useState(\"mantra\");\n const [progress, setProgress] = useState(0);\n const [breathCount, setBreathCount] = useState(0);\n\n useEffect(() => {\n let interval = null;\n if (isActive) {\n interval = setInterval(() => {\n setTimer(timer => timer + 1);\n setProgress(progress => Math.min(progress + 1, 100));\n }, 1000);\n } else if (!isActive && timer !== 0) {\n clearInterval(interval);\n }\n return () => clearInterval(interval);\n }, [isActive, timer]);\n\n useEffect(() => {\n let textInterval;\n if (isActive) {\n if (technique === \"breathing\") {\n textInterval = setInterval(() => {\n setMeditationText((text) => {\n if (text === \"Breathe In\") {\n setBreathCount(count => count + 1);\n return \"Breathe Out\";\n } else {\n return \"Breathe In\";\n }\n });\n }, 4000);\n } else if (technique === \"mantra\") {\n textInterval = setInterval(() => {\n setMeditationText(mantras[Math.floor(Math.random() * mantras.length)]);\n }, 5000);\n }\n }\n return () => clearInterval(textInterval);\n }, [technique, isActive]);\n\n const toggleTimer = () => {\n setIsActive(!isActive);\n if (!isActive) {\n setMeditationText(technique === \"mantra\" ? mantras[0] : \"Breathe In\");\n }\n };\n\n const resetTimer = () => {\n setTimer(0);\n setIsActive(false);\n setProgress(0);\n setMeditationText(\"\");\n setBreathCount(0);\n };\n\n const changeTechnique = (newTechnique) => {\n setTechnique(newTechnique);\n resetTimer();\n };\n\n return (\n

TOMASO VALMAX Meditation

{meditationText}

\n \n \n

\n changeTechnique(\"breathing\")}\n >\n Breathing\n \n changeTechnique(\"mantra\")}\n >\n Mantra\n \n

\n Time: {Math.floor(timer / 60)}:{timer % 60 < 10 ? \"0\" : \"\"}\n {timer % 60}\n

\n {technique === \"breathing\" && (\n

\n Breaths: {breathCount}\n

\n )}\n

\n );\n}\n\nfunction TokenAnimation() {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext(\"2d\");\n let animationFrameId;\n\n const dots = Array.from({ length: 200 }, () => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n size: Math.random() * 2 + 1,\n speedX: Math.random() * 0.2 - 0.1,\n speedY: Math.random() * 0.2 - 0.1,\n opacity: Math.random() * 0.5 + 0.1,\n }));\n\n const animate = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n dots.forEach((dot) => {\n ctx.beginPath();\n ctx.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(98, 0, 238, ${dot.opacity})`;\n ctx.fill();\n\n dot.x += dot.speedX;\n dot.y += dot.speedY;\n dot.opacity += Math.random() * 0.02 - 0.01;\n\n if (dot.opacity < 0.1) dot.opacity = 0.1;\n if (dot.opacity > 0.6) dot.opacity = 0.6;\n\n if (dot.x < 0 || dot.x > canvas.width) dot.speedX *= -1;\n if (dot.y < 0 || dot.y > canvas.height) dot.speedY *= -1;\n });\n\n animationFrameId = requestAnimationFrame(animate);\n };\n\n animate();\n\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, []);\n\n return (\n

\n );\n}\n\nfunction App() {\n const [isDarkMode, setIsDarkMode] = useState(false);\n const [currentFeature, setCurrentFeature] = useState(\"intro\");\n\n const toggleDarkMode = () => {\n setIsDarkMode(!isDarkMode);\n document.body.classList.toggle(\"dark-mode\");\n };\n\n const renderFeature = () => {\n switch (currentFeature) {\n case \"sound\":\n return ;\n case \"meditation\":\n return ;\n default:\n return (\n

Tomaso Valmax: Token Breathing Master

Welcome to the world of Tomaso Valmax, where tokens are free to breathe.

\n \n

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

\n {renderFeature()}\n

\n \n \n \n

\n \n

\n ℹ️\n

About Tomaso Valmax

Tomaso Valmax is a renowned expert in token-based breathing techniques and mindfulness practices.

\n 🎯\n

Tomaso's Achievements

\n Known for his extensive work with tokens, Tomaso has quietly become one of the most prolific token users in\n the world.\n

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

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --primary-color: #6200ee;\n --secondary-color: #03dac6;\n --background-color: #e0e5ec;\n --surface-color: #e0e5ec;\n --on-surface-color: #1d1d1d;\n --on-primary-color: #ffffff;\n --neumorphic-light: #ffffff;\n --neumorphic-dark: #a3b1c6;\n}\nbody {\n font-family: 'Lora', serif;\n background-color: var(--background-color);\n color: var(--on-surface-color);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n transition: background-color 0.3s, color 0.3s;\n overflow-x: hidden;\n}\nh1, h2, h3 {\n font-family: 'Merriweather', serif;\n}\n.container {\n background-color: var(--surface-color);\n padding: 30px;\n border-radius: 20px;\n box-shadow: \n 10px 10px 20px var(--neumorphic-dark),\n -10px -10px 20px var(--neumorphic-light);\n text-align: center;\n max-width: 800px;\n width: 100%;\n position: relative;\n}\n.intro-section {\n margin-bottom: 20px;\n}\nbutton {\n margin: 10px;\n padding: 12px 24px;\n font-size: 16px;\n cursor: pointer;\n background-color: var(--surface-color);\n color: var(--on-surface-color);\n border: none;\n border-radius: 10px;\n transition: all 0.3s ease;\n box-shadow: \n 5px 5px 10px var(--neumorphic-dark),\n -5px -5px 10px var(--neumorphic-light);\n font-family: 'Lora', serif;\n}\nbutton:hover {\n box-shadow: \n 2px 2px 5px var(--neumorphic-dark),\n -2px -2px 5px var(--neumorphic-light);\n}\nbutton:active {\n box-shadow: \n inset 2px 2px 5px var(--neumorphic-dark),\n inset -2px -2px 5px var(--neumorphic-light);\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.info-boxes {\n display: flex;\n justify-content: space-between;\n margin-top: 40px;\n}\n.info-box {\n background-color: var(--surface-color);\n border-radius: 15px;\n padding: 20px;\n width: 45%;\n box-shadow: \n 5px 5px 10px var(--neumorphic-dark),\n -5px -5px 10px var(--neumorphic-light);\n margin: 0 20px;\n}\n.info-box h3 {\n margin-top: 0;\n color: var(--primary-color);\n}\n.icon {\n font-size: 24px;\n margin-bottom: 10px;\n color: var(--primary-color);\n}\n.dark-mode-toggle {\n position: fixed;\n top: 20px;\n right: 20px;\n background-color: var(--surface-color);\n color: var(--on-surface-color);\n border: none;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n font-size: 24px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: \n 5px 5px 10px var(--neumorphic-dark),\n -5px -5px 10px var(--neumorphic-light);\n}\n.dark-mode-toggle:hover {\n box-shadow: \n 2px 2px 5px var(--neumorphic-dark),\n -2px -2px 5px var(--neumorphic-light);\n}\n.dark-mode-toggle:active {\n box-shadow: \n inset 2px 2px 5px var(--neumorphic-dark),\n inset -2px -2px 5px var(--neumorphic-light);\n}\nbody.dark-mode {\n --background-color: #1a1a1a;\n --surface-color: #2a2a2a;\n --on-surface-color: #ffffff;\n --neumorphic-light: #3a3a3a;\n --neumorphic-dark: #151515;\n}\n.sound-maker-container, .meditation-container {\n margin-bottom: 20px;\n}\n.sound-maker {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n.sound-button {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n font-size: 14px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.record-button {\n background-color: #ff4136;\n color: white;\n}\n.record-button.recording {\n animation: pulse 1s infinite;\n}\n.play-button {\n background-color: #0074D9;\n color: white;\n}\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(255, 65, 54, 0.7);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(255, 65, 54, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(255, 65, 54, 0);\n }\n}\n.meditation-circle {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n background-color: var(--surface-color);\n position: relative;\n margin: 50px auto;\n animation: breathe 8s infinite ease-in-out;\n box-shadow: \n 10px 10px 20px var(--neumorphic-dark),\n -10px -10px 20px var(--neumorphic-light);\n}\n@keyframes breathe {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n}\n.meditation-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 18px;\n text-align: center;\n width: 80%;\n}\n.meditation-controls {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 20px;\n}\n.main-controls, .technique-controls {\n display: flex;\n justify-content: center;\n margin-bottom: 10px;\n}\n.meditation-stats {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n}\n.meditation-timer, .breath-count {\n font-size: 18px;\n margin: 0 10px;\n}\n.meditation-progress {\n width: 100%;\n height: 10px;\n background-color: var(--surface-color);\n border-radius: 5px;\n margin-top: 20px;\n overflow: hidden;\n}\n.progress-bar {\n height: 100%;\n background-color: var(--primary-color);\n transition: width 0.5s ease-in-out;\n}\n.pill {\n padding: 8px 16px;\n border-radius: 20px;\n margin: 0 5px;\n background-color: var(--surface-color);\n color: var(--on-surface-color);\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 14px;\n}\n.pill.active {\n background-color: var(--primary-color);\n color: var(--on-primary-color);\n}\n.token-animation-container {\n position: relative;\n width: 100%;\n height: 200px;\n margin-top: 20px;\n background-color: var(--surface-color);\n overflow: hidden;\n}\n.token-animation {\n width: 100%;\n height: 100%;\n border-radius: 10px;\n box-shadow: \n inset 5px 5px 10px var(--neumorphic-dark),\n inset -5px -5px 10px var(--neumorphic-light);\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/all/tomasoValmax/code/main.tsx","extension","actionData","errors"]