Gilles Soulier
a0f47bf966
Ajoute les trois plans d'implémentation (agent Rust, serveur Go, dashboard), les consignes de design, les fichiers de brainstorming et le .gitignore. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
361 lines
20 KiB
HTML
361 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Nanometrics — Layout du dashboard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Share+Tech+Mono:wght@400&display=swap" rel="stylesheet">
|
|
<script src="/helper.js"></script>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root[data-theme="dark"] {
|
|
--accent: #fe8019; --accent-soft: #d65d0e; --accent-glow: rgba(254,128,25,0.35);
|
|
--bg-0: #1d1813; --bg-1: #2a231d; --bg-2: #32291f; --bg-3: #3c332a; --bg-4: #4a3f33; --bg-5: #57493c;
|
|
--ink-1: #f2e5c7; --ink-2: #d5c4a1; --ink-3: #a89984; --ink-4: #7c6f64;
|
|
--ok: #4dbb26; --warn: #fabd2f; --err: #fb4934; --info: #83a598; --blue: #3db0d1; --purple: #c882c8;
|
|
--border-1: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.12); --border-3: rgba(255,255,255,0.22);
|
|
--shadow-1: 0 1px 4px rgba(0,0,0,0.4); --shadow-2: 0 4px 16px rgba(0,0,0,0.5); --shadow-3: 0 8px 32px rgba(0,0,0,0.6);
|
|
--tile-3d: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.3) inset, 0 4px 16px rgba(0,0,0,0.5);
|
|
--font-ui: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-terminal: 'Share Tech Mono', monospace;
|
|
}
|
|
|
|
body { background: var(--bg-1); color: var(--ink-1); font-family: var(--font-ui); font-size: 13px; min-height: 100vh; }
|
|
|
|
/* ── HEADER PAGE ── */
|
|
.page-header {
|
|
background: var(--bg-0); border-bottom: 1px solid var(--border-2);
|
|
padding: 14px 24px; text-align: center;
|
|
}
|
|
.page-header h1 { font-size: 15px; color: var(--ink-2); font-weight: 500; }
|
|
.page-header p { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
|
|
|
|
/* ── CARDS LAYOUT ── */
|
|
.cards-wrap { display: flex; gap: 24px; padding: 28px 24px; flex-wrap: wrap; justify-content: center; }
|
|
|
|
.card-opt {
|
|
background: var(--bg-2); border: 2px solid var(--border-2); border-radius: 12px;
|
|
width: 320px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
|
|
overflow: hidden;
|
|
}
|
|
.card-opt:hover { border-color: var(--accent-soft); }
|
|
.card-opt.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
|
|
|
|
.card-label {
|
|
background: var(--bg-3); padding: 10px 16px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
border-bottom: 1px solid var(--border-1);
|
|
}
|
|
.card-letter {
|
|
width: 26px; height: 26px; border-radius: 6px;
|
|
background: var(--accent); color: #1d1813; font-weight: 700; font-size: 13px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.card-name { font-weight: 600; font-size: 13px; color: var(--ink-1); }
|
|
.card-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
|
|
|
|
.card-mock { padding: 14px; }
|
|
|
|
/* ── INDICATOR ── */
|
|
#selection-bar {
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
background: var(--bg-0); border-top: 1px solid var(--border-2);
|
|
padding: 10px 24px; display: flex; align-items: center; justify-content: space-between;
|
|
font-family: var(--font-terminal); font-size: 12px; color: var(--ink-3);
|
|
}
|
|
#sel-text { color: var(--accent); }
|
|
|
|
/* ── MINI MAQUETTES ── */
|
|
/* couleurs communes */
|
|
.m { background: var(--bg-1); border-radius: 8px; overflow: hidden; }
|
|
.mh { background: var(--bg-2); padding: 6px 10px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-1); font-size: 10px; color: var(--ink-2); font-weight: 600; }
|
|
.mh .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
|
|
.mh .title { flex:1; }
|
|
.mh .clock { font-family: var(--font-terminal); color: var(--ink-4); font-size: 9px; }
|
|
|
|
/* layout A — grille uniforme */
|
|
.grid-a { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px; }
|
|
.tile-a {
|
|
background: var(--bg-3); border-radius: 6px; padding: 7px 8px;
|
|
border: 1px solid var(--border-1); box-shadow: var(--tile-3d);
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
}
|
|
.tile-a .t-header { display: flex; align-items: center; gap: 4px; }
|
|
.tile-a .t-icon { font-size: 9px; color: var(--accent); }
|
|
.tile-a .t-name { font-size: 9px; font-weight: 600; color: var(--ink-2); }
|
|
.tile-a .t-led { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); margin-left: auto; }
|
|
.tile-a .t-led.warn { background: var(--warn); }
|
|
.tile-a .t-led.err { background: var(--err); }
|
|
.tile-a .gauge-row { display: flex; align-items: center; gap: 4px; }
|
|
.tile-a .g-label { font-size: 8px; color: var(--ink-4); font-family: var(--font-terminal); width: 20px; }
|
|
.tile-a .g-bar { flex:1; height: 4px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
|
|
.tile-a .g-fill { height: 100%; border-radius: 2px; background: var(--ok); }
|
|
.tile-a .g-fill.warn { background: var(--warn); }
|
|
.tile-a .g-fill.err { background: var(--err); }
|
|
.tile-a .g-val { font-size: 8px; color: var(--ink-3); font-family: var(--font-mono); width: 20px; text-align: right; }
|
|
|
|
/* layout B — sidebar + grille */
|
|
.layout-b { display: flex; gap: 0; }
|
|
.sidebar-b {
|
|
width: 72px; background: var(--bg-2); padding: 6px 4px;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
border-right: 1px solid var(--border-1);
|
|
}
|
|
.sb-item {
|
|
padding: 5px 4px; border-radius: 5px; display: flex; align-items: center; gap: 4px;
|
|
font-size: 8px; color: var(--ink-3); cursor: pointer;
|
|
}
|
|
.sb-item.active { background: var(--bg-4); color: var(--accent); }
|
|
.sb-item .sb-led { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
|
|
.sb-item .sb-led.warn { background: var(--warn); }
|
|
.sb-item .sb-led.err { background: var(--err); }
|
|
.sb-item .sb-label { font-family: var(--font-terminal); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.grid-b { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 6px; }
|
|
.tile-b {
|
|
background: var(--bg-3); border-radius: 6px; padding: 7px 8px;
|
|
border: 1px solid var(--border-1); box-shadow: var(--tile-3d);
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
}
|
|
.tile-b .t-header { display: flex; align-items: center; gap: 4px; }
|
|
.tile-b .t-icon { font-size: 9px; color: var(--accent); }
|
|
.tile-b .t-name { font-size: 9px; font-weight: 600; color: var(--ink-2); }
|
|
.tile-b .t-led { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); margin-left: auto; }
|
|
.tile-b .gauge-row { display: flex; align-items: center; gap: 4px; }
|
|
.tile-b .g-label { font-size: 8px; color: var(--ink-4); font-family: var(--font-terminal); width: 20px; }
|
|
.tile-b .g-bar { flex:1; height: 4px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
|
|
.tile-b .g-fill { height: 100%; border-radius: 2px; background: var(--ok); }
|
|
.tile-b .g-fill.warn { background: var(--warn); }
|
|
.tile-b .g-val { font-size: 8px; color: var(--ink-3); font-family: var(--font-mono); width: 20px; text-align: right; }
|
|
|
|
/* layout C — 3 colonnes */
|
|
.layout-c { display: flex; gap: 0; height: 160px; }
|
|
.tree-c {
|
|
width: 68px; background: var(--bg-2); padding: 5px 4px;
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
border-right: 1px solid var(--border-1);
|
|
overflow: hidden;
|
|
}
|
|
.tc-group { font-size: 8px; color: var(--accent); font-family: var(--font-terminal); padding: 2px 3px; letter-spacing: .05em; }
|
|
.tc-item { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 3px; }
|
|
.tc-item.active { background: var(--bg-4); }
|
|
.tc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
|
|
.tc-dot.warn { background: var(--warn); }
|
|
.tc-dot.err { background: var(--err); }
|
|
.tc-label { font-size: 8px; color: var(--ink-3); font-family: var(--font-terminal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.cockpit-c {
|
|
flex: 1; padding: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.kpi-c {
|
|
background: var(--bg-3); border-radius: 5px; padding: 6px 8px;
|
|
border: 1px solid var(--border-1); box-shadow: var(--tile-3d);
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
}
|
|
.kpi-c .k-label { font-size: 8px; color: var(--ink-4); font-family: var(--font-terminal); letter-spacing: .06em; }
|
|
.kpi-c .k-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--accent); line-height: 1; }
|
|
.kpi-c .k-sub { font-size: 8px; color: var(--ink-3); }
|
|
.kpi-c .g-bar { height: 3px; border-radius: 2px; background: var(--bg-4); overflow: hidden; margin-top: 2px; }
|
|
.kpi-c .g-fill { height: 100%; border-radius: 2px; background: var(--ok); }
|
|
.kpi-c .g-fill.warn { background: var(--warn); }
|
|
.logs-c {
|
|
width: 90px; background: var(--bg-2); padding: 5px;
|
|
border-left: 1px solid var(--border-1); overflow: hidden;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.log-line { font-family: var(--font-terminal); font-size: 7px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.log-line.ok { color: var(--ok); }
|
|
.log-line.warn { color: var(--warn); }
|
|
.log-line.err { color: var(--err); }
|
|
|
|
/* status bar commune */
|
|
.statusbar {
|
|
background: var(--bg-0); border-top: 1px solid var(--border-1);
|
|
display: flex; font-family: var(--font-terminal); font-size: 8px; color: var(--ink-4);
|
|
}
|
|
.sb-mode { background: var(--accent); color: var(--bg-0); padding: 2px 8px; font-weight: 700; }
|
|
.sb-cell { padding: 2px 8px; border-right: 1px solid var(--border-1); }
|
|
.sb-right { margin-left: auto; padding: 2px 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-header">
|
|
<h1>Layout du dashboard Nanometrics</h1>
|
|
<p>Clique sur le layout qui te correspond le mieux</p>
|
|
</div>
|
|
|
|
<div class="cards-wrap">
|
|
|
|
<!-- OPTION A -->
|
|
<div class="card-opt" data-choice="a" onclick="toggleSelect(this)">
|
|
<div class="card-label">
|
|
<div class="card-letter">A</div>
|
|
<div>
|
|
<div class="card-name">Grille uniforme</div>
|
|
<div class="card-sub">Toutes les tuiles identiques, adaptatives</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-mock">
|
|
<div class="m">
|
|
<div class="mh"><div class="dot"></div><span class="title">NANOMETRICS</span><span class="clock">22:14:05</span></div>
|
|
<div class="grid-a">
|
|
<div class="tile-a">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">srv-01</span><span class="t-led"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:42%"></div></div><span class="g-val">42%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill warn" style="width:74%"></div></div><span class="g-val">74%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill" style="width:31%"></div></div><span class="g-val">31%</span></div>
|
|
</div>
|
|
<div class="tile-a">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">srv-02</span><span class="t-led warn"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill warn" style="width:78%"></div></div><span class="g-val">78%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:55%"></div></div><span class="g-val">55%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill" style="width:20%"></div></div><span class="g-val">20%</span></div>
|
|
</div>
|
|
<div class="tile-a">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">rpi-03</span><span class="t-led"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:12%"></div></div><span class="g-val">12%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:38%"></div></div><span class="g-val">38%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill err" style="width:91%"></div></div><span class="g-val">91%</span></div>
|
|
</div>
|
|
<div class="tile-a">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">nas-04</span><span class="t-led"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:8%"></div></div><span class="g-val">8%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:60%"></div></div><span class="g-val">60%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill" style="width:44%"></div></div><span class="g-val">44%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="statusbar">
|
|
<div class="sb-mode">LIVE</div>
|
|
<div class="sb-cell">4 agents</div>
|
|
<div class="sb-cell">3 ok · 1 warn</div>
|
|
<div class="sb-right">22:14:05</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OPTION B -->
|
|
<div class="card-opt" data-choice="b" onclick="toggleSelect(this)">
|
|
<div class="card-label">
|
|
<div class="card-letter">B</div>
|
|
<div>
|
|
<div class="card-name">Sidebar + grille</div>
|
|
<div class="card-sub">Liste des agents à gauche, tuiles à droite</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-mock">
|
|
<div class="m">
|
|
<div class="mh"><div class="dot"></div><span class="title">NANOMETRICS</span><span class="clock">22:14:05</span></div>
|
|
<div class="layout-b">
|
|
<div class="sidebar-b">
|
|
<div class="sb-item active"><div class="sb-led"></div><span class="sb-label">srv-01</span></div>
|
|
<div class="sb-item"><div class="sb-led warn"></div><span class="sb-label">srv-02</span></div>
|
|
<div class="sb-item"><div class="sb-led err"></div><span class="sb-label">rpi-03</span></div>
|
|
<div class="sb-item"><div class="sb-led"></div><span class="sb-label">nas-04</span></div>
|
|
<div class="sb-item"><div class="sb-led"></div><span class="sb-label">db-05</span></div>
|
|
<div class="sb-item"><div class="sb-led"></div><span class="sb-label">web-06</span></div>
|
|
</div>
|
|
<div class="grid-b">
|
|
<div class="tile-b">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">srv-01</span><span class="t-led"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:42%"></div></div><span class="g-val">42%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill warn" style="width:74%"></div></div><span class="g-val">74%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill" style="width:31%"></div></div><span class="g-val">31%</span></div>
|
|
</div>
|
|
<div class="tile-b">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">srv-02</span><span class="t-led" style="background:var(--warn)"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill warn" style="width:78%"></div></div><span class="g-val">78%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:55%"></div></div><span class="g-val">55%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill" style="width:20%"></div></div><span class="g-val">20%</span></div>
|
|
</div>
|
|
<div class="tile-b">
|
|
<div class="t-header"><span class="t-icon">⬡</span><span class="t-name">rpi-03</span><span class="t-led" style="background:var(--err)"></span></div>
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:12%"></div></div><span class="g-val">12%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:38%"></div></div><span class="g-val">38%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DSK</span><div class="g-bar"><div class="g-fill" style="width:91%;background:var(--err)"></div></div><span class="g-val">91%</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="statusbar">
|
|
<div class="sb-mode">LIVE</div>
|
|
<div class="sb-cell">6 agents</div>
|
|
<div class="sb-cell">4 ok · 1 warn · 1 err</div>
|
|
<div class="sb-right">22:14:05</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OPTION C -->
|
|
<div class="card-opt" data-choice="c" onclick="toggleSelect(this)">
|
|
<div class="card-label">
|
|
<div class="card-letter">C</div>
|
|
<div>
|
|
<div class="card-name">3 colonnes (ops-style)</div>
|
|
<div class="card-sub">Tree nav · cockpit KPI · logs live</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-mock">
|
|
<div class="m">
|
|
<div class="mh"><div class="dot"></div><span class="title">NANOMETRICS</span><span class="clock">22:14:05</span></div>
|
|
<div class="layout-c">
|
|
<div class="tree-c">
|
|
<div class="tc-group">AGENTS</div>
|
|
<div class="tc-item active"><div class="tc-dot"></div><span class="tc-label">srv-01</span></div>
|
|
<div class="tc-item"><div class="tc-dot warn"></div><span class="tc-label">srv-02</span></div>
|
|
<div class="tc-item"><div class="tc-dot err"></div><span class="tc-label">rpi-03</span></div>
|
|
<div class="tc-item"><div class="tc-dot"></div><span class="tc-label">nas-04</span></div>
|
|
<div class="tc-item"><div class="tc-dot"></div><span class="tc-label">db-05</span></div>
|
|
</div>
|
|
<div class="cockpit-c">
|
|
<div class="kpi-c">
|
|
<div class="k-label">CPU</div>
|
|
<div class="k-val">42<span style="font-size:10px;color:var(--ink-3)">%</span></div>
|
|
<div class="g-bar"><div class="g-fill" style="width:42%"></div></div>
|
|
</div>
|
|
<div class="kpi-c">
|
|
<div class="k-label">MÉMOIRE</div>
|
|
<div class="k-val">74<span style="font-size:10px;color:var(--ink-3)">%</span></div>
|
|
<div class="g-bar"><div class="g-fill warn" style="width:74%"></div></div>
|
|
</div>
|
|
<div class="kpi-c">
|
|
<div class="k-label">DISQUE</div>
|
|
<div class="k-val">31<span style="font-size:10px;color:var(--ink-3)">%</span></div>
|
|
<div class="g-bar"><div class="g-fill" style="width:31%"></div></div>
|
|
</div>
|
|
<div class="kpi-c">
|
|
<div class="k-label">UPTIME</div>
|
|
<div class="k-val" style="font-size:11px;color:var(--ink-1)">14j 6h</div>
|
|
<div class="k-sub">depuis dernier boot</div>
|
|
</div>
|
|
</div>
|
|
<div class="logs-c">
|
|
<div class="log-line ok">22:14:05 srv-01 online</div>
|
|
<div class="log-line warn">22:13:58 srv-02 cpu>75%</div>
|
|
<div class="log-line err">22:13:41 rpi-03 disk>90%</div>
|
|
<div class="log-line">22:13:30 nas-04 online</div>
|
|
<div class="log-line">22:13:22 db-05 online</div>
|
|
<div class="log-line warn">22:12:55 srv-02 cpu>70%</div>
|
|
<div class="log-line">22:12:40 web-06 online</div>
|
|
</div>
|
|
</div>
|
|
<div class="statusbar">
|
|
<div class="sb-mode">LIVE</div>
|
|
<div class="sb-cell">srv-01 sélectionné</div>
|
|
<div class="sb-cell">5 ok · 1 warn · 1 err</div>
|
|
<div class="sb-right">22:14:05</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="selection-bar">
|
|
<span>Nanometrics — Layout du dashboard</span>
|
|
<span id="sel-text">Clique sur un layout pour le sélectionner</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|