final
This commit is contained in:
parent
ee2fbaaaee
commit
3ee84ff2b8
@ -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;
|
||||
|
||||
@ -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 => ({
|
||||
|
||||
15
index.php
15
index.php
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user