KabaLang örnekleri: konsol, masaüstü ve web için dokuz proje

Konsol: fraktal (paralel şeritli 24-bit Mandelbrot/Julia + yakınlaşma), sudoku (geri izlemeli, canlı animasyon), fatura (JSON → terminal tablosu, PDF ve Excel). Masaüstü: hesap makinesi (işlem önceliği, canlı bağlama), odak (Pomodoro), parola atölyesi (entropi ölçer, SHA-256). Web: pano (Kanban REST API + SQLite), kisalt (302 yönlendirme, SVG istatistik), anket (adres başına tek oy, sunucuda çizilen grafik). Hepsi `kabalang calistir` ile derlenip çalışır; web uygulamaları yalnız 127.0.0.1'i dinler, SQL parametre bağlamalı, HTML çıktısı kaçırılır. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
2026-10-02 22:31:40 +03:00
commit ed201188fb
39 changed files with 2650 additions and 0 deletions
@@ -0,0 +1,35 @@
+# Anket — canlı oylama
+
+![Anket](../../medya/anket.png)
+
+Tek soruluk canlı anket. Oylar SQLite'ta tutulur, aynı adresten ikinci oy **veritabanı
+kısıtıyla** engellenir, sonuç grafiği her istekte sunucuda KabaLang ile **SVG** olarak çizilir.
+
+```bash
+kabalang calistir web/anket/anket.kbl
+# → http://127.0.0.1:8473
+```
+
+## Neyi gösteriyor
+
+| Konu | Nerede |
+|---|---|
+| `yapi Secenek` + tipli alanlar, yapı listesi döndüren fonksiyon (`-> liste<Secenek>`) | `secenekler` |
+| Gövdesiz form: oy kimliği yolda (`POST /oy/{id}`) | `oy_ver` |
+| POST → **303** → GET deseni (sayfa yenilenince oy tekrar gitmez) | `oy_ver` |
+| Aynı grafiği iki genişlikte üretmek (masaüstü / telefon) | `grafik_svg(liste, isaretli, gen)` |
+| Doğru içerik tipiyle tek başına SVG: `.tip("image/svg+xml")` | `/sonuc.svg` |
+| JSON'u SQLite'ın `json_object` işlevine kurdurmak | `/api/sonuclar` |
+
+![Oy ekranı](../../medya/anket-oy.png)
+
+## Güvenlik
+
+- **SQL enjeksiyonu:** seçenek kimliği ve istemci adresi sorguya `?` ile bağlanır.
+  `/oy/1 OR 1=1` var olmayan bir seçenektir → 404.
+- **Çift oy:** `oy.adres` sütunu `UNIQUE`; denetim ile kayıt tek iş parçacıklı sunucuda sırayla
+  koşar, yarış koşulu yoktur.
+- Sunucu yalnız `127.0.0.1`'i dinler. (Yerelde her istemci aynı adres olduğu için tarayıcı
+  bir kez oy verebilir — anketi sıfırlamak için `anket.db`'yi silin.)
+
+Veritabanı yolu `ANKET_DB` ile değiştirilebilir (varsayılan `anket.db`).
@@ -0,0 +1,197 @@
+# ╔══════════════════════════════════════════════════════════════════╗
+# ║  ANKET — KabaLang ile canlı anket                                ║
+# ║                                                                  ║
+# ║  · Oy: POST /oy/{id}   — gövdesiz form, kimlik yolda             ║
+# ║  · Aynı adresten ikinci oy veritabanı kısıtıyla engellenir       ║
+# ║  · Sonuç grafiği sunucuda KabaLang ile SVG olarak çizilir        ║
+# ║  · /sonuc.svg tek başına gömülebilir · /api/sonuclar JSON        ║
+# ╚══════════════════════════════════════════════════════════════════╝
+#
+# Çalıştır:  kabalang calistir web/anket/anket.kbl
+# Aç:        http://127.0.0.1:8473
+
+kullan kaba.web
+kullan kaba.json
+kullan kaba.veritabani
+kullan kaba.sistem
+
+SORU = "Bir sonraki KabaLang örneği ne olsun?"
+PORT = 8473
+
+db = cevre.al("ANKET_DB")
+eger db == "":
+    db = "anket.db"
+
+yapi Secenek:
+    kimlik: sayi = 0
+    ad: metin = ""
+    renk: metin = ""
+    oy: sayi = 0
+
+# ── Veritabanı ──────────────────────────────────────────────────────
+
+fonksiyon hazirla(db):
+    # `adres UNIQUE`: aynı istemciden ikinci oy veritabanı düzeyinde reddedilir.
+    veritabani.sqlite(db, "CREATE TABLE IF NOT EXISTS secenek(id INTEGER PRIMARY KEY, ad TEXT, renk TEXT); CREATE TABLE IF NOT EXISTS oy(secenek INTEGER, adres TEXT UNIQUE, zaman TEXT);")
+    eger veritabani.sqlite(db, "SELECT count(*) FROM secenek") != "0":
+        don 0
+    adlar = ["2B oyun", "Yapay zekâ asistanı", "Veri panosu", "Sohbet uygulaması", "Sistem servisi"]
+    renkler = ["#377ef4", "#22d3ee", "#a78bfa", "#34d399", "#fbbf24"]
+    ornek_oy = [18, 27, 12, 21, 7]
+    dongu i icinde 0..adlar.uzunluk() - 1:
+        veritabani.sqlite(db, "INSERT INTO secenek(id, ad, renk) VALUES (?, ?, ?)", [metin(i + 1), adlar[i], renkler[i]])
+        # Tanıtım için önceden verilmiş oylar (adres alanı uydurma ve benzersiz).
+        dongu n icinde 1..ornek_oy[i]:
+            veritabani.sqlite(db, "INSERT INTO oy(secenek, adres, zaman) VALUES (?, ?, datetime('now', 'localtime'))", [metin(i + 1), "ornek-" + metin(i) + "-" + metin(n)])
+    don 1
+
+fonksiyon secenekler(db) -> liste<Secenek>:
+    sonuc = [Secenek()]
+    sonuc.sil(0)
+    ham = veritabani.sqlite(db, "SELECT s.id, s.renk, (SELECT count(*) FROM oy WHERE oy.secenek = s.id), s.ad FROM secenek s ORDER BY s.id")
+    dongu satir icinde ham.bol("\n"):
+        p = satir.bol("|")
+        sonuc.ekle(Secenek(sayi(p[0]), p.dilim(3, p.uzunluk() - 3).birlestir("|"), p[1], sayi(p[2])))
+    don sonuc
+
+fonksiyon toplam_oy(liste):
+    t = 0
+    dongu s icinde liste:
+        t = t + s.oy
+    don t
+
+fonksiyon verdigi_oy(db, adres):
+    don veritabani.sqlite(db, "SELECT secenek FROM oy WHERE adres = ?", [adres])
+
+# ── SVG grafik: tamamen KabaLang ile ────────────────────────────────
+
+# `gen`: çizim genişliği. Sayfa aynı grafiği iki genişlikte üretir
+# (masaüstü / telefon) ki yazılar küçülmesin.
+fonksiyon grafik_svg(liste, isaretli, gen):
+    toplam = toplam_oy(liste)
+    eger toplam == 0:
+        toplam = 1
+    # Çubuk boyu en çok oy alana göre ölçeklenir: lider tam dolar.
+    en_cok = 1
+    dongu sec icinde liste:
+        eger sec.oy > en_cok:
+            en_cok = sec.oy
+    satir_yuk = 64
+    yuk = liste.uzunluk() * satir_yuk + 10
+    s = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 " + metin(gen) + " " + metin(yuk) + "' font-family='Inter, system-ui, sans-serif'>"
+    i = 0
+    dongu sec icinde liste:
+        y = i * satir_yuk + 8
+        yuzde = sec.oy * 100 // toplam
+        cubuk = (gen - 120) * sec.oy // en_cok
+        eger cubuk < 6:
+            cubuk = 6
+        kalinlik = "500"
+        eger metin(sec.kimlik) == isaretli:
+            kalinlik = "800"
+        # Ad metni kullanıcıdan gelmiyor ama yine de kaçırılır: alışkanlık.
+        s = s + "<text x='0' y='" + metin(y + 14) + "' fill='#e6ebf5' font-size='15' font-weight='" + kalinlik + "'>" + web.kacir(sec.ad) + "</text>"
+        s = s + "<rect x='0' y='" + metin(y + 24) + "' width='" + metin(gen - 120) + "' height='22' rx='11' fill='#182033'/>"
+        s = s + "<rect x='0' y='" + metin(y + 24) + "' width='" + metin(cubuk) + "' height='22' rx='11' fill='" + sec.renk + "'/>"
+        s = s + "<text x='" + metin(gen) + "' y='" + metin(y + 41) + "' fill='#e6ebf5' font-size='17' font-weight='700' text-anchor='end'>%" + metin(yuzde) + "</text>"
+        s = s + "<text x='" + metin(gen - 52) + "' y='" + metin(y + 41) + "' fill='#8a94ab' font-size='13' text-anchor='end'>" + metin(sec.oy) + "</text>"
+        i = i + 1
+    don s + "</svg>"
+
+# ── Sayfa iskeleti ──────────────────────────────────────────────────
+
+STIL = """
+:root { --zemin:#0a0d15; --yuzey:#121826; --yuzey2:#182033; --cizgi:#232c42; --metin:#e6ebf5;
+        --soluk:#8a94ab; --mavi:#377ef4; --cam:#22d3ee; }
+* { box-sizing: border-box; }
+body { margin:0; min-height:100vh; color:var(--metin); font:15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+       background: radial-gradient(800px 460px at 20% -10%, #377ef430, transparent 60%),
+                   radial-gradient(700px 420px at 90% 110%, #a78bfa22, transparent 60%), var(--zemin);
+       display:grid; place-items:center; padding: 32px 16px; }
+.kart { width: 100%; max-width: 820px; background: #121826e6; border:1px solid var(--cizgi); border-radius: 24px;
+        padding: 34px 38px; box-shadow: 0 30px 80px #0009; }
+.ust { display:flex; align-items:center; gap:10px; color: var(--soluk); font-size: 13px; margin-bottom: 18px; }
+.canli { display:inline-flex; align-items:center; gap:7px; color:#34d399; margin-left:auto; }
+.canli::before { content:''; width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 4px #34d39928; }
+h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 24px; }
+.secenekler { display:grid; gap: 10px; }
+.secenekler form { margin:0; }
+.secenekler button { width:100%; display:flex; align-items:center; gap:14px; text-align:left; font:inherit; font-size:16px;
+        color: var(--metin); background: var(--yuzey2); border:1px solid var(--cizgi); border-radius: 14px;
+        padding: 15px 18px; cursor:pointer; transition: border-color .15s, transform .15s; }
+.secenekler button:hover { border-color: var(--mavi); transform: translateX(4px); }
+.top { width: 14px; height: 14px; border-radius: 50%; flex: none; }
+.alt { display:flex; justify-content: space-between; color: var(--soluk); font-size: 13px; margin-top: 22px; flex-wrap: wrap; gap: 8px; }
+.alt a { color: var(--cam); text-decoration:none; }
+.bilgi { background: #377ef414; border:1px solid #377ef444; color:#bcd3ff; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; font-size: 14px; }
+svg { width:100%; height:auto; display:block; }
+.dar { display: none; }
+@media (max-width: 600px) { .kart { padding: 24px 18px; border-radius: 20px; } .genis { display: none; } .dar { display: block; } }
+"""
+
+fonksiyon sayfa(govde, yenile):
+    ek = ""
+    eger yenile:
+        # "Canlı": sonuç sayfası 5 saniyede bir kendini tazeler.
+        ek = "<meta http-equiv='refresh' content='5'>"
+    don "<!doctype html><html lang='tr'><head><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'>" + ek + "<title>Anket · KabaLang</title><style>" + STIL + "</style></head><body><main class='kart'>" + govde + "</main></body></html>"
+
+fonksiyon ust_bant(toplam):
+    don "<div class='ust'><b style='color:#e6ebf5'>KabaLang Anket</b> · " + metin(toplam) + " oy<span class='canli'>canlı</span></div>"
+
+# ── Uçlar ───────────────────────────────────────────────────────────
+
+hazirla(db)
+
+fonksiyon sonuc_sayfasi(istek):
+    liste = secenekler(db)
+    benim = verdigi_oy(db, istek.adres())
+    g = ust_bant(toplam_oy(liste)) + "<h1>" + web.kacir(SORU) + "</h1>"
+    eger istek.sorgu("zaten") == "1":
+        g = g + "<div class='bilgi'>Bu adresten zaten oy verilmiş — ikinci oy sayılmadı.</div>"
+    degilse eger benim != "":
+        g = g + "<div class='bilgi'>✓ Oyunuz kaydedildi. Sonuçlar 5 saniyede bir tazelenir.</div>"
+    g = g + "<div class='genis'>" + grafik_svg(liste, benim, 760) + "</div>"
+    g = g + "<div class='dar'>" + grafik_svg(liste, benim, 380) + "</div>"
+    g = g + "<div class='alt'><span>Grafik sunucuda KabaLang ile çizildi · <a href='/sonuc.svg'>sonuc.svg</a> · <a href='/api/sonuclar'>JSON</a></span><a href='/'>← ankete dön</a></div>"
+    don web.html(sayfa(g, dogru))
+
+fonksiyon ana_sayfa(istek):
+    # Daha önce oy verdiyse doğrudan sonuçları göster.
+    eger verdigi_oy(db, istek.adres()) != "":
+        don sonuc_sayfasi(istek)
+    liste = secenekler(db)
+    g = ust_bant(toplam_oy(liste)) + "<h1>" + web.kacir(SORU) + "</h1><div class='secenekler'>"
+    dongu s icinde liste:
+        g = g + "<form method='post' action='/oy/" + metin(s.kimlik) + "'><button><span class='top' style='background:" + s.renk + "'></span>" + web.kacir(s.ad) + "</button></form>"
+    g = g + "</div><div class='alt'><span>Her adres bir kez oy verebilir.</span><a href='/sonuc'>sonuçları gör →</a></div>"
+    don web.html(sayfa(g, yanlis))
+
+fonksiyon oy_ver(istek):
+    kimlik = istek.parametre("id")
+    # Kimlik gerçekten var olan bir seçenek mi? (parametre bağlamalı)
+    eger veritabani.sqlite(db, "SELECT count(*) FROM secenek WHERE id = ?", [kimlik]) != "1":
+        don web.html(sayfa("<h1>Böyle bir seçenek yok</h1><div class='alt'><a href='/'>← ankete dön</a></div>", yanlis), 404)
+    adres = istek.adres()
+    eger verdigi_oy(db, adres) != "":
+        don web.yanit("", 303).baslik("Location", "/sonuc?zaten=1")
+    veritabani.sqlite(db, "INSERT OR IGNORE INTO oy(secenek, adres, zaman) VALUES (?, ?, datetime('now', 'localtime'))", [kimlik, adres])
+    # POST → 303 → GET: sayfa yenilenince oy ikinci kez gönderilmez.
+    don web.yanit("", 303).baslik("Location", "/sonuc")
+
+fonksiyon sonuc_svg(istek):
+    don web.yanit(grafik_svg(secenekler(db), verdigi_oy(db, istek.adres()), 760)).tip("image/svg+xml; charset=utf-8")
+
+fonksiyon sonuc_json(_istek):
+    don web.json(veritabani.sqlite(db, "SELECT json_object('soru', ?, 'toplam', (SELECT count(*) FROM oy), 'secenekler', (SELECT json_group_array(json_object('id', s.id, 'ad', s.ad, 'oy', (SELECT count(*) FROM oy WHERE oy.secenek = s.id))) FROM secenek s))", [SORU]))
+
+# Tek iş parçacığı: "oy verdi mi?" denetimi ile kayıt arasında yarış olmasın.
+sunucu = web.sunucu(PORT, "127.0.0.1", 1)
+sunucu.al("/", ana_sayfa)
+sunucu.al("/sonuc", sonuc_sayfasi)
+sunucu.al("/sonuc.svg", sonuc_svg)
+sunucu.al("/api/sonuclar", sonuc_json)
+sunucu.gonder("/oy/{id}", oy_ver)
+
+yazdir("🗳  Anket hazır — http://127.0.0.1:" + metin(PORT))
+sunucu.basla()
@@ -0,0 +1,38 @@
+# Kısalt — bağlantı kısaltıcı
+
+![Kısalt](../../medya/kisalt.png)
+
+Uzun bir adres verin, KabaLang ona 6 harflik bir kod versin; `/k/{kod}` gerçek bir
+**HTTP 302** ile hedefe yönlendirir ve her tıklamayı sayar. Sayfaların tamamı sunucuda,
+KabaLang metin işlemleriyle üretilir — şablon motoru yok.
+
+```bash
+kabalang calistir web/kisalt/kisalt.kbl
+# → http://127.0.0.1:8472
+```
+
+## Neyi gösteriyor
+
+| Konu | Nerede |
+|---|---|
+| Rastgele kısa kod + çakışma döngüsü (`iken ... != "0"`) | `yeni_kod`, `kaydet` |
+| Gerçek yönlendirme: `web.yanit("", 302).baslik("Location", adres)` | `yonlendir` |
+| Sunucuda çizilen **SVG çubuk grafik** (son 7 gün) | `yedi_gun_svg` |
+| Üç tırnaklı metin ile tek yerde tutulan stil | `STIL = """ ... """` |
+| Özel 404 sayfası: `sunucu.bulunamadi(...)` | sonda |
+
+![İstatistik](../../medya/kisalt-istatistik.png)
+
+## Güvenlik
+
+- **SQL enjeksiyonu:** bütün sorgular parametre bağlamalıdır (`?`); kullanıcı verisi asla
+  sorgu metnine eklenmez.
+- **Açık yönlendirme / betik bağlantısı:** yalnız `http://` ve `https://` adresleri kabul edilir;
+  `javascript:` ya da `file:` ile başlayan bir "bağlantı" 422 ile reddedilir.
+- **XSS:** hedef adres sayfaya yalnızca **metin** olarak, `web.kacir` ile kaçırılarak basılır;
+  `href` içine giren tek şey bizim ürettiğimiz, yalnız harf-rakamdan oluşan kısa koddur.
+
+Veritabanı yolu `KISALT_DB` ile değiştirilebilir (varsayılan `kisalt.db`). İlk açılışta
+tanıtım için birkaç bağlantı ve geçmiş tıklama oluşturulur.
+
+![Mobil](../../medya/kisalt-mobil.png)
@@ -0,0 +1,285 @@
+# ╔══════════════════════════════════════════════════════════════════╗
+# ║  KISALT — KabaLang ile bağlantı kısaltıcı                        ║
+# ║                                                                  ║
+# ║  · Sayfalar sunucuda KabaLang ile üretilir (şablon motoru yok)   ║
+# ║  · /k/{kod}  → gerçek HTTP 302 yönlendirmesi + tıklama kaydı     ║
+# ║  · İstatistik sayfasındaki grafik: sunucuda üretilen SVG          ║
+# ╚══════════════════════════════════════════════════════════════════╝
+#
+# Çalıştır:  kabalang calistir web/kisalt/kisalt.kbl
+# Aç:        http://127.0.0.1:8472
+
+kullan kaba.web
+kullan kaba.json
+kullan kaba.veritabani
+kullan kaba.sistem
+
+# Karıştırılabilecek harfler (0/o, 1/l/i) bilerek yok.
+ALFABE = "abcdefghjkmnpqrstuvwxyz23456789"
+KOD_UZUNLUGU = 6
+PORT = 8472
+
+db = cevre.al("KISALT_DB")
+eger db == "":
+    db = "kisalt.db"
+
+# ── Stil: tüm sayfalar aynı görünümü paylaşır ───────────────────────
+
+STIL = """
+:root { --zemin:#0a0d15; --yuzey:#121826; --yuzey2:#182033; --cizgi:#232c42;
+        --metin:#e6ebf5; --soluk:#8a94ab; --mavi:#377ef4; --cam:#22d3ee; --yesil:#34d399; }
+* { box-sizing: border-box; }
+body { margin:0; min-height:100vh; color:var(--metin);
+       font:15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+       background: radial-gradient(900px 480px at 50% -12%, #377ef433, transparent 65%),
+                   radial-gradient(600px 360px at 95% 10%, #22d3ee18, transparent 60%), var(--zemin); }
+a { color: var(--cam); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.kap { max-width: 980px; margin: 0 auto; padding: 0 24px 56px; }
+nav { display:flex; align-items:center; gap:12px; padding: 22px 0; }
+.logo { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-weight:800;
+        background:linear-gradient(135deg,var(--mavi),var(--cam)); box-shadow:0 6px 22px #377ef455; }
+nav b { font-size: 18px; letter-spacing: -.01em; }
+nav span { margin-left:auto; color:var(--soluk); font-size:13px; }
+.kahraman { text-align:center; padding: 46px 0 30px; }
+.kahraman h1 { font-size: clamp(30px, 5vw, 48px); line-height:1.1; margin:0 0 12px; letter-spacing:-.03em; }
+.kahraman h1 em { font-style: normal; background: linear-gradient(90deg, var(--mavi), var(--cam));
+                  -webkit-background-clip: text; background-clip: text; color: transparent; }
+.kahraman p { color: var(--soluk); margin: 0 0 28px; }
+form { display:flex; gap:10px; max-width: 720px; margin: 0 auto; background: var(--yuzey);
+       border:1px solid var(--cizgi); border-radius: 16px; padding: 8px; box-shadow: 0 20px 60px #0007; }
+input { flex:1; min-width:0; font:inherit; color:var(--metin); background:transparent; border:0; padding: 12px 14px; outline:none; }
+button { font:inherit; font-weight:600; color:#fff; border:0; border-radius: 11px; padding: 12px 22px; cursor:pointer;
+         background: linear-gradient(135deg, var(--mavi), #2563eb); box-shadow: 0 6px 18px #377ef450; }
+#sonuc { max-width:720px; margin: 14px auto 0; min-height: 24px; font-size: 14px; color: var(--soluk); }
+#sonuc .kisa { color: var(--yesil); font-weight: 600; font-family: ui-monospace, monospace; font-size: 15px; }
+.kutular { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 34px 0 18px; }
+.kutu { background: var(--yuzey); border:1px solid var(--cizgi); border-radius: 16px; padding: 16px 18px; }
+.kutu small { color: var(--soluk); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
+.kutu div { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
+table { width:100%; border-collapse: collapse; background: var(--yuzey); border:1px solid var(--cizgi);
+        border-radius: 16px; overflow:hidden; }
+th, td { text-align:left; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); font-size: 14px; }
+th { color: var(--soluk); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; background: var(--yuzey2); }
+tr:last-child td { border-bottom: 0; }
+td.hedef { color: var(--soluk); max-width: 360px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
+td.kod { font-family: ui-monospace, monospace; }
+.sayac { font-weight: 700; color: var(--metin); }
+.grafik { background: var(--yuzey); border:1px solid var(--cizgi); border-radius: 16px; padding: 18px; margin-top: 14px; }
+.grafik svg { width: 100%; height: auto; display:block; }
+.adres { word-break: break-all; color: var(--soluk); }
+footer { text-align:center; color: var(--soluk); font-size: 12px; margin-top: 30px; }
+@media (max-width: 680px) {
+  .kap { padding: 0 16px 40px; }
+  form { flex-direction: column; }
+  .kutular { grid-template-columns: 1fr 1fr; }
+  .kutular .kutu:last-child { grid-column: 1 / -1; }
+  td.hedef, th.hedef { display: none; }
+}
+"""
+
+fonksiyon sayfa(baslik, govde):
+    don "<!doctype html><html lang='tr'><head><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><title>" + web.kacir(baslik) + "</title><style>" + STIL + "</style></head><body><div class='kap'><nav><div class='logo'>K</div><b>Kısalt</b><span>KabaLang · SQLite · 302</span></nav>" + govde + "<footer>Bu sayfa sunucuda KabaLang ile üretildi.</footer></div></body></html>"
+
+# ── Veritabanı ──────────────────────────────────────────────────────
+
+fonksiyon hazirla(db):
+    veritabani.sqlite(db, "CREATE TABLE IF NOT EXISTS baglanti(kod TEXT PRIMARY KEY, adres TEXT NOT NULL, olusturma TEXT, tiklama INTEGER DEFAULT 0); CREATE TABLE IF NOT EXISTS tiklama(kod TEXT, zaman TEXT);")
+
+# Satırları `|` ile ayrılmış sütunlara böler. Adres son sütundur ve
+# kendi içinde `|` taşıyabilir → kalan parçalar geri birleştirilir.
+fonksiyon satirlar(ham):
+    sonuc = []
+    eger ham == "":
+        don sonuc
+    dongu s icinde ham.bol("\n"):
+        sonuc.ekle(s)
+    don sonuc
+
+fonksiyon son_sutun(parcalar, bas):
+    don parcalar.dilim(bas, parcalar.uzunluk() - bas).birlestir("|")
+
+# ── Kısa kod ────────────────────────────────────────────────────────
+
+fonksiyon yeni_kod():
+    kod = ""
+    dongu _ icinde 1..KOD_UZUNLUGU:
+        kod = kod + ALFABE.dilim(rastgele.sayi(0, ALFABE.uzunluk() - 1), 1)
+    don kod
+
+fonksiyon kod_gecerli(k):
+    eger k.uzunluk() != KOD_UZUNLUGU:
+        don yanlis
+    dongu i icinde 0..k.uzunluk() - 1:
+        eger degil ALFABE.icerir(k.dilim(i, 1)):
+            don yanlis
+    don dogru
+
+# Hedef adres yalnız http(s) olabilir: `javascript:` ya da `file:` ile
+# başlayan bir "bağlantı" kısaltıcıyı saldırı aracına çevirirdi.
+fonksiyon adres_dogrula(a):
+    eger a.uzunluk() > 2000:
+        don "adres çok uzun"
+    eger degil (a.ile_baslar("https://") veya a.ile_baslar("http://")):
+        don "adres http:// ya da https:// ile başlamalı"
+    eger a.icerir(" ") veya a.icerir("\n") veya a.icerir("\r") veya a.icerir("\t"):
+        don "adres boşluk içeremez"
+    eger a.uzunluk() < 12:
+        don "adres eksik görünüyor"
+    don ""
+
+fonksiyon kaydet(db, adres):
+    kod = yeni_kod()
+    # Çakışma olasılığı çok düşük ama sıfır değil: boş kod bulana dek dene.
+    iken veritabani.sqlite(db, "SELECT count(*) FROM baglanti WHERE kod = ?", [kod]) != "0":
+        kod = yeni_kod()
+    veritabani.sqlite(db, "INSERT INTO baglanti(kod, adres, olusturma) VALUES (?, ?, ?)", [kod, adres, zaman.simdi()])
+    don kod
+
+# Tanıtım verisi: ilk açılışta birkaç bağlantı ve geçmiş tıklamalar.
+fonksiyon ornek_veri(db):
+    eger veritabani.sqlite(db, "SELECT count(*) FROM baglanti") != "0":
+        don 0
+    adresler = ["https://kabaforce.com", "https://dev.kabaforce.com/kabalang/", "https://forge.kabaforce.com/KabaLang/ornekler", "https://maps.kabaforce.com/?q=Galata+Kulesi", "https://dev.kabaforce.com/kabalang/kilavuz/12-web-uygulamasi"]
+    agirlik = [7, 11, 5, 3, 2]
+    dongu i icinde 0..adresler.uzunluk() - 1:
+        kod = kaydet(db, adresler[i])
+        veritabani.sqlite(db, "UPDATE baglanti SET olusturma = datetime('now', 'localtime', ?) WHERE kod = ?", ["-" + metin(7 + i) + " days", kod])
+        # Son yedi güne yayılmış tıklamalar.
+        dongu gun icinde 0..6:
+            adet = rastgele.sayi(0, agirlik[i])
+            dongu _ icinde 1..adet:
+                veritabani.sqlite(db, "INSERT INTO tiklama(kod, zaman) VALUES (?, datetime('now', 'localtime', ?))", [kod, "-" + metin(gun) + " days"])
+        veritabani.sqlite(db, "UPDATE baglanti SET tiklama = (SELECT count(*) FROM tiklama WHERE tiklama.kod = baglanti.kod) WHERE kod = ?", [kod])
+    don 1
+
+hazirla(db)
+ornek_veri(db)
+
+# ── Sayfalar ────────────────────────────────────────────────────────
+
+fonksiyon ana_sayfa(_istek):
+    toplam = veritabani.sqlite(db, "SELECT count(*) FROM baglanti")
+    tik = veritabani.sqlite(db, "SELECT coalesce(sum(tiklama), 0) FROM baglanti")
+    bugun = veritabani.sqlite(db, "SELECT count(*) FROM tiklama WHERE date(zaman) = date('now', 'localtime')")
+
+    g = "<section class='kahraman'><h1>Uzun bağlantılar,<br><em>kısa ve ölçülebilir.</em></h1>"
+    g = g + "<p>Bir adres yapıştırın; KabaLang ona kısa bir kod versin ve her tıklamayı saysın.</p>"
+    g = g + "<form id='f'><input id='adres' placeholder='https://…' autocomplete='off' required><button>Kısalt</button></form>"
+    g = g + "<div id='sonuc'></div></section>"
+
+    g = g + "<div class='kutular'>"
+    g = g + "<div class='kutu'><small>Bağlantı</small><div>" + toplam + "</div></div>"
+    g = g + "<div class='kutu'><small>Toplam tıklama</small><div>" + tik + "</div></div>"
+    g = g + "<div class='kutu'><small>Bugün</small><div>" + bugun + "</div></div>"
+    g = g + "</div>"
+
+    g = g + "<table><tr><th>Kısa kod</th><th class='hedef'>Hedef</th><th>Tıklama</th><th></th></tr>"
+    dongu s icinde satirlar(veritabani.sqlite(db, "SELECT kod, tiklama, adres FROM baglanti ORDER BY olusturma DESC LIMIT 12")):
+        p = s.bol("|")
+        kod = p[0]
+        # Kod yalnız ALFABE harflerinden oluşur → href içinde güvenli.
+        # Hedef adres kullanıcıdan geldi → yalnız METİN olarak, kaçırılarak basılır.
+        g = g + "<tr><td class='kod'><a href='/k/" + kod + "'>/k/" + kod + "</a></td>"
+        g = g + "<td class='hedef'>" + web.kacir(son_sutun(p, 2)) + "</td>"
+        g = g + "<td class='sayac'>" + p[1] + "</td>"
+        g = g + "<td><a href='/istatistik/" + kod + "'>istatistik →</a></td></tr>"
+    g = g + "</table>"
+
+    # Küçük bir istemci betiği: formu JSON API'ye gönderir.
+    g = g + "<script>document.getElementById('f').onsubmit=async e=>{e.preventDefault();const s=document.getElementById('sonuc');"
+    g = g + "const y=await fetch('/api/kisalt',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({adres:document.getElementById('adres').value})});"
+    g = g + "const d=await y.json();s.replaceChildren();if(!y.ok){s.textContent='⚠ '+d.hata;return;}"
+    g = g + "const a=document.createElement('a');a.className='kisa';a.href=d.kisa;a.textContent=location.host+d.kisa;s.append('✓ Hazır: ',a);setTimeout(()=>location.reload(),1600);};</script>"
+    don web.html(sayfa("Kısalt · KabaLang", g))
+
+fonksiyon kisalt_api(istek):
+    govde = istek.govde()
+    eger degil json.gecerli_mi(govde):
+        don web.json(json.uret({"hata": "gövde geçerli JSON değil"}), 400)
+    adres = json.al(govde, "adres").kirp()
+    sorun = adres_dogrula(adres)
+    eger sorun != "":
+        don web.json(json.uret({"hata": sorun}), 422)
+    kod = kaydet(db, adres)
+    don web.json(json.uret({"kod": kod, "kisa": "/k/" + kod, "adres": adres}), 201)
+
+fonksiyon bulunamadi_sayfasi():
+    g = "<section class='kahraman'><h1>Bu kod <em>bulunamadı</em></h1><p>Bağlantı silinmiş ya da hiç var olmamış olabilir.</p><p><a href='/'>← ana sayfa</a></p></section>"
+    don web.html(sayfa("Bulunamadı · Kısalt", g), 404)
+
+fonksiyon yonlendir(istek):
+    kod = istek.parametre("kod")
+    eger degil kod_gecerli(kod):
+        don bulunamadi_sayfasi()
+    adres = veritabani.sqlite(db, "SELECT adres FROM baglanti WHERE kod = ?", [kod])
+    eger adres == "":
+        don bulunamadi_sayfasi()
+    veritabani.sqlite(db, "INSERT INTO tiklama(kod, zaman) VALUES (?, datetime('now', 'localtime'))", [kod])
+    veritabani.sqlite(db, "UPDATE baglanti SET tiklama = tiklama + 1 WHERE kod = ?", [kod])
+    # Gerçek HTTP yönlendirmesi: 302 + Location başlığı.
+    don web.yanit("", 302).baslik("Location", adres)
+
+# Son 7 günün tıklamalarını SVG çubuk grafiğe çevirir — tamamen sunucuda.
+fonksiyon yedi_gun_svg(db, kod):
+    gunler = []
+    adetler = []
+    en_cok = 1
+    dongu i icinde 0..6:
+        geri = 6 - i
+        gun = veritabani.sqlite(db, "SELECT strftime('%d.%m', 'now', 'localtime', ?)", ["-" + metin(geri) + " days"])
+        adet = sayi(veritabani.sqlite(db, "SELECT count(*) FROM tiklama WHERE kod = ? AND date(zaman) = date('now', 'localtime', ?)", [kod, "-" + metin(geri) + " days"]))
+        gunler.ekle(gun)
+        adetler.ekle(adet)
+        eger adet > en_cok:
+            en_cok = adet
+
+    gen = 700
+    yuk = 220
+    cubuk = 64
+    aralik = 36
+    svg = "<svg viewBox='0 0 " + metin(gen) + " " + metin(yuk + 40) + "' xmlns='http://www.w3.org/2000/svg'>"
+    svg = svg + "<defs><linearGradient id='g' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#377ef4'/><stop offset='1' stop-color='#22d3ee'/></linearGradient></defs>"
+    dongu i icinde 0..6:
+        h = adetler[i] * (yuk - 30) // en_cok
+        eger h < 3:
+            h = 3
+        x = 30 + i * (cubuk + aralik)
+        y = yuk - h
+        svg = svg + "<rect x='" + metin(x) + "' y='" + metin(y) + "' width='" + metin(cubuk) + "' height='" + metin(h) + "' rx='10' fill='url(#g)'/>"
+        svg = svg + "<text x='" + metin(x + cubuk // 2) + "' y='" + metin(y - 8) + "' fill='#e6ebf5' font-size='15' font-weight='700' text-anchor='middle' font-family='system-ui'>" + metin(adetler[i]) + "</text>"
+        svg = svg + "<text x='" + metin(x + cubuk // 2) + "' y='" + metin(yuk + 26) + "' fill='#8a94ab' font-size='13' text-anchor='middle' font-family='system-ui'>" + gunler[i] + "</text>"
+    don svg + "</svg>"
+
+fonksiyon istatistik(istek):
+    kod = istek.parametre("kod")
+    eger degil kod_gecerli(kod):
+        don bulunamadi_sayfasi()
+    satir = veritabani.sqlite(db, "SELECT tiklama, olusturma, adres FROM baglanti WHERE kod = ?", [kod])
+    eger satir == "":
+        don bulunamadi_sayfasi()
+    p = satir.bol("|")
+    son = veritabani.sqlite(db, "SELECT coalesce(max(zaman), '—') FROM tiklama WHERE kod = ?", [kod])
+
+    g = "<section class='kahraman' style='padding-bottom:10px'><h1><em>/k/" + kod + "</em></h1>"
+    g = g + "<p class='adres'>→ " + web.kacir(son_sutun(p, 2)) + "</p></section>"
+    g = g + "<div class='kutular'>"
+    g = g + "<div class='kutu'><small>Toplam tıklama</small><div>" + p[0] + "</div></div>"
+    g = g + "<div class='kutu'><small>Oluşturuldu</small><div style='font-size:17px;padding-top:7px'>" + p[1] + "</div></div>"
+    g = g + "<div class='kutu'><small>Son tıklama</small><div style='font-size:17px;padding-top:7px'>" + son + "</div></div>"
+    g = g + "</div>"
+    g = g + "<div class='grafik'><small style='color:#8a94ab;text-transform:uppercase;letter-spacing:.07em;font-size:12px'>Son 7 gün</small>" + yedi_gun_svg(db, kod) + "</div>"
+    g = g + "<p style='text-align:center;margin-top:22px'><a href='/'>← tüm bağlantılar</a></p>"
+    don web.html(sayfa("/k/" + kod + " · istatistik", g))
+
+# Tek iş parçacığı: tıklama sayacı yarış koşuluna girmesin.
+sunucu = web.sunucu(PORT, "127.0.0.1", 1)
+sunucu.govde_siniri(8192)
+sunucu.al("/", ana_sayfa)
+sunucu.gonder("/api/kisalt", kisalt_api)
+sunucu.al("/k/{kod}", yonlendir)
+sunucu.al("/istatistik/{kod}", istatistik)
+sunucu.bulunamadi((_istek) => bulunamadi_sayfasi())
+
+yazdir("🔗 Kısalt hazır — http://127.0.0.1:" + metin(PORT))
+sunucu.basla()
@@ -0,0 +1,45 @@
+# Pano — Kanban görev panosu
+
+![Pano](../../medya/pano.png)
+
+Sunucusu **KabaLang** ile yazılmış bir Kanban panosu: görevler *Yapılacak · Sürüyor · Bitti*
+sütunlarında, kartlar sürükle-bırak ile taşınır, her değişiklik SQLite'a yazılır.
+
+```bash
+cd web/pano
+kabalang calistir pano.kbl
+# → http://127.0.0.1:8471
+```
+
+## Neyi gösteriyor
+
+| Konu | Nerede |
+|---|---|
+| `kaba.web` ile JSON REST API — `al` · `gonder` · `guncelle` · `kaldir` | `pano.kbl` sonu |
+| Yol parametresi `/api/gorevler/{id}` | `guncelle`, `kaldir` |
+| `kaba.veritabani` — **her sorgu parametre bağlamalı** (`?`) | tüm `veritabani.sqlite(..., [..])` çağrıları |
+| Gelen JSON'u `json.gecerli_mi` + `json.al` ile okumak | `olustur` |
+| Durum kodlu yanıtlar: 201 · 204 · 400 · 404 · 422 | `hata_json`, `web.json(g, 201)` |
+| Sunucunun kendi hatalarının da JSON olması (405, 413) | `sunucu.hatalar_json()` |
+| Kapalı küme denetimi (`SUTUNLAR.icerir(sutun)`) | `olustur`, `guncelle` |
+
+## API
+
+```bash
+curl http://127.0.0.1:8471/api/gorevler
+curl -X POST -d '{"baslik":"Yeni iş","oncelik":"yuksek"}' http://127.0.0.1:8471/api/gorevler
+curl -X PUT  -d '{"sutun":"bitti"}' http://127.0.0.1:8471/api/gorevler/3
+curl -X DELETE http://127.0.0.1:8471/api/gorevler/3
+```
+
+## Güvenlik
+
+- **SQL enjeksiyonu:** kullanıcı verisi sorguya hiçbir zaman metin olarak eklenmez, `?` ile
+  bağlanır. `"x'); DROP TABLE gorev; --"` başlıklı bir görev yalnızca tuhaf adlı bir görevdir.
+- **XSS:** ön yüz kart içeriğini `textContent` ile basar; `<script>` başlıklı bir görev ekranda
+  düz yazı olarak görünür.
+- Sunucu yalnız `127.0.0.1`'i dinler ve tek iş parçacığıyla çalışır (SQLite'a sırayla yazılır).
+
+Veritabanı yolu `PANO_DB` ortam değişkeniyle değiştirilebilir (varsayılan `pano.db`).
+
+![Mobil](../../medya/pano-mobil.png)
@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="tr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Pano · KabaLang</title>
+<style>
+  :root {
+    --zemin: #0a0d15; --yuzey: #121826; --yuzey2: #182033; --cizgi: #232c42;
+    --metin: #e6ebf5; --soluk: #8a94ab; --mavi: #377ef4; --cam: #22d3ee;
+    --yesil: #34d399; --sari: #fbbf24; --kirmizi: #f87171;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; color: var(--metin);
+    font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+    background:
+      radial-gradient(900px 500px at 10% -10%, #377ef42a, transparent 60%),
+      radial-gradient(700px 400px at 100% 0%, #22d3ee1c, transparent 60%),
+      var(--zemin);
+  }
+  header {
+    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+    padding: 22px 32px; border-bottom: 1px solid var(--cizgi);
+    backdrop-filter: blur(8px);
+  }
+  .logo {
+    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
+    background: linear-gradient(135deg, var(--mavi), var(--cam)); font-weight: 800; color: #fff;
+    box-shadow: 0 6px 22px #377ef455;
+  }
+  h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
+  .alt { color: var(--soluk); font-size: 13px; }
+  .rozet {
+    margin-left: auto; font-size: 12px; color: var(--cam); border: 1px solid #22d3ee44;
+    padding: 5px 11px; border-radius: 999px; background: #22d3ee10;
+  }
+  main { padding: 26px 32px 40px; max-width: 1360px; margin: 0 auto; }
+  form.ekle {
+    display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: 10px;
+    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; padding: 14px;
+    margin-bottom: 24px;
+  }
+  input, select, button {
+    font: inherit; color: var(--metin); background: var(--yuzey2);
+    border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; min-width: 0;
+  }
+  input:focus, select:focus { outline: 2px solid #377ef488; border-color: transparent; }
+  button {
+    background: linear-gradient(135deg, var(--mavi), #2563eb); border: 0; font-weight: 600;
+    cursor: pointer; padding: 10px 18px; box-shadow: 0 6px 18px #377ef440;
+  }
+  .sutunlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+  .sutun {
+    background: #121826cc; border: 1px solid var(--cizgi); border-radius: 18px;
+    padding: 14px; min-height: 380px; transition: border-color .15s, background .15s;
+  }
+  .sutun.ustunde { border-color: var(--mavi); background: #377ef412; }
+  .sutun h2 {
+    font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--soluk);
+    margin: 4px 6px 14px; display: flex; align-items: center; gap: 8px;
+  }
+  .nokta { width: 9px; height: 9px; border-radius: 50%; }
+  .sayi { margin-left: auto; background: var(--yuzey2); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
+  .kart {
+    background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: 14px;
+    padding: 12px 14px; margin-bottom: 10px; cursor: grab; position: relative;
+    transition: transform .12s, box-shadow .12s;
+  }
+  .kart:hover { transform: translateY(-2px); box-shadow: 0 10px 26px #0008; }
+  .kart.sur { opacity: .45; }
+  .kart b { display: block; font-weight: 600; padding-right: 26px; }
+  .kart p { margin: 4px 0 10px; color: var(--soluk); font-size: 13px; }
+  .alt-satir { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soluk); }
+  .etiket { padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: 11px; }
+  .yuksek { color: var(--kirmizi); background: #f8717118; }
+  .orta { color: var(--sari); background: #fbbf2418; }
+  .dusuk { color: var(--yesil); background: #34d39918; }
+  .sil {
+    position: absolute; top: 8px; right: 8px; background: none; box-shadow: none; color: var(--soluk);
+    padding: 2px 8px; font-size: 16px; opacity: 0; transition: opacity .15s;
+  }
+  .kart:hover .sil { opacity: 1; }
+  .tasi { display: none; gap: 6px; margin-top: 8px; }
+  .tasi button { padding: 5px 10px; font-size: 12px; box-shadow: none; background: var(--yuzey); border: 1px solid var(--cizgi); }
+  footer { text-align: center; color: var(--soluk); font-size: 12px; padding: 0 0 28px; }
+  footer code { color: var(--cam); }
+  @media (max-width: 820px) {
+    header, main { padding-left: 16px; padding-right: 16px; }
+    form.ekle { grid-template-columns: 1fr 1fr; }
+    form.ekle input[name=baslik], form.ekle button { grid-column: 1 / -1; }
+    .sutunlar { grid-template-columns: 1fr; }
+    .sutun { min-height: 0; }
+    .tasi { display: flex; }
+    .sil { opacity: 1; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">K</div>
+  <div>
+    <h1>Proje Panosu</h1>
+    <div class="alt">Sunucusu KabaLang ile yazıldı · SQLite · REST API</div>
+  </div>
+  <span class="rozet" id="ozet">yükleniyor…</span>
+</header>
+<main>
+  <form class="ekle" id="form">
+    <input name="baslik" placeholder="Yeni görev başlığı" maxlength="120" required>
+    <input name="aciklama" placeholder="Kısa açıklama (isteğe bağlı)" maxlength="200">
+    <select name="oncelik">
+      <option value="orta">Orta öncelik</option>
+      <option value="yuksek">Yüksek öncelik</option>
+      <option value="dusuk">Düşük öncelik</option>
+    </select>
+    <button type="submit">+ Ekle</button>
+  </form>
+  <div class="sutunlar" id="sutunlar"></div>
+</main>
+<footer>Kartları sütunlar arasında sürükleyin · <code>GET /api/gorevler</code></footer>
+<script>
+const SUTUNLAR = [
+  ["yapilacak", "Yapılacak", "#8a94ab"],
+  ["suruyor", "Sürüyor", "#377ef4"],
+  ["bitti", "Bitti", "#34d399"],
+];
+const ONCELIK = { yuksek: "Yüksek", orta: "Orta", dusuk: "Düşük" };
+const kok = document.getElementById("sutunlar");
+let gorevler = [];
+
+async function api(yontem, yol, govde) {
+  const y = await fetch(yol, {
+    method: yontem,
+    headers: govde ? { "Content-Type": "application/json" } : {},
+    body: govde ? JSON.stringify(govde) : undefined,
+  });
+  if (!y.ok && y.status !== 204) throw new Error((await y.json()).hata || y.status);
+  return y.status === 204 ? null : y.json();
+}
+
+function el(etiket, sinif, metin) {
+  const e = document.createElement(etiket);
+  if (sinif) e.className = sinif;
+  if (metin !== undefined) e.textContent = metin;   // textContent → XSS yok
+  return e;
+}
+
+function ciz() {
+  kok.replaceChildren();
+  for (const [ad, baslik, renk] of SUTUNLAR) {
+    const liste = gorevler.filter(g => g.sutun === ad);
+    const s = el("section", "sutun");
+    s.dataset.sutun = ad;
+    const h = el("h2");
+    const n = el("span", "nokta"); n.style.background = renk;
+    h.append(n, baslik, el("span", "sayi", liste.length));
+    s.append(h);
+    for (const g of liste) s.append(kart(g));
+    s.addEventListener("dragover", e => { e.preventDefault(); s.classList.add("ustunde"); });
+    s.addEventListener("dragleave", () => s.classList.remove("ustunde"));
+    s.addEventListener("drop", e => {
+      e.preventDefault(); s.classList.remove("ustunde");
+      tasi(+e.dataTransfer.getData("text/plain"), ad);
+    });
+    kok.append(s);
+  }
+  const bitti = gorevler.filter(g => g.sutun === "bitti").length;
+  document.getElementById("ozet").textContent =
+    `${gorevler.length} görev · %${gorevler.length ? Math.round(100 * bitti / gorevler.length) : 0} tamam`;
+}
+
+function kart(g) {
+  const k = el("article", "kart");
+  k.draggable = true;
+  k.addEventListener("dragstart", e => { e.dataTransfer.setData("text/plain", g.id); k.classList.add("sur"); });
+  k.addEventListener("dragend", () => k.classList.remove("sur"));
+  k.append(el("b", "", g.baslik));
+  if (g.aciklama) k.append(el("p", "", g.aciklama));
+  const alt = el("div", "alt-satir");
+  alt.append(el("span", "etiket " + g.oncelik, ONCELIK[g.oncelik] || g.oncelik), "#" + g.id);
+  k.append(alt);
+  const sil = el("button", "sil", "×");
+  sil.title = "Sil";
+  sil.onclick = async () => { await api("DELETE", "/api/gorevler/" + g.id); yukle(); };
+  k.append(sil);
+  const t = el("div", "tasi");
+  for (const [ad, baslik] of SUTUNLAR) if (ad !== g.sutun) {
+    const b = el("button", "", "→ " + baslik);
+    b.onclick = () => tasi(g.id, ad);
+    t.append(b);
+  }
+  k.append(t);
+  return k;
+}
+
+async function tasi(id, sutun) {
+  await api("PUT", "/api/gorevler/" + id, { sutun });
+  yukle();
+}
+
+async function yukle() { gorevler = await api("GET", "/api/gorevler"); ciz(); }
+
+document.getElementById("form").addEventListener("submit", async e => {
+  e.preventDefault();
+  const f = new FormData(e.target);
+  await api("POST", "/api/gorevler", {
+    baslik: f.get("baslik"), aciklama: f.get("aciklama"), oncelik: f.get("oncelik"), sutun: "yapilacak",
+  });
+  e.target.reset();
+  yukle();
+});
+
+yukle();
+</script>
+</body>
+</html>
@@ -0,0 +1,158 @@
+# ╔══════════════════════════════════════════════════════════════════╗
+# ║  PANO — KabaLang ile Kanban görev panosu                         ║
+# ║                                                                  ║
+# ║  · JSON REST API:  GET · POST · PUT · DELETE  /api/gorevler      ║
+# ║  · Kalıcı kayıt:   SQLite, her sorgu PARAMETRE BAĞLAMALI         ║
+# ║  · Ön yüz:         arayuz.html (tek sayfa, dış bağımlılık yok)   ║
+# ╚══════════════════════════════════════════════════════════════════╝
+#
+# Çalıştır:  cd web/pano && kabalang calistir pano.kbl
+# Aç:        http://127.0.0.1:8471
+
+kullan kaba.web
+kullan kaba.json
+kullan kaba.veritabani
+kullan kaba.sistem
+
+# Panoda yalnız bu üç sütun vardır. Kapalı küme → istemciden gelen
+# sütun adı bu listede değilse istek reddedilir.
+SUTUNLAR = ["yapilacak", "suruyor", "bitti"]
+ONCELIKLER = ["dusuk", "orta", "yuksek"]
+
+db = cevre.al("PANO_DB")
+eger db == "":
+    db = "pano.db"
+
+# ── Veritabanı ──────────────────────────────────────────────────────
+
+fonksiyon hazirla(db):
+    veritabani.sqlite(db, "CREATE TABLE IF NOT EXISTS gorev(id INTEGER PRIMARY KEY AUTOINCREMENT, baslik TEXT NOT NULL, aciklama TEXT DEFAULT '', sutun TEXT NOT NULL, oncelik TEXT DEFAULT 'orta', olusturma TEXT);")
+
+    # İlk açılışta pano boş görünmesin: birkaç örnek kart.
+    eger veritabani.sqlite(db, "SELECT count(*) FROM gorev") == "0":
+        ornekler = [
+            ["Giriş ekranını tasarla", "Koyu tema, mobil öncelikli", "bitti", "yuksek"],
+            ["REST API taslağı", "GET · POST · PUT · DELETE uçları", "bitti", "orta"],
+            ["SQLite şeması", "Parametre bağlamalı sorgular", "suruyor", "yuksek"],
+            ["Sürükle-bırak kartlar", "Sütunlar arası taşıma", "suruyor", "orta"],
+            ["Bildirim e-postaları", "Görev atanınca haber ver", "yapilacak", "dusuk"],
+            ["Karanlık/aydınlık tema", "Sistem tercihine uy", "yapilacak", "orta"],
+            ["Yük testi", "1000 eşzamanlı istek", "yapilacak", "yuksek"]
+        ]
+        dongu o icinde ornekler:
+            veritabani.sqlite(db, "INSERT INTO gorev(baslik, aciklama, sutun, oncelik, olusturma) VALUES (?, ?, ?, ?, ?)", [o[0], o[1], o[2], o[3], zaman.simdi()])
+
+# Bütün görevleri JSON dizi olarak verir. JSON'u SQLite'ın kendi
+# json_object/json_group_array işlevleri kurar → elle kaçış yazmayız.
+fonksiyon gorevler_json(db):
+    sonuc = veritabani.sqlite(db, "SELECT json_group_array(json_object('id', id, 'baslik', baslik, 'aciklama', aciklama, 'sutun', sutun, 'oncelik', oncelik, 'olusturma', olusturma)) FROM (SELECT * FROM gorev ORDER BY id)")
+    eger sonuc == "":
+        don "[]"
+    don sonuc
+
+fonksiyon gorev_json(db, kimlik):
+    don veritabani.sqlite(db, "SELECT json_object('id', id, 'baslik', baslik, 'aciklama', aciklama, 'sutun', sutun, 'oncelik', oncelik, 'olusturma', olusturma) FROM gorev WHERE id = ?", [kimlik])
+
+# ── Doğrulama ───────────────────────────────────────────────────────
+
+fonksiyon hata_json(ileti, durum):
+    don web.json(json.uret({"hata": ileti}), durum)
+
+# Kimlik yalnız rakamlardan oluşmalı; "1 OR 1=1" gibi bir değer
+# zaten parametre olarak bağlanır, ama anlamsız istek erkenden döner.
+fonksiyon kimlik_gecerli(k):
+    eger k.uzunluk() == 0 veya k.uzunluk() > 9:
+        don yanlis
+    dongu i icinde 0..k.uzunluk() - 1:
+        eger degil "0123456789".icerir(k.dilim(i, 1)):
+            don yanlis
+    don dogru
+
+# ── Uçlar ───────────────────────────────────────────────────────────
+
+hazirla(db)
+
+arayuz = dosya.oku("arayuz.html")
+eger arayuz == "":
+    yazdir("⚠ arayuz.html bulunamadı — programı web/pano klasöründen çalıştırın.")
+
+fonksiyon ana_sayfa(_istek):
+    don web.html(arayuz)
+
+fonksiyon listele(_istek):
+    don web.json(gorevler_json(db))
+
+fonksiyon olustur(istek):
+    govde = istek.govde()
+    eger degil json.gecerli_mi(govde):
+        don hata_json("gövde geçerli JSON değil", 400)
+    baslik = json.al(govde, "baslik").kirp()
+    aciklama = json.al(govde, "aciklama").kirp()
+    sutun = json.al(govde, "sutun")
+    oncelik = json.al(govde, "oncelik")
+    eger baslik == "":
+        don hata_json("başlık boş olamaz", 422)
+    eger baslik.uzunluk() > 120:
+        don hata_json("başlık en çok 120 karakter", 422)
+    eger sutun == "":
+        sutun = "yapilacak"
+    eger oncelik == "":
+        oncelik = "orta"
+    eger degil SUTUNLAR.icerir(sutun):
+        don hata_json("bilinmeyen sütun: " + sutun, 422)
+    eger degil ONCELIKLER.icerir(oncelik):
+        don hata_json("bilinmeyen öncelik: " + oncelik, 422)
+
+    veritabani.sqlite(db, "INSERT INTO gorev(baslik, aciklama, sutun, oncelik, olusturma) VALUES (?, ?, ?, ?, ?)", [baslik, aciklama, sutun, oncelik, zaman.simdi()])
+    yeni = veritabani.sqlite(db, "SELECT max(id) FROM gorev")
+    don web.json(gorev_json(db, yeni), 201)
+
+fonksiyon guncelle(istek):
+    kimlik = istek.parametre("id")
+    eger degil kimlik_gecerli(kimlik):
+        don hata_json("geçersiz kimlik", 400)
+    eger veritabani.sqlite(db, "SELECT count(*) FROM gorev WHERE id = ?", [kimlik]) == "0":
+        don hata_json("görev bulunamadı", 404)
+    govde = istek.govde()
+    eger degil json.gecerli_mi(govde):
+        don hata_json("gövde geçerli JSON değil", 400)
+
+    # Yalnız gönderilen alanlar güncellenir.
+    sutun = json.al(govde, "sutun")
+    eger sutun != "":
+        eger degil SUTUNLAR.icerir(sutun):
+            don hata_json("bilinmeyen sütun: " + sutun, 422)
+        veritabani.sqlite(db, "UPDATE gorev SET sutun = ? WHERE id = ?", [sutun, kimlik])
+    baslik = json.al(govde, "baslik").kirp()
+    eger baslik != "":
+        veritabani.sqlite(db, "UPDATE gorev SET baslik = ? WHERE id = ?", [baslik, kimlik])
+    oncelik = json.al(govde, "oncelik")
+    eger oncelik != "":
+        eger degil ONCELIKLER.icerir(oncelik):
+            don hata_json("bilinmeyen öncelik: " + oncelik, 422)
+        veritabani.sqlite(db, "UPDATE gorev SET oncelik = ? WHERE id = ?", [oncelik, kimlik])
+    don web.json(gorev_json(db, kimlik))
+
+fonksiyon kaldir(istek):
+    kimlik = istek.parametre("id")
+    eger degil kimlik_gecerli(kimlik):
+        don hata_json("geçersiz kimlik", 400)
+    eger veritabani.sqlite(db, "SELECT count(*) FROM gorev WHERE id = ?", [kimlik]) == "0":
+        don hata_json("görev bulunamadı", 404)
+    veritabani.sqlite(db, "DELETE FROM gorev WHERE id = ?", [kimlik])
+    don web.yanit("", 204)
+
+# Tek iş parçacığı: SQLite'a yazan işleyiciler sırayla koşar.
+sunucu = web.sunucu(8471, "127.0.0.1", 1)
+sunucu.hatalar_json()
+sunucu.govde_siniri(16384)
+
+sunucu.al("/", ana_sayfa)
+sunucu.al("/api/gorevler", listele)
+sunucu.gonder("/api/gorevler", olustur)
+sunucu.guncelle("/api/gorevler/{id}", guncelle)
+# DELETE yöntemi `sunucu.kaldir` ile bağlanır
+sunucu.kaldir("/api/gorevler/{id}", kaldir)
+
+yazdir("📋 Pano hazır — http://127.0.0.1:8471")
+sunucu.basla()