Sticky button

src/App.css

@@ -405,6 +405,25 @@ h1 {
   margin: 2rem 0;
 }
 
+.sticky-controls {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.sticky-controls .control-btn {
+  margin: 0;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
 .control-btn {
   padding: 12px 24px;
   border: none;
@@ -637,32 +656,32 @@ h1 {
   .exercise-btn {
     width: 200px;
   }
-  
+
   .settings-menu {
     top: 15px;
     right: 15px;
   }
-  
+
   .settings-toggle {
     min-width: 100px;
     padding: 6px 12px;
     font-size: 0.75rem;
   }
-  
+
   .settings-content {
     min-width: 260px;
     right: -10px;
   }
-  
+
   .toggle-buttons {
     gap: 0.5rem;
   }
-  
+
   .toggle-btn {
     min-width: 85px;
     font-size: 0.8rem;
   }
-  
+
   .settings-content.open {
     padding: 1rem;
   }

src/App.tsx

@@ -110,9 +110,11 @@ function App() {
   const [isRaining, setIsRaining] = useState(false);
   const [useShapes, setUseShapes] = useState(false); // Toggle between shapes and circles - default to circles
   const [isSettingsOpen, setIsSettingsOpen] = useState(false); // Toggle for settings menu
+  const [isStartButtonVisible, setIsStartButtonVisible] = useState(true); // Track if start button is visible
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const startButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const currentExercise = breathingExercises[breathingType];
   const phaseDuration = currentExercise.phaseDurations[phase];
@@ -193,6 +195,29 @@ function App() {
     };
   }, [isActive, timerMinutes, breathingType, remainingTime]);
 
+  // Intersection Observer for start button visibility
+  useEffect(() => {
+    const startButton = startButtonRef.current;
+    if (!startButton) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsStartButtonVisible(entry.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.9 // Button is considered visible if 90% is visible
+      }
+    );
+
+    observer.observe(startButton);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   const handleStartStop = () => {
     setIsActive(!isActive);
     if (!isActive) {
@@ -979,13 +1004,26 @@ function App() {
 
         <div className="controls">
           <button
+            ref={startButtonRef}
             className={`control-btn ${isActive ? 'stop' : 'start'}`}
             onClick={handleStartStop}
           >
             {isActive ? 'Pause' : 'Start'}
           </button>
         </div>
 
+        {/* Sticky button that appears when main button is not visible */}
+        {!isStartButtonVisible && (
+          <div className="sticky-controls">
+            <button
+              className={`control-btn ${isActive ? 'stop' : 'start'}`}
+              onClick={handleStartStop}
+            >
+              {isActive ? 'Pause' : 'Start'}
+            </button>
+          </div>
+        )}
+
         <div className="stats">
           <p>Completed Cycles: <span className="cycle-count">{cycleCount}</span>
             {currentExercise.maxCycles && (