├── images └── logo.png ├── LICENSE ├── login.html ├── signup.html ├── auth.js ├── index.html ├── README.md ├── script.js └── style.css /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheOpenInnovator/Zen-Note/HEAD/images/logo.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 TheOpenInnovator 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zen Note - Login 7 | 8 | 9 | 10 |
11 |
12 |

Zen Note

13 | 14 |
15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 |

Don't have an account? Sign up

28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zen Note - Sign up 7 | 8 | 9 | 10 |
11 |
12 |

Zen Note

13 | 14 |
15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 |
35 |

Already have an account? Login

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /auth.js: -------------------------------------------------------------------------------- 1 | const darkModeToggle = document.getElementById('darkModeToggle'); 2 | 3 | function toggleDarkMode() { 4 | document.body.classList.toggle('dark-mode'); 5 | document.body.classList.toggle('light-mode'); 6 | darkModeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙'; 7 | } 8 | 9 | darkModeToggle.addEventListener('click', toggleDarkMode); 10 | 11 | document.getElementById('signupForm')?.addEventListener('submit', function (event) { 12 | event.preventDefault(); 13 | const name = document.getElementById('name').value; 14 | const email = document.getElementById('email').value; 15 | const password = document.getElementById('password').value; 16 | const confirmPassword = document.getElementById('confirmPassword').value; 17 | 18 | if (password !== confirmPassword) { 19 | alert("Passwords do not match!"); 20 | return; 21 | } 22 | 23 | const userData = { name, email, password }; 24 | localStorage.setItem(email, JSON.stringify(userData)); 25 | 26 | alert("Sign up successful! You can now log in."); 27 | window.location.href = "login.html"; 28 | }); 29 | 30 | document.getElementById('loginForm')?.addEventListener('submit', function (event) { 31 | event.preventDefault(); 32 | const email = document.getElementById('email').value; 33 | const password = document.getElementById('password').value; 34 | 35 | const userData = JSON.parse(localStorage.getItem(email)); 36 | 37 | if (userData && userData.password === password) { 38 | alert("Login successful!"); 39 | window.location.href = "index.html"; 40 | } else { 41 | alert("Invalid email or password."); 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Zen Note 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 28 |
29 | 30 | 31 |
32 |
33 |

Zen Note

34 | 35 |
36 |
37 |
38 |
40 | 41 |
42 | 47 | 48 | 49 |
50 |
51 | 52 |
53 |
54 |

Explore Your Interests

55 |
56 |
57 | 58 |
59 | 60 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Zen-Note 2 | 3 | ### README for Zen Note Journal Web Application 4 | 5 | # Zen Note 6 | 7 | **Zen Note** is an interactive journal web application that allows users to record their daily learnings in a visually appealing and easy-to-use platform. It features a professional design with light and dark modes, glassmorphism effects, and emoji-driven actions. Users can add, view, and delete learnings, and even generate beautiful snapshots of their entries with the option to download or copy them. 8 | 9 | --- 10 | 11 | ## Features 12 | 13 | 1. **Daily Learnings Entry**: 14 | - Users can enter their daily learnings. 15 | - Learnings are displayed date-wise, with the latest entries shown at the top. 16 | - Only one date heading per day is displayed, under which all the learnings of that day are listed. 17 | 18 | 2. **Delete Functionality**: 19 | - Instead of a "delete" button, a bin emoji 🗑️ is displayed for each entry. Clicking it asks for confirmation before deleting the entry. 20 | 21 | 3. **Snapshot Creation**: 22 | - Next to each entry, a snapshot emoji 📷 allows users to generate a visual snapshot of their learning. 23 | - Snapshots include the date, entry, and the app's name, with a glowing effect to promote the app. 24 | - Users can either download or copy the generated snapshot. 25 | 26 | 4. **Dark Mode**: 27 | - The application includes a dark mode toggle (🌙/☀️). Both the main interface and snapshots adapt to light and dark modes. 28 | 29 | 5. **Responsive Design**: 30 | - The layout adapts seamlessly to different screen sizes, ensuring a smooth experience across desktop, tablet, and mobile devices. 31 | 32 | 6. **Storage**: 33 | - Entries are saved using `localStorage` so users can retrieve their previous learnings even after refreshing or closing the page. 34 | 35 | --- 36 | ## Contributing 37 | 38 | ### How to Contribute 39 | 40 | We welcome contributions from the community. Here's how you can get involved: 41 | 42 | 1.**Star the Repository** 43 | 44 | 2.**Create the Issue & Get Assigned** 45 | Create the issue you want to work on and get assigned or Get assigned to already created issue by us. 46 | 47 | 3. **Fork the Repository**: 48 | Fork the repository to your own GitHub account by clicking the "Fork" button. 49 | 50 | 4. **Create a Branch**: 51 | Once you've forked the repo, create a new branch: 52 | ``` 53 | git checkout -b new-feature 54 | ``` 55 | 56 | 5. **Make Your Changes**: 57 | Make sure your code adheres to our styling guide (follow the existing conventions in HTML, CSS, and JavaScript). 58 | 59 | 6. **Push Your Changes**: 60 | Push the changes to your branch: 61 | 62 | git push origin new-feature 63 | 64 | 65 | 7. **Create a Pull Request**: 66 | Go to your fork on GitHub and create a pull request. Please provide details on the changes you've made. 67 | 68 | ## Installation 69 | 70 | ### Prerequisites 71 | To run this application, you need the following: 72 | - A modern web browser (Google Chrome, Mozilla Firefox, Microsoft Edge, etc.) 73 | - Internet connection (if hosting online) 74 | 75 | ### Steps 76 | 1.**Star the Repository**: 77 | Star this repository to access this from your profile and to share. 78 | 79 | 2. **Clone the Repository**: 80 | ``` 81 | git clone https://github.com/your-username/zen-note.git 82 | cd zen-note 83 | ``` 84 | 85 | 3. **Open the Application**: 86 | Open the `index.html` file in your browser: 87 | ``` 88 | open index.html 89 | ``` 90 | 91 | 4. **Enjoy the Features**: 92 | Start entering your daily learnings, toggle between light and dark modes, and generate beautiful snapshots of your notes! 93 | 94 | 95 | 96 | 97 | 98 | ### Things to Improve 99 | - **Enhance UX**: Add more customization options for entries. 100 | - **Add Analytics**: Track user engagement and most-used features. 101 | - **Performance Optimization**: Optimize the snapshot generation for mobile. 102 | 103 | 104 | 105 | 106 | 107 | ## License 108 | 109 | This project is licensed under the MIT License. See the LICENSE file for more details. 110 | 111 | 112 | 113 | ### Contact 114 | 115 | For any questions, suggestions, or feedback, feel free to contact: 116 | - 117 | - **GitHub**: https://github.com/TheOpenInnovator 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const entryForm = document.getElementById("entryForm"); 2 | const entryInput = document.getElementById("fake-textarea"); 3 | const entriesList = document.getElementById("entriesList"); 4 | const darkModeToggle = document.getElementById("darkModeToggle"); 5 | const snapshotModal = document.getElementById("snapshotModal"); 6 | const snapshotCanvas = document.getElementById("snapshotCanvas"); 7 | const downloadSnapshotBtn = document.getElementById("downloadSnapshot"); 8 | const copySnapshotBtn = document.getElementById("copySnapshot"); 9 | const closeModalBtn = document.getElementById("closeModal"); 10 | 11 | let selectedEntryId = null; 12 | 13 | let entries = JSON.parse(localStorage.getItem("entries")) || []; 14 | 15 | function saveEntries() { 16 | localStorage.setItem("entries", JSON.stringify(entries)); 17 | } 18 | 19 | function replaceLineBreak(content) { 20 | return content.replaceAll("\n", "
"); 21 | } 22 | 23 | function revertLineBreaks(content) { 24 | return content.replaceAll("
", "\n"); 25 | } 26 | 27 | // function addEntry(content) { 28 | // const newEntry = { 29 | // id: Date.now(), 30 | // content: replaceLineBreak(content), 31 | // date: new Date().toLocaleDateString(), 32 | // }; 33 | // entries.unshift(newEntry); 34 | // saveEntries(); 35 | // renderEntries(); 36 | // } 37 | 38 | function editEntry(id) { 39 | console.log("Id to be edited", id); 40 | const entryDiv = document.querySelector(`.entry-content[data-id='${id}']`); 41 | const entryActions = document.querySelector(`.entry-actions[data-id='${id}']`); 42 | console.log(entryDiv.innerText); 43 | 44 | const textarea = document.createElement("textarea"); 45 | textarea.className = "edit-input"; 46 | textarea.placeholder = "Enter text here..."; 47 | textarea.value = entryDiv.innerText; 48 | 49 | entryActions.style.display = 'none'; // Hide the actions 50 | entryDiv.style.display = 'none'; // Hide the original content 51 | 52 | entryDiv.parentNode.insertBefore(textarea, entryDiv.nextSibling); // Insert textarea after entryDiv 53 | 54 | textarea.addEventListener("blur", () => { 55 | const newContent = textarea.value.trim(); 56 | console.log("Edited content:", newContent); 57 | 58 | // Update the content in the entries array 59 | const index = entries.findIndex((entry) => entry.id === id); 60 | if (index !== -1) { 61 | entries[index].content = replaceLineBreak(newContent); // Update the content 62 | saveEntries(entries); // Save the updated entries 63 | 64 | // Re-render entries after saving 65 | renderEntries(); 66 | } 67 | }); 68 | } 69 | function deleteEntry(id) { 70 | Swal.fire({ 71 | title: "Are you sure?", 72 | text: "You won’t be able to revert this!", 73 | icon: "warning", 74 | showCancelButton: true, 75 | confirmButtonColor: "#3085d6", 76 | cancelButtonColor: "#d33", 77 | confirmButtonText: "Yes, delete it!", 78 | cancelButtonText: "No, cancel", 79 | customClass: { 80 | title: 'swal-title', // Apply a custom class for the title 81 | } 82 | }).then((result) => { 83 | if (result.isConfirmed) { 84 | entries = entries.filter((entry) => entry.id !== id); 85 | saveEntries(); 86 | renderEntries(); 87 | 88 | Swal.fire("Deleted!", "Your entry has been deleted.", "success"); 89 | } 90 | }); 91 | } 92 | 93 | 94 | function handleEditEntry(id) { 95 | const entry = entries.find((e) => e.id === id); 96 | 97 | if (entry) { 98 | const entryDiv = document.querySelector(`.entry-content[data-id='${id}']`); 99 | const actionsDiv = document.querySelector( 100 | `.entry-actions[data-id='${id}']` 101 | ); 102 | entryDiv.innerHTML = ``; 103 | 104 | actionsDiv.innerHTML = ` 105 | Save 💾 106 | Delete ❌ 107 | `; 108 | document 109 | .querySelector(`.save-btn[data-id='${id}']`) 110 | .addEventListener("click", () => handleSaveEntry(id)); 111 | document 112 | .querySelector(`.cancel-btn[data-id='${id}']`) 113 | .addEventListener("click", renderEntries); 114 | } 115 | } 116 | 117 | function handleSaveEntry(id) { 118 | const entry = entries.find((e) => e.id === id); 119 | 120 | if (entry && newContent) { 121 | saveEntries(); 122 | renderEntries(); 123 | } 124 | } 125 | 126 | function renderEntries() { 127 | entriesList.innerHTML = ""; 128 | let currentDate = ""; 129 | 130 | entries.forEach((entry) => { 131 | // entry_date (in LocaleDateString format) string created from entry.date (in ISOString format) 132 | const entry_date = new Date(entry.date).toLocaleDateString(); 133 | if (entry_date !== currentDate) { 134 | currentDate = entry_date; 135 | const dateHeader = document.createElement("li"); 136 | dateHeader.className = "date-header"; 137 | dateHeader.textContent = currentDate; 138 | entriesList.appendChild(dateHeader); 139 | } 140 | 141 | const li = document.createElement("li"); 142 | li.className = "entry"; 143 | li.innerHTML = ` 144 |
${entry.content}
145 |
146 | 📷 147 | ✏️ 148 | 🗑️
149 | `; 150 | entriesList.appendChild(li); 151 | }); 152 | } 153 | 154 | function toggleDarkMode() { 155 | document.body.classList.toggle("dark-mode"); 156 | document.body.classList.toggle("light-mode"); 157 | document.querySelector('header').classList.toggle("dark-mode"); 158 | document.querySelector('header').classList.toggle("light-mode"); 159 | darkModeToggle.textContent = document.body.classList.contains("dark-mode") 160 | ? "☀️" 161 | : "🌙"; 162 | } 163 | 164 | let userUploadedImage = null; 165 | let selectedBackground = 166 | localStorage.getItem("selectedBackground") || "gradient1"; 167 | 168 | // Load the uploaded image from localStorage if it exists 169 | const storedImage = localStorage.getItem("userUploadedImage"); 170 | if (storedImage) { 171 | userUploadedImage = new Image(); 172 | userUploadedImage.src = storedImage; 173 | } 174 | 175 | function createSnapshot(entry) { 176 | selectedEntryId = entry.id; 177 | const canvas = snapshotCanvas; 178 | const ctx = canvas.getContext("2d"); 179 | const width = 700; 180 | const height = 400; 181 | canvas.width = width; 182 | canvas.height = height; 183 | 184 | // Apply background based on selection or uploaded image 185 | applyBackground(ctx, width, height); 186 | 187 | // Create gradient background 188 | // const gradient = ctx.createLinearGradient(0, 0, width, height); 189 | // gradient.addColorStop(0, "#1a2a6c"); 190 | // gradient.addColorStop(0.5, "#b21f1f"); 191 | // gradient.addColorStop(1, "#fdbb2d"); 192 | // ctx.fillStyle = gradient; 193 | // ctx.fillRect(0, 0, width, height); 194 | 195 | // Determine glassmorphism opacity based on background type 196 | let glassOpacity = selectedBackground === "uploaded" ? 0.5 : 0.2; 197 | 198 | // Add glassmorphism effect 199 | ctx.fillStyle = `rgba(255, 255, 255, ${glassOpacity})`; 200 | ctx.fillRect(20, 20, width - 40, height - 40); 201 | 202 | // Add text 203 | ctx.fillStyle = "#212121"; 204 | ctx.font = "18px Arial"; 205 | ctx.fillText(entry.date, 40, 60); 206 | 207 | const contentWithLineBreaks = revertLineBreaks(entry.content); 208 | 209 | // Calculate appropriate font size based on content length 210 | const contentLength = contentWithLineBreaks.length; 211 | let fontSize; 212 | if (contentLength < 100) { 213 | fontSize = 28; 214 | } else if (contentLength < 300) { 215 | fontSize = 24; 216 | } else if (contentLength < 500) { 217 | fontSize = 20; 218 | } else { 219 | fontSize = 16; 220 | } 221 | 222 | // Add text with dynamic font size 223 | ctx.fillStyle = "#212121"; 224 | ctx.font = `${fontSize}px Arial`; 225 | const maxWidth = width - 80; 226 | const lineHeight = fontSize * 1.2; 227 | const paragraphs = contentWithLineBreaks.split("\n"); 228 | let y = 100; 229 | 230 | paragraphs.forEach(paragraph => { 231 | const words = paragraph.split(" "); 232 | let line = ""; 233 | 234 | for (let i = 0; i < words.length; i++) { 235 | const testLine = line + words[i] + " "; 236 | const metrics = ctx.measureText(testLine); 237 | if (metrics.width > maxWidth && i > 0) { 238 | ctx.fillText(line, 40, y); 239 | line = words[i] + " "; 240 | y += lineHeight; 241 | } else { 242 | line = testLine; 243 | } 244 | } 245 | ctx.fillText(line, 40, y); 246 | y += lineHeight; 247 | }); 248 | 249 | // Add website name with glow effect 250 | ctx.fillStyle = "#212121"; 251 | ctx.font = "18px Arial"; 252 | ctx.shadowColor = "#212121"; 253 | ctx.shadowBlur = 1.5; 254 | ctx.fillText("Made with Zen Note", width - 200, height - 30); 255 | 256 | snapshotModal.style.display = "block"; 257 | } 258 | 259 | function applyBackground(ctx, width, height) { 260 | if (selectedBackground === "uploaded" && userUploadedImage) { 261 | ctx.drawImage(userUploadedImage, 0, 0, width, height); 262 | } else { 263 | switch (selectedBackground) { 264 | case "gradient1": 265 | const gradient1 = ctx.createLinearGradient(0, 0, width, height); 266 | gradient1.addColorStop(0, "#ffa17f"); 267 | gradient1.addColorStop(1, "#65c7f7"); 268 | ctx.fillStyle = gradient1; 269 | break; 270 | case "gradient2": 271 | const gradient2 = ctx.createLinearGradient(0, 0, width, height); 272 | gradient2.addColorStop(0, "#9c77c0"); 273 | gradient2.addColorStop(0.5, "#dbd4b4"); 274 | gradient2.addColorStop(1, "#4c80c2"); 275 | ctx.fillStyle = gradient2; 276 | break; 277 | case "gradient3": 278 | const gradient3 = ctx.createLinearGradient(0, 0, width, height); 279 | gradient3.addColorStop(0, "#CF8BF3"); 280 | gradient3.addColorStop(1, "#0b8793"); 281 | ctx.fillStyle = gradient3; 282 | break; 283 | case "gradient4": 284 | const gradient4 = ctx.createLinearGradient(0, 0, width, height); 285 | gradient4.addColorStop(0, "#4ec594"); 286 | gradient4.addColorStop(1, "#a7bfe8"); 287 | ctx.fillStyle = gradient4; 288 | break; 289 | } 290 | ctx.fillRect(0, 0, width, height); 291 | } 292 | } 293 | 294 | // Add event listener for background selection change 295 | document.getElementById("backgroundSelect").addEventListener("change", (e) => { 296 | selectedBackground = e.target.value; 297 | localStorage.setItem("selectedBackground", selectedBackground); 298 | updateSnapshot(); 299 | }); 300 | 301 | // Add event listener for image upload 302 | document.getElementById("imageUpload").addEventListener("change", (e) => { 303 | const file = e.target.files[0]; 304 | if (file) { 305 | const reader = new FileReader(); 306 | reader.onload = function (event) { 307 | userUploadedImage = new Image(); 308 | userUploadedImage.onload = function () { 309 | selectedBackground = "uploaded"; 310 | localStorage.setItem("selectedBackground", selectedBackground); 311 | localStorage.setItem("userUploadedImage", userUploadedImage.src); 312 | updateSnapshot(); 313 | }; 314 | userUploadedImage.src = event.target.result; 315 | }; 316 | reader.readAsDataURL(file); 317 | } 318 | }); 319 | 320 | function updateSnapshot() { 321 | const selectedEntry = entries.find( 322 | (entry) => 323 | entry.id === selectedEntryId 324 | // parseInt(document.querySelector(".snapshot-btn").getAttribute("data-id")) 325 | ); 326 | if (selectedEntry) { 327 | createSnapshot(selectedEntry); 328 | } 329 | } 330 | 331 | document.querySelector('.share-icon').addEventListener('click', () => { 332 | Swal.fire({ 333 | title: 'Share Your Daily Insight!', 334 | html: ` 335 |
336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 |
349 | `, 350 | showCloseButton: true, 351 | showConfirmButton: false, 352 | width: 400, 353 | showClass: { 354 | popup: 'fadeInUp', 355 | }, 356 | hideClass: { 357 | popup: 'fadeOutDown', 358 | }, 359 | customClass: { 360 | popup: 'share-popup', 361 | title: 'share-title', 362 | } 363 | }); 364 | }); 365 | 366 | 367 | // Set the initial value of the background select element 368 | document.addEventListener("DOMContentLoaded", () => { 369 | const backgroundSelect = document.getElementById("backgroundSelect"); 370 | backgroundSelect.value = selectedBackground; 371 | }); 372 | 373 | document.addEventListener("DOMContentLoaded", function () { 374 | const fakeTextarea = document.getElementById("fake-textarea"); 375 | const hiddenTextArea = document.getElementById("hiddenTextArea"); 376 | const errorMessage = document.getElementById("error-message"); 377 | const entryForm = document.getElementById("entryForm"); 378 | 379 | // Function to toggle placeholder appearance 380 | function togglePlaceholder() { 381 | if (fakeTextarea.textContent.trim() === "") { 382 | fakeTextarea.classList.add("empty"); 383 | } else { 384 | fakeTextarea.classList.remove("empty"); 385 | } 386 | } 387 | 388 | // Validate the form on submission 389 | entryForm.addEventListener("submit", function (event) { 390 | const textContent = fakeTextarea.textContent.trim(); 391 | 392 | if (textContent === "") { 393 | errorMessage.style.display = "block"; // Show error message 394 | fakeTextarea.classList.add("error"); 395 | event.preventDefault(); // Prevent form submission 396 | } else { 397 | errorMessage.style.display = "none"; // Hide error message 398 | fakeTextarea.classList.remove("error"); 399 | hiddenTextArea.value = textContent; // Set the hidden input value to send with form 400 | fakeTextarea.innerText = ""; 401 | setTimeout(() => { 402 | fakeTextarea.focus(); // Focus on the fake textarea after submission 403 | }, 50); 404 | } 405 | }); 406 | 407 | // Initialize placeholder on load 408 | togglePlaceholder(); 409 | 410 | // Add event listeners 411 | fakeTextarea.addEventListener("input", togglePlaceholder); 412 | fakeTextarea.addEventListener("focus", togglePlaceholder); 413 | fakeTextarea.addEventListener("blur", togglePlaceholder); 414 | }); 415 | 416 | // entryForm.addEventListener("submit", (e) => { 417 | // e.preventDefault(); 418 | // const content = entryInput.innerText.trim(); 419 | // console.log(content); 420 | // if (content) { 421 | // addEntry(content); 422 | // entryInput.value = ""; 423 | // } 424 | // }); 425 | 426 | entriesList.addEventListener("click", (e) => { 427 | if (e.target.classList.contains("delete-btn")) { 428 | const id = parseInt(e.target.getAttribute("data-id")); 429 | 430 | deleteEntry(id); 431 | } else if (e.target.classList.contains("snapshot-btn")) { 432 | const id = parseInt(e.target.getAttribute("data-id")); 433 | const entry = entries.find((entry) => entry.id === id); 434 | createSnapshot(entry); 435 | } 436 | if (e.target.classList.contains("edit-btn")) { 437 | const id = parseInt(e.target.getAttribute("data-id")); 438 | editEntry(id); 439 | } 440 | }); 441 | 442 | darkModeToggle.addEventListener("click", toggleDarkMode); 443 | 444 | downloadSnapshotBtn.addEventListener("click", () => { 445 | const dataUrl = snapshotCanvas.toDataURL("image/png"); 446 | const link = document.createElement("a"); 447 | link.href = dataUrl; 448 | link.download = "daily-learning-snapshot.png"; 449 | link.click(); 450 | }); 451 | 452 | copySnapshotBtn.addEventListener("click", () => { 453 | snapshotCanvas.toBlob((blob) => { 454 | const item = new ClipboardItem({ "image/png": blob }); 455 | navigator.clipboard 456 | .write([item]) 457 | .then(() => { 458 | Swal.fire({ 459 | title: "Snapshot Copied!", 460 | text: "Your snapshot has been successfully copied to the clipboard.", 461 | icon: "success", 462 | confirmButtonText: "OK", 463 | }); 464 | }) 465 | .catch(() => { 466 | Swal.fire({ 467 | title: "Oops!", 468 | text: "Something went wrong. Couldn’t copy the snapshot to the clipboard.", 469 | icon: "error", 470 | confirmButtonText: "Try Again", 471 | }); 472 | }); 473 | }); 474 | }); 475 | 476 | closeModalBtn.addEventListener("click", () => { 477 | snapshotModal.style.display = "none"; 478 | }); 479 | 480 | window.addEventListener("click", (e) => { 481 | if (e.target === snapshotModal) { 482 | snapshotModal.style.display = "none"; 483 | } 484 | }); 485 | 486 | // Initialize dark mode based on user preference 487 | if ( 488 | window.matchMedia && 489 | window.matchMedia("(prefers-color-scheme: dark)").matches 490 | ) { 491 | toggleDarkMode(); 492 | } 493 | 494 | renderEntries(); 495 | 496 | // Add these functions to your existing JavaScript 497 | 498 | let categories = new Set(); 499 | 500 | // Load categories from localStorage 501 | function loadCategories() { 502 | const savedCategories = localStorage.getItem('categories'); 503 | if (savedCategories) { 504 | categories = new Set(JSON.parse(savedCategories)); 505 | updateCategoryDropdown(); 506 | displayCategories(); 507 | } 508 | } 509 | 510 | // Save categories to localStorage 511 | function saveCategories() { 512 | localStorage.setItem('categories', JSON.stringify([...categories])); 513 | } 514 | 515 | // Update the category dropdown 516 | function updateCategoryDropdown() { 517 | const select = document.getElementById('existingCategory'); 518 | select.innerHTML = ''; 519 | select.innerHTML += ''; 520 | [...categories].sort().forEach(category => { 521 | const option = document.createElement('option'); 522 | option.value = category; 523 | option.textContent = category; 524 | select.appendChild(option); 525 | }); 526 | } 527 | 528 | // Display categories in the grid 529 | function displayCategories() { 530 | const categoriesList = document.getElementById('categoriesList'); 531 | categoriesList.innerHTML = ''; 532 | 533 | [...categories].sort().forEach(category => { 534 | const categoryTag = document.createElement('button'); 535 | categoryTag.className = 'category-tag'; 536 | categoryTag.textContent = category; 537 | categoryTag.onclick = () => openCategoryPage(category); 538 | categoriesList.appendChild(categoryTag); 539 | }); 540 | } 541 | 542 | // Save entry with category 543 | // change -> remove addEntry function and modified saveEntry to fix the category page 544 | function saveEntry(text, category = '') { 545 | const entry = { 546 | id:Date.now(), 547 | content:replaceLineBreak(text), 548 | category:category, 549 | date: new Date().toISOString() 550 | }; 551 | entries.unshift(entry); 552 | saveEntries(); 553 | renderEntries(); 554 | if (category) { 555 | categories.add(category); 556 | saveCategories(); 557 | updateCategoryDropdown(); 558 | displayCategories(); 559 | } 560 | } 561 | 562 | // Open category page in new tab 563 | function openCategoryPage(category) { 564 | const entries = JSON.parse(localStorage.getItem('entries') || '[]'); 565 | const categoryEntries = entries.filter(entry => entry.category === category); 566 | 567 | const newWindow = window.open('', '_blank'); 568 | newWindow.document.write(` 569 | 570 | 571 | 572 | ${category} - Zen Note 573 | 574 | 575 | 576 | 577 |
578 |
579 |

${category}

580 |

${categoryEntries.length} entries

581 |
582 |
583 | ${categoryEntries.map(entry => ` 584 |
585 |
${new Date(entry.date).toLocaleDateString()}
586 |
${entry.content}
587 |
588 | `).join('')} 589 |
590 |
591 | 592 | 593 | `); 594 | } 595 | 596 | // Update form submission handler 597 | document.getElementById('entryForm').addEventListener('submit', function(e) { 598 | e.preventDefault(); 599 | 600 | const textArea = document.getElementById('fake-textarea'); 601 | const text = textArea.innerText.trim() 602 | 603 | if (!text) { 604 | document.getElementById('error-message').style.display = 'block'; 605 | return; 606 | } 607 | 608 | const existingCategory = document.getElementById('existingCategory'); 609 | const newCategoryInput = document.getElementById('newCategory'); 610 | let category = existingCategory.value; 611 | 612 | if (category === 'new') { 613 | category = newCategoryInput.value.trim(); 614 | if (!category) { 615 | alert('Please enter a new category name'); 616 | return; 617 | } 618 | } 619 | 620 | saveEntry(text, category); 621 | 622 | // Clear form 623 | textArea.textContent = ''; 624 | existingCategory.value = ''; 625 | newCategoryInput.value = ''; 626 | newCategoryInput.style.display = 'none'; 627 | document.getElementById('error-message').style.display = 'none'; 628 | 629 | // Show success message 630 | Swal.fire({ 631 | title: 'Success!', 632 | text: 'Your note has been saved.', 633 | icon: 'success', 634 | timer: 2000, 635 | showConfirmButton: false 636 | }); 637 | }); 638 | 639 | // Initialize categories on page load 640 | document.addEventListener('DOMContentLoaded', loadCategories); 641 | 642 | // Add this to your existing JavaScript 643 | document.getElementById('existingCategory').addEventListener('change', function() { 644 | const newCategoryInput = document.getElementById('newCategory'); 645 | if (this.value === 'new') { 646 | newCategoryInput.style.display = 'block'; 647 | newCategoryInput.focus(); 648 | } else { 649 | newCategoryInput.style.display = 'none'; 650 | newCategoryInput.value = ''; // Clear the input when hidden 651 | } 652 | }); 653 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-gradient-light: linear-gradient(153deg, #87ceeb, #f3d250); 3 | --bg-gradient-dark: linear-gradient(153deg, #111222, #08041f); 4 | --text-color-light: #0b0c10; 5 | --text-color-dark: #f7f7f7; 6 | --entry-bg-light: rgba(236, 236, 236, 0.8); 7 | --entry-bg-dark: rgba(46, 57, 68, 0.7); 8 | --button-bg-light: #90f4ec; 9 | --button-bg-dark: #42515e; 10 | --button-hover-light: #529bb8; 11 | --button-hover-dark: #08041f; 12 | --underline-color-light: #005f7f; 13 | --underline-color-dark: grey; 14 | 15 | } 16 | 17 | body { 18 | font-family: 'Poppins', sans-serif; 19 | margin: 0; 20 | padding: 0; 21 | min-height: 100vh; 22 | transition: background 0.3s, color 0.3s; 23 | display: flex; 24 | flex-direction: column; 25 | } 26 | 27 | body.light-mode { 28 | background: var(--bg-gradient-light); 29 | color: var(--text-color-light); 30 | --underline-color: var(--underline-color-light); 31 | } 32 | 33 | body.dark-mode { 34 | background: var(--bg-gradient-dark); 35 | color: var(--text-color-dark); 36 | --underline-color: var(--underline-color-dark); 37 | 38 | } 39 | 40 | .container { 41 | flex: 1; 42 | max-width: 1000px; /* Increased from 800px to 1000px */ 43 | width: 90%; /* Added to ensure responsiveness */ 44 | margin: 20px auto; 45 | padding: 2rem; 46 | background-color: rgba(255, 255, 255, 0.1); 47 | backdrop-filter: blur(10px); 48 | border-radius: 15px; 49 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 50 | } 51 | 52 | h1 { 53 | text-align: center; 54 | font-size: 2.5em; 55 | color: var(--text-color-light); 56 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 57 | margin: 0 0 30px 0; 58 | font-weight: 600; 59 | } 60 | 61 | .light-mode h1 { 62 | text-align: center; 63 | margin-bottom: 20px; 64 | font-size: 2.5em; 65 | color: #0b0c10; 66 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 67 | } 68 | 69 | .dark-mode h1 { 70 | text-align: center; 71 | margin-bottom: 20px; 72 | font-size: 2.5em; 73 | color: #ffffff; 74 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 75 | } 76 | .dark-mode h2 { 77 | text-align: center; 78 | margin-bottom: 20px; 79 | font-size: 2.5em; 80 | color: #ffffff; 81 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 82 | } 83 | 84 | #entryForm { 85 | padding: 20px; 86 | display: flex; 87 | flex-direction: column; 88 | align-items: stretch; 89 | margin-bottom: 30px; 90 | width: 100%; 91 | max-width: 100%; 92 | box-sizing: border-box; 93 | } 94 | 95 | .input-group { 96 | display: flex; 97 | flex-direction: column; 98 | width: 100%; 99 | margin-bottom: 15px; 100 | } 101 | 102 | .fake-textarea { 103 | width: 100%; 104 | min-height: 150px; 105 | padding: 15px; 106 | border: 2px solid #e0e0e0; 107 | border-radius: 8px; 108 | font-size: 16px; 109 | font-family: 'Poppins', sans-serif; 110 | resize: vertical; 111 | margin-bottom: 15px; 112 | transition: all 0.3s ease; 113 | box-sizing: border-box; 114 | } 115 | 116 | .category-input { 117 | display: flex; 118 | justify-content: space-between; 119 | align-items: center; 120 | width: 100%; 121 | gap: 10px; 122 | } 123 | 124 | .category-select, 125 | .category-text { 126 | flex: 3; 127 | padding: 12px; 128 | border: 2px solid #e0e0e0; 129 | border-radius: 6px; 130 | font-size: 16px; 131 | transition: all 0.3s ease; 132 | box-sizing: border-box; 133 | } 134 | 135 | button[type="submit"] { 136 | flex: 1; 137 | padding: 12px 20px; 138 | font-size: 16px; 139 | border: none; 140 | border-radius: 6px; 141 | background-color: var(--button-bg-light); 142 | color: var(--text-color-light); 143 | cursor: pointer; 144 | transition: all 0.3s ease; 145 | box-sizing: border-box; 146 | } 147 | 148 | /* Responsive styles */ 149 | @media (max-width: 600px) { 150 | .category-input { 151 | flex-direction: column; 152 | } 153 | 154 | .category-select, 155 | .category-text, 156 | button[type="submit"] { 157 | width: 100%; 158 | margin-bottom: 10px; 159 | } 160 | 161 | } 162 | 163 | #entryInput { 164 | flex-grow: 1; 165 | padding: 15px; 166 | font-size: 16px; 167 | border: none; 168 | border-radius: 5px 0 0 5px; 169 | outline: none; 170 | background-color: rgba(255, 255, 255, 0.9); 171 | } 172 | 173 | button { 174 | padding: 15px 25px; 175 | font-size: 16px; 176 | border: none; 177 | border-radius: 0 5px 5px 0; 178 | cursor: pointer; 179 | transition: background-color 0.3s, transform 0.1s; 180 | } 181 | 182 | button:active { 183 | transform: scale(0.98); 184 | } 185 | 186 | .light-mode button { 187 | background-color: var(--button-bg-light); 188 | color: var(--text-color-light); 189 | } 190 | 191 | .light-mode button:hover { 192 | background-color: var(--button-hover-light); 193 | } 194 | 195 | .dark-mode button { 196 | background-color: var(--button-bg-dark); 197 | color: var(--text-color-dark); 198 | } 199 | 200 | .dark-mode button:hover { 201 | background-color: var(--button-hover-dark); 202 | } 203 | 204 | #entriesList { 205 | list-style-type: none; 206 | padding: 0; 207 | margin: 0px 70px; 208 | margin-top: 40px; 209 | } 210 | 211 | .entry { 212 | background-color: rgba(255, 255, 255, 0.8); 213 | padding: 20px; 214 | margin-bottom: 20px; 215 | border-radius: 10px; 216 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 217 | transition: all 0.3s ease; 218 | display: flex; 219 | justify-content: space-between; 220 | align-items: center; 221 | transition: background-color 0.3s, transform 0.2s; 222 | 223 | } 224 | 225 | .entry-actions span.edit-btn { 226 | color: #4caf50; 227 | } 228 | 229 | .entry:hover { 230 | transform: translateY(-2px); 231 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 232 | } 233 | 234 | .dark-mode .entry { 235 | background-color: rgba(0, 0, 0, 0.2); 236 | 237 | } 238 | 239 | .entry-content { 240 | flex-grow: 1; 241 | margin-right: 15px; 242 | padding: 0 40px; 243 | } 244 | 245 | .entry-actions { 246 | display: flex; 247 | gap: 15px; 248 | } 249 | 250 | .entry-actions span { 251 | cursor: pointer; 252 | font-size: 24px; 253 | transition: transform 0.2s; 254 | } 255 | 256 | .entry-actions span:hover { 257 | transform: scale(1.2); 258 | } 259 | 260 | /* Light mode styles for the date */ 261 | .light-mode .date-header { 262 | font-weight: bold; 263 | margin-top: 30px; 264 | margin-bottom: 15px; 265 | font-size: 1.2em; 266 | color: var(--text-color-light); 267 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 268 | } 269 | 270 | .edit-input { 271 | width: 95%; 272 | height: auto; 273 | padding: 10px; 274 | border: 1px solid #ccc; 275 | border-radius: 5px; 276 | background-color: #f9f9f9; 277 | font-size: 16px; 278 | line-height: 1.5; 279 | color: #333; 280 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); 281 | resize: vertical; 282 | outline: none; 283 | } 284 | 285 | .edit-input:focus { 286 | border-color: #007bff; 287 | background-color: #fff; 288 | box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 289 | } 290 | 291 | /* Custom styles for SweetAlert title */ 292 | .swal-title { 293 | color: black; /* Change the title text color to black */ 294 | } 295 | 296 | 297 | /* Default date-header styles */ 298 | .date-header { 299 | font-weight: bold; 300 | margin-top: 30px; 301 | margin-bottom: 15px; 302 | font-size: 1.2em; 303 | color: var(--text-color-light); 304 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 305 | } 306 | 307 | /* Dark mode styles for the date */ 308 | .dark-mode .date-header { 309 | color: white; /* Change the date to white in dark mode */ 310 | text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); /* Optional, modify text shadow for dark mode */ 311 | } 312 | #darkModeToggle { 313 | position: fixed; 314 | top: 20px; 315 | right: 20px; 316 | width: fit-content; 317 | font-size: 28px; 318 | background: none; 319 | border: none; 320 | cursor: pointer; 321 | z-index: 1000; 322 | } 323 | .container-head { 324 | display: flexbox; 325 | flex-direction: row; 326 | } 327 | 328 | .modal { 329 | display: none; 330 | position: fixed; 331 | z-index: 1001; 332 | left: 0; 333 | top: 0; 334 | width: 100%; 335 | height: 100%; 336 | overflow: auto; 337 | background-color: rgba(0, 0, 0, 0.6); 338 | backdrop-filter: blur(5px); 339 | } 340 | 341 | .modal-content { 342 | background-color: rgba(255, 255, 255, 0.1); 343 | margin: 5% auto; 344 | padding: 30px; 345 | border: 1px solid #888; 346 | width: 90%; 347 | max-width: 800px; 348 | border-radius: 15px; 349 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 350 | } 351 | 352 | .modal-options { 353 | display: flex; 354 | justify-content: space-around; 355 | align-items: center; 356 | margin-bottom: 20px; 357 | } 358 | 359 | .modal-options h3 { 360 | margin: 0; 361 | font-size: 18px; 362 | } 363 | 364 | #backgroundSelect { 365 | padding: 8px; 366 | border-radius: 5px; 367 | border: 1px solid #ccc; 368 | background-color: rgb(223, 226, 226); 369 | font-size: 14px; 370 | } 371 | 372 | .custom-file-upload { 373 | display: inline-block; 374 | padding: 8px 12px; 375 | cursor: pointer; 376 | background-color: #1d7e61; 377 | color: white; 378 | border-radius: 5px; 379 | font-size: 14px; 380 | } 381 | 382 | #imageUpload { 383 | display: none; 384 | } 385 | .share-icon{ 386 | background-color: var(--button-bg-dark); 387 | height: 40px; 388 | width: 50px; 389 | border-radius: 5px; 390 | display: flex; 391 | justify-content: center; 392 | align-items: center; 393 | } 394 | 395 | .share-icon:hover{ 396 | background-color: var(--button-hover-dark); 397 | } 398 | 399 | #snapshotCanvas { 400 | width: 100%; 401 | max-width: 700px; 402 | height: auto; 403 | margin: 0 auto 20px; 404 | display: block; 405 | border-radius: 10px; 406 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 407 | } 408 | 409 | .modal-buttons { 410 | display: flex; 411 | justify-content: center; 412 | gap: 20px; 413 | } 414 | 415 | .modal-buttons button { 416 | padding: 10px 20px; 417 | border-radius: 5px; 418 | font-weight: bold; 419 | font-size: 14px; 420 | cursor: pointer; 421 | transition: background-color 0.3s; 422 | } 423 | 424 | .modal-buttons button:hover { 425 | opacity: 0.8; 426 | } 427 | 428 | .fake-textarea { 429 | width: 100%; 430 | min-height: 120px; 431 | padding: 15px; 432 | border: 2px solid rgba(255, 255, 255, 0.1); 433 | border-radius: 8px; 434 | font-size: 16px; 435 | font-family: 'Poppins', sans-serif; 436 | resize: vertical; 437 | margin-bottom: 20px; 438 | transition: all 0.3s ease; 439 | background-color: rgba(255, 255, 255, 0.8); 440 | color: var(--text-color-light); 441 | } 442 | 443 | .fake-textarea:focus { 444 | border-color: var(--button-bg-light); 445 | outline: none; 446 | box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); 447 | } 448 | 449 | .category-input { 450 | display: flex; 451 | justify-content: space-between; 452 | align-items: center; 453 | width: 100%; 454 | margin-bottom: 20px; 455 | } 456 | 457 | .category-select, 458 | .category-text { 459 | flex: 2; 460 | padding: 12px; 461 | border: 2px solid rgba(255, 255, 255, 0.1); 462 | border-radius: 6px; 463 | font-size: 16px; 464 | background-color: rgba(255, 255, 255, 0.8); 465 | color: var(--text-color-light); 466 | transition: all 0.3s ease; 467 | } 468 | 469 | .dark-mode .category-select, 470 | .dark-mode .category-text { 471 | background-color: rgba(0, 0, 0, 0.2); 472 | color: var(--text-color-dark); 473 | border-color: rgba(255, 255, 255, 0.1); 474 | } 475 | 476 | button[type="submit"] { 477 | flex: 1; 478 | padding: 12px 20px; 479 | font-size: 16px; 480 | border: none; 481 | border-radius: 6px; 482 | background-color: var(--button-bg-light); 483 | color: var(--text-color-light); 484 | cursor: pointer; 485 | transition: all 0.3s ease; 486 | margin-left: 10px; 487 | } 488 | 489 | button[type="submit"]:hover { 490 | background-color: var(--button-hover-light); 491 | transform: translateY(-2px); 492 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 493 | } 494 | 495 | button[type="submit"]:active { 496 | transform: translateY(0); 497 | } 498 | 499 | /* Dark mode styles */ 500 | .dark-mode .fake-textarea, 501 | .dark-mode .category-select, 502 | .dark-mode .category-text { 503 | background-color: #333; 504 | border-color: #555; 505 | color: #fff; 506 | } 507 | 508 | .dark-mode .category-select option { 509 | background-color: #333; 510 | color: #fff; 511 | } 512 | 513 | /* Default light mode styles */ 514 | body.light-mode { 515 | background-color: white; 516 | color: black; 517 | } 518 | 519 | body.light-mode .categories-section h2 { 520 | color: black; /* Explore Your Interests heading in light mode */ 521 | } 522 | 523 | /* Dark mode styles */ 524 | body.dark-mode { 525 | background-color: #121212; 526 | color: white; 527 | } 528 | 529 | body.dark-mode .categories-section h2 { 530 | color: white; /* Explore Your Interests heading in dark mode */ 531 | } 532 | 533 | 534 | 535 | 536 | 537 | /* Responsive styles */ 538 | @media (max-width: 600px) { 539 | .container { 540 | margin: 10px; 541 | padding: 1rem; 542 | } 543 | 544 | .category-input { 545 | flex-direction: column; 546 | } 547 | 548 | .category-select, 549 | .category-text, 550 | button[type="submit"] { 551 | width: 100%; 552 | margin: 5px 0; 553 | } 554 | 555 | button[type="submit"] { 556 | margin-left: 0; 557 | } 558 | 559 | } 560 | header{ 561 | display: flex; 562 | align-items: center; 563 | justify-content: center; 564 | position: sticky; 565 | top: 0; 566 | z-index: 100; 567 | } 568 | 569 | nav { 570 | background-color: rgba(255, 255, 255, 0.1); /* Lightly tinted semi-transparent background */ 571 | padding: 10px; 572 | text-align: center; 573 | border: 2px solid rgba(255, 255, 255, 0.5); /* Slightly transparent border */ 574 | width: 25rem; 575 | margin-top: 0.5rem; 576 | border-radius: 20px; 577 | backdrop-filter: blur(20px); /* Increased blur effect */ 578 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */ 579 | position: sticky; 580 | top: 0; 581 | z-index: 100; 582 | } 583 | 584 | nav ul { 585 | list-style: none; 586 | margin: 0; 587 | padding: 0; 588 | } 589 | 590 | nav li { 591 | display: inline-block; 592 | margin-right: 20px; 593 | } 594 | 595 | nav a { 596 | color: var(--text-color-light); 597 | text-decoration: none; 598 | position: relative; 599 | } 600 | 601 | nav a::after { 602 | content: ''; /* Create an empty content for the pseudo-element */ 603 | position: absolute; /* Position it absolutely */ 604 | left: 50%; /* Start from the center */ 605 | bottom: 0; /* Position it at the bottom of the text */ 606 | width: 0; /* Initial width is 0 */ 607 | height: 2px; /* Height of the underline */ 608 | background: var(--underline-color); 609 | transition: width 0.4s ease, left 0.4s ease; /* Animation */ 610 | } 611 | 612 | nav a:hover::after { 613 | width: 100%; /* Expand to full width on hover */ 614 | left: 0; /* Move to the left corner */ 615 | } 616 | 617 | nav a:hover { 618 | color: var(--underline-color-light); 619 | } 620 | 621 | .dark-mode nav { 622 | background-color: var(--bg-gradient-dark); 623 | } 624 | 625 | .dark-mode nav a { 626 | color: var(--text-color-dark); 627 | } 628 | 629 | .dark-mode nav a:hover { 630 | color: var(--underline-color-dark); 631 | } 632 | 633 | .form-group { 634 | margin-bottom: 20px; 635 | } 636 | 637 | .form-group label { 638 | display: block; 639 | margin-bottom: 10px; 640 | } 641 | 642 | .form-group input { 643 | width: 100%; 644 | padding: 10px; 645 | border: 1px solid #ccc; 646 | border-radius: 5px; 647 | } 648 | 649 | button[type="submit"] { 650 | padding: 10px 20px; 651 | border: none; 652 | border-radius: 5px; 653 | background-color: var(--button-bg-light); 654 | color: var(--text-color-light); 655 | cursor: pointer; 656 | } 657 | 658 | button[type="submit"]:hover { 659 | background-color: var(--button-hover-light); 660 | } 661 | 662 | .dark-mode button[type="submit"] { 663 | background-color: var(--button-bg-dark); 664 | color: var(--text-color-dark); 665 | } 666 | 667 | .dark-mode button[type="submit"]:hover { 668 | 669 | background-color: var(--button-hover-dark); 670 | } 671 | /* Add these styles to your existing CSS */ 672 | 673 | .input-group { 674 | display: flex; 675 | flex-direction: column; 676 | gap: 15px; 677 | margin-bottom: 20px; 678 | } 679 | 680 | .category-input { 681 | display: flex; 682 | gap: 10px; 683 | align-items: center; 684 | flex-wrap: wrap; 685 | } 686 | 687 | .category-select { 688 | padding: 8px 12px; 689 | border: 2px solid #e0e0e0; 690 | border-radius: 6px; 691 | font-size: 14px; 692 | background-color: white; 693 | min-width: 200px; 694 | cursor: pointer; 695 | transition: all 0.3s ease; 696 | } 697 | 698 | .category-select:hover { 699 | border-color: #c0c0c0; 700 | } 701 | 702 | .category-text { 703 | padding: 8px 12px; 704 | border: 2px solid #e0e0e0; 705 | border-radius: 6px; 706 | font-size: 14px; 707 | min-width: 200px; 708 | transition: all 0.3s ease; 709 | } 710 | 711 | .category-text:focus { 712 | border-color: #4CAF50; 713 | outline: none; 714 | } 715 | 716 | .categories-section { 717 | margin-top: 40px; 718 | padding: 20px; 719 | background-color: rgba(255, 255, 255, 0.05); 720 | border-radius: 10px; 721 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 722 | } 723 | 724 | .categories-section h2 { 725 | font-size: 24px; 726 | color: var(--text-color-light); 727 | margin-bottom: 20px; 728 | text-align: center; 729 | } 730 | 731 | .categories-grid { 732 | display: flex; 733 | flex-wrap: wrap; 734 | gap: 15px; 735 | justify-content: center; 736 | } 737 | 738 | .category-tag { 739 | padding: 8px 16px; 740 | background-color: var(--button-bg-light); 741 | color: var(--text-color-light); 742 | border-radius: 20px; 743 | font-size: 14px; 744 | cursor: pointer; 745 | transition: all 0.3s ease; 746 | border: none; 747 | box-shadow: 0 2px 4px rgba(0,0,0,0.1); 748 | margin: 5px; 749 | } 750 | 751 | .category-tag:hover { 752 | transform: translateY(-2px); 753 | box-shadow: 0 4px 8px rgba(0,0,0,0.15); 754 | background-color: var(--button-hover-light); 755 | } 756 | 757 | .dark-mode .category-tag { 758 | background-color: var(--button-bg-dark); 759 | color: var(--text-color-dark); 760 | } 761 | 762 | .dark-mode .category-tag:hover { 763 | background-color: var(--button-hover-dark); 764 | } 765 | 766 | /* Category page styles */ 767 | .category-page { 768 | max-width: 800px; 769 | margin: 0 auto; 770 | padding: 20px; 771 | } 772 | 773 | .category-page-header { 774 | text-align: center; 775 | margin-bottom: 30px; 776 | } 777 | 778 | .category-page-title { 779 | font-size: 32px; 780 | color: #333; 781 | margin-bottom: 10px; 782 | } 783 | 784 | .category-notes { 785 | display: flex; 786 | flex-direction: row; 787 | flex-wrap: wrap; 788 | justify-content: center; 789 | align-items: center; 790 | gap: 20px; 791 | } 792 | 793 | .category-note { 794 | background-color: white; 795 | padding: 20px; 796 | min-width:200px; 797 | min-height:150px; 798 | border-radius: 10px; 799 | box-shadow: 0 2px 8px rgba(0,0,0,0.1); 800 | transition: transform 0.3s ease; 801 | } 802 | 803 | .category-note:hover { 804 | transform: translateY(-2px); 805 | } 806 | 807 | .note-date { 808 | color: #666; 809 | font-size: 14px; 810 | margin-bottom: 10px; 811 | } 812 | 813 | .note-content { 814 | color: #333; 815 | line-height: 1.6; 816 | } 817 | 818 | /* Update these existing styles */ 819 | #entryForm { 820 | padding: 0 20px; 821 | display: flex; 822 | flex-direction: column; 823 | align-items: center; 824 | margin-bottom: 20px; 825 | width: 100%; 826 | max-width: 800px; 827 | margin-left: auto; 828 | margin-right: auto; 829 | } 830 | 831 | .input-group { 832 | display: flex; 833 | flex-direction: column; 834 | width: 100%; 835 | margin-bottom: 20px; 836 | } 837 | 838 | .fake-textarea { 839 | width: 100%; 840 | min-height: 150px; 841 | padding: 15px; 842 | border: 2px solid #e0e0e0; 843 | border-radius: 8px; 844 | font-size: 16px; 845 | font-family: Arial, sans-serif; 846 | resize: vertical; 847 | margin-bottom: 20px; 848 | transition: all 0.3s ease; 849 | } 850 | 851 | .fake-textarea:focus { 852 | border-color: #4CAF50; 853 | outline: none; 854 | box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); 855 | } 856 | 857 | .category-input { 858 | display: flex; 859 | justify-content: space-between; 860 | align-items: center; 861 | width: 100%; 862 | } 863 | 864 | .category-select { 865 | flex: 2; 866 | padding: 12px; 867 | border: 2px solid #e0e0e0; 868 | border-radius: 6px; 869 | font-size: 16px; 870 | background-color: white; 871 | cursor: pointer; 872 | transition: all 0.3s ease; 873 | margin-right: 10px; 874 | } 875 | 876 | .category-text { 877 | flex: 2; 878 | padding: 12px; 879 | border: 2px solid #e0e0e0; 880 | border-radius: 6px; 881 | font-size: 16px; 882 | transition: all 0.3s ease; 883 | margin-right: 10px; 884 | display: none; 885 | } 886 | 887 | button[type="submit"] { 888 | flex: 1; 889 | padding: 12px 20px; 890 | font-size: 16px; 891 | border: none; 892 | border-radius: 6px; 893 | background-color: var(--button-bg-light); 894 | color: var(--text-color-light); 895 | cursor: pointer; 896 | transition: background-color 0.3s, transform 0.1s; 897 | } 898 | 899 | button[type="submit"]:hover { 900 | background-color: var(--button-hover-light); 901 | transform: translateY(-2px); 902 | } 903 | 904 | button[type="submit"]:active { 905 | transform: translateY(0); 906 | } 907 | 908 | /* Dark mode styles */ 909 | .dark-mode .fake-textarea, 910 | .dark-mode .category-select, 911 | .dark-mode .category-text { 912 | background-color: #333; 913 | border-color: #555; 914 | color: #fff; 915 | } 916 | 917 | .dark-mode .category-select option { 918 | background-color: #333; 919 | color: #fff; 920 | } 921 | 922 | /* Responsive styles */ 923 | @media (max-width: 600px) { 924 | .category-input { 925 | flex-direction: column; 926 | align-items: stretch; 927 | } 928 | 929 | .category-select, 930 | .category-text, 931 | button[type="submit"] { 932 | width: 100%; 933 | margin-right: 0; 934 | margin-bottom: 10px; 935 | } 936 | } 937 | 938 | /* Update the media query for smaller screens */ 939 | @media (max-width: 1100px) { /* Changed from 600px to 1100px */ 940 | .container { 941 | width: 95%; 942 | padding: 1rem; 943 | margin: 10px auto; 944 | } 945 | } 946 | 947 | .share-popup { 948 | background : linear-gradient(153deg, #111222, #08041f); 949 | border-radius: 10px; /* Rounded corners */ 950 | border: 2px solid black; 951 | padding: 10px; 952 | } 953 | 954 | .share-title { 955 | font-size: 30px !important; /* Change this value to adjust the font size */ 956 | color: var(--text-color-dark) !important; /* Optional: adjust the color */ 957 | font-weight: bold; /* Optional: make it bold */ 958 | margin-bottom: 10px; /* Optional: spacing below the title */ 959 | } 960 | 961 | 962 | .social-share { 963 | display: flex; 964 | justify-content: center; 965 | } 966 | 967 | .social-icon { 968 | margin-right: 10px; 969 | font-size: 26px; 970 | color: var(--button-bg-dark); /* Example color */ 971 | transition: color 0.3s; 972 | 973 | } 974 | 975 | .social-icon:hover { 976 | color: var(--button-bg-light); /* Color on hover */ 977 | } 978 | 979 | @keyframes fadeInUp { 980 | 0% { 981 | opacity: 0; 982 | transform: translateY(20px); 983 | } 984 | 100% { 985 | opacity: 1; 986 | transform: translateY(0); 987 | } 988 | } 989 | 990 | @keyframes fadeOutDown { 991 | 0% { 992 | opacity: 1; 993 | transform: translateY(0); 994 | } 995 | 100% { 996 | opacity: 0; 997 | transform: translateY(20px); 998 | } 999 | } 1000 | 1001 | .fadeInUp { 1002 | animation: fadeInUp 0.5s ease forwards; /* Animation duration and easing */ 1003 | } 1004 | 1005 | .fadeOutDown { 1006 | animation: fadeOutDown 0.5s ease forwards; /* Animation duration and easing */ 1007 | } 1008 | 1009 | .swal2-close { 1010 | font-size: 20px; /* Customize size */ 1011 | color: var(--text-color-dark) !important ; /* Customize color */ 1012 | background: var(--button-bg-light) ; 1013 | border: none; 1014 | cursor: pointer; 1015 | } 1016 | 1017 | .swal2-close:hover { 1018 | background: var(--button-bg-light) ; 1019 | } --------------------------------------------------------------------------------