updated store assets
This commit is contained in:
Hadrian Burkhardt
@@ -0,0 +1,945 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="ad.orientation" content="portrait,landscape">
|
||||
<title>Private QR Scanner</title>
|
||||
<link rel="preload" as="image" href="assets/app-icon.png">
|
||||
<link rel="preload" as="image" href="assets/phone-scanner.jpg">
|
||||
<link rel="preload" as="image" href="assets/phone-result.jpg">
|
||||
<link rel="preload" as="image" href="assets/phone-warning.jpg">
|
||||
<link rel="preload" as="image" href="assets/phone-image.jpg">
|
||||
<link rel="preload" as="image" href="assets/phone-history.jpg">
|
||||
<link rel="preload" as="image" href="assets/phone-batch.jpg">
|
||||
<link rel="preload" as="image" href="assets/phone-settings.jpg">
|
||||
<script type="text/javascript" src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--deep: #07111f;
|
||||
--navy: #0b1220;
|
||||
--teal-900: #123b3f;
|
||||
--teal-800: #155e63;
|
||||
--teal-700: #0f766e;
|
||||
--teal-300: #2dd4bf;
|
||||
--mint: #dff7f2;
|
||||
--paper: #f6fbfa;
|
||||
--surface: #ffffff;
|
||||
--soft-blue: #f2f7ff;
|
||||
--line: #dce8e6;
|
||||
--muted: #607080;
|
||||
--amber: #ffc857;
|
||||
--coral: #ff6b5f;
|
||||
--sky: #55b9ff;
|
||||
--violet: #8b7cf6;
|
||||
--shadow: rgba(7, 17, 31, 0.28);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: var(--navy);
|
||||
background: var(--paper);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
letter-spacing: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
letter-spacing: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.ad {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255,255,255,0.96), rgba(242,247,255,0.96) 40%, rgba(223,247,242,0.92)),
|
||||
var(--paper);
|
||||
}
|
||||
|
||||
.band {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: -16vw;
|
||||
right: -16vw;
|
||||
bottom: -13vh;
|
||||
height: 40vh;
|
||||
background: linear-gradient(135deg, var(--teal-800), var(--teal-900));
|
||||
transform: skewY(-8deg);
|
||||
}
|
||||
|
||||
.band-top {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: -18vw;
|
||||
right: -18vw;
|
||||
top: -16vh;
|
||||
height: 34vh;
|
||||
background: linear-gradient(135deg, rgba(85,185,255,0.25), rgba(45,212,191,0.26));
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
|
||||
.qr-field,
|
||||
.ticket-stack,
|
||||
.scan-beam,
|
||||
.shield,
|
||||
.wifi,
|
||||
.mini-list {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.qr-field {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 5px;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
padding: 9px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,0.72);
|
||||
box-shadow: 0 18px 46px rgba(7,17,31,0.12);
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.qr-field span {
|
||||
border-radius: 2px;
|
||||
background: var(--navy);
|
||||
}
|
||||
|
||||
.qr-field span:nth-child(3n),
|
||||
.qr-field span:nth-child(11n) {
|
||||
background: var(--teal-300);
|
||||
}
|
||||
|
||||
.qr-field span:nth-child(5n),
|
||||
.qr-field span:nth-child(8n),
|
||||
.qr-field span:nth-child(13n) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ticket-stack {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
width: 168px;
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
.ticket {
|
||||
height: 54px;
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(96,112,128,0.16);
|
||||
box-shadow: 0 14px 34px rgba(7,17,31,0.12);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ticket:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 13px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background:
|
||||
linear-gradient(var(--navy) 0 0) 0 0 / 10px 10px,
|
||||
linear-gradient(var(--navy) 0 0) 18px 0 / 10px 10px,
|
||||
linear-gradient(var(--teal-300) 0 0) 0 18px / 10px 10px,
|
||||
linear-gradient(var(--navy) 0 0) 18px 18px / 10px 10px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ticket:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 56px;
|
||||
top: 16px;
|
||||
width: 84px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: var(--line);
|
||||
box-shadow: 0 18px 0 -5px rgba(45,212,191,0.38);
|
||||
}
|
||||
|
||||
.scan-beam {
|
||||
width: 52vw;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, transparent, var(--teal-300), transparent);
|
||||
box-shadow: 0 0 30px rgba(45,212,191,0.9);
|
||||
opacity: 0.92;
|
||||
animation: beamPulse 1.7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes beamPulse {
|
||||
0% { transform: translateY(-10px); opacity: 0.45; }
|
||||
50% { transform: translateY(10px); opacity: 1; }
|
||||
100% { transform: translateY(-10px); opacity: 0.45; }
|
||||
}
|
||||
|
||||
.shield {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
background: var(--amber);
|
||||
clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%);
|
||||
box-shadow: 0 16px 34px rgba(7,17,31,0.16);
|
||||
}
|
||||
|
||||
.shield:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 30%;
|
||||
width: 40%;
|
||||
height: 24%;
|
||||
border: solid var(--navy);
|
||||
border-width: 0 0 8px 8px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.wifi {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.wifi:before,
|
||||
.wifi:after,
|
||||
.wifi-dot {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: solid var(--teal-700);
|
||||
border-width: 8px 8px 0 0;
|
||||
border-radius: 0 100% 0 0;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.wifi:before {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
}
|
||||
|
||||
.wifi:after {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.wifi-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--teal-700);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mini-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
width: 166px;
|
||||
}
|
||||
|
||||
.mini-row {
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255,255,255,0.84);
|
||||
box-shadow: 0 12px 28px rgba(7,17,31,0.1);
|
||||
border: 1px solid rgba(96,112,128,0.12);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mini-row:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 11px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 5px;
|
||||
background: var(--teal-300);
|
||||
}
|
||||
|
||||
.mini-row:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
top: 13px;
|
||||
width: 92px;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.brand,
|
||||
.copy,
|
||||
.phone-wrap,
|
||||
.panel {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 22px rgba(7,17,31,0.15);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
display: block;
|
||||
color: var(--navy);
|
||||
font-size: 16px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.copy h1 {
|
||||
margin: 0;
|
||||
color: var(--navy);
|
||||
font-size: 32px;
|
||||
line-height: 1.02;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.copy p {
|
||||
margin: 12px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.34;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.74);
|
||||
color: var(--teal-900);
|
||||
border: 1px solid rgba(96,112,128,0.14);
|
||||
font-size: 12px;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 10px 24px rgba(7,17,31,0.07);
|
||||
}
|
||||
|
||||
.phone-wrap {
|
||||
border-radius: 32px;
|
||||
padding: 11px;
|
||||
background: linear-gradient(180deg, #111827, #030712);
|
||||
box-shadow:
|
||||
0 34px 72px rgba(7,17,31,0.34),
|
||||
inset 0 0 0 1px rgba(255,255,255,0.16);
|
||||
}
|
||||
|
||||
.phone-wrap:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
width: 58px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #020617;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.phone-screen {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 23px;
|
||||
background: var(--deep);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
background: rgba(255,255,255,0.88);
|
||||
border: 1px solid rgba(96,112,128,0.14);
|
||||
box-shadow: 0 24px 54px rgba(7,17,31,0.16);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.panel-kicker {
|
||||
color: var(--teal-700);
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 8px 0 0;
|
||||
color: var(--navy);
|
||||
font-size: 20px;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
margin: 8px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
background: var(--soft-blue);
|
||||
color: var(--navy);
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
box-shadow: inset 0 0 0 1px rgba(96,112,128,0.16);
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: #b7c7d8;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
width: 20px;
|
||||
background: var(--teal-700);
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 46px;
|
||||
margin-top: 14px;
|
||||
padding: 12px 18px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--teal-700), var(--teal-800));
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 18px 34px rgba(15,118,110,0.28);
|
||||
}
|
||||
|
||||
.glint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(120deg, rgba(255,255,255,0.34), transparent 24%),
|
||||
linear-gradient(0deg, rgba(255,255,255,0.14), transparent 42%);
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.brand {
|
||||
left: 26px;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
left: 28px;
|
||||
right: 28px;
|
||||
top: 92px;
|
||||
}
|
||||
|
||||
.copy h1 {
|
||||
max-width: 300px;
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.phone-wrap {
|
||||
left: 50%;
|
||||
top: 276px;
|
||||
width: 226px;
|
||||
height: 402px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.panel {
|
||||
left: 22px;
|
||||
right: 22px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.qr-field {
|
||||
right: 16px;
|
||||
top: 188px;
|
||||
}
|
||||
|
||||
.ticket-stack {
|
||||
left: 20px;
|
||||
top: 386px;
|
||||
}
|
||||
|
||||
.shield {
|
||||
right: 44px;
|
||||
bottom: 214px;
|
||||
}
|
||||
|
||||
.wifi {
|
||||
left: 32px;
|
||||
bottom: 184px;
|
||||
}
|
||||
|
||||
.mini-list {
|
||||
right: 22px;
|
||||
top: 508px;
|
||||
}
|
||||
|
||||
.scan-beam {
|
||||
left: 24vw;
|
||||
top: 496px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.brand {
|
||||
left: 34px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
left: 36px;
|
||||
top: 100px;
|
||||
width: 32vw;
|
||||
}
|
||||
|
||||
.copy h1 {
|
||||
max-width: 330px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.phone-wrap {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 178px;
|
||||
height: 316px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.panel {
|
||||
right: 26px;
|
||||
top: 54px;
|
||||
width: 30vw;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.qr-field {
|
||||
left: 38vw;
|
||||
top: 34px;
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
}
|
||||
|
||||
.ticket-stack {
|
||||
right: 32px;
|
||||
bottom: 22px;
|
||||
}
|
||||
|
||||
.shield {
|
||||
right: 22vw;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.wifi {
|
||||
left: 28vw;
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
.mini-list {
|
||||
right: 25vw;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.scan-beam {
|
||||
left: 28vw;
|
||||
top: 50%;
|
||||
width: 45vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 340px) and (orientation: portrait) {
|
||||
.brand {
|
||||
top: 16px;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.brand div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
left: 20px;
|
||||
right: 158px;
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.copy h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.copy p,
|
||||
.pills {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone-wrap {
|
||||
left: calc(100% - 86px);
|
||||
top: 96px;
|
||||
width: 132px;
|
||||
height: 235px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
bottom: 12px;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.panel p,
|
||||
.controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
min-height: 40px;
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.qr-field,
|
||||
.mini-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scan-beam {
|
||||
top: 232px;
|
||||
width: 58vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 360px) and (orientation: landscape) {
|
||||
.brand {
|
||||
left: 22px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.brand div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.brand span,
|
||||
.pills,
|
||||
.copy p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy {
|
||||
left: 22px;
|
||||
top: 74px;
|
||||
width: 34vw;
|
||||
}
|
||||
|
||||
.copy h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.phone-wrap {
|
||||
width: 140px;
|
||||
height: 249px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
right: 18px;
|
||||
top: 18px;
|
||||
width: 30vw;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.panel p,
|
||||
.controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
min-height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.qr-field,
|
||||
.ticket-stack,
|
||||
.mini-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ad" id="ad">
|
||||
<div class="band-top"></div>
|
||||
<div class="band"></div>
|
||||
|
||||
<div class="qr-field" aria-hidden="true">
|
||||
<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>
|
||||
<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-stack" aria-hidden="true">
|
||||
<div class="ticket"></div>
|
||||
<div class="ticket"></div>
|
||||
<div class="ticket"></div>
|
||||
</div>
|
||||
|
||||
<div class="mini-list" aria-hidden="true">
|
||||
<div class="mini-row"></div>
|
||||
<div class="mini-row"></div>
|
||||
<div class="mini-row"></div>
|
||||
</div>
|
||||
|
||||
<div class="shield" aria-hidden="true"></div>
|
||||
<div class="wifi" aria-hidden="true"><div class="wifi-dot"></div></div>
|
||||
<div class="scan-beam" aria-hidden="true"></div>
|
||||
|
||||
<div class="brand">
|
||||
<img src="assets/app-icon.png" alt="">
|
||||
<div>
|
||||
<strong>Private QR Scanner</strong>
|
||||
<span>No ads. No tracking.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="copy" aria-label="Private QR Scanner campaign">
|
||||
<h1>Scan QR codes privately</h1>
|
||||
<p>Read codes on device, inspect links, and keep optional history local.</p>
|
||||
<div class="pills">
|
||||
<span class="pill">QR and barcodes</span>
|
||||
<span class="pill">Image scan</span>
|
||||
<span class="pill">Local warnings</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="phone-wrap" aria-hidden="true">
|
||||
<img class="phone-screen" id="phoneScreen" src="assets/phone-scanner.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<section class="panel" aria-label="Feature preview">
|
||||
<div class="panel-kicker" id="stepNumber">Step 1 of 7</div>
|
||||
<h2 id="stepTitle">Live camera scanning</h2>
|
||||
<p id="stepCopy">Aim at a QR code or barcode and review clear results before taking action.</p>
|
||||
<div class="controls">
|
||||
<button class="control-btn" id="prevButton" type="button" aria-label="Previous feature">‹</button>
|
||||
<div class="dots" id="dots" aria-hidden="true"></div>
|
||||
<button class="control-btn" id="nextButton" type="button" aria-label="Next feature">›</button>
|
||||
</div>
|
||||
<button class="cta" id="cta" type="button">Try the app</button>
|
||||
</section>
|
||||
|
||||
<div class="glint"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var slides = [
|
||||
{
|
||||
image: "assets/phone-scanner.jpg",
|
||||
title: "Live camera scanning",
|
||||
copy: "Aim at a QR code or barcode and review clear results before taking action."
|
||||
},
|
||||
{
|
||||
image: "assets/phone-result.jpg",
|
||||
title: "Useful result actions",
|
||||
copy: "Copy, share, open links, add contacts, or use the action that matches the scan."
|
||||
},
|
||||
{
|
||||
image: "assets/phone-warning.jpg",
|
||||
title: "Local link warnings",
|
||||
copy: "Pause before opening unusual links with on-device URL risk checks."
|
||||
},
|
||||
{
|
||||
image: "assets/phone-image.jpg",
|
||||
title: "Scan from an image",
|
||||
copy: "Choose a saved picture and detect QR codes or barcodes inside it."
|
||||
},
|
||||
{
|
||||
image: "assets/phone-history.jpg",
|
||||
title: "Optional local history",
|
||||
copy: "Keep scan records only when you want them, stored locally on your device."
|
||||
},
|
||||
{
|
||||
image: "assets/phone-batch.jpg",
|
||||
title: "Batch scanning",
|
||||
copy: "Capture multiple codes in one flow for events, tickets, or fast workflows."
|
||||
},
|
||||
{
|
||||
image: "assets/phone-settings.jpg",
|
||||
title: "Simple controls",
|
||||
copy: "Choose history, warnings, feedback, and app behavior in one clear settings view."
|
||||
}
|
||||
];
|
||||
|
||||
var index = 0;
|
||||
var phoneScreen = document.getElementById("phoneScreen");
|
||||
var stepNumber = document.getElementById("stepNumber");
|
||||
var stepTitle = document.getElementById("stepTitle");
|
||||
var stepCopy = document.getElementById("stepCopy");
|
||||
var dots = document.getElementById("dots");
|
||||
var prevButton = document.getElementById("prevButton");
|
||||
var nextButton = document.getElementById("nextButton");
|
||||
var cta = document.getElementById("cta");
|
||||
|
||||
function makeDots() {
|
||||
var fragment = document.createDocumentFragment();
|
||||
var i;
|
||||
for (i = 0; i < slides.length; i += 1) {
|
||||
var dot = document.createElement("span");
|
||||
dot.className = "dot";
|
||||
fragment.appendChild(dot);
|
||||
}
|
||||
dots.appendChild(fragment);
|
||||
}
|
||||
|
||||
function renderSlide() {
|
||||
var slide = slides[index];
|
||||
var dotNodes = dots.getElementsByClassName("dot");
|
||||
var i;
|
||||
phoneScreen.src = slide.image;
|
||||
stepNumber.innerHTML = "Step " + (index + 1) + " of " + slides.length;
|
||||
stepTitle.innerHTML = slide.title;
|
||||
stepCopy.innerHTML = slide.copy;
|
||||
for (i = 0; i < dotNodes.length; i += 1) {
|
||||
dotNodes[i].className = i === index ? "dot active" : "dot";
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
index = (index + delta + slides.length) % slides.length;
|
||||
renderSlide();
|
||||
}
|
||||
|
||||
function exitAd() {
|
||||
if (window.ExitApi && typeof window.ExitApi.exit === "function") {
|
||||
window.ExitApi.exit();
|
||||
}
|
||||
}
|
||||
|
||||
makeDots();
|
||||
renderSlide();
|
||||
prevButton.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
move(-1);
|
||||
});
|
||||
nextButton.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
move(1);
|
||||
});
|
||||
cta.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
exitAd();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user