v24.1.2

CHANGELOG.txt

@@ -1,3 +1,7 @@
+#----v24.1.2----#
+-Add accent color customization
+-Improve UI/UX
+
 #----v24.1.1----#
 -Better local use
 -Improve code structure

README.md

@@ -30,14 +30,14 @@ When I was looking for a note-taking application, I faced several difficulties:
 ## Features
 All notes are encrypted with ``AES-256-GCM``.
 
-The user can save and edit notes, change color, copy, export and use Markdown/HTML. The user can create tasks lists, tables, links, code blocks, etc. The user can also search for notes by title or add categories. Read my [Markdown guide](https://github.com/seguinleo/Bloc-notes/wiki/Markdown).
+The user can save and edit notes, change color, copy, export and use Markdown/HTML5. The user can create tasks lists, tables, links, code blocks, etc. The user can also search for notes by title or add categories. Read my [Markdown guide](https://github.com/seguinleo/Bloc-notes/wiki/Markdown).
 
 The user can also sign in to sync all notes between their devices or browsers in a secure database. The user can also make a note public and share it via a random URL. No email is required, only a username and a strong password.
 
 This website is a PWA (Progressive Web App), the user can install it as an application. Service Worker has automatic updates.
 
 ## Design
-The website is fully responsible for mobile devices. The icons come from [Fontawesome](https://github.com/FortAwesome/Font-Awesome). The website is also accessible for people with disabilities thanks to high-contrast colors, ARIA modules and focusable elements. A light/dark mode is also available.
+The website is fully responsible for mobile devices. The icons come from [Fontawesome](https://github.com/FortAwesome/Font-Awesome). The website is also accessible for people with disabilities thanks to high-contrast colors, ARIA modules and focusable elements. A light/dark mode is also available and the user can choose the accent color of the entire page.
 
 ## Security and Privacy
 The user's connection for online sync is maintained by a secure cookie. The website is hosted in France by OVHcloud. The server is always up to date with the latest security patches.
@@ -66,7 +66,7 @@ If you find [issues](https://github.com/seguinleo/Bloc-notes/issues), [vulnerabi
 ## For developers
 Documentation: [W3C](https://www.w3.org/), [MDN Web Docs](https://developer.mozilla.org/en-US/), [OWASP](https://cheatsheetseries.owasp.org/), [PHP Delusions](https://phpdelusions.net/)
 
-Technologies: JavaScript, PHP and MySQL
+Technologies: JavaScript, PHP8+ and MySQL
 
 Dependencies: ESLint, PHP_CodeSniffer, Sass, [DOMPurify](https://github.com/cure53/DOMPurify) and [Showdownjs](https://github.com/showdownjs/showdown) (modified)
 

src/.editorconfig

@@ -0,0 +1,13 @@
+[*.{html,css,scss,js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true
+
+[*.php]
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true

src/Dockerfile

@@ -1,4 +1,4 @@
-FROM php:8.2-apache
+FROM php:8.3-apache
 
 COPY . /var/www/html/
 

src/assets/js/script.js

@@ -12,6 +12,7 @@ const popupBoxSettings = document.querySelector('#settings-popup-box');
 const titleNote = noteBox.querySelector('#title');
 const contentNote = noteBox.querySelector('#content');
 const colors = document.querySelectorAll('#colors span');
+const accentColors = document.querySelectorAll('#accent-colors span');
 const forms = document.querySelectorAll('form');
 const sideBar = document.querySelector('#sideBar');
 const metaTheme = document.querySelectorAll('.themecolor');
@@ -31,6 +32,19 @@ if (localStorage.getItem('theme') === 'light') {
   });
   buttonTheme.className = 'fa-solid fa-star';
 }
+if (localStorage.getItem('accent_color') === 'pink') {
+  document.querySelector('body').classList = 'accentPink';
+  document.querySelector('#accent-colors .accentPinkSpan').classList.add('selected');
+} else if (localStorage.getItem('accent_color') === 'green') {
+  document.querySelector('body').classList = 'accentGreen';
+  document.querySelector('#accent-colors .accentGreenSpan').classList.add('selected');
+} else if (localStorage.getItem('accent_color') === 'yellow') {
+  document.querySelector('body').classList = 'accentYellow';
+  document.querySelector('#accent-colors .accentYellowSpan').classList.add('selected');
+} else {
+  document.querySelector('body').classList = 'accentBlue';
+  document.querySelector('#accent-colors .accentBlueSpan').classList.add('selected');
+}
 if (localStorage.getItem('version') === 'hide') document.querySelector('#newVersion').style.display = 'none';
 if (localStorage.getItem('sort_notes') === null) localStorage.setItem('sort_notes', '3');
 
@@ -470,6 +484,29 @@ colors.forEach((span, index) => {
   if (index === 0) span.classList.add('selected');
 });
 
+accentColors.forEach((span) => {
+  span.addEventListener('click', (event) => {
+    accentColors.forEach((e) => e.classList.remove('selected'));
+    event.target.classList.add('selected');
+    if (span.classList.contains('accentPinkSpan')) {
+      document.querySelector('body').classList = 'accentPink';
+      localStorage.setItem('accent_color', 'pink');
+    } else if (span.classList.contains('accentGreenSpan')) {
+      document.querySelector('body').classList = 'accentGreen';
+      localStorage.setItem('accent_color', 'green');
+    } else if (span.classList.contains('accentYellowSpan')) {
+      document.querySelector('body').classList = 'accentYellow';
+      localStorage.setItem('accent_color', 'yellow');
+    } else {
+      document.querySelector('body').classList = 'accentBlue';
+      localStorage.setItem('accent_color', 'blue');
+    }
+  });
+  span.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') span.click();
+  });
+});
+
 document.querySelectorAll('header i').forEach((e) => {
   e.addEventListener('click', () => {
     isUpdate = false;