Kamila17/mindscroll-digital-diary
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SoulSynk - Digital Diary</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">9 <style>10 /* Custom scrollbar */11 ::-webkit-scrollbar {12 width: 8px;13 }14 ::-webkit-scrollbar-track {15 background: #f1f1f1;16 border-radius: 10px;17 }18 ::-webkit-scrollbar-thumb {19 background: #888;20 border-radius: 10px;21 }22 ::-webkit-scrollbar-thumb:hover {23 background: #555;24 }25 26 /* Textarea resize handle */27 textarea {28 resize: none;29 }30 31 /* Fade-in animation */32 @keyframes fadeIn {33 from { opacity: 0; transform: translateY(10px); }34 to { opacity: 1; transform: translateY(0); }35 }36 37 .fade-in {38 animation: fadeIn 0.3s ease-out forwards;39 }40 </style>41</head>42<body class="min-h-screen relative overflow-x-hidden" style="font-family: 'Nunito', sans-serif; background-color: #f5f7fa;">43 <header class="bg-gradient-to-r from-blue-400 to-blue-500 text-white shadow-sm">44 <div class="container mx-auto px-4 py-6">45 <div class="flex justify-between items-center">46 <h1 class="text-2xl md:text-3xl font-semibold flex items-center">47 <i class="fas fa-brain mr-3"></i>48 SoulSynk49 </h1>50 <button id="themeToggle" class="p-2 rounded-full hover:bg-indigo-700 transition-colors">51 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">52 <circle cx="12" cy="12" r="5"></circle>53 <line x1="12" y1="1" x2="12" y2="3"></line>54 <line x1="12" y1="21" x2="12" y2="23"></line>55 <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>56 <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>57 <line x1="1" y1="12" x2="3" y2="12"></line>58 <line x1="21" y1="12" x2="23" y2="12"></line>59 <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>60 <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>61 </svg>62 </button>63 </div>64 <p class="mt-2 text-indigo-100">Your private digital diary</p>65 </div>66 </header>67 68 <main class="flex-grow container mx-auto px-4 py-8">69 <section id="diarioSection" class="fade-in">70 <div class="max-w-4xl mx-auto">71 <!-- Journal Entry Form -->72 <div class="bg-white rounded-2xl shadow-sm p-8 mb-8 transition-all hover:shadow-md dark:bg-[#16213e] dark:text-gray-200">73 <h2 class="text-xl font-semibold text-blue-600 dark:text-[#4fc3f7] mb-4">New Entry</h2>74 <textarea id="journalEntry" class="w-full h-40 p-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-300 focus:border-blue-300 transition-all" placeholder="Write your thoughts here..."></textarea>75 <div class="flex justify-end mt-4">76 <button id="saveEntry" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-xl transition-all hover:scale-105 transform">77 Save Entry78 </button>79 </div>80 </div>81 82 <!-- Saved Entries -->83 <div class="bg-white rounded-2xl shadow-sm p-8 dark:bg-[#16213e] dark:text-gray-200">84 <h2 class="text-xl font-semibold text-blue-600 dark:text-[#4fc3f7] mb-4">Your Journal</h2>85 <div id="entriesContainer">86 <!-- Entries will be loaded here -->87 </div>88 </div>89 </div>90 </main>91 92 <footer class="bg-white dark:bg-[#16213e] shadow-inner">93 <div class="flex justify-around py-4 text-gray-600 dark:text-gray-300">94 <button class="flex flex-col items-center hover:text-blue-600 transition-all">95 <i class="fas fa-home text-lg mb-1"></i>96 <span class="text-xs">Home</span>97 </button>98 <button id="openDiary" class="flex flex-col items-center text-blue-600">99 <i class="fas fa-book-open text-lg mb-1"></i>100 <span class="text-xs">Journal</span>101 </button>102 <button class="flex flex-col items-center hover:text-blue-600 transition-all">103 <i class="fas fa-user text-lg mb-1"></i>104 <span class="text-xs">Profile</span>105 </button>106 </div>107 </footer>108 109 <script>110 // DOM Elements111 const journalEntry = document.getElementById('journalEntry');112 const saveEntry = document.getElementById('saveEntry');113 const entriesContainer = document.getElementById('entriesContainer');114 const themeToggle = document.getElementById('themeToggle');115 const currentYear = document.getElementById('currentYear');116 117 // Set current year118 currentYear.textContent = new Date().getFullYear();119 120 // Theme toggle functionality121 themeToggle.addEventListener('click', () => {122 document.body.classList.toggle('dark');123 localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');124 });125 126 // Check for saved theme preference127 if (localStorage.getItem('theme') === 'dark') {128 document.body.classList.add('dark');129 }130 131 // Load saved entries on page load132 document.addEventListener('DOMContentLoaded', loadEntries);133 134 // Save entry function135 saveEntry.addEventListener('click', () => {136 const entryText = journalEntry.value.trim();137 138 if (!entryText) {139 alert('Please write something before saving.');140 return;141 }142 143 const timestamp = new Date();144 const entry = {145 text: entryText,146 date: timestamp.toISOString()147 };148 149 saveEntryToLocalStorage(entry);150 journalEntry.value = '';151 loadEntries();152 });153 154 // Save to localStorage155 function saveEntryToLocalStorage(entry) {156 let entries = JSON.parse(localStorage.getItem('journalEntries')) || [];157 entries.unshift(entry); // Add new entry at the beginning158 localStorage.setItem('journalEntries', JSON.stringify(entries));159 }160 161 // Load entries from localStorage162 function loadEntries() {163 const entries = JSON.parse(localStorage.getItem('journalEntries')) || [];164 165 if (entries.length === 0) {166 entriesContainer.innerHTML = `167 <div class="text-center py-8 text-gray-500">168 <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">169 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />170 </svg>171 <p class="text-lg">No journal entries yet.</p>172 <p class="mt-1">Start by writing your first thought above.</p>173 </div>174 `;175 return;176 }177 178 let html = '';179 entries.forEach((entry, index) => {180 const entryDate = new Date(entry.date);181 const formattedDate = entryDate.toLocaleDateString('en-US', { 182 year: 'numeric', 183 month: 'long', 184 day: 'numeric',185 hour: '2-digit',186 minute: '2-digit'187 });188 189 html += `190 <div class="entry fade-in mb-6 last:mb-0 border-b border-blue-50 pb-6 last:border-b-0 last:pb-0 transition-all hover:bg-blue-50 rounded-xl p-4">191 <div class="flex justify-between items-start">192 <p class="text-sm text-gray-500 mb-2">${formattedDate}</p>193 <button onclick="deleteEntry(${index})" class="text-red-500 hover:text-red-700 transition-colors">194 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">195 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />196 </svg>197 </button>198 </div>199 <p class="text-gray-700 whitespace-pre-line">${entry.text}</p>200 </div>201 `;202 });203 204 entriesContainer.innerHTML = html;205 }206 207 // Delete entry function208 function deleteEntry(index) {209 if (confirm('Are you sure you want to delete this entry?')) {210 let entries = JSON.parse(localStorage.getItem('journalEntries')) || [];211 entries.splice(index, 1);212 localStorage.setItem('journalEntries', JSON.stringify(entries));213 loadEntries();214 }215 }216 217 // Add Font Awesome218 const faScript = document.createElement('script');219 faScript.src = 'https://kit.fontawesome.com/a076d05399.js';220 faScript.crossOrigin = 'anonymous';221 document.head.appendChild(faScript);222 223 // Dark mode styles224 const styleElement = document.createElement('style');225 styleElement.textContent = `226 body.dark {227 background-color: #1a1a2e;228 color: #e6e6e6;229 }230 body.dark .bg-white {231 background-color: #16213e;232 color: #e6e6e6;233 }234 body.dark .text-blue-600 {235 color: #4fc3f7;236 }237 body.dark .border-blue-50 {238 border-color: #1e3a8a;239 }240 body.dark .hover\:bg-blue-50:hover {241 background-color: #1e3a8a;242 }243 body.dark header {244 background: linear-gradient(to right, #1e3a8a, #1e40af);245 }246 `;247 document.head.appendChild(styleElement);248 </script>249 <script>250 // Navigation button (journal)251 const openDiary = document.getElementById('openDiary');252 openDiary.addEventListener('click', () => {253 document.getElementById('diarioSection').scrollIntoView({ behavior: 'smooth' });254 });255 // Inicializar diario si se accede directamente a esa sección256 if (window.location.hash === '#diary') {257 document.getElementById('app-container').style.display = 'flex';258 document.getElementById('welcome-screen').style.display = 'none';259 showSection('diary');260 loadDiaryEntries();261 }262 263 // Inicializar sección de relax si se accede directamente264 if (window.location.hash === '#relax') {265 document.getElementById('app-container').style.display = 'flex';266 document.getElementById('welcome-screen').style.display = 'none';267 showSection('relax');268 }269 </script>270</body>271</html>272