Hadrian Burkhardt
577 lines
15 KiB
HTML
577 lines
15 KiB
HTML
<!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 & 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>
|