diff --git a/assets/css/custom.css b/assets/css/custom.css index 67d6138..1b11500 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,3 +1,20 @@ +/* --- Utility Classes --- */ +.d-flex { + display: flex !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.align-items-center { + align-items: center !important; +} +.mb-0 { + margin-bottom: 0 !important; +} +.ms-3 { + margin-left: 1rem !important; +} + /* --- Base & Typography --- */ :root { --font-family: 'Nunito', sans-serif; diff --git a/assets/js/main.js b/assets/js/main.js index cb4029d..d3ac6cb 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -6,7 +6,8 @@ document.addEventListener('DOMContentLoaded', () => { const garden = document.getElementById('garden'); const soundToggle = document.getElementById('sound-toggle'); const ambientSound = document.getElementById('ambient-sound'); - const shareBtn = document.getElementById('share-btn'); + const soundOnIcon = document.getElementById('sound-on-icon'); + const soundOffIcon = document.getElementById('sound-off-icon'); // App State let tasks = JSON.parse(localStorage.getItem('tasks')) || []; @@ -133,13 +134,7 @@ document.addEventListener('DOMContentLoaded', () => { `; - // Find the ground element to append to - const ground = garden.querySelector('.ground'); - if (ground) { - ground.appendChild(el); - } else { - garden.appendChild(el); // Fallback - } + garden.appendChild(el); } function removeGardenElement(taskId) { @@ -163,34 +158,15 @@ document.addEventListener('DOMContentLoaded', () => { soundToggle.addEventListener('click', () => { if (ambientSound.paused) { ambientSound.play().catch(e => console.error("Audio play failed: ", e)); - soundToggle.textContent = 'Pause Sound'; + soundOnIcon.style.display = 'block'; + soundOffIcon.style.display = 'none'; } else { ambientSound.pause(); - soundToggle.textContent = 'Play Sound'; + soundOnIcon.style.display = 'none'; + soundOffIcon.style.display = 'block'; } }); - shareBtn.addEventListener('click', () => { - const gardenPanel = document.querySelector('.garden-panel'); - const controls = gardenPanel.querySelector('.garden-controls'); - - controls.style.visibility = 'hidden'; - - html2canvas(gardenPanel, { - useCORS: true, - backgroundColor: '#a7d8f0' // Match sky color - }).then(canvas => { - const link = document.createElement('a'); - link.download = 'my-mindful-garden.png'; - link.href = canvas.toDataURL(); - link.click(); - controls.style.visibility = 'visible'; - }).catch(err => { - console.error('Could not share garden:', err); - controls.style.visibility = 'visible'; - }); - }); - // --- Utility --- function escapeHTML(str) { return str.replace(/[&<>"']/g, s => ({ diff --git a/index.php b/index.php index 355c8d1..98230b3 100644 --- a/index.php +++ b/index.php @@ -14,8 +14,7 @@ - - + @@ -35,8 +34,14 @@
-
-

Your Garden

+
+
+

Your Garden

+
+ + +
+
@@ -98,8 +103,6 @@
- -