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

phone screen shots

Browse Source
This commit is contained in:
Hadrian Burkhardt
2026-05-10 10:53:37 +02:00
parent 1eb389ea5e
commit d822e54f91
12 changed files with 1338 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
store-assets/private-qr-scanner-phone-screenshot-3.html
+576
View File
@@ -0,0 +1,576 @@
<!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 3</title>
<style>
:root {
--deep: #07111f;
--navy: #0b1220;
--teal-900: #123b3f;
--teal-700: #0f766e;
--teal-300: #2dd4bf;
--mint: #dff7f2;
--white: #f8fafc;
--muted: #cbe7e3;
--warning: #ffc857;
--danger: #f43f5e;
}
* {
box-sizing: border-box;
}
html,
body {
width: 1080px;
height: 1920px;
margin: 0;
overflow: hidden;
font-family: Inter, "DejaVu Sans", Arial, sans-serif;
background: var(--deep);
color: var(--white);
}
.shot {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
background:
radial-gradient(circle at 78% 18%, rgba(45, 212, 191, 0.24), transparent 26%),
linear-gradient(180deg, #07111f 0%, #103840 48%, #07111f 100%);
}
.camera {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(45, 212, 191, 0.10) 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 50% 42%, rgba(45, 212, 191, 0.19), transparent 25%),
linear-gradient(150deg, rgba(8, 17, 31, 0.16), rgba(8, 17, 31, 0.82));
}
.camera::before,
.camera::after {
content: "";
position: absolute;
left: -130px;
right: -130px;
pointer-events: none;
}
.camera::before {
top: 326px;
height: 420px;
background: rgba(223, 247, 242, 0.10);
clip-path: polygon(0 56%, 19% 33%, 41% 45%, 61% 28%, 80% 39%, 100% 18%, 100% 100%, 0 100%);
}
.camera::after {
top: 674px;
height: 488px;
background: rgba(2, 6, 23, 0.62);
clip-path: polygon(0 18%, 18% 8%, 36% 27%, 54% 18%, 74% 34%, 100% 16%, 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;
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: var(--white);
}
.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 var(--white);
border-radius: 6px;
padding: 3px;
}
.battery::after {
content: "";
display: block;
width: 27px;
height: 10px;
border-radius: 3px;
background: var(--teal-300);
}
.top-chip {
position: absolute;
top: 118px;
left: 212px;
right: 212px;
z-index: 4;
min-height: 56px;
padding: 11px 18px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.52);
text-align: center;
font-size: 23px;
font-weight: 800;
}
.whitelist {
position: absolute;
top: 188px;
left: 276px;
right: 276px;
z-index: 4;
min-height: 44px;
padding: 8px 12px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.40);
color: var(--mint);
text-align: center;
font-size: 18px;
font-weight: 760;
}
.import,
.gallery {
position: absolute;
top: 112px;
z-index: 4;
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);
}
.import { right: 118px; }
.gallery { right: 42px; opacity: 0.48; }
.import svg,
.gallery svg {
width: 32px;
height: 32px;
}
.mode {
position: absolute;
top: 116px;
left: 42px;
z-index: 4;
width: 104px;
padding: 10px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.38);
text-align: center;
color: var(--white);
font-size: 15px;
font-weight: 760;
}
.mode svg {
display: block;
width: 36px;
height: 36px;
margin: 0 auto 6px;
color: var(--teal-300);
}
.aim {
position: absolute;
top: 388px;
left: 166px;
z-index: 2;
width: 748px;
height: 480px;
border-radius: 54px;
background: rgba(45, 212, 191, 0.07);
border: 7px solid rgba(45, 212, 191, 0.95);
box-shadow:
inset 0 0 0 2px rgba(223, 247, 242, 0.20),
0 0 72px rgba(45, 212, 191, 0.30);
}
.ticket {
position: absolute;
top: 500px;
left: 268px;
z-index: 3;
width: 544px;
height: 248px;
border-radius: 32px;
padding: 28px;
background:
radial-gradient(circle at 0 50%, transparent 26px, var(--white) 27px),
radial-gradient(circle at 100% 50%, transparent 26px, var(--white) 27px),
linear-gradient(90deg, var(--white), #e9fffb);
background-repeat: no-repeat;
box-shadow: 0 28px 70px rgba(2, 6, 23, 0.36);
color: var(--navy);
}
.ticket-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
}
.event {
font-size: 28px;
line-height: 1;
font-weight: 900;
}
.valid {
padding: 8px 12px;
border-radius: 999px;
background: var(--mint);
color: var(--teal-700);
font-size: 16px;
font-weight: 900;
}
.barcode {
display: grid;
grid-template-columns: repeat(18, 1fr);
gap: 7px;
height: 82px;
margin-bottom: 18px;
}
.barcode span {
border-radius: 3px;
background: var(--navy);
}
.barcode span:nth-child(3n),
.barcode span:nth-child(7),
.barcode span:nth-child(16) {
background: var(--teal-300);
}
.ticket-id {
color: #526879;
font-size: 19px;
font-weight: 800;
}
.detect-box {
position: absolute;
top: 484px;
left: 246px;
z-index: 4;
width: 588px;
height: 282px;
border: 5px solid #4ae3a3;
border-radius: 38px;
}
.scan-line {
position: absolute;
top: 638px;
left: 214px;
right: 214px;
z-index: 5;
height: 7px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--teal-300), 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: var(--white);
font-size: 25px;
font-weight: 760;
text-align: center;
}
.batch {
position: absolute;
left: 28px;
right: 28px;
bottom: 132px;
z-index: 8;
padding: 22px;
border-radius: 28px;
background: rgba(2, 6, 23, 0.58);
color: var(--white);
box-shadow: 0 -20px 60px rgba(2, 6, 23, 0.36);
backdrop-filter: blur(10px);
}
.batch-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
color: var(--white);
font-size: 26px;
font-weight: 900;
}
.share {
padding: 9px 14px;
border-radius: 999px;
background: var(--mint);
color: var(--teal-700);
font-size: 17px;
font-weight: 900;
}
.capture {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 0;
border-top: 1px solid rgba(223, 247, 242, 0.14);
}
.capture:first-of-type {
border-top: 0;
}
.capture strong {
display: block;
color: var(--white);
font-size: 21px;
line-height: 1.2;
}
.capture span {
display: block;
margin-top: 4px;
color: rgba(223, 247, 242, 0.72);
font-size: 17px;
font-weight: 680;
}
.copy {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
color: var(--white);
background: rgba(223, 247, 242, 0.12);
}
.copy svg {
width: 24px;
height: 24px;
}
.warning {
margin-top: 12px;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
border-radius: 18px;
background: rgba(244, 63, 94, 0.16);
color: #ffe4e6;
font-size: 18px;
font-weight: 800;
}
.warning svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
}
.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: var(--teal-700);
}
</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="mode" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M4 5H20V19H4V5Z" stroke="currentColor" stroke-width="2"/>
<path d="M8 9H16M8 13H16M8 17H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Batch
</div>
<div class="top-chip">Event &amp; ticketing</div>
<div class="whitelist">Registered IDs loaded: 412</div>
<div class="import" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 3V15M12 3L8 7M12 3L16 7" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 15V19H19V15" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</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"/>
</svg>
</div>
<div class="aim"></div>
<section class="ticket">
<div class="ticket-top">
<div class="event">Entry Pass</div>
<div class="valid">VALID</div>
</div>
<div class="barcode">
<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 class="ticket-id">ID: EVT-24-0187</div>
</section>
<div class="detect-box"></div>
<div class="scan-line"></div>
<div class="hint">Readable code detected.</div>
<section class="batch">
<div class="batch-title">
<div>Batch captures: 3</div>
<div class="share">Share batch</div>
</div>
<div class="capture">
<div><strong>Barcode: EVT-24-0187</strong><span>9:41 AM</span></div>
<div class="copy">
<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>
<div class="capture">
<div><strong>QR Code: EVT-24-0186</strong><span>9:40 AM</span></div>
<div class="copy">
<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>
<div class="capture">
<div><strong>QR Code: EVT-24-0185</strong><span>9:39 AM</span></div>
<div class="copy">
<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>
<div class="warning">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 3L22 20H2L12 3Z" fill="#F43F5E"/>
<path d="M12 9V13M12 17H12.02" stroke="white" stroke-width="2.3" stroke-linecap="round"/>
</svg>
Duplicate and unregistered ticket alerts stay on device.
</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>
store-assets/private-qr-scanner-phone-screenshot-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 KiB

store-assets/private-qr-scanner-phone-screenshot-4.html
+592
View File
@@ -0,0 +1,592 @@
<!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 4</title>
<style>
:root {
--bg: #f6fbfa;
--surface: #ffffff;
--soft: #f2f7ff;
--ink: #0b1220;
--muted: #607080;
--line: #dce8e6;
--teal: #0f766e;
--teal-300: #2dd4bf;
--mint: #dff7f2;
--navy: #07111f;
}
* {
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(--ink);
}
.shot {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
background:
radial-gradient(circle at 88% -4%, rgba(45, 212, 191, 0.18), transparent 31%),
linear-gradient(180deg, #f7fcfb 0%, #eef8f6 100%);
}
.status {
display: flex;
justify-content: space-between;
align-items: center;
height: 92px;
padding: 22px 44px 0;
color: var(--ink);
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: var(--ink);
}
.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 var(--ink);
border-radius: 6px;
padding: 3px;
}
.battery::after {
content: "";
display: block;
width: 27px;
height: 10px;
border-radius: 3px;
background: var(--teal-300);
}
.content {
padding: 30px 48px 144px;
}
.app-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 28px;
}
.app-icon {
width: 80px;
height: 80px;
border-radius: 20px;
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.18);
}
.app-title {
margin: 0;
font-size: 34px;
line-height: 1.08;
font-weight: 850;
letter-spacing: 0;
}
.app-subtitle {
margin-top: 5px;
color: var(--muted);
font-size: 20px;
font-weight: 660;
}
.hero {
position: relative;
margin-bottom: 28px;
padding: 28px;
border-radius: 34px;
background:
radial-gradient(circle at 84% 26%, rgba(45, 212, 191, 0.20), transparent 34%),
linear-gradient(145deg, #0b1220, #123b3f);
color: #f8fafc;
box-shadow: 0 22px 44px rgba(7, 17, 31, 0.18);
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
right: -80px;
bottom: -70px;
width: 330px;
height: 230px;
border-radius: 48px;
background: rgba(223, 247, 242, 0.07);
transform: rotate(-10deg);
}
.hero h1 {
position: relative;
z-index: 1;
margin: 0;
width: 720px;
font-size: 49px;
line-height: 1.04;
font-weight: 850;
letter-spacing: 0;
}
.hero p {
position: relative;
z-index: 1;
width: 650px;
margin: 16px 0 0;
color: #cbe7e3;
font-size: 25px;
line-height: 1.25;
font-weight: 560;
}
.chips {
position: relative;
z-index: 1;
display: flex;
gap: 12px;
margin-top: 24px;
}
.chip {
min-height: 56px;
padding: 14px 18px;
border-radius: 18px;
background: rgba(223, 247, 242, 0.12);
color: var(--mint);
font-size: 20px;
font-weight: 850;
}
.section-title {
margin: 0 0 18px;
color: #132032;
font-size: 31px;
font-weight: 850;
}
.image-scan {
display: grid;
grid-template-columns: 1fr 230px;
gap: 18px;
margin-bottom: 28px;
padding: 22px;
border-radius: 28px;
background: var(--surface);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}
.image-copy h2 {
margin: 0;
color: #132032;
font-size: 29px;
font-weight: 900;
}
.image-copy p {
margin: 10px 0 0;
color: var(--muted);
font-size: 22px;
line-height: 1.28;
font-weight: 620;
}
.photo {
position: relative;
height: 180px;
border-radius: 24px;
background:
linear-gradient(90deg, rgba(45, 212, 191, 0.11) 1px, transparent 1px) 0 0 / 25px 25px,
linear-gradient(0deg, rgba(45, 212, 191, 0.10) 1px, transparent 1px) 0 0 / 25px 25px,
linear-gradient(145deg, #07111f, #123b3f);
overflow: hidden;
}
.mini-qr {
position: absolute;
left: 50px;
top: 40px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
width: 130px;
height: 100px;
padding: 10px;
border-radius: 13px;
background: #f8fafc;
transform: rotate(-4deg);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
}
.mini-qr span {
border-radius: 3px;
background: var(--navy);
}
.mini-qr span:nth-child(5n+3),
.mini-qr span:nth-child(7),
.mini-qr span:nth-child(18) {
background: var(--teal-300);
}
.found {
position: absolute;
inset: 28px 34px;
border: 4px solid var(--teal-300);
border-radius: 20px;
}
.contact-card {
padding: 24px;
border-radius: 30px;
background: linear-gradient(135deg, #081c3b, #0f2e58, #134b73);
color: #f8fafc;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}
.contact-top {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 22px;
}
.initials {
display: grid;
place-items: center;
width: 74px;
height: 74px;
border-radius: 20px;
background: rgba(122, 247, 207, 0.18);
color: #7af7cf;
font-size: 30px;
font-weight: 900;
}
.person {
flex: 1;
min-width: 0;
}
.person h2 {
margin: 0;
font-size: 34px;
line-height: 1.05;
font-weight: 900;
}
.person p {
margin: 7px 0 0;
color: #c7d6e8;
font-size: 21px;
font-weight: 680;
}
.contact-lines {
display: grid;
gap: 13px;
}
.line {
display: grid;
grid-template-columns: 102px 1fr;
gap: 18px;
align-items: baseline;
font-size: 22px;
line-height: 1.26;
}
.line span:first-child {
color: #c7d6e8;
font-size: 17px;
font-weight: 800;
}
.line span:last-child {
color: #f8fafc;
font-weight: 700;
}
.actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 18px 0 28px;
}
.action {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 62px;
border-radius: 20px;
background: var(--surface);
color: var(--ink);
font-size: 21px;
font-weight: 850;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.action.primary {
background: var(--teal);
color: #f8fafc;
}
.action svg {
width: 25px;
height: 25px;
flex: 0 0 auto;
}
.result-grid {
display: grid;
gap: 14px;
}
.result-row {
display: grid;
grid-template-columns: 58px 1fr;
gap: 16px;
padding: 19px;
border-radius: 24px;
background: var(--surface);
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.type-icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 16px;
background: rgba(223, 247, 242, 0.65);
color: var(--teal);
}
.type-icon svg {
width: 30px;
height: 30px;
}
.result-row strong {
display: block;
color: #132032;
font-size: 24px;
line-height: 1.12;
font-weight: 900;
}
.result-row span {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 21px;
line-height: 1.24;
font-weight: 620;
}
.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: var(--teal);
}
</style>
</head>
<body>
<main class="shot">
<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>
<section class="content">
<header class="app-head">
<img class="app-icon" src="./private-qr-scanner-icon.svg" alt="">
<div>
<h1 class="app-title">Private QR Scanner</h1>
<div class="app-subtitle">Structured results, practical actions</div>
</div>
</header>
<section class="hero">
<h1>Scan from camera or image</h1>
<p>Recognize contacts, email, Wi-Fi, calendar events, links, and more.</p>
<div class="chips">
<div class="chip">Copy</div>
<div class="chip">Share</div>
<div class="chip">Add contact</div>
</div>
</section>
<section class="image-scan">
<div class="image-copy">
<h2>Scan from image</h2>
<p>Choose a saved photo and pick the detected code you want to use.</p>
</div>
<div class="photo" aria-hidden="true">
<div class="mini-qr">
<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 class="found"></div>
</div>
</section>
<h2 class="section-title">Contact result</h2>
<section class="contact-card">
<div class="contact-top">
<div class="initials">AR</div>
<div class="person">
<h2>Avery Reed</h2>
<p>Operations Lead • North Hall Events</p>
</div>
</div>
<div class="contact-lines">
<div class="line"><span>Phone</span><span>+1 555 0134</span></div>
<div class="line"><span>Email</span><span>avery@example.org</span></div>
<div class="line"><span>Address</span><span>240 Market Street, Suite 8</span></div>
</div>
</section>
<section class="actions">
<div class="action primary">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 12C14.2 12 16 10.2 16 8C16 5.8 14.2 4 12 4C9.8 4 8 5.8 8 8C8 10.2 9.8 12 12 12Z" stroke="currentColor" stroke-width="2"/>
<path d="M4 21C4.7 17.6 7.8 15 12 15C16.2 15 19.3 17.6 20 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M19 5V11M16 8H22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Add contact
</div>
<div class="action">
<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>
Copy
</div>
<div class="action">
<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>
Share
</div>
</section>
<section class="result-grid">
<article class="result-row">
<div class="type-icon">
<svg viewBox="0 0 24 24" fill="none">
<path d="M5 12.5C8.9 8.7 15.1 8.7 19 12.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
<path d="M8.2 15.4C10.3 13.4 13.7 13.4 15.8 15.4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
<path d="M12 19H12.02" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/>
</svg>
</div>
<div><strong>Wi-Fi QR codes</strong><span>Open Wi-Fi settings after inspecting network details.</span></div>
</article>
<article class="result-row">
<div class="type-icon">
<svg viewBox="0 0 24 24" fill="none">
<path d="M7 4V7M17 4V7M5 9H19M6 6H18C18.6 6 19 6.4 19 7V19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V7C5 6.4 5.4 6 6 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div><strong>Calendar events</strong><span>Review title, location, and time before adding.</span></div>
</article>
</section>
</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>
store-assets/private-qr-scanner-phone-screenshot-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

store-assets/private-qr-scanner-phone-screenshot-5.html
+58
View File
@@ -0,0 +1,58 @@
<!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 5</title>
<style>
*{box-sizing:border-box} html,body{width:1080px;height:1920px;margin:0;overflow:hidden;font-family:Inter,"DejaVu Sans",Arial,sans-serif;background:#07111f;color:#f8fafc}
.shot{position:relative;width:1080px;height:1920px;overflow:hidden;background:radial-gradient(circle at 70% 22%,rgba(45,212,191,.22),transparent 26%),linear-gradient(180deg,#07111f,#103840 50%,#07111f)}
.camera{position:absolute;inset:0;background:linear-gradient(90deg,rgba(45,212,191,.09) 1px,transparent 1px) 0 0/68px 68px,linear-gradient(0deg,rgba(45,212,191,.08) 1px,transparent 1px) 0 0/68px 68px,radial-gradient(circle at 50% 39%,rgba(45,212,191,.16),transparent 24%),linear-gradient(150deg,rgba(8,17,31,.18),rgba(8,17,31,.82))}
.camera:before,.camera:after{content:"";position:absolute;left:-120px;right:-120px}.camera:before{top:330px;height:420px;background:rgba(223,247,242,.1);clip-path:polygon(0 60%,19% 34%,40% 45%,61% 29%,80% 41%,100% 18%,100% 100%,0 100%)}.camera:after{top:680px;height:480px;background:rgba(2,6,23,.62);clip-path:polygon(0 18%,20% 8%,38% 27%,56% 17%,75% 33%,100% 14%,100% 100%,0 100%)}
.status{position:absolute;z-index:8;left:0;right:0;top:0;height:92px;padding:22px 44px 0;display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:760}.icons{display:flex;gap:10px;align-items:center}.signal{display:flex;gap:4px;align-items:end;height:22px}.signal span{width:5px;border-radius:99px;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:#2dd4bf}
.chip{position:absolute;z-index:5;top:118px;left:212px;right:212px;min-height:56px;padding:11px 18px;border-radius:18px;background:rgba(0,0,0,.52);text-align:center;font-size:23px;font-weight:800}.gallery{position:absolute;z-index:5;right:42px;top:112px;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:1px solid rgba(248,250,252,.22);background:rgba(0,0,0,.38)}.gallery svg{width:32px;height:32px}
.aim{position:absolute;z-index:2;top:390px;left:166px;width:748px;height:480px;border-radius:54px;background:rgba(45,212,191,.06);border:7px solid rgba(45,212,191,.95);box-shadow:0 0 72px rgba(45,212,191,.3),inset 0 0 0 2px rgba(223,247,242,.2)}
.qr{position:absolute;z-index:4;top:478px;left:332px;width:416px;height:300px;border-radius:26px;padding:26px;background:rgba(248,250,252,.97);box-shadow:0 28px 70px rgba(2,6,23,.36);display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr);gap:13px}.qr span{border-radius:5px;background:#07111f}.qr span:nth-child(4),.qr span:nth-child(10),.qr span:nth-child(18),.qr span:nth-child(25),.qr span:nth-child(32){background:#2dd4bf}
.detect{position:absolute;z-index:5;top:466px;left:314px;width:452px;height:336px;border:5px solid #4ae3a3;border-radius:32px}.line{position:absolute;z-index:6;top:642px;left:214px;right:214px;height:7px;border-radius:99px;background:linear-gradient(90deg,transparent,#2dd4bf,transparent);box-shadow:0 0 34px rgba(45,212,191,.92)}
.hint{position:absolute;z-index:6;left:238px;right:238px;bottom:632px;padding:13px 22px;border-radius:24px;background:rgba(0,0,0,.45);font-size:25px;font-weight:760;text-align:center}
.sheet{position:absolute;left:0;right:0;bottom:118px;z-index:7;min-height:568px;padding:22px 38px 34px;border-radius:42px 42px 0 0;background:#f8fafc;color:#0b1220;box-shadow:0 -34px 72px rgba(2,6,23,.35)}.handle{width:94px;height:8px;margin:0 auto 26px;border-radius:99px;background:#cbd5e1}
.card{padding:28px;border-radius:26px;background:#f2f7ff}.title{display:flex;gap:14px;align-items:center;margin:0 0 22px;font-size:32px;font-weight:900}.badge{padding:8px 14px;border-radius:99px;background:#fff1f2;color:#be123c;font-size:18px;font-weight:900}.label{margin-top:18px;color:#526879;font-size:19px;font-weight:760}.value{margin-top:6px;color:#1d4ed8;font-size:24px;line-height:1.28;font-weight:700;text-decoration:underline}.score{color:#be123c;text-decoration:none}
.warn-pill{display:flex;gap:12px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:20px;background:#fff1f2;color:#be123c;font-size:22px;font-weight:800}.warn-pill svg{width:28px;height:28px}
.modal-shade{position:absolute;inset:0;z-index:10;background:rgba(2,6,23,.48)}.dialog{position:absolute;z-index:11;left:70px;right:70px;top:730px;padding:30px;border-radius:28px;background:#fff;color:#0b1220;box-shadow:0 30px 80px rgba(2,6,23,.42)}.dialog h2{margin:0 0 14px;font-size:32px;font-weight:900}.dialog p{margin:0;color:#526879;font-size:24px;line-height:1.3;font-weight:620}.dialog-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:28px}.btn{padding:15px 20px;border-radius:18px;font-size:22px;font-weight:900;color:#0f766e}.btn.danger{background:#0f766e;color:#fff}
.nav{position:absolute;z-index:12;left:0;right:0;bottom:0;height:118px;padding:12px 56px 18px;display:grid;grid-template-columns:repeat(3,1fr);background:#fcfffe;color:#607080;border-top:1px solid rgba(15,23,42,.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}.active{color:#0f766e}
</style>
</head>
<body>
<main class="shot">
<div class="camera"></div>
<div class="status"><div>9:41</div><div class="icons"><div class="signal"><span></span><span></span><span></span><span></span></div><div class="battery"></div></div></div>
<div class="chip">Everyday personal use</div>
<div class="gallery"><svg viewBox="0 0 24 24" fill="none"><path d="M4 5H20V19H4V5Z" stroke="white" stroke-width="2"/><path d="M7 16L10.6 12.4L13 14.8L15 12.8L19 16.8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div class="aim"></div>
<div class="qr">
<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 class="detect"></div><div class="line"></div><div class="hint">Readable code detected.</div>
<section class="sheet">
<div class="handle"></div>
<div class="card">
<h1 class="title">URL <span class="badge">Unusual link</span></h1>
<div class="label">Link</div><div class="value">https://login.example-secure.co/session</div>
<div class="label">Risk score</div><div class="value score">4</div>
<div class="warn-pill"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3L22 20H2L12 3Z" fill="#F43F5E"/><path d="M12 9V13M12 17H12.02" stroke="white" stroke-width="2.3" stroke-linecap="round"/></svg>Checked locally before opening</div>
</div>
</section>
<div class="modal-shade"></div>
<section class="dialog">
<h2>This URL looks unusual</h2>
<p>Check the link before opening. The warning is calculated on your device, without sending the scan anywhere.</p>
<div class="dialog-actions"><div class="btn">Cancel</div><div class="btn danger">Open anyway</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>
store-assets/private-qr-scanner-phone-screenshot-5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 KiB

store-assets/private-qr-scanner-phone-screenshot-6.html
+41
View File
@@ -0,0 +1,41 @@
<!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 6</title>
<style>
*{box-sizing:border-box}html,body{width:1080px;height:1920px;margin:0;overflow:hidden;font-family:Inter,"DejaVu Sans",Arial,sans-serif;background:#f6fbfa;color:#0b1220}.shot{position:relative;width:1080px;height:1920px;overflow:hidden;background:radial-gradient(circle at 90% -4%,rgba(45,212,191,.18),transparent 31%),linear-gradient(180deg,#f7fcfb,#eef8f6)}
.status{height:92px;padding:22px 44px 0;display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:760}.icons{display:flex;gap:10px;align-items:center}.signal{display:flex;gap:4px;align-items:end;height:22px}.signal span{width:5px;border-radius:99px;background:#0b1220}.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 #0b1220;border-radius:6px;padding:3px}.battery:after{content:"";display:block;width:27px;height:10px;border-radius:3px;background:#2dd4bf}
.content{padding:30px 48px 144px}.head{display:flex;gap:18px;align-items:center;margin-bottom:28px}.icon{width:80px;height:80px;border-radius:20px;box-shadow:0 14px 28px rgba(15,118,110,.18)}.title{margin:0;font-size:34px;line-height:1.08;font-weight:900}.sub{margin-top:5px;color:#607080;font-size:20px;font-weight:700}
.hero{margin-bottom:28px;padding:30px;border-radius:34px;background:radial-gradient(circle at 88% 24%,rgba(45,212,191,.18),transparent 34%),linear-gradient(145deg,#0b1220,#123b3f);color:#f8fafc;box-shadow:0 22px 44px rgba(7,17,31,.18)}.hero h1{margin:0;font-size:49px;line-height:1.04;font-weight:900}.hero p{margin:16px 0 0;color:#cbe7e3;font-size:25px;line-height:1.25;font-weight:600}.chips{display:flex;gap:12px;margin-top:24px}.chip{padding:14px 18px;border-radius:18px;background:rgba(223,247,242,.12);color:#dff7f2;font-size:20px;font-weight:850}
.wifi-card{padding:28px;border-radius:30px;background:#fff;box-shadow:0 18px 38px rgba(15,23,42,.08);margin-bottom:20px}.wifi-head{display:flex;gap:18px;align-items:center;margin-bottom:24px}.wifi-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:22px;background:#dff7f2;color:#0f766e}.wifi-icon svg{width:42px;height:42px}.wifi-head h2{margin:0;font-size:38px;font-weight:900}.wifi-head p{margin:5px 0 0;color:#607080;font-size:21px;font-weight:700}.field{padding:18px 0;border-top:1px solid #dce8e6}.field:first-of-type{border-top:0}.field label{display:block;color:#607080;font-size:18px;font-weight:850}.field div{margin-top:7px;color:#0b1220;font-size:26px;font-weight:800}.password{display:flex;justify-content:space-between;align-items:center}.dots{letter-spacing:4px}
.button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:70px;margin:20px 0 28px;border-radius:22px;background:#0f766e;color:#f8fafc;font-size:24px;font-weight:900}.button svg{width:28px;height:28px}
.note{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:26px;background:#ecfdf5;color:#065f46;font-size:22px;line-height:1.32;font-weight:750;box-shadow:0 14px 30px rgba(15,23,42,.05)}.note svg{width:30px;height:30px;flex:0 0 auto}
.list{display:grid;gap:14px;margin-top:28px}.row{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:19px;border-radius:24px;background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.06)}.row-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:rgba(223,247,242,.65);color:#0f766e}.row-icon svg{width:30px;height:30px}.row strong{display:block;color:#132032;font-size:24px;font-weight:900}.row span{display:block;margin-top:6px;color:#607080;font-size:21px;line-height:1.24;font-weight:620}
.nav{position:absolute;left:0;right:0;bottom:0;height:118px;padding:12px 56px 18px;display:grid;grid-template-columns:repeat(3,1fr);background:#fcfffe;color:#607080;border-top:1px solid rgba(15,23,42,.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}.active{color:#0f766e}
</style>
</head>
<body>
<main class="shot">
<div class="status"><div>9:41</div><div class="icons"><div class="signal"><span></span><span></span><span></span><span></span></div><div class="battery"></div></div></div>
<section class="content">
<header class="head"><img class="icon" src="./private-qr-scanner-icon.svg" alt=""><div><h1 class="title">Private QR Scanner</h1><div class="sub">Structured QR details before acting</div></div></header>
<section class="hero"><h1>Wi-Fi codes stay readable</h1><p>Inspect network name and security type before opening Android Wi-Fi settings.</p><div class="chips"><div class="chip">Local parsing</div><div class="chip">No tracking</div><div class="chip">No account</div></div></section>
<section class="wifi-card">
<div class="wifi-head"><div class="wifi-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M5 12.5C8.9 8.7 15.1 8.7 19 12.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M8.2 15.4C10.3 13.4 13.7 13.4 15.8 15.4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M12 19H12.02" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/></svg></div><div><h2>Wi-Fi</h2><p>Scanned result</p></div></div>
<div class="field"><label>SSID</label><div>Guest Network</div></div>
<div class="field"><label>Security</label><div>WPA/WPA2</div></div>
<div class="field password"><div><label>Password</label><div class="dots">••••••••••</div></div><div style="color:#0f766e;font-size:20px;font-weight:900">Hidden</div></div>
</section>
<div class="button"><svg viewBox="0 0 24 24" fill="none"><path d="M5 12.5C8.9 8.7 15.1 8.7 19 12.5M8.2 15.4C10.3 13.4 13.7 13.4 15.8 15.4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M12 19H12.02" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/></svg>Open Wi-Fi settings</div>
<div class="note"><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"/></svg><div>Parsing happens on the device. Data leaves only when you choose an external action.</div></div>
<div class="list">
<div class="row"><div class="row-icon"><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><strong>Copy result</strong><span>Save the raw QR payload when needed.</span></div></div>
<div class="row"><div class="row-icon"><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"/></svg></div><div><strong>Share deliberately</strong><span>Send scanned content only when you choose.</span></div></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>
store-assets/private-qr-scanner-phone-screenshot-6.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 387 KiB

store-assets/private-qr-scanner-phone-screenshot-7.html
+31
View File
@@ -0,0 +1,31 @@
<!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 7</title>
<style>
*{box-sizing:border-box}html,body{width:1080px;height:1920px;margin:0;overflow:hidden;font-family:Inter,"DejaVu Sans",Arial,sans-serif;background:#07111f;color:#f8fafc}.shot{position:relative;width:1080px;height:1920px;overflow:hidden;background:radial-gradient(circle at 72% 18%,rgba(45,212,191,.22),transparent 28%),linear-gradient(180deg,#07111f,#103840 52%,#07111f)}
.grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(45,212,191,.09) 1px,transparent 1px) 0 0/68px 68px,linear-gradient(0deg,rgba(45,212,191,.08) 1px,transparent 1px) 0 0/68px 68px}.status{position:absolute;z-index:8;left:0;right:0;top:0;height:92px;padding:22px 44px 0;display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:760}.icons{display:flex;gap:10px;align-items:center}.signal{display:flex;gap:4px;align-items:end;height:22px}.signal span{width:5px;border-radius:99px;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:#2dd4bf}
.top{position:absolute;z-index:4;top:118px;left:212px;right:212px;min-height:56px;padding:11px 18px;border-radius:18px;background:rgba(0,0,0,.52);text-align:center;font-size:23px;font-weight:800}.gallery{position:absolute;z-index:5;right:42px;top:112px;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:1px solid rgba(248,250,252,.22);background:rgba(0,0,0,.38)}.gallery svg{width:32px;height:32px}
.phone-photo{position:absolute;z-index:2;left:98px;right:98px;top:292px;height:710px;border-radius:38px;background:linear-gradient(150deg,#0b1220,#155e63);box-shadow:0 28px 70px rgba(2,6,23,.36);overflow:hidden}.phone-photo:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(223,247,242,.12),transparent 26%),radial-gradient(circle at 82% 68%,rgba(45,212,191,.18),transparent 30%)}.paper{position:absolute;left:134px;top:160px;width:520px;height:350px;border-radius:30px;background:#f8fafc;transform:rotate(-4deg);box-shadow:0 26px 60px rgba(2,6,23,.4)}.paper h2{margin:34px 34px 18px;color:#0b1220;font-size:34px;font-weight:900}.mini{position:absolute;left:320px;top:118px;width:170px;height:145px;border-radius:18px;background:#edf8f6;padding:15px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.mini span{border-radius:4px;background:#07111f}.mini span:nth-child(5n+3),.mini span:nth-child(7),.mini span:nth-child(18){background:#2dd4bf}.bars{position:absolute;left:40px;right:40px;bottom:50px;display:grid;gap:14px}.bars span{height:18px;border-radius:99px;background:#cbd5e1}.bars span:nth-child(2){width:70%}.found{position:absolute;left:286px;top:84px;width:230px;height:210px;border:6px solid #2dd4bf;border-radius:28px}.found.two{left:80px;top:196px;width:260px;height:126px;border-color:#ffc857}
.dialog{position:absolute;z-index:7;left:42px;right:42px;bottom:146px;padding:28px;border-radius:34px;background:#fff;color:#0b1220;box-shadow:0 -24px 80px rgba(2,6,23,.4)}.dialog h1{margin:0;font-size:34px;font-weight:900}.dialog p{margin:10px 0 22px;color:#607080;font-size:23px;line-height:1.3;font-weight:650}.preview{height:240px;border-radius:28px;background:linear-gradient(145deg,#07111f,#123b3f);position:relative;overflow:hidden;margin-bottom:20px}.preview .mini{left:595px;top:55px;transform:rotate(-4deg);width:170px;height:140px}.preview .found{left:570px;top:36px;width:220px;height:180px}.candidate{display:grid;grid-template-columns:54px 1fr;gap:15px;align-items:center;padding:18px;border-radius:24px;background:#f6fbfa;margin-top:12px;border:2px solid transparent}.candidate.active{border-color:#2dd4bf;background:#ecfdf5}.candidate-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#dff7f2;color:#0f766e}.candidate-icon svg{width:30px;height:30px}.candidate strong{display:block;font-size:23px;font-weight:900}.candidate span{display:block;margin-top:5px;color:#607080;font-size:20px;line-height:1.2;font-weight:650}.actions{display:flex;justify-content:flex-end;gap:14px;margin-top:24px}.btn{padding:15px 20px;border-radius:18px;font-size:22px;font-weight:900;color:#0f766e}.btn.primary{background:#0f766e;color:#fff}
.nav{position:absolute;z-index:9;left:0;right:0;bottom:0;height:118px;padding:12px 56px 18px;display:grid;grid-template-columns:repeat(3,1fr);background:#fcfffe;color:#607080;border-top:1px solid rgba(15,23,42,.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}.active{color:#0f766e}
</style>
</head>
<body>
<main class="shot">
<div class="grid"></div><div class="status"><div>9:41</div><div class="icons"><div class="signal"><span></span><span></span><span></span><span></span></div><div class="battery"></div></div></div>
<div class="top">Scan from image</div><div class="gallery"><svg viewBox="0 0 24 24" fill="none"><path d="M4 5H20V19H4V5Z" stroke="white" stroke-width="2"/><path d="M7 16L10.6 12.4L13 14.8L15 12.8L19 16.8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<section class="phone-photo"><div class="paper"><h2>Meeting flyer</h2><div class="mini"><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 class="bars"><span></span><span></span><span></span></div><div class="found"></div><div class="found two"></div></div></section>
<section class="dialog">
<h1>Found 2 codes in image</h1><p>Choose the result you want to use. Detection and parsing happen locally.</p>
<div class="preview"><div class="mini"><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 class="found"></div></div>
<div class="candidate active"><div class="candidate-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M10 13A5 5 0 0 0 17.1 13L20 10.1A5 5 0 0 0 12.9 3L11.8 4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M14 11A5 5 0 0 0 6.9 11L4 13.9A5 5 0 0 0 11.1 21L12.2 19.9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div><div><strong>URL</strong><span>https://example.org/register</span></div></div>
<div class="candidate"><div class="candidate-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M4 8L12 13L20 8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 6H19C19.6 6 20 6.4 20 7V17C20 17.6 19.6 18 19 18H5C4.4 18 4 17.6 4 17V7C4 6.4 4.4 6 5 6Z" stroke="currentColor" stroke-width="2.2"/></svg></div><div><strong>Email</strong><span>hello@example.org</span></div></div>
<div class="actions"><div class="btn">Cancel</div><div class="btn primary">Use selected</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>
store-assets/private-qr-scanner-phone-screenshot-7.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 KiB

store-assets/private-qr-scanner-phone-screenshot-8.html
+40
View File
@@ -0,0 +1,40 @@
<!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 8</title>
<style>
*{box-sizing:border-box}html,body{width:1080px;height:1920px;margin:0;overflow:hidden;font-family:Inter,"DejaVu Sans",Arial,sans-serif;background:#f6fbfa;color:#0b1220}.shot{position:relative;width:1080px;height:1920px;overflow:hidden;background:radial-gradient(circle at 92% -4%,rgba(45,212,191,.2),transparent 31%),linear-gradient(180deg,#f6fbfa,#eff8f6)}
.status{height:92px;padding:22px 44px 0;display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:760}.icons{display:flex;gap:10px;align-items:center}.signal{display:flex;gap:4px;align-items:end;height:22px}.signal span{width:5px;border-radius:99px;background:#0b1220}.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 #0b1220;border-radius:6px;padding:3px}.battery:after{content:"";display:block;width:27px;height:10px;border-radius:3px;background:#2dd4bf}
.content{padding:30px 48px 144px}.head{display:flex;gap:18px;align-items:center;margin-bottom:28px}.icon{width:80px;height:80px;border-radius:20px;box-shadow:0 14px 28px rgba(15,118,110,.18)}.title{margin:0;font-size:34px;line-height:1.08;font-weight:900}.sub{margin-top:5px;color:#607080;font-size:20px;font-weight:700}
.hero{margin-bottom:28px;padding:30px;border-radius:34px;background:radial-gradient(circle at 88% 24%,rgba(45,212,191,.18),transparent 34%),linear-gradient(145deg,#0b1220,#123b3f);color:#f8fafc;box-shadow:0 22px 44px rgba(7,17,31,.18)}.hero h1{margin:0;font-size:49px;line-height:1.04;font-weight:900}.hero p{margin:16px 0 0;color:#cbe7e3;font-size:25px;line-height:1.25;font-weight:600}
.panel{padding:8px 24px;border-radius:30px;background:#fff;box-shadow:0 18px 38px rgba(15,23,42,.07);margin-bottom:22px}.setting{display:flex;justify-content:space-between;align-items:center;min-height:86px;border-top:1px solid #dce8e6;font-size:25px;font-weight:850}.setting:first-child{border-top:0}.switch{position:relative;width:70px;height:40px;border-radius:99px;background:#0f766e}.switch:after{content:"";position:absolute;right:5px;top:5px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 4px 8px rgba(15,23,42,.24)}
.section-title{margin:0 0 14px;color:#132032;font-size:31px;font-weight:900}.usecase{padding:24px;border-radius:28px;background:#fff;box-shadow:0 18px 38px rgba(15,23,42,.07);margin-bottom:22px}.usecase strong{display:block;font-size:25px;font-weight:900}.usecase span{display:block;margin-top:8px;color:#607080;font-size:22px;font-weight:650}.choose{display:inline-flex;margin-top:16px;padding:13px 18px;border-radius:18px;background:#dff7f2;color:#0f766e;font-size:20px;font-weight:900}
.about{display:grid;gap:12px;padding:24px;border-radius:28px;background:#fff;box-shadow:0 18px 38px rgba(15,23,42,.07);color:#607080;font-size:21px;font-weight:650}.about strong{color:#0b1220;font-size:25px;font-weight:900}.links{display:flex;gap:12px;margin-top:8px}.link{padding:13px 16px;border-radius:18px;background:#dff7f2;color:#0f766e;font-size:19px;font-weight:900}
.shade{position:absolute;inset:0;background:rgba(2,6,23,.38);z-index:6}.dialog{position:absolute;left:70px;right:70px;top:665px;z-index:7;padding:30px;border-radius:30px;background:#fff;color:#0b1220;box-shadow:0 30px 80px rgba(2,6,23,.42)}.dialog h2{margin:0 0 18px;font-size:32px;font-weight:900}.option{display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center;padding:18px;border-radius:24px;background:#f6fbfa;margin-top:12px;border:2px solid transparent}.option.active{border-color:#2dd4bf;background:#ecfdf5}.check{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#dff7f2;color:#0f766e;font-size:30px;font-weight:900}.option strong{display:block;font-size:23px;font-weight:900}.option span{display:block;margin-top:5px;color:#607080;font-size:19px;line-height:1.2;font-weight:650}.actions{display:flex;justify-content:flex-end;margin-top:24px}.btn{padding:15px 20px;border-radius:18px;color:#0f766e;font-size:22px;font-weight:900}
.nav{position:absolute;z-index:9;left:0;right:0;bottom:0;height:118px;padding:12px 56px 18px;display:grid;grid-template-columns:repeat(3,1fr);background:#fcfffe;color:#607080;border-top:1px solid rgba(15,23,42,.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}.active-nav{color:#0f766e}
</style>
</head>
<body>
<main class="shot">
<div class="status"><div>9:41</div><div class="icons"><div class="signal"><span></span><span></span><span></span><span></span></div><div class="battery"></div></div></div>
<section class="content">
<header class="head"><img class="icon" src="./private-qr-scanner-icon.svg" alt=""><div><h1 class="title">Private QR Scanner</h1><div class="sub">Settings that keep you in control</div></div></header>
<section class="hero"><h1>Privacy settings are yours</h1><p>Choose local history, security warnings, feedback, and the scanner view that fits your workflow.</p></section>
<section class="panel"><div class="setting"><span>Save history (local)</span><span class="switch"></span></div><div class="setting"><span>Security warnings</span><span class="switch"></span></div><div class="setting"><span>Scan feedback</span><span class="switch"></span></div></section>
<h2 class="section-title">Active use-case view</h2>
<section class="usecase"><strong>Everyday personal use</strong><span>For menus, links, Wi-Fi, contacts, calendar codes, and common daily scans.</span><div class="choose">Select use-case view</div></section>
<section class="about"><strong>About</strong><span>Version 1.0.0</span><span>Contact: softwareapp.hb@gmail.com</span><div class="links"><div class="link">Privacy Policy</div><div class="link">Review on Google Play</div></div></section>
</section>
<div class="shade"></div>
<section class="dialog">
<h2>Select use-case view</h2>
<div class="option active"><div class="check">✓</div><div><strong>Everyday personal use</strong><span>Full personal scanner with local history and common result actions.</span></div></div>
<div class="option"><div class="check">◎</div><div><strong>Event &amp; ticketing</strong><span>Batch scanning, duplicate detection, whitelist import, and batch sharing.</span></div></div>
<div class="actions"><div class="btn">Cancel</div></div>
</section>
<nav class="nav"><div class="nav-item"><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 active-nav"><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>
store-assets/private-qr-scanner-phone-screenshot-8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB