mxnticek/MNotes
1
0
Fork 0
mirror of https://github.com/thejakubruzicka/MNotes.git synced 2025-07-10 14:34:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

Update index.html

Browse source
This commit is contained in:
Jakub Růžička 2025-05-20 20:03:37 +02:00 • committed by GitHub
parent bf6c862c87
commit 8f6efd222f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 55 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

87
index.html
View file

@ -4,50 +4,57 @@
<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="style.css">
<!-- Material Symbols --> <!-- 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" /> <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" />
<!-- Material Web Components (MWC) - Using Lit's CDN for simplicity -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.0.0/all.js"></script> <!-- Roboto Font (recommended for Material Design) -->
<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">
<!-- Material Web Components (MWC) - Using a more recent version -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.4.1/all.js"></script>
<style> <style>
/* Pre-render styles to avoid FOUC for MWC */ /* Minimal pre-render styles to avoid FOUC and ensure basic layout */
body { font-family: 'Roboto', sans-serif; margin: 0; background-color: var(--md-sys-color-background); color: var(--md-sys-color-on-background); } body {
.container { max-width: 800px; margin: 20px auto; padding: 0 16px; } font-family: 'Roboto', sans-serif;
.note-card { margin: 0;
margin-bottom: 16px; /* Fallback colors, MWC themes will override */
padding: 16px; background-color: #fff;
border-radius: 12px; /* Expressive rounding */ color: #000;
background-color: var(--md-sys-color-surface-container-highest); opacity: 0; /* Initially hide body to prevent FOUC */
position: relative; transition: opacity 0.2s ease-in-out;
} }
.note-card-actions { body.loaded {
position: absolute; opacity: 1; /* Show body once MWC is likely ready */
top: 8px;
right: 8px;
display: flex;
} }
md-fab { /* Hide dialog by default to prevent flash of content if MWC is slow */
position: fixed; md-dialog {
bottom: 24px; display: none;
right: 24px; }
md-dialog[open] { /* MWC sets 'open' attribute which makes it visible */
display: flex; /* Or block, MWC handles actual display type */
} }
md-dialog { width: min(calc(100vw - 48px), 600px); }
md-dialog [slot="headline"] { font-size: 1.5em; }
md-dialog md-filled-text-field, md-dialog md-outlined-text-field { width: 100%; margin-bottom: 16px;}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header style="display: flex; align-items: center; justify-content: space-between; padding: 16px 0;"> <header>
<h1 style="margin: 0; color: var(--md-sys-color-primary);">MNotes</h1> <h1 id="appTitle">MNotes</h1>
<!-- Maybe a theme toggle later --> <md-icon-button id="themeToggleBtn" aria-label="Toggle theme">
<md-icon>dark_mode</md-icon> <!-- Icon will change dynamically -->
</md-icon-button>
</header> </header>
<div id="notesList"> <div id="notesList">
<!-- Notes will be rendered here --> <!-- Notes will be rendered here by JavaScript -->
</div> </div>
<md-fab aria-label="Add Note" id="addNoteFab"> <md-fab aria-label="Add Note" id="addNoteFab" variant="primary">
<md-icon slot="icon">add</md-icon> <md-icon slot="icon">add</md-icon>
</md-fab> </md-fab>
</div> </div>
@ -57,15 +64,31 @@
<div slot="headline">Add/Edit Note</div> <div slot="headline">Add/Edit Note</div>
<form slot="content" id="noteForm" method="dialog"> <form slot="content" id="noteForm" method="dialog">
<input type="hidden" id="noteIdInput"> <input type="hidden" id="noteIdInput">
<md-filled-text-field label="Title" id="noteTitleInput" required></md-filled-text-field> <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></md-outlined-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>
</form> </form>
<div slot="actions"> <div slot="actions">
<md-text-button form="noteForm" value="cancel">Cancel</md-text-button> <md-text-button form="noteForm" value="cancel">Cancel</md-text-button>
<md-filled-button form="noteForm" value="save">Save</md-filled-button> <md-filled-button form="noteForm" value="save" type="submit">Save</md-filled-button>
</div> </div>
</md-dialog> </md-dialog>
<script src="script.js"></script> <script src="script.js"></script>
<script>
// Add 'loaded' class to body after MWC components are likely defined
function showBody() {
if (customElements.get('md-fab')) { // Check if a MWC component is defined
document.body.classList.add('loaded');
} else {
// Fallback if MWC takes longer or fails for some reason
setTimeout(() => document.body.classList.add('loaded'), 400);
}
}
if (document.readyState === 'loading') {
window.addEventListener('DOMContentLoaded', showBody);
} else {
showBody();
}
</script>
</body> </body>
</html> </html>