<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules';">
    <meta charset="UTF-8">
    <title>WebSocket Client</title>
    <label for=""></label>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <div class="container">
        <h1>Neuro-Air</h1>
        <h2>Управление голографическим вентилятором</h2>
        <div class="button-group">
            <button onclick="sendCommand('start')">Start</button>
            <button onclick="sendCommand('stop')">Stop</button>
            <br>
            <button id="getDeviceStateButton">Get Device State</button>
            <pre id="deviceStateOutput"></pre> <!-- Для отображения состояния устройства -->
        </div>
        <div>
            <button id="pauseVideoButton">Pause Video</button>
            <button id="resumeVideoButton">Resume Video</button>
        </div>
        <div class="slider-container">
            <label for="setLightValue">Set Light: </label>
            <input type="range" id="setLightValue" min="0" max="15" value="5" oninput="updateLightValue()">
            <span id="lightValueDisplay">5</span>
            <button onclick="sendCommand('setLight', document.getElementById('setLightValue').value)">Set Light</button>
        </div>
        <div class="input-container">
            <label for="setAngleValue">Set Angle: </label>
            <input type="number" id="setAngleValue" min="0" max="359" oninput="validateAngle()">
            <button onclick="sendCommand('setAngle', document.getElementById('setAngleValue').value)">Set Angle</button>
        </div>
        <div>
            <label for="motorSpeedSelect">Set Motor Speed: </label>
            <select id="motorSpeedSelect">
                <option value="0">Slow</option>
                <option value="1">Normal</option>
                <option value="2">Fast</option>
            </select>
            <button id="setMotorSpeedButton">Set Speed</button>
        </div>
        <div>
            <label for="videoSelect">Select Video to Play: </label>
            <select id="videoSelect"></select>
            <button id="playSelectedVideoButton">Play Video</button>
            <button onclick="sendCommand('readFileList');">Refresh Video List</button>
        </div>         

        <div>
            <button id="clearAllVideosButton">Clear All Videos</button>
        </div>
        <div>
            <input type="file" id="fileInput" multiple>
            <button id="uploadFileButton">Upload File</button>
        </div>
        <div>
            <label for="deleteVideoSelect">Select Video to Delete: </label>
            <select id="deleteVideoSelect"></select>
            <button id="deleteVideoButton">Delete Video</button>
        </div>
        <div>
            <label for="playlistSelect">Select Playlist: </label>
            <select id="playlistSelect"></select>
            <button id="loadPlaylistButton">Load Playlist</button>
        </div>
        <div>
            <label for="playlistItemsSelect">Playlist Items: </label>
            <select id="playlistItemsSelect"></select>
            <button id="playPlaylistVideoButton">Play Video from Playlist</button>
        </div>     
        <div>
            <label for="newPlaylistName">New Playlist Name: </label>
            <input type="text" id="newPlaylistName">
            <button id="createPlaylistButton">Create Playlist</button>
        </div>
        
    </div>
    <script src="/js/script.js"></script> <!-- Подключение основного скрипта -->
    <script src="/js/pageDesign.js"></script> <!-- Подключение скрипта для дизайна страницы -->
</body>
</html>
