Files
tunapro-garden/v3/index.html

418 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TUNAPRO.XYZ — fihrist</title>
<meta name="description" content="Tuna Gül'ün dijital bahçesi, fihrist düzeni: robotik, AI agent'ları ve self-host edilen her şey. Her satır bir proje, her proje yarım — ve bundan gurur duyuyoruz.">
<style>
:root{
--bg:#f4f1ea; --ink:#141412; --red:#d63c2f; --dim:#8a857a; --line:#141412;
--serif:"Iowan Old Style",Palatino,Georgia,serif;
--sans:-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--red);color:#fff}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
/* masthead */
.mast{border-bottom:3px solid var(--line);padding:26px 0 18px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.mast .logo{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.1em}
.mast .logo span{color:var(--red)}
.mast nav{font-family:var(--mono);font-size:12px;display:flex;gap:18px}
.mast nav a{text-decoration:none;color:var(--dim)}
.mast nav a:hover{color:var(--red)}
.mast .date{font-family:var(--mono);font-size:12px;color:var(--dim)}
/* hero */
.hero{padding:54px 0 44px;border-bottom:3px solid var(--line);display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:end}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(42px,8vw,92px);line-height:1.02;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--red)}
.hero p{max-width:58ch;margin-top:22px;font-size:17px;color:#3a382f}
.hero .rules{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--dim);display:flex;gap:20px;flex-wrap:wrap}
.hero .rules b{color:var(--red);font-weight:700}
.hero figure{position:relative}
.hero figure svg{width:100%;height:auto;display:block}
.hero figcaption{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:8px;text-align:right}
/* ticker */
.ticker{border-bottom:3px solid var(--line);overflow:hidden;background:var(--ink);color:var(--bg)}
.ticker .tape{display:flex;white-space:nowrap;animation:roll 28s linear infinite;width:max-content;padding:8px 0;font-family:var(--mono);font-size:12.5px}
.ticker .tape span{padding:0 26px}
.ticker .tape span::after{content:"✦";color:var(--red);margin-left:26px}
@keyframes roll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker .tape{animation:none}}
/* bölüm başlıkları */
.chapter{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;
padding:64px 0 18px;border-bottom:3px solid var(--line)}
@media(max-width:640px){.chapter{grid-template-columns:1fr}.chapter svg{display:none}}
.chapter .roman{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.chapter h2{font-family:var(--serif);font-size:clamp(30px,5vw,54px);font-weight:600;letter-spacing:-.015em;margin-top:8px}
.chapter .desc{font-size:14.5px;color:var(--dim);margin-top:8px;max-width:58ch}
.chapter svg{height:92px;width:auto}
/* fihrist satırları */
.row{border-bottom:1px solid #c9c3b4}
.row summary{
list-style:none;cursor:pointer;display:grid;
grid-template-columns:56px 1fr auto auto;gap:18px;align-items:baseline;
padding:20px 0;transition:padding .15s ease;
}
.row summary::-webkit-details-marker{display:none}
.row summary:hover{padding-left:12px}
.row .no{font-family:var(--mono);font-size:13px;color:var(--dim)}
.row .name{font-family:var(--serif);font-size:clamp(22px,3.4vw,34px);font-weight:600;letter-spacing:-.01em}
.row[open] .name, .row summary:hover .name{color:var(--red);font-style:italic}
.row .tag{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right}
.row .stage{font-size:16px}
.row .inner{display:grid;grid-template-columns:56px 1.5fr 1fr;gap:18px 28px;padding:0 0 30px}
.row .inner p{font-size:16px;color:#33312a;margin-bottom:10px;max-width:62ch}
.row .inner p a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
.row .fig{grid-column:3}
.row .fig img{width:100%;border:2px solid var(--line);filter:grayscale(1) contrast(1.08);
transition:filter .25s ease;display:block;background:#fff}
.row .fig:hover img{filter:grayscale(0)}
.row .fig .cap{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:6px}
.row .go{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.row .go a{
font-family:var(--mono);font-size:12.5px;text-decoration:none;
border:1.5px solid var(--ink);padding:6px 12px;border-radius:999px;
transition:background .12s,color .12s;
}
.row .go a:hover{background:var(--ink);color:var(--bg)}
.row .go a.hot:hover{background:var(--red);border-color:var(--red)}
@media(max-width:820px){
.row .inner{grid-template-columns:56px 1fr}
.row .fig{grid-column:2;max-width:420px}
}
@media(max-width:640px){
.row summary{grid-template-columns:36px 1fr auto}
.row .tag{display:none}
.row .inner{grid-template-columns:1fr}
.row .inner>.sp{display:none}
.row .fig{grid-column:auto}
}
/* bahçıvan */
.duo{display:grid;grid-template-columns:auto 1.3fr 1fr;border-bottom:3px solid var(--line);border-top:3px solid var(--line);margin-top:70px}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.duo>div{padding:36px 26px}
.duo>div:not(:last-child){border-right:3px solid var(--line)}
@media(max-width:860px){.duo>div:not(:last-child){border-right:none;border-bottom:3px solid var(--line)}}
.duo h3{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.duo p{font-size:15.5px;color:#33312a;margin-bottom:10px;max-width:52ch}
.duo .big{font-family:var(--serif);font-size:23px;line-height:1.35;font-weight:500}
.portrait{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.portrait img{width:170px;height:170px;object-fit:cover;border:3px solid var(--line);
filter:grayscale(1) contrast(1.1);transition:filter .25s ease}
.portrait img:hover{filter:grayscale(0)}
.portrait .cap{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center}
.socials{list-style:none;font-family:var(--mono);font-size:14px}
.socials li{padding:9px 0;border-bottom:1px dashed #c9c3b4;display:flex;justify-content:space-between;gap:10px}
.socials li:last-child{border:none}
.socials a{text-decoration:none}
.socials a:hover{color:var(--red)}
.socials .at{color:var(--dim);font-size:12.5px}
footer{padding:30px 0 70px;font-family:var(--mono);font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--red);text-decoration:none}
footer a:hover{text-decoration:underline}
</style>
</head>
<body>
<div class="wrap">
<div class="mast">
<div class="logo">TUNAPRO<span>.</span>XYZ — DİJİTAL BAHÇE FİHRİSTİ</div>
<nav>
<a href="#robotik">I·robotik</a>
<a href="#ai">II·ai</a>
<a href="#sera">III·sera</a>
<a href="#bahcivan">bahçıvan</a>
</nav>
<div class="date">cilt 1 · yaz 2026 · kendi sunucusunda basılmıştır</div>
</div>
<section class="hero">
<div>
<h1>Yarım işler,<br><em>tam niyetler</em>.</h1>
<p>Burası Tuna Gül'ün dijital bahçesinin fihristi: robotlar, AI agent'ları ve
self-host edilen her şeyin kayıt defteri. Hiçbir madde "bitti" diye kapanmaz;
bahçede öyle bir mevsim yok. Bir satıra tıkla, kökünü gör.</p>
<div class="rules">
<span><b>🌳</b> köklendi</span>
<span><b>🌿</b> büyüyor</span>
<span><b>🌱</b> fide</span>
<span><b>🍄</b> kendiliğinden bitti</span>
</div>
</div>
<figure>
<!-- editoryal çizim: saksıda filizlenen devre -->
<svg viewBox="0 0 320 260" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="saksıdan filizlenen devre çizimi">
<g stroke="#141412" stroke-width="3" stroke-linecap="round">
<path d="M100 200 h120 l-14 44 h-92 z"/>
<path d="M160 200 v-70"/>
<path d="M160 156 c-34 -6 -50 -30 -52 -56 26 2 48 18 52 44"/>
<path d="M160 138 c34 -8 46 -32 46 -58 -28 4 -46 22 -46 46"/>
</g>
<g stroke="#d63c2f" stroke-width="2.5" stroke-linecap="round">
<path d="M160 130 v-60 h44"/>
<path d="M160 96 h-52 v-34"/>
<circle cx="204" cy="70" r="6"/>
<circle cx="108" cy="62" r="6"/>
<path d="M160 70 v-40"/>
<rect x="152" y="14" width="16" height="16"/>
</g>
<g fill="#141412" font-family="ui-monospace,Menlo,monospace" font-size="10">
<text x="216" y="74">sinyal</text>
<text x="60" y="56">kök</text>
</g>
</svg>
<figcaption>şek. 1 — bahçenin çalışma prensibi</figcaption>
</figure>
</section>
</div>
<div class="ticker" aria-hidden="true">
<div class="tape">
<span>bulut yok, başkasının bilgisayarı var</span><span>bir kit, sonsuz robot</span><span>agent'lar tmux'ta yaşar</span><span>ölçmediğini yönetemezsin</span><span>her yerde @tunapro1234</span>
<span>bulut yok, başkasının bilgisayarı var</span><span>bir kit, sonsuz robot</span><span>agent'lar tmux'ta yaşar</span><span>ölçmediğini yönetemezsin</span><span>her yerde @tunapro1234</span>
</div>
</div>
<div class="wrap">
<!-- ============ BÖLÜM I: ROBOTİK ============ -->
<section class="chapter" id="robotik">
<div>
<div class="roman">Bölüm I</div>
<h2>Robotik</h2>
<div class="desc">Her şeyin başladığı yer: FRC sahası, lehim dumanı, son gece sürücü kodu.
Buradaki maddeler ellerimle tuttuğum şeyler.</div>
</div>
<!-- çizim: diferansiyel sürüşlü robot -->
<svg viewBox="0 0 220 110" fill="none" aria-hidden="true">
<g stroke="#141412" stroke-width="3" stroke-linecap="round">
<rect x="40" y="34" width="120" height="42" rx="6"/>
<circle cx="66" cy="86" r="16"/><circle cx="134" cy="86" r="16"/>
<path d="M160 50 l30 -22"/><circle cx="194" cy="24" r="5" stroke="#d63c2f"/>
</g>
<g stroke="#d63c2f" stroke-width="2.5"><path d="M56 34 v-14 h24"/><circle cx="86" cy="20" r="4"/></g>
</svg>
</section>
<details class="row" open>
<summary><span class="no">I.1</span><span class="name">Probot Studio</span><span class="stage">🌳</span><span class="tag">c++ · arduino · mit · 9★</span></summary>
<div class="inner"><div class="sp"></div><div>
<p><em>«Bir kit, sonsuz robot.»</em> Arduino tabanlı robot yarışmaları için kütüphane ve kit
ekosistemi. Çekirdeği açık kaynak: <code>probot-core</code>, sahada denenmiş embedded control
middleware. FRC yıllarının toprağında yetişti (bkz. I.2) — yarış robotlarından yarışma kitlerine.</p>
<div class="go">
<a class="hot" href="https://probotstudio.com">probotstudio.com ↗</a>
<a href="https://github.com/probot-studio/probot-core">github/probot-core ↗</a>
</div>
</div>
<figure class="fig">
<a href="https://github.com/probot-studio/probot-core"><img src="https://opengraph.githubassets.com/garden/probot-studio/probot-core" alt="probot-core repo kartı" loading="lazy"></a>
<div class="cap">fig. I.1 — probot-core; renk için imleci tut</div>
</figure></div>
</details>
<details class="row">
<summary><span class="no">I.2</span><span class="name">FRC 7839 &amp; 9029</span><span class="stage">🌳</span><span class="tag">kökler · team-nf</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>Lisede FRC 7839'daydım. Lise bitince Mali'yle NF'yi kurduk, FRC 9029. 2023'te NFR
Products'ı kurduk, şirket devam ediyor. Geçen sene Zağanos'taydım, 2025 ve 2026'da da
FIRST Championship'teydik. Altı haftada robot bitiyor çünkü bitmek zorunda, o refleks
hâlâ bende.</p>
<div class="go"><a href="https://github.com/team-nf">github/team-nf ↗</a></div>
</div>
<figure class="fig">
<a href="https://github.com/team-nf"><img src="https://avatars.githubusercontent.com/team-nf?s=400" alt="team-nf logosu" loading="lazy"></a>
<div class="cap">fig. I.2 — team-nf</div>
</figure></div>
</details>
<!-- ============ BÖLÜM II: AI & AGENT'LAR ============ -->
<section class="chapter" id="ai">
<div>
<div class="roman">Bölüm II</div>
<h2>AI &amp; Agent'lar</h2>
<div class="desc">Bahçenin en hızlı büyüyen tarhı: agent filoları, orkestrasyon,
ölçüm ve toplum simülasyonları. Çoğu tmux'ta yaşar.</div>
</div>
<!-- çizim: düğüm grafı -->
<svg viewBox="0 0 220 110" fill="none" aria-hidden="true">
<g stroke="#141412" stroke-width="2.5">
<path d="M40 80 L110 30 L180 76 M110 30 V90 M40 80 L110 90 L180 76"/>
</g>
<g fill="#f4f1ea" stroke="#d63c2f" stroke-width="3">
<circle cx="40" cy="80" r="10"/><circle cx="110" cy="30" r="12"/>
<circle cx="180" cy="76" r="10"/><circle cx="110" cy="90" r="8"/>
</g>
</svg>
</section>
<details class="row" open>
<summary><span class="no">II.1</span><span class="name">blueprint (bp)</span><span class="stage">🌳</span><span class="tag">go · tmux · orkestrasyon</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>tmux içinde bir AI agent <em>filosunu</em> yöneten orkestrasyon aracı. Paketler
<code>BLUEPRINT.yaml</code> ile tasarlanır; snapshot tabanlı versiyonlama, symlink'le
sabitlenmiş bağımlılıklar. Bu bölümün en yaşlı ağacı — fidelerin çoğu onun gölgesinde çıktı.</p>
<div class="go">
<a class="hot" href="https://bp.tunapro.xyz">bp.tunapro.xyz ↗</a>
<a href="https://github.com/tunapro1234/blueprint">github ↗</a>
</div>
</div>
<figure class="fig">
<a href="https://github.com/tunapro1234/blueprint"><img src="https://opengraph.githubassets.com/garden/tunapro1234/blueprint" alt="blueprint repo kartı" loading="lazy"></a>
<div class="cap">fig. II.1 — blueprint</div>
</figure></div>
</details>
<details class="row">
<summary><span class="no">II.2</span><span class="name">outpost</span><span class="stage">🌿</span><span class="tag">js · graf · son push: bugün</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>Graf-merkezli outreach aracı: insanlar, bağlantılar ve konuşmalar birer düğüm.
Canlı hali kilitli sera 🔒 — içinde gerçek insanlar var. Şu sıralar en sık sulanan madde.</p>
<div class="go">
<a href="https://github.com/tunapro1234/outpost">github ↗</a>
<a href="https://outpost.tunapro.xyz">outpost.tunapro.xyz 🔒</a>
</div>
</div>
<figure class="fig">
<a href="https://github.com/tunapro1234/outpost"><img src="https://opengraph.githubassets.com/garden/tunapro1234/outpost" alt="outpost repo kartı" loading="lazy"></a>
<div class="cap">fig. II.2 — outpost</div>
</figure></div>
</details>
<details class="row">
<summary><span class="no">II.3</span><span class="name">replicant &amp; metron</span><span class="stage">🌱</span><span class="tag">python · ikiz fideler</span></summary>
<div class="inner"><div class="sp"></div><div>
<p><strong>replicant:</strong> agent'ların kendini ve iş arkadaşlarını kopyalayıp çoğaltması
üzerine deneyler. Adı tesadüf değil; ne olacağını ben de bilmiyorum — fidelerin güzelliği bu.</p>
<p><strong>metron:</strong> ölçmediğin şeyi yönetemezsin. Agent'lar ve sistemler için
metrik/ölçüm katmanı. replicant koşar, metron sayar.</p>
<div class="go">
<a href="https://github.com/tunapro1234/replicant">github/replicant ↗</a>
<a href="https://github.com/tunapro1234/metron">github/metron ↗</a>
</div>
</div>
<figure class="fig">
<a href="https://github.com/tunapro1234/replicant"><img src="https://opengraph.githubassets.com/garden/tunapro1234/replicant" alt="replicant repo kartı" loading="lazy"></a>
<div class="cap">fig. II.3 — replicant</div>
</figure></div>
</details>
<details class="row">
<summary><span class="no">II.4</span><span class="name">LLM toplum simülasyonları</span><span class="stage">🌱</span><span class="tag">araştırma defteri</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>AI agent'larla toplum kurma merakı: <a href="https://github.com/tunapro1234/hallucinating-splines">hallucinating-splines</a>'ta
agent'lar headless SimCity'de şehir kuruyor; <a href="https://github.com/tunapro1234/edsl-test">EDSL</a> ile AI
destekli anket/deney tasarımını kurcalıyorum. Okuma listesi de fihristte:
<a href="https://github.com/tunapro1234/awesome-llm-social-simulation">awesome-llm-social-simulation</a>.</p>
<div class="go"><a href="https://github.com/tunapro1234/awesome-llm-social-simulation">okuma listesi ↗</a></div>
</div>
<figure class="fig">
<a href="https://github.com/tunapro1234/hallucinating-splines"><img src="https://opengraph.githubassets.com/garden/tunapro1234/hallucinating-splines" alt="hallucinating-splines repo kartı" loading="lazy"></a>
<div class="cap">fig. II.4 — agent'lar şehir kurar</div>
</figure></div>
</details>
<!-- ============ BÖLÜM III: SERA ============ -->
<section class="chapter" id="sera">
<div>
<div class="roman">Bölüm III</div>
<h2>Sera &amp; tuhaflıklar</h2>
<div class="desc">Kategoriye sığmayanlar: kendi demirinde dönen altyapı, küçük saplantılar
ve gölgede kendiliğinden biten türler.</div>
</div>
<!-- çizim: sera / sunucu rafı -->
<svg viewBox="0 0 220 110" fill="none" aria-hidden="true">
<g stroke="#141412" stroke-width="3" stroke-linecap="round">
<path d="M40 96 V46 L86 20 L132 46 V96 z"/>
<path d="M40 46 H132"/>
<rect x="150" y="30" width="40" height="66" rx="4"/>
</g>
<g stroke="#d63c2f" stroke-width="2.5">
<path d="M158 44 h24 M158 58 h24 M158 72 h24"/>
<circle cx="86" cy="70" r="10"/><path d="M86 80 v16"/>
</g>
</svg>
</section>
<details class="row" open>
<summary><span class="no">III.1</span><span class="name">homelab</span><span class="stage">🌿</span><span class="tag">*.tunapro.xyz · 7/24</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>Self-host etmediğim şey kalmasın: kod <a href="https://git.tunapro.xyz">Gitea</a>'da, medya kendi
video sunucumda, Minecraft'ın paneli <code>mcdash</code>'te, mail bile burada. Bu fihrist de
dahil — okuduğun sayfa benim demirimde dönüyor.</p>
<div class="go">
<a href="https://git.tunapro.xyz">git ↗</a>
<a href="https://video.tunapro.xyz">video ↗</a>
<a href="https://mcdash.tunapro.xyz">mcdash ↗</a>
</div>
</div>
<figure class="fig">
<a href="https://git.tunapro.xyz"><img src="https://git.tunapro.xyz/assets/img/logo.svg" alt="git.tunapro.xyz — Gitea" loading="lazy" style="padding:26px;background:#fff"></a>
<div class="cap">fig. III.1 — kendi gitea'm</div>
</figure></div>
</details>
<details class="row">
<summary><span class="no">III.2</span><span class="name">elevator_optimization</span><span class="stage">🌱</span><span class="tag">rust · 1★ · saplantı</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>Asansör çizelgelemesi ne kadar optimize edilebilir? Rust'la yazılmış küçük bir saplantı.
Beklerken düşünülen her şey proje olabilir.</p>
<div class="go"><a href="https://github.com/tunapro1234/elevator_optimization">github ↗</a></div>
</div>
<figure class="fig">
<a href="https://github.com/tunapro1234/elevator_optimization"><img src="https://opengraph.githubassets.com/garden/tunapro1234/elevator_optimization" alt="elevator_optimization repo kartı" loading="lazy"></a>
<div class="cap">fig. III.2 — bekleme süresi ∇</div>
</figure></div>
</details>
<details class="row">
<summary><span class="no">III.3</span><span class="name">Can neden iş bitirici değil?</span><span class="stage">🍄</span><span class="tag">hakemli değil, kesin doğru</span></summary>
<div class="inner"><div class="sp"></div><div>
<p>Bahçenin gölgesinde kendiliğinden biten tür: titiz metodolojiyle(!) hazırlanmış bir
araştırma raporu. Bilim böyle olmalı — kişisel, kindar ve grafikli.</p>
<div class="go"><a class="hot" href="https://canbitirici.tunapro.xyz">raporu oku ↗</a></div>
</div></div>
</details>
<!-- ============ BAHÇIVAN ============ -->
<div class="duo" id="bahcivan">
<div class="portrait">
<img src="https://github.com/tunapro1234.png?size=400" alt="Tuna Gül" loading="lazy">
<div class="cap">bahçıvan, doğal ortamında<br>renk için imleci tut</div>
</div>
<div>
<h3>Bahçıvan</h3>
<p class="big">Tuna Gül — mühendislik öğrencisi. Robotik, AI agent'lar, sistem mimarisi.</p>
<p style="margin-top:12px">Buradaki notların çoğu yarım, bilerek öyle. Sonra gelirsen büyümüş olur.</p>
</div>
<div>
<h3>Patikalar</h3>
<ul class="socials">
<li><a href="https://github.com/tunapro1234">github</a><span class="at">@tunapro1234</span></li>
<li><a href="https://git.tunapro.xyz">kendi gitea'm</a><span class="at">git.tunapro.xyz</span></li>
<li><a href="https://probotstudio.com">probot studio</a><span class="at">probotstudio.com</span></li>
<li><a href="https://stackoverflow.com/users/tunapro1234">neredeyse her yer</a><span class="at">@tunapro1234</span></li>
</ul>
</div>
</div>
<footer>
<span>© 2026 tuna gül — bahçe kendi sunucusunda büyür</span>
<span>yıllıktaki QR'dan mı geldin? <a href="/yillik/">senin için ayrı sayfa var →</a></span>
</footer>
</div>
</body>
</html>