Website: machine estimator v2 — fold-out categories and the memory bar (still unlisted, R-997)

Each category is a native <details>, closed at first, with an 'n selected' count; a preset opens what it ticks. A sticky memory bar (0-64 GB, marks 8/16/24/32/48/64+): solid fill = smallest box memory where the selection fits well, thin mark = where it fits, but tight; one line names the box to buy. minBoxGb() inverts guestMib() by bisection on it, so the rule is still written once. Box sizes 12/24/48/64 added; tests cover seven sizes and the inverse (red-proofed); SIZING.md table gains 24 GB.
2026-10-13 15:38:45 +02:00
parent d5ef93b13b
commit 16dca64834
11 changed files with 277 additions and 110 deletions
@@ -18,8 +18,8 @@
    <link rel="stylesheet" href="/assets/shell.css?v=25">
    <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
    <script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
-    <link rel="stylesheet" href="/assets/sizing.css?v=1">
-    <script defer src="/assets/sizing.js?v=1"></script>
+    <link rel="stylesheet" href="/assets/sizing.css?v=2">
+    <script defer src="/assets/sizing.js?v=2"></script>
 </head>
 <body class="shell page-gepigeny">
    <header class="mobile-topbar">
@@ -70,25 +70,26 @@
        <div class="page-header">
            <h1>Which machine do I <span>need?</span></h1>
        </div>
-        <p class="page-lede">Tick what you would run on the box, and the page shows how it fits an 8, 16 or 32 GB machine. This is an estimate from my own measurements on an N100 mini PC (13 October 2026), not a promise.</p>
+        <p class="page-lede">Tick what you would run on the box, and the page shows how much machine memory it needs. This is an estimate from my own measurements on an N100 mini PC (13 October 2026), not a promise.</p>
        <noscript><p class="sizer-noscript">This page needs JavaScript. Turn it on and reload the page.</p></noscript>

-        <section class="shell-section sizer" id="sizer" data-src="/assets/sizing-data.json?v=1" hidden>
+        <section class="shell-section sizer" id="sizer" data-src="/assets/sizing-data.json?v=2" hidden>
            <div class="sizer-presets" role="group" aria-label="Quick picks">
                <button type="button" class="btn btn-outline btn-sm" data-preset="immich,jellyfin,nextcloud,home-assistant,vaultwarden,paperless-ngx">Family starter set</button>
                <button type="button" class="btn btn-outline btn-sm" data-preset="nextcloud,vaultwarden">Just files and passwords</button>
                <button type="button" class="btn btn-outline btn-sm" data-preset="">Clear</button>
            </div>
-            <div class="sizer-layout">
-                <div>
-                    <h2 class="sizer-sub">Applications</h2>
-                    <div id="sizer-apps"></div>
-                </div>
-                <div class="sizer-result">
-                    <h2>Estimate</h2>
-                    <div id="sizer-result" aria-live="polite"></div>
+            <div class="sizer-sticky">
+                <div class="sizer-meter" id="sizer-meter" role="meter" aria-label="Machine memory needed" aria-valuemin="0" aria-valuemax="64" aria-valuenow="0">
+                    <div class="sizer-track"><div class="sizer-fill" id="sizer-fill"></div><div class="sizer-tightmark" id="sizer-tight"></div></div>
+                    <div class="sizer-scale" id="sizer-scale" aria-hidden="true"></div>
                </div>
+                <p class="sizer-line" id="sizer-line" aria-live="polite"></p>
+                <p class="sizer-legend">Solid bar: fits well · Thin mark: fits, but tight</p>
            </div>
+            <div class="sizer-result" id="sizer-result"></div>
+            <h2 class="sizer-sub">Applications</h2>
+            <div class="sizer-cats" id="sizer-apps"></div>
        </section>

        <section class="shell-section sizer-advice-section">
@@ -102,11 +103,11 @@
            <details class="sizer-how">
                <summary>How does the page count?</summary>
                <p>The box's own services use about 470 MB of memory (Dashboard, tunnel, file manager, Docker). The page adds the measured figures of the apps you tick: once their typical use, once their peak, as if every app were busy at the same moment. That is a deliberately cautious count.</p>
-                <p>On an 8, 16 or 32 GB machine, the Felhom system gets the memory the installer gives it; the rest is for the base system. Fits well: one and a half times the peak still fits. Fits, but tight: the peak fits, one and a half times it does not. Does not fit: not even the peak fits.</p>
+                <p>On a machine, the Felhom system gets the memory the installer gives it; the rest is for the base system. Fits well: one and a half times the peak still fits — the solid bar shows this, and it is the recommended size. Fits, but tight: the peak fits, one and a half times it does not — the thin mark shows this. The recommendation is the smallest of 8, 12, 16, 24, 32, 48 and 64 GB where it fits well.</p>
                <p>The figures were measured on an N100 mini PC (13 October 2026): every app installed and at rest, the heavier ones also during one real task (a photo import, a film conversion, text recognition). A larger photo library or more users can need more.</p>
            </details>
        </section>
-        <script type="application/json" id="sizer-strings">{"typical": "Typical use", "peak": "At peak, if everything works at once", "platform_note": "Both include the box's own services (about 0.5 GB).", "guest": "Felhom gets {x} of this (the rest is for the base system).", "verdict": {"well": "Fits well", "tight": "Fits, but tight", "no": "Does not fit"}, "tight_why": "Works, but a large photo import or a backup at the same time can slow it down.", "cpu_head": "These make the processor work hard for a short time", "heavy_pair": "{names}: they slow each other down only while both are working.", "and": " and ", "unmeasured": "Not yet measured", "builtin": "built in, part of every box", "load_error": "The estimate's data did not load. Reload the page."}</script>
+        <script type="application/json" id="sizer-strings">{"typical": "Typical use", "peak": "At peak, if everything works at once", "platform_note": "Both include the box's own services (about 0.5 GB).", "selected": "{n} selected", "recommend": "Recommended: a {gb} GB machine.", "tight_on": "It fits on {gb} GB, but tight.", "only_tight": "None of the sizes fits well; from {gb} GB it fits, but tight.", "none_fits": "It does not fit any size, not even {gb} GB.", "over_max": "more than {gb} GB", "meter_text": "Machine memory needed: {x}", "tight_why": "Tight: it works, but a large photo import or a backup at the same time can slow it down.", "cpu_head": "These make the processor work hard for a short time", "heavy_pair": "{names}: they slow each other down only while both are working.", "and": " and ", "unmeasured": "Not yet measured", "builtin": "built in, part of every box", "load_error": "The estimate's data did not load. Reload the page."}</script>

    <footer>
        <div class="container">