Update index.html

Pico jestli toto nepujde zase to repo mazu
This commit is contained in:
Jakub Růžička 2025-05-20 20:54:01 +02:00 committed by GitHub
parent 6f96b27dc9
commit 13c53babc6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -4,89 +4,890 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MNotes</title> <title>MNotes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css">
<!-- Material Symbols --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap">
<!-- Roboto Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- CRITICAL FIX: Expanded Import Map for resolving bare module specifiers -->
<!-- Switched ALL CDN links to unpkg.com for better path resolution -->
<script type="importmap">
{
"imports": {
"tslib": "https://unpkg.com/tslib@2.6.2/tslib.js", <-- CHANGED THIS LINE
"@material/web/": "https://unpkg.com/@material/web@1.4.1/",
"lit": "https://unpkg.com/lit@3.1.2/index.js",
"lit/decorators.js": "https://unpkg.com/lit@3.1.2/decorators.js",
"lit/directives/class-map.js": "https://unpkg.com/lit@3.1.2/directives/class-map.js",
"lit/directives/when.js": "https://unpkg.com/lit@3.1.2/directives/when.js",
"lit/html.js": "https://unpkg.com/lit@3.1.2/html.js",
"lit/preact-render-to-string.js": "https://unpkg.com/lit@3.1.2/preact-render-to-string.js",
"lit/reactive-element.js": "https://unpkg.com/lit@3.1.2/reactive-element.js",
"@lit/reactive-element/": "https://unpkg.com/@lit/reactive-element@3.1.2/"
}
}
</script>
<!-- Material Web Components (MWC) - This MUST come AFTER the importmap -->
<!-- Switched to unpkg.com -->
<script type="module" src="https://unpkg.com/@material/web@1.4.1/all.js"></script>
<style> <style>
:root {
/* Material 3 (You/Expressive) Colors - Light Theme */
--primary-color: #006A6A;
--on-primary-color: #FFFFFF;
--primary-container-color: #6FF7F7;
--on-primary-container-color: #002020;
--secondary-color: #4A6363;
--on-secondary-color: #FFFFFF;
--secondary-container-color: #CCE8E7;
--on-secondary-container-color: #051F1F;
--tertiary-color: #4B607C;
--on-tertiary-color: #FFFFFF;
--tertiary-container-color: #D3E4FF;
--on-tertiary-container-color: #041C35;
--error-color: #BA1A1A;
--on-error-color: #FFFFFF;
--error-container-color: #FFDAD6;
--on-error-container-color: #410002;
--surface-color: #FAFDFC;
--on-surface-color: #191C1C;
--surface-variant-color: #DAE5E3;
--on-surface-variant-color: #3F4948;
--outline-color: #6F7978;
--background-color: #FAFDFC;
--on-background-color: #191C1C;
--elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
--elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
--elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
--surface-tint-color: #006A6A;
}
.theme-dark {
/* Material 3 (You/Expressive) Colors - Dark Theme */
--primary-color: #4CDADA;
--on-primary-color: #003737;
--primary-container-color: #004F4F;
--on-primary-container-color: #6FF7F7;
--secondary-color: #B0CCCC;
--on-secondary-color: #1B3534;
--secondary-container-color: #324B4B;
--on-secondary-container-color: #CCE8E7;
--tertiary-color: #B4C8E9;
--on-tertiary-color: #1C314B;
--tertiary-container-color: #334863;
--on-tertiary-container-color: #D3E4FF;
--error-color: #FFB4AB;
--on-error-color: #690005;
--error-container-color: #93000A;
--on-error-container-color: #FFDAD6;
--surface-color: #191C1C;
--on-surface-color: #E0E3E2;
--surface-variant-color: #3F4948;
--on-surface-variant-color: #BEC9C7;
--outline-color: #899392;
--background-color: #191C1C;
--on-background-color: #E0E3E2;
--elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35);
--elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.35);
--elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.35);
--surface-tint-color: #4CDADA;
}
.theme-sepia {
/* Material 3 (You/Expressive) Colors - Sepia Theme */
--primary-color: #8B5000;
--on-primary-color: #FFFFFF;
--primary-container-color: #FFDDB7;
--on-primary-container-color: #2C1700;
--secondary-color: #735A41;
--on-secondary-color: #FFFFFF;
--secondary-container-color: #FFDDBD;
--on-secondary-container-color: #291805;
--tertiary-color: #5B6237;
--on-tertiary-color: #FFFFFF;
--tertiary-container-color: #DFE8B2;
--on-tertiary-container-color: #181E00;
--error-color: #BA1A1A;
--on-error-color: #FFFFFF;
--error-container-color: #FFDAD6;
--on-error-container-color: #410002;
--surface-color: #FFFBFF;
--on-surface-color: #201B16;
--surface-variant-color: #F0E0CF;
--on-surface-variant-color: #4E4539;
--outline-color: #7F7667;
--background-color: #FFF8F3;
--on-background-color: #201B16;
--elevation-level-1: 0px 1px 3px 1px rgba(139, 80, 0, 0.15);
--elevation-level-2: 0px 2px 6px 2px rgba(139, 80, 0, 0.15);
--elevation-level-3: 0px 4px 8px 3px rgba(139, 80, 0, 0.15);
--surface-tint-color: #8B5000;
}
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Google Sans', 'Roboto', sans-serif;
margin: 0; margin: 0;
background-color: #fff; /* Fallback */ padding: 0;
color: #000; /* Fallback */ background-color: var(--background-color);
opacity: 0; /* Hidden by default to prevent FOUC */ color: var(--on-background-color);
transition: opacity 0.3s ease-in-out; transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
} }
body.loaded {
opacity: 1; /* Shown when MWC and app script are ready */ .header {
background-color: var(--primary-color);
color: var(--on-primary-color);
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--elevation-level-2);
z-index: 10;
} }
/* Hide dialog by default to prevent flash of unstyled content */
md-dialog:not([open]) { .app-title {
display: none !important; font-size: 1.5rem;
font-weight: 500;
margin: 0;
font-family: 'Google Sans', sans-serif;
}
.main-container {
display: flex;
flex: 1;
overflow: hidden;
}
.sidebar {
width: 280px;
background-color: var(--surface-color);
border-right: 1px solid var(--outline-color);
display: flex;
flex-direction: column;
overflow-y: auto;
box-shadow: var(--elevation-level-1);
}
.sidebar-header {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--outline-color);
background-color: var(--surface-variant-color);
color: var(--on-surface-variant-color);
}
.note-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
overflow-y: auto;
}
.note-item {
padding: 16px;
cursor: pointer;
border-bottom: 1px solid var(--outline-color);
transition: background-color 0.2s, transform 0.1s;
border-radius: 12px;
margin: 8px;
}
.note-item:hover {
background-color: var(--surface-variant-color);
transform: translateY(-2px);
}
.note-item.active {
background-color: var(--primary-container-color);
color: var(--on-primary-container-color);
box-shadow: var(--elevation-level-1);
}
.note-item-title {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.note-item-preview {
font-size: 0.85rem;
opacity: 0.75;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-container {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.toolbar {
background-color: var(--surface-color);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
padding: 8px 16px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.editor {
flex: 1;
padding: 16px;
overflow-y: auto;
outline: none;
font-size: 1rem;
line-height: 1.6;
border: none;
background-color: var(--surface-color);
color: var(--on-surface-color);
resize: none;
}
.button {
background-color: var(--primary-container-color);
color: var(--on-primary-container-color);
border: none;
border-radius: 20px;
padding: 10px 16px;
font-family: 'Google Sans', sans-serif;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: var(--elevation-level-1);
}
.button:hover {
background-color: var(--primary-container-color);
opacity: 0.9;
box-shadow: var(--elevation-level-2);
}
.button-icon {
font-size: 1.25rem;
}
.theme-selector {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
background-color: var(--surface-variant-color);
border-radius: 24px;
}
.theme-button {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
}
.theme-button.active {
border-color: var(--primary-color);
transform: scale(1.2);
}
.theme-light {
background-color: #FFFBFE;
}
.theme-dark {
background-color: #1C1B1F;
}
.theme-sepia {
background-color: #F5F5DC;
}
.status-bar {
padding: 8px 16px;
font-size: 0.75rem;
background-color: var(--surface-color);
border-top: 1px solid rgba(0, 0, 0, 0.12);
display: flex;
justify-content: space-between;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: var(--surface-color);
padding: 32px;
border-radius: 28px;
width: 100%;
max-width: 400px;
box-shadow: var(--elevation-level-3);
}
.modal-title {
font-size: 1.5rem;
font-weight: 500;
margin-top: 0;
margin-bottom: 24px;
color: var(--on-surface-color);
font-family: 'Google Sans', sans-serif;
}
.form-field {
margin-bottom: 24px;
}
.input-field {
width: 100%;
padding: 16px;
font-family: 'Google Sans', 'Roboto', sans-serif;
font-size: 1rem;
border: 2px solid var(--outline-color);
border-radius: 16px;
background-color: var(--surface-color);
color: var(--on-surface-color);
transition: border-color 0.2s;
}
.input-field:focus {
border-color: var(--primary-color);
outline: none;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.info-message {
background-color: var(--container-color);
color: var(--on-container-color);
padding: 8px 16px;
margin: 8px 0;
border-radius: 4px;
display: none;
}
@media (max-width: 768px) {
.sidebar {
position: absolute;
left: -250px;
height: 100%;
transition: left 0.3s ease;
z-index: 100;
}
.sidebar.open {
left: 0;
}
.toggle-sidebar {
display: block;
}
}
.hidden {
display: none;
}
.material-symbols-outlined {
font-size: 24px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="header">
<header> <div class="left-section">
<h1 id="appTitle">MNotes</h1> <button id="toggleSidebar" class="button">
<md-icon-button id="themeToggleBtn" aria-label="Toggle theme"> <span class="material-symbols-rounded">menu</span>
<md-icon>dark_mode</md-icon> </button>
</md-icon-button> <h1 class="app-title">MNotes</h1>
</header> </div>
<div class="theme-selector">
<div id="notesList"> <button class="theme-button theme-light active" data-theme="light" title="Light theme"></button>
<!-- Notes will be rendered here --> <button class="theme-button theme-dark" data-theme="dark" title="Dark theme"></button>
<button class="theme-button theme-sepia" data-theme="sepia" title="Sepia theme"></button>
</div>
</div> </div>
<md-fab aria-label="Add Note" id="addNoteFab" variant="primary"> <div class="main-container">
<md-icon slot="icon">add</md-icon> <div class="sidebar" id="sidebar">
</md-fab> <div class="sidebar-header">
<h2>Notes</h2>
<button id="newNoteBtn" class="button">
<span class="material-symbols-rounded">add</span>
</button>
</div>
<ul class="note-list" id="noteList">
<!-- Note items will be added here -->
</ul>
</div> </div>
<md-dialog id="noteDialog"> <div class="editor-container">
<div slot="headline">Add/Edit Note</div> <div class="toolbar">
<form slot="content" id="noteForm" method="dialog"> <button id="saveNote" class="button">
<input type="hidden" id="noteIdInput"> <span class="material-symbols-rounded">save</span>
<md-filled-text-field label="Title" id="noteTitleInput" required style="width: 100%; margin-bottom: 16px;"></md-filled-text-field> Save
<md-outlined-text-field label="Content" id="noteContentInput" type="textarea" rows="5" required style="width: 100%; margin-bottom: 16px;"></md-outlined-text-field> </button>
</form> <button id="downloadNote" class="button">
<div slot="actions"> <span class="material-symbols-rounded">download</span>
<md-text-button form="noteForm" value="cancel">Cancel</md-text-button> Download
<md-filled-button form="noteForm" value="save" type="submit">Save</md-filled-button> </button>
<button id="githubSave" class="button">
<span class="material-symbols-rounded">cloud_upload</span>
Save to GitHub
</button>
<button id="deleteNote" class="button">
<span class="material-symbols-rounded">delete</span>
Delete
</button>
</div>
<textarea id="editor" class="editor" placeholder="Start typing your note here..."></textarea>
<div class="status-bar">
<span id="wordCount">0 words</span>
<span id="lastSaved">Not saved yet</span>
</div>
</div>
</div> </div>
</md-dialog>
<script src="script.js"></script> <!-- GitHub Auth Modal -->
<div class="modal" id="githubModal">
<div class="modal-content">
<h2 class="modal-title">GitHub Authentication</h2>
<div class="form-field">
<input type="text" id="githubUsername" class="input-field" placeholder="GitHub Username">
</div>
<div class="form-field">
<input type="password" id="githubToken" class="input-field" placeholder="Personal Access Token">
</div>
<div class="form-field">
<input type="text" id="githubRepo" class="input-field" placeholder="Repository Name">
</div>
<div class="info-message" id="githubMessage"></div>
<div class="modal-actions">
<button id="cancelGithubAuth" class="button">Cancel</button>
<button id="confirmGithubAuth" class="button">Connect</button>
</div>
</div>
</div>
<!-- New Note Modal -->
<div class="modal" id="newNoteModal">
<div class="modal-content">
<h2 class="modal-title">Create New Note</h2>
<div class="form-field">
<input type="text" id="newNoteTitle" class="input-field" placeholder="Note Title">
</div>
<div class="modal-actions">
<button id="cancelNewNote" class="button">Cancel</button>
<button id="confirmNewNote" class="button">Create</button>
</div>
</div>
</div>
<script>
// Main app logic
document.addEventListener('DOMContentLoaded', function() {
// State variables
let notes = [];
let currentNoteId = null;
let githubAuth = {
username: '',
token: '',
repo: ''
};
// DOM elements
const editor = document.getElementById('editor');
const noteList = document.getElementById('noteList');
const wordCount = document.getElementById('wordCount');
const lastSaved = document.getElementById('lastSaved');
const toggleSidebarBtn = document.getElementById('toggleSidebar');
const sidebar = document.getElementById('sidebar');
const newNoteBtn = document.getElementById('newNoteBtn');
const saveNoteBtn = document.getElementById('saveNote');
const downloadNoteBtn = document.getElementById('downloadNote');
const githubSaveBtn = document.getElementById('githubSave');
const deleteNoteBtn = document.getElementById('deleteNote');
const themeButtons = document.querySelectorAll('.theme-button');
// Modals
const githubModal = document.getElementById('githubModal');
const githubUsername = document.getElementById('githubUsername');
const githubToken = document.getElementById('githubToken');
const githubRepo = document.getElementById('githubRepo');
const githubMessage = document.getElementById('githubMessage');
const confirmGithubAuth = document.getElementById('confirmGithubAuth');
const cancelGithubAuth = document.getElementById('cancelGithubAuth');
const newNoteModal = document.getElementById('newNoteModal');
const newNoteTitle = document.getElementById('newNoteTitle');
const confirmNewNote = document.getElementById('confirmNewNote');
const cancelNewNote = document.getElementById('cancelNewNote');
// Load data from localStorage
function loadFromLocalStorage() {
// Load notes
const savedNotes = localStorage.getItem('notes');
if (savedNotes) {
notes = JSON.parse(savedNotes);
renderNoteList();
}
// Load theme
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
}
// Load GitHub auth
const savedGithubAuth = localStorage.getItem('githubAuth');
if (savedGithubAuth) {
githubAuth = JSON.parse(savedGithubAuth);
}
}
// Create a new note
function createNewNote(title) {
const newNote = {
id: Date.now().toString(),
title: title || 'Untitled Note',
content: '',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
};
notes.push(newNote);
saveNotesToLocalStorage();
renderNoteList();
openNote(newNote.id);
}
// Open a note
function openNote(noteId) {
const note = notes.find(n => n.id === noteId);
if (!note) return;
currentNoteId = noteId;
editor.value = note.content;
updateWordCount();
updateLastSaved(note.updatedAt);
// Update active state in note list
const noteItems = document.querySelectorAll('.note-item');
noteItems.forEach(item => {
if (item.dataset.id === noteId) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}
// Save the current note
function saveCurrentNote() {
if (!currentNoteId) return;
const noteIndex = notes.findIndex(n => n.id === currentNoteId);
if (noteIndex === -1) return;
notes[noteIndex].content = editor.value;
notes[noteIndex].updatedAt = new Date().toISOString();
saveNotesToLocalStorage();
updateLastSaved(notes[noteIndex].updatedAt);
renderNoteList();
}
// Delete the current note
function deleteCurrentNote() {
if (!currentNoteId) return;
const confirmDelete = confirm('Are you sure you want to delete this note?');
if (!confirmDelete) return;
notes = notes.filter(n => n.id !== currentNoteId);
saveNotesToLocalStorage();
renderNoteList();
if (notes.length > 0) {
openNote(notes[0].id);
} else {
currentNoteId = null;
editor.value = '';
updateWordCount();
updateLastSaved(null);
}
}
// Download the current note as Markdown
function downloadNoteAsMarkdown() {
if (!currentNoteId) return;
const note = notes.find(n => n.id === currentNoteId);
if (!note) return;
const filename = `${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.md`;
const content = note.content;
const blob = new Blob([content], { type: 'text/markdown' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Save to GitHub
async function saveToGithub() {
if (!currentNoteId || !githubAuth.username || !githubAuth.token || !githubAuth.repo) {
showGithubModal();
return;
}
const note = notes.find(n => n.id === currentNoteId);
if (!note) return;
const filename = `notes/${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.md`;
const content = note.content;
try {
// First, try to get the file to see if it exists
let sha;
try {
const getResponse = await fetch(`https://api.github.com/repos/${githubAuth.username}/${githubAuth.repo}/contents/${filename}`, {
headers: {
'Authorization': `token ${githubAuth.token}`
}
});
if (getResponse.status === 200) {
const fileData = await getResponse.json();
sha = fileData.sha;
}
} catch (error) {
// File doesn't exist, that's fine
}
// Now create or update the file
const response = await fetch(`https://api.github.com/repos/${githubAuth.username}/${githubAuth.repo}/contents/${filename}`, {
method: 'PUT',
headers: {
'Authorization': `token ${githubAuth.token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: `Update note: ${note.title}`,
content: btoa(unescape(encodeURIComponent(content))),
sha: sha
})
});
if (response.status === 200 || response.status === 201) {
alert('Note saved to GitHub successfully!');
} else {
const error = await response.json();
throw new Error(error.message);
}
} catch (error) {
alert(`Error saving to GitHub: ${error.message}`);
}
}
// Show GitHub modal
function showGithubModal() {
githubUsername.value = githubAuth.username || '';
githubToken.value = githubAuth.token || '';
githubRepo.value = githubAuth.repo || '';
githubModal.style.display = 'flex';
}
// Hide GitHub modal
function hideGithubModal() {
githubModal.style.display = 'none';
}
// Show new note modal
function showNewNoteModal() {
newNoteTitle.value = '';
newNoteModal.style.display = 'flex';
newNoteTitle.focus();
}
// Hide new note modal
function hideNewNoteModal() {
newNoteModal.style.display = 'none';
}
// Save GitHub auth
function saveGithubAuth() {
githubAuth.username = githubUsername.value.trim();
githubAuth.token = githubToken.value.trim();
githubAuth.repo = githubRepo.value.trim();
if (!githubAuth.username || !githubAuth.token || !githubAuth.repo) {
githubMessage.textContent = 'All fields are required';
githubMessage.style.display = 'block';
return;
}
localStorage.setItem('githubAuth', JSON.stringify(githubAuth));
hideGithubModal();
// Try to save the current note to GitHub
if (currentNoteId) {
saveToGithub();
}
}
// Save notes to localStorage
function saveNotesToLocalStorage() {
localStorage.setItem('notes', JSON.stringify(notes));
}
// Render the note list
function renderNoteList() {
noteList.innerHTML = '';
if (notes.length === 0) {
const emptyItem = document.createElement('li');
emptyItem.className = 'note-item';
emptyItem.textContent = 'No notes yet';
noteList.appendChild(emptyItem);
return;
}
// Sort notes by updated date (newest first)
const sortedNotes = [...notes].sort((a, b) => {
return new Date(b.updatedAt) - new Date(a.updatedAt);
});
sortedNotes.forEach(note => {
const noteItem = document.createElement('li');
noteItem.className = 'note-item';
if (note.id === currentNoteId) {
noteItem.classList.add('active');
}
noteItem.dataset.id = note.id;
const titleElement = document.createElement('div');
titleElement.className = 'note-item-title';
titleElement.textContent = note.title;
const previewElement = document.createElement('div');
previewElement.className = 'note-item-preview';
previewElement.textContent = note.content.substring(0, 50) || 'Empty note';
noteItem.appendChild(titleElement);
noteItem.appendChild(previewElement);
noteItem.addEventListener('click', () => {
openNote(note.id);
});
noteList.appendChild(noteItem);
});
}
// Update word count
function updateWordCount() {
const text = editor.value.trim();
const words = text ? text.split(/\s+/).length : 0;
wordCount.textContent = `${words} word${words === 1 ? '' : 's'}`;
}
// Update last saved timestamp
function updateLastSaved(timestamp) {
if (!timestamp) {
lastSaved.textContent = 'Not saved yet';
return;
}
const date = new Date(timestamp);
lastSaved.textContent = `Last saved: ${date.toLocaleString()}`;
}
// Set theme
function setTheme(theme) {
document.body.className = '';
if (theme !== 'light') {
document.body.classList.add(`theme-${theme}`);
}
themeButtons.forEach(button => {
if (button.dataset.theme === theme) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
localStorage.setItem('theme', theme);
}
// Toggle sidebar (for mobile)
function toggleSidebar() {
sidebar.classList.toggle('open');
}
// Event listeners
editor.addEventListener('input', () => {
updateWordCount();
});
toggleSidebarBtn.addEventListener('click', toggleSidebar);
saveNoteBtn.addEventListener('click', saveCurrentNote);
downloadNoteBtn.addEventListener('click', downloadNoteAsMarkdown);
githubSaveBtn.addEventListener('click', saveToGithub);
deleteNoteBtn.addEventListener('click', deleteCurrentNote);
newNoteBtn.addEventListener('click', showNewNoteModal);
confirmGithubAuth.addEventListener('click', saveGithubAuth);
cancelGithubAuth.addEventListener('click', hideGithubModal);
confirmNewNote.addEventListener('click', () => {
const title = newNoteTitle.value.trim() || 'Untitled Note';
createNewNote(title);
hideNewNoteModal();
});
cancelNewNote.addEventListener('click', hideNewNoteModal);
// Theme selection
themeButtons.forEach(button => {
button.addEventListener('click', () => {
setTheme(button.dataset.theme);
});
});
// Auto-save timer (every 30 seconds)
setInterval(() => {
if (currentNoteId && editor.value) {
saveCurrentNote();
}
}, 30000);
// Initialize
loadFromLocalStorage();
// Create first note if none exist
if (notes.length === 0) {
createNewNote('Welcome Note');
} else {
openNote(notes[0].id);
}
});
</script>
</body> </body>
</html> </html>