Update index.html

This commit is contained in:
Jakub Růžička 2025-05-20 20:13:24 +02:00 committed by GitHub
parent 5bc9c9bdb1
commit f4ca071c9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -8,36 +8,31 @@
<!-- 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" />
<!-- Roboto Font (recommended for Material Design) --> <!-- Roboto Font -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- Material Web Components (MWC) - Using a more recent version --> <!-- Material Web Components (MWC) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.4.1/all.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.4.1/all.js"></script>
<style> <style>
/* Minimal pre-render styles to avoid FOUC and ensure basic layout */
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
/* Fallback colors, MWC themes will override */ background-color: #fff; /* Fallback */
background-color: #fff; color: #000; /* Fallback */
color: #000; opacity: 0; /* Hidden by default to prevent FOUC */
opacity: 0; /* Initially hide body to prevent FOUC */ transition: opacity 0.3s ease-in-out;
transition: opacity 0.2s ease-in-out;
} }
body.loaded { body.loaded {
opacity: 1; /* Show body once MWC is likely ready */ opacity: 1; /* Shown when MWC and app script are ready */
} }
/* Hide dialog by default to prevent flash of content if MWC is slow */ /* Hide dialog by default to prevent flash of unstyled content */
md-dialog { md-dialog:not([open]) {
display: none; display: none !important;
}
md-dialog[open] { /* MWC sets 'open' attribute which makes it visible */
display: flex; /* Or block, MWC handles actual display type */
} }
</style> </style>
</head> </head>
@ -46,20 +41,19 @@
<header> <header>
<h1 id="appTitle">MNotes</h1> <h1 id="appTitle">MNotes</h1>
<md-icon-button id="themeToggleBtn" aria-label="Toggle theme"> <md-icon-button id="themeToggleBtn" aria-label="Toggle theme">
<md-icon>dark_mode</md-icon> <!-- Icon will change dynamically --> <md-icon>dark_mode</md-icon> <!-- Will be correctly rendered by MWC -->
</md-icon-button> </md-icon-button>
</header> </header>
<div id="notesList"> <div id="notesList">
<!-- Notes will be rendered here by JavaScript --> <!-- Notes will be rendered here -->
</div> </div>
<md-fab aria-label="Add Note" id="addNoteFab" variant="primary"> <md-fab aria-label="Add Note" id="addNoteFab" variant="primary">
<md-icon slot="icon">add</md-icon> <md-icon slot="icon">add</md-icon> <!-- Will be correctly rendered by MWC -->
</md-fab> </md-fab>
</div> </div>
<!-- Note Dialog (for creating/editing) -->
<md-dialog id="noteDialog"> <md-dialog id="noteDialog">
<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">
@ -73,22 +67,6 @@
</div> </div>
</md-dialog> </md-dialog>
<script src="script.js"></script> <script src="script.js"></script> <!-- script.js will handle MWC readiness -->
<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>