Update index.html

Author: itsgbemi

app/index.html

@@ -13,6 +13,8 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+<link rel="preload" href="/assets/images/logo-light.svg" as="image" type="image/svg+xml">
+<link rel="preload" href="/assets/images/logo-dark.svg" as="image" type="image/svg+xml">
 <link rel="license" href="https://www.gnu.org/licenses/agpl-3.0.html">
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Lexend:wght@400;500;700&family=Montserrat:wght@400;500;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap" rel="stylesheet">
 <style>
@@ -120,6 +122,10 @@
 --color-dark-gray: #666;
 }
 
+body.dark-mode #siteLogo {
+content: url("/assets/images/logo-dark.svg");
+}
+
 main {
 flex: 1;
 }
@@ -317,32 +323,6 @@
 background: #222;
 }
 
-.greeting-container {
-display: flex;
-align-items: center;
-gap: 1rem;
-margin-bottom: 1rem;
-margin: 0 auto;
-}
-
-.greeting-icon svg {
-width: 32px;
-height: 32px;
-}
-
-.greeting-text h2 {
-font-size: var(--text-2xl);
-margin-bottom: 0.5rem;
-font-weight: 500;
-}
-
-.mind-booster {
-font-size: var(--text-md);
-font-style: italic;
-color: var(--color-secondary);
-margin-top: 1rem;
-}
-
 .documents-container {
 max-width: var(--max-width);
 background-color: var(--white);
@@ -652,6 +632,59 @@
 color: var(--color-primary);
 }
 
+.page-select {
+position: relative;
+display: inline-block;
+}
+
+.page-select-toggle {
+padding: 0.5rem 1rem;
+border: 1px dashed var(--color-secondary);
+border-radius: var(--radius-sm);
+min-width: 60px;
+text-align: center;
+cursor: pointer;
+position: relative;
+background: var(--white);
+color: var(--color-primary);
+}
+
+.page-select-toggle::after {
+content: "▼";
+margin-left: 8px;
+font-size: 0.8em;
+}
+
+.page-select-dropdown {
+position: absolute;
+top: 100%;
+left: 50%;
+transform: translateX(-50%);
+background: var(--white);
+border: 1px solid var(--color-gray);
+border-radius: var(--radius-sm);
+box-shadow: var(--shadow-md);
+z-index: 10;
+display: none;
+max-height: 200px;
+overflow-y: auto;
+width: 80px;
+}
+
+.page-select-dropdown.show {
+display: block;
+}
+
+.page-select-item {
+padding: 0.5rem;
+text-align: center;
+cursor: pointer;
+}
+
+.page-select-item:hover {
+background: var(--color-light);
+}
+
 .modal {
 position: fixed;
 top: 0;
@@ -1040,10 +1073,6 @@
 max-height: 80vh;
 }
 
-.greeting-text h2 {
-font-size: var(--text-xl);
-}
-
 .documents-grid {
 grid-template-columns: 1fr;
 }
@@ -1133,16 +1162,6 @@
 </aside>
 
 <main id="main-content" role="main">
-<section class="hero">
-<div class="greeting-container">
-<div class="greeting-icon" id="time-icon">
-</div>
-<div class="greeting-text">
-<h2><span id="greeting-text">Good Morning</span></h2>
-</div>
-</div>
-<p class="mind-booster"><strong>Your daily booster</strong>: <span id="mind-booster">Perfection is an infinite journey, just start.</span></p>
-</section>
 
 <section class="documents-container">
 <div class="document-controls">
@@ -1237,7 +1256,10 @@ <h2><span id="greeting-text">Good Morning</span></h2>
 <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>
 </svg>
 </button>
-<span class="page-number" id="current-page" contenteditable="true">1</span>
+<div class="page-select">
+<div class="page-select-toggle" id="page-select-toggle" aria-haspopup="true" aria-expanded="false">1</div>
+<div class="page-select-dropdown" id="page-select-dropdown" role="menu"></div>
+</div>
 <span>/</span>
 <span id="total-pages">1</span>
 <button class="pagination-button" id="next-page" disabled aria-label="Next page">
@@ -1450,48 +1472,6 @@ <h3>Read Aloud</h3>
 });
 });
 
-// Quotes data
-const quotes = [
-"Perfection is an infinite journey, just start.",
-"Small steps every day lead to big results over time.",
-"The expert in anything was once a beginner.",
-"Done is better than perfect.",
-"Progress, not perfection, is the goal.",
-"Consistency is the key to mastery.",
-"Every masterpiece started as a draft.",
-"You don't have to be great to start, but you have to start to be great.",
-"The only way to do great work is to love what you do.",
-"Quality is not an act, it's a habit."
-];
-
-// Time-based greeting
-function updateGreeting() {
-const now = new Date();
-const hours = now.getHours();
-let greeting, icon;
-
-if (hours >= 5 && hours < 12) {
-greeting = "Wake and shine";
-icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>`;
-} else if (hours >= 12 && hours < 17) {
-greeting = "Sun's still high";
-icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>`;
-} else if (hours >= 17 && hours < 21) {
-greeting = "Evening greetings";
-icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>`;
-} else {
-greeting = "Shut-eye time";
-icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.34 2.02C6.59 1.82 2 6.42 2 12c0 5.52 4.48 10 10 10 3.71 0 6.93-2.02 8.66-5.02-7.51-.25-12.09-8.43-8.32-14.96z"/></svg>`;
-}
-
-document.getElementById('greeting-text').textContent = greeting;
-document.getElementById('time-icon').innerHTML = icon;
-
-// Random quote
-const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
-document.getElementById('mind-booster').textContent = randomQuote;
-}
-
 // Format time ago
 function formatTimeAgo(dateString) {
 const now = new Date();
@@ -1651,6 +1631,27 @@ <h3>Read Aloud</h3>
 document.getElementById('prev-page').title = currentPage === 1 ? 'You are on the first page' : 'Previous page';
 document.getElementById('next-page').title = currentPage === totalPages ? 'You are on the last page' : 'Next page';
 
+// Update page dropdown
+const pageToggle = document.getElementById('page-select-toggle');
+const pageDropdown = document.getElementById('page-select-dropdown');
+pageToggle.textContent = currentPage;
+pageToggle.setAttribute('aria-label', `Current page: ${currentPage}`);
+
+// Populate dropdown with page numbers
+pageDropdown.innerHTML = '';
+for (let i = 1; i <= totalPages; i++) {
+const pageItem = document.createElement('div');
+pageItem.className = 'page-select-item';
+pageItem.textContent = i;
+pageItem.addEventListener('click', () => {
+currentPage = i;
+applyFiltersAndSort();
+pageDropdown.classList.remove('show');
+pageToggle.setAttribute('aria-expanded', 'false');
+});
+pageDropdown.appendChild(pageItem);
+}
+
 const startIdx = (currentPage - 1) * docsPerPage;
 const endIdx = Math.min(startIdx + docsPerPage, docs.length);
 
@@ -1830,7 +1831,6 @@ <h3>Read Aloud</h3>
 if (currentPage > 1) {
 currentPage--;
 applyFiltersAndSort();
-document.getElementById('current-page').textContent = currentPage;
 }
 });
 
@@ -1839,31 +1839,29 @@ <h3>Read Aloud</h3>
 if (currentPage < totalPages) {
 currentPage++;
 applyFiltersAndSort();
-document.getElementById('current-page').textContent = currentPage;
 }
 });
 
-document.getElementById('current-page').addEventListener('blur', () => {
-const totalPages = Math.ceil(documents.length / docsPerPage);
-let newPage = parseInt(document.getElementById('current-page').textContent);
+// Page dropdown functionality
+const pageToggle = document.getElementById('page-select-toggle');
+const pageDropdown = document.getElementById('page-select-dropdown');
 
-if (isNaN(newPage) || newPage < 1) {
-newPage = 1;
-} else if (newPage > totalPages) {
-newPage = totalPages;
-showModal('page-modal');
-}
+pageToggle.addEventListener('click', (e) => {
+e.stopPropagation();
+const isExpanded = pageToggle.getAttribute('aria-expanded') === 'true';
+pageToggle.setAttribute('aria-expanded', !isExpanded);
+pageDropdown.classList.toggle('show');
+});
 
-currentPage = newPage;
-document.getElementById('current-page').textContent = currentPage;
-applyFiltersAndSort();
+// Close dropdown when clicking outside
+document.addEventListener('click', () => {
+pageDropdown.classList.remove('show');
+pageToggle.setAttribute('aria-expanded', 'false');
 });
 
-document.getElementById('current-page').addEventListener('keydown', (e) => {
-if (e.key === 'Enter') {
-e.preventDefault();
-document.getElementById('current-page').blur();
-}
+// Close dropdown when selecting a page
+pageDropdown.addEventListener('click', (e) => {
+e.stopPropagation();
 });
 }
 
@@ -2186,7 +2184,6 @@ <h3>Read Aloud</h3>
 }
 
 function init() {
-updateGreeting();
 loadDocuments();
 setupPagination();
 setupSearchAndFilters();