alexei.dolgolyov
1e357244e1
Three full-fidelity dashboard mockups (Bridge/Console, Aurora/Glass, Bento/Modular) plus a chooser index and a tracker-detail page in the chosen Aurora language. Self-contained HTML, no build needed.
566 lines
19 KiB
HTML
566 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Notify Bridge — Redesign Options</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=JetBrains+Mono:wght@300..600&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg: #0b0c10;
|
|
--surface: #14151c;
|
|
--rule: #232531;
|
|
--rule-strong: #353846;
|
|
--fg: #f0eee8;
|
|
--fg-dim: #b0b3bd;
|
|
--mute: #6f7280;
|
|
}
|
|
html, body { background: var(--bg); color: var(--fg); }
|
|
body {
|
|
font-family: 'Manrope', system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
min-height: 100vh;
|
|
padding: 56px 32px 80px;
|
|
background:
|
|
radial-gradient(40vw 40vw at 18% 10%, rgba(184, 167, 255, 0.12), transparent 60%),
|
|
radial-gradient(35vw 30vw at 88% 90%, rgba(126, 232, 196, 0.10), transparent 60%),
|
|
var(--bg);
|
|
}
|
|
|
|
.wrap { max-width: 1240px; margin: 0 auto; }
|
|
|
|
.head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 56px;
|
|
padding-bottom: 28px;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.brand {
|
|
font-family: 'Newsreader', serif;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1;
|
|
}
|
|
.brand em {
|
|
font-style: italic;
|
|
background: linear-gradient(135deg, #b8a7ff, #ff9ec4);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.brand small { display: block; margin-top: 6px; color: var(--mute); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
|
|
.meta {
|
|
text-align: right;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--mute);
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
.meta b { color: var(--fg); font-weight: 500; }
|
|
|
|
.intro {
|
|
max-width: 720px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.intro h1 {
|
|
font-family: 'Newsreader', serif;
|
|
font-weight: 400;
|
|
font-size: 56px;
|
|
line-height: 1.0;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 18px;
|
|
}
|
|
.intro h1 em {
|
|
font-style: italic;
|
|
background: linear-gradient(135deg, #c8f078, #b8a7ff);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.intro p {
|
|
font-size: 16px;
|
|
color: var(--fg-dim);
|
|
line-height: 1.6;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.options {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
@media (max-width: 980px) { .options { grid-template-columns: 1fr; } }
|
|
|
|
.option {
|
|
background: var(--surface);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
transition: transform .25s cubic-bezier(.4,.4,0,1), border-color .25s;
|
|
text-decoration: none; color: inherit;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.option:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--rule-strong);
|
|
}
|
|
.option__preview {
|
|
height: 220px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
/* Option A — Bridge / Console */
|
|
.preview--a {
|
|
background: #07080b;
|
|
color: #ece8df;
|
|
}
|
|
.preview--a::before {
|
|
content: '';
|
|
position: absolute; inset: 0;
|
|
background-image: repeating-linear-gradient(
|
|
0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px
|
|
);
|
|
}
|
|
.preview--a .lime {
|
|
position: absolute; left: 24px; top: 24px;
|
|
background: #d4ff3a; color: #07080b;
|
|
padding: 4px 9px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
.preview--a .num {
|
|
position: absolute; right: 24px; top: 24px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 32px; color: #d4ff3a; font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.preview--a .title {
|
|
position: absolute; left: 24px; bottom: 56px;
|
|
font-family: 'Newsreader', serif;
|
|
font-style: italic; font-size: 38px;
|
|
color: #d4ff3a;
|
|
letter-spacing: -0.02em;
|
|
line-height: 0.95;
|
|
}
|
|
.preview--a .title b {
|
|
font-style: normal; color: #ece8df; font-weight: 400;
|
|
}
|
|
.preview--a .rule {
|
|
position: absolute; left: 24px; right: 24px; bottom: 36px;
|
|
height: 1px; background: rgba(255,255,255,0.12);
|
|
}
|
|
.preview--a .stream {
|
|
position: absolute; left: 24px; bottom: 14px; right: 24px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px; color: rgba(255,255,255,0.6);
|
|
}
|
|
.preview--a .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: #d4ff3a; box-shadow: 0 0 6px #d4ff3a;
|
|
}
|
|
|
|
/* Option B — Aurora */
|
|
.preview--b {
|
|
background: #050613;
|
|
color: #f3f1ff;
|
|
overflow: hidden;
|
|
}
|
|
.preview--b::before {
|
|
content: '';
|
|
position: absolute; inset: -20%;
|
|
background:
|
|
radial-gradient(40% 40% at 20% 30%, rgba(184, 167, 255, 0.7), transparent 60%),
|
|
radial-gradient(35% 35% at 80% 25%, rgba(255, 158, 196, 0.6), transparent 60%),
|
|
radial-gradient(50% 35% at 75% 85%, rgba(126, 232, 196, 0.5), transparent 60%);
|
|
filter: blur(40px) saturate(140%);
|
|
}
|
|
.preview--b .glass {
|
|
position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px;
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(20px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
padding: 22px;
|
|
}
|
|
.preview--b .pill {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,0.1);
|
|
font-size: 10px; color: #b8a7ff;
|
|
font-weight: 500;
|
|
}
|
|
.preview--b .pill::before {
|
|
content: '';
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: #7ee8c4; box-shadow: 0 0 6px #7ee8c4;
|
|
}
|
|
.preview--b .title {
|
|
font-family: 'Newsreader', serif;
|
|
font-style: italic; font-size: 34px;
|
|
margin-top: 12px;
|
|
background: linear-gradient(135deg, #ff9ec4, #b8a7ff 60%, #8ec9ff);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1;
|
|
}
|
|
.preview--b .title b {
|
|
font-style: normal; color: #f3f1ff;
|
|
background: none; -webkit-text-fill-color: #f3f1ff;
|
|
}
|
|
.preview--b .row {
|
|
margin-top: 14px;
|
|
display: flex; gap: 8px;
|
|
}
|
|
.preview--b .chip {
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,0.08);
|
|
font-size: 10px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
color: rgba(255,255,255,0.85);
|
|
}
|
|
.preview--b .chip b { font-weight: 600; }
|
|
|
|
/* Option C — Bento */
|
|
.preview--c {
|
|
background: #f4f3ef;
|
|
color: #0c0d11;
|
|
padding: 14px;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
.preview--c .b-tile {
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
display: flex; flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
position: relative;
|
|
font-size: 10px;
|
|
}
|
|
.preview--c .b-violet { background: #6d4ce6; color: white; grid-row: span 2; }
|
|
.preview--c .b-mint { background: #c8f078; color: #1a2e0c; }
|
|
.preview--c .b-coral { background: #ff6f5b; color: white; }
|
|
.preview--c .b-honey { background: #ffd23a; color: #2a1f00; }
|
|
.preview--c .b-ink { background: #0c0d11; color: white; }
|
|
.preview--c .b-tile .lab {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
|
|
opacity: 0.7; font-weight: 500;
|
|
}
|
|
.preview--c .b-tile .num {
|
|
font-size: 28px; font-weight: 700;
|
|
letter-spacing: -0.04em; line-height: 1;
|
|
}
|
|
.preview--c .b-violet .num { font-size: 36px; }
|
|
.preview--c .b-tile .num small {
|
|
font-size: 14px; opacity: 0.6;
|
|
}
|
|
.preview--c .b-tile .cap {
|
|
font-size: 9px; opacity: 0.85; line-height: 1.3;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Option content */
|
|
.option__body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
|
|
.option__kicker {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--mute);
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.option__kicker .badge {
|
|
background: var(--rule);
|
|
color: var(--fg);
|
|
padding: 2px 7px;
|
|
border-radius: 4px;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.option__title {
|
|
font-family: 'Newsreader', serif;
|
|
font-weight: 400;
|
|
font-size: 26px;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.05;
|
|
margin-bottom: 12px;
|
|
}
|
|
.option__title em {
|
|
font-style: italic;
|
|
color: var(--fg-dim);
|
|
}
|
|
.option__desc {
|
|
font-size: 13.5px;
|
|
color: var(--fg-dim);
|
|
line-height: 1.55;
|
|
margin-bottom: 18px;
|
|
flex: 1;
|
|
}
|
|
.option__tags {
|
|
display: flex; gap: 6px; flex-wrap: wrap;
|
|
margin-bottom: 18px;
|
|
}
|
|
.option__tag {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
color: var(--fg-dim);
|
|
background: var(--rule);
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.option__cta {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
color: var(--fg);
|
|
font-size: 13px; font-weight: 600;
|
|
border-top: 1px solid var(--rule);
|
|
padding-top: 16px;
|
|
}
|
|
.option__cta svg { width: 14px; height: 14px; transition: transform .2s; }
|
|
.option:hover .option__cta svg { transform: translateX(4px); }
|
|
|
|
.vs {
|
|
margin-top: 80px;
|
|
border-top: 1px solid var(--rule);
|
|
padding-top: 56px;
|
|
}
|
|
.vs h2 {
|
|
font-family: 'Newsreader', serif;
|
|
font-weight: 400;
|
|
font-size: 32px;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 28px;
|
|
}
|
|
.vs h2 em { font-style: italic; color: var(--fg-dim); }
|
|
.vs__table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: var(--surface);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
}
|
|
.vs__table th, .vs__table td {
|
|
padding: 14px 18px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.vs__table tr:last-child td { border-bottom: 0; }
|
|
.vs__table th {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--mute);
|
|
font-weight: 500;
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
.vs__table td:first-child {
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
}
|
|
.vs__table td { color: var(--fg-dim); }
|
|
.vs__table .a { color: #d4ff3a; }
|
|
.vs__table .b { color: #b8a7ff; }
|
|
.vs__table .c { color: #c8f078; }
|
|
|
|
.foot {
|
|
margin-top: 80px;
|
|
text-align: center;
|
|
color: var(--mute);
|
|
font-size: 11.5px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header class="head">
|
|
<div class="brand">
|
|
Notify <em>Bridge</em>
|
|
<small>Redesign · 3 directions</small>
|
|
</div>
|
|
<div class="meta">
|
|
Drafted <b>Apr 25, 2026</b><br>
|
|
For review · pick one
|
|
</div>
|
|
</header>
|
|
|
|
<section class="intro">
|
|
<h1>Three directions, one <em>product</em>.</h1>
|
|
<p>
|
|
Each option is a real, working dashboard you can open and click around. They share the same data,
|
|
the same product, and the same set of UX ideas — but commit to different aesthetic universes.
|
|
Open any, then come back here to compare.
|
|
</p>
|
|
<p style="margin-top: 18px; padding: 12px 18px; border-left: 2px solid #b8a7ff; background: rgba(184,167,255,0.08); border-radius: 0 12px 12px 0; font-size: 14px;">
|
|
<strong style="color:#b8a7ff">Decided · Aurora.</strong>
|
|
Ongoing surfaces in the chosen language:
|
|
<a href="aurora-tracker.html" style="color:#b8a7ff;font-weight:600;text-decoration:underline;text-underline-offset:3px;">Tracker detail →</a>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="options">
|
|
|
|
<a class="option" href="dashboard.html">
|
|
<div class="option__preview preview--a">
|
|
<span class="lime">● ON AIR</span>
|
|
<span class="num">2 814</span>
|
|
<div class="title"><b>Tonight,</b><br>everything is <em>flowing.</em></div>
|
|
<div class="rule"></div>
|
|
<div class="stream">
|
|
<span class="dot"></span><span>02:14 · IMMICH · 14 ASSETS → @FAMILY</span>
|
|
</div>
|
|
</div>
|
|
<div class="option__body">
|
|
<div class="option__kicker">Option A <span class="badge">existing</span></div>
|
|
<h3 class="option__title">Bridge <em>· Control Room</em></h3>
|
|
<p class="option__desc">
|
|
Editorial broadcast-console. Phosphor-lime accents on deep ink, hairline rules,
|
|
monospace numerals, italic Fraunces serif against JetBrains Mono. Atmospheric scanlines,
|
|
live ticker bar. Built for operators who want density and signal-room energy.
|
|
</p>
|
|
<div class="option__tags">
|
|
<span class="option__tag">phosphor-lime</span>
|
|
<span class="option__tag">Fraunces</span>
|
|
<span class="option__tag">hairlines</span>
|
|
<span class="option__tag">dense</span>
|
|
</div>
|
|
<div class="option__cta">
|
|
Open mockup
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="option" href="dashboard-aurora.html">
|
|
<div class="option__preview preview--b">
|
|
<div class="glass">
|
|
<span class="pill">Live · all systems nominal</span>
|
|
<div class="title"><b>Tonight,</b><br><em>everything</em> flows.</div>
|
|
<div class="row">
|
|
<span class="chip"><b>2 814</b> sent</span>
|
|
<span class="chip"><b>99.7%</b> ok</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option__body">
|
|
<div class="option__kicker">Option B <span class="badge" style="background:#b8a7ff;color:#0a0a0a">new</span></div>
|
|
<h3 class="option__title">Aurora <em>· Glass</em></h3>
|
|
<p class="option__desc">
|
|
Vivid aurora gradient base, frosted-glass panels, soft pastel accents — lavender, orchid,
|
|
mint, coral. Newsreader serif headlines with gradient italics. Premium, modern, visionOS /
|
|
Stripe-modern. Rounded, breathable, animated.
|
|
</p>
|
|
<div class="option__tags">
|
|
<span class="option__tag">aurora gradient</span>
|
|
<span class="option__tag">frosted glass</span>
|
|
<span class="option__tag">Newsreader</span>
|
|
<span class="option__tag">premium</span>
|
|
</div>
|
|
<div class="option__cta">
|
|
Open mockup
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="option" href="dashboard-bento.html">
|
|
<div class="option__preview preview--c">
|
|
<div class="b-tile b-violet">
|
|
<span class="lab">Top provider</span>
|
|
<div>
|
|
<div class="num">1942</div>
|
|
<div class="cap">Immich · 8 trackers</div>
|
|
</div>
|
|
</div>
|
|
<div class="b-tile b-mint">
|
|
<span class="lab">Trackers</span>
|
|
<div class="num">12<small>/14</small></div>
|
|
</div>
|
|
<div class="b-tile b-honey">
|
|
<span class="lab">Targets</span>
|
|
<div class="num">19</div>
|
|
</div>
|
|
<div class="b-tile b-coral">
|
|
<span class="lab">Failures</span>
|
|
<div class="num">02</div>
|
|
</div>
|
|
<div class="b-tile b-ink">
|
|
<span class="lab">Live</span>
|
|
<div class="num" style="color:#c8f078">●</div>
|
|
</div>
|
|
</div>
|
|
<div class="option__body">
|
|
<div class="option__kicker">Option C <span class="badge" style="background:#c8f078;color:#1a2e0c">new</span></div>
|
|
<h3 class="option__title">Bento <em>· Modular</em></h3>
|
|
<p class="option__desc">
|
|
Mixed-size colorful tiles in a tight grid. Each module commits to one role and one bold color
|
|
— violet, mint, coral, honey, cobalt. Manrope sans + JetBrains Mono. Apple Keynote / Linear
|
|
blog energy. Playful but disciplined. Ships with day + night.
|
|
</p>
|
|
<div class="option__tags">
|
|
<span class="option__tag">bento grid</span>
|
|
<span class="option__tag">bold color</span>
|
|
<span class="option__tag">Manrope</span>
|
|
<span class="option__tag">playful</span>
|
|
</div>
|
|
<div class="option__cta">
|
|
Open mockup
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</section>
|
|
|
|
<section class="vs">
|
|
<h2>Side <em>by side</em></h2>
|
|
<table class="vs__table">
|
|
<thead>
|
|
<tr>
|
|
<th>Trait</th>
|
|
<th><span class="a">A · Bridge</span></th>
|
|
<th><span class="b">B · Aurora</span></th>
|
|
<th><span class="c">C · Bento</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Mood</td><td>Editorial / operator</td><td>Premium / atmospheric</td><td>Playful / confident</td></tr>
|
|
<tr><td>Default theme</td><td>Dark (Console)</td><td>Dark (Aurora)</td><td>Light (Daylight)</td></tr>
|
|
<tr><td>Accent</td><td>Phosphor lime <code style="background:#d4ff3a;color:#07080b;padding:2px 6px;border-radius:4px;font-family:JetBrains Mono;font-size:11px">#d4ff3a</code></td><td>Lavender + orchid + mint</td><td>Violet · mint · coral · honey</td></tr>
|
|
<tr><td>Surface</td><td>Hairline-rule modules</td><td>Frosted-glass panels</td><td>Solid-color tiles</td></tr>
|
|
<tr><td>Display font</td><td>Fraunces (variable serif)</td><td>Newsreader (variable serif)</td><td>Manrope (geometric sans)</td></tr>
|
|
<tr><td>Data font</td><td>JetBrains Mono</td><td>Geist Mono</td><td>JetBrains Mono</td></tr>
|
|
<tr><td>Density</td><td>High · for power users</td><td>Medium · breathable</td><td>Medium · airy</td></tr>
|
|
<tr><td>Risk</td><td>Niche taste · heavy mood</td><td>Trendy glass may date</td><td>Color discipline matters</td></tr>
|
|
<tr><td>Best for</td><td>Pro operators · self-hosters</td><td>Showroom · public-facing</td><td>Mainstream · cross-audience</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<div class="foot">Notify Bridge · v0.5.2 · drafted by Claude</div>
|
|
</div>
|
|
</body>
|
|
</html>
|