Hadrian Burkhardt
42 lines
8.5 KiB
HTML
42 lines
8.5 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 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>
|