2025-05-20 19:41:05 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>MNotes</title>
|
2025-05-20 20:03:37 +02:00
|
|
|
|
2025-05-20 19:41:05 +02:00
|
|
|
<!-- Material Symbols -->
|
|
|
|
|
<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" />
|
2025-05-20 20:03:37 +02:00
|
|
|
|
2025-05-20 20:13:24 +02:00
|
|
|
<!-- Roboto Font -->
|
2025-05-20 20:03:37 +02:00
|
|
|
<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">
|
|
|
|
|
|
2025-05-20 20:21:35 +02:00
|
|
|
<!-- CRITICAL FIX: Import Map for resolving bare module specifiers like "tslib" -->
|
|
|
|
|
<script type="importmap">
|
|
|
|
|
{
|
|
|
|
|
"imports": {
|
|
|
|
|
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.min.js",
|
|
|
|
|
"@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@1.4.1/"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- Material Web Components (MWC) - Using a more recent version -->
|
|
|
|
|
<!-- This MUST come AFTER the importmap -->
|
2025-05-20 20:03:37 +02:00
|
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.4.1/all.js"></script>
|
|
|
|
|
|
2025-05-20 19:41:05 +02:00
|
|
|
<style>
|
2025-05-20 20:03:37 +02:00
|
|
|
body {
|
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
|
|
|
margin: 0;
|
2025-05-20 20:13:24 +02:00
|
|
|
background-color: #fff; /* Fallback */
|
|
|
|
|
color: #000; /* Fallback */
|
|
|
|
|
opacity: 0; /* Hidden by default to prevent FOUC */
|
|
|
|
|
transition: opacity 0.3s ease-in-out;
|
2025-05-20 20:03:37 +02:00
|
|
|
}
|
|
|
|
|
body.loaded {
|
2025-05-20 20:13:24 +02:00
|
|
|
opacity: 1; /* Shown when MWC and app script are ready */
|
2025-05-20 19:41:05 +02:00
|
|
|
}
|
2025-05-20 20:13:24 +02:00
|
|
|
/* Hide dialog by default to prevent flash of unstyled content */
|
|
|
|
|
md-dialog:not([open]) {
|
|
|
|
|
display: none !important;
|
2025-05-20 19:41:05 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
2025-05-20 20:03:37 +02:00
|
|
|
<header>
|
|
|
|
|
<h1 id="appTitle">MNotes</h1>
|
|
|
|
|
<md-icon-button id="themeToggleBtn" aria-label="Toggle theme">
|
2025-05-20 20:21:35 +02:00
|
|
|
<md-icon>dark_mode</md-icon>
|
2025-05-20 20:03:37 +02:00
|
|
|
</md-icon-button>
|
2025-05-20 19:41:05 +02:00
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div id="notesList">
|
2025-05-20 20:13:24 +02:00
|
|
|
<!-- Notes will be rendered here -->
|
2025-05-20 19:41:05 +02:00
|
|
|
</div>
|
|
|
|
|
|
2025-05-20 20:03:37 +02:00
|
|
|
<md-fab aria-label="Add Note" id="addNoteFab" variant="primary">
|
2025-05-20 20:21:35 +02:00
|
|
|
<md-icon slot="icon">add</md-icon>
|
2025-05-20 19:41:05 +02:00
|
|
|
</md-fab>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<md-dialog id="noteDialog">
|
|
|
|
|
<div slot="headline">Add/Edit Note</div>
|
|
|
|
|
<form slot="content" id="noteForm" method="dialog">
|
|
|
|
|
<input type="hidden" id="noteIdInput">
|
2025-05-20 20:03:37 +02:00
|
|
|
<md-filled-text-field label="Title" id="noteTitleInput" required style="width: 100%; margin-bottom: 16px;"></md-filled-text-field>
|
|
|
|
|
<md-outlined-text-field label="Content" id="noteContentInput" type="textarea" rows="5" required style="width: 100%; margin-bottom: 16px;"></md-outlined-text-field>
|
2025-05-20 19:41:05 +02:00
|
|
|
</form>
|
|
|
|
|
<div slot="actions">
|
|
|
|
|
<md-text-button form="noteForm" value="cancel">Cancel</md-text-button>
|
2025-05-20 20:03:37 +02:00
|
|
|
<md-filled-button form="noteForm" value="save" type="submit">Save</md-filled-button>
|
2025-05-20 19:41:05 +02:00
|
|
|
</div>
|
|
|
|
|
</md-dialog>
|
|
|
|
|
|
2025-05-20 20:21:35 +02:00
|
|
|
<script src="script.js"></script>
|
2025-05-20 19:41:05 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
