Hadrian Burkhardt
863 lines
26 KiB
HTML
863 lines
26 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Private QR Scanner Google Ads Creatives</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--deep: #07111f;
|
|
--navy: #0b1220;
|
|
--teal-900: #123b3f;
|
|
--teal-800: #155e63;
|
|
--teal-700: #0f766e;
|
|
--teal-300: #2dd4bf;
|
|
--mint: #dff7f2;
|
|
--bg: #f6fbfa;
|
|
--surface: #ffffff;
|
|
--soft-blue: #f2f7ff;
|
|
--text: #0b1220;
|
|
--muted: #607080;
|
|
--line: #dce8e6;
|
|
--amber: #ffc857;
|
|
--coral: #ff6b5f;
|
|
--sky: #55b9ff;
|
|
--violet: #8b7cf6;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
#stage {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: var(--w);
|
|
height: var(--h);
|
|
isolation: isolate;
|
|
background: var(--base);
|
|
}
|
|
|
|
.band,
|
|
.panel,
|
|
.rail,
|
|
.tile-field,
|
|
.scan-beam,
|
|
.code-stack,
|
|
.ticket-strip,
|
|
.wifi-mark,
|
|
.shield,
|
|
.chips,
|
|
.history-steps,
|
|
.grid-plate,
|
|
.device,
|
|
.tablet {
|
|
position: absolute;
|
|
}
|
|
|
|
.band {
|
|
inset: auto -8% -18% -8%;
|
|
height: 44%;
|
|
background: var(--band);
|
|
transform: skewY(-7deg);
|
|
transform-origin: center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.band.top {
|
|
inset: -20% -8% auto -8%;
|
|
height: 42%;
|
|
transform: skewY(-6deg);
|
|
}
|
|
|
|
.rail {
|
|
background:
|
|
linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.22) 12% 13%, transparent 13% 28%, rgba(255,255,255,.2) 28% 29%, transparent 29%),
|
|
linear-gradient(135deg, rgba(45,212,191,.2), rgba(85,185,255,.08));
|
|
border: 1px solid rgba(255,255,255,.16);
|
|
transform: rotate(var(--r));
|
|
border-radius: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.panel {
|
|
border-radius: 22px;
|
|
background: color-mix(in srgb, var(--panel-bg), transparent 0%);
|
|
border: 1px solid var(--panel-border);
|
|
box-shadow: 0 28px 70px rgba(7, 17, 31, .16);
|
|
z-index: 1;
|
|
}
|
|
|
|
.tile-field {
|
|
display: grid;
|
|
grid-template-columns: repeat(9, 1fr);
|
|
grid-auto-rows: 1fr;
|
|
gap: 7px;
|
|
opacity: .7;
|
|
transform: rotate(var(--r, 0deg));
|
|
z-index: 0;
|
|
}
|
|
|
|
.tile-field span {
|
|
border-radius: 2px;
|
|
background: var(--tile);
|
|
opacity: var(--o, .75);
|
|
}
|
|
|
|
.scan-beam {
|
|
height: 8px;
|
|
background: linear-gradient(90deg, transparent, var(--teal-300), transparent);
|
|
box-shadow: 0 0 34px rgba(45, 212, 191, .95);
|
|
transform: rotate(var(--r, 0deg));
|
|
z-index: 4;
|
|
}
|
|
|
|
.code-stack {
|
|
display: grid;
|
|
gap: 16px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.code-card {
|
|
height: 74px;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, .88);
|
|
border: 1px solid rgba(96, 112, 128, .14);
|
|
box-shadow: 0 18px 44px rgba(7, 17, 31, .12);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.code-card::before,
|
|
.code-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 18px;
|
|
right: 18px;
|
|
height: 10px;
|
|
border-radius: 99px;
|
|
background: var(--line);
|
|
}
|
|
|
|
.code-card::before {
|
|
top: 18px;
|
|
width: 54%;
|
|
}
|
|
|
|
.code-card::after {
|
|
top: 40px;
|
|
width: 78%;
|
|
background: color-mix(in srgb, var(--teal-300), white 70%);
|
|
}
|
|
|
|
.ticket-strip {
|
|
display: grid;
|
|
gap: 18px;
|
|
transform: rotate(var(--r, 0deg));
|
|
z-index: 1;
|
|
}
|
|
|
|
.ticket {
|
|
width: 272px;
|
|
height: 96px;
|
|
border-radius: 16px;
|
|
background:
|
|
linear-gradient(90deg, rgba(7,17,31,.12) 0 2px, transparent 2px 16px),
|
|
var(--surface);
|
|
border: 1px solid rgba(96,112,128,.18);
|
|
box-shadow: 0 20px 48px rgba(7,17,31,.16);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ticket::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 20px auto 20px 24px;
|
|
width: 54px;
|
|
background:
|
|
linear-gradient(var(--text) 0 0) 0 0 / 16px 16px,
|
|
linear-gradient(var(--text) 0 0) 26px 0 / 16px 16px,
|
|
linear-gradient(var(--text) 0 0) 0 26px / 16px 16px,
|
|
linear-gradient(var(--teal-300) 0 0) 26px 26px / 16px 16px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.ticket::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 96px;
|
|
top: 24px;
|
|
width: 132px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(var(--line), var(--line)) 0 0 / 100% 10px,
|
|
linear-gradient(color-mix(in srgb, var(--teal-300), white 70%), color-mix(in srgb, var(--teal-300), white 70%)) 0 28px / 70% 10px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.wifi-mark {
|
|
width: var(--s);
|
|
height: var(--s);
|
|
z-index: 1;
|
|
}
|
|
|
|
.wifi-mark::before,
|
|
.wifi-mark::after,
|
|
.wifi-dot {
|
|
content: "";
|
|
position: absolute;
|
|
border: solid var(--wifi-color);
|
|
border-width: 10px 10px 0 0;
|
|
border-radius: 0 100% 0 0;
|
|
transform: rotate(-45deg);
|
|
transform-origin: 100% 100%;
|
|
opacity: .8;
|
|
}
|
|
|
|
.wifi-mark::before {
|
|
inset: 0 0 auto auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.wifi-mark::after {
|
|
inset: 28% 28% auto auto;
|
|
width: 44%;
|
|
height: 44%;
|
|
}
|
|
|
|
.wifi-dot {
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 18%;
|
|
height: 18%;
|
|
background: var(--wifi-color);
|
|
border: 0;
|
|
border-radius: 50%;
|
|
transform: none;
|
|
}
|
|
|
|
.shield {
|
|
width: var(--s);
|
|
height: calc(var(--s) * 1.25);
|
|
background: color-mix(in srgb, var(--shield-fill), white 10%);
|
|
clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%);
|
|
opacity: .9;
|
|
box-shadow: 0 28px 60px rgba(7,17,31,.18);
|
|
z-index: 1;
|
|
}
|
|
|
|
.shield::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 30%;
|
|
top: 30%;
|
|
width: 40%;
|
|
height: 26%;
|
|
border: solid var(--navy);
|
|
border-width: 0 0 14px 14px;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.chips {
|
|
display: grid;
|
|
gap: 12px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.chip {
|
|
width: var(--chip-w);
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
background: var(--chip-bg);
|
|
box-shadow: 0 14px 34px rgba(7,17,31,.12);
|
|
border: 1px solid rgba(255,255,255,.48);
|
|
}
|
|
|
|
.history-steps {
|
|
display: grid;
|
|
gap: 18px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.step {
|
|
width: var(--step-w);
|
|
height: 64px;
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,.9);
|
|
border: 1px solid rgba(96,112,128,.16);
|
|
box-shadow: 0 18px 44px rgba(7,17,31,.12);
|
|
position: relative;
|
|
}
|
|
|
|
.step::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 18px;
|
|
top: 18px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(var(--navy) 0 0) 6px 6px / 8px 8px,
|
|
linear-gradient(var(--navy) 0 0) 18px 6px / 8px 8px,
|
|
linear-gradient(var(--teal-300) 0 0) 6px 18px / 8px 8px,
|
|
linear-gradient(var(--navy) 0 0) 18px 18px / 8px 8px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.step::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 62px;
|
|
top: 21px;
|
|
width: 52%;
|
|
height: 22px;
|
|
border-radius: 99px;
|
|
background: var(--line);
|
|
box-shadow: 0 28px 0 -6px color-mix(in srgb, var(--teal-300), white 72%);
|
|
}
|
|
|
|
.grid-plate {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
grid-auto-rows: 1fr;
|
|
gap: 8px;
|
|
padding: 18px;
|
|
border-radius: 22px;
|
|
background: rgba(255,255,255,.82);
|
|
border: 1px solid rgba(96,112,128,.12);
|
|
box-shadow: 0 26px 64px rgba(7,17,31,.14);
|
|
z-index: 1;
|
|
}
|
|
|
|
.grid-plate span {
|
|
border-radius: 4px;
|
|
background: var(--text);
|
|
}
|
|
|
|
.grid-plate span:nth-child(5n),
|
|
.grid-plate span:nth-child(8n) {
|
|
background: var(--teal-300);
|
|
}
|
|
|
|
.device {
|
|
width: var(--dw);
|
|
aspect-ratio: 1080 / 1920;
|
|
padding: var(--bezel, 15px);
|
|
border-radius: var(--radius, 46px);
|
|
background:
|
|
linear-gradient(150deg, rgba(255,255,255,.28), transparent 18%),
|
|
linear-gradient(180deg, #111827, #030712);
|
|
box-shadow:
|
|
0 42px 90px rgba(7, 17, 31, .34),
|
|
inset 0 0 0 1px rgba(255, 255, 255, .18);
|
|
transform: rotate(var(--r, 0deg));
|
|
z-index: 3;
|
|
}
|
|
|
|
.device::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 9px;
|
|
left: 50%;
|
|
width: 23%;
|
|
height: 12px;
|
|
border-radius: 99px;
|
|
background: #020617;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.device img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: calc(var(--radius, 46px) - 12px);
|
|
background: #07111f;
|
|
}
|
|
|
|
.tablet {
|
|
width: var(--tw);
|
|
aspect-ratio: 1440 / 2560;
|
|
padding: 18px;
|
|
border-radius: 34px;
|
|
background: linear-gradient(180deg, #111827, #030712);
|
|
box-shadow:
|
|
0 42px 90px rgba(7, 17, 31, .3),
|
|
inset 0 0 0 1px rgba(255,255,255,.16);
|
|
transform: rotate(var(--r, 0deg));
|
|
z-index: 2;
|
|
}
|
|
|
|
.tablet img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 20px;
|
|
background: #07111f;
|
|
}
|
|
|
|
.soft-light {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(120deg, rgba(255,255,255,.32), transparent 26%),
|
|
linear-gradient(0deg, rgba(255,255,255,.12), transparent 40%);
|
|
mix-blend-mode: soft-light;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fallback-list {
|
|
padding: 28px;
|
|
font: 20px/1.4 system-ui, sans-serif;
|
|
color: #111827;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="stage"></main>
|
|
<script>
|
|
const screenshot = (kind, n) => `../private-qr-scanner-${kind}-screenshot-${n}.png`;
|
|
|
|
const creatives = [
|
|
{
|
|
id: "pqs-square-01-scanner",
|
|
size: [1200, 1200],
|
|
theme: ["#07111f", "#123b3f", "#dff7f2", "rgba(255,255,255,.12)", "#2dd4bf"],
|
|
elements: [
|
|
{ type: "band", cls: "top" },
|
|
{ type: "tileField", x: 64, y: 700, w: 300, h: 300, r: -8, tile: "rgba(223,247,242,.72)" },
|
|
{ type: "gridPlate", x: 756, y: 128, w: 264, h: 264 },
|
|
{ type: "beam", x: 188, y: 548, w: 824, r: -2 },
|
|
{ type: "phone", img: screenshot("phone", 1), x: 392, y: 94, w: 410, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-02-results",
|
|
size: [1200, 1200],
|
|
theme: ["#f6fbfa", "#dff7f2", "#ffffff", "rgba(21,94,99,.16)", "#0f766e"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "codeStack", x: 104, y: 184, w: 374, count: 4 },
|
|
{ type: "chips", x: 770, y: 210, chipW: 250, colors: ["#dff7f2", "#f2f7ff", "#ffffff"] },
|
|
{ type: "phone", img: screenshot("phone", 2), x: 392, y: 86, w: 414, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-03-risk",
|
|
size: [1200, 1200],
|
|
theme: ["#101722", "#2b2f42", "#ffffff", "rgba(255,200,87,.24)", "#ffc857"],
|
|
elements: [
|
|
{ type: "rail", x: -110, y: 210, w: 1440, h: 180, r: -18 },
|
|
{ type: "shield", x: 764, y: 654, s: 220, fill: "#ffc857" },
|
|
{ type: "tileField", x: 770, y: 112, w: 260, h: 260, r: 7, tile: "rgba(255,200,87,.78)" },
|
|
{ type: "phone", img: screenshot("phone", 3), x: 384, y: 84, w: 430, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-04-image-scan",
|
|
size: [1200, 1200],
|
|
theme: ["#eef7ff", "#d7efff", "#ffffff", "rgba(85,185,255,.2)", "#55b9ff"],
|
|
elements: [
|
|
{ type: "band", cls: "top" },
|
|
{ type: "panel", x: 118, y: 712, w: 452, h: 264 },
|
|
{ type: "gridPlate", x: 748, y: 178, w: 260, h: 260 },
|
|
{ type: "beam", x: 184, y: 602, w: 820, r: 4 },
|
|
{ type: "phone", img: screenshot("phone", 4), x: 390, y: 88, w: 420, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-05-contact",
|
|
size: [1200, 1200],
|
|
theme: ["#fff7f3", "#ffe3dc", "#ffffff", "rgba(255,107,95,.18)", "#ff6b5f"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "chips", x: 136, y: 192, chipW: 288, colors: ["#ffffff", "#ffe3dc", "#ffffff", "#dff7f2"] },
|
|
{ type: "codeStack", x: 744, y: 698, w: 330, count: 3 },
|
|
{ type: "phone", img: screenshot("phone", 5), x: 390, y: 84, w: 418, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-06-history",
|
|
size: [1200, 1200],
|
|
theme: ["#f7f5ff", "#e9e4ff", "#ffffff", "rgba(139,124,246,.2)", "#8b7cf6"],
|
|
elements: [
|
|
{ type: "band", cls: "top" },
|
|
{ type: "history", x: 104, y: 228, w: 330, count: 4 },
|
|
{ type: "tileField", x: 790, y: 690, w: 250, h: 250, r: -4, tile: "rgba(139,124,246,.55)" },
|
|
{ type: "phone", img: screenshot("phone", 6), x: 392, y: 82, w: 416, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-07-batch",
|
|
size: [1200, 1200],
|
|
theme: ["#07111f", "#0f766e", "#dff7f2", "rgba(45,212,191,.16)", "#2dd4bf"],
|
|
elements: [
|
|
{ type: "rail", x: -120, y: 802, w: 1450, h: 186, r: 16 },
|
|
{ type: "ticketStrip", x: 104, y: 182, count: 3, r: -4 },
|
|
{ type: "beam", x: 220, y: 576, w: 760, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 7), x: 392, y: 86, w: 416, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-square-08-settings",
|
|
size: [1200, 1200],
|
|
theme: ["#ffffff", "#f2f7ff", "#ffffff", "rgba(96,112,128,.14)", "#155e63"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "shield", x: 142, y: 198, s: 210, fill: "#dff7f2" },
|
|
{ type: "chips", x: 778, y: 692, chipW: 276, colors: ["#dff7f2", "#f2f7ff", "#ffffff"] },
|
|
{ type: "phone", img: screenshot("phone", 8), x: 394, y: 86, w: 412, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-01-scanner-results",
|
|
size: [1200, 628],
|
|
theme: ["#07111f", "#123b3f", "#dff7f2", "rgba(255,255,255,.13)", "#2dd4bf"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "tileField", x: 88, y: 104, w: 248, h: 248, r: -5, tile: "rgba(223,247,242,.68)" },
|
|
{ type: "codeStack", x: 790, y: 124, w: 318, count: 3 },
|
|
{ type: "beam", x: 108, y: 310, w: 984, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 1), x: 382, y: 32, w: 256, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 2), x: 568, y: 74, w: 216, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-02-gallery",
|
|
size: [1200, 628],
|
|
theme: ["#eef7ff", "#d7efff", "#ffffff", "rgba(85,185,255,.2)", "#55b9ff"],
|
|
elements: [
|
|
{ type: "rail", x: -120, y: 86, w: 1440, h: 154, r: -10 },
|
|
{ type: "panel", x: 742, y: 120, w: 326, h: 286 },
|
|
{ type: "gridPlate", x: 128, y: 158, w: 214, h: 214 },
|
|
{ type: "phone", img: screenshot("phone", 4), x: 446, y: 34, w: 254, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-03-risk",
|
|
size: [1200, 628],
|
|
theme: ["#101722", "#2b2f42", "#ffffff", "rgba(255,200,87,.22)", "#ffc857"],
|
|
elements: [
|
|
{ type: "band", cls: "top" },
|
|
{ type: "shield", x: 824, y: 216, s: 176, fill: "#ffc857" },
|
|
{ type: "tileField", x: 118, y: 148, w: 214, h: 214, r: 8, tile: "rgba(255,200,87,.7)" },
|
|
{ type: "phone", img: screenshot("phone", 3), x: 466, y: 34, w: 248, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-04-history",
|
|
size: [1200, 628],
|
|
theme: ["#f7f5ff", "#e9e4ff", "#ffffff", "rgba(139,124,246,.2)", "#8b7cf6"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "history", x: 112, y: 140, w: 306, count: 3 },
|
|
{ type: "chips", x: 788, y: 158, chipW: 300, colors: ["#ffffff", "#e9e4ff", "#dff7f2"] },
|
|
{ type: "phone", img: screenshot("phone", 6), x: 474, y: 34, w: 246, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-05-wifi",
|
|
size: [1200, 628],
|
|
theme: ["#ffffff", "#dff7f2", "#ffffff", "rgba(15,118,110,.18)", "#0f766e"],
|
|
elements: [
|
|
{ type: "rail", x: -116, y: 390, w: 1432, h: 154, r: 9 },
|
|
{ type: "wifi", x: 150, y: 164, s: 198, color: "#0f766e" },
|
|
{ type: "gridPlate", x: 828, y: 172, w: 206, h: 206 },
|
|
{ type: "phone", img: screenshot("phone", 5), x: 466, y: 34, w: 250, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-06-event",
|
|
size: [1200, 628],
|
|
theme: ["#07111f", "#123b3f", "#dff7f2", "rgba(45,212,191,.16)", "#2dd4bf"],
|
|
elements: [
|
|
{ type: "ticketStrip", x: 102, y: 118, count: 3, r: -3 },
|
|
{ type: "beam", x: 196, y: 306, w: 806, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 7), x: 474, y: 34, w: 250, r: 0 },
|
|
{ type: "ticketStrip", x: 842, y: 152, count: 2, r: 5 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-07-tablet",
|
|
size: [1200, 628],
|
|
theme: ["#f6fbfa", "#dff7f2", "#ffffff", "rgba(21,94,99,.16)", "#155e63"],
|
|
elements: [
|
|
{ type: "band", cls: "top" },
|
|
{ type: "codeStack", x: 108, y: 144, w: 330, count: 3 },
|
|
{ type: "tablet", img: screenshot("7in-tablet", 2), x: 492, y: 18, w: 258, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 1), x: 712, y: 62, w: 212, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-horizontal-08-settings",
|
|
size: [1200, 628],
|
|
theme: ["#ffffff", "#f2f7ff", "#ffffff", "rgba(96,112,128,.14)", "#607080"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "shield", x: 154, y: 168, s: 176, fill: "#dff7f2" },
|
|
{ type: "chips", x: 796, y: 156, chipW: 290, colors: ["#ffffff", "#dff7f2", "#f2f7ff"] },
|
|
{ type: "phone", img: screenshot("phone", 8), x: 474, y: 34, w: 246, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-vertical-01-scanner",
|
|
size: [1200, 1500],
|
|
theme: ["#07111f", "#123b3f", "#dff7f2", "rgba(255,255,255,.12)", "#2dd4bf"],
|
|
elements: [
|
|
{ type: "band", cls: "top" },
|
|
{ type: "tileField", x: 126, y: 900, w: 280, h: 280, r: -6, tile: "rgba(223,247,242,.68)" },
|
|
{ type: "gridPlate", x: 760, y: 180, w: 256, h: 256 },
|
|
{ type: "beam", x: 160, y: 700, w: 880, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 1), x: 366, y: 152, w: 470, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-vertical-02-gallery",
|
|
size: [1200, 1500],
|
|
theme: ["#eef7ff", "#d7efff", "#ffffff", "rgba(85,185,255,.2)", "#55b9ff"],
|
|
elements: [
|
|
{ type: "rail", x: -146, y: 248, w: 1510, h: 188, r: -14 },
|
|
{ type: "panel", x: 128, y: 1004, w: 380, h: 248 },
|
|
{ type: "gridPlate", x: 782, y: 240, w: 230, h: 230 },
|
|
{ type: "phone", img: screenshot("phone", 4), x: 366, y: 154, w: 470, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-vertical-03-event",
|
|
size: [1200, 1500],
|
|
theme: ["#07111f", "#0f766e", "#dff7f2", "rgba(45,212,191,.16)", "#2dd4bf"],
|
|
elements: [
|
|
{ type: "ticketStrip", x: 122, y: 178, count: 3, r: -4 },
|
|
{ type: "ticketStrip", x: 800, y: 902, count: 3, r: 4 },
|
|
{ type: "beam", x: 186, y: 722, w: 828, r: 0 },
|
|
{ type: "phone", img: screenshot("phone", 7), x: 366, y: 152, w: 470, r: 0 }
|
|
]
|
|
},
|
|
{
|
|
id: "pqs-vertical-04-privacy",
|
|
size: [1200, 1500],
|
|
theme: ["#ffffff", "#f2f7ff", "#ffffff", "rgba(96,112,128,.14)", "#155e63"],
|
|
elements: [
|
|
{ type: "band" },
|
|
{ type: "shield", x: 122, y: 214, s: 230, fill: "#dff7f2" },
|
|
{ type: "history", x: 782, y: 866, w: 292, count: 3 },
|
|
{ type: "chips", x: 136, y: 1020, chipW: 300, colors: ["#dff7f2", "#f2f7ff", "#ffffff"] },
|
|
{ type: "phone", img: screenshot("phone", 8), x: 366, y: 154, w: 470, r: 0 }
|
|
]
|
|
}
|
|
];
|
|
|
|
function px(v) {
|
|
return `${v}px`;
|
|
}
|
|
|
|
function setBox(el, item) {
|
|
if (item.x !== undefined) el.style.left = px(item.x);
|
|
if (item.y !== undefined) el.style.top = px(item.y);
|
|
if (item.w !== undefined) el.style.width = px(item.w);
|
|
if (item.h !== undefined) el.style.height = px(item.h);
|
|
if (item.r !== undefined) el.style.setProperty("--r", `${item.r}deg`);
|
|
}
|
|
|
|
function tilePattern(count) {
|
|
return Array.from({ length: count }, (_, index) => {
|
|
const span = document.createElement("span");
|
|
if ([1, 4, 7, 10, 13, 16, 20, 24, 31, 36, 38, 43, 48, 51, 57, 64, 67, 71, 78].includes(index)) {
|
|
span.style.visibility = "hidden";
|
|
}
|
|
if (index % 11 === 0) span.style.setProperty("--o", ".38");
|
|
return span;
|
|
});
|
|
}
|
|
|
|
function renderElement(item) {
|
|
let el;
|
|
|
|
if (item.type === "band") {
|
|
el = document.createElement("div");
|
|
el.className = `band ${item.cls || ""}`;
|
|
}
|
|
|
|
if (item.type === "rail") {
|
|
el = document.createElement("div");
|
|
el.className = "rail";
|
|
setBox(el, item);
|
|
}
|
|
|
|
if (item.type === "panel") {
|
|
el = document.createElement("div");
|
|
el.className = "panel";
|
|
setBox(el, item);
|
|
}
|
|
|
|
if (item.type === "tileField") {
|
|
el = document.createElement("div");
|
|
el.className = "tile-field";
|
|
setBox(el, item);
|
|
el.style.setProperty("--tile", item.tile);
|
|
tilePattern(81).forEach((span) => el.appendChild(span));
|
|
}
|
|
|
|
if (item.type === "gridPlate") {
|
|
el = document.createElement("div");
|
|
el.className = "grid-plate";
|
|
setBox(el, item);
|
|
tilePattern(36).forEach((span) => el.appendChild(span));
|
|
}
|
|
|
|
if (item.type === "beam") {
|
|
el = document.createElement("div");
|
|
el.className = "scan-beam";
|
|
setBox(el, { ...item, h: 8 });
|
|
}
|
|
|
|
if (item.type === "codeStack") {
|
|
el = document.createElement("div");
|
|
el.className = "code-stack";
|
|
setBox(el, item);
|
|
for (let i = 0; i < item.count; i += 1) {
|
|
const card = document.createElement("div");
|
|
card.className = "code-card";
|
|
card.style.width = px(item.w - i * 18);
|
|
card.style.marginLeft = px(i % 2 ? 22 : 0);
|
|
el.appendChild(card);
|
|
}
|
|
}
|
|
|
|
if (item.type === "ticketStrip") {
|
|
el = document.createElement("div");
|
|
el.className = "ticket-strip";
|
|
setBox(el, item);
|
|
for (let i = 0; i < item.count; i += 1) {
|
|
const ticket = document.createElement("div");
|
|
ticket.className = "ticket";
|
|
ticket.style.marginLeft = px(i % 2 ? 28 : 0);
|
|
el.appendChild(ticket);
|
|
}
|
|
}
|
|
|
|
if (item.type === "wifi") {
|
|
el = document.createElement("div");
|
|
el.className = "wifi-mark";
|
|
setBox(el, item);
|
|
el.style.setProperty("--s", px(item.s));
|
|
el.style.setProperty("--wifi-color", item.color);
|
|
const dot = document.createElement("div");
|
|
dot.className = "wifi-dot";
|
|
el.appendChild(dot);
|
|
}
|
|
|
|
if (item.type === "shield") {
|
|
el = document.createElement("div");
|
|
el.className = "shield";
|
|
setBox(el, item);
|
|
el.style.setProperty("--s", px(item.s));
|
|
el.style.setProperty("--shield-fill", item.fill);
|
|
}
|
|
|
|
if (item.type === "chips") {
|
|
el = document.createElement("div");
|
|
el.className = "chips";
|
|
setBox(el, item);
|
|
el.style.setProperty("--chip-w", px(item.chipW));
|
|
item.colors.forEach((color, index) => {
|
|
const chip = document.createElement("div");
|
|
chip.className = "chip";
|
|
chip.style.setProperty("--chip-bg", color);
|
|
chip.style.marginLeft = px(index % 2 ? 24 : 0);
|
|
el.appendChild(chip);
|
|
});
|
|
}
|
|
|
|
if (item.type === "history") {
|
|
el = document.createElement("div");
|
|
el.className = "history-steps";
|
|
setBox(el, item);
|
|
el.style.setProperty("--step-w", px(item.w));
|
|
for (let i = 0; i < item.count; i += 1) {
|
|
const step = document.createElement("div");
|
|
step.className = "step";
|
|
step.style.marginLeft = px(i % 2 ? 26 : 0);
|
|
el.appendChild(step);
|
|
}
|
|
}
|
|
|
|
if (item.type === "phone") {
|
|
el = document.createElement("div");
|
|
el.className = "device";
|
|
setBox(el, item);
|
|
el.style.setProperty("--dw", px(item.w));
|
|
const img = document.createElement("img");
|
|
img.src = item.img;
|
|
img.alt = "";
|
|
el.appendChild(img);
|
|
}
|
|
|
|
if (item.type === "tablet") {
|
|
el = document.createElement("div");
|
|
el.className = "tablet";
|
|
setBox(el, item);
|
|
el.style.setProperty("--tw", px(item.w));
|
|
const img = document.createElement("img");
|
|
img.src = item.img;
|
|
img.alt = "";
|
|
el.appendChild(img);
|
|
}
|
|
|
|
return el;
|
|
}
|
|
|
|
function renderCreative(creative) {
|
|
const stage = document.getElementById("stage");
|
|
const [w, h] = creative.size;
|
|
document.documentElement.style.setProperty("--w", px(w));
|
|
document.documentElement.style.setProperty("--h", px(h));
|
|
stage.style.setProperty("--base", creative.theme[0]);
|
|
stage.style.setProperty("--band", creative.theme[1]);
|
|
stage.style.setProperty("--panel-bg", creative.theme[2]);
|
|
stage.style.setProperty("--panel-border", creative.theme[3]);
|
|
stage.style.setProperty("--tile", creative.theme[4]);
|
|
document.title = creative.id;
|
|
|
|
creative.elements.forEach((item) => stage.appendChild(renderElement(item)));
|
|
|
|
const light = document.createElement("div");
|
|
light.className = "soft-light";
|
|
stage.appendChild(light);
|
|
}
|
|
|
|
const params = new URLSearchParams(location.search);
|
|
const requested = params.get("creative");
|
|
const creative = creatives.find((item) => item.id === requested);
|
|
|
|
if (creative) {
|
|
renderCreative(creative);
|
|
window.__creativeReady = true;
|
|
} else {
|
|
const list = document.createElement("div");
|
|
list.className = "fallback-list";
|
|
list.innerHTML = `<strong>Available creatives</strong><br>${creatives.map((item) => item.id).join("<br>")}`;
|
|
document.body.appendChild(list);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|