Spaces:

sfilata
/

anycoder-909b9992

Running

App Files Files Community

sfilata commited on Feb 12

Commit

6e7e270

verified ·

1 Parent(s): 0942cbf

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +855 -19

index.html CHANGED Viewed

@@ -1,19 +1,855 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Breathe - 4-7-8 Breath Guide</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    :root {
+      --bg: #0a0f1a;
+      --bg-secondary: #111827;
+      --fg: #e8f0f2;
+      --muted: #6b7a8c;
+      --accent: #4fd1c5;
+      --accent-glow: rgba(79, 209, 197, 0.3);
+      --inhale: #60a5fa;
+      --hold: #a78bfa;
+      --exhale: #4fd1c5;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'DM Sans', sans-serif;
+      background: var(--bg);
+      color: var(--fg);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    .font-display {
+      font-family: 'Cormorant Garamond', serif;
+    }
+    /* Background atmosphere */
+    .bg-atmosphere {
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      background:
+        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(79, 209, 197, 0.08) 0%, transparent 50%),
+        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(96, 165, 250, 0.06) 0%, transparent 40%),
+        radial-gradient(ellipse 50% 30% at 80% 80%, rgba(167, 139, 250, 0.05) 0%, transparent 40%),
+        var(--bg);
+    }
+    /* Floating particles */
+    .particle {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      background: var(--accent);
+      border-radius: 50%;
+      opacity: 0;
+      animation: float 8s infinite ease-in-out;
+    }
+    @keyframes float {
+      0%, 100% {
+        opacity: 0;
+        transform: translateY(100vh) scale(0);
+      }
+      10% {
+        opacity: 0.6;
+      }
+      90% {
+        opacity: 0.6;
+      }
+      100% {
+        opacity: 0;
+        transform: translateY(-20vh) scale(1);
+      }
+    }
+    /* Main breathing circle */
+    .breath-circle {
+      position: relative;
+      width: clamp(200px, 50vw, 320px);
+      height: clamp(200px, 50vw, 320px);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.1s ease-out;
+    }
+    .breath-circle::before {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg, var(--inhale), var(--hold), var(--exhale), var(--inhale));
+      opacity: 0.6;
+      animation: rotate 20s linear infinite;
+      filter: blur(8px);
+    }
+    .breath-circle::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: var(--bg-secondary);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    @keyframes rotate {
+      to { transform: rotate(360deg); }
+    }
+    .breath-inner {
+      position: relative;
+      z-index: 1;
+      width: 90%;
+      height: 90%;
+      border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 50%),
+                  linear-gradient(135deg, rgba(79, 209, 197, 0.1), rgba(167, 139, 250, 0.05));
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+    }
+    /* Phase indicator rings */
+    .phase-ring {
+      position: absolute;
+      border-radius: 50%;
+      border: 2px solid transparent;
+      opacity: 0;
+      transition: all 0.5s ease;
+    }
+    .phase-ring.inhale {
+      inset: -20px;
+      border-color: var(--inhale);
+      box-shadow: 0 0 30px var(--inhale);
+    }
+    .phase-ring.hold {
+      inset: -30px;
+      border-color: var(--hold);
+      box-shadow: 0 0 30px var(--hold);
+    }
+    .phase-ring.exhale {
+      inset: -40px;
+      border-color: var(--exhale);
+      box-shadow: 0 0 30px var(--exhale);
+    }
+    .phase-ring.active {
+      opacity: 1;
+      animation: pulse-ring 2s ease-in-out infinite;
+    }
+    @keyframes pulse-ring {
+      0%, 100% { transform: scale(1); opacity: 0.8; }
+      50% { transform: scale(1.05); opacity: 1; }
+    }
+    /* Timer display */
+    .timer-display {
+      font-size: clamp(3rem, 10vw, 5rem);
+      font-weight: 300;
+      letter-spacing: -0.02em;
+      line-height: 1;
+      background: linear-gradient(135deg, var(--fg), var(--muted));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    /* Progress arc */
+    .progress-arc {
+      position: absolute;
+      inset: -4px;
+      border-radius: 50%;
+    }
+    .progress-arc svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    .progress-arc circle {
+      fill: none;
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+    .progress-arc .track {
+      stroke: rgba(255, 255, 255, 0.05);
+    }
+    .progress-arc .progress {
+      stroke: var(--accent);
+      stroke-dasharray: 1000;
+      stroke-dashoffset: 1000;
+      transition: stroke-dashoffset 0.1s linear;
+      filter: drop-shadow(0 0 6px var(--accent));
+    }
+    /* Control button */
+    .control-btn {
+      position: relative;
+      padding: 1rem 3rem;
+      font-size: 1rem;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      background: linear-gradient(135deg, rgba(79, 209, 197, 0.15), rgba(167, 139, 250, 0.1));
+      border: 1px solid rgba(79, 209, 197, 0.3);
+      border-radius: 100px;
+      color: var(--accent);
+      cursor: pointer;
+      overflow: hidden;
+      transition: all 0.3s ease;
+    }
+    .control-btn::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, var(--accent), var(--hold));
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .control-btn:hover {
+      border-color: var(--accent);
+      box-shadow: 0 0 30px var(--accent-glow);
+      transform: translateY(-2px);
+    }
+    .control-btn:hover::before {
+      opacity: 0.1;
+    }
+    .control-btn:active {
+      transform: translateY(0);
+    }
+    .control-btn span {
+      position: relative;
+      z-index: 1;
+    }
+    .control-btn.active {
+      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
+      border-color: rgba(239, 68, 68, 0.3);
+      color: #ef4444;
+    }
+    .control-btn.active:hover {
+      border-color: #ef4444;
+      box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
+    }
+    /* Phase labels */
+    .phase-label {
+      font-size: 0.75rem;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      opacity: 0.6;
+      transition: all 0.3s ease;
+    }
+    .phase-label.inhale { color: var(--inhale); }
+    .phase-label.hold { color: var(--hold); }
+    .phase-label.exhale { color: var(--exhale); }
+    /* Stats cards */
+    .stat-card {
+      background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 16px;
+      padding: 1.5rem;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+      border-color: rgba(79, 209, 197, 0.2);
+      transform: translateY(-2px);
+    }
+    /* Sound toggle */
+    .sound-toggle {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .sound-toggle:hover {
+      background: rgba(79, 209, 197, 0.1);
+      border-color: var(--accent);
+    }
+    .sound-toggle.muted {
+      opacity: 0.5;
+    }
+    /* Instructions panel */
+    .instructions {
+      background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 20px;
+      padding: 2rem;
+      backdrop-filter: blur(10px);
+    }
+    .instruction-step {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+      padding: 1rem 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .instruction-step:last-child {
+      border-bottom: none;
+    }
+    .step-number {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 0.875rem;
+      flex-shrink: 0;
+    }
+    .step-number.inhale { background: rgba(96, 165, 250, 0.2); color: var(--inhale); }
+    .step-number.hold { background: rgba(167, 139, 250, 0.2); color: var(--hold); }
+    .step-number.exhale { background: rgba(79, 209, 197, 0.2); color: var(--exhale); }
+    /* Entrance animations */
+    .fade-in {
+      opacity: 0;
+      transform: translateY(20px);
+      animation: fadeIn 0.8s ease forwards;
+    }
+    @keyframes fadeIn {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .delay-1 { animation-delay: 0.1s; }
+    .delay-2 { animation-delay: 0.2s; }
+    .delay-3 { animation-delay: 0.3s; }
+    .delay-4 { animation-delay: 0.4s; }
+    .delay-5 { animation-delay: 0.5s; }
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
+    /* Focus states */
+    button:focus-visible, .sound-toggle:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+  </style>
+</head>
+<body class="min-h-screen">
+  <!-- Background atmosphere -->
+  <div class="bg-atmosphere" aria-hidden="true">
+    <div id="particles"></div>
+  </div>
+  <!-- Main content -->
+  <main class="relative z-10 min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="p-6 flex justify-between items-center fade-in">
+      <div>
+        <h1 class="font-display text-2xl font-light tracking-wide">Breathe</h1>
+        <p class="text-xs text-[var(--muted)] tracking-widest uppercase mt-1">4-7-8 Method</p>
+      </div>
+      <button
+        class="sound-toggle"
+        id="soundToggle"
+        aria-label="Toggle sound"
+        title="Toggle audio guide"
+      >
+        <svg id="soundOnIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+          <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+          <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
+        </svg>
+        <svg id="soundOffIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+          <line x1="23" y1="9" x2="17" y2="15"></line>
+          <line x1="17" y1="9" x2="23" y2="15"></line>
+        </svg>
+      </button>
+    </header>
+    <!-- Main breathing section -->
+    <section class="flex-1 flex flex-col items-center justify-center px-6 py-8">
+      <!-- Phase indicator -->
+      <div class="mb-6 fade-in delay-1">
+        <span id="phaseLabel" class="phase-label text-center block">Ready to begin</span>
+      </div>
+      <!-- Breathing circle -->
+      <div class="breath-circle fade-in delay-2" id="breathCircle">
+        <!-- Phase rings -->
+        <div class="phase-ring inhale" id="inhaleRing"></div>
+        <div class="phase-ring hold" id="holdRing"></div>
+        <div class="phase-ring exhale" id="exhaleRing"></div>
+        <!-- Progress arc -->
+        <div class="progress-arc">
+          <svg viewBox="0 0 100 100">
+            <circle class="track" cx="50" cy="50" r="48"></circle>
+            <circle class="progress" id="progressCircle" cx="50" cy="50" r="48"></circle>
+          </svg>
+        </div>
+        <!-- Inner content -->
+        <div class="breath-inner" id="breathInner">
+          <span id="timerDisplay" class="timer-display">4</span>
+          <span id="phaseText" class="text-sm text-[var(--muted)] mt-2 tracking-wider uppercase">Inhale</span>
+        </div>
+      </div>
+      <!-- Control button -->
+      <div class="mt-10 fade-in delay-3">
+        <button class="control-btn" id="controlBtn" aria-label="Start breathing exercise">
+          <span id="btnText">Begin Session</span>
+        </button>
+      </div>
+      <!-- Session info -->
+      <div class="mt-8 flex gap-8 text-center fade-in delay-4">
+        <div>
+          <span class="block text-2xl font-light" id="cycleCount">0</span>
+          <span class="text-xs text-[var(--muted)] uppercase tracking-wider">Cycles</span>
+        </div>
+        <div class="w-px bg-white/10"></div>
+        <div>
+          <span class="block text-2xl font-light" id="totalTime">0:00</span>
+          <span class="text-xs text-[var(--muted)] uppercase tracking-wider">Duration</span>
+        </div>
+      </div>
+    </section>
+    <!-- Instructions section -->
+    <section class="px-6 pb-8 max-w-2xl mx-auto w-full fade-in delay-5">
+      <div class="instructions">
+        <h2 class="font-display text-xl font-light mb-4 text-center">The 4-7-8 Technique</h2>
+        <div class="instruction-step">
+          <div class="step-number inhale">1</div>
+          <div>
+            <h3 class="font-medium text-[var(--inhale)]">Inhale for 4 seconds</h3>
+            <p class="text-sm text-[var(--muted)] mt-1">Breathe in quietly through your nose, filling your lungs completely.</p>
+          </div>
+        </div>
+        <div class="instruction-step">
+          <div class="step-number hold">2</div>
+          <div>
+            <h3 class="font-medium text-[var(--hold)]">Hold for 7 seconds</h3>
+            <p class="text-sm text-[var(--muted)] mt-1">Retain your breath, keeping your body relaxed and still.</p>
+          </div>
+        </div>
+        <div class="instruction-step">
+          <div class="step-number exhale">3</div>
+          <div>
+            <h3 class="font-medium text-[var(--exhale)]">Exhale for 8 seconds</h3>
+            <p class="text-sm text-[var(--muted)] mt-1">Release slowly through your mouth, making a gentle whoosh sound.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Footer -->
+    <footer class="p-6 text-center">
+      <p class="text-xs text-[var(--muted)]">
+        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" class="text-[var(--accent)] hover:underline">anycoder</a>
+      </p>
+    </footer>
+  </main>
+  <script>
+    // Audio Context for sound generation
+    let audioCtx = null;
+    let soundEnabled = true;
+    // State
+    let isRunning = false;
+    let currentPhase = 'idle'; // idle, inhale, hold, exhale
+    let currentTime = 0;
+    let cycleCount = 0;
+    let totalSeconds = 0;
+    let animationFrame = null;
+    let lastTimestamp = 0;
+    // Phase durations in seconds
+    const phases = {
+      inhale: { duration: 4, next: 'hold' },
+      hold: { duration: 7, next: 'exhale' },
+      exhale: { duration: 8, next: 'inhale' }
+    };
+    // DOM Elements
+    const breathCircle = document.getElementById('breathCircle');
+    const breathInner = document.getElementById('breathInner');
+    const timerDisplay = document.getElementById('timerDisplay');
+    const phaseText = document.getElementById('phaseText');
+    const phaseLabel = document.getElementById('phaseLabel');
+    const controlBtn = document.getElementById('controlBtn');
+    const btnText = document.getElementById('btnText');
+    const cycleCountEl = document.getElementById('cycleCount');
+    const totalTimeEl = document.getElementById('totalTime');
+    const progressCircle = document.getElementById('progressCircle');
+    const soundToggle = document.getElementById('soundToggle');
+    const soundOnIcon = document.getElementById('soundOnIcon');
+    const soundOffIcon = document.getElementById('soundOffIcon');
+    const inhaleRing = document.getElementById('inhaleRing');
+    const holdRing = document.getElementById('holdRing');
+    const exhaleRing = document.getElementById('exhaleRing');
+    // Progress circle circumference
+    const circumference = 2 * Math.PI * 48;
+    progressCircle.style.strokeDasharray = circumference;
+    progressCircle.style.strokeDashoffset = circumference;
+    // Initialize audio context
+    function initAudio() {
+      if (!audioCtx) {
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      }
+      if (audioCtx.state === 'suspended') {
+        audioCtx.resume();
+      }
+    }
+    // Generate soothing tones
+    function playTone(frequency, duration, type = 'sine', fadeIn = 0.1, fadeOut = 0.3) {
+      if (!soundEnabled || !audioCtx) return;
+      const oscillator = audioCtx.createOscillator();
+      const gainNode = audioCtx.createGain();
+      const filter = audioCtx.createBiquadFilter();
+      oscillator.type = type;
+      oscillator.frequency.setValueAtTime(frequency, audioCtx.currentTime);
+      filter.type = 'lowpass';
+      filter.frequency.setValueAtTime(2000, audioCtx.currentTime);
+      gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
+      gainNode.gain.linearRampToValueAtTime(0.15, audioCtx.currentTime + fadeIn);
+      gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + duration - fadeOut);
+      oscillator.connect(filter);
+      filter.connect(gainNode);
+      gainNode.connect(audioCtx.destination);
+      oscillator.start(audioCtx.currentTime);
+      oscillator.stop(audioCtx.currentTime + duration);
+    }
+    // Play phase-specific sounds
+    function playPhaseSound(phase) {
+      if (!soundEnabled) return;
+      initAudio();
+      switch (phase) {
+        case 'inhale':
+          // Rising tone
+          playTone(220, 0.5, 'sine', 0.05, 0.2);
+          setTimeout(() => playTone(330, 0.5, 'sine', 0.05, 0.2), 100);
+          break;
+        case 'hold':
+          // Sustained gentle tone
+          playTone(440, 0.8, 'sine', 0.1, 0.3);
+          break;
+        case 'exhale':
+          // Falling tone
+          playTone(330, 0.6, 'sine', 0.05, 0.3);
+          setTimeout(() => playTone(220, 0.8, 'sine', 0.1, 0.4), 150);
+          break;
+      }
+    }
+    // Play tick sound for countdown
+    function playTick() {
+      if (!soundEnabled || !audioCtx) return;
+      const oscillator = audioCtx.createOscillator();
+      const gainNode = audioCtx.createGain();
+      oscillator.type = 'sine';
+      oscillator.frequency.setValueAtTime(800, audioCtx.currentTime);
+      gainNode.gain.setValueAtTime(0.03, audioCtx.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.05);
+      oscillator.connect(gainNode);
+      gainNode.connect(audioCtx.destination);
+      oscillator.start(audioCtx.currentTime);
+      oscillator.stop(audioCtx.currentTime + 0.05);
+    }
+    // Update UI based on phase
+    function updateUI(phase, time, progress) {
+      // Update timer
+      timerDisplay.textContent = Math.ceil(time);
+      // Update phase text
+      const phaseNames = {
+        inhale: 'Inhale',
+        hold: 'Hold',
+        exhale: 'Exhale',
+        idle: 'Ready'
+      };
+      phaseText.textContent = phaseNames[phase];
+      // Update phase label
+      const labelNames = {
+        inhale: 'Breathe in slowly',
+        hold: 'Hold your breath',
+        exhale: 'Release gently',
+        idle: 'Ready to begin'
+      };
+      phaseLabel.textContent = labelNames[phase];
+      phaseLabel.className = `phase-label ${phase}`;
+      // Update progress circle color
+      const phaseColors = {
+        inhale: '#60a5fa',
+        hold: '#a78bfa',
+        exhale: '#4fd1c5',
+        idle: '#4fd1c5'
+      };
+      progressCircle.style.stroke = phaseColors[phase];
+      // Update progress arc
+      const offset = circumference * (1 - progress);
+      progressCircle.style.strokeDashoffset = offset;
+      // Update phase rings
+      inhaleRing.classList.toggle('active', phase === 'inhale');
+      holdRing.classList.toggle('active', phase === 'hold');
+      exhaleRing.classList.toggle('active', phase === 'exhale');
+      // Animate breathing circle
+      const scales = {
+        inhale: 1 + (progress * 0.15),
+        hold: 1.15,
+        exhale: 1.15 - (progress * 0.15),
+        idle: 1
+      };
+      breathCircle.style.transform = `scale(${scales[phase]})`;
+    }
+    // Format time as M:SS
+    function formatTime(seconds) {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+    // Main animation loop
+    function tick(timestamp) {
+      if (!isRunning) return;
+      if (!lastTimestamp) lastTimestamp = timestamp;
+      const delta = (timestamp - lastTimestamp) / 1000;
+      lastTimestamp = timestamp;
+      // Update total time
+      totalSeconds += delta;
+      totalTimeEl.textContent = formatTime(totalSeconds);
+      // Update current time
+      currentTime -= delta;
+      if (currentTime <= 0) {
+        // Transition to next phase
+        const currentPhaseData = phases[currentPhase];
+        if (currentPhaseData) {
+          // Play transition sound
+          playPhaseSound(currentPhaseData.next);
+          // Check if completing a full cycle
+          if (currentPhase === 'exhale') {
+            cycleCount++;
+            cycleCountEl.textContent = cycleCount;
+          }
+          currentPhase = currentPhaseData.next;
+          currentTime = phases[currentPhase].duration;
+        }
+      }
+      // Calculate progress
+      const phaseDuration = phases[currentPhase]?.duration || 1;
+      const progress = 1 - (currentTime / phaseDuration);
+      // Update UI
+      updateUI(currentPhase, currentTime, progress);
+      // Play tick on integer seconds
+      if (Math.abs(currentTime - Math.ceil(currentTime)) < 0.05 && currentTime > 0.5) {
+        playTick();
+      }
+      animationFrame = requestAnimationFrame(tick);
+    }
+    // Start session
+    function startSession() {
+      initAudio();
+      isRunning = true;
+      currentPhase = 'inhale';
+      currentTime = phases.inhale.duration;
+      lastTimestamp = 0;
+      controlBtn.classList.add('active');
+      btnText.textContent = 'Pause Session';
+      playPhaseSound('inhale');
+      updateUI(currentPhase, currentTime, 0);
+      animationFrame = requestAnimationFrame(tick);
+    }
+    // Pause session
+    function pauseSession() {
+      isRunning = false;
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+      controlBtn.classList.remove('active');
+      btnText.textContent = 'Resume Session';
+    }
+    // Reset session
+    function resetSession() {
+      isRunning = false;
+      currentPhase = 'idle';
+      currentTime = 0;
+      cycleCount = 0;
+      totalSeconds = 0;
+      lastTimestamp = 0;
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+      controlBtn.classList.remove('active');
+      btnText.textContent = 'Begin Session';
+      cycleCountEl.textContent = '0';
+      totalTimeEl.textContent = '0:00';
+      updateUI('idle', 4, 0);
+    }
+    // Toggle sound
+    function toggleSound() {
+      soundEnabled = !soundEnabled;
+      soundToggle.classList.toggle('muted', !soundEnabled);
+      soundOnIcon.style.display = soundEnabled ? 'block' : 'none';
+      soundOffIcon.style.display = soundEnabled ? 'none' : 'block';
+      if (soundEnabled) {
+        initAudio();
+        playTone(440, 0.3, 'sine', 0.05, 0.1);
+      }
+    }
+    // Event listeners
+    controlBtn.addEventListener('click', () => {
+      if (!isRunning && currentPhase === 'idle') {
+        startSession();
+      } else if (!isRunning) {
+        startSession();
+      } else {
+        pauseSession();
+      }
+    });
+    soundToggle.addEventListener('click', toggleSound);
+    // Double-click to reset
+    controlBtn.addEventListener('dblclick', resetSession);
+    // Create floating particles
+    function createParticles() {
+      const container = document.getElementById('particles');
+      const particleCount = 20;
+      for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'particle';
+        particle.style.left = `${Math.random() * 100}%`;
+        particle.style.animationDelay = `${Math.random() * 8}s`;
+        particle.style.animationDuration = `${6 + Math.random() * 4}s`;
+        container.appendChild(particle);
+      }
+    }
+    // Initialize
+    createParticles();
+    updateUI('idle', 4, 0);
+    // Keyboard support
+    document.addEventListener('keydown', (e) => {
+      if (e.code === 'Space') {
+        e.preventDefault();
+        controlBtn.click();
+      }
+      if (e.code === 'KeyM') {
+        toggleSound();
+      }
+      if (e.code === 'Escape') {
+        resetSession();
+      }
+    });
+  </script>
+</body>
+</html>