zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

full note fix

Browse source
This commit is contained in:
zyqunix 2025-02-05 21:27:13 +01:00
parent 96d4722500
commit 6abf742eec
3 changed files with 188 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
notes/index.html
View file

@ -5,10 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes</title> <title>Notes</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head> </head>
<body> <body>
<div class="top"> <div class="top">
<button id="new-note">New Note</button> <button id="new-note">New Note</button>
<button id="stop-note">Stop Editing</button>
<button id="export">Export JSON</button>
<label for="import">Import JSON</label>
<input type="file" id="import" accept="application/json">
<span id="editing"></span> <span id="editing"></span>
</div> </div>
<div class="main"> <div class="main">
@ -17,7 +22,7 @@
</div> </div>
<div class="editor" id="editor"> <div class="editor" id="editor">
<textarea name="editor" id="editor-area" placeholder="Enter Text Here..."></textarea> <textarea name="editor" id="editor-area" placeholder="Enter Text Here..."></textarea>
<h1 class="hint">Click on "New Note" and click on the new note to open it!</h1> <h2 class="hint">Click on "New Note" and click on the new note to open it!</h2>
</div> </div>
</div> </div>

140
notes/index.js
View file

@ -1,33 +1,151 @@
const newNoteButton = document.getElementById('new-note'); const newNoteButton = document.getElementById('new-note');
const stopNote = document.getElementById('stop-note');
const notes = document.querySelector('div[id="notes"]'); const notes = document.querySelector('div[id="notes"]');
const editor = document.getElementById('editor-area'); const editor = document.getElementById('editor-area');
const left = document.getElementById('left');
const editingTop = document.getElementById('editing'); const editingTop = document.getElementById('editing');
const exportButton = document.getElementById('export');
const importButton = document.getElementById('import');
let count = 0; let count = 0;
let noteOpen = false; let noteOpen = false;
let currentNote = null; let currentNote = null;
newNoteButton.addEventListener('click', () => { 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'); const newNote = document.createElement('button');
count++;
newNote.className = "new-note"; newNote.className = "new-note";
newNote.id = count; newNote.id = note.id;
newNote.innerHTML = `#${note.id} ${note.time}`;
let currentTime = `${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()}, ${new Date().getHours()}:${new Date().getMinutes()}`;
newNote.innerHTML = `#${count} ${currentTime}`;
notes.appendChild(newNote);
newNote.addEventListener('click', () => { newNote.addEventListener('click', () => {
noteOpen = true;
if (currentNote) { if (currentNote) {
saveCurrentNoteContent();
currentNote.style.backgroundColor = ''; currentNote.style.backgroundColor = '';
} }
document.querySelector('h2[class="hint"]').style.opacity = "0";
noteOpen = true;
currentNote = newNote; currentNote = newNote;
document.querySelector('h1[class="hint"]').innerHTML = `Editing #${currentNote.id}`;
editor.style.display = "flex"; editor.style.display = "flex";
editor.value = note.content;
currentNote.style.backgroundColor = '#404040'; currentNote.style.backgroundColor = '#404040';
editingTop.innerHTML = `Editing <strong>${newNote.innerHTML}</strong>`; editingTop.innerHTML = `Editing <strong>${newNote.innerHTML}</strong>`;
}); });
newNote.addEventListener('mousedown', (e) => {
if (e.shiftKey) {
renameCurrentNote();
}
});
return newNote;
}
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();
}); });
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();

58
notes/style.css
View file

@ -19,7 +19,8 @@ div.top div#editing {
width: max-content; width: max-content;
} }
div.top > button { div.top > button,
div.top > label {
padding: 8px; padding: 8px;
margin: 10px 4px 10px 10px; margin: 10px 4px 10px 10px;
cursor: pointer; cursor: pointer;
@ -29,11 +30,17 @@ div.top > button {
border-radius: 5px; border-radius: 5px;
} }
div.top > button:not(:nth-child(1)) { div.top > input {
margin: 10px 4px 10px 4px; display: none;
} }
div.top > button:hover { 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; cursor: pointer;
background-color: rgb(42, 42, 42); background-color: rgb(42, 42, 42);
color: white; color: white;
@ -93,4 +100,45 @@ button[class="new-note open"] {
box-sizing: border-box; box-sizing: border-box;
resize: none; resize: none;
display: 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;
}
}