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"> <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"> <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 --> <!-- 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"> <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 Detect fake USB sticks before you lose data
</p> </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> Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
</h1> </h1>
<p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead"> <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
@@ -26,7 +26,7 @@
</a> </a>
<a href="#features" <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"> data-i18n="cta_learn">
Learn more about Free &amp; Pro Learn more about Free &amp; Pro
</a> </a>
@@ -50,48 +50,64 @@
</div> </div>
<!-- Right: Card (Teaser Quickcheck) --> <!-- Right: Card (Teaser Quickcheck) -->
<div class="flex-1 w-full max-w-md lg:max-w-sm"> <div class="flex-1 w-full max-w-xl">
<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="quick-preview-card space-y-6">
<div class="flex items-start justify-between gap-3"> <div class="quick-preview-header">
<div> <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 QUICK CHECK PREVIEW
</p> </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 Test a USB drive in under 2 minutes
</h2> </h2>
</div> </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 Free
</span> </span>
</div> </div>
<div class="space-y-3 text-sm text-brand-muted"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<p data-i18n="quick_intro"> <div class="quick-metric-card">
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">
<span data-i18n="quick_metric1_label">Write performance</span> <span data-i18n="quick_metric1_label">Write performance</span>
<span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span> <span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
</div> </div>
<div class="h-1.5 rounded-full bg-brand-primarySoft overflow-hidden"> <div class="quick-metric-card">
<div class="h-full w-3/4 bg-brand-primary"></div>
</div>
<div class="flex justify-between">
<span data-i18n="quick_metric2_label">Integrity checks</span> <span data-i18n="quick_metric2_label">Integrity checks</span>
<span data-i18n="quick_metric2_value">512 MB sample</span> <span data-i18n="quick_metric2_value">512 MB sample</span>
</div> </div>
<p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote"> </div>
*Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
</p> <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> </div>
<a href="https://usbcheck.it/fakecheck/" <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) --> <!-- Tailwind (Dev) -->
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>

228
public/assets/css/main.css
View File

@@ -1,17 +1,17 @@
:root { :root {
--brand-blue: #0051FF; --brand-blue: #3a6ff8;
--deep-gray: #1A1A1A; --deep-gray: #0f1f3d;
--silver: #C8CBD0; --silver: #d9e1f2;
--green-check: #03C160; --green-check: #1fce88;
--error-red: #E63946; --error-red: #f46666;
--amber-yellow: #FFDA3D; --amber-yellow: #ffb347;
--light-gray: #F4F4F4; --light-gray: #edf2fb;
--very-light-gray: #FAFAFA; --very-light-gray: #f9fbff;
--off-white: #FFFFFF; --off-white: #ffffff;
--radius-lg: 16px; --radius-lg: 16px;
--radius-pill: 999px; --radius-pill: 999px;
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.08); --shadow-soft: 0 18px 45px rgba(55, 101, 202, 0.15);
} }
*, *,
@@ -28,8 +28,8 @@ html, body {
body { body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 400; font-weight: 400;
color: #222; color: #1f2a44;
background: var(--very-light-gray); background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #f1f6ff 100%);
} }
/* Layout helpers */ /* Layout helpers */
@@ -237,7 +237,8 @@ body {
.hero { .hero {
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 4rem; padding-bottom: 4rem;
background: radial-gradient(circle at top left, rgba(0, 81, 255, 0.08), transparent 55%); background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.2), transparent 55%),
radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
} }
.hero-grid { .hero-grid {
@@ -301,11 +302,11 @@ body {
} }
.hero-card { .hero-card {
background: #fff; background: linear-gradient(160deg, #ffffff 0%, #f1f5ff 80%);
border-radius: 24px; border-radius: 28px;
padding: 1.4rem 1.5rem; padding: 1.6rem 1.8rem;
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
border: 1px solid rgba(200, 203, 208, 0.6); border: 1px solid rgba(58, 111, 248, 0.15);
} }
.hero-logo { .hero-logo {
@@ -324,31 +325,208 @@ body {
.hero-metrics { .hero-metrics {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem; gap: 0.9rem;
margin-bottom: 0.75rem; margin-bottom: 1.25rem;
} }
.metric-label { .metric-label {
display: block; display: block;
font-size: 0.75rem; font-size: 0.8rem;
color: #777; color: #5f6b85;
} }
.metric-value { .metric-value {
font-family: 'Montserrat', system-ui, sans-serif; font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1.1rem;
color: var(--deep-gray);
} }
.hero-small { .hero-small {
font-size: 0.75rem; font-size: 0.78rem;
color: #777; color: #6c7695;
} }
.hero-stick img { .hero-stick img {
width: 200px; width: 200px;
max-width: 100%; max-width: 100%;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25)); filter: drop-shadow(0 12px 28px rgba(58, 111, 248, 0.25));
}
/* Quick test visual */
.quick-preview-card {
position: relative;
border-radius: 32px;
padding: 1.8rem;
background: linear-gradient(165deg, #ffffff 0%, #eef4ff 100%);
border: 1px solid rgba(56, 102, 214, 0.2);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.quick-preview-card::after {
content: "";
position: absolute;
inset: 12% auto auto 60%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(58, 111, 248, 0.12), transparent 65%);
pointer-events: none;
}
.quick-preview-header {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
}
.quick-preview-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-blue);
}
.quick-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
color: #1b4045;
background: rgba(31, 206, 136, 0.15);
}
.quick-metric-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
border: 1px solid rgba(90, 132, 224, 0.2);
padding: 0.8rem 1rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.quick-metric-card span:first-child {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6c7695;
}
.quick-metric-card span:last-child {
font-size: 1.05rem;
font-weight: 600;
color: var(--deep-gray);
}
.quick-kit {
position: relative;
margin-top: 1.5rem;
border-radius: 30px;
padding: 1.5rem;
background: linear-gradient(120deg, #ffffff 0%, #f2f7ff 100%);
border: 1px solid rgba(68, 121, 249, 0.18);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 1rem;
}
.quick-kit-left h4 {
margin: 0;
font-size: 1.1rem;
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--deep-gray);
}
.quick-kit-left p {
margin: 0.35rem 0 0;
font-size: 0.9rem;
color: #5f6b85;
}
.quick-kit-lines {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.8rem;
}
.quick-kit-line {
position: relative;
height: 14px;
border-radius: 999px;
background: rgba(92, 120, 192, 0.12);
overflow: hidden;
}
.quick-kit-line::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(58, 111, 248, 0.1), rgba(31, 206, 136, 0.5));
}
.quick-kit-line.is-alert::after {
background: linear-gradient(90deg, rgba(255, 180, 90, 0.2), rgba(255, 118, 118, 0.5));
}
.quick-kit-window {
position: relative;
border-radius: 26px;
padding: 1rem;
background: linear-gradient(145deg, #edf2ff, #ffffff);
box-shadow: inset 0 2px 6px rgba(15, 33, 66, 0.08);
}
.quick-kit-window .window-label {
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #8390b3;
margin-bottom: 0.5rem;
display: block;
}
.quick-kit-window .window-strip {
height: 60px;
border-radius: 18px;
background: #ffffff;
border: 1px dashed rgba(89, 124, 178, 0.4);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 1.2rem;
}
.window-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #e6ecff;
position: relative;
}
.window-dot.is-active {
background: #3a6ff8;
box-shadow: 0 0 0 6px rgba(58, 111, 248, 0.18);
}
.window-dot.is-pass {
background: #1fce88;
box-shadow: 0 0 0 6px rgba(31, 206, 136, 0.18);
}
.quick-kit-footnote {
margin-top: 0.7rem;
font-size: 0.75rem;
color: #7a86a8;
} }
/* Steps / Features / Pricing */ /* Steps / Features / Pricing */

5
public/assets/i18n/de.json
View File

@@ -45,7 +45,10 @@
"quick_metric2_label": "Integritätsprüfung", "quick_metric2_label": "Integritätsprüfung",
"quick_metric2_value": "512 MB Testdaten", "quick_metric2_value": "512 MB Testdaten",
"quick_footnote": "*Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.", "quick_footnote": "*Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.",
"quick_cta": "Zum kostenlosen Schnelltest" "quick_cta": "Zum kostenlosen Schnelltest",
"quick_visual_title": "Schnelltest-Anzeige",
"quick_visual_text": "So sieht die Quick-Check-Vorschau aus: Grün markiert stabile Daten, Orange warnt, wenn die Schreibrate einbricht.",
"quick_visual_window": "Ergebnisfenster"
}, },
"how": { "how": {

5
public/assets/i18n/en.json
View File

@@ -45,7 +45,10 @@
"quick_metric2_label": "Integrity checks", "quick_metric2_label": "Integrity checks",
"quick_metric2_value": "512 MB sample", "quick_metric2_value": "512 MB sample",
"quick_footnote": "*Example values – your results depend on drive, port &amp; system.", "quick_footnote": "*Example values – your results depend on drive, port &amp; system.",
"quick_cta": "Go to free quick check" "quick_cta": "Go to free quick check",
"quick_visual_title": "Quick test indicator",
"quick_visual_text": "See how the quick check highlights fake patterns: the green bar marks stable data, orange alerts you when writes collapse.",
"quick_visual_window": "Result window"
}, },
"how": { "how": {

5
public/assets/i18n/fr.json
View File

@@ -45,7 +45,10 @@
"quick_metric2_label": "Contrôles d’intégrité", "quick_metric2_label": "Contrôles d’intégrité",
"quick_metric2_value": "Échantillon de 512 Mo", "quick_metric2_value": "Échantillon de 512 Mo",
"quick_footnote": "*Valeurs indicatives – les résultats dépendent de la clé, du port et du système.", "quick_footnote": "*Valeurs indicatives – les résultats dépendent de la clé, du port et du système.",
"quick_cta": "Accéder au test rapide gratuit" "quick_cta": "Accéder au test rapide gratuit",
"quick_visual_title": "Indicateur du test rapide",
"quick_visual_text": "Voici l’aspect visuel du contrôle rapide : le vert signale des données stables, l’orange avertit lorsque l’écriture s’effondre.",
"quick_visual_window": "Fenêtre de résultat"
}, },
"how": { "how": {

5
public/assets/i18n/it.json
View File

@@ -45,7 +45,10 @@
"quick_metric2_label": "Controlli di integrità", "quick_metric2_label": "Controlli di integrità",
"quick_metric2_value": "Campione da 512 MB", "quick_metric2_value": "Campione da 512 MB",
"quick_footnote": "*Valori di esempio – i risultati dipendono da chiavetta, porta e sistema.", "quick_footnote": "*Valori di esempio – i risultati dipendono da chiavetta, porta e sistema.",
"quick_cta": "Vai al test rapido gratuito" "quick_cta": "Vai al test rapido gratuito",
"quick_visual_title": "Indicatore quick test",
"quick_visual_text": "Ecco l’aspetto visivo del controllo rapido: il verde mostra dati stabili, l’arancione avvisa quando la scrittura crolla.",
"quick_visual_window": "Finestra risultato"
}, },
"how": { "how": {