Skip to content

Commit 08ddeb4

Browse files
karthikeyjoshikarthikeyjoshi
committed
style(docs): refine visuals of Security & Privacy section in Guide page
1 parent 8f99456 commit 08ddeb4

2 files changed

Lines changed: 64 additions & 15 deletions

File tree

‎web/src/index.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--color-surface-container-low: #f6f3ea;
1515
--color-outline: #847469;
1616
--color-outline-variant: #d7c3b6;
17+
--color-error: #dc2626;
1718
}
1819

1920
@layer base {
@@ -52,3 +53,18 @@
5253
-ms-overflow-style: none;
5354
scrollbar-width: none;
5455
}
56+
57+
.bg-hazard-stripes {
58+
background-image: repeating-linear-gradient(
59+
-45deg,
60+
color-mix(in srgb, var(--color-on-surface) 8%, transparent) 0px,
61+
color-mix(in srgb, var(--color-on-surface) 8%, transparent) 8px,
62+
transparent 8px,
63+
transparent 16px
64+
);
65+
}
66+
67+
.bg-radial-grid {
68+
background-size: 16px 16px;
69+
background-image: radial-gradient(circle, color-mix(in srgb, var(--color-on-surface) 8%, transparent) 1.5px, transparent 1.5px);
70+
}

‎web/src/pages/Guide.tsx‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -342,30 +342,63 @@ export function Guide() {
342342
{/* 07. Security */}
343343
<section className="mb-32">
344344
<div className="flex items-center gap-4 mb-12">
345-
<h2 className="font-headline text-4xl font-black uppercase tracking-tighter text-error">07. Security & Privacy</h2>
346-
<div className="h-[4px] flex-grow bg-error/20"></div>
345+
<h2 className="font-headline text-4xl font-black uppercase tracking-tighter">07. Security & Privacy</h2>
346+
<div className="h-[4px] flex-grow bg-on-surface/10"></div>
347347
</div>
348348

349349
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
350-
<div className="bg-white border-4 border-error p-8 hard-shadow">
351-
<div className="flex items-center gap-4 mb-6">
352-
<div className="w-12 h-12 bg-error text-white flex items-center justify-center">
353-
<Lock size={24} />
350+
<div className="bg-white border-4 border-on-surface p-8 hard-shadow flex flex-col justify-between relative overflow-hidden">
351+
<div>
352+
<div className="flex items-center gap-4 mb-6">
353+
<div className="w-12 h-12 bg-on-surface text-white flex items-center justify-center">
354+
<Lock size={24} />
355+
</div>
356+
<h3 className="text-2xl font-black uppercase font-headline tracking-tighter">Private Labs</h3>
354357
</div>
355-
<h3 className="text-2xl font-black uppercase font-headline tracking-tighter">Private Labs</h3>
358+
<p className="text-on-surface/70 leading-relaxed text-sm">
359+
Pro projects are secured by role-based access control. Unauthorized users cannot boot the VM or download the filesystem assets. However, once a user is authorized, assets are cached locally for performance.
360+
</p>
356361
</div>
357-
<p className="text-on-surface/70 leading-relaxed text-sm">
358-
Pro projects are secured by role-based access control. Unauthorized users cannot boot the VM or download the filesystem assets. However, once a user is authorized, assets are cached locally for performance.
359-
</p>
360362
</div>
361-
362-
<div className="bg-error text-white p-8 hard-shadow flex flex-col md:flex-row gap-6 items-center">
363-
<ShieldAlert size={60} className="shrink-0" />
363+
364+
<div className="bg-white border-4 border-on-surface p-8 hard-shadow flex flex-col justify-between relative overflow-hidden">
364365
<div>
365-
<h3 className="text-xl font-black uppercase font-headline tracking-tighter mb-2">Memory Forensics</h3>
366-
<p className="text-sm opacity-90">
366+
<div className="flex items-center gap-4 mb-6">
367+
<div className="w-12 h-12 bg-on-surface text-white flex items-center justify-center shrink-0">
368+
<ShieldAlert size={24} />
369+
</div>
370+
<div className="flex-grow flex items-center justify-between">
371+
<h3 className="text-2xl font-black uppercase font-headline tracking-tighter text-on-surface">Memory Forensics</h3>
372+
</div>
373+
</div>
374+
<p className="text-on-surface/75 leading-relaxed text-sm mb-6">
367375
Since the VM runs in-browser, any authorized user can extract files directly from memory. <strong>Never upload production credentials or sensitive PII.</strong>
368376
</p>
377+
378+
{/* Mock Live Memory Hex Dump */}
379+
<div className="bg-on-surface text-white/70 p-4 border border-white/10 font-mono text-[11px] leading-relaxed select-none relative overflow-hidden bg-radial-grid">
380+
<div className="absolute top-0 right-0 px-2 py-0.5 border border-white/20 bg-on-surface text-white/50 text-[8px] font-black uppercase tracking-wider">Live VM Memory</div>
381+
<div className="flex justify-between text-white/30 border-b border-white/10 pb-1 mb-2 font-headline text-[9px] uppercase tracking-wider font-bold">
382+
<span>Offset</span>
383+
<span>Hex Dump</span>
384+
<span>ASCII</span>
385+
</div>
386+
<div className="opacity-95 font-bold flex justify-between gap-2">
387+
<span className="text-white/40">0x0000FA80:</span>
388+
<span className="text-white/60">4E 45 56 45 52 20 55 50</span>
389+
<span className="text-white font-black underline decoration-dashed decoration-white/50">NEVER_UP</span>
390+
</div>
391+
<div className="opacity-80 flex justify-between gap-2">
392+
<span className="text-white/40">0x0000FA88:</span>
393+
<span className="text-white/50">4C 4F 41 44 20 50 49 49</span>
394+
<span className="text-white/85 font-black underline decoration-dashed decoration-white/40">LOAD_PII</span>
395+
</div>
396+
<div className="opacity-60 flex justify-between gap-2">
397+
<span className="text-white/40">0x0000FA90:</span>
398+
<span className="text-white/40">41 55 54 48 5F 54 4F 4B</span>
399+
<span className="text-white/70 font-black underline decoration-dashed decoration-white/30">AUTH_TOK</span>
400+
</div>
401+
</div>
369402
</div>
370403
</div>
371404
</div>

0 commit comments

Comments
 (0)