59 lines
2.4 KiB
HTML
59 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="tr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Pathfinder AI — A* Görsel Labirent Çözücü</title>
|
|||
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧠</text></svg>">
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<header>
|
|||
|
|
<h1>🧠 Pathfinder AI</h1>
|
|||
|
|
<p class="subtitle">A* Algoritması ile Görsel Labirent Çözücü</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="controls">
|
|||
|
|
<button id="btn-bul" class="btn btn-primary">🚀 Yolu Bul</button>
|
|||
|
|
<button id="btn-sifirla" class="btn btn-secondary">🧹 Sıfırla</button>
|
|||
|
|
<button id="btn-temizle" class="btn btn-secondary">🗑 Duvarları Sil</button>
|
|||
|
|
<div class="speed-wrap">
|
|||
|
|
<label for="speed">Hız:</label>
|
|||
|
|
<input type="range" id="speed" min="1" max="10" value="6">
|
|||
|
|
<span id="speed-value">6</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="stats" class="stats">
|
|||
|
|
<div class="stat"><span class="dot dot-start"></span> Başlangıç</div>
|
|||
|
|
<div class="stat"><span class="dot dot-goal"></span> Bitiş</div>
|
|||
|
|
<div class="stat" id="visited-count">Ziyaret: 0</div>
|
|||
|
|
<div class="stat" id="path-length">Yol: —</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-wrap">
|
|||
|
|
<div id="grid" class="grid"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="legend">
|
|||
|
|
<div class="legend-item"><span class="legend-swatch wall-swatch"></span> Duvar (surükleyerek çiz)</div>
|
|||
|
|
<div class="legend-item"><span class="legend-swatch start-swatch"></span> Başlangıç (sürükle)</div>
|
|||
|
|
<div class="legend-item"><span class="legend-swatch goal-swatch"></span> Bitiş (sürükle)</div>
|
|||
|
|
<div class="legend-item"><span class="legend-swatch visited-swatch"></span> Ziyaret edilen</div>
|
|||
|
|
<div class="legend-item"><span class="legend-swatch path-swatch"></span> En kısa yol</div>
|
|||
|
|
<div class="legend-item"><span class="legend-swatch current-swatch"></span> Anlık açık düğüm</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Yol Bulunamadı Tostu -->
|
|||
|
|
<div id="toast" class="toast" role="alert">
|
|||
|
|
<span class="toast-icon">⚠️</span>
|
|||
|
|
<span class="toast-text">Yol Bulunamadı!</span>
|
|||
|
|
<div class="toast-sub">Etrafı tamamen duvarla kapattın — bir boşluk bırak ve tekrar dene.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|