diff --git a/index.php b/index.php index 7ec676a..c574d83 100644 --- a/index.php +++ b/index.php @@ -40,6 +40,12 @@ if ($fontFilesJson === false) { + + + + + + eBook Fonts Showcase @@ -426,10 +606,10 @@ if ($fontFilesJson === false) {
Core Collection
-
-
Extra Collection
+
+ Extra Collection
-
+
@@ -437,10 +617,46 @@ if ($fontFilesJson === false) {
-
+
+
+ Screen +
+ + +
+
+
+
+
+ Bezel +
+ + +
+
+
+
- Download - GitHub + + + Download + + + + GitHub +
@@ -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;