Spaces:
Running
Running
Remove countdown timer from LOVE breathing
Browse filesSquare breathing now shows just phase text (Breathe in..., Hold..., etc.)
without countdown numbers for a calmer, less distracting experience.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- static/index.html +4 -30
static/index.html
CHANGED
|
@@ -1469,7 +1469,6 @@ Based on the themes in this conversation (conflict, connection, fear, love, boun
|
|
| 1469 |
// ============================================================================
|
| 1470 |
// BREATH/LOVE TOOL - Square Breathing (5 in, 4 hold, 5 out, 4 hold)
|
| 1471 |
// ============================================================================
|
| 1472 |
-
let breathInterval;
|
| 1473 |
let breathTimeout;
|
| 1474 |
|
| 1475 |
function openBreath() {
|
|
@@ -1482,49 +1481,25 @@ Based on the themes in this conversation (conflict, connection, fear, love, boun
|
|
| 1482 |
const circle = document.querySelector('.breath-circle');
|
| 1483 |
|
| 1484 |
// Phase 1: Breathe in (5 seconds)
|
| 1485 |
-
breathText.textContent = 'Breathe in...
|
| 1486 |
circle.style.animation = 'breatheIn 5s ease-out forwards';
|
| 1487 |
-
let count = 5;
|
| 1488 |
-
breathInterval = setInterval(() => {
|
| 1489 |
-
count--;
|
| 1490 |
-
if (count > 0) breathText.textContent = `Breathe in... ${count}`;
|
| 1491 |
-
}, 1000);
|
| 1492 |
|
| 1493 |
breathTimeout = setTimeout(() => {
|
| 1494 |
-
clearInterval(breathInterval);
|
| 1495 |
// Phase 2: Hold (4 seconds)
|
| 1496 |
-
breathText.textContent = 'Hold...
|
| 1497 |
circle.style.animation = 'none';
|
| 1498 |
-
count = 4;
|
| 1499 |
-
breathInterval = setInterval(() => {
|
| 1500 |
-
count--;
|
| 1501 |
-
if (count > 0) breathText.textContent = `Hold... ${count}`;
|
| 1502 |
-
}, 1000);
|
| 1503 |
|
| 1504 |
breathTimeout = setTimeout(() => {
|
| 1505 |
-
clearInterval(breathInterval);
|
| 1506 |
// Phase 3: Breathe out (5 seconds)
|
| 1507 |
-
breathText.textContent = 'Breathe out...
|
| 1508 |
circle.style.animation = 'breatheOut 5s ease-in forwards';
|
| 1509 |
-
count = 5;
|
| 1510 |
-
breathInterval = setInterval(() => {
|
| 1511 |
-
count--;
|
| 1512 |
-
if (count > 0) breathText.textContent = `Breathe out... ${count}`;
|
| 1513 |
-
}, 1000);
|
| 1514 |
|
| 1515 |
breathTimeout = setTimeout(() => {
|
| 1516 |
-
clearInterval(breathInterval);
|
| 1517 |
// Phase 4: Hold (4 seconds)
|
| 1518 |
-
breathText.textContent = 'Hold...
|
| 1519 |
circle.style.animation = 'none';
|
| 1520 |
-
count = 4;
|
| 1521 |
-
breathInterval = setInterval(() => {
|
| 1522 |
-
count--;
|
| 1523 |
-
if (count > 0) breathText.textContent = `Hold... ${count}`;
|
| 1524 |
-
}, 1000);
|
| 1525 |
|
| 1526 |
breathTimeout = setTimeout(() => {
|
| 1527 |
-
clearInterval(breathInterval);
|
| 1528 |
// Repeat cycle
|
| 1529 |
runBreathCycle();
|
| 1530 |
}, 4000);
|
|
@@ -1535,7 +1510,6 @@ Based on the themes in this conversation (conflict, connection, fear, love, boun
|
|
| 1535 |
|
| 1536 |
function closeBreath() {
|
| 1537 |
document.getElementById('breath-overlay').classList.remove('active');
|
| 1538 |
-
clearInterval(breathInterval);
|
| 1539 |
clearTimeout(breathTimeout);
|
| 1540 |
}
|
| 1541 |
|
|
|
|
| 1469 |
// ============================================================================
|
| 1470 |
// BREATH/LOVE TOOL - Square Breathing (5 in, 4 hold, 5 out, 4 hold)
|
| 1471 |
// ============================================================================
|
|
|
|
| 1472 |
let breathTimeout;
|
| 1473 |
|
| 1474 |
function openBreath() {
|
|
|
|
| 1481 |
const circle = document.querySelector('.breath-circle');
|
| 1482 |
|
| 1483 |
// Phase 1: Breathe in (5 seconds)
|
| 1484 |
+
breathText.textContent = 'Breathe in...';
|
| 1485 |
circle.style.animation = 'breatheIn 5s ease-out forwards';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1486 |
|
| 1487 |
breathTimeout = setTimeout(() => {
|
|
|
|
| 1488 |
// Phase 2: Hold (4 seconds)
|
| 1489 |
+
breathText.textContent = 'Hold...';
|
| 1490 |
circle.style.animation = 'none';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1491 |
|
| 1492 |
breathTimeout = setTimeout(() => {
|
|
|
|
| 1493 |
// Phase 3: Breathe out (5 seconds)
|
| 1494 |
+
breathText.textContent = 'Breathe out...';
|
| 1495 |
circle.style.animation = 'breatheOut 5s ease-in forwards';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1496 |
|
| 1497 |
breathTimeout = setTimeout(() => {
|
|
|
|
| 1498 |
// Phase 4: Hold (4 seconds)
|
| 1499 |
+
breathText.textContent = 'Hold...';
|
| 1500 |
circle.style.animation = 'none';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1501 |
|
| 1502 |
breathTimeout = setTimeout(() => {
|
|
|
|
| 1503 |
// Repeat cycle
|
| 1504 |
runBreathCycle();
|
| 1505 |
}, 4000);
|
|
|
|
| 1510 |
|
| 1511 |
function closeBreath() {
|
| 1512 |
document.getElementById('breath-overlay').classList.remove('active');
|
|
|
|
| 1513 |
clearTimeout(breathTimeout);
|
| 1514 |
}
|
| 1515 |
|