chess / templates /index.html
christopher's picture
Update templates/index.html
1e95382 verified
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/chessboard-1.0.0.min.css">
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<p style="background: #fff3cd; padding: 10px; border-radius: 4px; border: 1px solid #ffc107;"> This is a proof-of-concept and only sporadically maintained. Use the Community tab for feature suggestions or feedback! </p>
<h1>Position Search</h1>
<p> Search for Lichess puzzles by position</p>
<div class="container">
<div>
<div id="board"></div>
<div style="margin-top: 10px; width: var(--board-width);">
<div style="display: flex; gap: 10px; align-items: center;">
<input type="text" id="fen" placeholder="Paste FEN here..." style="flex: 1; padding: 8px; font-family: monospace; min-width: 0;">
<button onclick="let f=document.getElementById('fen').value.trim(); if(f) { board.position(f.split(' ')[0]); updateInfo(); }">Load</button>
</div>
<div style="display: flex; gap: 10px; margin-top: 10px;">
<button onclick="board.clear(); document.getElementById('results').innerHTML = ''; updateInfo();">Clear</button>
<button onclick="search()">Search</button>
</div>
</div>
</div>
</div>
<div id="results"></div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="/static/chessboard-1.0.0.min.js"></script>
<script src="/static/app.js"></script>
</body>
</html>