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

unfinished notes

Browse source
This commit is contained in:
zyqunix 2025-02-05 17:36:35 +01:00
parent 11b3210dcc
commit 96d4722500
3 changed files with 155 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
notes/index.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top">
<button id="new-note">New Note</button>
<span id="editing"></span>
</div>
<div class="main">
<div class="left" id="left">
<div id="notes"></div>
</div>
<div class="editor" id="editor">
<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>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

33
notes/index.js Normal file
View file

@ -0,0 +1,33 @@
const newNoteButton = document.getElementById('new-note');
const notes = document.querySelector('div[id="notes"]');
const editor = document.getElementById('editor-area');
const left = document.getElementById('left');
const editingTop = document.getElementById('editing');
let count = 0;
let noteOpen = false;
let currentNote = null;
newNoteButton.addEventListener('click', () => {
const newNote = document.createElement('button');
count++;
newNote.className = "new-note";
newNote.id = count;
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', () => {
noteOpen = true;
if (currentNote) {
currentNote.style.backgroundColor = '';
}
currentNote = newNote;
document.querySelector('h1[class="hint"]').innerHTML = `Editing #${currentNote.id}`;
editor.style.display = "flex";
currentNote.style.backgroundColor = '#404040';
editingTop.innerHTML = `Editing <strong>${newNote.innerHTML}</strong>`;
});
});

96
notes/style.css Normal file
View file

@ -0,0 +1,96 @@
@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);
user-select: none;
z-index: 9999;
}
div.top div#editing {
width: max-content;
}
div.top > button {
padding: 8px;
margin: 10px 4px 10px 10px;
cursor: pointer;
background-color: #242424;
color: white;
border: 2px solid #242424;
border-radius: 5px;
}
div.top > button:not(:nth-child(1)) {
margin: 10px 4px 10px 4px;
}
div.top > button: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;
}