Hadrian Burkhardt
41 lines
7.6 KiB
HTML
41 lines
7.6 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 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 & 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>
|