vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

donate and about page changes

Browse source
This commit is contained in:
edideaur 2026-03-03 20:47:49 +00:00
parent 98741b4f18
commit f967d29c52
4 changed files with 141 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
index.html
View file

@ -1975,6 +1975,27 @@
<span>Discord</span> <span>Discord</span>
</a> </a>
</li> </li>
<li class="nav-item" id="sidebar-nav-githubbtn" style="display: none">
<a href="https://github.com/monochrome-music/monochrome" target="_blank">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
/>
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
<span>GitHub</span>
</a>
</li>
<li class="nav-item" id="sidebar-nav-download-bottom"> <li class="nav-item" id="sidebar-nav-download-bottom">
<a href="/download"> <a href="/download">
<svg <svg
@ -3914,6 +3935,18 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div> </div>
<div class="setting-item">
<div class="info">
<span class="label">Show GitHub in Sidebar</span>
<span class="description"
>Display the GitHub link in the sidebar navigation</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-githubbtn-toggle" checked />
<span class="slider"></span>
</label>
</div>
</div> </div>
</div> </div>
@ -5180,7 +5213,7 @@
</div> </div>
<div id="page-about" class="page"> <div id="page-about" class="page">
<h2 class="section-title">About Monochrome</h2> <h2 class="section-title" style="text-align: center">About Monochrome</h2>
<div class="about-content"> <div class="about-content">
<p class="about-description"> <p class="about-description">
Monochrome is a lightweight, privacy-focused music streaming client designed for Monochrome is a lightweight, privacy-focused music streaming client designed for
@ -5188,37 +5221,17 @@
distraction-free listening experience. distraction-free listening experience.
<br /> <br />
</p> </p>
<br />
<div class="about-features">
<h4>Features</h4>
<ul>
<li>High-quality lossless audio streaming</li>
<li>Lyrics support with karaoke mode</li>
<li>Recently Played tracking for easy history access</li>
<li>Comprehensive Personal Library for favorites</li>
<li>Intelligent API caching for improved performance</li>
<li>Offline-capable Progressive Web App (PWA)</li>
<li>Media Session API integration for system controls</li>
<li>Queue management with shuffle and repeat modes</li>
<li>Track downloads with automatic metadata embedding</li>
<li>Multiple API instance support with failover</li>
<li>Dark, minimalist interface optimized for focus</li>
<li>Customizable themes</li>
<li>Keyboard shortcuts for power users</li>
</ul>
</div>
<div class="about-tech">
<h4>Technology Stack</h4>
<p>Vanilla JavaScript • ES6 Modules • IndexedDB • Service Workers • Media Session API</p>
</div>
<br /><br /><br />
<div class="about-donate"> <div class="about-donate">
<h2 class="section-title" style="text-align: center">Donate to Monochrome</h2> <h2 class="section-title" style="text-align: center">Support Monochrome</h2>
<p style="text-align: center" class="donate-description"> <p style="text-align: center" class="donate-description">
If Monochrome has been useful to you and you're able to, consider making a donation. If Monochrome has been useful to you and you're able to, consider making a donation.
<br /> <br />
It helps pay for the server and domain, and you get to support us :) It helps pay for the server and domain, and you get to support us :)
</p> </p>
<p style="text-align: center; color: var(--muted-foreground); margin-top: 1rem">
If you cannot financially support us, please consider starring the project on GitHub and
sharing with friends!
</p>
<div <div
class="donate-button" class="donate-button"
id="donate-button-container" id="donate-button-container"
@ -5227,40 +5240,39 @@
gap: 20px; gap: 20px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 50px; margin-top: 30px;
flex-wrap: wrap; flex-wrap: wrap;
" "
> >
<button id="donate-btn" class="btn-secondary">Donate to Monochrome</button> <a
</div> href="https://ko-fi.com/monochromemusic"
</div> target="_blank"
<br /><br /><br /> rel="noopener noreferrer"
<div class="about-links"> class="btn-secondary"
<a style="
href="https://github.com/monochrome-music/monochrome" text-decoration: none;
target="_blank" display: inline-flex;
rel="noopener noreferrer" align-items: center;
class="github-link" gap: 0.5rem;
> "
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-github-icon lucide-github"
> >
<path Donate to Monochrome
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" </a>
/> <a
<path d="M9 18c-4.51 2-5-2-7-2" /> href="https://github.com/monochrome-music/monochrome"
</svg> target="_blank"
View on GitHub rel="noopener noreferrer"
</a> class="btn-secondary"
style="
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
"
>
Star on GitHub
</a>
</div>
</div> </div>
<p style="text-align: center; color: grey"> <p style="text-align: center; color: grey">
made with ‪‪❤︎‬ by made with ‪‪❤︎‬ by
@ -5446,7 +5458,15 @@
If Monochrome has been useful to you and you're able to, consider making a donation. <br /> If Monochrome has been useful to you and you're able to, consider making a donation. <br />
It helps pay for the domain, and you get to support us :) It helps pay for the domain, and you get to support us :)
</p> </p>
<button id="donate-btn-page" class="btn-secondary">Donate to Monochrome</button> <a
href="https://ko-fi.com/monochromemusic"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary"
style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem"
>
Donate to Monochrome
</a>
</div> </div>
</div> </div>
</main> </main>

9
js/settings.js
View file

@ -2442,6 +2442,15 @@ export function initializeSettings(scrobbler, player, api, ui) {
}); });
} }
const sidebarShowGithubToggle = document.getElementById('sidebar-show-githubbtn-toggle');
if (sidebarShowGithubToggle) {
sidebarShowGithubToggle.checked = sidebarSectionSettings.shouldShowGithub();
sidebarShowGithubToggle.addEventListener('change', (e) => {
sidebarSectionSettings.setShowGithub(e.target.checked);
sidebarSectionSettings.applySidebarVisibility();
});
}
// Apply sidebar visibility on initialization // Apply sidebar visibility on initialization
sidebarSectionSettings.applySidebarVisibility(); sidebarSectionSettings.applySidebarVisibility();

16
js/storage.js
View file

@ -1670,6 +1670,7 @@ export const sidebarSectionSettings = {
SHOW_ABOUT_KEY: 'sidebar-show-about', SHOW_ABOUT_KEY: 'sidebar-show-about',
SHOW_DOWNLOAD_KEY: 'sidebar-show-download', SHOW_DOWNLOAD_KEY: 'sidebar-show-download',
SHOW_DISCORD_KEY: 'sidebar-show-discord', SHOW_DISCORD_KEY: 'sidebar-show-discord',
SHOW_GITHUB_KEY: 'sidebar-show-github',
ORDER_KEY: 'sidebar-menu-order', ORDER_KEY: 'sidebar-menu-order',
DEFAULT_ORDER: [ DEFAULT_ORDER: [
'sidebar-nav-home', 'sidebar-nav-home',
@ -1681,6 +1682,7 @@ export const sidebarSectionSettings = {
'sidebar-nav-about-bottom', 'sidebar-nav-about-bottom',
'sidebar-nav-download-bottom', 'sidebar-nav-download-bottom',
'sidebar-nav-discordbtn', 'sidebar-nav-discordbtn',
'sidebar-nav-githubbtn',
], ],
getBottomNavIds() { getBottomNavIds() {
@ -1805,6 +1807,19 @@ export const sidebarSectionSettings = {
localStorage.setItem(this.SHOW_DISCORD_KEY, enabled ? 'true' : 'false'); localStorage.setItem(this.SHOW_DISCORD_KEY, enabled ? 'true' : 'false');
}, },
shouldShowGithub() {
try {
const val = localStorage.getItem(this.SHOW_GITHUB_KEY);
return val === null ? true : val === 'true';
} catch {
return true;
}
},
setShowGithub(enabled) {
localStorage.setItem(this.SHOW_GITHUB_KEY, enabled ? 'true' : 'false');
},
normalizeOrder(order) { normalizeOrder(order) {
const baseOrder = this.DEFAULT_ORDER; const baseOrder = this.DEFAULT_ORDER;
const safeOrder = Array.isArray(order) ? order.filter((id) => baseOrder.includes(id)) : []; const safeOrder = Array.isArray(order) ? order.filter((id) => baseOrder.includes(id)) : [];
@ -1865,6 +1880,7 @@ export const sidebarSectionSettings = {
{ id: 'sidebar-nav-about-bottom', check: this.shouldShowAbout() }, { id: 'sidebar-nav-about-bottom', check: this.shouldShowAbout() },
{ id: 'sidebar-nav-download-bottom', check: this.shouldShowDownload() }, { id: 'sidebar-nav-download-bottom', check: this.shouldShowDownload() },
{ id: 'sidebar-nav-discordbtn', check: this.shouldShowDiscord() }, { id: 'sidebar-nav-discordbtn', check: this.shouldShowDiscord() },
{ id: 'sidebar-nav-githubbtn', check: this.shouldShowGithub() },
]; ];
items.forEach(({ id, check }) => { items.forEach(({ id, check }) => {

45
styles.css
View file

@ -4319,26 +4319,58 @@ input:checked + .slider::before {
} }
.about-content { .about-content {
padding: 1rem 0; padding: 2rem 0;
max-width: 800px;
margin: 0 auto;
}
.about-donate {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
margin: 2rem 0;
text-align: center;
}
.about-donate .section-title {
margin-bottom: 1rem;
}
.donate-description {
color: var(--muted-foreground);
line-height: 1.6;
}
.about-donate .btn-secondary {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
} }
.about-description { .about-description {
color: var(--foreground); color: var(--foreground);
line-height: 1.6; line-height: 1.8;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.05rem;
} }
.about-features, .about-features,
.about-tech { .about-tech {
margin-bottom: 1.5rem; margin-bottom: 2rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
} }
.about-features h4, .about-features h4,
.about-tech h4 { .about-tech h4 {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.75rem; margin-bottom: 1rem;
color: var(--foreground); color: var(--foreground);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
} }
.about-features ul { .about-features ul {
@ -4411,9 +4443,10 @@ input:checked + .slider::before {
} }
.about-footer { .about-footer {
margin-top: 2rem; margin-top: 3rem;
padding-top: 1.5rem; padding-top: 2rem;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
text-align: center;
} }
.about-footer p { .about-footer p {