2026-07-29 13:54:34 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head><meta charset="utf-8">
|
|
|
|
|
<style>
|
|
|
|
|
:root { color-scheme: dark; font-family: system-ui, sans-serif; }
|
2026-07-30 08:16:55 +02:00
|
|
|
[hidden] { display: none !important; }
|
2026-07-29 13:54:34 +02:00
|
|
|
body { margin: 0; height: 100vh; background: #0f1420; color: #e7eaf1; user-select: none; overflow: hidden; }
|
|
|
|
|
.tabs { display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px 0; height: 34px; }
|
|
|
|
|
.tab { display: flex; align-items: center; gap: 8px; max-width: 200px; min-width: 90px; padding: 6px 10px;
|
|
|
|
|
background: #1b2330; border: 1px solid #ffffff14; border-bottom: none; border-radius: 8px 8px 0 0;
|
|
|
|
|
font-size: 12.5px; cursor: default; color: #b9c2d0; }
|
|
|
|
|
.tab.active { background: #26304180; color: #fff; }
|
|
|
|
|
.tab .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
2026-07-30 19:29:32 +02:00
|
|
|
.tab .spin { width: 10px; height: 10px; flex: none; border: 1.5px solid #ffffff2e; border-top-color: #d6ff3d; border-radius: 50%; animation: spin .7s linear infinite; }
|
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
2026-07-29 13:54:34 +02:00
|
|
|
.tab .x { opacity: .5; cursor: pointer; padding: 0 2px; border-radius: 4px; }
|
|
|
|
|
.tab .x:hover { opacity: 1; background: #ffffff1a; }
|
|
|
|
|
.newtab { padding: 4px 10px; cursor: pointer; color: #8b98a9; border-radius: 6px; font-size: 16px; }
|
|
|
|
|
.newtab:hover { background: #ffffff12; color: #fff; }
|
|
|
|
|
.bar { display: flex; gap: 6px; align-items: center; padding: 6px 10px; }
|
|
|
|
|
.nav { display: flex; gap: 1px; }
|
|
|
|
|
.ic { width: 34px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer;
|
|
|
|
|
color: #c5cdda; background: transparent; border: none; padding: 0; }
|
2026-07-30 19:29:32 +02:00
|
|
|
.ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
2026-07-29 13:54:34 +02:00
|
|
|
.ic:hover { background: #ffffff14; color: #fff; }
|
|
|
|
|
.ic:active { background: #ffffff22; }
|
|
|
|
|
.ic:disabled { opacity: .28; cursor: default; background: transparent; }
|
2026-07-30 19:29:32 +02:00
|
|
|
/* indeterminate loading bar under the toolbar */
|
|
|
|
|
.loadbar { height: 2px; overflow: hidden; background: transparent; }
|
|
|
|
|
.loadbar.on::after { content: ""; display: block; height: 100%; width: 35%; border-radius: 2px;
|
|
|
|
|
background: linear-gradient(90deg, transparent, #4b7bec, #d6ff3d, transparent); animation: loadslide 1.1s infinite linear; }
|
|
|
|
|
@keyframes loadslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }
|
|
|
|
|
/* address bar */
|
2026-07-30 08:16:55 +02:00
|
|
|
.urlwrap { flex: 1; display: flex; align-items: center; gap: 4px; background: #1b2330; border: 1px solid #ffffff22;
|
|
|
|
|
border-radius: 999px; padding: 0 6px 0 4px; }
|
2026-07-29 13:54:34 +02:00
|
|
|
.urlwrap:focus-within { border-color: #4b7bec; }
|
2026-07-30 19:29:32 +02:00
|
|
|
/* Firefox-style padlock — always present (the "site security" button) */
|
2026-07-30 08:16:55 +02:00
|
|
|
.secbadge { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 6px; border: none;
|
|
|
|
|
background: transparent; cursor: pointer; padding: 0; }
|
|
|
|
|
.secbadge:hover { background: #ffffff14; }
|
|
|
|
|
.secbadge svg { width: 14px; height: 14px; }
|
|
|
|
|
.secbadge svg .shk { fill: none; stroke: #a9b3c2; stroke-width: 1.3; }
|
|
|
|
|
.secbadge svg .bdy { fill: #a9b3c2; }
|
|
|
|
|
.secbadge.warn svg .shk { stroke: #f6ad55; } .secbadge.warn svg .bdy { fill: #f6ad55; }
|
|
|
|
|
input { padding: 7px 6px; border-radius: 999px; border: none; background: transparent; color: inherit; font-size: 13.5px; outline: none; }
|
|
|
|
|
#url { flex: 1; }
|
2026-07-30 19:29:32 +02:00
|
|
|
/* minimal registry indicator at the END of the address bar */
|
|
|
|
|
.reg { font-size: 10.5px; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
|
2026-07-30 08:16:55 +02:00
|
|
|
background: rgba(214,255,61,.13); color: #d6ff3d; border: 1px solid #d6ff3d33; }
|
2026-07-30 19:29:32 +02:00
|
|
|
.reg.icann { background: rgba(139,152,169,.14); color: #9aa6b6; border-color: #ffffff1a; }
|
|
|
|
|
.star { border: none; background: transparent; cursor: pointer; color: #8b98a9; font-size: 15px; padding: 2px 4px; border-radius: 6px; }
|
|
|
|
|
.star:hover { background: #ffffff14; color: #fff; } .star.on { color: #ffd23d; }
|
2026-07-29 13:54:34 +02:00
|
|
|
.tor { padding: 7px 10px; border-radius: 8px; border: 1px solid #ffffff22; background: #2b2f3a; color: #fff; cursor: pointer; white-space: nowrap; font-size: 12.5px; }
|
|
|
|
|
.tor.connecting { background: #7a5c14; } .tor.on { background: #6b3fa0; }
|
2026-07-30 08:16:55 +02:00
|
|
|
.logo { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #d6ff3d; white-space: nowrap;
|
2026-07-30 19:29:32 +02:00
|
|
|
padding: 6px 12px; border: 1px solid #d6ff3d33; border-radius: 8px; cursor: pointer; background: rgba(214,255,61,.08); font-size: 13px; }
|
2026-07-30 08:16:55 +02:00
|
|
|
.logo:hover { background: rgba(214,255,61,.16); }
|
|
|
|
|
.logo .gear { font-size: 12px; opacity: .8; }
|
2026-07-30 19:29:32 +02:00
|
|
|
/* favorites bar — new-tab page only, single compact row */
|
|
|
|
|
.bookmarks { display: flex; align-items: center; gap: 4px; padding: 3px 10px 5px; height: 26px; overflow: hidden; }
|
2026-07-30 08:16:55 +02:00
|
|
|
.bm { display: flex; align-items: center; gap: 6px; max-width: 180px; padding: 3px 9px; border-radius: 6px;
|
2026-07-30 19:29:32 +02:00
|
|
|
background: #171e2a; border: 1px solid #ffffff10; color: #c5cdda; font-size: 12px; cursor: pointer; white-space: nowrap; }
|
2026-07-30 08:16:55 +02:00
|
|
|
.bm:hover { background: #202a3a; color: #fff; }
|
2026-07-30 19:29:32 +02:00
|
|
|
.bm .bt { overflow: hidden; text-overflow: ellipsis; }
|
2026-07-30 08:16:55 +02:00
|
|
|
.bm .bx { opacity: 0; cursor: pointer; font-size: 11px; } .bm:hover .bx { opacity: .55; }
|
|
|
|
|
.bm .bx:hover { opacity: 1; color: #f6768a; }
|
2026-07-30 19:29:32 +02:00
|
|
|
.bm-empty { color: #5e6678; font-size: 11.5px; white-space: nowrap; }
|
2026-07-29 13:54:34 +02:00
|
|
|
.tordisc { font-size: 11.5px; color: #d9c7f2; background: #2a1c40; border-top: 1px solid #6b3fa055; padding: 5px 14px; }
|
|
|
|
|
.tordisc a { color: #d6ff3d; }
|
|
|
|
|
.bcnrbar { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #dbead0;
|
|
|
|
|
background: #1a2417; border-top: 1px solid #d6ff3d33; padding: 6px 14px; }
|
|
|
|
|
.bcnrbar .breg { font-size: 10px; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px;
|
|
|
|
|
background: rgba(214,255,61,.14); color: #d6ff3d; border: 1px solid #d6ff3d33; }
|
|
|
|
|
.bcnrbar b { color: #fff; }
|
|
|
|
|
.bcnrbar .bopen { margin-left: auto; padding: 4px 11px; border-radius: 7px; border: 1px solid #d6ff3d55;
|
|
|
|
|
background: rgba(214,255,61,.12); color: #eaffb0; cursor: pointer; font-size: 11.5px; }
|
|
|
|
|
.bcnrbar .bopen:hover { background: rgba(214,255,61,.22); }
|
2026-07-30 08:16:55 +02:00
|
|
|
.bcnrbar .bdismiss { color: #8b98a9; text-decoration: none; } .bcnrbar .bdismiss:hover { color: #fff; }
|
2026-07-29 13:54:34 +02:00
|
|
|
</style></head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="tabs" id="tabs"></div>
|
|
|
|
|
<div class="bar">
|
|
|
|
|
<div class="nav">
|
2026-07-30 08:16:55 +02:00
|
|
|
<button class="ic" id="back" title="Back"><svg viewBox="0 0 16 16"><path d="M10 3 L5 8 L10 13"/></svg></button>
|
|
|
|
|
<button class="ic" id="fwd" title="Forward"><svg viewBox="0 0 16 16"><path d="M6 3 L11 8 L6 13"/></svg></button>
|
|
|
|
|
<button class="ic" id="reload" title="Reload"><svg viewBox="0 0 16 16"><path d="M13 8 a5 5 0 1 1 -1.5 -3.6"/><path d="M13 2.5 L13 5 L10.5 5"/></svg></button>
|
|
|
|
|
<button class="ic" id="home" title="Home"><svg viewBox="0 0 16 16"><path d="M2.5 7.5 L8 3 L13.5 7.5"/><path d="M4 6.7 L4 13 L12 13 L12 6.7"/></svg></button>
|
2026-07-29 13:54:34 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="urlwrap">
|
2026-07-30 19:29:32 +02:00
|
|
|
<button class="secbadge" id="secbadge" title="Site information">
|
2026-07-30 08:16:55 +02:00
|
|
|
<svg viewBox="0 0 16 16" aria-hidden="true"><path class="shk" d="M5 7 V5.3 a3 3 0 0 1 6 0 V7"/><rect class="bdy" x="3.6" y="6.9" width="8.8" height="6" rx="1.2"/></svg>
|
|
|
|
|
</button>
|
2026-07-29 13:54:34 +02:00
|
|
|
<input id="url" placeholder="Search or enter a .bch / .p2p name or web address" spellcheck="false">
|
|
|
|
|
<span class="reg" id="reg" hidden></span>
|
2026-07-30 08:16:55 +02:00
|
|
|
<button class="star" id="star" title="Save this page">☆</button>
|
2026-07-29 13:54:34 +02:00
|
|
|
</div>
|
|
|
|
|
<button class="tor" id="tor" title="Route traffic through Tor">🧅 Tor: Off</button>
|
2026-07-30 08:16:55 +02:00
|
|
|
<button class="logo" id="logo" title="Settings"><span>⛓ Theseus</span><span class="gear">⚙</span></button>
|
2026-07-29 13:54:34 +02:00
|
|
|
</div>
|
2026-07-30 19:29:32 +02:00
|
|
|
<div class="loadbar" id="loadbar"></div>
|
2026-07-30 08:16:55 +02:00
|
|
|
<div class="bookmarks" id="bookmarks" hidden></div>
|
2026-07-29 13:54:34 +02:00
|
|
|
<div id="tordisc" class="tordisc" hidden>
|
|
|
|
|
Onion mode hides your IP from sites and your ISP (including .bch lookups).
|
|
|
|
|
It is <b>not full anonymity</b> — this browser can still be fingerprinted; for that use the Tor Browser.
|
|
|
|
|
<a href="#" id="tordismiss">got it</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="bcnrbar" class="bcnrbar" hidden>
|
|
|
|
|
<span class="breg" id="bcnrreg">BCNR</span>
|
|
|
|
|
<span><b id="bcnrhost"></b> also exists on the <b>BCNR</b> decentralized registry.</span>
|
|
|
|
|
<button id="bcnropen" class="bopen">Open on BCNR</button>
|
|
|
|
|
<a href="#" id="bcnrdismiss" class="bdismiss">dismiss</a>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
|
const T = window.theseus;
|
|
|
|
|
function syncHeight() { requestAnimationFrame(() => T.setChromeHeight(document.body.scrollHeight)); }
|
2026-07-30 19:29:32 +02:00
|
|
|
const RELOAD_SVG = `<svg viewBox="0 0 16 16"><path d="M13 8 a5 5 0 1 1 -1.5 -3.6"/><path d="M13 2.5 L13 5 L10.5 5"/></svg>`;
|
|
|
|
|
const STOP_SVG = `<svg viewBox="0 0 16 16"><path d="M4.5 4.5 L11.5 11.5 M11.5 4.5 L4.5 11.5"/></svg>`;
|
2026-07-30 08:16:55 +02:00
|
|
|
|
2026-07-29 13:54:34 +02:00
|
|
|
function goURL() { const v = $("url").value.trim(); if (v) T.navigate(v); }
|
|
|
|
|
$("url").addEventListener("keydown", (e) => { if (e.key === "Enter") goURL(); });
|
|
|
|
|
$("back").onclick = () => T.back();
|
|
|
|
|
$("fwd").onclick = () => T.forward();
|
|
|
|
|
$("reload").onclick = () => T.reload();
|
|
|
|
|
$("home").onclick = () => T.goHome();
|
2026-07-30 19:29:32 +02:00
|
|
|
$("logo").onclick = () => T.openSettings();
|
|
|
|
|
$("secbadge").onclick = () => { const r = $("secbadge").getBoundingClientRect(); T.toggleSiteInfo({ x: Math.round(r.left), y: Math.round(r.bottom + 4) }); };
|
2026-07-29 13:54:34 +02:00
|
|
|
|
2026-07-30 19:29:32 +02:00
|
|
|
// ---- favorites bar (new-tab page only) ----
|
|
|
|
|
let current = { url: "", title: "" }, bookmarks = [];
|
2026-07-30 08:16:55 +02:00
|
|
|
function renderBookmarks() {
|
|
|
|
|
const box = $("bookmarks");
|
2026-07-30 19:29:32 +02:00
|
|
|
box.innerHTML = bookmarks.length
|
|
|
|
|
? bookmarks.map((b, i) => `<div class="bm" data-i="${i}" title="${(b.url||"").replace(/"/g,""")}"><span class="bt">${(b.title||b.url).replace(/</g,"<")}</span><span class="bx" data-x="${i}">✕</span></div>`).join("")
|
|
|
|
|
: `<span class="bm-empty">No saved pages yet — click ☆ in the address bar to save one.</span>`;
|
2026-07-30 08:16:55 +02:00
|
|
|
box.querySelectorAll(".bm").forEach((el) => el.onclick = (e) => {
|
|
|
|
|
const i = Number(el.dataset.i);
|
2026-07-30 19:29:32 +02:00
|
|
|
if (e.target.dataset.x !== undefined) T.removeBookmark(bookmarks[i].url);
|
2026-07-30 08:16:55 +02:00
|
|
|
else T.navigate(bookmarks[i].url);
|
|
|
|
|
});
|
2026-07-30 19:29:32 +02:00
|
|
|
updateStar(); syncHeight();
|
2026-07-30 08:16:55 +02:00
|
|
|
}
|
|
|
|
|
function updateStar() {
|
2026-07-30 19:29:32 +02:00
|
|
|
const saved = !!current.url && bookmarks.some((b) => b.url === current.url);
|
2026-07-30 08:16:55 +02:00
|
|
|
const s = $("star"); s.textContent = saved ? "★" : "☆"; s.classList.toggle("on", saved);
|
|
|
|
|
s.title = saved ? "Remove from saved pages" : "Save this page";
|
2026-07-29 13:54:34 +02:00
|
|
|
}
|
2026-07-30 08:16:55 +02:00
|
|
|
$("star").onclick = () => {
|
|
|
|
|
if (!current.url) return;
|
|
|
|
|
if (bookmarks.some((b) => b.url === current.url)) T.removeBookmark(current.url);
|
|
|
|
|
else T.addBookmark({ title: current.title || current.url, url: current.url });
|
|
|
|
|
};
|
|
|
|
|
T.getBookmarks().then((b) => { bookmarks = b || []; renderBookmarks(); });
|
|
|
|
|
T.onBookmarks((b) => { bookmarks = b || []; renderBookmarks(); });
|
2026-07-29 13:54:34 +02:00
|
|
|
|
2026-07-30 19:29:32 +02:00
|
|
|
// ---- security badge + minimal registry indicator ----
|
2026-07-30 08:16:55 +02:00
|
|
|
function setBadge(d) {
|
|
|
|
|
const b = $("secbadge");
|
2026-07-30 19:29:32 +02:00
|
|
|
let cls = "secbadge", title = "Site information";
|
|
|
|
|
if (!d || d.kind === "home") title = "Theseus";
|
|
|
|
|
else if (d.kind === "ok") title = "Secure · " + (d.source || "BCNR") + " — click for details";
|
2026-07-30 08:16:55 +02:00
|
|
|
else if (d.kind === "web") title = "Connection — click for details";
|
|
|
|
|
else if (d.kind === "resolving") title = "Resolving…";
|
|
|
|
|
else if (d.kind === "nxdomain") { cls = "secbadge warn"; title = "Not registered on BCNR"; }
|
|
|
|
|
else if (d.kind === "error") { cls = "secbadge warn"; title = "Resolution error"; }
|
|
|
|
|
b.className = cls; b.title = title;
|
|
|
|
|
}
|
2026-07-30 19:29:32 +02:00
|
|
|
function setReg(d) {
|
|
|
|
|
const r = $("reg");
|
|
|
|
|
if (!d || d.kind === "home") { r.hidden = true; return; }
|
|
|
|
|
r.hidden = false;
|
|
|
|
|
if (d.kind === "web") { r.textContent = "ICANN"; r.className = "reg icann"; }
|
|
|
|
|
else { r.textContent = (d.registry || "BCNR") + (d.tld ? " ·." + d.tld : ""); r.className = "reg"; }
|
|
|
|
|
}
|
2026-07-30 08:16:55 +02:00
|
|
|
|
|
|
|
|
// ---- Tor ----
|
2026-07-29 13:54:34 +02:00
|
|
|
let torShown = false;
|
|
|
|
|
$("tor").onclick = () => { T.toggleTor(); if (!torShown) { $("tordisc").hidden = false; torShown = true; syncHeight(); } };
|
|
|
|
|
$("tordismiss").onclick = (e) => { e.preventDefault(); $("tordisc").hidden = true; syncHeight(); };
|
|
|
|
|
|
2026-07-30 08:16:55 +02:00
|
|
|
// ---- passive BCNR offer ----
|
2026-07-29 13:54:34 +02:00
|
|
|
T.onBcnrOffer((d) => {
|
|
|
|
|
const bar = $("bcnrbar");
|
2026-07-30 08:16:55 +02:00
|
|
|
if (d && d.host) { $("bcnrhost").textContent = d.host; $("bcnrreg").textContent = d.registry || "BCNR"; bar.hidden = false; }
|
|
|
|
|
else bar.hidden = true;
|
2026-07-29 13:54:34 +02:00
|
|
|
syncHeight();
|
|
|
|
|
});
|
|
|
|
|
$("bcnropen").onclick = () => { $("bcnrbar").hidden = true; syncHeight(); T.switchToBcnr(); };
|
|
|
|
|
$("bcnrdismiss").onclick = (e) => { e.preventDefault(); $("bcnrbar").hidden = true; syncHeight(); };
|
|
|
|
|
T.onTor((d) => {
|
|
|
|
|
const b = $("tor"); b.className = "tor " + (d.state === "on" ? "on" : d.state === "connecting" ? "connecting" : "");
|
|
|
|
|
b.textContent = d.state === "on" ? "🧅 Tor: On" : d.state === "connecting" ? "🧅 connecting…" : "🧅 Tor: Off";
|
|
|
|
|
});
|
|
|
|
|
|
2026-07-30 08:16:55 +02:00
|
|
|
// ---- tabs ----
|
2026-07-29 13:54:34 +02:00
|
|
|
T.onTabs((d) => {
|
|
|
|
|
$("back").disabled = !d.canBack; $("fwd").disabled = !d.canForward;
|
2026-07-30 19:29:32 +02:00
|
|
|
// loading indicator: progress bar + reload↔stop button
|
|
|
|
|
$("loadbar").classList.toggle("on", !!d.loading);
|
|
|
|
|
const rb = $("reload");
|
|
|
|
|
if (d.loading) { rb.innerHTML = STOP_SVG; rb.title = "Stop"; rb.onclick = () => T.stop(); }
|
|
|
|
|
else { rb.innerHTML = RELOAD_SVG; rb.title = "Reload"; rb.onclick = () => T.reload(); }
|
2026-07-29 13:54:34 +02:00
|
|
|
if (document.activeElement !== $("url")) $("url").value = d.url || "";
|
2026-07-30 08:16:55 +02:00
|
|
|
current.url = d.url || "";
|
|
|
|
|
const active = d.tabs.find((t) => t.active);
|
|
|
|
|
current.title = active ? active.title : "";
|
|
|
|
|
updateStar();
|
2026-07-29 13:54:34 +02:00
|
|
|
const box = $("tabs");
|
|
|
|
|
box.innerHTML = d.tabs.map((t) =>
|
2026-07-30 19:29:32 +02:00
|
|
|
`<div class="tab ${t.active ? "active" : ""}" data-id="${t.id}">${t.loading ? '<span class="spin"></span>' : ''}<span class="t">${(t.title||"New Tab").replace(/</g,"<")}</span><span class="x" data-close="${t.id}">✕</span></div>`).join("") +
|
2026-07-29 13:54:34 +02:00
|
|
|
`<span class="newtab" id="newtab">+</span>`;
|
|
|
|
|
box.querySelectorAll(".tab").forEach((el) => el.onclick = (e) => {
|
|
|
|
|
if (e.target.dataset.close) T.closeTab(Number(e.target.dataset.close));
|
|
|
|
|
else T.switchTab(Number(el.dataset.id));
|
|
|
|
|
});
|
|
|
|
|
$("newtab").onclick = () => T.newTab();
|
|
|
|
|
});
|
|
|
|
|
|
2026-07-30 08:16:55 +02:00
|
|
|
// ---- provenance ----
|
2026-07-29 13:54:34 +02:00
|
|
|
T.onNav((d) => {
|
2026-07-30 19:29:32 +02:00
|
|
|
setBadge(d); setReg(d);
|
2026-07-29 13:54:34 +02:00
|
|
|
if (document.activeElement !== $("url")) {
|
|
|
|
|
if (d.kind === "home") $("url").value = "";
|
|
|
|
|
else if (d.host && !$("url").value) $("url").value = d.host;
|
|
|
|
|
}
|
2026-07-30 19:29:32 +02:00
|
|
|
// Favorites bar shows only on the new-tab / home page (hides once a page loads).
|
2026-07-30 08:16:55 +02:00
|
|
|
$("bookmarks").hidden = !(!d || d.kind === "home");
|
|
|
|
|
syncHeight();
|
2026-07-29 13:54:34 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
syncHeight();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
