AK
301 lines
9.3 KiB
HTML
301 lines
9.3 KiB
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: -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;
|
|
color: #000000;
|
|
padding: 20px;
|
|
text-align: center;
|
|
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
|
|
font-size: 16px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
#header span.variant {
|
|
font-weight: 600;
|
|
color: #007AFF;
|
|
}
|
|
|
|
.content-cell {
|
|
background: #FFFFFF;
|
|
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;
|
|
}
|
|
|
|
#point-form > .form-group {
|
|
background: #F5F5F7;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
border: none;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
margin-right: 15px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#point-form input[type="text"] {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
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-top: 10px;
|
|
margin-bottom: 5px;
|
|
padding: 8px 16px;
|
|
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;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
#submit-btn {
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
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 {
|
|
background-color: #E5E5EA;
|
|
color: #8E8E93;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#submit-btn:hover:not(:disabled) {
|
|
transform: scale(0.98);
|
|
background-color: #0066CC;
|
|
}
|
|
|
|
.error {
|
|
color: #FF3B30;
|
|
font-size: 13px;
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.global-error {
|
|
color: #FF3B30;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#results-table td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #E5E5EA;
|
|
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);
|
|
pointer-events: none;
|
|
}
|
|
#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: 13px; color: #8E8E93; margin-top: 15px;">Точки отображаются относительно выбранного 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" style="width: 100%; padding: 20px;">
|
|
<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>
|