fonts/font-showcase
1
0
Fork 0
mirror of https://github.com/nicoverbruggen/ebook-fonts-showcase.git synced 2026-03-22 21:10:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Additional settings

Browse Source
This commit is contained in:
Nico Verbruggen
2026-03-02 16:46:50 +01:00
parent 7294136e0d
commit a6a4e80809
1 changed files with 283 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
index.php
View File

@@ -40,6 +40,12 @@ if ($fontFilesJson === false) {
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Preview and compare curated eBook fonts in a device-style reading view." />
<meta name="theme-color" content="#f6e9de" />
<meta property="og:title" content="eBook Fonts Showcase" />
<meta property="og:description" content="Preview and compare curated eBook fonts in a device-style reading view." />
<meta property="og:type" content="website" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23a04c24'/%3E%3Ctext x='50%25' y='56%25' font-size='34' text-anchor='middle' fill='white' font-family='Georgia,serif'%3EAa%3C/text%3E%3C/svg%3E" />
<title>eBook Fonts Showcase</title>
<style>
:root {
@@ -48,8 +54,8 @@ if ($fontFilesJson === false) {
--muted: #5b5b5b;
--accent: #a04c24;
--accent-soft: #f2d2c2;
--cta: #1e6bd6;
--cta-hover: #1757af;
--cta: #a04c24;
--cta-hover: #7f3b1b;
--surface: #fffdf8;
--panel: #ffffff;
--border: #e6ded6;
@@ -112,12 +118,14 @@ if ($fontFilesJson === false) {
}
label {
font-size: 0.9rem;
color: var(--muted);
font-size: 1rem;
color: #3e3530;
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
margin-bottom: 8px;
margin-bottom: 6px;
padding-bottom: 6px;
font-weight: 600;
}
input[type="range"] {
@@ -125,9 +133,10 @@ if ($fontFilesJson === false) {
font: inherit;
border-radius: 12px;
border: 1px solid var(--border);
padding: 10px 12px;
padding: 6px 10px;
background: var(--surface);
color: var(--ink);
accent-color: var(--accent);
}
select {
@@ -149,7 +158,7 @@ if ($fontFilesJson === false) {
.sidebar-controls {
display: flex;
flex-direction: column;
gap: 14px;
gap: 10px;
border-top: 1px solid var(--border);
padding-top: 16px;
}
@@ -158,6 +167,91 @@ if ($fontFilesJson === false) {
padding-top: 0;
}
.sidebar-controls .control-group {
border-top: 1px solid var(--border);
padding-top: 14px;
margin-top: 2px;
}
.sidebar-actions-group {
border-top: 1px solid var(--border);
padding-top: 20px;
margin-top: 8px;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.toggle-label {
font-size: 0.9rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.toggle-input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
appearance: none;
}
.toggle-track {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 170px;
padding: 9px 6px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer;
}
.toggle-option {
flex: 1;
text-align: center;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
position: relative;
z-index: 2;
user-select: none;
}
.toggle-thumb {
position: absolute;
top: 6px;
bottom: 6px;
left: 6px;
width: calc(50% - 8px);
border-radius: 999px;
background: var(--accent);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.toggle-input:not(:checked) + .toggle-track .toggle-option--left {
color: #fff;
}
.toggle-input:checked + .toggle-track .toggle-option--right {
color: #fff;
}
.toggle-input:checked + .toggle-track .toggle-thumb {
transform: translateX(100%);
}
.badge {
padding: 6px 10px;
@@ -181,13 +275,14 @@ if ($fontFilesJson === false) {
justify-content: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 16px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
@@ -196,6 +291,12 @@ if ($fontFilesJson === false) {
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
gap: 8px;
}
.button svg {
width: 16px;
height: 16px;
}
.button--primary {
@@ -219,12 +320,19 @@ if ($fontFilesJson === false) {
.reader {
align-self: center;
width: min(100%, calc(var(--screen-width) + 56px));
background: #0f0f0f;
background: #ffffff;
border-radius: 24px;
padding: 36px 30px 54px;
box-shadow: 0 22px 50px rgba(15, 10, 8, 0.28);
border: 2px solid #111;
border: 2px solid #e7e1da;
position: relative;
max-height: 100vh;
}
.reader.is-bezel-dark {
background: #0f0f0f;
border-color: #111;
box-shadow: 0 22px 50px rgba(15, 10, 8, 0.32);
}
.reader-screen {
@@ -233,11 +341,30 @@ if ($fontFilesJson === false) {
padding: 22px;
width: 100%;
min-height: 520px;
height: var(--screen-height);
height: min(var(--screen-height), calc(100vh - 140px));
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 18px;
overflow: hidden;
}
.reader.is-dark .reader-screen {
background: #1d1a17;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.reader.is-dark .reader-toolbar,
.reader.is-dark .reader-footer {
color: #b8ada3;
}
.reader.is-dark .sample {
color: #f3ede7;
}
.reader.is-dark .chapter-title {
color: #d2c4b6;
}
.reader-toolbar {
@@ -260,6 +387,8 @@ if ($fontFilesJson === false) {
color: #1f1a16;
flex: 1;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
.chapter-title {
@@ -323,10 +452,60 @@ if ($fontFilesJson === false) {
font-weight: 600;
}
summary.quick-title {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: 0;
padding-bottom: 0;
}
summary.quick-title::-webkit-details-marker {
display: none;
}
details .quick-title::after {
content: "Show";
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--muted);
text-transform: uppercase;
margin-left: auto;
}
details .quick-title::before {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--muted);
transition: transform 0.2s ease;
}
details[open] .quick-title::after {
content: "Hide";
}
details[open] .quick-title::before {
transform: rotate(90deg);
}
.quick-group + .quick-group {
border-top: 1px solid var(--border);
padding-top: 18px;
margin-top: 12px;
padding-top: 14px;
margin-top: 10px;
}
#extraFonts {
padding: 20px 0 10px;
}
.quick-group > .font-list {
margin-top: 10px;
}
.font-card {
@@ -348,27 +527,27 @@ if ($fontFilesJson === false) {
.font-card p {
margin: 0;
font-size: 0.95rem;
}
@media (max-width: 1250px) {
:root {
--screen-width: 520px;
--screen-height: 692px;
}
font-size: 1.02rem;
line-height: 1.25;
}
@media (max-width: 1050px) {
:root {
--screen-width: 480px;
--screen-height: 640px;
}
.layout {
grid-template-columns: 1fr;
}
.reader {
width: min(100%, 520px);
max-height: 100vh;
}
.reader-screen {
height: auto;
height: min(var(--screen-height), calc(100vh - 120px));
min-height: 420px;
}
@@ -391,7 +570,7 @@ if ($fontFilesJson === false) {
@media (max-width: 640px) {
:root {
--screen-width: 320px;
--screen-height: 520px;
--screen-height: 500px;
}
.page {
@@ -402,12 +581,13 @@ if ($fontFilesJson === false) {
width: min(100%, 360px);
padding: 20px 16px 28px;
border-radius: 14px;
max-height: 100vh;
}
.reader-screen {
padding: 16px;
min-height: 520px;
height: 520px;
min-height: 500px;
height: min(var(--screen-height), calc(100vh - 120px));
}
}
</style>
@@ -426,10 +606,10 @@ if ($fontFilesJson === false) {
<div class="quick-title">Core Collection</div>
<div class="font-list" id="fontListCore"></div>
</div>
<div class="quick-group">
<div class="quick-title">Extra Collection</div>
<details class="quick-group" id="extraFonts">
<summary class="quick-title">Extra Collection</summary>
<div class="font-list" id="fontListExtra"></div>
</div>
</details>
</div>
</div>
<div class="sidebar-controls">
@@ -437,10 +617,46 @@ if ($fontFilesJson === false) {
<label for="sizeRange">Preview size</label>
<input id="sizeRange" type="range" min="14" max="42" value="20" />
</div>
<div>
<div class="control-group">
<div class="toggle-row">
<span class="toggle-label">Screen</span>
<div class="toggle-group">
<input id="darkModeToggle" class="toggle-input" type="checkbox" />
<label for="darkModeToggle" class="toggle-track" aria-label="Screen mode">
<span class="toggle-option toggle-option--left">Light</span>
<span class="toggle-option toggle-option--right">Dark</span>
<span class="toggle-thumb"></span>
</label>
</div>
</div>
</div>
<div class="control-group">
<div class="toggle-row">
<span class="toggle-label">Bezel</span>
<div class="toggle-group">
<input id="bezelToggle" class="toggle-input" type="checkbox" />
<label for="bezelToggle" class="toggle-track" aria-label="Bezel color">
<span class="toggle-option toggle-option--left">White</span>
<span class="toggle-option toggle-option--right">Black</span>
<span class="toggle-thumb"></span>
</label>
</div>
</div>
</div>
<div class="sidebar-actions-group">
<div class="sidebar-actions">
<a class="button button--primary" href="https://github.com/nicoverbruggen/ebook-fonts/releases" target="_blank" rel="noreferrer">Download</a>
<a class="button" href="https://github.com/nicoverbruggen/ebook-fonts" target="_blank" rel="noreferrer">GitHub</a>
<a class="button button--primary" href="https://github.com/nicoverbruggen/ebook-fonts/releases" target="_blank" rel="noreferrer">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.17l2.59-2.58a1 1 0 1 1 1.41 1.42l-4.3 4.29a1 1 0 0 1-1.4 0l-4.3-4.29a1 1 0 1 1 1.41-1.42L11 13.17V4a1 1 0 0 1 1-1zm-6 15a1 1 0 0 1 1 1v1h10v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z" />
</svg>
Download
</a>
<a class="button" href="https://github.com/nicoverbruggen/ebook-fonts" target="_blank" rel="noreferrer">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M12 2C6.48 2 2 6.58 2 12.24c0 4.52 2.87 8.35 6.84 9.71.5.1.68-.22.68-.48 0-.24-.01-.86-.01-1.69-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.49-1.11-1.49-.91-.63.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.36 1.12 2.94.86.09-.67.35-1.12.63-1.38-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.32.1-2.75 0 0 .84-.27 2.75 1.05A9.3 9.3 0 0 1 12 7.07c.83 0 1.67.11 2.45.33 1.91-1.32 2.75-1.05 2.75-1.05.55 1.43.2 2.49.1 2.75.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.58 5.05.36.32.68.95.68 1.92 0 1.38-.01 2.5-.01 2.84 0 .26.18.59.69.48A10.24 10.24 0 0 0 22 12.24C22 6.58 17.52 2 12 2z" />
</svg>
GitHub
</a>
</div>
</div>
</div>
@@ -472,6 +688,10 @@ if ($fontFilesJson === false) {
const fontSelect = document.getElementById("fontSelect");
const fontListCore = document.getElementById("fontListCore");
const fontListExtra = document.getElementById("fontListExtra");
const extraFonts = document.getElementById("extraFonts");
const darkModeToggle = document.getElementById("darkModeToggle");
const bezelToggle = document.getElementById("bezelToggle");
const reader = document.querySelector(".reader");
const readerClock = document.getElementById("readerClock");
const readerPage = document.getElementById("readerPage");
const readerProgress = document.getElementById("readerProgress");
@@ -568,9 +788,24 @@ This was invitation enough.
fontListCore.innerHTML = "";
fontListExtra.innerHTML = "";
fontSelect.innerHTML = "";
const preferredOrder = [
"NV NinePoint",
"NV Charis",
"NV Garamond",
"NV Jost"
];
const items = [...fonts.values()]
.filter((font) => font.family.toLowerCase().includes(filter.toLowerCase()))
.sort((a, b) => a.family.localeCompare(b.family));
.sort((a, b) => {
const aIndex = preferredOrder.indexOf(a.family);
const bIndex = preferredOrder.indexOf(b.family);
if (aIndex !== -1 || bIndex !== -1) {
if (aIndex === -1) return 1;
if (bIndex === -1) return -1;
return aIndex - bIndex;
}
return a.family.localeCompare(b.family);
});
const coreGroup = document.createElement("optgroup");
coreGroup.label = "Core Collection";
@@ -657,12 +892,27 @@ This was invitation enough.
fontSelect.addEventListener("change", (event) => {
setActiveFont(event.target.value);
});
darkModeToggle.addEventListener("change", (event) => {
reader.classList.toggle("is-dark", event.target.checked);
});
bezelToggle.addEventListener("change", (event) => {
reader.classList.toggle("is-bezel-dark", event.target.checked);
});
}
let activeFamily = "NV Charis";
function syncToggles() {
darkModeToggle.checked = reader.classList.contains("is-dark");
bezelToggle.checked = reader.classList.contains("is-bezel-dark");
}
let activeFamily = "NV NinePoint";
buildFontFaces();
updateFontList("");
setupInteractions();
syncToggles();
if (extraFonts) {
extraFonts.open = window.matchMedia("(max-width: 1050px)").matches;
}
setActiveFont(activeFamily);
if (fontSelect.value !== activeFamily) {
fontSelect.value = activeFamily;