final final

assets/css/custom.css

@@ -0,0 +1,764 @@
+/* --- 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;
+}
+
+#sound-toggle {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    margin-top: -8px;
+}
+
+#sound-toggle:hover {
+    transform: scale(1.1);
+}
+
+#sound-on-icon,
+#sound-off-icon {
+    font-size: 28px;
+}
+
+/* --- Base & Typography --- */
+:root {
+    --font-family: 'Nunito', sans-serif;
+    --border-radius-lg: 12px;
+    --border-radius-sm: 8px;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+body {
+    font-family: var(--font-family);
+    margin: 0;
+    padding: 2rem;
+    box-sizing: border-box;
+    background: var(--background-gradient);
+    color: var(--text-color);
+    transition: background 0.5s ease;
+}
+
+h1, h2 {
+    font-weight: 700;
+    margin-top: 0;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    padding-bottom: 0.5rem;
+}
+
+/* --- Layout --- */
+.app-container {
+    display: flex;
+    gap: 2rem;
+    height: calc(100vh - 4rem);
+}
+
+.panel {
+    padding: 2rem;
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow);
+    background-color: var(--panel-bg);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition: background-color 0.5s ease;
+    z-index: 10;
+}
+
+.task-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.garden-panel {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    margin-bottom: 1.5rem;
+}
+
+/* --- Task Manager --- */
+#task-form {
+    display: flex;
+    margin-bottom: 1.5rem;
+}
+
+#task-input {
+    flex-grow: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--task-input-border);
+    border-radius: var(--border-radius-sm);
+    font-size: 1rem;
+    background-color: var(--task-input-bg);
+    color: var(--text-color);
+}
+
+#task-form button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    margin-left: 0.5rem;
+    transition: background-color 0.3s;
+}
+
+#task-form button:hover {
+    background-color: var(--button-hover-bg);
+}
+
+#task-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+    flex-grow: 1;
+}
+
+#task-list li {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    background: var(--task-list-item-bg);
+    border-radius: var(--border-radius-sm);
+    transition: all 0.3s;
+}
+
+#task-list li.completed {
+    text-decoration: line-through;
+    opacity: 0.6;
+}
+
+#task-list li input[type="checkbox"] {
+    margin-right: 0.75rem;
+    width: 18px;
+    height: 18px;
+}
+
+#task-list li .delete-btn {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: #ff6b6b;
+    cursor: pointer;
+    font-size: 1.2rem;
+    opacity: 0.5;
+    transition: opacity 0.3s;
+}
+
+#task-list li:hover .delete-btn {
+    opacity: 1;
+}
+
+
+/* --- Garden --- */
+.garden-panel header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#garden {
+    flex-grow: 1;
+    position: relative;
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    background: transparent;
+}
+
+/* --- Background Scene --- */
+.sky {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60%;
+    background: linear-gradient(to bottom, #a7d8f0, #cce7f5);
+    z-index: 1;
+}
+
+.cloud {
+    position: absolute;
+    background: white;
+    border-radius: 50px;
+    opacity: 0.9;
+}
+.cloud-1 {
+    top: 15%;
+    left: 10%;
+    width: 120px;
+    height: 40px;
+}
+.cloud-2 {
+    top: 25%;
+    right: 15%;
+    width: 150px;
+    height: 50px;
+}
+.cloud::before, .cloud::after {
+    content: '';
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+}
+.cloud-1::before { top: -20px; left: 20px; width: 50px; height: 50px; }
+.cloud-1::after { top: -10px; right: 30px; width: 40px; height: 40px; }
+.cloud-2::before { top: -30px; left: 30px; width: 70px; height: 70px; }
+.cloud-2::after { top: -20px; right: 20px; width: 60px; height: 60px; }
+
+
+.hills {
+    position: absolute;
+    bottom: 10%;
+    left: 0;
+    width: 100%;
+    height: 40%;
+    z-index: 2;
+}
+.hill {
+    position: absolute;
+    bottom: 0;
+    border-radius: 50% 50% 0 0;
+}
+.hill-1 {
+    left: -20%;
+    width: 80%;
+    height: 80%;
+    background: #c5dcb7;
+}
+.hill-2 {
+    right: -15%;
+    width: 70%;
+    height: 60%;
+    background: #b3d0a7;
+}
+
+.ground {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 15%;
+    background: #9fcc93;
+    z-index: 3;
+}
+
+
+.garden-controls {
+    margin-top: 1rem;
+    text-align: center;
+}
+
+.garden-controls button, .theme-btn {
+    padding: 0.5rem 1rem;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--primary-color);
+    background-color: transparent;
+    color: var(--primary-color);
+    cursor: pointer;
+    margin: 0 0.25rem;
+    transition: all 0.3s;
+}
+
+.garden-controls button:hover, .theme-btn:hover, .theme-btn.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+/* --- New Flower Styles --- */
+.garden-element {
+    position: absolute;
+    bottom: 5%;
+    transform-origin: bottom center;
+    z-index: 15;
+    transition: transform 0.5s ease-out;
+}
+
+.garden-element.grow {
+    animation: grow-animation 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+
+.garden-element.shrink {
+    transform: scale(0);
+}
+
+@keyframes grow-animation {
+    from { transform: scale(0); }
+    to { transform: scale(1); }
+}
+
+.flower-daisy {
+    width: 80px;
+    height: 120px;
+    position: relative;
+}
+
+.flower-daisy .stem {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 80px;
+    background: #4a7c4a;
+    border-radius: 3px;
+}
+
+.flower-daisy .leaf {
+    position: absolute;
+    bottom: 20px;
+    width: 30px;
+    height: 25px;
+    background: #6a9a6a;
+    border-radius: 50% 0;
+}
+
+.flower-daisy .leaf.left {
+    left: 0;
+    transform: rotate(20deg);
+}
+
+.flower-daisy .leaf.right {
+    right: 0;
+    transform: rotate(-20deg) scaleX(-1);
+}
+
+.flower-head {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 60px;
+}
+
+.flower-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    background: #ffdd57;
+    border-radius: 50%;
+    z-index: 2;
+}
+
+.petal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+/* This is for each individual petal piece */
+.petal > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 14px;
+    height: 20px;
+    margin-left: -7px;
+    margin-top: -22px; /* Controls distance from center */
+    border-radius: 50%;
+    transform-origin: center 22px; /* PIVOT POINT: (width/2) (margin-top) */
+}
+
+/* Petal Colors */
+.petal-pink > div { background-color: #ffaccb; }
+.petal-yellow > div { background-color: #fff38a; }
+.petal-purple > div { background-color: #d9abff; }
+.petal-white > div { background-color: #ffffff; }
+
+/* Position and rotate each petal */
+.petal .p1 { transform: rotate(0deg); }
+.petal .p2 { transform: rotate(45deg); }
+.petal .p3 { transform: rotate(90deg); }
+.petal .p4 { transform: rotate(135deg); }
+.petal .p5 { transform: rotate(180deg); }
+.petal .p6 { transform: rotate(225deg); }
+.petal .p7 { transform: rotate(270deg); }
+.petal .p8 { transform: rotate(315deg); }
+
+/* --- Fantasy Forest Theme --- */
+
+body[data-theme="fantasy"] {
+    --primary-color: #9e7fde;
+    --accent-color: #d9abff;
+    --panel-bg: rgba(44, 31, 58, 0.7);
+    --text-color: #f0f0f0;
+    --background-gradient: #1a0c2e;
+    --task-list-item-bg: rgba(60, 40, 80, 0.5);
+    --task-input-bg: transparent;
+    --task-input-border: #9e7fde;
+    --button-hover-bg: #b19cd9;
+}
+
+body[data-theme="fantasy"] .cloud,
+body[data-theme="fantasy"] .hills {
+    display: none;
+}
+
+.fantasy-scene {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+    /* Background moved to #garden */
+}
+
+body[data-theme="fantasy"] #garden {
+    background: linear-gradient(to bottom, #1a0c2e, #3a1a5c);
+}
+
+body[data-theme="fantasy"] .fantasy-scene {
+    opacity: 1;
+}
+
+body[data-theme="fantasy"] .sky {
+    background: none;
+}
+
+body[data-theme="fantasy"] .ground {
+    background: #2c1f3a;
+}
+
+.fantasy-moon {
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: #f7f2d7;
+    box-shadow: 0 0 40px rgba(247, 242, 215, 0.7), 
+                0 0 80px rgba(247, 242, 215, 0.5),
+                inset 0 0 10px rgba(255,255,255,0.5);
+}
+
+.fantasy-trees {
+    position: absolute;
+    bottom: 15%;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    z-index: 6;
+}
+
+.tree {
+    position: absolute;
+    bottom: 0;
+    width: 10px; /* Trunk width */
+    background: #2c1f3a;
+    transform-origin: bottom center;
+}
+
+.tree::after {
+    content: '';
+    position: absolute;
+    bottom: 100%; /* Position the foliage above the trunk */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 120px;
+    background: #2c1f3a;
+    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
+    box-shadow: 0 -10px 0 #2c1f3a, 20px -25px 0 5px #2c1f3a, -20px -25px 0 5px #2c1f3a;
+}
+
+/* Individual tree styles for variety */
+.tree-1 {
+    left: 5%;
+    height: 150px;
+    transform: scale(0.8);
+}
+.tree-1::after {
+    width: 100px;
+    height: 150px;
+}
+
+.tree-2 {
+    left: 20%;
+    height: 180px;
+    transform: scale(1);
+}
+.tree-2::after {
+    border-radius: 40% 60% 40% 40% / 70% 70% 30% 30%;
+    box-shadow: 0 -15px 0 #2c1f3a, 25px -30px 0 8px #2c1f3a, -25px -30px 0 8px #2c1f3a;
+}
+
+.tree-3 {
+    left: 35%;
+    height: 120px;
+    transform: scale(0.7);
+}
+.tree-3::after {
+    width: 70px;
+    height: 110px;
+    box-shadow: 0 -8px 0 #2c1f3a, 15px -20px 0 3px #2c1f3a, -15px -20px 0 3px #2c1f3a;
+}
+
+.tree-4 {
+    right: 5%;
+    height: 160px;
+    transform: scale(0.9);
+}
+.tree-4::after {
+    width: 90px;
+    height: 140px;
+    border-radius: 60% 40% 50% 50% / 70% 70% 30% 30%;
+}
+
+.tree-5 {
+    right: 25%;
+    height: 200px;
+    transform: scale(1.1);
+}
+.tree-5::after {
+    width: 110px;
+    height: 160px;
+    box-shadow: 0 -20px 0 #2c1f3a, 30px -40px 0 10px #2c1f3a, -30px -40px 0 10px #2c1f3a;
+}
+
+.tree-6 {
+    right: 40%;
+    height: 140px;
+    transform: scale(0.8);
+}
+
+/* --- Stars --- */
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
+.stars-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60%; /* Cover the sky area */
+    z-index: 5;
+}
+
+.star {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: white;
+    border-radius: 50%;
+    animation: flicker 3s infinite alternate;
+}
+
+/* Random star positions and animation delays */
+.star:nth-child(1) { top: 10%; left: 5%; animation-delay: 0.1s; }
+.star:nth-child(2) { top: 50%; left: 10%; animation-delay: 0.5s; }
+.star:nth-child(3) { top: 20%; left: 15%; animation-delay: 1.2s; }
+.star:nth-child(4) { top: 40%; left: 20%; animation-delay: 0.8s; }
+.star:nth-child(5) { top: 60%; left: 25%; animation-delay: 0.3s; }
+.star:nth-child(6) { top: 15%; left: 30%; animation-delay: 1.5s; }
+.star:nth-child(7) { top: 35%; left: 35%; animation-delay: 0.2s; }
+.star:nth-child(8) { top: 55%; left: 40%; animation-delay: 1s; }
+.star:nth-child(9) { top: 5%; left: 45%; animation-delay: 0.7s; }
+.star:nth-child(10) { top: 25%; left: 50%; animation-delay: 1.3s; }
+.star:nth-child(11) { top: 45%; left: 55%; animation-delay: 0.4s; }
+.star:nth-child(12) { top: 65%; left: 60%; animation-delay: 1.1s; }
+.star:nth-child(13) { top: 10%; left: 65%; animation-delay: 0.6s; }
+.star:nth-child(14) { top: 30%; left: 70%; animation-delay: 1.4s; }
+.star:nth-child(15) { top: 50%; left: 75%; animation-delay: 0.9s; }
+.star:nth-child(16) { top: 70%; left: 80%; animation-delay: 0.1s; }
+.star:nth-child(17) { top: 20%; left: 85%; animation-delay: 1.6s; }
+.star:nth-child(18) { top: 40%; left: 90%; animation-delay: 0.3s; }
+.star:nth-child(19) { top: 60%; left: 95%; animation-delay: 1s; }
+.star:nth-child(20) { top: 5%; left: 98%; animation-delay: 0.5s; }
+.star:nth-child(21) { top: 15%; left: 2%; animation-delay: 1.2s; }
+.star:nth-child(22) { top: 35%; left: 8%; animation-delay: 0.8s; }
+.star:nth-child(23) { top: 55%; left: 12%; animation-delay: 0.2s; }
+.star:nth-child(24) { top: 25%; left: 18%; animation-delay: 1.5s; }
+.star:nth-child(25) { top: 45%; left: 22%; animation-delay: 0.4s; }
+.star:nth-child(26) { top: 65%; left: 28%; animation-delay: 1.1s; }
+.star:nth-child(27) { top: 10%; left: 32%; animation-delay: 0.6s; }
+.star:nth-child(28) { top: 30%; left: 38%; animation-delay: 1.4s; }
+.star:nth-child(29) { top: 50%; left: 42%; animation-delay: 0.9s; }
+.star:nth-child(30) { top: 70%; left: 48%; animation-delay: 0.1s; }
+.star:nth-child(31) { top: 20%; left: 52%; animation-delay: 1.6s; }
+.star:nth-child(32) { top: 40%; left: 58%; animation-delay: 0.3s; }
+.star:nth-child(33) { top: 60%; left: 62%; animation-delay: 1s; }
+.star:nth-child(34) { top: 5%; left: 68%; animation-delay: 0.5s; }
+.star:nth-child(35) { top: 25%; left: 72%; animation-delay: 1.3s; }
+.star:nth-child(36) { top: 45%; left: 78%; animation-delay: 0.4s; }
+.star:nth-child(37) { top: 65%; left: 82%; animation-delay: 1.1s; }
+.star:nth-child(38) { top: 10%; left: 88%; animation-delay: 0.6s; }
+.star:nth-child(39) { top: 30%; left: 92%; animation-delay: 1.4s; }
+.star:nth-child(40) { top: 50%; left: 96%; animation-delay: 0.9s; }
+.star:nth-child(41) { top: 70%; left: 3%; animation-delay: 0.2s; }
+.star:nth-child(42) { top: 15%; left: 9%; animation-delay: 1.5s; }
+.star:nth-child(43) { top: 35%; left: 14%; animation-delay: 0.8s; }
+.star:nth-child(44) { top: 55%; left: 19%; animation-delay: 0.1s; }
+.star:nth-child(45) { top: 25%; left: 24%; animation-delay: 1.2s; }
+.star:nth-child(46) { top: 45%; left: 29%; animation-delay: 0.7s; }
+.star:nth-child(47) { top: 65%; left: 34%; animation-delay: 1.6s; }
+.star:nth-child(48) { top: 10%; left: 39%; animation-delay: 0.3s; }
+.star:nth-child(49) { top: 30%; left: 44%; animation-delay: 1s; }
+.star:nth-child(50) { top: 50%; left: 49%; animation-delay: 0.5s; }
+
+/* --- Theme UI Overrides --- */
+body[data-theme="minimal"] {
+    --panel-bg: rgba(255, 255, 255, 0.7);
+    --text-color: #333;
+    --primary-color: #86a8e7;
+    --accent-color: #91eae4;
+    --background-gradient: linear-gradient(to right, #86a8e7, #91eae4);
+    --task-list-item-bg: rgba(255,255,255,0.5);
+    --task-input-bg: rgba(255,255,255,0.5);
+    --task-input-border: transparent;
+    --button-hover-bg: #7f9ad1;
+}
+
+/* --- Japanese Zen Theme --- */
+body[data-theme="zen"] {
+    --panel-bg: rgba(255, 255, 255, 0.8);
+    --text-color: #4a4a4a;
+    --primary-color: #a8d8b9;
+    --accent-color: #d8e2dc;
+    --background-gradient: linear-gradient(to bottom, #f0f4f0, #d8e2dc);
+    --task-list-item-bg: rgba(255,255,255,0.6);
+    --task-input-bg: rgba(255,255,255,0.6);
+    --task-input-border: transparent;
+    --button-hover-bg: #97c6a8;
+}
+
+body[data-theme="zen"] .sky, /* Hide default scene elements */
+body[data-theme="zen"] .hills,
+body[data-theme="zen"] .fantasy-scene {
+    display: none;
+}
+
+.zen-scene {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+    /* overflow: hidden; */ /* This was causing the flowers to be clipped */
+}
+
+body[data-theme="zen"] #garden {
+    background: linear-gradient(to bottom, #efc2bd, #ffffff);
+}
+
+body[data-theme="zen"] .zen-scene {
+    opacity: 1;
+}
+
+body[data-theme="zen"] .ground {
+    display: none; /* hide default ground */
+}
+
+.zen-sun {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: #ed7968;
+    box-shadow: 0 0 80px rgba(237, 121, 104, 0.7);
+    bottom: 5%;
+}
+
+.torii-gate {
+    position: absolute;
+    bottom: 18%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 150px;
+    z-index: 10;
+}
+
+.torii-pillar {
+    position: absolute;
+    bottom: 0;
+    width: 20px;
+    height: 120px;
+    background: #0c2e16;
+    border-radius: 5px 5px 0 0;
+}
+
+.torii-pillar.left {
+    left: 20px;
+    transform: rotate(-5deg);
+}
+
+.torii-pillar.right {
+    right: 20px;
+    transform: rotate(5deg);
+}
+
+.torii-beam {
+    position: absolute;
+    background: #0c2e16;
+    border-radius: 4px;
+}
+
+.torii-beam.middle {
+    top: 20px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+}
+
+.torii-beam.top {
+    top: 0;
+    left: -20px;
+    width: calc(100% + 40px);
+    height: 20px;
+    border-radius: 10px 10px 0 0;
+}
+
+
+.zen-ground {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 20%;
+    background: #0c2e16;
+    z-index: 3;
+}

assets/js/main.js

@@ -0,0 +1,179 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const taskForm = document.getElementById('task-form');
+    const taskInput = document.getElementById('task-input');
+    const taskList = document.getElementById('task-list');
+    const garden = document.getElementById('garden');
+    const soundToggle = document.getElementById('sound-toggle');
+    const ambientSound = document.getElementById('ambient-sound');
+    const soundOnIcon = document.getElementById('sound-on-icon');
+    const soundOffIcon = document.getElementById('sound-off-icon');
+
+    // App State
+    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+    let gardenElements = JSON.parse(localStorage.getItem('gardenElements')) || [];
+    const flowerColors = ['pink', 'yellow', 'purple', 'white'];
+
+    // --- Initialization ---
+    function init() {
+        tasks.forEach(renderTask);
+        // Filter out garden elements whose tasks are no longer completed or no longer exist
+        const completedTaskIds = new Set(tasks.filter(t => t.completed).map(t => t.id));
+        gardenElements = gardenElements.filter(el => completedTaskIds.has(el.taskId));
+        gardenElements.forEach(renderGardenElement);
+        saveState(); // Resync localStorage with the filtered elements
+    }
+
+    // --- State Management ---
+    function saveState() {
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+        localStorage.setItem('gardenElements', JSON.stringify(gardenElements));
+    }
+
+    // --- Task Management ---
+    taskForm.addEventListener('submit', e => {
+        e.preventDefault();
+        const title = taskInput.value.trim();
+        if (title) {
+            const newTask = { id: Date.now(), title, completed: false };
+            tasks.push(newTask);
+            renderTask(newTask);
+            saveState();
+            taskInput.value = '';
+        }
+    });
+
+    function renderTask(task) {
+        const li = document.createElement('li');
+        li.dataset.id = task.id;
+        if (task.completed) {
+            li.classList.add('completed');
+        }
+        li.innerHTML = `
+            <input type="checkbox" ${task.completed ? 'checked' : ''}>
+            <span>${escapeHTML(task.title)}</span>
+            <button class="delete-btn">&times;</button>
+        `;
+        taskList.appendChild(li);
+
+        li.querySelector('input[type="checkbox"]').addEventListener('change', (e) => {
+            toggleTaskCompletion(task.id, e.target.checked);
+        });
+        li.querySelector('.delete-btn').addEventListener('click', () => {
+            deleteTask(task.id);
+        });
+    }
+
+    function toggleTaskCompletion(id, isCompleted) {
+        const taskIndex = tasks.findIndex(t => t.id === id);
+        if (taskIndex > -1) {
+            tasks[taskIndex].completed = isCompleted;
+            const taskElement = taskList.querySelector(`[data-id='${id}']`);
+            if (taskElement) {
+                taskElement.classList.toggle('completed', isCompleted);
+            }
+
+            if (isCompleted) {
+                addGardenElement(id);
+            } else {
+                removeGardenElement(id);
+            }
+            saveState();
+        }
+    }
+
+    function deleteTask(id) {
+        tasks = tasks.filter(t => t.id !== id);
+        const taskElement = taskList.querySelector(`[data-id='${id}']`);
+        if (taskElement) {
+            taskElement.remove();
+        }
+        removeGardenElement(id);
+        saveState();
+    }
+
+    // --- Garden Management ---
+    function addGardenElement(taskId) {
+        if (gardenElements.some(el => el.taskId === taskId)) return;
+
+        const newElement = {
+            id: Date.now(),
+            taskId: taskId,
+            x: Math.random() * 80 + 10, // 10% to 90% to avoid edges
+            color: flowerColors[Math.floor(Math.random() * flowerColors.length)]
+        };
+        gardenElements.push(newElement);
+        renderGardenElement(newElement);
+        saveState();
+    }
+
+    function renderGardenElement(element) {
+        const el = document.createElement('div');
+        el.dataset.id = element.id;
+        el.classList.add('garden-element', 'grow');
+        el.style.left = `${element.x}%`;
+
+        el.innerHTML = `
+            <div class="flower-daisy">
+                <div class="stem"></div>
+                <div class="leaf left"></div>
+                <div class="leaf right"></div>
+                <div class="flower-head">
+                    <div class="flower-center"></div>
+                    <div class="petal petal-${element.color}">
+                        <div class="p1"></div>
+                        <div class="p2"></div>
+                        <div class="p3"></div>
+                        <div class="p4"></div>
+                        <div class="p5"></div>
+                        <div class="p6"></div>
+                        <div class="p7"></div>
+                        <div class="p8"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        garden.appendChild(el);
+    }
+
+    function removeGardenElement(taskId) {
+        const elementToRemoveIdx = gardenElements.findIndex(el => el.taskId === taskId);
+        if (elementToRemoveIdx > -1) {
+            const elementToRemove = gardenElements[elementToRemoveIdx];
+            const el = garden.querySelector(`[data-id='${elementToRemove.id}']`);
+            if (el) {
+                el.classList.remove('grow');
+                el.classList.add('shrink');
+                setTimeout(() => {
+                    el.remove();
+                }, 500);
+            }
+            gardenElements.splice(elementToRemoveIdx, 1);
+            saveState();
+        }
+    }
+
+    // --- Controls ---
+    soundToggle.addEventListener('click', () => {
+        if (ambientSound.paused) {
+            ambientSound.play().catch(e => console.error("Audio play failed: ", e));
+            soundOnIcon.style.display = 'block';
+            soundOffIcon.style.display = 'none';
+        } else {
+            ambientSound.pause();
+            soundOnIcon.style.display = 'none';
+            soundOffIcon.style.display = 'block';
+        }
+    });
+
+    // --- Utility ---
+    function escapeHTML(str) {
+        return str.replace(/[&<>"']/g, s => ({
+            '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'" : '&#39;'
+        }[s]));
+    }
+
+    // --- Run App ---
+    init();
+});

db/config.php

@@ -1,17 +0,0 @@
-<?php
-// Generated by setup_mariadb_project.sh — edit as needed.
-define('DB_HOST', '127.0.0.1');
-define('DB_NAME', 'app_34179');
-define('DB_USER', 'app_34179');
-define('DB_PASS', '5bac9a24-014f-48ba-8829-27b7d1a1cc68');
-
-function db() {
-  static $pdo;
-  if (!$pdo) {
-    $pdo = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME.';charset=utf8mb4', DB_USER, DB_PASS, [
-      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
-      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
-    ]);
-  }
-  return $pdo;
-}

index.php

@@ -1,131 +1,133 @@
-<?php
+<!DOCTYPE html>
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+    <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Style</title>
+    <title>Mindful Garden</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+    <meta name="description" content="A relaxing productivity app to grow a virtual garden by completing tasks.">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <!-- Google Fonts -->
-  <style>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-    :root {
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-      --bg-color-start: #6a11cb;
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
-      --bg-color-end: #2575fc;
+
-      --text-color: #ffffff;
+    <!-- Custom CSS -->
-      --card-bg-color: rgba(255, 255, 255, 0.01);
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-      --card-border-color: rgba(255, 255, 255, 0.1);
+
-    }
+    
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
 </head>
-<body>
+<body data-theme="minimal">
-  <main>
+
-    <div class="card">
+    <div class="app-container">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        <!-- Task Manager Panel -->
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+        <div class="panel task-panel">
-        <span class="sr-only">Loading…</span>
+            <header>
-      </div>
+                <h1>Mindful Garden</h1>
-      <p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
+                <h2>Tasks</h2>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+            </header>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+            <form id="task-form">
+                <input type="text" id="task-input" placeholder="Add a new task..." required>
+                <button type="submit">Add Task</button>
+            </form>
+            <ul id="task-list"></ul>
+        </div>
+
+        <!-- Garden Panel -->
+        <div class="panel garden-panel">
+            <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;">
+                        <span id="sound-on-icon" style="font-size: 24px;">🔊</span>
+                        <span id="sound-off-icon" style="font-size: 24px; display: none;">🔇</span>
+                    </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>
+                    <button class="theme-btn active" data-theme="minimal">Modern Minimal</button>
+                </div>
+            </header>
+            <div id="garden">
+                <div class="sky">
+                    <div class="cloud cloud-1"></div>
+                    <div class="cloud cloud-2"></div>
+                </div>
+                <div class="hills">
+                    <div class="hill hill-1"></div>
+                    <div class="hill hill-2"></div>
+                </div>
+                <div class="ground"></div>
+
+                <!-- FANTASY SCENE -->
+                <div class="fantasy-scene">
+                    <div class="fantasy-moon"></div>
+                    <div class="stars-container">
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                    </div>
+                    <div class="fantasy-trees">
+                        <div class="tree tree-1"></div>
+                        <div class="tree tree-2"></div>
+                        <div class="tree tree-3"></div>
+                        <div class="tree tree-4"></div>
+                        <div class="tree tree-5"></div>
+                        <div class="tree tree-6"></div>
+                    </div>
+                    
+                </div>
+
+                <!-- ZEN SCENE -->
+                <div class="zen-scene">
+                    <div class="zen-sun"></div>
+                    <div class="cloud cloud-1"></div>
+                    <div class="cloud cloud-2"></div>
+                    <div class="torii-gate">
+                        <div class="torii-pillar left"></div>
+                        <div class="torii-pillar right"></div>
+                        <div class="torii-beam top"></div>
+                        <div class="torii-beam middle"></div>
+                    </div>
+                    <div class="zen-ground"></div>
+                </div>
+
+                <!-- Garden elements will be loaded here -->
+            </div>
+            <div class="garden-controls">
+                <audio id="ambient-sound" loop src="https://www.soundjay.com/nature/rain-01.mp3"></audio>
+            </div>
+        </div>
     </div>
-  </main>
+
-  <footer>
+    <!-- Custom JS -->
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
-  </footer>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const themeButtons = document.querySelectorAll('.theme-btn');
+            const body = document.body;
+
+            themeButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const theme = button.getAttribute('data-theme');
+                    
+                    // Set theme on body
+                    body.setAttribute('data-theme', theme);
+
+                    // Update active button
+                    themeButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                });
+            });
+        });
+    </script>
 </body>
 </html>