This commit is contained in:
2025-11-18 01:36:49 +01:00
parent f9cc3bd7b8
commit beb7d9c868

View File

@@ -1,47 +1,601 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FakeUSBCheck Test USB drives for fakes and hidden problems</title>
<title>usbcheck.it Coming Soon</title> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description"
content="FakeUSBCheck helps you test USB flash drives for fake capacity, slow performance and data integrity issues. Run a quick browser-based check or unlock the Pro mode for deep tests." />
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@300;400&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@600;700&display=swap"
rel="stylesheet"
/>
<!-- Main CSS --> <!-- Tailwind via CDN -->
<link rel="stylesheet" href="css/comingsoon.css"> <script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand_blue: '#0051FF',
deep_gray: '#1A1A1A',
silver: '#C8CBD0',
green_check: '#03C160',
error_red: '#E63946',
amber_yellow: '#FFDA3D',
light_gray: '#F4F4F4',
very_light_gray: '#FAFAFA',
off_white: '#FFFFFF'
},
fontFamily: {
heading: ['Montserrat', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif']
},
boxShadow: {
soft: '0 20px 40px rgba(0,0,0,0.08)'
},
borderRadius: {
'2xl': '1rem',
'3xl': '1.5rem'
}
}
}
}
</script>
<style>
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.heading-font {
font-family: 'Montserrat', system-ui, sans-serif;
}
/* Smooth anchor scroll */
html {
scroll-behavior: smooth;
}
</style>
</head> </head>
<body> <body class="bg-very_light_gray text-deep_gray">
<!-- Page wrapper -->
<div class="min-h-screen flex flex-col">
<div class="page"> <!-- Header -->
<div class="glow"></div> <header class="sticky top-0 z-40 bg-off_white/90 backdrop-blur border-b border-silver/30">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="#" class="flex items-center gap-3">
<img src="/img/logo_slogan.png"
alt="FakeUSBCheck logo"
class="h-9 w-auto" />
</a>
<main class="card"> <!-- Navigation -->
<img <nav class="hidden md:flex items-center gap-6 text-sm font-medium">
src="img/logo_slogan.png" <a href="#how-it-works" class="text-deep_gray/80 hover:text-deep_gray">How it works</a>
alt="usbcheck.it Test USB drives for fakes" <a href="#features" class="text-deep_gray/80 hover:text-deep_gray">Features</a>
class="logo" <a href="#pricing" class="text-deep_gray/80 hover:text-deep_gray">Free vs Pro</a>
> <a href="#security" class="text-deep_gray/80 hover:text-deep_gray">Security</a>
<a href="#faq" class="text-deep_gray/80 hover:text-deep_gray">FAQ</a>
</nav>
<h1>Coming soon.</h1> <!-- Login / Avatar -->
<div class="flex items-center gap-3">
<!-- This button is shown while logged OUT -->
<button id="loginButton"
class="hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-full border border-brand_blue text-brand_blue text-sm font-medium hover:bg-brand_blue/5 transition">
<span>Log in</span>
</button>
<p class="lead"> <!-- Avatar shown while logged IN (initials or icon) -->
Soon youll be able to verify if your USB drives are genuine <button id="userAvatar"
with quick online checks and deeper tests using our desktop tool. class="hidden sm:inline-flex items-center justify-center w-9 h-9 rounded-full bg-brand_blue text-off_white text-sm font-semibold shadow-soft">
</p> <span id="userAvatarInitials">LG</span>
</button>
<div class="pill-row"> <!-- Mobile login icon -->
<span class="pill pill-safe">Secure checks</span> <button id="loginIconMobile"
<span class="pill pill-size">Real capacity tests</span> class="inline-flex sm:hidden items-center justify-center w-9 h-9 rounded-full border border-brand_blue text-brand_blue hover:bg-brand_blue/5 transition"
<span class="pill pill-fake">Detect fake USB sticks</span> aria-label="Log in">
<!-- Simple icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-9A2.25 2.25 0 002.25 5.25v13.5A2.25 2.25 0 004.5 21h9a2.25 2.25 0 002.25-2.25V15M18 9l3 3m0 0l-3 3m3-3H9"/>
</svg>
</button>
</div>
</div>
</div> </div>
</header>
<p class="note"> <!-- Main content -->
This service is currently under development. <main class="flex-1">
Stay tuned usbcheck.it will be online shortly.
</p> <!-- HERO -->
<section class="bg-gradient-to-b from-off_white to-very_light_gray pt-12 pb-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row items-center gap-10">
<!-- Hero text -->
<div class="flex-1">
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-light_gray text-xs font-medium text-deep_gray/70 mb-4">
<span class="w-2 h-2 rounded-full bg-green_check"></span>
Detect fake USB drives before they destroy your data
</span>
<h1 class="heading-font text-3xl sm:text-4xl lg:text-5xl font-bold text-deep_gray mb-4">
Test your USB sticks for <span class="text-brand_blue">fakes, slow speed</span> and
<span class="text-brand_blue">hidden errors</span>.
</h1>
<p class="text-base sm:text-lg text-deep_gray/80 max-w-xl mb-6">
FakeUSBCheck helps you verify the real capacity and stability of USB flash drives.
Run a fast browser-based check in minutes or unlock the Pro mode for deep surface tests,
inspired by tools like <strong>f3</strong> and <strong>badblocks</strong>.
</p>
<!-- Hero buttons -->
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
<a href="/fakecheck/"
class="inline-flex items-center justify-center px-6 py-3 rounded-full bg-brand_blue text-off_white text-sm font-semibold shadow-soft hover:bg-brand_blue/90 transition">
Start quick check
<svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/>
</svg>
</a>
<a href="#how-it-works"
class="inline-flex items-center justify-center px-5 py-3 rounded-full border border-silver text-deep_gray text-sm font-medium hover:border-brand_blue/60 hover:text-brand_blue transition">
Learn how it works
</a>
</div>
<div class="flex items-center gap-4 text-xs sm:text-sm text-deep_gray/70">
<div class="flex items-center gap-2">
<span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-green_check text-off_white text-[10px]"></span>
<span>Browser-based quick test nothing installed</span>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-green_check text-off_white text-[10px]"></span>
<span>Pro mode with deep capacity verification</span>
</div>
</div>
</div>
<!-- Hero visual -->
<div class="flex-1 flex justify-center lg:justify-end">
<div class="relative w-full max-w-md">
<div class="absolute -inset-4 bg-brand_blue/5 rounded-3xl blur-2xl"></div>
<div class="relative bg-off_white rounded-3xl shadow-soft border border-silver/40 p-6">
<div class="flex items-center justify-between mb-4">
<div>
<p class="heading-font text-sm font-semibold text-deep_gray">
Quick USB check
</p>
<p class="text-xs text-deep_gray/70">
Example device: 64 GB USB 3.1 flash drive
</p>
</div>
<span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-light_gray text-green_check text-xs font-medium">
<span class="w-2 h-2 rounded-full bg-green_check"></span>
OK
</span>
</div>
<!-- Fake mini "progress" -->
<div class="space-y-3 mb-4">
<div>
<div class="flex justify-between text-xs text-deep_gray/70 mb-1">
<span>Write test</span>
<span>145 MB/s</span>
</div>
<div class="w-full h-2 rounded-full bg-light_gray overflow-hidden">
<div class="h-2 rounded-full bg-brand_blue w-4/5"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs text-deep_gray/70 mb-1">
<span>Read test</span>
<span>180 MB/s</span>
</div>
<div class="w-full h-2 rounded-full bg-light_gray overflow-hidden">
<div class="h-2 rounded-full bg-green_check w-11/12"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs text-deep_gray/70 mb-1">
<span>Integrity blocks checked</span>
<span>8.0 GB of 8.0 GB</span>
</div>
<div class="w-full h-2 rounded-full bg-light_gray overflow-hidden">
<div class="h-2 rounded-full bg-amber_yellow w-full"></div>
</div>
</div>
</div>
<div class="flex items-center justify-between text-xs text-deep_gray/80">
<span>Result: drive looks genuine</span>
<a href="/fakecheck/"
class="inline-flex items-center gap-1 text-brand_blue hover:underline">
Re-run test
</a>
</div>
</div>
<!-- USB image (optional) -->
<div class="absolute -bottom-10 -right-6 hidden sm:block">
<img src="/img/stick_blank.png"
alt="USB stick illustration"
class="h-24 drop-shadow-lg">
</div>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="how-it-works" class="py-16 bg-off_white border-t border-silver/20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mb-10">
<h2 class="heading-font text-2xl sm:text-3xl font-bold mb-3">
How FakeUSBCheck works
</h2>
<p class="text-deep_gray/80 text-sm sm:text-base">
FakeUSBCheck combines a safe, browser-based quick check with an optional Pro mode.
The browser mode focuses on performance and basic integrity. The Pro mode, supported
by a small helper app on your computer, can run deep capacity and surface tests similar
to established tools like f3 or badblocks.
</p>
</div>
<div class="grid gap-8 md:grid-cols-3">
<div class="bg-very_light_gray rounded-2xl p-6 border border-light_gray">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-brand_blue/10 text-brand_blue mb-4">
1
</div>
<h3 class="heading-font text-lg font-semibold mb-2">Select your USB drive</h3>
<p class="text-sm text-deep_gray/80">
Choose the folder on your USB flash drive you want to test. The browser never
sees other drives or folders you stay in control of what is accessed.
</p>
</div>
<div class="bg-very_light_gray rounded-2xl p-6 border border-light_gray">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-brand_blue/10 text-brand_blue mb-4">
2
</div>
<h3 class="heading-font text-lg font-semibold mb-2">Run the quick browser check</h3>
<p class="text-sm text-deep_gray/80">
FakeUSBCheck writes a configurable amount of test data, reads it back
and calculates checksums. You see write and read speeds, plus a basic
integrity result for the tested area.
</p>
</div>
<div class="bg-very_light_gray rounded-2xl p-6 border border-light_gray">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-brand_blue/10 text-brand_blue mb-4">
3
</div>
<h3 class="heading-font text-lg font-semibold mb-2">Unlock Pro mode for deep tests</h3>
<p class="text-sm text-deep_gray/80">
In Pro mode you install a small helper application that can perform full-drive
surface scans, fake capacity detection and extended stress tests, while
FakeUSBCheck provides the dashboard and reporting.
</p>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features" class="py-16 bg-very_light_gray">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mb-10">
<h2 class="heading-font text-2xl sm:text-3xl font-bold mb-3">
Designed for safety, speed and clarity
</h2>
<p class="text-deep_gray/80 text-sm sm:text-base">
FakeUSBCheck focuses on giving you a clear result: is this drive worth trusting?
All tests are designed to be understandable, with transparent metrics and
optional in-depth reports for advanced users.
</p>
</div>
<div class="grid gap-6 md:grid-cols-3">
<div class="bg-off_white rounded-2xl p-6 border border-light_gray">
<h3 class="heading-font text-lg font-semibold mb-2">Quick browser check</h3>
<p class="text-sm text-deep_gray/80 mb-3">
Start a quick test directly from your browser no installation required.
Ideal before copying important data or using a new drive for the first time.
</p>
<ul class="text-sm text-deep_gray/80 space-y-1">
<li> Test presets: 200 MB, 2 GB, 8 GB</li>
<li> Write &amp; read throughput in MB/s</li>
<li> Checksum-based integrity verification</li>
</ul>
</div>
<div class="bg-off_white rounded-2xl p-6 border border-light_gray">
<h3 class="heading-font text-lg font-semibold mb-2">Pro capacity verification</h3>
<p class="text-sm text-deep_gray/80 mb-3">
Detect fake capacity drives that claim unrealistic gigabytes or terabytes.
The Pro helper app can run full media scans while the web dashboard
visualizes progress and results.
</p>
<ul class="text-sm text-deep_gray/80 space-y-1">
<li> Detection of over-reported capacity</li>
<li> Optional full surface scan</li>
<li> JSON report &amp; PDF export</li>
</ul>
</div>
<div class="bg-off_white rounded-2xl p-6 border border-light_gray">
<h3 class="heading-font text-lg font-semibold mb-2">Clear reports</h3>
<p class="text-sm text-deep_gray/80 mb-3">
Every test produces a human-readable summary and a technical report.
That makes it easy to document defective devices or prove that a drive
behaves as expected.
</p>
<ul class="text-sm text-deep_gray/80 space-y-1">
<li> Simple “OK / Warning / Failed” status</li>
<li> Detailed logs for advanced users</li>
<li> Optional sharing link for support</li>
</ul>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing" class="py-16 bg-off_white border-t border-silver/20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mb-10 text-center mx-auto">
<h2 class="heading-font text-2xl sm:text-3xl font-bold mb-3">
Free quick check or Pro deep analysis
</h2>
<p class="text-deep_gray/80 text-sm sm:text-base">
Start with the free browser-based quick check. If you need full-drive verification, repeated
test runs or PDF reports, upgrade to Pro. No subscription is required for basic checks.
</p>
</div>
<div class="grid gap-6 md:grid-cols-2">
<!-- Free -->
<div class="bg-very_light_gray rounded-3xl border border-light_gray p-6 flex flex-col">
<h3 class="heading-font text-xl font-semibold mb-1">Free quick check</h3>
<p class="text-sm text-deep_gray/80 mb-4">
Ideal for a fast sanity check of a new USB stick before you trust it with important files.
</p>
<p class="text-3xl font-bold heading-font mb-4">€0</p>
<ul class="text-sm text-deep_gray/80 space-y-2 mb-6">
<li> Browser-based test, no install</li>
<li> Basic write &amp; read speed measurement</li>
<li> Configurable test size (up to a limit)</li>
<li> Simple “OK / Warning / Failed” result</li>
</ul>
<a href="/fakecheck/"
class="mt-auto inline-flex items-center justify-center px-5 py-3 rounded-full bg-brand_blue text-off_white text-sm font-semibold hover:bg-brand_blue/90 transition">
Start free quick check
</a>
</div>
<!-- Pro -->
<div class="bg-deep_gray rounded-3xl border border-deep_gray text-off_white p-6 flex flex-col relative overflow-hidden">
<div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-amber_yellow text-xs font-semibold text-deep_gray">
Coming soon
</div>
<h3 class="heading-font text-xl font-semibold mb-1">Pro deep check</h3>
<p class="text-sm text-off_white/80 mb-4">
For power users, IT support and anyone buying larger batches of USB drives who needs
reproducible, documented test results.
</p>
<p class="text-3xl font-bold heading-font mb-4">Planned</p>
<ul class="text-sm text-off_white/80 space-y-2 mb-6">
<li> Helper app for Windows, macOS &amp; Linux</li>
<li> Full-drive surface tests &amp; capacity verification</li>
<li> Detailed performance statistics and logs</li>
<li> PDF and JSON export for documentation</li>
</ul>
<button
class="mt-auto inline-flex items-center justify-center px-5 py-3 rounded-full bg-off_white text-deep_gray text-sm font-semibold hover:bg-off_white/90 transition">
Get notified about Pro launch
</button>
</div>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 bg-very_light_gray">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid gap-10 md:grid-cols-2 items-start">
<div>
<h2 class="heading-font text-2xl sm:text-3xl font-bold mb-3">
Built with privacy and data safety in mind
</h2>
<p class="text-sm sm:text-base text-deep_gray/80 mb-4">
Your data on the USB drive is sensitive. FakeUSBCheck is designed so that you stay in
control at every step. The browser-based quick check never uploads your test data.
Only aggregated test results are sent to our servers and only if you explicitly agree.
</p>
<p class="text-sm sm:text-base text-deep_gray/80 mb-4">
The optional Pro helper runs locally on your device and only talks to our API using secure,
encrypted connections. You can review exactly what is being sent and revoke access at any
time.
</p>
<p class="text-sm sm:text-base text-deep_gray/80">
We do not sell your test results to third parties. Anonymous statistics may be used to
improve detection of common fake models and to warn users about frequently abused brands.
</p>
</div>
<div class="bg-off_white rounded-3xl border border-light_gray p-6 shadow-soft">
<h3 class="heading-font text-lg font-semibold mb-3">Security highlights</h3>
<ul class="text-sm text-deep_gray/85 space-y-2 mb-4">
<li> Browser quick check: test data stays on your device</li>
<li> Optional upload of summarized results only</li>
<li> Pro helper: TLS-encrypted communication</li>
<li> Transparent logs so you can see what happened</li>
<li> No hidden “phone home” behaviour</li>
</ul>
<p class="text-xs text-deep_gray/65">
Detailed privacy and security documentation will be available before the Pro mode
leaves beta. Our goal: you should be able to explain to a non-technical friend exactly
what FakeUSBCheck does and what it doesnt do.
</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 bg-off_white border-t border-silver/20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mb-10">
<h2 class="heading-font text-2xl sm:text-3xl font-bold mb-3">
Frequently asked questions
</h2>
<p class="text-deep_gray/80 text-sm sm:text-base">
A few common questions about testing USB flash drives and how FakeUSBCheck fits into
your workflow.
</p>
</div>
<div class="space-y-6">
<div class="bg-very_light_gray rounded-2xl p-5 border border-light_gray">
<h3 class="heading-font text-base font-semibold mb-2">
Can FakeUSBCheck damage my USB drive?
</h3>
<p class="text-sm text-deep_gray/80">
Any write test puts some wear on flash memory. The quick check is designed to use a
reasonable test size so that the wear stays minimal for healthy drives. The Pro mode
can perform heavy tests; those are intended for situations where you specifically want
to stress-test a drive or check a suspicious device.
</p>
</div>
<div class="bg-very_light_gray rounded-2xl p-5 border border-light_gray">
<h3 class="heading-font text-base font-semibold mb-2">
Do I have to install anything for the free quick check?
</h3>
<p class="text-sm text-deep_gray/80">
No. The browser-based quick check runs entirely inside your browser, using modern
APIs that allow you to work with files and folders on your USB drive with your
explicit consent. You only need to install the Pro helper if you want deep,
full-drive tests.
</p>
</div>
<div class="bg-very_light_gray rounded-2xl p-5 border border-light_gray">
<h3 class="heading-font text-base font-semibold mb-2">
How reliable is the detection of fake capacity drives?
</h3>
<p class="text-sm text-deep_gray/80">
Detecting fake capacities requires writing and reading large portions of the drive.
The Pro mode is specifically designed for this type of validation. While no tool can
guarantee 100% detection of all possible manipulation techniques, deep surface tests
provide strong evidence and clear documentation when a drive behaves incorrectly.
</p>
</div>
<div class="bg-very_light_gray rounded-2xl p-5 border border-light_gray">
<h3 class="heading-font text-base font-semibold mb-2">
Can I test external SSDs or only USB sticks?
</h3>
<p class="text-sm text-deep_gray/80">
The quick browser check focuses on USB flash drives, but in practice it works with
any storage that appears as a normal folder, including some external SSDs. The Pro
helper can work with a broader range of devices, including USB-connected SSDs and
some memory cards, depending on your operating system.
</p>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="py-16 bg-very_light_gray border-t border-silver/20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-deep_gray rounded-3xl px-6 py-8 sm:px-10 sm:py-10 text-off_white flex flex-col md:flex-row items-start md:items-center justify-between gap-6 shadow-soft">
<div>
<h2 class="heading-font text-2xl sm:text-3xl font-bold mb-3">
Ready to see if your USB sticks are real?
</h2>
<p class="text-sm sm:text-base text-off_white/80">
Start a free quick check in your browser. No account, no installation. If you need
more, Pro mode will be ready soon with full-drive tests and exportable reports.
</p>
</div>
<div class="flex flex-col sm:flex-row gap-3 min-w-[200px]">
<a href="/fakecheck/"
class="inline-flex items-center justify-center px-6 py-3 rounded-full bg-off_white text-deep_gray text-sm font-semibold hover:bg-off_white/90 transition">
Start free quick check
</a>
<a href="#pricing"
class="inline-flex items-center justify-center px-6 py-3 rounded-full border border-off_white/60 text-off_white text-sm font-semibold hover:bg-off_white/10 transition">
View features
</a>
</div>
</div>
</div>
</section>
</main> </main>
<!-- Footer -->
<footer class="bg-deep_gray text-off_white py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
<p class="text-xs text-off_white/70">
© <!--?php echo date('Y'); ?--> FakeUSBCheck. All rights reserved.
</p>
<div class="flex flex-wrap gap-4 text-xs text-off_white/70">
<a href="/imprint" class="hover:text-off_white">Imprint</a>
<a href="/privacy" class="hover:text-off_white">Privacy</a>
<a href="/terms" class="hover:text-off_white">Terms</a>
</div>
</div>
</footer>
</div> </div>
<!-- Simple JS hook for login/avatar state -->
<script>
// Example: global helper functions you can call from your real auth code
window.fakeUsbAuth = {
setLoggedIn(displayName) {
const loginBtn = document.getElementById('loginButton');
const loginIconMobile = document.getElementById('loginIconMobile');
const userAvatar = document.getElementById('userAvatar');
const avatarText = document.getElementById('userAvatarInitials');
if (displayName && avatarText) {
const parts = displayName.trim().split(' ');
const initials = parts.length >= 2
? (parts[0][0] + parts[1][0])
: (displayName[0] || 'U');
avatarText.textContent = initials.toUpperCase();
}
if (loginBtn) loginBtn.classList.add('hidden');
if (loginIconMobile) loginIconMobile.classList.add('hidden');
if (userAvatar) userAvatar.classList.remove('hidden');
},
setLoggedOut() {
const loginBtn = document.getElementById('loginButton');
const loginIconMobile = document.getElementById('loginIconMobile');
const userAvatar = document.getElementById('userAvatar');
if (loginBtn) loginBtn.classList.remove('hidden');
if (loginIconMobile) loginIconMobile.classList.remove('hidden');
if (userAvatar) userAvatar.classList.add('hidden');
}
};
// Initial state: logged out
window.fakeUsbAuth.setLoggedOut();
</script>
</body> </body>
</html> </html>