Update index.html

This commit is contained in:
Gamosoft 2025-11-14 20:35:07 +01:00 committed by GitHub
parent c184b41a5b
commit 3c373f4e4a
1 changed files with 58 additions and 13 deletions

View File

@ -91,10 +91,17 @@
position: relative; position: relative;
} }
.theme-toggle { .header-buttons {
position: absolute; position: fixed;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
display: flex;
gap: 0.75rem;
align-items: center;
z-index: 1000;
}
.theme-toggle {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px; border-radius: 50px;
@ -110,6 +117,35 @@
transform: scale(1.05); transform: scale(1.05);
} }
.kofi-mini {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
color: #1e293b;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.kofi-mini:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
/* Dark theme Ko-fi button */
[data-theme="dark"] .kofi-mini {
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.logo { .logo {
width: 120px; width: 120px;
height: 120px; height: 120px;
@ -388,13 +424,22 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.theme-toggle { .header-buttons {
top: 0.5rem; top: 0.5rem;
right: 0.5rem; right: 0.5rem;
gap: 0.5rem;
}
.theme-toggle {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
font-size: 1rem; font-size: 1rem;
} }
.kofi-mini {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
.logo { .logo {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -431,6 +476,7 @@
height: 10px; height: 10px;
} }
} }
</style> </style>
<!-- Google Analytics --> <!-- Google Analytics -->
@ -446,9 +492,15 @@
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme"> <div class="header-buttons">
<span id="theme-icon">🌙</span> <a href="https://ko-fi.com/gamosoft" class="kofi-mini" target="_blank" rel="noopener noreferrer" aria-label="Support on Ko-fi">
</button> <span></span>
<span>Support</span>
</a>
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span id="theme-icon">🌙</span>
</button>
</div>
<img src="logo.svg" alt="NoteDiscovery Logo" class="logo"> <img src="logo.svg" alt="NoteDiscovery Logo" class="logo">
<h1>NoteDiscovery</h1> <h1>NoteDiscovery</h1>
<p class="tagline">Your Self-Hosted Knowledge Base</p> <p class="tagline">Your Self-Hosted Knowledge Base</p>
@ -584,12 +636,6 @@
<a href="https://github.com/gamosoft/NoteDiscovery" class="github-link">Star on GitHub</a> <a href="https://github.com/gamosoft/NoteDiscovery" class="github-link">Star on GitHub</a>
<a href="https://github.com/gamosoft/NoteDiscovery/issues" class="github-link">Report Issues</a> <a href="https://github.com/gamosoft/NoteDiscovery/issues" class="github-link">Report Issues</a>
</p> </p>
<a href="https://ko-fi.com/gamosoft" class="support-button" target="_blank" rel="noopener noreferrer">
Support Development
</a>
<p style="margin-top: 1.5rem; font-size: 0.9rem; opacity: 0.8;">
Your support helps keep this project free and growing
</p>
</footer> </footer>
</div> </div>
@ -648,4 +694,3 @@
</script> </script>
</body> </body>
</html> </html>