Ver 1.1

index.html

@@ -5,208 +5,132 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Лабораторная работа №1</title>
     <style>
-
+        /* Демонстрация наследования (Inheritance) - шрифт наследуется всеми элементами */
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            font-family: Arial, sans-serif;
-            background-color: #F5F5F7;
+            background-color: #ffffff;
-            margin: 0;
-            padding: 20px;
-            color: #1D1D1F;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        #layout-table {
-            width: 100%;
-            max-width: 900px;
-            margin: 0 auto;
-            background: transparent;
-            border-collapse: separate;
-            border-spacing: 20px;
-        }
-
-        table, th, td {
-            border: none;
-        }
-
-        #header {
-            background-color: #FFFFFF;
             color: #000000;
             padding: 20px;
+            margin: 0;
+        }
+
+        /* Селектор идентификатора (ID Selector) */
+        #layout-table {
+            width: 800px;
+            margin: 0 auto;
+            border-collapse: collapse;
+        }
+
+        /* Селектор элементов (Element selector) */
+        table, th, td {
+            border: 1px solid #000000;
+        }
+
+        /* Оформление шапки: Явным образом задать шрифт (monospace), цвет и размер */
+        #header {
+            background-color: #eeeeee;
+            color: #000000; /* Каскадирование */
+            padding: 10px;
             text-align: center;
-            font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+            font-family: monospace; 
-            font-size: 16px;
+            font-size: 16px; 
-            border-radius: 16px;
-            box-shadow: 0 4px 24px rgba(0,0,0,0.04);
         }
 
+        /* Каскадирование (Cascading) */
         #header span.variant {
-            font-weight: 600;
+            font-weight: bold;
-            color: #007AFF;
+            color: #cc0000; 
         }
 
+        /* Селектор классов (Class selector) */
         .content-cell {
-            background: #FFFFFF;
+            padding: 15px;
-            border-radius: 16px;
-            padding: 30px;
             vertical-align: top;
             width: 50%;
-            box-shadow: 0 4px 24px rgba(0,0,0,0.04);
-        }
-
-        h3 {
-            margin-top: 0;
-            font-weight: 600;
-            letter-spacing: -0.5px;
         }
 
+        /* Селектор дочерних элементов (Child Selector `>`) */
         #point-form > .form-group {
-            background: #F5F5F7;
+            margin-bottom: 20px; /* Отступы в px */
-            border-radius: 12px;
+            padding: 10px; /* Отступы в px */
-            padding: 16px;
+            border: 1px dashed #aaaaaa;
-            margin-bottom: 20px;
-            border: none;
         }
 
         .checkbox-group label {
-            margin-right: 15px;
+            margin-right: 15px; /* Отступ в px */
-            display: inline-block;
-            font-size: 14px;
-            cursor: pointer;
         }
-
+        
         #point-form input[type="text"] {
-            margin-left: 10px;
+            margin-left: 10px; /* Отступ в px */
-            margin-right: 10px;
+            padding: 4px; /* Отступ в px */
-            padding: 10px 14px;
             width: 120px;
-            background: #E5E5EA;
-            border: 1px solid transparent;
-            border-radius: 8px;
-            font-size: 15px;
-            outline: none;
-            transition: all 0.2s ease;
-        }
-
-        #point-form input[type="text"]:focus {
-            background: #FFFFFF;
-            border: 1px solid #007AFF;
-            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
         }
 
         .r-button {
-            margin-right: 8px;
+            margin-right: 10px; /* Отступ в px */
-            margin-top: 10px;
+            padding: 5px 10px; /* Отступ в px */
-            margin-bottom: 5px;
+            background-color: #dddddd;
-            padding: 8px 16px;
+            border: 1px solid #888888;
-            background: #E5E5EA;
-            color: #1D1D1F;
-            border: none;
             cursor: pointer;
-            border-radius: 8px;
-            font-weight: 500;
-            transition: all 0.2s ease;
         }
-
+        
-        .r-button:hover {
-            background: #D1D1D6;
-        }
-
         .r-button.active {
-            background: #007AFF;
+            background-color: #888888;
-            color: #FFFFFF;
+            color: #ffffff;
         }
 
         #submit-btn {
-            margin-top: 10px;
+            margin-top: 15px; /* Отступ в px */
-            margin-bottom: 5px;
+            padding: 8px 16px; /* Отступ в px */
-            padding: 12px 24px;
-            background-color: #007AFF;
-            color: #FFFFFF;
-            border: none;
             cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-            border-radius: 12px;
-            width: 100%;
-            transition: all 0.2s ease;
         }
 
-        #submit-btn:disabled {
+        #clear-history-btn {
-            background-color: #E5E5EA;
+            padding: 5px 10px; /* Отступ в px */
-            color: #8E8E93;
+            margin-bottom: 10px; /* Отступ в px */
-            cursor: not-allowed;
+            cursor: pointer;
-        }
-
-        #submit-btn:hover:not(:disabled) {
-            transform: scale(0.98);
-            background-color: #0066CC;
         }
 
         .error {
-            color: #FF3B30;
+            color: red;
-            font-size: 13px;
+            font-size: 12px;
             display: block;
-            margin-top: 8px;
+            margin-top: 5px; /* Отступ в px */
         }
-
+        
         .global-error {
-            color: #FF3B30;
+            color: red;
-            font-weight: 600;
+            font-weight: bold;
-            margin-bottom: 12px;
+            margin-bottom: 10px; /* Отступ в px */
-            font-size: 14px;
         }
 
         .table-scroll-container {
             max-height: 250px;
-            overflow-y: auto;
+            overflow-y: scroll;
-            margin-top: 0px;
-            border-radius: 12px;
-            background: #FFFFFF;
-            border: 1px solid #E5E5EA;
-            box-sizing: border-box;
-        }
-
-        #results-table {
-            width: 100%;
-            border-collapse: collapse;
-            text-align: center;
-            font-size: 14px;
         }
 
         #results-table th {
-            background-color: rgba(245, 245, 247, 0.9);
+            background-color: #eeeeee;
-            backdrop-filter: blur(10px);
+            padding: 8px; /* Отступ в px */
-            color: #8E8E93;
-            padding: 12px;
-            font-weight: 600;
-            position: sticky;
-            top: 0;
-            z-index: 10;
-            border-bottom: 1px solid #E5E5EA;
         }
 
         #results-table td {
-            padding: 12px;
+            padding: 8px; /* Отступ в px */
-            border-bottom: 1px solid #E5E5EA;
+            text-align: center;
-            color: #1D1D1F;
-        }
-
-        #results-table tr:last-child td {
-            border-bottom: none;
         }
 
         .canvas-container {
             text-align: center;
         }
-        /* Oscar Piastri */
+
+        /* Пасхалка */
         #oscar-easter-egg {
             position: fixed;
             bottom: -350px;
             left: 0;
             max-width: 250px;
             z-index: 9999;
-            transition: bottom 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transition: bottom 0.25s linear;
-            pointer-events: none;
         }
         #oscar-easter-egg.show {
             bottom: 0;
@@ -218,8 +142,8 @@
 <table id="layout-table">
     <tr>
         <td colspan="2" id="header">
-            <span>ФИО: <b>Кливцов Александр Александрович</b></span> |
+            <span>ФИО: <b>Кливцов Александр Александрович</b></span> | 
-            <span>Группа: <b>P3215</b></span> |
+            <span>Группа: <b>P3215</b></span> | 
             <span class="variant">Вариант: 12729</span>
         </td>
     </tr>
@@ -227,12 +151,12 @@
         <td class="content-cell canvas-container">
             <h3>Область графика</h3>
             <canvas id="graphCanvas" width="300" height="300"></canvas>
-            <p style="font-size: 13px; color: #8E8E93; margin-top: 15px;">Точки отображаются относительно выбранного R</p>
+            <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">
@@ -249,13 +173,13 @@
                         <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>
@@ -266,13 +190,16 @@
                     <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" style="width: 100%; padding: 20px;">
+        <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>
@@ -297,4 +224,4 @@
 <img id="oscar-easter-egg" src="assets/oscar.png" alt="Toasty">
 <script src="script.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -16,6 +16,7 @@ const checkboxes = document.querySelectorAll('input[name="xval"]');
 const submitBtn = document.getElementById('submit-btn');
 const globalError = document.getElementById('global-error');
 const resultsBody = document.getElementById('results-body');
+const clearHistoryBtn = document.getElementById('clear-history-btn');
 
 // Б - безопасность
 const STORAGE_KEY = 'web_lab1_history';
@@ -40,6 +41,15 @@ try {
 
 // Пошло поехало
 window.addEventListener('DOMContentLoaded', () => {
+    // Очистка истории
+    if (clearHistoryBtn) {
+        clearHistoryBtn.addEventListener('click', () => {
+            history = [];
+            localStorage.removeItem(STORAGE_KEY);
+            renderHistory();
+            drawGraph();
+        });
+    }
     renderHistory();
     drawGraph();
     validateForm();