Spaces:

aworkimmersive
/

mum

Running

App Files Files Community

aworkimmersive commited on May 16, 2025

Commit

53c1ca9

verified ·

1 Parent(s): 1cfb2d0

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1174 -19
prompts.txt +4 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mum
-emoji: 🐠
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mum
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1174 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mum's Personal Diary | Enhanced</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .card {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+        }
+        .diary-entry {
+            transition: all 0.3s ease;
+        }
+        .diary-entry:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+        }
+        .mood-selector input[type="radio"] {
+            display: none;
+        }
+        .mood-selector input[type="radio"]:checked + label {
+            transform: scale(1.1);
+            border: 2px solid #0ea5e9;
+        }
+        .entry-content {
+            min-height: 200px;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #7dd3fc;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #0ea5e9;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-primary-50 to-secondary-50 min-h-screen p-4">
+    <!-- App Container -->
+    <div id="app-container" class="max-w-6xl mx-auto">
+        <!-- Sign In Section (shown by default) -->
+        <div id="signin-section" class="flex items-center justify-center min-h-screen">
+            <div class="w-full max-w-md">
+                <!-- Sign In Card -->
+                <div class="bg-white rounded-xl card p-8 fade-in">
+                    <!-- Welcome Header -->
+                    <div class="text-center mb-8">
+                        <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-book-open text-primary-600 text-2xl"></i>
+                        </div>
+                        <h1 class="text-3xl font-bold text-gray-800">Hello Mum!</h1>
+                        <p class="text-gray-600 mt-2">Welcome to your enhanced personal diary</p>
+                    </div>
+                    <!-- Sign In Form -->
+                    <form id="signin-form" class="space-y-6">
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                            <input type="text" id="name" name="name" required
+                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                                placeholder="Enter your name">
+                        </div>
+                        <div>
+                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                            <div class="relative">
+                                <input type="password" id="password" name="password" required
+                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                                    placeholder="Enter your password">
+                                <button type="button" id="toggle-password" class="absolute right-3 top-2.5 text-gray-500 hover:text-primary-600">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center">
+                                <input id="remember-me" name="remember-me" type="checkbox"
+                                    class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+                                <label for="remember-me" class="ml-2 block text-sm text-gray-700">
+                                    Remember me
+                                </label>
+                            </div>
+                            <div class="text-sm">
+                                <a href="#" class="font-medium text-primary-600 hover:text-primary-500">
+                                    Forgot password?
+                                </a>
+                            </div>
+                        </div>
+                        <div>
+                            <button type="submit"
+                                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200">
+                                <i class="fas fa-sign-in-alt mr-2"></i> Sign in
+                            </button>
+                        </div>
+                    </form>
+                    <!-- Success Message (Hidden by default) -->
+                    <div id="welcome-message" class="hidden mt-6 p-4 bg-green-50 rounded-lg text-center">
+                        <i class="fas fa-heart text-green-500 text-2xl mb-2"></i>
+                        <p class="text-green-800 font-medium">Welcome back Mum! Hope this helps ❤️</p>
+                    </div>
+                </div>
+                <!-- Footer -->
+                <div class="text-center mt-6 text-sm text-gray-500">
+                    <p>© <span id="current-year"></span> Enhanced Personal Diary. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+        <!-- Diary Section (hidden by default) -->
+        <div id="diary-section" class="hidden min-h-screen">
+            <!-- Diary Header -->
+            <header class="py-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                <div>
+                    <h1 class="text-3xl font-bold text-primary-600 flex items-center">
+                        <i class="fas fa-book mr-3"></i>
+                        <span>Mum's Enhanced Diary</span>
+                    </h1>
+                    <p class="text-gray-600">Your private thoughts, memories, and more</p>
+                </div>
+                <div class="flex flex-wrap gap-3">
+                    <button id="new-entry-btn" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center transition-colors duration-200">
+                        <i class="fas fa-plus mr-2"></i> New Entry
+                    </button>
+                    <button id="backup-btn" class="px-4 py-2 bg-secondary-600 text-white rounded-lg hover:bg-secondary-700 flex items-center transition-colors duration-200">
+                        <i class="fas fa-download mr-2"></i> Backup
+                    </button>
+                    <button id="restore-btn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center transition-colors duration-200">
+                        <i class="fas fa-upload mr-2"></i> Restore
+                    </button>
+                    <button id="maintenance-btn" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 flex items-center transition-colors duration-200">
+                        <i class="fas fa-tools mr-2"></i> Maintenance
+                    </button>
+                    <button id="sign-out-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100 flex items-center transition-colors duration-200">
+                        <i class="fas fa-sign-out-alt mr-2"></i> Sign Out
+                    </button>
+                </div>
+            </header>
+            <!-- Stats and Current Date -->
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
+                <div class="text-lg font-medium text-gray-700 flex items-center">
+                    <i class="far fa-calendar-alt mr-2 text-primary-500"></i>
+                    <span id="current-date"></span>
+                </div>
+                <div class="flex flex-wrap gap-4">
+                    <div class="bg-white px-4 py-2 rounded-lg shadow-sm flex items-center">
+                        <i class="fas fa-book-open text-primary-500 mr-2"></i>
+                        <span class="text-sm font-medium">
+                            <span id="total-entries">0</span> entries
+                        </span>
+                    </div>
+                    <div class="bg-white px-4 py-2 rounded-lg shadow-sm flex items-center">
+                        <i class="fas fa-star text-yellow-500 mr-2"></i>
+                        <span class="text-sm font-medium">
+                            <span id="favorite-entries">0</span> favorites
+                        </span>
+                    </div>
+                    <div class="bg-white px-4 py-2 rounded-lg shadow-sm flex items-center">
+                        <i class="fas fa-tag text-secondary-500 mr-2"></i>
+                        <span class="text-sm font-medium">
+                            <span id="total-tags">0</span> tags
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <!-- Search and Filter -->
+            <div class="bg-white p-4 rounded-xl shadow-sm mb-6">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex-1 relative">
+                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                        <input type="text" id="search-entries" placeholder="Search entries..."
+                            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                    </div>
+                    <select id="filter-tags" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                        <option value="">All Tags</option>
+                        <!-- Tags will be added here by JavaScript -->
+                    </select>
+                    <select id="filter-mood" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                        <option value="">All Moods</option>
+                        <option value="happy">Happy</option>
+                        <option value="sad">Sad</option>
+                        <option value="excited">Excited</option>
+                        <option value="calm">Calm</option>
+                        <option value="angry">Angry</option>
+                    </select>
+                    <button id="clear-filters" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100">
+                        <i class="fas fa-times mr-1"></i> Clear
+                    </button>
+                </div>
+            </div>
+            <!-- Diary Entries Container -->
+            <div id="entries-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                <!-- Sample entries will be added here by JavaScript -->
+            </div>
+            <!-- New Entry Modal (hidden by default) -->
+            <div id="entry-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
+                <div class="bg-white rounded-xl w-full max-w-2xl p-6 max-h-[90vh] overflow-y-auto">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold text-gray-800" id="modal-title">New Diary Entry</h3>
+                        <button id="close-modal-btn" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <form id="entry-form">
+                        <input type="hidden" id="entry-id">
+                        <div class="mb-4">
+                            <label for="entry-title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
+                            <input type="text" id="entry-title" required
+                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                                placeholder="Entry title">
+                        </div>
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Mood</label>
+                            <div class="mood-selector flex justify-between mt-2">
+                                <input type="radio" id="mood-happy" name="mood" value="happy">
+                                <label for="mood-happy" class="cursor-pointer p-2 rounded-full bg-yellow-100 text-yellow-600 hover:bg-yellow-200 transition-colors duration-200" title="Happy">
+                                    <i class="fas fa-smile text-2xl"></i>
+                                </label>
+                                <input type="radio" id="mood-sad" name="mood" value="sad">
+                                <label for="mood-sad" class="cursor-pointer p-2 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors duration-200" title="Sad">
+                                    <i class="fas fa-sad-tear text-2xl"></i>
+                                </label>
+                                <input type="radio" id="mood-excited" name="mood" value="excited">
+                                <label for="mood-excited" class="cursor-pointer p-2 rounded-full bg-green-100 text-green-600 hover:bg-green-200 transition-colors duration-200" title="Excited">
+                                    <i class="fas fa-grin-stars text-2xl"></i>
+                                </label>
+                                <input type="radio" id="mood-calm" name="mood" value="calm">
+                                <label for="mood-calm" class="cursor-pointer p-2 rounded-full bg-purple-100 text-purple-600 hover:bg-purple-200 transition-colors duration-200" title="Calm">
+                                    <i class="fas fa-spa text-2xl"></i>
+                                </label>
+                                <input type="radio" id="mood-angry" name="mood" value="angry">
+                                <label for="mood-angry" class="cursor-pointer p-2 rounded-full bg-red-100 text-red-600 hover:bg-red-200 transition-colors duration-200" title="Angry">
+                                    <i class="fas fa-angry text-2xl"></i>
+                                </label>
+                                <input type="radio" id="mood-neutral" name="mood" value="neutral" checked>
+                                <label for="mood-neutral" class="cursor-pointer p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200" title="Neutral">
+                                    <i class="fas fa-meh text-2xl"></i>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="mb-4">
+                            <label for="entry-tags" class="block text-sm font-medium text-gray-700 mb-1">Tags (comma separated)</label>
+                            <input type="text" id="entry-tags"
+                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                                placeholder="family, gardening, travel">
+                        </div>
+                        <div class="mb-4">
+                            <label for="entry-content" class="block text-sm font-medium text-gray-700 mb-1">Content</label>
+                            <textarea id="entry-content" rows="8" required
+                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 entry-content"
+                                placeholder="Write your thoughts here..."></textarea>
+                        </div>
+                        <div class="flex items-center mb-4">
+                            <input type="checkbox" id="entry-favorite" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+                            <label for="entry-favorite" class="ml-2 block text-sm text-gray-700">
+                                Mark as favorite
+                            </label>
+                        </div>
+                        <div class="flex justify-end space-x-3">
+                            <button type="button" id="cancel-entry-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors duration-200">
+                                Cancel
+                            </button>
+                            <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
+                                Save Entry
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- Maintenance Modal (hidden by default) -->
+            <div id="maintenance-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
+                <div class="bg-white rounded-xl w-full max-w-md p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold text-gray-800">Diary Maintenance</h3>
+                        <button id="close-maintenance-btn" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="p-4 border border-gray-200 rounded-lg">
+                            <h4 class="font-medium text-gray-800 mb-2">Export & Import</h4>
+                            <div class="flex flex-wrap gap-2">
+                                <button id="export-json" class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 text-sm">
+                                    <i class="fas fa-file-export mr-1"></i> Export JSON
+                                </button>
+                                <button id="import-json" class="px-3 py-1.5 bg-green-100 text-green-700 rounded hover:bg-green-200 text-sm">
+                                    <i class="fas fa-file-import mr-1"></i> Import JSON
+                                </button>
+                                <button id="export-csv" class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 text-sm">
+                                    <i class="fas fa-file-csv mr-1"></i> Export CSV
+                                </button>
+                            </div>
+                        </div>
+                        <div class="p-4 border border-gray-200 rounded-lg">
+                            <h4 class="font-medium text-gray-800 mb-2">Data Management</h4>
+                            <div class="flex flex-wrap gap-2">
+                                <button id="clear-data" class="px-3 py-1.5 bg-red-100 text-red-700 rounded hover:bg-red-200 text-sm">
+                                    <i class="fas fa-trash mr-1"></i> Clear All Data
+                                </button>
+                                <button id="reset-demo" class="px-3 py-1.5 bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 text-sm">
+                                    <i class="fas fa-redo mr-1"></i> Reset Demo Data
+                                </button>
+                            </div>
+                        </div>
+                        <div class="p-4 border border-gray-200 rounded-lg">
+                            <h4 class="font-medium text-gray-800 mb-2">Statistics</h4>
+                            <div class="grid grid-cols-2 gap-2 text-sm">
+                                <div class="bg-gray-50 p-2 rounded">
+                                    <div class="text-gray-500">Total Entries</div>
+                                    <div class="font-medium" id="stats-total">0</div>
+                                </div>
+                                <div class="bg-gray-50 p-2 rounded">
+                                    <div class="text-gray-500">Favorites</div>
+                                    <div class="font-medium" id="stats-favorites">0</div>
+                                </div>
+                                <div class="bg-gray-50 p-2 rounded">
+                                    <div class="text-gray-500">Tags</div>
+                                    <div class="font-medium" id="stats-tags">0</div>
+                                </div>
+                                <div class="bg-gray-50 p-2 rounded">
+                                    <div class="text-gray-500">Oldest Entry</div>
+                                    <div class="font-medium" id="stats-oldest">-</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Backup/Restore Modal (hidden by default) -->
+            <div id="backup-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
+                <div class="bg-white rounded-xl w-full max-w-md p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold text-gray-800" id="backup-modal-title">Backup Data</h3>
+                        <button id="close-backup-btn" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div id="backup-content" class="space-y-4">
+                        <div class="p-4 bg-blue-50 rounded-lg">
+                            <h4 class="font-medium text-blue-800 mb-2">Create Backup</h4>
+                            <p class="text-sm text-blue-600 mb-3">Save all your diary entries to a file</p>
+                            <button id="create-backup" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                                <i class="fas fa-download mr-2"></i> Download Backup
+                            </button>
+                        </div>
+                        <div class="p-4 bg-green-50 rounded-lg">
+                            <h4 class="font-medium text-green-800 mb-2">Restore Backup</h4>
+                            <p class="text-sm text-green-600 mb-3">Upload a previously saved backup file</p>
+                            <input type="file" id="restore-file" class="hidden" accept=".json">
+                            <label for="restore-file" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center justify-center cursor-pointer">
+                                <i class="fas fa-upload mr-2"></i> Choose Backup File
+                            </label>
+                            <div id="restore-filename" class="text-sm text-gray-500 mt-2 text-center hidden"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Set current year
+        document.getElementById('current-year').textContent = new Date().getFullYear();
+        // Format current date
+        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+        document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', options);
+        // Sample diary entries data with enhanced features
+        let entries = [
+            {
+                id: 1,
+                title: "Family Dinner",
+                content: "Had a wonderful dinner with the family today. Everyone was in such good spirits and the food was delicious! We talked about our upcoming vacation plans and shared funny stories from when the kids were little.",
+                date: "May 15, 2023",
+                mood: "happy",
+                tags: ["family", "dinner", "memories"],
+                favorite: true
+            },
+            {
+                id: 2,
+                title: "Garden Update",
+                content: "Planted new roses in the garden today. The weather was perfect for gardening - not too hot with a gentle breeze. I chose a mix of hybrid tea roses and floribundas. Can't wait to see them bloom in a few weeks! Also planted some lavender near the patio for that lovely scent in the evenings.",
+                date: "May 10, 2023",
+                mood: "calm",
+                tags: ["gardening", "outdoors", "hobbies"],
+                favorite: false
+            },
+            {
+                id: 3,
+                title: "Weekend Plans",
+                content: "Planning a small getaway for the weekend. Thinking about visiting the coast for some fresh sea air. Found a cute little bed and breakfast that looks perfect - right on the cliffs with amazing ocean views. Need to pack warm clothes though as it can get breezy by the water.",
+                date: "May 5, 2023",
+                mood: "excited",
+                tags: ["travel", "weekend", "plans"],
+                favorite: true
+            }
+        ];
+        // DOM Elements
+        const signinSection = document.getElementById('signin-section');
+        const diarySection = document.getElementById('diary-section');
+        const entriesContainer = document.getElementById('entries-container');
+        const entryModal = document.getElementById('entry-modal');
+        const entryForm = document.getElementById('entry-form');
+        const newEntryBtn = document.getElementById('new-entry-btn');
+        const closeModalBtn = document.getElementById('close-modal-btn');
+        const cancelEntryBtn = document.getElementById('cancel-entry-btn');
+        const signOutBtn = document.getElementById('sign-out-btn');
+        const maintenanceBtn = document.getElementById('maintenance-btn');
+        const maintenanceModal = document.getElementById('maintenance-modal');
+        const closeMaintenanceBtn = document.getElementById('close-maintenance-btn');
+        const backupBtn = document.getElementById('backup-btn');
+        const restoreBtn = document.getElementById('restore-btn');
+        const backupModal = document.getElementById('backup-modal');
+        const closeBackupBtn = document.getElementById('close-backup-btn');
+        const searchInput = document.getElementById('search-entries');
+        const filterTags = document.getElementById('filter-tags');
+        const filterMood = document.getElementById('filter-mood');
+        const clearFilters = document.getElementById('clear-filters');
+        // Toggle password visibility
+        document.getElementById('toggle-password').addEventListener('click', function() {
+            const passwordInput = document.getElementById('password');
+            const icon = this.querySelector('i');
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                icon.classList.replace('fa-eye', 'fa-eye-slash');
+            } else {
+                passwordInput.type = 'password';
+                icon.classList.replace('fa-eye-slash', 'fa-eye');
+            }
+        });
+        // Handle form submission
+        document.getElementById('signin-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const name = document.getElementById('name').value.trim();
+            const password = document.getElementById('password').value;
+            // Check credentials (Name: Mum, Password: Reardon)
+            if (name === 'Mum' && password === 'Reardon') {
+                // Show welcome message
+                document.getElementById('welcome-message').classList.remove('hidden');
+                // Hide form
+                document.getElementById('signin-form').classList.add('hidden');
+                // After 1.5 seconds, show diary section
+                setTimeout(() => {
+                    signinSection.classList.add('hidden');
+                    diarySection.classList.remove('hidden');
+                    renderEntries();
+                    updateStats();
+                }, 1500);
+            } else {
+                alert('Incorrect name or password. Please try again.');
+            }
+        });
+        // Render diary entries with enhanced features
+        function renderEntries(filteredEntries = null) {
+            const entriesToRender = filteredEntries || entries;
+            entriesContainer.innerHTML = '';
+            if (entriesToRender.length === 0) {
+                entriesContainer.innerHTML = `
+                    <div class="col-span-full text-center py-12">
+                        <i class="fas fa-book-open text-gray-300 text-5xl mb-4"></i>
+                        <p class="text-gray-500">No entries found. Click "New Entry" to get started!</p>
+                    </div>
+                `;
+                updateStats();
+                return;
+            }
+            entriesToRender.forEach(entry => {
+                const moodIcons = {
+                    happy: 'fa-smile text-yellow-500',
+                    sad: 'fa-sad-tear text-blue-500',
+                    excited: 'fa-grin-stars text-green-500',
+                    calm: 'fa-spa text-purple-500',
+                    angry: 'fa-angry text-red-500',
+                    neutral: 'fa-meh text-gray-500'
+                };
+                const moodIcon = moodIcons[entry.mood] || moodIcons['neutral'];
+                const entryElement = document.createElement('div');
+                entryElement.className = `bg-white rounded-xl p-6 diary-entry cursor-pointer ${entry.favorite ? 'border-l-4 border-yellow-400' : ''}`;
+                entryElement.innerHTML = `
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="text-xl font-bold text-primary-600">${entry.title}</h3>
+                        ${entry.favorite ? '<i class="fas fa-star text-yellow-400"></i>' : ''}
+                    </div>
+                    <div class="flex items-center text-sm text-gray-500 mb-3">
+                        <i class="far fa-calendar-alt mr-1"></i>
+                        <span class="mr-3">${entry.date}</span>
+                        <i class="fas ${moodIcon} mr-1"></i>
+                        <span class="capitalize">${entry.mood}</span>
+                    </div>
+                    <p class="text-gray-700 mb-4 line-clamp-3">${entry.content}</p>
+                    <div class="flex flex-wrap gap-1 mb-4">
+                        ${entry.tags ? entry.tags.map(tag => `
+                            <span class="px-2 py-1 bg-secondary-100 text-secondary-700 text-xs rounded-full">${tag}</span>
+                        `).join('') : ''}
+                    </div>
+                    <div class="flex justify-between items-center text-sm">
+                        <button class="text-primary-600 hover:text-primary-800 edit-entry" data-id="${entry.id}">
+                            <i class="fas fa-edit mr-1"></i> Edit
+                        </button>
+                        <button class="text-red-600 hover:text-red-800 delete-entry" data-id="${entry.id}">
+                            <i class="fas fa-trash-alt mr-1"></i> Delete
+                        </button>
+                    </div>
+                `;
+                entriesContainer.appendChild(entryElement);
+                // Add click event to view full entry
+                entryElement.addEventListener('click', (e) => {
+                    if (!e.target.closest('button')) {
+                        viewEntry(entry.id);
+                    }
+                });
+            });
+            // Update tag filter options
+            updateTagFilter();
+            // Update stats
+            updateStats();
+            // Add event listeners to edit and delete buttons
+            document.querySelectorAll('.edit-entry').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    editEntry(parseInt(e.target.dataset.id || e.target.closest('button').dataset.id));
+                });
+            });
+            document.querySelectorAll('.delete-entry').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    deleteEntry(parseInt(e.target.dataset.id || e.target.closest('button').dataset.id));
+                });
+            });
+        }
+        // Update tag filter dropdown
+        function updateTagFilter() {
+            filterTags.innerHTML = '<option value="">All Tags</option>';
+            // Get all unique tags
+            const allTags = new Set();
+            entries.forEach(entry => {
+                if (entry.tags) {
+                    entry.tags.forEach(tag => allTags.add(tag));
+                }
+            });
+            // Add tags to filter
+            Array.from(allTags).sort().forEach(tag => {
+                const option = document.createElement('option');
+                option.value = tag;
+                option.textContent = tag;
+                filterTags.appendChild(option);
+            });
+        }
+        // Update statistics
+        function updateStats() {
+            document.getElementById('total-entries').textContent = entries.length;
+            // Count favorites
+            const favoriteCount = entries.filter(e => e.favorite).length;
+            document.getElementById('favorite-entries').textContent = favoriteCount;
+            // Count unique tags
+            const allTags = new Set();
+            entries.forEach(entry => {
+                if (entry.tags) {
+                    entry.tags.forEach(tag => allTags.add(tag));
+                }
+            });
+            document.getElementById('total-tags').textContent = allTags.size;
+            // Update maintenance stats
+            document.getElementById('stats-total').textContent = entries.length;
+            document.getElementById('stats-favorites').textContent = favoriteCount;
+            document.getElementById('stats-tags').textContent = allTags.size;
+            // Find oldest entry
+            if (entries.length > 0) {
+                const oldestEntry = entries.reduce((oldest, current) => {
+                    return new Date(oldest.date) < new Date(current.date) ? oldest : current;
+                });
+                document.getElementById('stats-oldest').textContent = oldestEntry.date;
+            } else {
+                document.getElementById('stats-oldest').textContent = '-';
+            }
+        }
+        // View full entry
+        function viewEntry(id) {
+            const entry = entries.find(e => e.id === id);
+            if (entry) {
+                document.getElementById('modal-title').textContent = entry.title;
+                document.getElementById('entry-title').value = entry.title;
+                document.getElementById('entry-content').value = entry.content;
+                document.getElementById('entry-id').value = entry.id;
+                document.getElementById('entry-tags').value = entry.tags ? entry.tags.join(', ') : '';
+                // Set mood
+                if (entry.mood) {
+                    document.getElementById(`mood-${entry.mood}`).checked = true;
+                } else {
+                    document.getElementById('mood-neutral').checked = true;
+                }
+                // Set favorite
+                document.getElementById('entry-favorite').checked = entry.favorite || false;
+                // Disable form fields for viewing
+                document.getElementById('entry-title').readOnly = true;
+                document.getElementById('entry-content').readOnly = true;
+                document.getElementById('entry-tags').readOnly = true;
+                document.getElementById('entry-favorite').disabled = true;
+                document.querySelectorAll('.mood-selector input').forEach(radio => {
+                    radio.disabled = true;
+                });
+                document.getElementById('entry-form').querySelector('button[type="submit"]').classList.add('hidden');
+                document.getElementById('cancel-entry-btn').textContent = 'Close';
+                entryModal.classList.remove('hidden');
+            }
+        }
+        // Edit entry
+        function editEntry(id) {
+            const entry = entries.find(e => e.id === id);
+            if (entry) {
+                document.getElementById('modal-title').textContent = 'Edit Entry';
+                document.getElementById('entry-title').value = entry.title;
+                document.getElementById('entry-content').value = entry.content;
+                document.getElementById('entry-id').value = entry.id;
+                document.getElementById('entry-tags').value = entry.tags ? entry.tags.join(', ') : '';
+                // Set mood
+                if (entry.mood) {
+                    document.getElementById(`mood-${entry.mood}`).checked = true;
+                } else {
+                    document.getElementById('mood-neutral').checked = true;
+                }
+                // Set favorite
+                document.getElementById('entry-favorite').checked = entry.favorite || false;
+                // Enable form fields for editing
+                document.getElementById('entry-title').readOnly = false;
+                document.getElementById('entry-content').readOnly = false;
+                document.getElementById('entry-tags').readOnly = false;
+                document.getElementById('entry-favorite').disabled = false;
+                document.querySelectorAll('.mood-selector input').forEach(radio => {
+                    radio.disabled = false;
+                });
+                document.getElementById('entry-form').querySelector('button[type="submit"]').classList.remove('hidden');
+                document.getElementById('cancel-entry-btn').textContent = 'Cancel';
+                entryModal.classList.remove('hidden');
+            }
+        }
+        // Delete entry
+        function deleteEntry(id) {
+            if (confirm('Are you sure you want to delete this entry?')) {
+                entries = entries.filter(e => e.id !== id);
+                renderEntries();
+            }
+        }
+        // New entry
+        newEntryBtn.addEventListener('click', () => {
+            document.getElementById('modal-title').textContent = 'New Diary Entry';
+            document.getElementById('entry-title').value = '';
+            document.getElementById('entry-content').value = '';
+            document.getElementById('entry-tags').value = '';
+            document.getElementById('entry-id').value = '';
+            document.getElementById('mood-neutral').checked = true;
+            document.getElementById('entry-favorite').checked = false;
+            // Enable form fields
+            document.getElementById('entry-title').readOnly = false;
+            document.getElementById('entry-content').readOnly = false;
+            document.getElementById('entry-tags').readOnly = false;
+            document.getElementById('entry-favorite').disabled = false;
+            document.querySelectorAll('.mood-selector input').forEach(radio => {
+                radio.disabled = false;
+            });
+            document.getElementById('entry-form').querySelector('button[type="submit"]').classList.remove('hidden');
+            document.getElementById('cancel-entry-btn').textContent = 'Cancel';
+            entryModal.classList.remove('hidden');
+        });
+        // Close modal
+        function closeModal() {
+            entryModal.classList.add('hidden');
+        }
+        closeModalBtn.addEventListener('click', closeModal);
+        cancelEntryBtn.addEventListener('click', closeModal);
+        // Handle entry form submission
+        entryForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const id = document.getElementById('entry-id').value;
+            const title = document.getElementById('entry-title').value.trim();
+            const content = document.getElementById('entry-content').value.trim();
+            const tags = document.getElementById('entry-tags').value.trim();
+            const mood = document.querySelector('input[name="mood"]:checked').value;
+            const favorite = document.getElementById('entry-favorite').checked;
+            const date = new Date().toLocaleDateString('en-US', options);
+            const tagArray = tags ? tags.split(',').map(tag => tag.trim()).filter(tag => tag) : [];
+            if (id) {
+                // Update existing entry
+                const index = entries.findIndex(e => e.id === parseInt(id));
+                if (index !== -1) {
+                    entries[index] = {
+                        ...entries[index],
+                        title,
+                        content,
+                        tags: tagArray,
+                        mood,
+                        favorite,
+                        date
+                    };
+                }
+            } else {
+                // Create new entry
+                const newId = entries.length > 0 ? Math.max(...entries.map(e => e.id)) + 1 : 1;
+                entries.unshift({
+                    id: newId,
+                    title,
+                    content,
+                    tags: tagArray,
+                    mood,
+                    favorite,
+                    date
+                });
+            }
+            renderEntries();
+            closeModal();
+        });
+        // Sign out
+        signOutBtn.addEventListener('click', () => {
+            if (confirm('Are you sure you want to sign out?')) {
+                diarySection.classList.add('hidden');
+                signinSection.classList.remove('hidden');
+                document.getElementById('signin-form').classList.remove('hidden');
+                document.getElementById('welcome-message').classList.add('hidden');
+                document.getElementById('name').value = '';
+                document.getElementById('password').value = '';
+            }
+        });
+        // Open maintenance modal
+        maintenanceBtn.addEventListener('click', () => {
+            maintenanceModal.classList.remove('hidden');
+        });
+        // Close maintenance modal
+        closeMaintenanceBtn.addEventListener('click', () => {
+            maintenanceModal.classList.add('hidden');
+        });
+        // Open backup modal
+        backupBtn.addEventListener('click', () => {
+            document.getElementById('backup-modal-title').textContent = 'Backup Data';
+            backupModal.classList.remove('hidden');
+        });
+        // Open restore modal
+        restoreBtn.addEventListener('click', () => {
+            document.getElementById('backup-modal-title').textContent = 'Restore Data';
+            backupModal.classList.remove('hidden');
+        });
+        // Close backup modal
+        closeBackupBtn.addEventListener('click', () => {
+            backupModal.classList.add('hidden');
+            document.getElementById('restore-filename').classList.add('hidden');
+        });
+        // Create backup (export JSON)
+        document.getElementById('create-backup').addEventListener('click', () => {
+            const dataStr = JSON.stringify(entries, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+            const exportFileDefaultName = `mum-diary-backup-${new Date().toISOString().split('T')[0]}.json`;
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', exportFileDefaultName);
+            linkElement.click();
+        });
+        // Handle restore file selection
+        document.getElementById('restore-file').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (!file) return;
+            document.getElementById('restore-filename').textContent = `Selected: ${file.name}`;
+            document.getElementById('restore-filename').classList.remove('hidden');
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                try {
+                    const jsonData = JSON.parse(e.target.result);
+                    if (Array.isArray(jsonData)) {
+                        if (confirm('This will replace all current entries. Are you sure?')) {
+                            entries = jsonData;
+                            renderEntries();
+                            backupModal.classList.add('hidden');
+                            document.getElementById('restore-filename').classList.add('hidden');
+                            // Show success message
+                            const successMsg = document.createElement('div');
+                            successMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
+                            successMsg.innerHTML = `
+                                <div class="flex items-center">
+                                    <i class="fas fa-check-circle mr-2"></i>
+                                    <span>Successfully restored ${jsonData.length} entries!</span>
+                                </div>
+                            `;
+                            document.body.appendChild(successMsg);
+                            setTimeout(() => {
+                                successMsg.remove();
+                            }, 3000);
+                        }
+                    } else {
+                        alert('Invalid backup file format. The file should contain an array of diary entries.');
+                    }
+                } catch (error) {
+                    alert('Error reading backup file: ' + error.message);
+                }
+            };
+            reader.readAsText(file);
+        });
+        // Export JSON from maintenance
+        document.getElementById('export-json').addEventListener('click', function() {
+            const dataStr = JSON.stringify(entries, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+            const exportFileDefaultName = `mum-diary-export-${new Date().toISOString().split('T')[0]}.json`;
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', exportFileDefaultName);
+            linkElement.click();
+        });
+        // Import JSON from maintenance
+        document.getElementById('import-json').addEventListener('click', function() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = '.json';
+            input.onchange = e => {
+                const file = e.target.files[0];
+                if (!file) return;
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    try {
+                        const jsonData = JSON.parse(e.target.result);
+                        if (Array.isArray(jsonData)) {
+                            if (confirm('This will replace all current entries. Are you sure?')) {
+                                entries = jsonData;
+                                renderEntries();
+                                maintenanceModal.classList.add('hidden');
+                                // Show success message
+                                const successMsg = document.createElement('div');
+                                successMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
+                                successMsg.innerHTML = `
+                                    <div class="flex items-center">
+                                        <i class="fas fa-check-circle mr-2"></i>
+                                        <span>Successfully imported ${jsonData.length} entries!</span>
+                                    </div>
+                                `;
+                                document.body.appendChild(successMsg);
+                                setTimeout(() => {
+                                    successMsg.remove();
+                                }, 3000);
+                            }
+                        } else {
+                            alert('Invalid import file format. The file should contain an array of diary entries.');
+                        }
+                    } catch (error) {
+                        alert('Error reading import file: ' + error.message);
+                    }
+                };
+                reader.readAsText(file);
+            };
+            input.click();
+        });
+        // Export CSV from maintenance
+        document.getElementById('export-csv').addEventListener('click', function() {
+            let csvContent = "data:text/csv;charset=utf-8,";
+            // Add headers
+            csvContent += "ID,Title,Content,Date,Mood,Tags,Favorite\n";
+            // Add data
+            entries.forEach(entry => {
+                const row = [
+                    entry.id,
+                    `"${entry.title.replace(/"/g, '""')}"`,
+                    `"${entry.content.replace(/"/g, '""')}"`,
+                    entry.date,
+                    entry.mood || '',
+                    entry.tags ? entry.tags.join(';') : '',
+                    entry.favorite ? 'Yes' : 'No'
+                ];
+                csvContent += row.join(",") + "\n";
+            });
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", `mum-diary-export-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+        // Clear all data
+        document.getElementById('clear-data').addEventListener('click', function() {
+            if (confirm('This will permanently delete ALL entries. Are you absolutely sure?')) {
+                entries = [];
+                renderEntries();
+                maintenanceModal.classList.add('hidden');
+                // Show success message
+                const successMsg = document.createElement('div');
+                successMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
+                successMsg.innerHTML = `
+                    <div class="flex items-center">
+                        <i class="fas fa-check-circle mr-2"></i>
+                        <span>All entries have been cleared!</span>
+                    </div>
+                `;
+                document.body.appendChild(successMsg);
+                setTimeout(() => {
+                    successMsg.remove();
+                }, 3000);
+            }
+        });
+        // Reset demo data
+        document.getElementById('reset-demo').addEventListener('click', function() {
+            if (confirm('This will replace all current entries with demo data. Continue?')) {
+                entries = [
+                    {
+                        id: 1,
+                        title: "Family Dinner",
+                        content: "Had a wonderful dinner with the family today. Everyone was in such good spirits and the food was delicious! We talked about our upcoming vacation plans and shared funny stories from when the kids were little.",
+                        date: "May 15, 2023",
+                        mood: "happy",
+                        tags: ["family", "dinner", "memories"],
+                        favorite: true
+                    },
+                    {
+                        id: 2,
+                        title: "Garden Update",
+                        content: "Planted new roses in the garden today. The weather was perfect for gardening - not too hot with a gentle breeze. I chose a mix of hybrid tea roses and floribundas. Can't wait to see them bloom in a few weeks! Also planted some lavender near the patio for that lovely scent in the evenings.",
+                        date: "May 10, 2023",
+                        mood: "calm",
+                        tags: ["gardening", "outdoors", "hobbies"],
+                        favorite: false
+                    },
+                    {
+                        id: 3,
+                        title: "Weekend Plans",
+                        content: "Planning a small getaway for the weekend. Thinking about visiting the coast for some fresh sea air. Found a cute little bed and breakfast that looks perfect - right on the cliffs with amazing ocean views. Need to pack warm clothes though as it can get breezy by the water.",
+                        date: "May 5, 2023",
+                        mood: "excited",
+                        tags: ["travel", "weekend", "plans"],
+                        favorite: true
+                    }
+                ];
+                renderEntries();
+                maintenanceModal.classList.add('hidden');
+                // Show success message
+                const successMsg = document.createElement('div');
+                successMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
+                successMsg.innerHTML = `
+                    <div class="flex items-center">
+                        <i class="fas fa-check-circle mr-2"></i>
+                        <span>Demo data has been reset!</span>
+                    </div>
+                `;
+                document.body.appendChild(successMsg);
+                setTimeout(() => {
+                    successMsg.remove();
+                }, 3000);
+            }
+        });
+        // Search functionality
+        searchInput.addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            if (searchTerm.trim() === '') {
+                renderEntries();
+                return;
+            }
+            const filteredEntries = entries.filter(entry => {
+                return (
+                    entry.title.toLowerCase().includes(searchTerm) ||
+                    entry.content.toLowerCase().includes(searchTerm) ||
+                    (entry.tags && entry.tags.some(tag => tag.toLowerCase().includes(searchTerm)))
+                );
+            });
+            renderEntries(filteredEntries);
+        });
+        // Filter by tag
+        filterTags.addEventListener('change', function() {
+            const selectedTag = this.value;
+            if (!selectedTag) {
+                renderEntries();
+                return;
+            }
+            const filteredEntries = entries.filter(entry => {
+                return entry.tags && entry.tags.includes(selectedTag);
+            });
+            renderEntries(filteredEntries);
+        });
+        // Filter by mood
+        filterMood.addEventListener('change', function() {
+            const selectedMood = this.value;
+            if (!selectedMood) {
+                renderEntries();
+                return;
+            }
+            const filteredEntries = entries.filter(entry => {
+                return entry.mood === selectedMood;
+            });
+            renderEntries(filteredEntries);
+        });
+        // Clear all filters
+        clearFilters.addEventListener('click', function() {
+            searchInput.value = '';
+            filterTags.value = '';
+            filterMood.value = '';
+            renderEntries();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aworkimmersive/mum" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+Add tailwind design and shadCN to this code, improve where possible and use best practice ' <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Personal Diary Application</title>     <script src="https://cdn.tailwindcss.com"></script>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">     <style>         .fade-in {             animation: fadeIn 0.3s ease-in-out;         }                  @keyframes fadeIn {             from { opacity: 0; transform: translateY(10px); }             to { opacity: 1; transform: translateY(0); }         }                  .slide-in {             animation: slideIn 0.3s ease-out;         }                  @keyframes slideIn {             from { transform: translateX(100%); }             to { transform: translateX(0); }         }                  .pulse {             animation: pulse 2s infinite;         }                  @keyframes pulse {             0% { transform: scale(1); }             50% { transform: scale(1.05); }             100% { transform: scale(1); }         }                  .entry-card {             transition: all 0.3s ease;         }                  .entry-card:hover {             transform: translateY(-3px);             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);         }                  /* Custom scrollbar */         .custom-scrollbar::-webkit-scrollbar {             width: 6px;         }                  .custom-scrollbar::-webkit-scrollbar-track {             background: #f1f1f1;             border-radius: 10px;         }                  .custom-scrollbar::-webkit-scrollbar-thumb {             background: #888;             border-radius: 10px;         }                  .custom-scrollbar::-webkit-scrollbar-thumb:hover {             background: #555;         }     </style> </head> <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen">     <div class="container mx-auto px-4 py-8 max-w-6xl">         <!-- Header -->         <header class="text-center mb-10">             <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-3">                 <i class="fas fa-book-open mr-2"></i>Personal Diary             </h1>             <p class="text-lg text-gray-600">Track and manage important aspects of your daily life</p>         </header>          <!-- Main Content -->         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">             <!-- Left Sidebar -->             <div class="lg:col-span-1 space-y-6">                 <!-- Topic Selection -->                 <div class="bg-white rounded-xl shadow-md p-5">                     <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">                         <i class="fas fa-folder-open mr-2 text-indigo-600"></i>Select Topic                     </h2>                     <div class="space-y-3" id="topic-buttons">                         <!-- Topics will be added here by JavaScript -->                     </div>                 </div>                  <!-- Quick Stats -->                 <div class="bg-white rounded-xl shadow-md p-5">                     <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">                         <i class="fas fa-chart-pie mr-2 text-indigo-600"></i>Quick Stats                     </h2>                     <div class="grid grid-cols-2 gap-3" id="stats-container">                         <div class="bg-blue-50 p-3 rounded-lg text-center">                             <div class="text-2xl font-bold text-blue-600" id="total-entries">0</div>                             <div class="text-xs text-gray-600">Total Entries</div>                         </div>                         <div class="bg-purple-50 p-3 rounded-lg text-center">                             <div class="text-2xl font-bold text-purple-600" id="high-priority">0</div>                             <div class="text-xs text-gray-600">High Priority</div>                         </div>                         <div class="bg-green-50 p-3 rounded-lg text-center">                             <div class="text-2xl font-bold text-green-600" id="upcoming">0</div>                             <div class="text-xs text-gray-600">Upcoming</div>                         </div>                         <div class="bg-yellow-50 p-3 rounded-lg text-center">                             <div class="text-2xl font-bold text-yellow-600" id="notifications-count">0</div>                             <div class="text-xs text-gray-600">Alerts</div>                         </div>                     </div>                 </div>                  <!-- Help & Support -->                 <div class="bg-white rounded-xl shadow-md p-5">                     <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">                         <i class="fas fa-question-circle mr-2 text-indigo-600"></i>Help & Support                     </h2>                     <div class="space-y-3">                         <a href="https://example.com/help" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">                             <i class="fas fa-info-circle mr-2"></i> Documentation                         </a>                         <a href="mailto:support@diaryapp.com" class="flex items-center text-blue-600 hover:text-blue-800">                             <i class="fas fa-envelope mr-2"></i> Contact Support                         </a>                         <a href="https://example.com/feedback" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">                             <i class="fas fa-comment-alt mr-2"></i> Send Feedback                         </a>                     </div>                 </div>             </div>              <!-- Main Content Area -->             <div class="lg:col-span-2 space-y-6">                 <!-- Notifications Panel -->                 <div class="bg-white rounded-xl shadow-md overflow-hidden">                     <div class="flex justify-between items-center bg-indigo-100 px-5 py-3">                         <h2 class="text-xl font-semibold text-indigo-800 flex items-center">                             <i class="fas fa-bell mr-2"></i>Notifications                         </h2>                         <button id="clear-notifications" class="text-sm text-indigo-600 hover:text-indigo-800">                             <i class="fas fa-trash-alt mr-1"></i>Clear All                         </button>                     </div>                     <div class="p-4 max-h-64 overflow-y-auto custom-scrollbar" id="notifications-container">                         <div class="text-center text-gray-500 italic py-4" id="no-notifications">                             No notifications at this time.                         </div>                         <!-- Notifications will be added here by JavaScript -->                     </div>                 </div>                  <!-- Add New Entry -->                 <div class="bg-white rounded-xl shadow-md overflow-hidden">                     <div class="flex justify-between items-center bg-indigo-100 px-5 py-3">                         <h2 class="text-xl font-semibold text-indigo-800 flex items-center">                             <i class="fas fa-plus-circle mr-2"></i>Add New Entry                         </h2>                         <button id="toggle-form" class="text-sm text-indigo-600 hover:text-indigo-800">                             <i class="fas fa-chevron-down mr-1"></i>Show Form                         </button>                     </div>                     <form id="entry-form" class="hidden p-5 space-y-4">                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">                             <div>                                 <label class="block text-gray-700 mb-1 font-medium">Title</label>                                 <input type="text" id="entry-title" required                                      class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"                                     placeholder="Entry title">                             </div>                             <div>                                 <label class="block text-gray-700 mb-1 font-medium">Aspect</label>                                 <select id="entry-aspect" required                                     class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">                                     <option value="">Select Aspect</option>                                     <!-- Aspects will be added here by JavaScript -->                                 </select>                             </div>                         </div>                                                  <div>                             <label class="block text-gray-700 mb-1 font-medium">Description</label>                             <textarea id="entry-description" rows="3" required                                 class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"                                 placeholder="Describe what you'd like to remember..."></textarea>                         </div>                                                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">                             <div>                                 <label class="block text-gray-700 mb-1 font-medium">Importance Level</label>                                 <div class="flex space-x-2">                                     <label class="flex items-center">                                         <input type="radio" name="importance" value="low" class="form-radio text-green-500" checked>                                         <span class="ml-2">Low</span>                                     </label>                                     <label class="flex items-center">                                         <input type="radio" name="importance" value="medium" class="form-radio text-yellow-500">                                         <span class="ml-2">Medium</span>                                     </label>                                     <label class="flex items-center">                                         <input type="radio" name="importance" value="high" class="form-radio text-red-500">                                         <span class="ml-2">High</span>                                     </label>                                 </div>                             </div>                             <div>                                 <label class="block text-gray-700 mb-1 font-medium">Due Date</label>                                 <input type="date" id="entry-date"                                     class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">                             </div>                         </div>                                                  <div class="pt-2">                             <button type="submit"                                  class="w-full py-3 px-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-200 font-medium flex items-center justify-center">                                 <i class="fas fa-save mr-2"></i>Save Entry                             </button>                         </div>                     </form>                 </div>                  <!-- Entries List -->                 <div class="bg-white rounded-xl shadow-md overflow-hidden">                     <div class="flex justify-between items-center bg-indigo-100 px-5 py-3">                         <h2 class="text-xl font-semibold text-indigo-800 flex items-center">                             <i class="fas fa-list-ul mr-2"></i>Recent Entries                         </h2>                         <div class="text-sm text-indigo-600" id="current-topic-display">                             Showing: <span class="font-medium">House</span>                         </div>                     </div>                     <div class="p-4 max-h-96 overflow-y-auto custom-scrollbar" id="entries-container">                         <div class="text-center text-gray-500 italic py-8" id="no-entries">                             No entries found for this topic yet. Add your first entry!                         </div>                         <!-- Entries will be added here by JavaScript -->                     </div>                 </div>             </div>         </div>          <!-- Footer -->         <footer class="mt-12 text-center text-gray-500 text-sm">             <p>© <span id="current-year"></span> Personal Diary Application. All rights reserved.</p>             <div class="mt-2 flex justify-center space-x-4">                 <a href="https://example.com/privacy" target="_blank" class="hover:text-indigo-600">Privacy Policy</a>                 <a href="https://example.com/terms" target="_blank" class="hover:text-indigo-600">Terms of Service</a>                 <a href="https://example.com/about" target="_blank" class="hover:text-indigo-600">About Us</a>             </div>         </footer>     </div>      <script>         // Topic configuration         const topics = {             House: ['Maintenance', 'Bills', 'Cleaning', 'Repairs', 'Decor'],             Flat: ['Rent', 'Utilities', 'Neighbours', 'Rules', 'Security'],             Car: ['Servicing', 'Fuel', 'Insurance', 'Repairs', 'Trips'],             Animal: ['Feeding', 'Health', 'Exercise', 'Grooming', 'Vet'],             Child: ['School', 'Health', 'Activities', 'Milestones', 'Shopping'],             Husband: ['Anniversary', 'Health', 'Work', 'Hobbies', 'Dates']         };          // State variables         let selectedTopic = 'House';         let entries = [];         let notifications = [];          // DOM Elements         const topicButtonsContainer = document.getElementById('topic-buttons');         const currentTopicDisplay = document.getElementById('current-topic-display');         const entriesContainer = document.getElementById('entries-container');         const noEntriesMessage = document.getElementById('no-entries');         const notificationsContainer = document.getElementById('notifications-container');         const noNotificationsMessage = document.getElementById('no-notifications');         const entryForm = document.getElementById('entry-form');         const toggleFormButton = document.getElementById('toggle-form');         const clearNotificationsButton = document.getElementById('clear-notifications');         const entryAspectSelect = document.getElementById('entry-aspect');         const statsTotalEntries = document.getElementById('total-entries');         const statsHighPriority = document.getElementById('high-priority');         const statsUpcoming = document.getElementById('upcoming');         const statsNotificationsCount = document.getElementById('notifications-count');          // Initialize the application         function init() {             // Set current year in footer             document.getElementById('current-year').textContent = new Date().getFullYear();                          // Load saved data from localStorage             loadData();                          // Render topic buttons             renderTopicButtons();                          // Render entries for the selected topic             renderEntries();                          // Render notifications             renderNotifications();                          // Update stats             updateStats();                          // Set up event listeners             setupEventListeners();         }          // Load data from localStorage         function loadData() {             const savedEntries = localStorage.getItem('diary_entries');             const savedNotifications = localStorage.getItem('diary_notifications');                          if (savedEntries) {                 entries = JSON.parse(savedEntries);             }                          if (savedNotifications) {                 notifications = JSON.parse(savedNotifications);             }         }          // Save data to localStorage         function saveData() {             localStorage.setItem('diary_entries', JSON.stringify(entries));             localStorage.setItem('diary_notifications', JSON.stringify(notifications));         }          // Render topic buttons         function renderTopicButtons() {             topicButtonsContainer.innerHTML = '';                          Object.keys(topics).forEach(topic => {                 const button = document.createElement('button');                 button.className = `w-full text-left p-3 rounded-lg transition duration-200 flex items-center ${                     topic === selectedTopic ? 'bg-indigo-100 text-indigo-800 font-medium' : 'hover:bg-gray-100'                 }`;                 button.innerHTML = `                     <i class="fas ${getTopicIcon(topic)} mr-2 ${topic === selectedTopic ? 'text-indigo-600' : 'text-gray-500'}"></i>                     ${topic}                 `;                 button.addEventListener('click', () => {                     selectedTopic = topic;                     renderTopicButtons();                     renderEntries();                     updateAspectOptions();                     currentTopicDisplay.innerHTML = `Showing: <span class="font-medium">${topic}</span>`;                 });                                  topicButtonsContainer.appendChild(button);             });         }          // Get icon for each topic         function getTopicIcon(topic) {             const icons = {                 House: 'fa-home',                 Flat: 'fa-building',                 Car: 'fa-car',                 Animal: 'fa-paw',                 Child: 'fa-child',                 Husband: 'fa-user-tie'             };             return icons[topic] || 'fa-file-alt';         }          // Update aspect options in the form         function updateAspectOptions() {             entryAspectSelect.innerHTML = '<option value="">Select Aspect</option>';                          topics[selectedTopic].forEach(aspect => {                 const option = document.createElement('option');                 option.value = aspect;                 option.textContent = aspect;                 entryAspectSelect.appendChild(option);             });         }          // Render entries         function renderEntries() {             entriesContainer.innerHTML = '';                          const filteredEntries = entries.filter(entry => entry.topic === selectedTopic);                          if (filteredEntries.length === 0) {                 noEntriesMessage.classList.remove('hidden');                 return;             }                          noEntriesMessage.classList.add('hidden');                          filteredEntries.forEach(entry => {                 const entryElement = document.createElement('div');                 entryElement.className = 'entry-card bg-white border border-gray-200 rounded-lg p-4 mb-4 fade-in';                 entryElement.innerHTML = `                     <div class="flex justify-between items-start">                         <div class="flex-1">                             <div class="flex items-center mb-2">                                 <span class="w-3 h-3 rounded-full ${getImportanceColor(entry.importance)} mr-2"></span>                                 <h3 class="font-bold text-lg text-gray-800">${entry.title}</h3>                             </div>                             <div class="flex items-center text-sm text-gray-600 mb-2">                                 <i class="fas fa-tag mr-1"></i>                                 <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${entry.aspect}</span>                             </div>                             <p class="text-gray-700 mb-3">${entry.description}</p>                             <div class="flex items-center text-sm text-gray-500">                                 <i class="far fa-calendar-alt mr-1"></i>                                 <span>${entry.date || 'No date set'}</span>                             </div>                         </div>                         <button class="delete-entry text-red-500 hover:text-red-700 p-2 rounded-full hover:bg-red-50" data-id="${entry.id}">                             <i class="fas fa-trash-alt"></i>                         </button>                     </div>                 `;                                  entriesContainer.appendChild(entryElement);             });                          // Add event listeners to delete buttons             document.querySelectorAll('.delete-entry').forEach(button => {                 button.addEventListener('click', (e) => {                     const entryId = parseInt(button.getAttribute('data-id'));                     deleteEntry(entryId);                 });             });         }          // Get importance color         function getImportanceColor(level) {             switch (level) {                 case 'high': return 'bg-red-500';                 case 'medium': return 'bg-yellow-500';                 default: return 'bg-green-500';             }         }          // Render notifications         function renderNotifications() {             notificationsContainer.innerHTML = '';                          if (notifications.length === 0) {                 noNotificationsMessage.classList.remove('hidden');                 return;             }                          noNotificationsMessage.classList.add('hidden');                          notifications.forEach(notification => {                 const notificationElement = document.createElement('div');                 notificationElement.className = 'bg-gray-50 rounded-lg p-3 mb-2 flex justify-between items-center slide-in';                 notificationElement.innerHTML = `                     <div class="flex items-center">                         <span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span>                         <span>${notification.message}</span>                     </div>                     <div class="flex items-center">                         <span class="text-xs text-gray-500 mr-3">${notification.time}</span>                         <button class="delete-notification text-gray-400 hover:text-gray-600" data-id="${notification.id}">                             <i class="fas fa-times"></i>                         </button>                     </div>                 `;                                  notificationsContainer.appendChild(notificationElement);             });                          // Add event listeners to delete buttons             document.querySelectorAll('.delete-notification').forEach(button => {                 button.addEventListener('click', (e) => {                     const notificationId = parseInt(button.getAttribute('data-id'));                     deleteNotification(notificationId);                 });             });         }          // Add new entry         function addEntry(event) {             event.preventDefault();                          const title = document.getElementById('entry-title').value.trim();             const aspect = document.getElementById('entry-aspect').value;             const description = document.getElementById('entry-description').value.trim();             const importance = document.querySelector('input[name="importance"]:checked').value;             const date = document.getElementById('entry-date').value;                          if (!title || !aspect || !description) return;                          const newEntry = {                 id: Date.now(),                 topic: selectedTopic,                 title,                 aspect,                 description,                 importance,                 date: date || null             };                          entries.push(newEntry);             saveData();             renderEntries();             generateNotification(newEntry);                          // Reset form             document.getElementById('entry-form').reset();             document.getElementById('entry-title').focus();                          // Update stats             updateStats();                          // Show success animation             const submitButton = event.target.querySelector('button[type="submit"]');             submitButton.innerHTML = '<i class="fas fa-check mr-2"></i>Entry Saved!';             submitButton.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');             submitButton.classList.add('bg-green-500', 'hover:bg-green-600');                          setTimeout(() => {                 submitButton.innerHTML = '<i class="fas fa-save mr-2"></i>Save Entry';                 submitButton.classList.remove('bg-green-500', 'hover:bg-green-600');                 submitButton.classList.add('bg-indigo-600', 'hover:bg-indigo-700');             }, 2000);         }          // Generate notification for an entry         function generateNotification(entry) {             if (!entry.date) return;                          const now = new Date();             const entryDate = new Date(entry.date);             const diffTime = Math.abs(entryDate - now);             const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));                          if (diffDays <= 3) {                 const newNotification = {                     id: Date.now(),                     message: `${entry.title} (${entry.aspect}) is due in ${diffDays} day(s)`,                     topic: entry.topic,                     time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })                 };                                  notifications.unshift(newNotification);                 saveData();                 renderNotifications();                 updateStats();                                  // Show notification badge                 const notificationBadge = document.createElement('div');                 notificationBadge.className = 'absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center pulse';                 notificationBadge.textContent = '!';                 document.querySelector('[data-topic="' + entry.topic + '"]').appendChild(notificationBadge);                                  setTimeout(() => {                     notificationBadge.remove();                 }, 3000);             }         }          // Delete an entry         function deleteEntry(id) {             entries = entries.filter(entry => entry.id !== id);             saveData();             renderEntries();             updateStats();         }          // Delete a notification         function deleteNotification(id) {             notifications = notifications.filter(notification => notification.id !== id);             saveData();             renderNotifications();             updateStats();         }          // Clear all notifications         function clearAllNotifications() {             notifications = [];             saveData();             renderNotifications();             updateStats();         }          // Update statistics         function updateStats() {             // Total entries             statsTotalEntries.textContent = entries.filter(entry => entry.topic === selectedTopic).length;                          // High priority entries             statsHighPriority.textContent = entries.filter(entry =>                  entry.topic === selectedTopic && entry.importance === 'high'             ).length;                          // Upcoming entries (within 3 days)             const now = new Date();             statsUpcoming.textContent = entries.filter(entry => {                 if (!entry.date) return false;                 const entryDate = new Date(entry.date);                 const diffTime = Math.abs(entryDate - now);                 const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));                 return entry.topic === selectedTopic && diffDays <= 3;             }).length;                          // Notifications count             statsNotificationsCount.textContent = notifications.length;         }          // Set up event listeners         function setupEventListeners() {             // Toggle form visibility             toggleFormButton.addEventListener('click', () => {                 entryForm.classList.toggle('hidden');                 toggleFormButton.innerHTML = entryForm.classList.contains('hidden') ?                      '<i class="fas fa-chevron-down mr-1"></i>Show Form' :                      '<i class="fas fa-chevron-up mr-1"></i>Hide Form';             });                          // Form submission             entryForm.addEventListener('submit', addEntry);                          // Clear notifications             clearNotificationsButton.addEventListener('click', clearAllNotifications);                          // Update aspect options when topic changes             document.querySelectorAll('[data-topic]').forEach(button => {                 button.addEventListener('click', updateAspectOptions);             });         }          // Initialize the app when DOM is loaded         document.addEventListener('DOMContentLoaded', init);     </script> </body> </html>
+Create sign in page with welcome message hello Mum' Hope this helps 'Name: Mum, Password:Reardon
+ensure we can enter the diary app
+enahnce this site and improve the option, allow maintainance buttons and tailwind desing functino and features