Ver 1.1
This commit is contained in:
AK
+67
-140
@@ -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;
|
||||
background-color: #F5F5F7;
|
||||
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;
|
||||
font-family: Arial, sans-serif;
|
||||
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;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* Каскадирование (Cascading) */
|
||||
#header span.variant {
|
||||
font-weight: 600;
|
||||
color: #007AFF;
|
||||
font-weight: bold;
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
/* Селектор классов (Class selector) */
|
||||
.content-cell {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
padding: 15px;
|
||||
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;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
border: none;
|
||||
margin-bottom: 20px; /* Отступы в px */
|
||||
padding: 10px; /* Отступы в px */
|
||||
border: 1px dashed #aaaaaa;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 15px; /* Отступ в px */
|
||||
}
|
||||
|
||||
#point-form input[type="text"] {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 10px 14px;
|
||||
margin-left: 10px; /* Отступ в px */
|
||||
padding: 4px; /* Отступ в px */
|
||||
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-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
padding: 8px 16px;
|
||||
background: #E5E5EA;
|
||||
color: #1D1D1F;
|
||||
border: none;
|
||||
margin-right: 10px; /* Отступ в px */
|
||||
padding: 5px 10px; /* Отступ в px */
|
||||
background-color: #dddddd;
|
||||
border: 1px solid #888888;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.r-button:hover {
|
||||
background: #D1D1D6;
|
||||
}
|
||||
|
||||
.r-button.active {
|
||||
background: #007AFF;
|
||||
color: #FFFFFF;
|
||||
background-color: #888888;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
padding: 12px 24px;
|
||||
background-color: #007AFF;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
margin-top: 15px; /* Отступ в px */
|
||||
padding: 8px 16px; /* Отступ в px */
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#submit-btn:disabled {
|
||||
background-color: #E5E5EA;
|
||||
color: #8E8E93;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#submit-btn:hover:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
background-color: #0066CC;
|
||||
#clear-history-btn {
|
||||
padding: 5px 10px; /* Отступ в px */
|
||||
margin-bottom: 10px; /* Отступ в px */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
font-size: 13px;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-top: 5px; /* Отступ в px */
|
||||
}
|
||||
|
||||
.global-error {
|
||||
color: #FF3B30;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px; /* Отступ в px */
|
||||
}
|
||||
|
||||
.table-scroll-container {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
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;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#results-table th {
|
||||
background-color: rgba(245, 245, 247, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #8E8E93;
|
||||
padding: 12px;
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid #E5E5EA;
|
||||
background-color: #eeeeee;
|
||||
padding: 8px; /* Отступ в px */
|
||||
}
|
||||
|
||||
#results-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #E5E5EA;
|
||||
color: #1D1D1F;
|
||||
}
|
||||
|
||||
#results-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
padding: 8px; /* Отступ в px */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
pointer-events: none;
|
||||
transition: bottom 0.25s linear;
|
||||
}
|
||||
#oscar-easter-egg.show {
|
||||
bottom: 0;
|
||||
@@ -227,7 +151,7 @@
|
||||
<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>
|
||||
@@ -272,7 +196,10 @@
|
||||
</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>
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user