projects/usbcheck.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TEST

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-23 23:30:06 +01:00
parent 13cde64a13
commit c7803719ab
7 changed files with 292 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
partials/landing/main/hero.php
View File

@@ -1,5 +1,5 @@
<section id="hero" class="relative overflow-hidden">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(58,111,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(255,183,134,0.35),_transparent_60%)] pointer-events-none"></div>
<div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
<!-- Left: Text -->
@@ -7,7 +7,7 @@
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
Detect fake USB sticks before you lose data
</p>
<h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white" data-i18n="hero_title">
<h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-brand-text" data-i18n="hero_title">
Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
</h1>
<p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
@@ -26,7 +26,7 @@
</a>
<a href="#features"
class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/40 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/60 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
data-i18n="cta_learn">
Learn more about Free &amp; Pro
</a>
@@ -50,48 +50,64 @@
</div>
<!-- Right: Card (Teaser Quickcheck) -->
<div class="flex-1 w-full max-w-md lg:max-w-sm">
<div class="rounded-xl2 bg-brand-surface/90 border border-brand-border/70 shadow-soft p-5 sm:p-6 space-y-4">
<div class="flex items-start justify-between gap-3">
<div class="flex-1 w-full max-w-xl">
<div class="quick-preview-card space-y-6">
<div class="quick-preview-header">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="quick_label">
<p class="quick-preview-eyebrow" data-i18n="quick_label">
QUICK CHECK PREVIEW
</p>
<h2 class="mt-1 font-heading font-semibold text-lg text-white" data-i18n="quick_title">
<h2 class="mt-2 font-heading font-semibold text-xl text-brand-text" data-i18n="quick_title">
Test a USB drive in under 2 minutes
</h2>
</div>
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="badge_free">
<span class="quick-badge" data-i18n="badge_free">
Free
</span>
</div>
<div class="space-y-3 text-sm text-brand-muted">
<p data-i18n="quick_intro">
Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
</p>
<ul class="list-disc list-inside space-y-1">
<li data-i18n="quick_li1">Schreib- und Leserate</li>
<li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
<li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
</ul>
</div>
<div class="flex flex-col gap-2 text-xs text-brand-muted">
<div class="flex justify-between">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="quick-metric-card">
<span data-i18n="quick_metric1_label">Write performance</span>
<span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
</div>
<div class="h-1.5 rounded-full bg-brand-primarySoft overflow-hidden">
<div class="h-full w-3/4 bg-brand-primary"></div>
</div>
<div class="flex justify-between">
<div class="quick-metric-card">
<span data-i18n="quick_metric2_label">Integrity checks</span>
<span data-i18n="quick_metric2_value">512 MB sample</span>
</div>
<p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote">
*Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
</p>
</div>
<p class="text-sm text-brand-muted" data-i18n="quick_intro">
Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
</p>
<ul class="list-disc list-inside space-y-1 text-sm text-brand-muted">
<li data-i18n="quick_li1">Schreib- und Leserate</li>
<li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
<li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
</ul>
<div class="quick-kit">
<div class="quick-kit-left">
<h4 data-i18n="quick_visual_title">Quick test indicator</h4>
<p data-i18n="quick_visual_text">
So sieht die Schnelltest-Vorschau aus: Grün markiert einen stabilen Stick, Orange warnt bei Auffälligkeiten.
</p>
<div class="quick-kit-lines">
<div class="quick-kit-line"></div>
<div class="quick-kit-line is-alert"></div>
</div>
</div>
<div class="quick-kit-window">
<span class="window-label" data-i18n="quick_visual_window">Result window</span>
<div class="window-strip">
<span class="window-dot is-active"></span>
<span class="window-dot is-pass"></span>
<span class="window-dot"></span>
</div>
<p class="quick-kit-footnote" data-i18n="quick_footnote">
*Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
</p>
</div>
</div>
<a href="https://usbcheck.it/fakecheck/"

28
partials/structure/layout_start.php
View File

@@ -77,6 +77,34 @@ foreach ($GLOBALS['page_header_scripts'] as $script) {
}
?>
<script>
window.tailwind = window.tailwind || {};
window.tailwind.config = {
theme: {
extend: {
colors: {
'brand-primary': '#3a6ff8',
'brand-primarySoft': '#e8f1ff',
'brand-border': '#dfe6f4',
'brand-bg': '#f9fbff',
'brand-surface': '#ffffff',
'brand-text': '#0f1f3d',
'brand-muted': '#5f6b85'
},
fontFamily: {
heading: ['"Montserrat"', '"Plus Jakarta Sans"', '"Inter"', 'system-ui', 'sans-serif']
},
borderRadius: {
xl2: '1.75rem',
xl3: '2.25rem'
},
boxShadow: {
soft: '0 18px 45px rgba(58, 111, 248, 0.18)'
}
}
}
};
</script>
<!-- Tailwind (Dev) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>