This commit is contained in:
Flatlogic Bot 2025-09-17 23:26:05 +00:00
parent ee2fbaaaee
commit 3ee84ff2b8
3 changed files with 33 additions and 37 deletions

View File

@ -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;

View File

@ -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', () => {
</div>
`;
// 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 => ({

View File

@ -14,8 +14,7 @@
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
<!-- html2canvas for sharing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body data-theme="minimal">
@ -35,8 +34,14 @@
<!-- Garden Panel -->
<div class="panel garden-panel">
<header>
<h2>Your Garden</h2>
<header class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<h2 class="mb-0">Your Garden</h2>
<div id="sound-toggle" class="ms-3" style="cursor: pointer;">
<svg id="sound-on-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
<svg id="sound-off-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x" 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>
</div>
</div>
<div class="theme-switcher">
<button class="theme-btn" data-theme="zen">Japanese Zen</button>
<button class="theme-btn" data-theme="fantasy">Fantasy Forest</button>
@ -98,8 +103,6 @@
</div>
<div class="garden-controls">
<audio id="ambient-sound" loop src="https://www.soundjay.com/nature/rain-01.mp3"></audio>
<button id="sound-toggle">Play Sound</button>
<button id="share-btn">Share Garden</button>
</div>
</div>
</div>