nicer visual aperance
This commit is contained in:
Hadrian Burkhardt
@@ -0,0 +1,525 @@
|
||||
<!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 2</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6fbfa;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #edf8f5;
|
||||
--ink: #0b1220;
|
||||
--muted: #607080;
|
||||
--line: #dce8e6;
|
||||
--teal: #0f766e;
|
||||
--teal-bright: #2dd4bf;
|
||||
--mint: #dff7f2;
|
||||
--blue: #1d4ed8;
|
||||
}
|
||||
|
||||
* {
|
||||
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 92% -4%, rgba(45, 212, 191, 0.20), transparent 31%),
|
||||
linear-gradient(180deg, #f6fbfa 0%, #eff8f6 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-bright);
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-bottom: 28px;
|
||||
padding: 28px;
|
||||
border-radius: 34px;
|
||||
background:
|
||||
radial-gradient(circle at 88% 20%, rgba(45, 212, 191, 0.18), transparent 34%),
|
||||
linear-gradient(145deg, #0b1220, #123b3f);
|
||||
color: #f8fafc;
|
||||
box-shadow: 0 22px 44px rgba(7, 17, 31, 0.18);
|
||||
}
|
||||
|
||||
.hero-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 152px;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-size: 47px;
|
||||
line-height: 1.04;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
margin: 16px 0 0;
|
||||
color: #cbe7e3;
|
||||
font-size: 25px;
|
||||
line-height: 1.25;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.safe-card {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
border-radius: 30px;
|
||||
background: rgba(223, 247, 242, 0.12);
|
||||
border: 1px solid rgba(223, 247, 242, 0.18);
|
||||
}
|
||||
|
||||
.safe-card svg {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.privacy-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 13px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.privacy-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 58px;
|
||||
border-radius: 18px;
|
||||
background: rgba(223, 247, 242, 0.12);
|
||||
color: #dff7f2;
|
||||
font-size: 20px;
|
||||
font-weight: 820;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 18px;
|
||||
color: #132032;
|
||||
font-size: 31px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
height: 72px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 22px;
|
||||
border: 2px solid #cfe0de;
|
||||
border-radius: 20px;
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
font-size: 22px;
|
||||
font-weight: 640;
|
||||
}
|
||||
|
||||
.search svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.export-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.export {
|
||||
height: 50px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 15px;
|
||||
background: var(--mint);
|
||||
color: var(--teal);
|
||||
font-size: 18px;
|
||||
font-weight: 840;
|
||||
}
|
||||
|
||||
.delete {
|
||||
margin-left: auto;
|
||||
background: #fff1f2;
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
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: var(--surface-2);
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.type-icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.row-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #132032;
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #7b8b98;
|
||||
font-size: 18px;
|
||||
font-weight: 680;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 7px;
|
||||
color: #41566a;
|
||||
font-size: 21px;
|
||||
line-height: 1.25;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
margin-top: 30px;
|
||||
padding: 24px;
|
||||
border-radius: 30px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 74px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: #172033;
|
||||
font-size: 24px;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.setting:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
border-radius: 999px;
|
||||
background: var(--teal);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.switch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 8px rgba(15, 23, 42, 0.24);
|
||||
}
|
||||
|
||||
.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">Optional history stays on your device</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-row">
|
||||
<div>
|
||||
<h1>Review past scans locally</h1>
|
||||
<p>Search, export, or delete saved scans whenever you choose.</p>
|
||||
</div>
|
||||
<div class="safe-card" aria-hidden="true">
|
||||
<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="#2DD4BF"/>
|
||||
<path d="M8.6 12.2L10.9 14.5L15.8 9.5" stroke="#07111F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="privacy-strip">
|
||||
<div class="privacy-pill">No ads</div>
|
||||
<div class="privacy-pill">No tracking</div>
|
||||
<div class="privacy-pill">No account</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 class="section-title">History</h2>
|
||||
<div class="search">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path d="M10.8 18.2C14.9 18.2 18.2 14.9 18.2 10.8C18.2 6.7 14.9 3.4 10.8 3.4C6.7 3.4 3.4 6.7 3.4 10.8C3.4 14.9 6.7 18.2 10.8 18.2Z" stroke="currentColor" stroke-width="2.2"/>
|
||||
<path d="M16.4 16.4L21 21" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Search saved scans
|
||||
</div>
|
||||
<div class="export-row">
|
||||
<button class="export">TXT</button>
|
||||
<button class="export">CSV</button>
|
||||
<button class="export">JSON</button>
|
||||
<button class="export delete">Delete all</button>
|
||||
</div>
|
||||
|
||||
<div class="history-list">
|
||||
<article class="history-item">
|
||||
<div class="type-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>
|
||||
<div class="row-top"><div class="type">URL</div><div class="time">Today, 9:38 AM</div></div>
|
||||
<div class="value">https://example.org/menu</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="history-item">
|
||||
<div class="type-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>
|
||||
<div class="row-top"><div class="type">Email</div><div class="time">Today, 9:21 AM</div></div>
|
||||
<div class="value">support@example.org</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="history-item">
|
||||
<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>
|
||||
<div class="row-top"><div class="type">Wi-Fi</div><div class="time">Yesterday</div></div>
|
||||
<div class="value">SSID: Guest Network</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section class="settings-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>
|
||||
</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 active">
|
||||
<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