garden 1

assets/css/custom.css

@@ -0,0 +1,376 @@
+
+/* --- Base & Typography --- */
+:root {
+    --font-family: 'Nunito', sans-serif;
+    --panel-bg: rgba(255, 255, 255, 0.7);
+    --text-color: #333;
+    --primary-color: #86A8E7;
+    --accent-color: #7FDEB5;
+    --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: #a7d8f0; /* Fallback color */
+    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 #ccc;
+    border-radius: var(--border-radius-sm);
+    font-size: 1rem;
+}
+
+#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: #6c94d8;
+}
+
+#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: rgba(255, 255, 255, 0.5);
+    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: 4;
+    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;
+}
+
+.petal div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -10px;
+    margin-left: -5px;
+    width: 10px;
+    height: 20px;
+    border-radius: 5px;
+    transform-origin: 50% 100%;
+}
+
+/* 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; }
+
+
+.petal .p1 { transform: rotate(0deg) translateY(-15px); }
+.petal .p2 { transform: rotate(45deg) translateY(-15px); }
+.petal .p3 { transform: rotate(90deg) translateY(-15px); }
+.petal .p4 { transform: rotate(135deg) translateY(-15px); }
+.petal .p5 { transform: rotate(180deg) translateY(-15px); }
+.petal .p6 { transform: rotate(225deg) translateY(-15px); }
+.petal .p7 { transform: rotate(270deg) translateY(-15px); }
+.petal .p8 { transform: rotate(315deg) translateY(-15px); }

assets/js/main.js

@@ -0,0 +1,199 @@
+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 shareBtn = document.getElementById('share-btn');
+
+    // 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);
+        gardenElements.forEach(renderGardenElement);
+    }
+
+    // --- 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>
+        `;
+        
+        // Find the ground element to append to
+        const ground = garden.querySelector('.ground');
+        if (ground) {
+            ground.appendChild(el);
+        } else {
+            garden.appendChild(el); // Fallback
+        }
+    }
+
+    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));
+            soundToggle.textContent = 'Pause Sound';
+        } else {
+            ambientSound.pause();
+            soundToggle.textContent = 'Play Sound';
+        }
+    });
+
+    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 => ({
+            '&': '&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,70 @@
-<?php
-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>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <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">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --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>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mindful Garden</title>
+    <meta name="description" content="A relaxing productivity app to grow a virtual garden by completing tasks.">
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+
+    <!-- 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/gU33kqBtgNS4tSPHuGibyoVXM5RqaClp1MAJJStqyJubBCFpwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+<body class="theme-zen">
+
+    <div class="app-container">
+        <!-- Task Manager Panel -->
+        <div class="panel task-panel">
+            <header>
+                <h1>Mindful Garden</h1>
+                <h2>Tasks</h2>
+            </header>
+            <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>
+                <h2>Your Garden</h2>
+                <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" 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>
+                <!-- 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>
+                <button id="sound-toggle">Play Sound</button>
+                <button id="share-btn">Share Garden</button>
+            </div>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <!-- Custom JS -->
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+
 </body>
-</html>
+</html>