Web-Lab-1/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лабораторная работа №1</title>
    <style>

        body {
            font-family: Arial, sans-serif;
            background-color: #ffffff;
            color: #000000;
            padding: 20px;
            margin: 0;
        }

        #layout-table {
            width: 800px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid #000000;
        }

        #header {
            background-color: #eeeeee;
            color: #000000; /* Каскадирование */
            padding: 10px;
            text-align: center;
            font-family: monospace;
            font-size: 16px;
        }

        #header span.variant {
            font-weight: bold;
            color: #cc0000;
        }

        .content-cell {
            padding: 15px;
            vertical-align: top;
            width: 50%;
        }

        #point-form > .form-group {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px dashed #aaaaaa;
        }

        .checkbox-group label {
            margin-right: 15px;
        }

        #point-form input[type="text"] {
            margin-left: 10px;
            padding: 4px;
            width: 120px;
        }

        .r-button {
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #dddddd;
            border: 1px solid #888888;
            cursor: pointer;
        }

        .r-button.active {
            background-color: #888888;
            color: #ffffff;
        }

        #submit-btn {
            margin-top: 15px;
            padding: 8px 16px;
            cursor: pointer;
        }

        #clear-history-btn {
            padding: 5px 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .error {
            color: red;
            font-size: 12px;
            display: block;
            margin-top: 5px;
        }

        .global-error {
            color: red;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .table-scroll-container {
            max-height: 250px;
            overflow-y: scroll;
        }

        #results-table th {
            background-color: #eeeeee;
            padding: 8px;
        }

        #results-table td {
            padding: 8px;
            text-align: center;
        }

        .canvas-container {
            text-align: center;
        }

        #oscar-easter-egg {
            position: fixed;
            bottom: -350px;
            left: 0;
            max-width: 250px;
            z-index: 9999;
            transition: bottom 0.25s linear;
        }
        #oscar-easter-egg.show {
            bottom: 0;
        }
    </style>
</head>
<body>

<table id="layout-table">
    <tr>
        <td colspan="2" id="header">
            <span>ФИО: <b>Кливцов Александр Александрович</b></span> |
            <span>Группа: <b>P3215</b></span> |
            <span class="variant">Вариант: 12729</span>
        </td>
    </tr>
    <tr>
        <td class="content-cell canvas-container">
            <h3>Область графика</h3>
            <canvas id="graphCanvas" width="300" height="300"></canvas>
            <p style="font-size: 12px;">(Точки отображаются относительно выбранного R)</p>
        </td>
        <td class="content-cell">
            <h3>Форма проверки</h3>
            <form id="point-form">

                <div class="global-error" id="global-error"></div>

                <div class="form-group" id="x-group">
                    <label><b>Изменение X (выберите хотя бы один):</b></label><br>
                    <div class="checkbox-group" style="margin-top: 10px;">
                        <label><input type="checkbox" name="xval" value="-2"> -2</label>
                        <label><input type="checkbox" name="xval" value="-1.5"> -1.5</label>
                        <label><input type="checkbox" name="xval" value="-1"> -1</label>
                        <label><input type="checkbox" name="xval" value="-0.5"> -0.5</label>
                        <label><input type="checkbox" name="xval" value="0"> 0</label><br>
                        <label><input type="checkbox" name="xval" value="0.5"> 0.5</label>
                        <label><input type="checkbox" name="xval" value="1"> 1</label>
                        <label><input type="checkbox" name="xval" value="1.5"> 1.5</label>
                        <label><input type="checkbox" name="xval" value="2"> 2</label>
                    </div>
                </div>

                <div class="form-group" id="y-group">
                    <label for="y-input"><b>Изменение Y:</b></label>
                    <input type="text" id="y-input" name="yval" placeholder="-3 ... 5">
                    <span class="error" id="y-error"></span>
                </div>

                <div class="form-group" id="r-group">
                    <label><b>Изменение R:</b></label><br>
                    <button type="button" class="r-button" data-val="1">1</button>
                    <button type="button" class="r-button" data-val="2">2</button>
                    <button type="button" class="r-button" data-val="3">3</button>
                    <button type="button" class="r-button" data-val="4">4</button>
                    <button type="button" class="r-button" data-val="5">5</button>
                    <input type="hidden" id="r-hidden" name="rval" value="">
                    <span class="error" id="r-error"></span>
                </div>

                <button type="submit" id="submit-btn" disabled>Проверить попадание</button>
            </form>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="content-cell">
            <h3>История проверок</h3>
            <button type="button" id="clear-history-btn">Очистить историю</button>

            <div class="table-scroll-container">
                <table id="results-table">
                    <thead>
                        <tr>
                            <th>X</th>
                            <th>Y</th>
                            <th>R</th>
                            <th>Результат</th>
                            <th>Дата и время</th>
                        </tr>
                    </thead>
                    <tbody id="results-body">
                        <!-- Данные из LocalStorage -->
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</table>

<img id="oscar-easter-egg" src="assets/oscar.png" alt="Toasty">
<script src="script.js"></script>
</body>
</html>