fishfacegit/privateqrscanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicer visual aperance

Browse Source
This commit is contained in:
Hadrian Burkhardt
2026-05-10 10:31:51 +02:00
parent 120d1672a3
commit 1eb389ea5e
12 changed files with 1821 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
store-assets/private-qr-scanner-phone-screenshot-1.html
+515
View File
@@ -0,0 +1,515 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1080, height=1920, initial-scale=1">
<title>Private QR Scanner Screenshot 1</title>
<style>
:root {
--bg: #07111f;
--surface: #f8fafc;
--surface-2: #eef7f5;
--ink: #0b1220;
--muted: #5e7282;
--teal: #2dd4bf;
--mint: #dff7f2;
--blue: #1d4ed8;
}
* {
box-sizing: border-box;
}
html,
body {
width: 1080px;
height: 1920px;
margin: 0;
overflow: hidden;
font-family: Inter, "DejaVu Sans", Arial, sans-serif;
background: var(--bg);
color: var(--surface);
}
.shot {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
background:
radial-gradient(circle at 72% 17%, rgba(45, 212, 191, 0.22), transparent 27%),
radial-gradient(circle at 22% 70%, rgba(223, 247, 242, 0.10), transparent 24%),
linear-gradient(180deg, #0b1220 0%, #103840 52%, #07111f 100%);
}
.camera {
position: absolute;
inset: 0;
overflow: hidden;
background:
linear-gradient(90deg, rgba(45, 212, 191, 0.09) 1px, transparent 1px) 0 0 / 68px 68px,
linear-gradient(0deg, rgba(45, 212, 191, 0.08) 1px, transparent 1px) 0 0 / 68px 68px,
radial-gradient(circle at 58% 38%, rgba(45, 212, 191, 0.17), transparent 22%),
linear-gradient(150deg, rgba(8, 17, 31, 0.15), rgba(8, 17, 31, 0.78));
}
.camera::before,
.camera::after {
content: "";
position: absolute;
left: -120px;
right: -120px;
pointer-events: none;
}
.camera::before {
top: 314px;
height: 424px;
background: rgba(223, 247, 242, 0.10);
clip-path: polygon(0 63%, 19% 42%, 38% 48%, 58% 33%, 78% 42%, 100% 21%, 100% 100%, 0 100%);
}
.camera::after {
top: 642px;
height: 470px;
background: rgba(2, 6, 23, 0.58);
clip-path: polygon(0 23%, 18% 10%, 36% 28%, 54% 18%, 73% 31%, 100% 13%, 100% 100%, 0 100%);
}
.status {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
height: 92px;
padding: 22px 44px 0;
color: #f8fafc;
font-size: 24px;
font-weight: 760;
}
.system-icons {
display: flex;
align-items: center;
gap: 10px;
}
.signal {
display: flex;
align-items: end;
gap: 4px;
height: 22px;
}
.signal span {
width: 5px;
border-radius: 999px;
background: #f8fafc;
}
.signal span:nth-child(1) { height: 8px; }
.signal span:nth-child(2) { height: 12px; }
.signal span:nth-child(3) { height: 16px; }
.signal span:nth-child(4) { height: 21px; }
.battery {
width: 42px;
height: 20px;
border: 2px solid #f8fafc;
border-radius: 6px;
padding: 3px;
}
.battery::after {
content: "";
display: block;
width: 27px;
height: 10px;
border-radius: 3px;
background: var(--teal);
}
.top-chip {
position: absolute;
top: 118px;
left: 212px;
right: 212px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
min-height: 56px;
padding: 11px 18px;
border-radius: 18px;
color: white;
background: rgba(0, 0, 0, 0.45);
font-size: 23px;
font-weight: 700;
text-align: center;
box-shadow: 0 18px 42px rgba(2, 6, 23, 0.24);
}
.gallery {
position: absolute;
top: 112px;
right: 42px;
z-index: 3;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border: 1px solid rgba(248, 250, 252, 0.22);
border-radius: 18px;
background: rgba(0, 0, 0, 0.38);
}
.gallery svg {
width: 32px;
height: 32px;
}
.aim {
position: absolute;
top: 392px;
left: 166px;
z-index: 2;
width: 748px;
height: 480px;
border-radius: 54px;
background: rgba(45, 212, 191, 0.06);
border: 7px solid rgba(45, 212, 191, 0.9);
box-shadow:
inset 0 0 0 2px rgba(223, 247, 242, 0.20),
0 0 72px rgba(45, 212, 191, 0.27);
}
.qr-target {
position: absolute;
top: 478px;
left: 332px;
z-index: 3;
width: 416px;
height: 300px;
border-radius: 26px;
padding: 26px;
background: rgba(248, 250, 252, 0.97);
box-shadow: 0 28px 70px rgba(2, 6, 23, 0.36);
}
.qr-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 13px;
width: 100%;
height: 100%;
}
.qr-grid span {
border-radius: 5px;
background: #07111f;
}
.qr-grid span:nth-child(4),
.qr-grid span:nth-child(10),
.qr-grid span:nth-child(18),
.qr-grid span:nth-child(25),
.qr-grid span:nth-child(32) {
background: var(--teal);
}
.detect-box {
position: absolute;
top: 466px;
left: 314px;
z-index: 4;
width: 452px;
height: 336px;
border: 5px solid #4ae3a3;
border-radius: 32px;
box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.07);
}
.scan-line {
position: absolute;
top: 642px;
left: 214px;
right: 214px;
z-index: 5;
height: 7px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #2dd4bf, transparent);
box-shadow: 0 0 34px rgba(45, 212, 191, 0.92);
}
.hint {
position: absolute;
left: 238px;
right: 238px;
bottom: 616px;
z-index: 6;
min-height: 58px;
padding: 13px 22px;
border-radius: 24px;
background: rgba(0, 0, 0, 0.45);
color: #f8fafc;
font-size: 25px;
font-weight: 660;
text-align: center;
}
.sheet {
position: absolute;
left: 0;
right: 0;
bottom: 118px;
z-index: 8;
min-height: 612px;
padding: 22px 38px 34px;
border-radius: 42px 42px 0 0;
background: #f8fafc;
color: var(--ink);
box-shadow: 0 -34px 72px rgba(2, 6, 23, 0.35);
}
.handle {
width: 94px;
height: 8px;
margin: 0 auto 26px;
border-radius: 999px;
background: #cbd5e1;
}
.result-card {
padding: 28px;
border-radius: 26px;
background: #f2f7ff;
}
.result-title {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 24px;
color: #172033;
font-size: 32px;
font-weight: 800;
}
.badge {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border-radius: 999px;
background: var(--mint);
color: #0f766e;
font-size: 18px;
font-weight: 820;
}
.field {
margin-top: 18px;
}
.field-label {
color: #526879;
font-size: 19px;
font-weight: 760;
}
.field-value {
margin-top: 6px;
color: var(--blue);
font-size: 24px;
line-height: 1.28;
font-weight: 640;
text-decoration: underline;
}
.risk {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding: 16px 18px;
border-radius: 20px;
background: #ecfdf5;
color: #065f46;
font-size: 22px;
font-weight: 740;
}
.risk svg {
width: 28px;
height: 28px;
flex: 0 0 auto;
}
.actions {
display: flex;
gap: 18px;
margin-top: 26px;
}
.action {
display: grid;
place-items: center;
width: 70px;
height: 70px;
border-radius: 50%;
background: #eef2f7;
color: #1e293b;
}
.action svg {
width: 32px;
height: 32px;
}
.primary {
margin-left: auto;
width: 250px;
border-radius: 22px;
background: #0f766e;
color: #f8fafc;
font-size: 24px;
font-weight: 820;
}
.nav {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 118px;
padding: 12px 56px 18px;
background: #fcfffe;
color: #607080;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.nav-item {
display: grid;
place-items: center;
align-content: center;
gap: 7px;
font-size: 20px;
font-weight: 740;
}
.nav-item svg {
width: 28px;
height: 28px;
}
.nav-item.active {
color: #0f766e;
}
</style>
</head>
<body>
<main class="shot">
<div class="camera"></div>
<div class="status">
<div>9:41</div>
<div class="system-icons">
<div class="signal"><span></span><span></span><span></span><span></span></div>
<div class="battery"></div>
</div>
</div>
<div class="top-chip">Everyday personal use</div>
<div class="gallery" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M4 5H20V19H4V5Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
<path d="M7 16L10.6 12.4L13 14.8L15 12.8L19 16.8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 9.2H15.52" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>
</div>
<div class="aim"></div>
<div class="qr-target">
<div class="qr-grid">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<div class="detect-box"></div>
<div class="scan-line"></div>
<div class="hint">Readable code detected.</div>
<section class="sheet">
<div class="handle"></div>
<div class="result-card">
<h1 class="result-title">URL <span class="badge">Local check</span></h1>
<div class="field">
<div class="field-label">Link</div>
<div class="field-value">https://example.org/menu</div>
</div>
<div class="field">
<div class="field-label">Risk score</div>
<div class="field-value" style="color:#0f172a;text-decoration:none">0</div>
</div>
<div class="risk">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 3L19 6V11C19 15.7 16.1 19.9 12 21.8C7.9 19.9 5 15.7 5 11V6L12 3Z" fill="#10B981"/>
<path d="M9 12L11.1 14.1L15.5 9.7" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Checked on device before opening
</div>
</div>
<div class="actions">
<div class="action" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M8 8H6C5.4 8 5 8.4 5 9V19C5 19.6 5.4 20 6 20H16C16.6 20 17 19.6 17 19V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M8 4H18C18.6 4 19 4.4 19 5V15C19 15.6 18.6 16 18 16H8C7.4 16 7 15.6 7 15V5C7 4.4 7.4 4 8 4Z" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<div class="action" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M18 8C19.7 8 21 6.7 21 5C21 3.3 19.7 2 18 2C16.3 2 15 3.3 15 5C15 5.2 15 5.4 15.1 5.6L8.6 9.2C8.1 8.5 7.1 8 6 8C4.3 8 3 9.3 3 11C3 12.7 4.3 14 6 14C7.1 14 8.1 13.5 8.6 12.8L15.1 16.4C15 16.6 15 16.8 15 17C15 18.7 16.3 20 18 20C19.7 20 21 18.7 21 17C21 15.3 19.7 14 18 14C16.9 14 15.9 14.5 15.4 15.2L8.9 11.6C9 11.4 9 11.2 9 11C9 10.8 9 10.6 8.9 10.4L15.4 6.8C15.9 7.5 16.9 8 18 8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
</div>
<div class="action primary">Open</div>
</div>
</section>
<nav class="nav">
<div class="nav-item active">
<svg viewBox="0 0 24 24" fill="none">
<path d="M5 7V5H9M15 5H19V9M19 15V19H15M9 19H5V15" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
<path d="M8 12H16" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
</svg>
Scan
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none">
<path d="M5 5H19V19H5V5Z" stroke="currentColor" stroke-width="2"/>
<path d="M8 9H16M8 13H16M8 17H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
History
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 15.5C13.9 15.5 15.5 13.9 15.5 12C15.5 10.1 13.9 8.5 12 8.5C10.1 8.5 8.5 10.1 8.5 12C8.5 13.9 10.1 15.5 12 15.5Z" stroke="currentColor" stroke-width="2"/>
<path d="M19 12H21M3 12H5M12 3V5M12 19V21M17 7L18.4 5.6M5.6 18.4L7 17M17 17L18.4 18.4M5.6 5.6L7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Settings
</div>
</nav>
</main>
</body>
</html>