donate and about page changes
This commit is contained in:
edideaur
parent
98741b4f18
commit
f967d29c52
4 changed files with 141 additions and 63 deletions
134
index.html
134
index.html
|
|
@ -1975,6 +1975,27 @@
|
|||
<span>Discord</span>
|
||||
</a>
|
||||
</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">
|
||||
<a href="/download">
|
||||
<svg
|
||||
|
|
@ -3914,6 +3935,18 @@
|
|||
<span class="slider"></span>
|
||||
</label>
|
||||
</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>
|
||||
|
||||
|
|
@ -5180,7 +5213,7 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<p class="about-description">
|
||||
Monochrome is a lightweight, privacy-focused music streaming client designed for
|
||||
|
|
@ -5188,37 +5221,17 @@
|
|||
distraction-free listening experience.
|
||||
<br />
|
||||
</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">
|
||||
<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">
|
||||
If Monochrome has been useful to you and you're able to, consider making a donation.
|
||||
<br />
|
||||
It helps pay for the server and domain, and you get to support us :)
|
||||
</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
|
||||
class="donate-button"
|
||||
id="donate-button-container"
|
||||
|
|
@ -5227,40 +5240,39 @@
|
|||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<button id="donate-btn" class="btn-secondary">Donate to Monochrome</button>
|
||||
</div>
|
||||
</div>
|
||||
<br /><br /><br />
|
||||
<div class="about-links">
|
||||
<a
|
||||
href="https://github.com/monochrome-music/monochrome"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="github-link"
|
||||
>
|
||||
<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"
|
||||
<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;
|
||||
"
|
||||
>
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
Donate to Monochrome
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/monochrome-music/monochrome"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn-secondary"
|
||||
style="
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
"
|
||||
>
|
||||
Star on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align: center; color: grey">
|
||||
made with ❤︎ by
|
||||
|
|
@ -5446,7 +5458,15 @@
|
|||
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 :)
|
||||
</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>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
sidebarSectionSettings.applySidebarVisibility();
|
||||
|
||||
|
|
|
|||
|
|
@ -1670,6 +1670,7 @@ export const sidebarSectionSettings = {
|
|||
SHOW_ABOUT_KEY: 'sidebar-show-about',
|
||||
SHOW_DOWNLOAD_KEY: 'sidebar-show-download',
|
||||
SHOW_DISCORD_KEY: 'sidebar-show-discord',
|
||||
SHOW_GITHUB_KEY: 'sidebar-show-github',
|
||||
ORDER_KEY: 'sidebar-menu-order',
|
||||
DEFAULT_ORDER: [
|
||||
'sidebar-nav-home',
|
||||
|
|
@ -1681,6 +1682,7 @@ export const sidebarSectionSettings = {
|
|||
'sidebar-nav-about-bottom',
|
||||
'sidebar-nav-download-bottom',
|
||||
'sidebar-nav-discordbtn',
|
||||
'sidebar-nav-githubbtn',
|
||||
],
|
||||
|
||||
getBottomNavIds() {
|
||||
|
|
@ -1805,6 +1807,19 @@ export const sidebarSectionSettings = {
|
|||
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) {
|
||||
const baseOrder = this.DEFAULT_ORDER;
|
||||
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-download-bottom', check: this.shouldShowDownload() },
|
||||
{ id: 'sidebar-nav-discordbtn', check: this.shouldShowDiscord() },
|
||||
{ id: 'sidebar-nav-githubbtn', check: this.shouldShowGithub() },
|
||||
];
|
||||
|
||||
items.forEach(({ id, check }) => {
|
||||
|
|
|
|||
45
styles.css
45
styles.css
|
|
@ -4319,26 +4319,58 @@ input:checked + .slider::before {
|
|||
}
|
||||
|
||||
.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 {
|
||||
color: var(--foreground);
|
||||
line-height: 1.6;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.about-features,
|
||||
.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-tech h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.about-features ul {
|
||||
|
|
@ -4411,9 +4443,10 @@ input:checked + .slider::before {
|
|||
}
|
||||
|
||||
.about-footer {
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-footer p {
|
||||
|
|
|
|||
Loading…
Reference in a new issue