phone screen shots
This commit is contained in:
Hadrian Burkhardt
@@ -0,0 +1,592 @@
|
||||
<!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 4</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6fbfa;
|
||||
--surface: #ffffff;
|
||||
--soft: #f2f7ff;
|
||||
--ink: #0b1220;
|
||||
--muted: #607080;
|
||||
--line: #dce8e6;
|
||||
--teal: #0f766e;
|
||||
--teal-300: #2dd4bf;
|
||||
--mint: #dff7f2;
|
||||
--navy: #07111f;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: Inter, "DejaVu Sans", Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.shot {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 88% -4%, rgba(45, 212, 191, 0.18), transparent 31%),
|
||||
linear-gradient(180deg, #f7fcfb 0%, #eef8f6 100%);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 92px;
|
||||
padding: 22px 44px 0;
|
||||
color: var(--ink);
|
||||
font-size: 24px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.system-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.signal {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 4px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.signal span {
|
||||
width: 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.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 var(--ink);
|
||||
border-radius: 6px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.battery::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 27px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
background: var(--teal-300);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px 48px 144px;
|
||||
}
|
||||
|
||||
.app-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.18);
|
||||
}
|
||||
|
||||
.app-title {
|
||||
margin: 0;
|
||||
font-size: 34px;
|
||||
line-height: 1.08;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
margin-top: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 20px;
|
||||
font-weight: 660;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
margin-bottom: 28px;
|
||||
padding: 28px;
|
||||
border-radius: 34px;
|
||||
background:
|
||||
radial-gradient(circle at 84% 26%, rgba(45, 212, 191, 0.20), transparent 34%),
|
||||
linear-gradient(145deg, #0b1220, #123b3f);
|
||||
color: #f8fafc;
|
||||
box-shadow: 0 22px 44px rgba(7, 17, 31, 0.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -80px;
|
||||
bottom: -70px;
|
||||
width: 330px;
|
||||
height: 230px;
|
||||
border-radius: 48px;
|
||||
background: rgba(223, 247, 242, 0.07);
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
width: 720px;
|
||||
font-size: 49px;
|
||||
line-height: 1.04;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 650px;
|
||||
margin: 16px 0 0;
|
||||
color: #cbe7e3;
|
||||
font-size: 25px;
|
||||
line-height: 1.25;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.chips {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
min-height: 56px;
|
||||
padding: 14px 18px;
|
||||
border-radius: 18px;
|
||||
background: rgba(223, 247, 242, 0.12);
|
||||
color: var(--mint);
|
||||
font-size: 20px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 18px;
|
||||
color: #132032;
|
||||
font-size: 31px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.image-scan {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 230px;
|
||||
gap: 18px;
|
||||
margin-bottom: 28px;
|
||||
padding: 22px;
|
||||
border-radius: 28px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.image-copy h2 {
|
||||
margin: 0;
|
||||
color: #132032;
|
||||
font-size: 29px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.image-copy p {
|
||||
margin: 10px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 22px;
|
||||
line-height: 1.28;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.photo {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(45, 212, 191, 0.11) 1px, transparent 1px) 0 0 / 25px 25px,
|
||||
linear-gradient(0deg, rgba(45, 212, 191, 0.10) 1px, transparent 1px) 0 0 / 25px 25px,
|
||||
linear-gradient(145deg, #07111f, #123b3f);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mini-qr {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
border-radius: 13px;
|
||||
background: #f8fafc;
|
||||
transform: rotate(-4deg);
|
||||
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
|
||||
}
|
||||
|
||||
.mini-qr span {
|
||||
border-radius: 3px;
|
||||
background: var(--navy);
|
||||
}
|
||||
|
||||
.mini-qr span:nth-child(5n+3),
|
||||
.mini-qr span:nth-child(7),
|
||||
.mini-qr span:nth-child(18) {
|
||||
background: var(--teal-300);
|
||||
}
|
||||
|
||||
.found {
|
||||
position: absolute;
|
||||
inset: 28px 34px;
|
||||
border: 4px solid var(--teal-300);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
padding: 24px;
|
||||
border-radius: 30px;
|
||||
background: linear-gradient(135deg, #081c3b, #0f2e58, #134b73);
|
||||
color: #f8fafc;
|
||||
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.contact-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.initials {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 20px;
|
||||
background: rgba(122, 247, 207, 0.18);
|
||||
color: #7af7cf;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.person {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.person h2 {
|
||||
margin: 0;
|
||||
font-size: 34px;
|
||||
line-height: 1.05;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.person p {
|
||||
margin: 7px 0 0;
|
||||
color: #c7d6e8;
|
||||
font-size: 21px;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.contact-lines {
|
||||
display: grid;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: grid;
|
||||
grid-template-columns: 102px 1fr;
|
||||
gap: 18px;
|
||||
align-items: baseline;
|
||||
font-size: 22px;
|
||||
line-height: 1.26;
|
||||
}
|
||||
|
||||
.line span:first-child {
|
||||
color: #c7d6e8;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.line span:last-child {
|
||||
color: #f8fafc;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
margin: 18px 0 28px;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
min-height: 62px;
|
||||
border-radius: 20px;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-size: 21px;
|
||||
font-weight: 850;
|
||||
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.action.primary {
|
||||
background: var(--teal);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.action svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.result-row {
|
||||
display: grid;
|
||||
grid-template-columns: 58px 1fr;
|
||||
gap: 16px;
|
||||
padding: 19px;
|
||||
border-radius: 24px;
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 16px;
|
||||
background: rgba(223, 247, 242, 0.65);
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.type-icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.result-row strong {
|
||||
display: block;
|
||||
color: #132032;
|
||||
font-size: 24px;
|
||||
line-height: 1.12;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.result-row span {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 21px;
|
||||
line-height: 1.24;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
height: 118px;
|
||||
padding: 12px 56px 18px;
|
||||
background: #fcfffe;
|
||||
color: #607080;
|
||||
border-top: 1px solid rgba(15, 23, 42, 0.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;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--teal);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shot">
|
||||
<div class="status">
|
||||
<div>9:41</div>
|
||||
<div class="system-icons">
|
||||
<div class="signal"><span></span><span></span><span></span><span></span></div>
|
||||
<div class="battery"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="content">
|
||||
<header class="app-head">
|
||||
<img class="app-icon" src="./private-qr-scanner-icon.svg" alt="">
|
||||
<div>
|
||||
<h1 class="app-title">Private QR Scanner</h1>
|
||||
<div class="app-subtitle">Structured results, practical actions</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Scan from camera or image</h1>
|
||||
<p>Recognize contacts, email, Wi-Fi, calendar events, links, and more.</p>
|
||||
<div class="chips">
|
||||
<div class="chip">Copy</div>
|
||||
<div class="chip">Share</div>
|
||||
<div class="chip">Add contact</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="image-scan">
|
||||
<div class="image-copy">
|
||||
<h2>Scan from image</h2>
|
||||
<p>Choose a saved photo and pick the detected code you want to use.</p>
|
||||
</div>
|
||||
<div class="photo" aria-hidden="true">
|
||||
<div class="mini-qr">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<h2 class="section-title">Contact result</h2>
|
||||
<section class="contact-card">
|
||||
<div class="contact-top">
|
||||
<div class="initials">AR</div>
|
||||
<div class="person">
|
||||
<h2>Avery Reed</h2>
|
||||
<p>Operations Lead • North Hall Events</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-lines">
|
||||
<div class="line"><span>Phone</span><span>+1 555 0134</span></div>
|
||||
<div class="line"><span>Email</span><span>avery@example.org</span></div>
|
||||
<div class="line"><span>Address</span><span>240 Market Street, Suite 8</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="actions">
|
||||
<div class="action primary">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 12C14.2 12 16 10.2 16 8C16 5.8 14.2 4 12 4C9.8 4 8 5.8 8 8C8 10.2 9.8 12 12 12Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M4 21C4.7 17.6 7.8 15 12 15C16.2 15 19.3 17.6 20 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M19 5V11M16 8H22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Add contact
|
||||
</div>
|
||||
<div class="action">
|
||||
<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>
|
||||
Copy
|
||||
</div>
|
||||
<div class="action">
|
||||
<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" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Share
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="result-grid">
|
||||
<article class="result-row">
|
||||
<div class="type-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><strong>Wi-Fi QR codes</strong><span>Open Wi-Fi settings after inspecting network details.</span></div>
|
||||
</article>
|
||||
<article class="result-row">
|
||||
<div class="type-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 4V7M17 4V7M5 9H19M6 6H18C18.6 6 19 6.4 19 7V19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V7C5 6.4 5.4 6 6 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div><strong>Calendar events</strong><span>Review title, location, and time before adding.</span></div>
|
||||
</article>
|
||||
</section>
|
||||
</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