index.html

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GrafLab — En Kısa Yol & MST Görselleştirici</title>
  <link
    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Syne:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="bildirim-kapsayici" id="bildirimKapsayici"></div>

  <div id="anaSayfa" class="gorunum aktif">

    <div class="arka-animasyon">
      <canvas id="arkaKanvas"></canvas>
    </div>

    <header class="sayfa-basligi">
      <div class="logo-alani" style="display: flex; align-items: center; gap: 12px;">
        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#4f8ef7" stroke-width="2.5"
          stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="5" r="3"></circle>
          <circle cx="6" cy="17" r="3"></circle>
          <circle cx="18" cy="17" r="3"></circle>
          <path d="M8.5 14.5L10.5 7.5"></path>
          <path d="M15.5 14.5L13.5 7.5"></path>
          <path d="M9 17h6"></path>
        </svg>
        <div>
          <div class="logo-yazi" style="font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 0.5px;">
            GrafLab</div>
          <div class="logo-alt-yazi" style="font-size: 0.85rem; color: #8a93b8; margin-top: 2px;">Algoritmalar Ders
            Ödevi</div>
        </div>
      </div>

    </header>

    <div class="kahraman-bolumu">
      <h1 class="kahraman-baslik">En Kısa Yol &<br>MST Görselleştirici</h1>
      <p class="kahraman-alt-metin">Graf algoritmalarını adım adım, canlı olarak izleyin. Kendi grafınızı çizin ya da
        hazır örnekleri kullanın.</p>
      <div class="etiket-grubu">
        <span class="etiket etiket-mavi">4 Algoritma</span>
        <span class="etiket etiket-mor">İnteraktif Görselleştirme</span>
        <span class="etiket etiket-yesil">Adım Adım Analiz</span>
      </div>
    </div>

    <div class="kart-izgarasi">

      <div class="algo-karti kart-dijkstra" onclick="algoritmayiBaslat('dijkstra')">
        <div class="kart-grafigi">
          <svg viewBox="0 0 240 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="40" y1="55" x2="100" y2="25" class="kenar-cizgisi" stroke="#4f8ef7" />
            <line x1="40" y1="55" x2="100" y2="85" class="kenar-cizgisi" stroke="#4f8ef7" />
            <line x1="100" y1="25" x2="170" y2="25" class="kenar-cizgisi" stroke="#4f8ef7" />
            <line x1="100" y1="85" x2="170" y2="85" class="kenar-cizgisi" stroke="#4f8ef7" />
            <line x1="170" y1="25" x2="210" y2="55" class="kenar-cizgisi" stroke="#4f8ef7" />
            <line x1="170" y1="85" x2="210" y2="55" class="kenar-cizgisi" stroke="#4f8ef7" />
            <line x1="100" y1="25" x2="100" y2="85" class="kenar-cizgisi" stroke="#4f8ef764" />
            <circle cx="40" cy="55" r="12" class="dugum-cemberi" stroke="#4f8ef7" fill="rgba(79,142,247,0.2)" />
            <circle cx="100" cy="25" r="12" class="dugum-cemberi" stroke="#4f8ef7" />
            <circle cx="100" cy="85" r="12" class="dugum-cemberi" stroke="#4f8ef7" />
            <circle cx="170" cy="25" r="12" class="dugum-cemberi" stroke="#4f8ef764" />
            <circle cx="170" cy="85" r="12" class="dugum-cemberi" stroke="#4f8ef764" />
            <circle cx="210" cy="55" r="12" class="dugum-cemberi" stroke="#4f8ef764" />
            <text x="40" y="58.5" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef7">A</text>
            <text x="100" y="28.5" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef7">B</text>
            <text x="100" y="88.5" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef7">C</text>
            <text x="170" y="28.5" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef764">D</text>
            <text x="170" y="88.5" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef764">E</text>
            <text x="210" y="58.5" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef764">F</text>
            <text x="70" y="32" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef7aa">4</text>
            <text x="70" y="80" text-anchor="middle" class="dugum-etiketi" fill="#4f8ef7aa">6</text>
          </svg>
        </div>
        <div class="algoritma-turu tur-enkisa">En Kısa Yol</div>
        <div class="kart-basligi">Dijkstra</div>
        <p class="kart-aciklamasi">Negatif olmayan ağırlıklı graflarda greedy yaklaşımla en kısa yolları bulur. O((V+E)
          log V) karmaşıklığı.</p>
        <button class="basla-butonu">▶ Görselleştirmeyi Başlat</button>
      </div>

      <div class="algo-karti kart-bellman" onclick="algoritmayiBaslat('bellman')">
        <div class="kart-grafigi">
          <svg viewBox="0 0 240 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="30" y1="55" x2="90" y2="20" class="kenar-cizgisi" stroke="#f7c94f" />
            <line x1="30" y1="55" x2="90" y2="90" class="kenar-cizgisi" stroke="#f7c94f" />
            <line x1="90" y1="20" x2="160" y2="55" class="kenar-cizgisi" stroke="#f7c94f" />
            <line x1="90" y1="90" x2="160" y2="55" class="kenar-cizgisi" stroke="#f7c94f" />
            <line x1="160" y1="55" x2="220" y2="55" class="kenar-cizgisi" stroke="#f7c94f" />
            <circle cx="30" cy="55" r="12" class="dugum-cemberi" stroke="#f7c94f" fill="rgba(247,201,79,0.2)" />
            <circle cx="90" cy="20" r="12" class="dugum-cemberi" stroke="#f7c94f" />
            <circle cx="90" cy="90" r="12" class="dugum-cemberi" stroke="#f7c94f" />
            <circle cx="160" cy="55" r="12" class="dugum-cemberi" stroke="#f7c94f" />
            <circle cx="220" cy="55" r="12" class="dugum-cemberi" stroke="#f7c94f64" />
            <text x="30" y="58.5" text-anchor="middle" class="dugum-etiketi" fill="#f7c94f">A</text>
            <text x="90" y="23.5" text-anchor="middle" class="dugum-etiketi" fill="#f7c94f">B</text>
            <text x="90" y="93.5" text-anchor="middle" class="dugum-etiketi" fill="#f7c94f">C</text>
            <text x="160" y="58.5" text-anchor="middle" class="dugum-etiketi" fill="#f7c94f">D</text>
            <text x="220" y="58.5" text-anchor="middle" class="dugum-etiketi" fill="#f7c94f64">E</text>
            <text x="55" y="27" class="dugum-etiketi" fill="#f7c94faa">-2</text>
            <text x="55" y="85" class="dugum-etiketi" fill="#f7c94faa">3</text>
          </svg>
        </div>
        <div class="algoritma-turu tur-enkisa">En Kısa Yol</div>
        <div class="kart-basligi">Bellman-Ford</div>
        <p class="kart-aciklamasi">Negatif ağırlıklı kenarları ve negatif döngüleri tespit eden dinamik programlama
          temelli algoritma. O(VE) karmaşıklığı.</p>
        <button class="basla-butonu">▶ Görselleştirmeyi Başlat</button>
      </div>

      <div class="algo-karti kart-prim" onclick="algoritmayiBaslat('prim')">
        <div class="kart-grafigi">
          <svg viewBox="0 0 240 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="120" y1="20" x2="60" y2="60" class="kenar-cizgisi" stroke="#36d9c4" />
            <line x1="120" y1="20" x2="180" y2="60" class="kenar-cizgisi" stroke="#36d9c4" />
            <line x1="60" y1="60" x2="120" y2="90" class="kenar-cizgisi" stroke="#36d9c4" />
            <line x1="180" y1="60" x2="120" y2="90" class="kenar-cizgisi" stroke="#36d9c4" />
            <line x1="60" y1="60" x2="20" y2="90" class="kenar-cizgisi" stroke="#36d9c464" />
            <line x1="180" y1="60" x2="220" y2="90" class="kenar-cizgisi" stroke="#36d9c464" />
            <circle cx="120" cy="20" r="12" class="dugum-cemberi" stroke="#36d9c4" fill="rgba(54,217,196,0.2)" />
            <circle cx="60" cy="60" r="12" class="dugum-cemberi" stroke="#36d9c4" />
            <circle cx="180" cy="60" r="12" class="dugum-cemberi" stroke="#36d9c4" />
            <circle cx="120" cy="90" r="12" class="dugum-cemberi" stroke="#36d9c4" />
            <circle cx="20" cy="90" r="12" class="dugum-cemberi" stroke="#36d9c464" />
            <circle cx="220" cy="90" r="12" class="dugum-cemberi" stroke="#36d9c464" />
            <text x="120" y="23.5" text-anchor="middle" class="dugum-etiketi" fill="#36d9c4">A</text>
            <text x="60" y="63.5" text-anchor="middle" class="dugum-etiketi" fill="#36d9c4">B</text>
            <text x="180" y="63.5" text-anchor="middle" class="dugum-etiketi" fill="#36d9c4">C</text>
            <text x="120" y="93.5" text-anchor="middle" class="dugum-etiketi" fill="#36d9c4">D</text>
          </svg>
        </div>
        <div class="algoritma-turu tur-mst">Minimum Yayılan Ağaç (MST)</div>
        <div class="kart-basligi">Prim</div>
        <p class="kart-aciklamasi">Başlangıç düğümünden itibaren greedy yaklaşımla MST inşa eder. Öncelik kuyruğu ile
          O(E log V) karmaşıklığı.</p>
        <button class="basla-butonu">▶ Görselleştirmeyi Başlat</button>
      </div>

      <div class="algo-karti kart-kruskal" onclick="algoritmayiBaslat('kruskal')">
        <div class="kart-grafigi">
          <svg viewBox="0 0 240 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="40" y1="30" x2="120" y2="30" class="kenar-cizgisi" stroke="#7c5ef9" />
            <line x1="40" y1="30" x2="80" y2="80" class="kenar-cizgisi" stroke="#7c5ef9" />
            <line x1="120" y1="30" x2="160" y2="80" class="kenar-cizgisi" stroke="#7c5ef9" />
            <line x1="80" y1="80" x2="160" y2="80" class="kenar-cizgisi" stroke="#7c5ef9" />
            <line x1="120" y1="30" x2="200" y2="30" class="kenar-cizgisi" stroke="#7c5ef964" />
            <line x1="200" y1="30" x2="160" y2="80" class="kenar-cizgisi" stroke="#7c5ef964" />
            <circle cx="40" cy="30" r="12" class="dugum-cemberi" stroke="#7c5ef9" fill="rgba(124,94,249,0.2)" />
            <circle cx="120" cy="30" r="12" class="dugum-cemberi" stroke="#7c5ef9" />
            <circle cx="80" cy="80" r="12" class="dugum-cemberi" stroke="#7c5ef9" />
            <circle cx="160" cy="80" r="12" class="dugum-cemberi" stroke="#7c5ef9" />
            <circle cx="200" cy="30" r="12" class="dugum-cemberi" stroke="#7c5ef964" />
            <text x="40" y="33.5" text-anchor="middle" class="dugum-etiketi" fill="#7c5ef9">A</text>
            <text x="120" y="33.5" text-anchor="middle" class="dugum-etiketi" fill="#7c5ef9">B</text>
            <text x="80" y="83.5" text-anchor="middle" class="dugum-etiketi" fill="#7c5ef9">C</text>
            <text x="160" y="83.5" text-anchor="middle" class="dugum-etiketi" fill="#7c5ef9">D</text>
            <text x="200" y="33.5" text-anchor="middle" class="dugum-etiketi" fill="#7c5ef964">E</text>
          </svg>
        </div>
        <div class="algoritma-turu tur-mst">Minimum Yayılan Ağaç (MST)</div>
        <div class="kart-basligi">Kruskal</div>
        <p class="kart-aciklamasi">Kenarları ağırlıklarına göre sıralayarak döngüsüz MST oluşturur. Union-Find veri
          yapısı kullanır. O(E log E) karmaşıklığı.</p>
        <button class="basla-butonu">▶ Görselleştirmeyi Başlat</button>
      </div>

    </div>
  </div>
  <div id="calismaAlani" class="gorunum">

    <nav class="ust-navigasyon">
      <button class="geri-butonu" onclick="anaSayfayaDon()">← Ana Sayfa</button>
      <div class="algoritma-adi" id="algoritmaBasligi">Dijkstra <span>Görselleştirici</span></div>

      <div class="secim-grubu">
        <span class="secim-etiketi">Hazır Graf Seç:</span>
        <select class="secim-kutusu" id="hazirGrafSecici" onchange="hazirGrafYukle(this.value)">
          <option value="">— Seç —</option>
          <option value="basit">Basit Graf</option>
          <option value="negatif">Negatif Ağırlıklı Graf</option>
          <option value="karmasik">Karmaşık Ağ</option>
        </select>
      </div>

      <button class="cizim-modu-butonu" id="cizimModuButonu" onclick="cizimModunuToggle()">✏ Kendi Grafını Çiz</button>
    </nav>

    <div class="ana-bolum">

      <div class="kanvas-alani">
        <div class="kanvas-arka-plani"></div>
        <canvas id="grafKanvasi"></canvas>

        <div class="bilgi-paneli" id="bilgiPaneli">
          <div class="bilgi-satiri"><span>Düğüm</span><span class="bilgi-degeri" id="dugumSayisiGosterge">0</span></div>
          <div class="bilgi-satiri"><span>Kenar</span><span class="bilgi-degeri" id="kenarSayisiGosterge">0</span></div>
          <div class="bilgi-satiri"><span>Adım</span><span class="bilgi-degeri" id="adimGosterge">—</span></div>
        </div>

        <div class="mesafe-tablosu" id="mesafeTablosu">
          <div class="mesafe-tablosu-basligi">Mesafe Tablosu</div>
          <div id="mesafeIcerigi"></div>
        </div>

        <div class="cizim-araclari" id="cizimAraclari">
          <button class="arac-butonu aktif" id="dugumAraciButonu" onclick="aracSec('dugum')">
            <span class="arac-ikonu">◉</span> Düğüm Ekle
          </button>
          <button class="arac-butonu" id="kenarAraciButonu" onclick="aracSec('kenar')">
            <span class="arac-ikonu">—</span> Kenar Ekle
          </button>
          <button class="arac-butonu" id="agirlikAraciButonu" onclick="aracSec('agirlik')">
            <span class="arac-ikonu">✎</span> Ağırlık Belirle
          </button>
          <button class="arac-butonu tehlikeli-arac" onclick="tumunuTemizle()">
            <span class="arac-ikonu">✕</span> Tümünü Temizle
          </button>
        </div>

        <div class="kontrol-cubugu">
          <button class="kontrol-butonu" title="Geri" onclick="adimGeri()">⏮</button>
          <button class="kontrol-butonu oynat-butonu" id="oynatButonu" onclick="oynatDurdur()">▶</button>
          <button class="kontrol-butonu" title="İleri" onclick="adimIleri()">⏭</button>
          <div class="cubuk-ayirici"></div>
          <div class="hiz-grubu">
            <span class="hiz-etiketi">Hız Ayarı</span>
            <input type="range" class="hiz-cetveli" id="hizCetveli" min="1" max="10" value="5">
          </div>
          <div class="cubuk-ayirici"></div>
          <div class="adim-sayaci" id="adimSayaci">0 / 0</div>
          <button class="kontrol-butonu" title="Sıfırla" onclick="algoritmayiSifirla()"
            style="font-size:0.85rem">↺</button>
        </div>

      </div>
      <aside class="kenar-cubugu">

        <div class="kenar-bolumu">
          <div class="kenar-bolumu-basligi">
            <div class="bolum-nokta mavi-nokta"></div>
            <span class="bolum-baslik-yazisi">Algoritma Adımları (Pseudo-kod)</span>
          </div>
          <div class="pseudokod-alani" id="pseudokodAlani"></div>
        </div>

        <div class="kenar-bolumu">
          <div class="kenar-bolumu-basligi">
            <div class="bolum-nokta yesil-nokta"></div>
            <span class="bolum-baslik-yazisi">İşlem Günlüğü (Log)</span>
          </div>
          <div class="islem-gunlugu" id="islemGunlugu"></div>
        </div>

      </aside>
    </div>
  </div>
  <div class="modal-arkaplan" id="kenarModali">
    <div class="modal-kutusu">
      <div class="modal-basligi">⚖ Kenar Ağırlığı Belirle</div>
      <div class="modal-alt-metni">İki düğüm arasındaki kenarın ağırlığını girin.</div>
      <div class="girdi-grubu">
        <label class="girdi-etiketi">Ağırlık değeri</label>
        <input type="number" class="metin-girdisi" id="agirlikGirdisi" value="1" min="-99" max="99">
      </div>
      <div class="modal-buton-grubu">
        <button class="iptal-butonu" onclick="modalKapat()">İptal</button>
        <button class="onayla-butonu" onclick="kenarAgirliginiOnayla()">Onayla</button>
      </div>
    </div>
  </div>

  <div class="modal-arkaplan" id="baslangicModali">
    <div class="modal-kutusu">
      <div class="modal-basligi">🚀 Başlangıç Düğümü</div>
      <div class="modal-alt-metni">Algoritmayı çalıştırmak için başlangıç düğümünü seçin.</div>
      <div class="girdi-grubu">
        <label class="girdi-etiketi">Başlangıç düğümü</label>
        <select class="metin-girdisi" id="baslangicSecimi"></select>
      </div>
      <div class="modal-buton-grubu">
        <button class="iptal-butonu" onclick="baslangicModaliniKapat()">İptal</button>
        <button class="onayla-butonu" onclick="algoritmayiCalistir()">Algoritmayı Başlat ▶</button>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>

</html>