public/tutorials
1
0
Fork 0
Code Actions Activity

fix(guide): replace misleading stat gauges and refine key illustration

Browse Source
This commit is contained in:
Pouya
2026-06-04 16:31:18 +02:00
parent d403aa0467
commit fd6b647f44
1 changed files with 120 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bitwarden-switch/password-manager-overview.html
+116 -51
View File
@@ -436,7 +436,7 @@ section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
.prose b{color:var(--ink)} .prose b{color:var(--ink)}
/* ========================================================================= /* =========================================================================
SECTION 1 — WHY (key analogy + stat gauges) SECTION 1 — WHY (key analogy + qualitative stat cards)
========================================================================= */ ========================================================================= */
.analogy{ .analogy{
display:grid;grid-template-columns:1fr;gap:0; display:grid;grid-template-columns:1fr;gap:0;
@@ -463,21 +463,45 @@ section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
@media(min-width:760px){.analogy .keypic{border-top:none;border-left:1px solid var(--border)}} @media(min-width:760px){.analogy .keypic{border-top:none;border-left:1px solid var(--border)}}
.analogy .keypic svg{width:100%;max-width:320px;height:auto;color:var(--accent)} .analogy .keypic svg{width:100%;max-width:320px;height:auto;color:var(--accent)}
/* stat gauges */ /* stat cards — honest qualitative figures (no fake-percentage rings) */
.stats{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:18px} .stats{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:18px}
@media(max-width:760px){.stats{grid-template-columns:1fr}} @media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{ .stat{
--sc:var(--accent); /* semantic colour, overridden per card */
--sc-wash:var(--accent-wash);
background:var(--surface);border:1px solid var(--border);border-radius:13px; background:var(--surface);border:1px solid var(--border);border-radius:13px;
border-top:3px solid var(--accent);box-shadow:var(--shadow); border-top:3px solid var(--sc);box-shadow:var(--shadow);
padding:1.3rem 1.25rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center; padding:1.4rem 1.25rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.stat--accent{--sc:var(--accent);--sc-wash:var(--accent-wash)}
.stat--warn {--sc:var(--warn); --sc-wash:var(--warn-wash)}
.stat--bad {--sc:var(--bad); --sc-wash:var(--bad-wash)}
/* fixed-geometry icon medallion — identical across all three cards */
.stat .medallion{
width:84px;height:84px;flex:none;border-radius:50%;
display:grid;place-items:center;margin-bottom:.95rem;
background:var(--sc-wash);
border:1.5px solid color-mix(in srgb, var(--sc) 35%, transparent);
box-shadow:0 0 0 6px color-mix(in srgb, var(--sc) 7%, transparent);
}
.stat .medallion svg{width:42px;height:42px;display:block;color:var(--sc)}
/* the qualitative lead word — bold figure, NOT a measured number */
.stat .lead{
font-family:var(--serif);font-weight:700;line-height:1.05;
font-size:clamp(1.5rem,1.2rem+1vw,1.85rem);letter-spacing:-.015em;
color:var(--sc);margin:0 0 .12rem;min-height:1.05em;
}
.stat .lead-sub{
font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin:0 0 .85rem;min-height:1em;
} }
.stat .gauge{width:118px;height:118px;flex:none;margin-bottom:.7rem}
.stat .gauge text{font-family:var(--serif);font-weight:700;fill:var(--ink)}
.stat .glabel{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; .stat .glabel{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent);font-weight:700;margin-bottom:.3rem} color:var(--sc);font-weight:700;margin-bottom:.3rem}
.stat h3{font-size:var(--step-0);margin:0 0 .35rem;font-family:var(--serif);line-height:1.2} .stat h3{font-size:var(--step-0);margin:0 0 .35rem;font-family:var(--serif);line-height:1.2}
.stat p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.5} .stat p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.5}
.stat .src{margin-top:.6rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--faint)} .stat .src{margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--faint)}
.fix-banner{ .fix-banner{
margin-top:18px;border:1px solid var(--border);border-left:4px solid var(--good); margin-top:18px;border:1px solid var(--border);border-left:4px solid var(--good);
@@ -1014,71 +1038,112 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
done by software at massive scale while the attacker sleeps. You're just one row in a spreadsheet of millions.</p> done by software at massive scale while the attacker sleeps. You're just one row in a spreadsheet of millions.</p>
</div> </div>
<div class="keypic" aria-hidden="true"> <div class="keypic" aria-hidden="true">
<!-- one key, many locks --> <!-- one key opens many locks — the danger of reuse -->
<svg viewBox="0 0 320 220" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"> <svg viewBox="0 0 320 240" fill="none" stroke="currentColor"
<!-- the single key --> stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">
<!-- branch lines from the key tip (185,120) to each lock, evenly fanned -->
<g stroke-width="2" stroke-dasharray="1 7" opacity=".55">
<path d="M185 120 C218 120 226 44 256 44"/>
<path d="M185 120 C222 120 230 92 256 92"/>
<path d="M185 120 C222 120 230 148 256 148"/>
<path d="M185 120 C218 120 226 196 256 196"/>
</g>
<!-- the single shared key, centred on y=120 -->
<g> <g>
<circle cx="52" cy="110" r="26"/> <circle cx="46" cy="120" r="27"/>
<circle cx="52" cy="110" r="9" stroke-width="2.4"/> <circle cx="46" cy="120" r="9.5" stroke-width="2.4"/>
<path d="M78 110 H190"/> <path d="M73 120 H185"/>
<path d="M150 110 v20 M170 110 v26 M190 110 v18"/> <!-- bit / teeth, evenly spaced and aligned to the shaft -->
<path d="M150 120 v17 M167 120 v23 M185 120 v17"/>
</g> </g>
<!-- many locks branching out -->
<g stroke-width="2.6" opacity=".9"> <!-- four identical locks, perfectly aligned on the right rail -->
<path d="M190 110 C230 70 250 60 280 52" /> <g>
<path d="M190 110 C235 100 255 98 286 96" /> <g transform="translate(256,30)">
<path d="M190 110 C235 150 252 158 282 170" /> <rect x="0" y="0" width="34" height="28" rx="5"/>
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
<path d="M17 16 v6"/>
</g>
<g transform="translate(256,78)">
<rect x="0" y="0" width="34" height="28" rx="5"/>
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
<path d="M17 16 v6"/>
</g>
<g transform="translate(256,134)">
<rect x="0" y="0" width="34" height="28" rx="5"/>
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
<path d="M17 16 v6"/>
</g>
<g transform="translate(256,182)">
<rect x="0" y="0" width="34" height="28" rx="5"/>
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
<path d="M17 16 v6"/>
</g> </g>
<g stroke-width="2.8">
<rect x="278" y="36" width="30" height="26" rx="3"/>
<path d="M283 36 v-5 a6 6 0 0 1 20 0 v5" stroke-width="2.4"/>
<rect x="280" y="84" width="30" height="26" rx="3"/>
<path d="M285 84 v-5 a6 6 0 0 1 20 0 v5" stroke-width="2.4"/>
<rect x="276" y="156" width="30" height="26" rx="3"/>
<path d="M281 156 v-5 a6 6 0 0 1 20 0 v5" stroke-width="2.4"/>
</g> </g>
</svg> </svg>
</div> </div>
</div> </div>
<!-- qualitative stat gauges (honest, no fabricated precise %) --> <!-- qualitative stat cards: honest figure + icon, NOT a measured % gauge -->
<div class="stats"> <div class="stats">
<div class="stat reveal"> <div class="stat stat--accent reveal">
<svg class="gauge" viewBox="0 0 120 120" aria-hidden="true"> <span class="medallion" aria-hidden="true">
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" stroke-width="12"/> <!-- skeleton key forced into a lock: stolen / weak credentials -->
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--accent)" stroke-width="12" <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="55" stroke-linecap="round" stroke-linejoin="round">
transform="rotate(-90 60 60)"/> <circle cx="14" cy="14" r="7.5"/>
<text x="60" y="58" text-anchor="middle" font-size="19" data-i18n="g1_a">most</text> <circle cx="14" cy="14" r="2.6" stroke-width="2"/>
<text x="60" y="78" text-anchor="middle" font-size="9" fill="var(--muted)" data-i18n="g1_b">breaches</text> <path d="M19.3 19.3 38 38"/>
<path d="M31.5 31.5 27 36 M35 35 30.5 39.5"/>
</svg> </svg>
</span>
<p class="lead" data-i18n="g1_a">most</p>
<p class="lead-sub" data-i18n="g1_b">breaches</p>
<span class="glabel" data-i18n="g1_lab">The #1 way in</span> <span class="glabel" data-i18n="g1_lab">The #1 way in</span>
<h3 data-i18n="g1_h">Stolen &amp; weak credentials</h3> <h3 data-i18n="g1_h">Stolen &amp; weak credentials</h3>
<p data-i18n="g1_p">The large majority of hacking-related breaches involve stolen or weak passwords — year after year.</p> <p data-i18n="g1_p">The large majority of hacking-related breaches involve stolen or weak passwords — year after year.</p>
<span class="src" data-i18n="g1_src">Source: Verizon DBIR</span> <span class="src" data-i18n="g1_src">Source: Verizon DBIR</span>
</div> </div>
<div class="stat reveal"> <div class="stat stat--warn reveal">
<svg class="gauge" viewBox="0 0 120 120" aria-hidden="true"> <span class="medallion" aria-hidden="true">
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" stroke-width="12"/> <!-- two identical key-cards: the same password reused -->
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--warn)" stroke-width="12" <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="75" stroke-linecap="round" stroke-linejoin="round">
transform="rotate(-90 60 60)"/> <rect x="14" y="6" width="26" height="17" rx="2.5"/>
<text x="60" y="58" text-anchor="middle" font-size="19" data-i18n="g2_a">most</text> <path d="M18 11.5h6 M18 16h12"/>
<text x="60" y="78" text-anchor="middle" font-size="9" fill="var(--muted)" data-i18n="g2_b">people</text> <rect x="8" y="25" width="26" height="17" rx="2.5" fill="var(--surface)"/>
<path d="M12 30.5h6 M12 35h12"/>
</svg> </svg>
</span>
<p class="lead" data-i18n="g2_a">most</p>
<p class="lead-sub" data-i18n="g2_b">people</p>
<span class="glabel" data-i18n="g2_lab">The bad habit</span> <span class="glabel" data-i18n="g2_lab">The bad habit</span>
<h3 data-i18n="g2_h">Reuse the same password</h3> <h3 data-i18n="g2_h">Reuse the same password</h3>
<p data-i18n="g2_p">Surveys consistently find most people reuse passwords across multiple accounts.</p> <p data-i18n="g2_p">Surveys consistently find most people reuse passwords across multiple accounts.</p>
<span class="src" data-i18n="g2_src">Source: industry surveys</span> <span class="src" data-i18n="g2_src">Source: industry surveys</span>
</div> </div>
<div class="stat reveal"> <div class="stat stat--bad reveal">
<svg class="gauge" viewBox="0 0 120 120" aria-hidden="true"> <span class="medallion" aria-hidden="true">
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" stroke-width="12"/> <!-- leaked passwords scattering out: already circulating -->
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--bad)" stroke-width="12" <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="20" stroke-linecap="round" stroke-linejoin="round">
transform="rotate(-90 60 60)"/> <path d="M9 30v6a3 3 0 0 0 3 3h13"/>
<text x="60" y="58" text-anchor="middle" font-size="17" data-i18n="g3_a">billions</text> <rect x="6" y="18" width="18" height="12" rx="2.5"/>
<path d="M10 18v-3a5 5 0 0 1 10 0v3" stroke-width="2.2"/>
<circle cx="33" cy="13" r="1.8" fill="currentColor" stroke="none"/>
<circle cx="40" cy="20" r="1.8" fill="currentColor" stroke="none"/>
<circle cx="38" cy="32" r="1.8" fill="currentColor" stroke="none"/>
<circle cx="42" cy="11" r="1.4" fill="currentColor" stroke="none"/>
<circle cx="33" cy="24" r="1.4" fill="currentColor" stroke="none"/>
</svg> </svg>
</span>
<p class="lead" data-i18n="g3_a">billions</p>
<p class="lead-sub" aria-hidden="true">&nbsp;</p>
<span class="glabel" data-i18n="g3_lab">Already out there</span> <span class="glabel" data-i18n="g3_lab">Already out there</span>
<h3 data-i18n="g3_h">Stolen passwords circulating</h3> <h3 data-i18n="g3_h">Stolen passwords circulating</h3>
<p data-i18n="g3_p">Billions of stolen passwords are already on criminal forums and in malware dumps right now.</p> <p data-i18n="g3_p">Billions of stolen passwords are already on criminal forums and in malware dumps right now.</p>