index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Logs and SQL</title>
    <script type="module" src="js/main.js"></script>
    <link rel="stylesheet" href="main.css">
    
</head>
<body>
    <h1>Live Logs and SQL</h1>
    
    <!-- Блок выбора сервера и ввода токена -->
    <label for="server-select">Select Server:</label>
    <select id="server-select" class="server-selector">
        <option value="http://localhost:34000">Localhost</option>
        <option value="https://mock.coffeedev.dev">Mock Server</option>
        <option value="custom">Custom Server</option>
    </select>
    <div id="custom-server-input" style="display: none;">
        <input type="text" id="custom-domain" placeholder="http://domain.com" />
    </div>
    <input type="text" id="token-input" placeholder="Enter your token here" />

    <div id="log-window">
        Loading logs...
    </div>


    <!-- Блок для отображения таблиц -->
    <div id="tables-list">
        <h3 id="table-name">Available Tables</h3>
        <table id="tables-table">
            <thead>
                <tr>
                    <th>Table Name</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr><td colspan="2">Loading tables...</td></tr>
            </tbody>
        </table>
        <div id="table-details" style="display: none;">
            <button id="back-button">Back to Table List</button>
            <h3>Table Details</h3>
            <div id="table-details-content"></div>
        </div>
    </div>
    
    
    <!-- Блок для ввода и выполнения SQL -->
    <div id="sql-command-block">
        <label for="command-input">Enter SQL Command:</label>
        <textarea id="command-input" rows="4" placeholder="e.g. SELECT * FROM users"></textarea>
        <button id="execute-button">Execute SQL</button>
        <div id="output-area">
            Output will be shown here.
        </div>
    </div>

    <!-- Кнопка для прокрутки окна логов вниз -->
    <button id="scroll-button">Scroll to Bottom</button>
</body>
</html>