js/gui.html

﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ChessCoach</title>
    <link rel="stylesheet" href="chessboardjs/css/chessboard-1.0.0.css">
    <link rel="stylesheet" href="gui.css">
</head>
<body>
    <div id="boardColumn">
        <div id="board"></div>
        <div>
            <div id="commentaryControls">
                <button id="requestCommentary">Comment</button>
                <button id="commentarySuite">Suite</button>
            </div>
            <div id="commentary"></div>
        </div>
    </div>
    <div id="info">
        <div id="trainingControls">
            <div>
                <span id="gameInfo"></span>
                <button id="gamePrevBig">&laquo;</button>
                <button id="gamePrev">&lsaquo;</button>
                <input id="gameInput" />
                <button id="gameNext">&rsaquo;</button>
                <button id="gameNextBig">&raquo;</button>
            </div>
            <div>
                <span id="positionInfo"></span>
                <button id="positionPrevBig">&laquo;</button>
                <button id="positionPrev">&lsaquo;</button>
                <input id="positionInput" />
                <button id="positionNext">&rsaquo;</button>
                <button id="positionNextBig">&raquo;</button>
            </div>
        </div>
        <div>FEN: <span id="fen"></span></div>
        <div id="uciControls">
            <div>Line: <span id="line"></span> <button id="lineBack">Back</button> <button id="lineHome">Home</button></div>
            <input id="nodeCountRange" type="range" />
        </div>
        <div><span id="nodeCount"></span></div>
        <div><span id="pgn"></span></div>
        <div>Evaluation: <span id="evaluation"></span></div>
        <div><span id="principalVariation"></span></div>
        <table id="moves"></table>
    </div>

    <script src="jquery/jquery-3.5.1.js"></script>
    <script src="chessboardjs/js/chessboard-1.0.0.js"></script>
    <script src="gui.js"></script>
</body>
</html>