Morse Translator
diff --git a/morse/style.css b/morse/style.css
index 479d68d..43d295c 100644
--- a/morse/style.css
+++ b/morse/style.css
@@ -13,8 +13,8 @@ textarea, input, button {
padding: 10px;
border-radius: 10px;
border: none;
- background-color: #333;
- color: #f0f0f0;
+ background-color: var(--surface0);
+ color: var(--text);
}
textarea {
@@ -24,10 +24,10 @@ textarea {
button {
cursor: pointer;
- background-color: #444;
+ background-color: var(--surface0);
}
button:hover {
- background-color: #555;
+ background-color: var(--surface1);
}
diff --git a/notes/index.html b/notes/index.html
deleted file mode 100644
index 9e71722..0000000
--- a/notes/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
-
Notes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Click on "New Note" and click on the new note to open it!
-
-
-
-
-
-
\ No newline at end of file
diff --git a/notes/index.js b/notes/index.js
deleted file mode 100644
index a2cf579..0000000
--- a/notes/index.js
+++ /dev/null
@@ -1,177 +0,0 @@
-const newNoteButton = document.getElementById('new-note');
-const stopNote = document.getElementById('stop-note');
-const notes = document.querySelector('div[id="notes"]');
-const editor = document.getElementById('editor-area');
-const editingTop = document.getElementById('editing');
-const exportButton = document.getElementById('export');
-const importButton = document.getElementById('import');
-
-let count = 0;
-let noteOpen = false;
-let currentNote = null;
-
-function getNotesFromCookies() {
- const notesCookie = document.cookie.split('; ').find(row => row.startsWith('notes='));
- return notesCookie ? JSON.parse(notesCookie.split('=')[1]) : [];
-}
-
-function saveNotesToCookies(notesArray) {
- document.cookie = `notes=${JSON.stringify(notesArray)}; path=/; max-age=31536000`;
-}
-
-function createNoteElement(note) {
- const newNote = document.createElement('button');
- newNote.className = "new-note";
- newNote.id = note.id;
- newNote.innerHTML = `#${note.id} ${note.time}`;
-
- newNote.addEventListener('click', () => {
- if (currentNote) {
- saveCurrentNoteContent();
- currentNote.style.backgroundColor = '';
- }
- document.querySelector('h2[class="hint"]').style.opacity = "0";
- noteOpen = true;
- currentNote = newNote;
- editor.style.display = "flex";
- editor.value = note.content;
- currentNote.style.backgroundColor = '#404040';
- editingTop.innerHTML = `Editing
${newNote.innerHTML}`;
- });
-
- newNote.addEventListener('mousedown', (e) => {
- if (e.shiftKey && e.button === 0) {
- renameCurrentNote();
- } else if (e.shiftKey && e.button === 2) {
- deleteNote(note.id);
- }
- });
-
- newNote.addEventListener('contextmenu', (e) => {
- e.preventDefault();
- });
-
- return newNote;
-}
-
-function deleteNote(noteId) {
- if (confirm("Are you sure you want to delete this note?")) {
- let savedNotes = getNotesFromCookies();
- savedNotes = savedNotes.filter(note => note.id !== noteId);
- saveNotesToCookies(savedNotes);
- updateNotesList();
-
- if (currentNote && parseInt(currentNote.id) === noteId) {
- editor.style.display = 'none';
- document.querySelector('h2[class="hint"]').style.opacity = "1";
- currentNote = null;
- noteOpen = false;
- }
- }
-}
-
-
-function updateNotesList() {
- const savedNotes = getNotesFromCookies();
- notes.innerHTML = '';
- savedNotes.forEach(note => {
- const noteElement = createNoteElement(note);
- notes.appendChild(noteElement);
- });
-}
-
-function saveCurrentNoteContent() {
- if (currentNote) {
- const savedNotes = getNotesFromCookies();
- const noteIndex = savedNotes.findIndex(note => note.id === parseInt(currentNote.id));
- if (noteIndex !== -1) {
- savedNotes[noteIndex].content = editor.value;
- saveNotesToCookies(savedNotes);
- }
- }
-}
-
-function renameCurrentNote() {
- const newTitle = prompt("Enter new title:");
- if (newTitle && currentNote) {
- const savedNotes = getNotesFromCookies();
- const noteIndex = savedNotes.findIndex(note => note.id === parseInt(currentNote.id));
- if (noteIndex !== -1) {
- savedNotes[noteIndex].time = newTitle;
- saveNotesToCookies(savedNotes);
- currentNote.innerHTML = `#${savedNotes[noteIndex].id} ${newTitle}`;
- }
- }
-}
-
-function exportNotes() {
- const savedNotes = getNotesFromCookies();
- const json = JSON.stringify(savedNotes, null, 2);
- const blob = new Blob([json], { type: 'application/json' });
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = `${new Date().getDate()}_${new Date().getMonth() + 1}_${new Date().getFullYear()} ${new Date().getHours()}_${new Date().getMinutes()}-notes.json`;
- a.click();
- URL.revokeObjectURL(url);
-}
-
-function importNotes(event) {
- const file = event.target.files[0];
- if (file && file.type === 'application/json') {
- const reader = new FileReader();
- reader.onload = () => {
- try {
- const importedNotes = JSON.parse(reader.result);
- console.log(importedNotes);
- if (Array.isArray(importedNotes)) {
- saveNotesToCookies(importedNotes);
- updateNotesList();
- } else {
- alert('Invalid JSON structure');
- }
- } catch (e) {
- alert('Failed to parse JSON');
- console.error('Error parsing JSON:', e);
- }
- };
- reader.readAsText(file);
- } else {
- alert('Please select a valid JSON file');
- }
-}
-
-newNoteButton.addEventListener('click', () => {
- const currentTime = `${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()}, ${new Date().getHours()}:${new Date().getMinutes()}`;
- const newNote = {
- id: count + 1,
- time: currentTime,
- content: '',
- };
- count++;
- const newNoteElement = createNoteElement(newNote);
- notes.appendChild(newNoteElement);
-
- const savedNotes = getNotesFromCookies();
- savedNotes.push(newNote);
- saveNotesToCookies(savedNotes);
- updateNotesList();
-
- newNoteElement.click();
-});
-
-
-stopNote.addEventListener('click', () => {
- document.querySelector('h2[class="hint"]').style.opacity = "1";
- noteOpen = false;
- if (currentNote) {
- currentNote.style.backgroundColor = '#303030';
- saveCurrentNoteContent();
- }
- editor.style.display = 'none';
-});
-
-exportButton.addEventListener('click', exportNotes);
-importButton.addEventListener('change', importNotes);
-
-updateNotesList();
diff --git a/notes/style.css b/notes/style.css
deleted file mode 100644
index 98496db..0000000
--- a/notes/style.css
+++ /dev/null
@@ -1,146 +0,0 @@
-@import url(/global.css);
-
-textarea::selection {
- background: Highlight;
- color: HighlightText;
-}
-
-div.top {
- top: 0;
- width: 100%;
- position: fixed;
- background-color: #242424dd;
- backdrop-filter: blur(5px);
- -webkit-backdrop-filter: blur(5px);
- user-select: none;
- z-index: 9999;
-}
-
-div.top div#editing {
- width: max-content;
-}
-
-div.top > button,
-div.top > label {
- padding: 8px;
- margin: 10px 4px 10px 10px;
- cursor: pointer;
- background-color: #242424;
- color: white;
- border: 2px solid #242424;
- border-radius: 5px;
- font-size: 14px;
-}
-
-div.top > input {
- display: none;
-}
-
-div.top > button:not(:nth-child(1)),
-div.top > label:not(:nth-child(1)) {
- margin: 10px 4px 10px 4px;
- }
-
-div.top > button:hover,
-div.top > label:hover {
- cursor: pointer;
- background-color: rgb(42, 42, 42);
- color: white;
- border: 2px solid #282828;
-}
-
-div.left {
- left: 0;
- top: 55px;
- position: absolute;
- background-color: #242424;
- height: 100%;
- max-width: 35%;
- z-index: 2;
-}
-
-#notes {
- display: grid;
- scroll-behavior: smooth;
-}
-
-#notes > button {
- cursor: pointer;
- user-select: none;
- padding: 4px 4px;
- margin: 4px 7px;
- background-color: #303030;
- color: white;
- border: 2px solid transparent;
- text-align: left;
- border-radius: 5px;
-}
-
-button[class="new-note open"] {
- background-color: #353535;
-}
-
-#notes > button:hover {
- background-color: #343434;
-}
-
-#editor-area {
- width: calc(100% - 190px);
- height: 100%;
- position: absolute;
- top: 55px;
- left: 190px;
- background-color: #2a2a2a;
- color: white;
- border: none;
- outline: none;
- overflow-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
- overflow: hidden;
- padding: 10px;
- box-sizing: border-box;
- resize: none;
- display: none;
-}
-
-@media (max-width: 1024px) {
- div.left {
- max-width: 50%;
- }
-
- #editor-area {
- width: calc(100% - 150px);
- left: 150px;
- }
-}
-
-@media (max-width: 768px) {
- div.left {
- max-width: 60%;
- }
-
- #editor-area {
- width: calc(100% - 120px);
- left: 120px;
- }
-}
-
-@media (max-width: 480px) {
- div.left {
- max-width: 100%;
- height: auto;
- position: relative;
- }
-
- #editor-area {
- width: 100%;
- left: 0;
- top: auto;
- position: relative;
- }
-
- div.top {
- position: relative;
- }
-}