phone screen shots
This commit is contained in:
Hadrian Burkhardt
@@ -0,0 +1,31 @@
|
||||
<!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 7</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:#07111f;color:#f8fafc}.shot{position:relative;width:1080px;height:1920px;overflow:hidden;background:radial-gradient(circle at 72% 18%,rgba(45,212,191,.22),transparent 28%),linear-gradient(180deg,#07111f,#103840 52%,#07111f)}
|
||||
.grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(45,212,191,.09) 1px,transparent 1px) 0 0/68px 68px,linear-gradient(0deg,rgba(45,212,191,.08) 1px,transparent 1px) 0 0/68px 68px}.status{position:absolute;z-index:8;left:0;right:0;top:0;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:#f8fafc}.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 #f8fafc;border-radius:6px;padding:3px}.battery:after{content:"";display:block;width:27px;height:10px;border-radius:3px;background:#2dd4bf}
|
||||
.top{position:absolute;z-index:4;top:118px;left:212px;right:212px;min-height:56px;padding:11px 18px;border-radius:18px;background:rgba(0,0,0,.52);text-align:center;font-size:23px;font-weight:800}.gallery{position:absolute;z-index:5;right:42px;top:112px;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:1px solid rgba(248,250,252,.22);background:rgba(0,0,0,.38)}.gallery svg{width:32px;height:32px}
|
||||
.phone-photo{position:absolute;z-index:2;left:98px;right:98px;top:292px;height:710px;border-radius:38px;background:linear-gradient(150deg,#0b1220,#155e63);box-shadow:0 28px 70px rgba(2,6,23,.36);overflow:hidden}.phone-photo:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(223,247,242,.12),transparent 26%),radial-gradient(circle at 82% 68%,rgba(45,212,191,.18),transparent 30%)}.paper{position:absolute;left:134px;top:160px;width:520px;height:350px;border-radius:30px;background:#f8fafc;transform:rotate(-4deg);box-shadow:0 26px 60px rgba(2,6,23,.4)}.paper h2{margin:34px 34px 18px;color:#0b1220;font-size:34px;font-weight:900}.mini{position:absolute;left:320px;top:118px;width:170px;height:145px;border-radius:18px;background:#edf8f6;padding:15px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.mini span{border-radius:4px;background:#07111f}.mini span:nth-child(5n+3),.mini span:nth-child(7),.mini span:nth-child(18){background:#2dd4bf}.bars{position:absolute;left:40px;right:40px;bottom:50px;display:grid;gap:14px}.bars span{height:18px;border-radius:99px;background:#cbd5e1}.bars span:nth-child(2){width:70%}.found{position:absolute;left:286px;top:84px;width:230px;height:210px;border:6px solid #2dd4bf;border-radius:28px}.found.two{left:80px;top:196px;width:260px;height:126px;border-color:#ffc857}
|
||||
.dialog{position:absolute;z-index:7;left:42px;right:42px;bottom:146px;padding:28px;border-radius:34px;background:#fff;color:#0b1220;box-shadow:0 -24px 80px rgba(2,6,23,.4)}.dialog h1{margin:0;font-size:34px;font-weight:900}.dialog p{margin:10px 0 22px;color:#607080;font-size:23px;line-height:1.3;font-weight:650}.preview{height:240px;border-radius:28px;background:linear-gradient(145deg,#07111f,#123b3f);position:relative;overflow:hidden;margin-bottom:20px}.preview .mini{left:595px;top:55px;transform:rotate(-4deg);width:170px;height:140px}.preview .found{left:570px;top:36px;width:220px;height:180px}.candidate{display:grid;grid-template-columns:54px 1fr;gap:15px;align-items:center;padding:18px;border-radius:24px;background:#f6fbfa;margin-top:12px;border:2px solid transparent}.candidate.active{border-color:#2dd4bf;background:#ecfdf5}.candidate-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#dff7f2;color:#0f766e}.candidate-icon svg{width:30px;height:30px}.candidate strong{display:block;font-size:23px;font-weight:900}.candidate span{display:block;margin-top:5px;color:#607080;font-size:20px;line-height:1.2;font-weight:650}.actions{display:flex;justify-content:flex-end;gap:14px;margin-top:24px}.btn{padding:15px 20px;border-radius:18px;font-size:22px;font-weight:900;color:#0f766e}.btn.primary{background:#0f766e;color:#fff}
|
||||
.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{color:#0f766e}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shot">
|
||||
<div class="grid"></div><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>
|
||||
<div class="top">Scan from image</div><div class="gallery"><svg viewBox="0 0 24 24" fill="none"><path d="M4 5H20V19H4V5Z" stroke="white" stroke-width="2"/><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>
|
||||
<section class="phone-photo"><div class="paper"><h2>Meeting flyer</h2><div class="mini"><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="bars"><span></span><span></span><span></span></div><div class="found"></div><div class="found two"></div></div></section>
|
||||
<section class="dialog">
|
||||
<h1>Found 2 codes in image</h1><p>Choose the result you want to use. Detection and parsing happen locally.</p>
|
||||
<div class="preview"><div class="mini"><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="found"></div></div>
|
||||
<div class="candidate active"><div class="candidate-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M10 13A5 5 0 0 0 17.1 13L20 10.1A5 5 0 0 0 12.9 3L11.8 4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M14 11A5 5 0 0 0 6.9 11L4 13.9A5 5 0 0 0 11.1 21L12.2 19.9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div><div><strong>URL</strong><span>https://example.org/register</span></div></div>
|
||||
<div class="candidate"><div class="candidate-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M4 8L12 13L20 8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 6H19C19.6 6 20 6.4 20 7V17C20 17.6 19.6 18 19 18H5C4.4 18 4 17.6 4 17V7C4 6.4 4.4 6 5 6Z" stroke="currentColor" stroke-width="2.2"/></svg></div><div><strong>Email</strong><span>hello@example.org</span></div></div>
|
||||
<div class="actions"><div class="btn">Cancel</div><div class="btn primary">Use selected</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>
|
||||
Reference in New Issue
Block a user