-Bloc-notes is a free, open source and encrypted notebook. Bloc-notes aims for security and privacy. +Bloc-notes is a free, open source and encrypted notebook.
@@ -25,30 +25,28 @@
* [For developers](#for-developers)
## Why?
-When I was looking for a note-taking application, I faced several difficulties: Google Keep and OneNote don't respect privacy, Standard Notes and Obsidian can be light without having to pay (no Markdown or no Sync). So I decided to create my own notebook that respects users' privacy and GDPR.
+When I was looking for a note-taking application, I faced several difficulties: Google Keep and OneNote don't respect privacy, Standard Notes and Obsidian can be light without having to pay (no Markdown or no Sync). So I decided to create my own notebook that respects users' privacy and easy to use.
## Features
-The user can save and edit notes locally in JSON, change notes color, copy notes and use [Markdown](https://github.com/seguinleo/Bloc-notes/wiki/Markdown) to create titles, lists, links, todos or import images from another website.
+All notes are encrypted with ``AES-256-GCM``.
-The user can also sign in to sync all notes between their devices or browsers and encrypt content with ``AES-256-GCM`` in a database. The user can also hide the content of their notes. A button allows the user to make a note public and share it via a random URL.
+The user can save and edit notes, change color, copy, export and use [Markdown](https://github.com/seguinleo/Bloc-notes/wiki/Markdown).
-This website is a PWA (Progressive Web App), the user can install it as an application. Service Worker has automatic updates. Be sure to change the language before installing the application.
+The user can also sign in to sync all notes between their devices or browsers in a 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 and UI/UX inspired by [Material Design v3](https://m3.material.io/). 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 with local storage.
+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.
## Security and Privacy
-The user's connection is maintained by a secure cookie with a shelf life of 1 week.
-
-The website is hosted in France by OVHcloud on my personal server. The website is always up to date with the latest security patches.
-
-Passwords are hashed with bcrypt before being sent to the database.
+The user's connection for online sync is maintained by a secure cookie with a shelf life of 1 week. The website is hosted in France by OVHcloud on my personal server. The website is always up to date with the latest security patches.
-Each user has their own randomly generated 32-byte encryption key that uses SHA256 as the hash function and the randomly generated salt. Once logged in, the user can change their password or delete their account. Security measures are in place against XSS, CSRF and SQL injections.
+Passwords are hashed with the latest algorithms before being sent to the database.
-Bloc-notes stores the username, hashed password, and encrypted notes in a secure database until the user deletes this data themselves. Only the user has access to the content of their encrypted notes via their unique keys. The website editor disclaims any responsibility for the content of user notes.
+Each user has their own randomly generated 32-byte encryption key and salt. Once logged in, the user can change their password or delete their account according to the GDPR. Security measures are in place against XSS, CSRF and SQL injections.
-[Legal notice / Privacy policy](https://leoseguin.fr/mentionslegales/)
+Bloc-notes stores the username, hashed password, and encrypted notes in a secure database until the user deletes this data themselves. Only the user has access to the content of their encrypted notes. The website editor disclaims any responsibility for the content of user notes.
> [!WARNING]
> Never store passwords or too personal data in your notes regardless of the service.
@@ -57,9 +55,11 @@ Bloc-notes stores the username, hashed password, and encrypted notes in a secure
🇫🇷French, 🇬🇧English, 🇩🇪German
## Todo
-- [x] Share notes with a random link
+- [x] Share notes with a random link
- [x] Export notes in text file
-- [ ] Spanish translation
+- [ ] Pin notes
+- [ ] Spanish translation
+- [ ] ...
## Community
If you find [issues](https://github.com/seguinleo/Bloc-notes/issues), [vulnerabilities](https://github.com/seguinleo/Bloc-notes/security) or if you have any suggestions to improve this project, feel free to [discuss](https://github.com/seguinleo/Bloc-notes/discussions)!
@@ -67,7 +67,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 PDO and MySQL
+Technologies: JavaScript, PHP and MySQL
Dependencies: ESLint, PHP_CodeSniffer, Sass and [Showdownjs](https://github.com/showdownjs/showdown) (modified)
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 58964f7..c8549a6 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1 +1 @@
-@keyframes slide-left{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}html{scroll-behavior:smooth;-webkit-tap-highlight-color:rgba(0,0,0,0);scrollbar-width:thin;scrollbar-color:rgba(100,100,100,.5) rgba(0,0,0,0)}html ::-webkit-scrollbar-thumb{background:rgba(100,100,100,.5)}*{font-family:Arial,sans-serif;margin:0;box-sizing:border-box}::-webkit-scrollbar{width:5px;height:5px}h1{font-size:1.4rem}h2{font-size:1.2rem}h3{font-size:1.1rem}a{text-decoration:none;display:inline;word-wrap:break-word;font-weight:700}kbd{border-radius:5px;margin:0 2px;font-size:.8rem;font-weight:700;padding:2px 4px}header{padding:1rem}header .fa-xmark{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;transition:.1s}pre,code{background:#383a59;color:#8be9fd;border-radius:5px;padding:2px 5px;white-space:pre-wrap}li{margin-left:-1rem}img{max-width:100%;border-radius:1rem}nav{top:0;left:0;right:0;text-align:center;position:fixed;z-index:2;-webkit-user-select:none;user-select:none}nav h1{display:inline-block}nav div{margin:10px 2rem;display:inline-block;vertical-align:middle}nav button{width:200px}nav .search-input{width:300px;height:50px;border-radius:24px;display:inline-block}nav .search-input:focus-within{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 2px 6px 0 rgba(0,0,0,.2)}nav .search-input ::placeholder{opacity:1}nav .search-input i{font-size:1rem;margin:0 5px}nav .search-input input{font-size:1rem;height:50px;width:180px;border:none;border-radius:24px;margin-right:5px;padding:0 10px}nav .search-input input:focus{outline:none}nav .search-input .gestionCompte,nav .search-input .seconnecter,nav .search-input .fa-bars{display:none;cursor:pointer}nav .lastSync{font-size:.8rem}nav .lastSync i{font-size:1rem;margin:0 5px;cursor:pointer}main{max-width:100vw;margin:6rem auto 2rem;padding:0 2rem 0 414px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem}.sideBar{position:fixed;-webkit-user-select:none;user-select:none;background:#272727;left:0;top:0;bottom:0;width:382px;padding:100px 1rem 1rem}.sideBar .listNotes{max-height:65vh;overflow-y:scroll}.sideBar header{display:none}.sideBar button{margin:1rem auto}.sideBar p{border-radius:5px;margin:10px 0;padding:4px;font-size:.8rem;cursor:pointer}.sideBar p .titleList{max-width:200px;overflow:hidden;display:inline-block;white-space:nowrap;font-weight:700}.sideBar p .dateList{display:inline;float:right}label{vertical-align:middle}input,textarea,select{height:50px;width:100%;font-size:1rem;padding:0 1rem}select,option{font-family:Arial,sans-serif}textarea{height:250px;min-height:200px;max-height:450px;resize:vertical;padding:10px}button{cursor:pointer;width:100%;height:50px;border:none;padding:0 1rem;font-size:1rem;border-radius:5px;transition:.1s}button:disabled{cursor:not-allowed}form{margin:1rem 0}p.welcome{font-size:1.2rem}p.welcome .nomUser{font-weight:700;font-style:italic}.note{position:relative;display:flex;flex-direction:column;justify-content:space-between;border-radius:1rem;clip-path:polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);transition:clip-path .4s;width:400px;max-height:460px;line-height:2;padding:30px 20px 10px}.note:hover,.note:focus{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0)}.note:hover .bottom-content,.note:focus .bottom-content{visibility:visible;opacity:1}.note:after{position:absolute;content:"";top:0;left:0;width:25px;height:25px;border-radius:0 0 1rem;transition:transform .4s}.note:hover:after,.note:focus:after{transform:translate(-100%, -100%)}.note:focus-within .bottom-content{visibility:visible;opacity:1}.note .title{font-size:1.4rem;text-align:right;font-weight:700;margin:4px 10px 1rem}.note a{text-decoration:underline}.note a:hover{text-decoration:none}.note .details{max-height:400px;overflow-y:auto;overflow-wrap:break-word;overflow-x:hidden;padding-right:5px}.note .bottom-content{-webkit-user-select:none;user-select:none;margin-top:5px;text-align:center;opacity:0;visibility:hidden;transition:opacity .1s}.note .bottom-content:focus-within{opacity:1;visibility:visible}.note .bottom-content i{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0 4px;width:30px;height:30px;border-radius:50%;transition:.1s}.note .bottom-content span{font-size:.7rem;transition:.1s}.linkp{cursor:pointer;font-weight:700}.fullscreen{position:fixed;z-index:3;width:80vw;min-height:80vh;top:10%;left:0;right:0;margin:auto}.fullscreen .details{min-height:70vh}.noscroll{overflow:hidden}.darken{display:none;position:fixed;top:0;left:0;z-index:3;height:100%;width:100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.darken.show{display:block}.popup,header{display:flex;align-items:center;justify-content:space-between}.popup .content,input,textarea,select{border-radius:5px}.couleurs{display:flex;justify-content:center;min-height:30px}.couleurs span{width:20px;height:20px;margin:0 10px;border-radius:50%;cursor:pointer;transition:.1s}.couleurs span.selectionne{width:26px;height:26px}.connect-box,.connect-popup-box,.creer-box,.gestion-popup-box,.public-note-popup-box,.private-note-popup-box,.popup-box{display:none;pointer-events:none;position:fixed;top:0;left:0;z-index:2;height:100vh;width:100vw;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.connect-box .popup,.connect-popup-box .popup,.creer-box .popup,.gestion-popup-box .popup,.public-note-popup-box .popup,.private-note-popup-box .popup,.popup-box .popup{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:3;overflow-y:auto;justify-content:center;transform:translate(-50%, -50%)}.connect-box.show,.connect-popup-box.show,.creer-box.show,.gestion-popup-box.show,.popup-box.show,.public-note-popup-box.show,.private-note-popup-box.show{display:flex;pointer-events:auto}.connect-box.show .popup,.connect-popup-box.show .popup,.creer-box.show .popup,.gestion-popup-box.show .popup,.popup-box.show .popup,.public-note-popup-box.show .popup,.private-note-popup-box.show .popup{display:flex;pointer-events:auto;max-height:100vh;transform:translate(-50%, -50%)}.content{width:600px;padding:5px 1rem}.row{margin-bottom:1rem}.switch{position:relative;margin-top:8px;display:inline-block;width:60px;height:2rem}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider:before{transform:translateX(26px)}.switch .slider{position:absolute;cursor:pointer;border-radius:2rem;inset:0}.switch .slider:before{position:absolute;content:"";border-radius:50%;height:26px;width:26px;left:4px;top:3px;box-shadow:1px 1px 3px rgba(0,0,0,.2);transition:.3s ease-in-out}.version{font-size:.8rem;margin:0 5px}.divLanguage .language{width:50px;padding:0}.copyright{position:absolute;bottom:1rem;font-size:.8rem}.gestion-popup-box.show .version{text-align:right}.check{position:relative;margin-left:-40px;width:32px;height:25px;vertical-align:middle;opacity:0}.check:checked+label svg g path{stroke-dashoffset:0}.path1{stroke-dasharray:400;stroke-dashoffset:400}#errorNotification{position:fixed;top:1rem;right:2rem;text-align:center;font-weight:700;max-width:300px;padding:10px;border-radius:5px;background:#a93b3b;color:#fff;display:none;z-index:999}#copyNotification{position:fixed;top:1rem;right:2rem;text-align:center;font-weight:700;max-width:125px;padding:10px;border-radius:5px;display:none;z-index:999}#copyNotification.show{display:block}#copyNoteLink{margin:auto;border-radius:20px;text-align:center;padding:10px;font-weight:700;cursor:pointer}#btnTheme{font-size:1.2rem;width:36px;height:36px;border-radius:48px;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.1s}#btnTheme:focus{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 2px 6px 0 rgba(0,0,0,.2)}.task-list-item{list-style-type:none;margin-left:-2rem}.task-list-item *{vertical-align:middle}@media(min-width: 901px){.iconFloat,.iconConnectFloat{display:none}}@media(max-width: 900px){body{min-height:100vh}nav{position:fixed;margin:0;background:none;box-shadow:none}nav div{margin:10px 0;display:block}nav button.seconnecter,nav .welcome{display:none}nav .icon,nav .iconConnect{position:absolute}nav .search-input{width:75%}nav .search-input input{width:60%;vertical-align:middle;padding:5px;margin:0 10px}nav .search-input .linkp{margin:0}nav .search-input .gestionCompte,nav .search-input .seconnecter,nav .search-input .fa-bars,nav .search-input .resync{display:inline;vertical-align:middle;cursor:pointer}nav .search-input i{font-size:1.1rem}nav .search-input .gestionCompte i,nav .search-input .seconnecter i{font-size:1.8rem;vertical-align:middle}nav .search-input .fa-magnifying-glass{display:none}nav .lastSync{display:none}main{padding:0 5px 5rem;gap:10px}.iconFloat,.iconConnectFloat{position:fixed;bottom:2rem;right:2rem;z-index:2}#iconButtonFloat,#iconButtonConnectFloat{width:60px;height:60px;font-size:1.4rem;border-radius:48px;display:flex;justify-content:center;align-items:center}kbd{display:none}.sideBar{display:none;width:90vw;padding:1rem;z-index:3}.sideBar .listNotes{margin-top:1rem}.sideBar header{display:flex}.sideBar button{display:none}.sideBar .titleList{max-width:140px}.sideBar.show{display:block;animation:slide-left .3s ease-in-out}textarea{height:30vh}.note{width:98%;max-height:300px}.note .details{overflow-y:hidden;max-height:75vh}.fullscreen{min-height:calc(100vh - 5rem);top:1rem}.fullscreen .details{overflow-y:auto}.couleurs span{margin:0 4px}.popup{max-width:98vw}.bottom-content i{margin:0 2px}.lastSync{display:inline-flex}.divTheme{display:inline;vertical-align:middle;margin-left:10px}.divTheme #btnTheme{display:inline-flex}#copyNotification.show{display:none}}html.dark{background:#171717;color:#c6c6c6;accent-color:#8ab4f8}html.dark a{color:#8ab4f8}html.dark kbd{background:#272727}html.dark header .fa-xmark:hover{background:rgba(255,255,255,.1)}html.dark nav{background:#272727}html.dark nav .search-input{background:#424242}html.dark nav .search-input ::placeholder{color:#c6c6c6}html.dark nav .search-input input{background:#424242}html.dark nav .search-input input:focus{outline:none}html.dark .sideBar{background:#272727}html.dark .sideBar p:hover,html.dark .sideBar p:focus{background:#424242}html.dark input,html.dark textarea,html.dark select{border:2px solid #424242}html.dark input:focus,html.dark textarea:focus,html.dark select:focus{outline:#8ab4f8 solid 2px}html.dark button{color:#171717;background:#8ab4f8}html.dark button:hover{background:#9ec3ff}html.dark button:disabled{background:#c6c6c6}html.dark .linkp{color:#8ab4f8}html.dark .popup .content,html.dark input,html.dark textarea,html.dark select{background:#272727;color:#c6c6c6}html.dark .couleurs span{border:1px solid #424242}html.dark .Blanc a,html.dark .Rouge a,html.dark .Orange a,html.dark .Jaune a,html.dark .Vert a,html.dark .Cyan a,html.dark .BleuCiel a,html.dark .Bleu a,html.dark .Violet a,html.dark .Rose a{color:#171717}html.dark .Noir a{color:#8ab4f8}html.dark .switch input:checked+.slider{background:#8ab4f8}html.dark .switch .slider{background:#424242}html.dark .switch .slider:before{background:#fff}html.dark .connect-box,html.dark .connect-popup-box,html.dark .creer-box,html.dark .gestion-popup-box,html.dark .popup-box,html.dark .private-note-popup-box,html.dark .public-note-popup-box,html.dark .darken{background:rgba(0,0,0,.5)}html.dark .supprimerCompte{color:#fe7575}html.dark #btnTheme{background:#424242;color:#c6c6c6}html.dark .divLanguage .language{border:none;background:#272727}html.dark #copyNotification{background:#424242;color:#c6c6c6}html.dark #copyNoteLink{background-color:#171717}html.dark #copyNoteLink:hover{background-color:#424242}@media(max-width: 900px){html.dark #iconButtonFloat,html.dark #iconButtonConnectFloat{box-shadow:1px 1px 6px rgba(0,0,0,.2)}html.dark .sideBar{background:#272727}html.dark .sideBar p:hover,html.dark .sideBar p:focus{background:#424242}}html.light{background:#fff;color:#272727;accent-color:#2b5790}html.light a{color:#2b5790}html.light kbd{background:#eee}html.light header .fa-xmark:hover{background:rgba(0,0,0,.2)}html.light input,html.light textarea,html.light select{border:2px solid #c6c6c6}html.light input:focus,html.light textarea:focus,html.light select:focus{outline:#2b5790 solid 2px}html.light nav{background:#eee}html.light nav .search-input{background:#fff}html.light nav .search-input ::placeholder{color:#272727}html.light nav .search-input input{background:#fff;border:none}html.light nav .search-input input:focus{outline:none}html.light .sideBar{background:#eee}html.light .sideBar p:hover,html.light .sideBar p:focus{background:#c6c6c6}html.light button{color:#fff;background:#2b5790}html.light button:hover{background:#34629f}html.light button:disabled{background:#c6c6c6;color:#171717}html.light .linkp{color:#2b5790}html.light .popup .content,html.light input,html.light textarea,html.light select{background:#fff;color:#272727}html.light .couleurs span{border:1px solid #c6c6c6}html.light .Blanc a,html.light .Rouge a,html.light .Orange a,html.light .Jaune a,html.light .Vert a,html.light .Cyan a,html.light .BleuCiel a,html.light .Bleu a,html.light .Violet a,html.light .Rose a{color:#171717}html.light .Noir{color:#c6c6c6}html.light .Noir a{color:#8ab4f8}html.light .switch input:checked+.slider{background:#2b5790}html.light .switch .slider{background:#c6c6c6}html.light .switch .slider:before{background:#fff}html.light .connect-box,html.light .connect-popup-box,html.light .creer-box,html.light .gestion-popup-box,html.light .popup-box,html.light .darken{background:rgba(200,200,200,.4)}html.light .supprimerCompte{color:#a93b3b}html.light #copyNotification{background:#c6c6c6;color:#272727}html.light #copyNoteLink{background-color:#eee}html.light #copyNoteLink:hover{background-color:#c6c6c6}html.light #btnTheme{background:#fff;color:#272727}html.light .divLanguage .language{border:none;background:none}@media(max-width: 900px){html.light #iconButtonFloat,html.light #iconButtonConnectFloat{box-shadow:1px 1px 6px rgba(0,0,0,.2)}html.light .sideBar{background:#eee}html.light .sideBar p:hover,html.light .sideBar p:focus{background:#c6c6c6}}.note{background:#272727}.note:after{box-shadow:2px 2px 2px rgba(0,0,0,.2)}.Noir{background:#272727}.Blanc{background:#eee}.Rouge{background:#ff7b7b}.Orange{background:#ff9b4f}.Jaune{background:#ffea64}.Vert{background:#89f17e}.Cyan{background:#7cffe7}.BleuCiel{background:#a0deff}.Bleu{background:#72a5e9}.Violet{background:#a99aff}.Rose{background:#ffa2ff}.Blanc,.Rouge,.Orange,.Jaune,.Vert,.Cyan,.BleuCiel,.Bleu,.Violet,.Rose{color:#171717}.Blanc ::selection,.Rouge ::selection,.Orange ::selection,.Jaune ::selection,.Vert ::selection,.Cyan ::selection,.BleuCiel ::selection,.Bleu ::selection,.Violet ::selection,.Rose ::selection{background:rgba(0,0,0,.2)}.Blanc .bottom-content i:hover,.Rouge .bottom-content i:hover,.Orange .bottom-content i:hover,.Jaune .bottom-content i:hover,.Vert .bottom-content i:hover,.Cyan .bottom-content i:hover,.BleuCiel .bottom-content i:hover,.Bleu .bottom-content i:hover,.Violet .bottom-content i:hover,.Rose .bottom-content i:hover{background:rgba(0,0,0,.1)}.Blanc .bottom-content i:active,.Rouge .bottom-content i:active,.Orange .bottom-content i:active,.Jaune .bottom-content i:active,.Vert .bottom-content i:active,.Cyan .bottom-content i:active,.BleuCiel .bottom-content i:active,.Bleu .bottom-content i:active,.Violet .bottom-content i:active,.Rose .bottom-content i:active{background:rgba(0,0,0,.2)}.Noir ::selection{background:rgba(255,255,255,.2)}.Noir .bottom-content span{color:#c6c6c6}.Noir .bottom-content i{color:#c6c6c6}.Noir .bottom-content i:hover{background:rgba(255,255,255,.1)}.Noir .bottom-content i:active{background:rgba(255,255,255,.2)}/*# sourceMappingURL=style.css.map */
+@keyframes slide-left{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}html{scroll-behavior:smooth;-webkit-tap-highlight-color:rgba(0,0,0,0);scrollbar-width:thin;scrollbar-color:rgba(100,100,100,.5) rgba(0,0,0,0);font-family:Arial,sans-serif}html ::-webkit-scrollbar-thumb{background:rgba(100,100,100,.5)}*{margin:0;box-sizing:border-box}::-webkit-scrollbar{width:5px;height:5px}h1{font-size:1.4rem}h2{font-size:1.2rem}h3{font-size:1.1rem}a{text-decoration:none;display:inline;word-wrap:break-word;font-weight:700}kbd{border-radius:5px;margin:0 2px;font-size:.8rem;font-weight:700;padding:2px 4px}header{padding:1rem}header .fa-xmark{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;transition:.1s}pre,code{background:#383a59;color:#8be9fd;border-radius:5px;padding:2px 5px;white-space:pre-wrap}li{margin-left:-1rem;word-break:break-word}img{max-width:100%;border-radius:1rem}nav{top:0;left:0;right:0;text-align:center;position:fixed;z-index:2;-webkit-user-select:none;user-select:none}nav h1{display:inline-block}nav h1 i{font-size:2rem}nav div{margin:10px 2rem;display:inline-block;vertical-align:middle}nav button{width:200px}nav .search-input{width:300px;height:50px;border-radius:24px;display:inline-block}nav .search-input:focus-within{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 2px 6px 0 rgba(0,0,0,.2)}nav .search-input ::placeholder{opacity:1}nav .search-input i{font-size:1rem;margin:0 5px}nav .search-input input{width:180px;border:none;border-radius:24px;margin-right:5px;padding:0 10px}nav .search-input input:focus{outline:none}nav .search-input .gestionCompte,nav .search-input .seconnecter,nav .search-input .fa-bars{display:none;cursor:pointer}nav .lastSync{font-size:.8rem}nav .lastSync i{font-size:1rem;margin:0 5px;cursor:pointer}main{max-width:100vw;margin:6rem auto 2rem;padding:0 2rem 0 414px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem}.sideBar{position:fixed;-webkit-user-select:none;user-select:none;background:#272727;left:0;top:0;bottom:0;width:382px;padding:100px 1rem 1rem}.sideBar .listNotes{max-height:65vh;overflow-y:scroll}.sideBar header{display:none}.sideBar button{margin:1rem auto}.sideBar p{border-radius:5px;margin:10px 0;padding:4px;font-size:.8rem;cursor:pointer}.sideBar p .titleList{max-width:200px;overflow:hidden;display:inline-block;white-space:nowrap;font-weight:700;vertical-align:bottom;margin-right:5px}.sideBar p .dateList{display:inline;float:right}input{font-family:OpenSans,sans-serif}input[type=checkbox]{width:20px;height:20px;margin:0 5px}input,select{height:50px;width:100%;font-size:1rem;padding:0 1rem}select,option{font-family:Arial,sans-serif}textarea{font-family:OpenSans,sans-serif;font-size:1rem;height:250px;width:100%;min-height:200px;max-height:450px;resize:vertical;padding:10px}button{font-family:OpenSans,sans-serif;font-size:1rem;cursor:pointer;width:100%;height:50px;border:none;padding:0 1rem;border-radius:5px;transition:.1s}button:disabled{cursor:not-allowed}form{margin:10px 0}p.welcome{font-size:1.2rem}p.welcome .nomUser{font-weight:700;font-style:italic}.note{position:relative;display:flex;flex-direction:column;justify-content:space-between;border-radius:10px;clip-path:polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);transition:clip-path .4s;width:400px;max-height:460px;line-height:2;padding:15px 15px 10px}.note:hover,.note:focus{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0)}.note:hover .bottom-content,.note:focus .bottom-content{visibility:visible;opacity:1}.note:after{position:absolute;content:"";top:0;left:0;width:25px;height:25px;border-radius:0 0 1rem;transition:transform .4s}.note:hover:after,.note:focus:after{transform:translate(-100%, -100%)}.note:focus-within .bottom-content{visibility:visible;opacity:1}.note .title{font-size:1.4rem;text-align:right;font-weight:700;margin:4px 10px 1rem}.note a{text-decoration:underline}.note a:hover{text-decoration:none}.note .details{max-height:400px;overflow-y:auto;overflow-wrap:break-word;overflow-x:hidden;padding-right:5px}.note .bottom-content{-webkit-user-select:none;user-select:none;margin-top:5px;text-align:center;opacity:0;visibility:hidden;transition:opacity .1s}.note .bottom-content:focus-within{opacity:1;visibility:visible}.note .bottom-content i{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;width:30px;height:30px;border-radius:50%;transition:.1s}.linkp{cursor:pointer;font-weight:700}.fullscreen{position:fixed;z-index:3;width:80vw;min-height:80vh;margin:auto;inset:0}.fullscreen .details{max-height:100%}.noscroll{overflow:hidden}.popup,header{display:flex;align-items:center;justify-content:space-between}.popup .content,input,textarea,select{border-radius:5px}.couleurs{display:flex;justify-content:center;min-height:30px}.couleurs span{width:20px;height:20px;margin:0 10px;border-radius:50%;cursor:pointer;transition:.1s}.couleurs span.selectionne{width:26px;height:26px}.connect-box,.creer-box,.gestion-popup-box,.public-note-popup-box,.private-note-popup-box,.note-popup-box{display:none;pointer-events:none;position:fixed;top:0;left:0;z-index:2;height:100vh;width:100vw;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.connect-box .popup,.creer-box .popup,.gestion-popup-box .popup,.public-note-popup-box .popup,.private-note-popup-box .popup,.note-popup-box .popup{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:3;overflow-y:auto;justify-content:center;transform:translate(-50%, -50%)}.connect-box.show,.creer-box.show,.gestion-popup-box.show,.note-popup-box.show,.public-note-popup-box.show,.private-note-popup-box.show{display:flex;pointer-events:auto}.connect-box.show .popup,.creer-box.show .popup,.gestion-popup-box.show .popup,.note-popup-box.show .popup,.public-note-popup-box.show .popup,.private-note-popup-box.show .popup{display:flex;pointer-events:auto;max-height:100vh;transform:translate(-50%, -50%)}.content{width:600px;padding:5px 1rem}.row{margin-bottom:1rem}.switch{position:relative;margin-top:8px;display:inline-block;width:60px;height:2rem}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider:before{transform:translateX(26px)}.switch .slider{position:absolute;cursor:pointer;border-radius:2rem;inset:0}.switch .slider:before{position:absolute;content:"";border-radius:50%;height:26px;width:26px;left:4px;top:3px;box-shadow:1px 1px 3px rgba(0,0,0,.2);transition:.3s ease-in-out}.version{font-size:.8rem;margin:0 5px}#language{width:50px;padding:0}.copyright{position:absolute;bottom:1rem;font-size:.8rem}.gestion-popup-box.show .version{text-align:right}#errorNotification{position:fixed;top:1rem;right:2rem;text-align:center;font-weight:700;max-width:300px;padding:10px;border-radius:5px;background:#a93b3b;color:#fff;display:none;z-index:999}#copyNotification{position:fixed;top:1rem;right:2rem;text-align:center;font-weight:700;max-width:125px;padding:10px;border-radius:5px;display:none;z-index:999}#copyNotification.show{display:block}#copyNoteLink{margin:auto;border-radius:20px;text-align:center;padding:10px;font-weight:700;cursor:pointer}#btnTheme{font-size:1.2rem;width:36px;height:36px;border-radius:48px;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.1s}#btnTheme:focus{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 2px 6px 0 rgba(0,0,0,.2)}.task-list-item{list-style-type:none;margin-left:-2rem}@media(min-width: 901px){.iconFloat,.iconConnectFloat{display:none}}@media(max-width: 900px){body{min-height:100vh}nav{position:fixed;margin:0;background:none;box-shadow:none}nav div{margin:10px 0;display:block}nav button.seconnecter,nav .welcome{display:none}nav .icon,nav .iconConnect{position:absolute}nav .search-input{width:75%}nav .search-input input{width:60%;padding:5px}nav .search-input .linkp{margin:0}nav .search-input .gestionCompte,nav .search-input .seconnecter,nav .search-input .fa-bars{display:inline;cursor:pointer}nav .search-input i{vertical-align:middle;font-size:1.8rem}nav .search-input .fa-bars{font-size:1.2rem}nav .search-input .fa-magnifying-glass{display:none}nav .lastSync{display:none}main{padding:0 0 5rem;gap:10px}.iconFloat,.iconConnectFloat{position:fixed;bottom:2rem;right:2rem;z-index:2}#iconButtonFloat,#iconButtonConnectFloat{width:60px;height:60px;font-size:1.4rem;border-radius:48px;display:flex;justify-content:center;align-items:center}kbd{display:none}.sideBar{display:none;width:90vw;padding:1rem;z-index:3}.sideBar .listNotes{margin-top:1rem}.sideBar header{display:flex}.sideBar button{display:none}.sideBar .titleList{max-width:140px}.sideBar.show{display:block;animation:slide-left .3s ease-in-out}textarea{height:30vh}.note{width:100%;max-height:300px;margin:0 10px}.note .bottom-content{visibility:visible;opacity:1}.note .title{font-size:1.1rem}.note .details{overflow:hidden;font-size:.9rem}.fullscreen{min-height:100dvh;inset:auto;top:0}.fullscreen .details{overflow:auto}.couleurs span{margin:0 4px}.popup{max-width:98vw}.bottom-content i{margin:0 2px}.lastSync{display:inline-flex}.divTheme{display:inline;vertical-align:middle;margin-left:10px}.divTheme #btnTheme{display:inline-flex}#copyNotification.show{display:none}}html.dark{background:#171717;color:#c6c6c6;accent-color:#8ab4f8}html.dark a{color:#8ab4f8}html.dark kbd{background:#272727}html.dark header .fa-xmark:hover{background:rgba(255,255,255,.1)}html.dark nav{background:#272727}html.dark nav .search-input{background:#171717}html.dark nav .search-input ::placeholder{color:#c6c6c6}html.dark nav .search-input input{background:#171717;border:none}html.dark nav .search-input input:focus{outline:none}html.dark .sideBar{background:#272727}html.dark .sideBar p:hover,html.dark .sideBar p:focus{background:#424242}html.dark input,html.dark textarea,html.dark select{border:2px solid #424242}html.dark input:focus,html.dark textarea:focus,html.dark select:focus{outline:#8ab4f8 solid 2px}html.dark button{color:#171717;background:#8ab4f8}html.dark button:hover{background:#9ec3ff}html.dark button:disabled{background:#c6c6c6}html.dark .linkp{color:#8ab4f8}html.dark .popup .content,html.dark input,html.dark textarea,html.dark select{background:#272727;color:#c6c6c6}html.dark .couleurs span{border:1px solid #424242}html.dark .Blanc a,html.dark .Rouge a,html.dark .Orange a,html.dark .Jaune a,html.dark .Vert a,html.dark .Cyan a,html.dark .BleuCiel a,html.dark .Bleu a,html.dark .Violet a,html.dark .Rose a{color:#171717}html.dark .Noir a{color:#8ab4f8}html.dark .switch input:checked+.slider{background:#8ab4f8}html.dark .switch .slider{background:#424242}html.dark .switch .slider:before{background:#fff}html.dark .note-popup-box,html.dark .creer-box,html.dark .gestion-popup-box,html.dark .popup-box,html.dark .private-note-popup-box,html.dark .public-note-popup-box{background:rgba(0,0,0,.5)}html.dark .supprimerCompte{color:#fe7575}html.dark #btnTheme{background:#171717;color:#c6c6c6}html.dark #language{border:none;background:#272727}html.dark #copyNotification{background:#424242;color:#c6c6c6}html.dark #copyNoteLink{background-color:#171717}html.dark #copyNoteLink:hover{background-color:#424242}@media(max-width: 900px){html.dark #iconButtonFloat,html.dark #iconButtonConnectFloat{box-shadow:1px 1px 6px rgba(0,0,0,.2)}html.dark .sideBar{background:#272727}html.dark .sideBar p:hover,html.dark .sideBar p:focus{background:#424242}}html.light{background:#fff;color:#272727;accent-color:#2b5790}html.light a{color:#2b5790}html.light kbd{background:#eee}html.light header .fa-xmark:hover{background:rgba(0,0,0,.2)}html.light input,html.light textarea,html.light select{border:2px solid #c6c6c6}html.light input:focus,html.light textarea:focus,html.light select:focus{outline:#2b5790 solid 2px}html.light nav{background:#eee}html.light nav .search-input{background:#fff}html.light nav .search-input ::placeholder{color:#272727}html.light nav .search-input input{background:#fff;border:none}html.light nav .search-input input:focus{outline:none}html.light .sideBar{background:#eee}html.light .sideBar p:hover,html.light .sideBar p:focus{background:#c6c6c6}html.light button{color:#fff;background:#2b5790}html.light button:hover{background:#34629f}html.light button:disabled{background:#c6c6c6;color:#171717}html.light .linkp{color:#2b5790}html.light .popup .content,html.light input,html.light textarea,html.light select{background:#fff;color:#272727}html.light .couleurs span{border:1px solid #c6c6c6}html.light .Blanc a,html.light .Rouge a,html.light .Orange a,html.light .Jaune a,html.light .Vert a,html.light .Cyan a,html.light .BleuCiel a,html.light .Bleu a,html.light .Violet a,html.light .Rose a{color:#171717}html.light .Noir{color:#c6c6c6}html.light .Noir a{color:#8ab4f8}html.light .switch input:checked+.slider{background:#2b5790}html.light .switch .slider{background:#c6c6c6}html.light .switch .slider:before{background:#fff}html.light .note-popup-box,html.light .creer-box,html.light .gestion-popup-box,html.light .popup-box,html.light .private-note-popup-box,html.light .public-note-popup-box{background:rgba(200,200,200,.4)}html.light .supprimerCompte{color:#a93b3b}html.light #copyNotification{background:#c6c6c6;color:#272727}html.light #copyNoteLink{background-color:#eee}html.light #copyNoteLink:hover{background-color:#c6c6c6}html.light #btnTheme{background:#fff;color:#272727}html.light #language{border:none;background:none}@media(max-width: 900px){html.light #iconButtonFloat,html.light #iconButtonConnectFloat{box-shadow:1px 1px 6px rgba(0,0,0,.2)}html.light .sideBar{background:#eee}html.light .sideBar p:hover,html.light .sideBar p:focus{background:#c6c6c6}}.note{background:#272727}.note:after{box-shadow:2px 2px 2px rgba(0,0,0,.2)}.Noir{background:#272727}.Blanc{background:#eee}.Rouge{background:#ff7b7b}.Orange{background:#ff9b4f}.Jaune{background:#ffea64}.Vert{background:#89f17e}.Cyan{background:#7cffe7}.BleuCiel{background:#a0deff}.Bleu{background:#72a5e9}.Violet{background:#a99aff}.Rose{background:#ffa2ff}.Blanc,.Rouge,.Orange,.Jaune,.Vert,.Cyan,.BleuCiel,.Bleu,.Violet,.Rose{color:#171717}.Blanc ::selection,.Rouge ::selection,.Orange ::selection,.Jaune ::selection,.Vert ::selection,.Cyan ::selection,.BleuCiel ::selection,.Bleu ::selection,.Violet ::selection,.Rose ::selection{background:rgba(0,0,0,.2)}.Blanc .bottom-content i:hover,.Rouge .bottom-content i:hover,.Orange .bottom-content i:hover,.Jaune .bottom-content i:hover,.Vert .bottom-content i:hover,.Cyan .bottom-content i:hover,.BleuCiel .bottom-content i:hover,.Bleu .bottom-content i:hover,.Violet .bottom-content i:hover,.Rose .bottom-content i:hover{background:rgba(0,0,0,.1)}.Blanc .bottom-content i:active,.Rouge .bottom-content i:active,.Orange .bottom-content i:active,.Jaune .bottom-content i:active,.Vert .bottom-content i:active,.Cyan .bottom-content i:active,.BleuCiel .bottom-content i:active,.Bleu .bottom-content i:active,.Violet .bottom-content i:active,.Rose .bottom-content i:active{background:rgba(0,0,0,.2)}.Noir ::selection{background:rgba(255,255,255,.2)}.Noir .bottom-content span{color:#c6c6c6}.Noir .bottom-content i{color:#c6c6c6}.Noir .bottom-content i:hover{background:rgba(255,255,255,.1)}.Noir .bottom-content i:active{background:rgba(255,255,255,.2)}/*# sourceMappingURL=style.css.map */
diff --git a/src/assets/css/style.css.map b/src/assets/css/style.css.map
index f85f4f4..1348106 100644
--- a/src/assets/css/style.css.map
+++ b/src/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAWA,sBACE,GACE,4BAGF,KACE,yBAIJ,KACE,uBACA,0CACA,qBACA,mDAEA,+BACE,gCAIJ,EACE,6BACA,SACA,sBAGF,oBACE,UACA,WAGF,GACE,iBAGF,GACE,iBAGF,GACE,iBAGF,EACE,qBACA,eACA,qBACA,gBAGF,IACE,kBACA,aACA,gBACA,gBACA,gBAGF,OACE,aAEA,iBACE,eACA,oBACA,mBACA,uBACA,WACA,YACA,kBACA,eAIJ,SAEE,mBACA,cACA,kBACA,gBACA,qBAGF,GACE,kBAGF,IACE,eACA,mBAGF,IACE,MACA,OACA,QACA,kBACA,eACA,UACA,yBACA,iBAEA,OACE,qBAGF,QACE,iBACA,qBACA,sBAGF,WACE,YAGF,kBACE,YACA,YACA,mBACA,qBAEA,+BACE,iEAGF,gCACE,UAGF,oBACE,eACA,aAGF,wBACE,eACA,YACA,YACA,YACA,mBACA,iBACA,eAEA,8BACE,aAIJ,2FAGE,aACA,eAIJ,cACE,gBAEA,gBACE,eACA,aACA,eAKN,KACE,gBACA,sBACA,uBACA,aACA,uBACA,mBACA,eACA,SAGF,SACE,eACA,yBACA,iBACA,WAjMO,QAkMP,OACA,MACA,SACA,YACA,wBAEA,oBACE,gBACA,kBAGF,gBACE,aAGF,gBACE,iBAGF,WACE,kBACA,cACA,YACA,gBACA,eAEA,sBACE,gBACA,gBACA,qBACA,mBACA,gBAGF,qBACE,eACA,YAKN,MACE,sBAGF,sBAGE,YACA,WACA,eACA,eAGF,cAEE,6BAGF,SACE,aACA,iBACA,iBACA,gBACA,aAGF,OACE,eACA,WACA,YACA,YACA,eACA,eACA,kBACA,eAEA,gBACE,mBAIJ,KACE,cAGF,UACE,iBAEA,mBACE,gBACA,kBAIJ,MACE,kBACA,aACA,sBACA,8BACA,mBACA,6DACA,yBACA,YACA,iBACA,cACA,uBAEA,wBAEE,uDAEA,wDACE,mBACA,UAIJ,YACE,kBACA,WACA,MACA,OACA,WACA,YACA,uBACA,yBAGF,oCAEE,kCAIA,mCACE,mBACA,UAIJ,aACE,iBACA,iBACA,gBACA,qBAGF,QACE,0BAEA,cACE,qBAIJ,eACE,iBACA,gBACA,yBACA,kBACA,kBAGF,sBACE,yBACA,iBACA,eACA,kBACA,UACA,kBACA,uBAEA,mCACE,UACA,mBAGF,wBACE,oBACA,mBACA,uBACA,eACA,aACA,WACA,YACA,kBACA,eAGF,2BACE,gBACA,eAKN,OACE,eACA,gBAGF,YACE,eACA,UACA,WACA,gBACA,QACA,OACA,QACA,YAEA,qBACE,gBAIJ,UACE,gBAGF,QACE,aACA,eACA,MACA,OACA,UACA,YACA,WACA,mCACA,2BAEA,aACE,cAIJ,cAEE,aACA,mBACA,8BAGF,sCAIE,kBAGF,UACE,aACA,uBACA,gBAEA,eACE,WACA,YACA,cACA,kBACA,eACA,eAGF,2BACE,WACA,YAIJ,wHAOE,aACA,oBACA,eACA,MACA,OACA,UACA,aACA,YACA,mCACA,2BAEA,yKACE,yBACA,iBACA,kBACA,QACA,SACA,UACA,gBACA,uBACA,gCAIJ,2JAOE,aACA,oBAGF,4MAOE,aACA,oBACA,iBACA,gCAGF,SACE,YACA,iBAGF,KACE,mBAGF,QACE,kBACA,eACA,qBACA,WACA,YAEA,cACE,UACA,QACA,SAGE,qCACE,2BAKN,gBACE,kBACA,eACA,mBACA,QAEA,uBACE,kBACA,WACA,kBACA,YACA,WACA,SACA,QACA,sCACA,2BAKN,SACE,gBACA,aAIA,uBACE,WACA,UAIJ,WACE,kBACA,YACA,gBAGF,iCACE,iBAGF,OACE,kBACA,kBACA,WACA,YACA,sBACA,UAEA,gCACE,oBAIJ,OACE,qBACA,sBAGF,mBACE,eACA,SACA,WACA,kBACA,gBACA,gBACA,aACA,kBACA,mBACA,MAnmBO,KAomBP,aACA,YAGF,kBACE,eACA,SACA,WACA,kBACA,gBACA,gBACA,aACA,kBACA,aACA,YAEA,uBACE,cAIJ,cACE,YACA,mBACA,kBACA,aACA,gBACA,eAGF,UACE,iBACA,WACA,YACA,mBACA,YACA,aACA,uBACA,mBACA,eACA,eAEA,gBACE,iEAIJ,gBACE,qBACA,kBAEA,k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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAWA,sBACE,GACE,4BAGF,KACE,yBAIJ,KACE,uBACA,0CACA,qBACA,mDACA,6BAEA,+BACE,gCAIJ,EACE,SACA,sBAGF,oBACE,UACA,WAGF,GACE,iBAGF,GACE,iBAGF,GACE,iBAGF,EACE,qBACA,eACA,qBACA,gBAGF,IACE,kBACA,aACA,gBACA,gBACA,gBAGF,OACE,aAEA,iBACE,eACA,oBACA,mBACA,uBACA,WACA,YACA,kBACA,eAIJ,SAEE,mBACA,cACA,kBACA,gBACA,qBAGF,GACE,kBACA,sBAGF,IACE,eACA,mBAGF,IACE,MACA,OACA,QACA,kBACA,eACA,UACA,yBACA,iBAEA,OACE,qBAEA,SACE,eAIJ,QACE,iBACA,qBACA,sBAGF,WACE,YAGF,kBACE,YACA,YACA,mBACA,qBAEA,+BACE,iEAGF,gCACE,UAGF,oBACE,eACA,aAGF,wBACE,YACA,YACA,mBACA,iBACA,eAEA,8BACE,aAIJ,2FAGE,aACA,eAIJ,cACE,gBAEA,gBACE,eACA,aACA,eAKN,KACE,gBACA,sBACA,uBACA,aACA,uBACA,mBACA,eACA,SAGF,SACE,eACA,yBACA,iBACA,WApMO,QAqMP,OACA,MACA,SACA,YACA,wBAEA,oBACE,gBACA,kBAGF,gBACE,aAGF,gBACE,iBAGF,WACE,kBACA,cACA,YACA,gBACA,eAEA,sBACE,gBACA,gBACA,qBACA,mBACA,gBACA,sBACA,iBAGF,qBACE,eACA,YAKN,MACE,gCAGF,qBACE,WACA,YACA,aAGF,aAEE,YACA,WACA,eACA,eAGF,cAEE,6BAGF,SACE,gCACA,eACA,aACA,WACA,iBACA,iBACA,gBACA,aAGF,OACE,gCACA,eACA,eACA,WACA,YACA,YACA,eACA,kBACA,eAEA,gBACE,mBAIJ,KACE,cAGF,UACE,iBAEA,mBACE,gBACA,kBAIJ,MACE,kBACA,aACA,sBACA,8BACA,mBACA,6DACA,yBACA,YACA,iBACA,cACA,uBAEA,wBAEE,uDAEA,wDACE,mBACA,UAIJ,YACE,kBACA,WACA,MACA,OACA,WACA,YACA,uBACA,yBAGF,oCAEE,kCAIA,mCACE,mBACA,UAIJ,aACE,iBACA,iBACA,gBACA,qBAGF,QACE,0BAEA,cACE,qBAIJ,eACE,iBACA,gBACA,yBACA,kBACA,kBAGF,sBACE,yBACA,iBACA,eACA,kBACA,UACA,kBACA,uBAEA,mCACE,UACA,mBAGF,wBACE,oBACA,mBACA,uBACA,eACA,aACA,WACA,YACA,kBACA,eAKN,OACE,eACA,gBAGF,YACE,eACA,UACA,WACA,gBACA,YACA,QAEA,qBACE,gBAIJ,UACE,gBAGF,cAEE,aACA,mBACA,8BAGF,sCAIE,kBAGF,UACE,aACA,uBACA,gBAEA,eACE,WACA,YACA,cACA,kBACA,eACA,eAGF,2BACE,WACA,YAIJ,0GAME,aACA,oBACA,eACA,MACA,OACA,UACA,aACA,YACA,mCACA,2BAEA,oJACE,yBACA,iBACA,kBACA,QACA,SACA,UACA,gBACA,uBACA,gCAIJ,wIAME,aACA,oBAGF,kLAME,aACA,oBACA,iBACA,gCAGF,SACE,YACA,iBAGF,KACE,mBAGF,QACE,kBACA,eACA,qBACA,WACA,YAEA,cACE,UACA,QACA,SAGE,qCACE,2BAKN,gBACE,kBACA,eACA,mBACA,QAEA,uBACE,kBACA,WACA,kBACA,YACA,WACA,SACA,QACA,sCACA,2BAKN,SACE,gBACA,aAGF,UACE,WACA,UAGF,WACE,kBACA,YACA,gBAGF,iCACE,iBAGF,mBACE,eACA,SACA,WACA,kBACA,gBACA,gBACA,aACA,kBACA,mBACA,MAnkBO,KAokBP,aACA,YAGF,kBACE,eACA,SACA,WACA,kBACA,gBACA,gBACA,aACA,kBACA,aACA,YAEA,uBACE,cAIJ,cACE,YACA,mBACA,kBACA,aACA,gBACA,eAGF,UACE,iBACA,WACA,YACA,mBACA,YACA,aACA,uBACA,mBACA,eACA,eAEA,gBACE,iEAIJ,gBACE,qBACA,kBAGF,yBAEE,6BAEE,cAIJ,yBACE,KACE,iBAGF,IACE,eACA,SACA,gBACA,gBAEA,QACE,cACA,cAGF,oCAEE,aAGF,2BAEE,kBAGF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","file":"style.css"}
\ No newline at end of file
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 47b668f..7bb4538 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -5,13 +5,12 @@ let touchEnd = 0;
let timeoutCopy = null;
let timeoutError = null;
const notesContainer = document.querySelector('main');
-const popupBox = document.querySelector('.popup-box');
+const noteBox = document.querySelector('.note-popup-box');
const connectBox = document.querySelector('.connect-box');
const creerBox = document.querySelector('.creer-box');
-const titleTag = popupBox.querySelector('#title');
-const descTag = popupBox.querySelector('#content');
+const titleNote = noteBox.querySelector('#title');
+const contentNote = noteBox.querySelector('#content');
const couleurs = document.querySelectorAll('.couleurs span');
-const darken = document.querySelector('.darken');
const switchElement = document.querySelector('.switch');
const forms = document.querySelectorAll('form');
const sideBar = document.querySelector('.sideBar');
@@ -69,6 +68,77 @@ const converter = new showdown.Converter({
extensions: [taskListEnablerExtension],
});
+function arrayBufferToBase64(buffer) {
+ const binary = [];
+ const bytes = new Uint8Array(buffer);
+ for (let i = 0; i < bytes.byteLength; i += 1) {
+ binary.push(String.fromCharCode(bytes[i]));
+ }
+ return btoa(binary.join(''));
+}
+
+function base64ToArrayBuffer(base64) {
+ const binaryString = atob(base64);
+ const byteArray = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i += 1) {
+ byteArray[i] = binaryString.charCodeAt(i);
+ }
+ return byteArray.buffer;
+}
+
+async function openIndexedDB(dbName, objectStoreName) {
+ return new Promise((resolve, reject) => {
+ const request = indexedDB.open(dbName, 1);
+
+ request.onupgradeneeded = (event) => {
+ const db = event.target.result;
+ if (!db.objectStoreNames.contains(objectStoreName)) {
+ db.createObjectStore(objectStoreName);
+ }
+ };
+
+ request.onsuccess = (event) => {
+ resolve(event.target.result);
+ };
+
+ request.onerror = (event) => {
+ reject(event.target.error);
+ };
+ });
+}
+
+async function getKeyFromDB(db, objectStoreName) {
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(objectStoreName, 'readonly');
+ const objectStore = transaction.objectStore(objectStoreName);
+ const request = objectStore.get('encryptionKey');
+
+ request.onsuccess = (event) => {
+ resolve(event.target.result);
+ };
+
+ request.onerror = (event) => {
+ reject(event.target.error);
+ };
+ });
+}
+
+async function storeKeyInDB(db, objectStoreName, key) {
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(objectStoreName, 'readwrite');
+ const objectStore = transaction.objectStore(objectStoreName);
+ objectStore.put(key, 'encryptionKey');
+
+ transaction.oncomplete = () => {
+ resolve();
+ };
+
+ transaction.onerror = (event) => {
+ reject(event.target.error);
+ };
+ });
+}
+
const showNotes = async () => {
document.querySelector('.sideBar .listNotes').textContent = '';
document.querySelectorAll('.note').forEach((note) => note.remove());
@@ -79,17 +149,38 @@ const showNotes = async () => {
return;
}
+ const dbName = 'notes_db';
+ const objectStoreName = 'key';
+ const db = await openIndexedDB(dbName, objectStoreName);
+ const key = await getKeyFromDB(db, objectStoreName);
+ db.close();
+
notesJSON
.sort((a, b) => new Date(b.date) - new Date(a.date))
- .forEach((row, id) => {
+ .forEach(async (row, id) => {
const {
- title, desc, couleur, date, hidden,
+ title, content, couleur, date, hidden,
} = row;
if (!title) return;
- const descEnd = replaceAllEnd(desc);
- const descHtml = converter.makeHtml(desc);
+ const deTitle = await window.crypto.subtle.decrypt(
+ { name: 'AES-GCM', iv: new Uint8Array(12) },
+ key,
+ base64ToArrayBuffer(title),
+ );
+
+ const deContent = await window.crypto.subtle.decrypt(
+ { name: 'AES-GCM', iv: new Uint8Array(12) },
+ key,
+ base64ToArrayBuffer(content),
+ );
+
+ const deTitleString = JSON.parse(new TextDecoder().decode(new Uint8Array(deTitle)));
+ const deContentString = JSON.parse(new TextDecoder().decode(new Uint8Array(deContent)));
+
+ const descEnd = replaceAllEnd(deContentString);
+ const descHtml = converter.makeHtml(deContentString);
const noteElement = document.createElement('div');
noteElement.id = `note${id}`;
noteElement.classList.add('note', couleur);
@@ -98,7 +189,7 @@ const showNotes = async () => {
detailsElement.classList.add('details');
const titleElement = document.createElement('h2');
titleElement.classList.add('title');
- titleElement.textContent = title;
+ titleElement.textContent = deTitleString;
const descElement = document.createElement('span');
if (hidden === false) {
@@ -111,13 +202,11 @@ const showNotes = async () => {
detailsElement.appendChild(descElement);
const bottomContentElement = document.createElement('div');
bottomContentElement.classList.add('bottom-content');
- const dateElement = document.createElement('span');
- dateElement.textContent = date;
const editIconElement = document.createElement('i');
editIconElement.classList.add('fa-solid', 'fa-pen', 'note-action');
editIconElement.tabIndex = 0;
editIconElement.setAttribute('data-note-id', id);
- editIconElement.setAttribute('data-note-title', title);
+ editIconElement.setAttribute('data-note-title', deTitleString);
editIconElement.setAttribute('data-note-desc', descEnd);
editIconElement.setAttribute('data-note-color', couleur);
editIconElement.setAttribute('data-note-hidden', hidden);
@@ -127,7 +216,6 @@ const showNotes = async () => {
trashIconElement.tabIndex = 0;
trashIconElement.setAttribute('data-note-id', id);
trashIconElement.setAttribute('role', 'button');
- bottomContentElement.appendChild(dateElement);
bottomContentElement.appendChild(editIconElement);
bottomContentElement.appendChild(trashIconElement);
@@ -143,7 +231,7 @@ const showNotes = async () => {
downloadIconElement.classList.add('fa-solid', 'fa-download', 'note-action');
downloadIconElement.tabIndex = 0;
downloadIconElement.setAttribute('data-note-id', id);
- downloadIconElement.setAttribute('data-note-title', title);
+ downloadIconElement.setAttribute('data-note-title', deTitleString);
downloadIconElement.setAttribute('data-note-desc', descEnd);
downloadIconElement.setAttribute('role', 'button');
bottomContentElement.appendChild(downloadIconElement);
@@ -164,7 +252,7 @@ const showNotes = async () => {
paragraph.setAttribute('role', 'button');
const titleSpan = document.createElement('span');
titleSpan.classList.add('titleList');
- titleSpan.textContent = title;
+ titleSpan.textContent = deTitleString;
const dateSpan = document.createElement('span');
dateSpan.classList.add('dateList');
dateSpan.textContent = date;
@@ -179,7 +267,6 @@ const showNotes = async () => {
const toggleFullscreen = (id) => {
const note = document.querySelector(`#note${id}`);
note.classList.toggle('fullscreen');
- darken.classList.toggle('show');
document.body.classList.toggle('noscroll');
};
@@ -188,13 +275,12 @@ const updateNote = (id, title, desc, couleur, hidden) => {
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
- darken.classList.remove('show');
document.body.classList.add('noscroll');
document.querySelector('#idNoteInput').value = id;
isUpdate = true;
document.querySelector('.icon').click();
- titleTag.value = title;
- descTag.value = s;
+ titleNote.value = title;
+ contentNote.value = s;
couleurs.forEach((couleurSpan) => {
if (couleurSpan.classList.contains(couleur)) {
couleurSpan.classList.add('selectionne');
@@ -203,7 +289,7 @@ const updateNote = (id, title, desc, couleur, hidden) => {
}
});
if (hidden === 'true') { document.querySelector('#checkHidden').checked = true; }
- descTag.focus();
+ contentNote.focus();
};
const downloadNote = (e, t) => {
@@ -235,7 +321,6 @@ const deleteNote = (e) => {
if (window.confirm('Voulez-vous vraiment supprimer cette note ?')) {
notesJSON.splice(e, 1);
localStorage.setItem('local_notes', JSON.stringify(notesJSON));
- darken.classList.remove('show');
showNotes();
}
};
@@ -305,7 +390,6 @@ document.querySelectorAll('.creercompte').forEach((element) => {
element.addEventListener('click', () => {
connectBox.classList.remove('show');
creerBox.classList.add('show');
- document.body.classList.add('noscroll');
document.querySelector('#nomCreer').focus();
});
element.addEventListener('keydown', (event) => {
@@ -400,7 +484,7 @@ document.querySelector('#submitSeConnecter').addEventListener('click', async ()
document.querySelectorAll('.icon, .iconFloat').forEach((element) => {
element.addEventListener('click', () => {
- popupBox.classList.add('show');
+ noteBox.classList.add('show');
document.body.classList.add('noscroll');
document.querySelector('#title').focus();
});
@@ -422,28 +506,58 @@ couleurs.forEach((span, index) => {
if (index === 0) span.classList.add('selectionne');
});
-document.querySelector('#submitNote').addEventListener('click', () => {
+document.querySelector('#submitNote').addEventListener('click', async () => {
const couleurSpan = document.querySelector('.couleurs span.selectionne');
- const v = couleurSpan.classList[0];
- const e = titleTag.value.trim();
- const t = descTag.value.trim().replaceAll(//g, '>');
- const g = document.querySelector('#checkHidden').checked;
- if (!e || e.length > 30 || t.length > 5000) return;
- const c = {
- title: e,
- desc: t,
- couleur: v,
+ const couleur = couleurSpan.classList[0];
+ const title = titleNote.value.trim();
+ const content = contentNote.value.trim().replaceAll(//g, '>');
+ const hidden = document.querySelector('#checkHidden').checked;
+
+ if (!title || title.length > 30 || content.length > 5000) return;
+
+ const dbName = 'notes_db';
+ const objectStoreName = 'key';
+ const db = await openIndexedDB(dbName, objectStoreName);
+ let key = await getKeyFromDB(db, objectStoreName);
+
+ if (!key) {
+ key = await window.crypto.subtle.generateKey(
+ { name: 'AES-GCM', length: 256 },
+ true,
+ ['encrypt', 'decrypt'],
+ );
+ await storeKeyInDB(db, objectStoreName, key);
+ }
+
+ const enTitle = await window.crypto.subtle.encrypt(
+ { name: 'AES-GCM', iv: new Uint8Array(12) },
+ key,
+ new TextEncoder().encode(JSON.stringify(title)),
+ );
+
+ const enContent = await window.crypto.subtle.encrypt(
+ { name: 'AES-GCM', iv: new Uint8Array(12) },
+ key,
+ new TextEncoder().encode(JSON.stringify(content)),
+ );
+
+ const note = {
+ title: arrayBufferToBase64(enTitle),
+ content: arrayBufferToBase64(enContent),
+ couleur,
date: new Date().toISOString().slice(0, 19).replace('T', ' '),
- hidden: g,
+ hidden,
};
+
if (isUpdate) {
isUpdate = false;
- notesJSON[document.querySelector('#idNoteInput').value] = c;
+ notesJSON[document.querySelector('#idNoteInput').value] = note;
} else {
- notesJSON.push(c);
+ notesJSON.push(note);
}
+
localStorage.setItem('local_notes', JSON.stringify(notesJSON));
- popupBox.classList.remove('show');
+ noteBox.classList.remove('show');
document.body.classList.remove('noscroll');
showNotes();
});
@@ -451,7 +565,6 @@ document.querySelector('#submitNote').addEventListener('click', () => {
document.querySelectorAll('#menuIcon').forEach((element) => {
element.addEventListener('click', () => {
document.querySelector('.sideBar').classList.add('show');
- darken.classList.toggle('show');
});
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
@@ -471,16 +584,14 @@ document.body.addEventListener('touchmove', (e) => {
document.body.addEventListener('touchend', () => {
const swipeDistance = touchEnd - touchStart;
- if (swipeDistance > 50 && !sideBar.classList.contains('show')) {
+ if (swipeDistance > 100 && !sideBar.classList.contains('show')) {
sideBar.classList.add('show');
- darken.classList.add('show');
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
document.body.classList.add('noscroll');
- } else if (swipeDistance < -50 && sideBar.classList.contains('show')) {
+ } else if (swipeDistance < -100 && sideBar.classList.contains('show')) {
sideBar.classList.remove('show');
- darken.classList.remove('show');
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
@@ -504,10 +615,9 @@ document.querySelectorAll('header i').forEach((element) => {
element.addEventListener('click', () => {
isUpdate = false;
forms.forEach((form) => form.reset());
- popupBox.classList.remove('show');
+ noteBox.classList.remove('show');
connectBox.classList.remove('show');
creerBox.classList.remove('show');
- darken.classList.remove('show');
document.body.classList.remove('noscroll');
document.querySelector('.sideBar').classList.remove('show');
});
@@ -543,15 +653,13 @@ document.querySelector('#btnTheme').addEventListener('click', () => {
}
});
-document.querySelector('.language').addEventListener('change', () => {
- const e = document.querySelector('.language').value;
+document.querySelector('#language').addEventListener('change', () => {
+ const e = document.querySelector('#language').value;
if (e === 'fr') {
window.location.href = './';
- }
- else if (e === 'en') {
+ } else if (e === 'en') {
window.location.href = 'en/';
- }
- else if (e === 'de') {
+ } else if (e === 'de') {
window.location.href = 'de/';
}
});
diff --git a/src/assets/js/scriptConnect.js b/src/assets/js/scriptConnect.js
index 2e2621d..ebeccdd 100644
--- a/src/assets/js/scriptConnect.js
+++ b/src/assets/js/scriptConnect.js
@@ -5,13 +5,12 @@ let touchEnd = 0;
let timeoutCopy = null;
let timeoutError = null;
const notesContainer = document.querySelector('main');
-const popupBoxConnect = document.querySelector('.connect-popup-box');
+const noteBox = document.querySelector('.note-popup-box');
const popupBoxGestion = document.querySelector('.gestion-popup-box');
const privateNote = document.querySelector('.private-note-popup-box');
const publicNote = document.querySelector('.public-note-popup-box');
-const titleTagConnect = popupBoxConnect.querySelector('#titleConnect');
-const descTagConnect = popupBoxConnect.querySelector('textarea');
-const darken = document.querySelector('.darken');
+const titleNote = noteBox.querySelector('#title');
+const contentNote = noteBox.querySelector('#content');
const switchElement = document.querySelector('.switch');
const couleurs = document.querySelectorAll('.couleurs span');
const forms = document.querySelectorAll('form');
@@ -120,8 +119,6 @@ const showNotesConnect = async () => {
detailsElement.appendChild(descElement);
const bottomContentElement = document.createElement('div');
bottomContentElement.classList.add('bottom-content');
- const dateElement = document.createElement('span');
- dateElement.textContent = date;
const editIconElement = document.createElement('i');
editIconElement.classList.add('fa-solid', 'fa-pen', 'note-action');
editIconElement.tabIndex = 0;
@@ -132,7 +129,6 @@ const showNotesConnect = async () => {
editIconElement.setAttribute('data-note-hidden', hidden);
editIconElement.setAttribute('data-note-link', link);
editIconElement.setAttribute('role', 'button');
- bottomContentElement.appendChild(dateElement);
bottomContentElement.appendChild(editIconElement);
if (link === '') {
@@ -172,8 +168,6 @@ const showNotesConnect = async () => {
linkIconElement.classList.add('fa-solid', 'fa-link', 'note-action');
linkIconElement.tabIndex = 0;
linkIconElement.setAttribute('data-note-id', id);
- linkIconElement.setAttribute('data-note-title', title);
- linkIconElement.setAttribute('data-note-desc', descEnd);
linkIconElement.setAttribute('data-note-link', link);
linkIconElement.setAttribute('role', 'button');
bottomContentElement.appendChild(linkIconElement);
@@ -192,6 +186,11 @@ const showNotesConnect = async () => {
dateSpan.classList.add('dateList');
dateSpan.textContent = date;
paragraph.appendChild(titleSpan);
+ if (link !== '') {
+ const iconLink = document.createElement('i');
+ iconLink.classList.add('fa-solid', 'fa-link');
+ paragraph.appendChild(iconLink);
+ }
paragraph.appendChild(dateSpan);
document.querySelector('.sideBar .listNotes').appendChild(paragraph);
});
@@ -200,7 +199,6 @@ const showNotesConnect = async () => {
};
const fetchDelete = async (e) => {
- darken.classList.remove('show');
document.body.classList.remove('noscroll');
try {
await fetch('assets/php/deleteNote.php', {
@@ -251,7 +249,6 @@ const fetchLogout = async () => {
const toggleFullscreen = (id) => {
const note = document.querySelector(`#note${id}`);
note.classList.toggle('fullscreen');
- darken.classList.toggle('show');
document.body.classList.toggle('noscroll');
};
@@ -259,14 +256,13 @@ const updateNoteConnect = (id, title, desc, couleur, hidden, link) => {
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
- darken.classList.remove('show');
document.body.classList.add('noscroll');
isUpdate = true;
document.querySelector('.iconConnect').click();
- document.querySelector('#idNoteInputConnect').value = id;
+ document.querySelector('#idNoteInput').value = id;
document.querySelector('#checkLink').value = link;
- titleTagConnect.value = title;
- descTagConnect.value = replaceAllStart(desc);
+ titleNote.value = title;
+ contentNote.value = replaceAllStart(desc);
couleurs.forEach((couleurSpan) => {
if (couleurSpan.classList.contains(couleur)) {
couleurSpan.classList.add('selectionne');
@@ -280,7 +276,7 @@ const updateNoteConnect = (id, title, desc, couleur, hidden, link) => {
} else {
document.querySelector('#checkHidden').disabled = true;
}
- descTagConnect.focus();
+ contentNote.focus();
};
const downloadNote = (e, t) => {
@@ -314,17 +310,14 @@ const deleteNoteConnect = (e) => {
}
};
-const noteAccess = (id, link, title, desc) => {
+const noteAccess = (id, link) => {
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
- darken.classList.remove('show');
document.body.classList.add('noscroll');
if (link === '') {
privateNote.classList.add('show');
document.querySelector('#idNoteInputPublic').value = id;
- document.querySelector('#titleNoteInputPublic').value = title;
- document.querySelector('#descNoteInputPublic').value = desc;
} else {
publicNote.classList.add('show');
document.querySelector('#idNoteInputPrivate').value = id;
@@ -389,9 +382,9 @@ switchElement.addEventListener('keydown', (event) => {
document.querySelectorAll('.iconConnect, .iconConnectFloat').forEach((element) => {
element.addEventListener('click', () => {
- popupBoxConnect.classList.add('show');
+ noteBox.classList.add('show');
document.body.classList.add('noscroll');
- titleTagConnect.focus();
+ titleNote.focus();
});
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') element.click();
@@ -432,7 +425,6 @@ document.querySelectorAll('.supprimerCompte').forEach((element) => {
document.querySelectorAll('#menuIcon').forEach((element) => {
element.addEventListener('click', () => {
sideBar.classList.add('show');
- darken.classList.toggle('show');
});
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
@@ -452,16 +444,14 @@ document.body.addEventListener('touchmove', (e) => {
document.body.addEventListener('touchend', () => {
const swipeDistance = touchEnd - touchStart;
- if (swipeDistance > 50 && !sideBar.classList.contains('show')) {
+ if (swipeDistance > 100 && !sideBar.classList.contains('show')) {
sideBar.classList.add('show');
- darken.classList.add('show');
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
document.body.classList.remove('noscroll');
- } else if (swipeDistance < -50 && sideBar.classList.contains('show')) {
+ } else if (swipeDistance < -100 && sideBar.classList.contains('show')) {
sideBar.classList.remove('show');
- darken.classList.remove('show');
document.querySelectorAll('.note').forEach((note) => {
note.classList.remove('fullscreen');
});
@@ -485,11 +475,10 @@ document.querySelectorAll('header i').forEach((element) => {
element.addEventListener('click', () => {
isUpdate = false;
forms.forEach((form) => form.reset());
- popupBoxConnect.classList.remove('show');
+ noteBox.classList.remove('show');
popupBoxGestion.classList.remove('show');
publicNote.classList.remove('show');
privateNote.classList.remove('show');
- darken.classList.remove('show');
document.body.classList.remove('noscroll');
sideBar.classList.remove('show');
});
@@ -525,15 +514,13 @@ document.querySelector('#btnTheme').addEventListener('click', () => {
}
});
-document.querySelector('.language').addEventListener('change', () => {
- const e = document.querySelector('.language').value;
+document.querySelector('#language').addEventListener('change', () => {
+ const e = document.querySelector('#language').value;
if (e === 'fr') {
window.location.href = './';
- }
- else if (e === 'en') {
+ } else if (e === 'en') {
window.location.href = 'en/';
- }
- else if (e === 'de') {
+ } else if (e === 'de') {
window.location.href = 'de/';
}
});
@@ -566,11 +553,11 @@ couleurs.forEach((span, index) => {
if (index === 0) span.classList.add('selectionne');
});
-document.querySelector('#submitNoteConnect').addEventListener('click', async () => {
+document.querySelector('#submitNote').addEventListener('click', async () => {
try {
- const idNote = document.querySelector('#idNoteInputConnect').value;
- const titreBrut = document.querySelector('#titleConnect').value.trim();
- const contentBrut = document.querySelector('#descConnect').value.trim();
+ const idNote = document.querySelector('#idNoteInput').value;
+ const titreBrut = titleNote.value.trim();
+ const contentBrut = contentNote.value.trim();
if (!titreBrut || titreBrut.length > 30 || contentBrut.length > 5000) return;
const titre = encodeURIComponent(titreBrut);
const content = encodeURIComponent(contentBrut.replaceAll(//g, '>'));
@@ -579,7 +566,7 @@ document.querySelector('#submitNoteConnect').addEventListener('click', async ()
const date = new Date().toISOString().slice(0, 19).replace('T', ' ');
const checkBox = document.querySelector('#checkHidden');
const link = encodeURIComponent(document.querySelector('#checkLink').value);
- const hidden = checkBox.checked ? 1 : 0;
+ const hidden = checkBox.checked ? '1' : '0';
const url = isUpdate ? 'assets/php/updateNote.php' : 'assets/php/addNote.php';
const data = isUpdate ? `noteId=${idNote}&title=${titre}&desc=${content}&couleur=${couleur}&date=${date}&hidden=${hidden}&link=${link}&csrf_token_note=${document.querySelector('#csrf_token_note').value}` : `title=${titre}&desc=${content}&couleur=${couleur}&date=${date}&hidden=${hidden}&csrf_token_note=${document.querySelector('#csrf_token_note').value}`;
const response = await fetch(url, {
@@ -590,11 +577,11 @@ document.querySelector('#submitNoteConnect').addEventListener('click', async ()
body: data,
});
if (response.status !== 200) {
- showError('Une erreur est survenue lors de l\'ajout de la note...');
+ showError('La connexion a expiré, veuillez recharger la page...');
return;
}
isUpdate = false;
- popupBoxConnect.classList.remove('show');
+ noteBox.classList.remove('show');
document.body.classList.remove('noscroll');
await showNotesConnect();
} catch (error) {
@@ -656,15 +643,13 @@ document.querySelector('#submitRendrePrivee').addEventListener('click', async ()
document.querySelector('#submitRendrePublique').addEventListener('click', async () => {
const id = document.querySelector('#idNoteInputPublic').value;
const link = Math.random().toString(36).substring(2, 15);
- const title = document.querySelector('#titleNoteInputPublic').value;
- const desc = replaceAllStart(document.querySelector('#descNoteInputPublic').value);
try {
await fetch('assets/php/publicNote.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
- body: `noteId=${encodeURIComponent(id)}&title=${encodeURIComponent(title)}&desc=${encodeURIComponent(desc)}¬eLink=${link}`,
+ body: `noteId=${encodeURIComponent(id)}¬eLink=${link}`,
});
privateNote.classList.remove('show');
document.body.classList.remove('noscroll');
diff --git a/src/assets/js/showdown.min.js b/src/assets/js/showdown.min.js
index 9030b8a..aef7bb5 100644
--- a/src/assets/js/showdown.min.js
+++ b/src/assets/js/showdown.min.js
@@ -1 +1 @@
-!function(){function a(e){"use strict";var r={omitExtraWLInCodeBlocks:{defaultValue:!1,type:"boolean"},noHeaderId:{defaultValue:!1,type:"boolean"},prefixHeaderId:{defaultValue:!1,type:"string"},rawPrefixHeaderId:{defaultValue:!1,type:"boolean"},ghCompatibleHeaderId:{defaultValue:!1,type:"boolean"},rawHeaderId:{defaultValue:!1,type:"boolean"},headerLevelStart:{defaultValue:!1,type:"integer"},parseImgDimensions:{defaultValue:!1,type:"boolean"},simplifiedAutoLink:{defaultValue:!1,type:"boolean"},excludeTrailingPunctuationFromURLs:{defaultValue:!1,type:"boolean"},literalMidWordUnderscores:{defaultValue:!1,type:"boolean"},literalMidWordAsterisks:{defaultValue:!1,type:"boolean"},strikethrough:{defaultValue:!1,type:"boolean"},tables:{defaultValue:!1,type:"boolean"},tablesHeaderId:{defaultValue:!1,type:"boolean"},ghCodeBlocks:{defaultValue:!0,type:"boolean"},tasklists:{defaultValue:!1,type:"boolean"},smoothLivePreview:{defaultValue:!1,type:"boolean"},smartIndentationFix:{defaultValue:!1,type:"boolean"},disableForced4SpacesIndentedSublists:{defaultValue:!1,type:"boolean"},simpleLineBreaks:{defaultValue:!1,type:"boolean"},requireSpaceBeforeHeadingText:{defaultValue:!1,type:"boolean"},ghMentions:{defaultValue:!1,type:"boolean"},ghMentionsLink:{defaultValue:"https://github.com/{u}",type:"string"},encodeEmails:{defaultValue:!0,type:"boolean"},openLinksInNewWindow:{defaultValue:!1,type:"boolean"},backslashEscapesHTMLTags:{defaultValue:!1,type:"boolean"},emoji:{defaultValue:!1,type:"boolean"},underline:{defaultValue:!1,type:"boolean"},ellipsis:{defaultValue:!0,type:"boolean"},completeHTMLDocument:{defaultValue:!1,type:"boolean"},metadata:{defaultValue:!1,type:"boolean"},splitAdjacentBlockquotes:{defaultValue:!1,type:"boolean"}};if(!1===e)return JSON.parse(JSON.stringify(r));var t,a={};for(t in r)r.hasOwnProperty(t)&&(a[t]=r[t].defaultValue);return a}var x={},t={},d={},p=a(!0),h="vanilla",_={github:{omitExtraWLInCodeBlocks:!0,simplifiedAutoLink:!0,excludeTrailingPunctuationFromURLs:!0,literalMidWordUnderscores:!0,strikethrough:!0,tables:!0,tablesHeaderId:!0,ghCodeBlocks:!0,tasklists:!0,disableForced4SpacesIndentedSublists:!0,simpleLineBreaks:!0,requireSpaceBeforeHeadingText:!0,ghCompatibleHeaderId:!0,ghMentions:!0,backslashEscapesHTMLTags:!0,emoji:!0,splitAdjacentBlockquotes:!0},original:{noHeaderId:!0,ghCodeBlocks:!1},ghost:{omitExtraWLInCodeBlocks:!0,parseImgDimensions:!0,simplifiedAutoLink:!0,excludeTrailingPunctuationFromURLs:!0,literalMidWordUnderscores:!0,strikethrough:!0,tables:!0,tablesHeaderId:!0,ghCodeBlocks:!0,tasklists:!0,smoothLivePreview:!0,simpleLineBreaks:!0,requireSpaceBeforeHeadingText:!0,ghMentions:!1,encodeEmails:!0},vanilla:a(!0),allOn:function(){"use strict";var e,r=a(!0),t={};for(e in r)r.hasOwnProperty(e)&&(t[e]=!0);return t}()};function g(e,r){"use strict";var t=r?"Error in "+r+" extension->":"Error in unnamed extension",a={valid:!0,error:""};x.helper.isArray(e)||(e=[e]);for(var n=0;n[^\r]+?<\/pre>)/gm,function(e,r){return r.replace(/^ /gm,"¨0").replace(/¨0/g,"")}),x.subParser("hashBlock")(""+e+"\n
",r,t)}),e=t.converter._dispatch("blockQuotes.after",e,r,t)}),x.subParser("codeBlocks",function(e,n,s){"use strict";e=s.converter._dispatch("codeBlocks.before",e,n,s);return e=(e=(e+="¨0").replace(/(?:\n\n|^)((?:(?:[ ]{4}|\t).*\n+)+)(\n*[ ]{0,3}[^ \t\n]|(?=¨0))/g,function(e,r,t){var a="\n",r=x.subParser("outdent")(r,n,s);return r=x.subParser("encodeCode")(r,n,s),r="
",x.subParser("hashBlock")(r,n,s)+t})).replace(/¨0/,""),e=s.converter._dispatch("codeBlocks.after",e,n,s)}),x.subParser("codeSpans",function(e,n,s){"use strict";return e=(e=void 0===(e=s.converter._dispatch("codeSpans.before",e,n,s))?"":e).replace(/(^|[^\\])(`+)([^\r]*?[^`])\2(?!`)/gm,function(e,r,t,a){return a=(a=a.replace(/^([ \t]*)/g,"")).replace(/[ \t]*$/g,""),a=r+""+(r=(r=(r=x.subParser("detab")(r,n,s)).replace(/^\n+/g,"")).replace(/\n+$/g,""))+(a=n.omitExtraWLInCodeBlocks?"":a)+""+(a=x.subParser("encodeCode")(a,n,s))+"",a=x.subParser("hashHTMLSpans")(a,n,s)}),e=s.converter._dispatch("codeSpans.after",e,n,s)}),x.subParser("completeHTMLDocument",function(e,r,t){"use strict";if(!r.completeHTMLDocument)return e;e=t.converter._dispatch("completeHTMLDocument.before",e,r,t);var a,n="html",s="",o="",i='',l="",c="";for(a in void 0!==t.metadata.parsed.doctype&&(s="","html"!==(n=t.metadata.parsed.doctype.toString().toLowerCase())&&"html5"!==n||(i='')),t.metadata.parsed)if(t.metadata.parsed.hasOwnProperty(a))switch(a.toLowerCase()){case"doctype":break;case"title":o="