280 lines
9.4 KiB
HTML
280 lines
9.4 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: 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 table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
#point-form td {
|
|
padding: 10px;
|
|
border: 1px dashed #aaaaaa;
|
|
}
|
|
|
|
#point-form 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;
|
|
}
|
|
|
|
#results-table {
|
|
width: 100%;
|
|
}
|
|
|
|
#results-table th {
|
|
background-color: #eeeeee;
|
|
padding: 8px;
|
|
}
|
|
|
|
#results-table td {
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
#results-table tbody {
|
|
display: block;
|
|
max-height: 250px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#results-table thead, #results-table tbody tr {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.content-cell[colspan="2"] > h3,
|
|
.content-cell[colspan="2"] > button {
|
|
display: block;
|
|
}
|
|
|
|
td.canvas-cell {
|
|
text-align: center;
|
|
}
|
|
|
|
td.canvas-cell > * {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
td.canvas-cell > p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#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-cell">
|
|
<h3>Область графика</h3>
|
|
<canvas id="graphCanvas" width="300" height="300"></canvas>
|
|
<p>(Точки отображаются относительно выбранного R)</p>
|
|
</td>
|
|
<td class="content-cell">
|
|
<h3>Форма проверки</h3>
|
|
<form id="point-form">
|
|
<table>
|
|
<tr>
|
|
<td colspan="2">
|
|
<span class="error" id="global-error"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" id="x-group">
|
|
<label><b>Изменение X (выберите хотя бы один):</b></label><br>
|
|
<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>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" 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>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" id="func-group">
|
|
<label for="func-input"><b>Пользовательская функция (необязательно):</b></label>
|
|
<input type="text" id="func-input" name="funcval" placeholder="sin(x) + abs(y) < R">
|
|
<button type="button" id="preview-func-btn" style="margin-left: 10px; padding: 4px 10px;">Отрисовать</button>
|
|
<span class="error" id="func-error"></span>
|
|
<table style="margin-top: 5px; font-size: 11px; color: #555; border: none;">
|
|
<tr>
|
|
<td style="border: none; padding: 2px;">
|
|
<b>Доступные функции:</b> abs(x), sin(x), cos(x), tan(x), sqrt(x), x^2 (степень)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="border: none; padding: 2px;">
|
|
<b>Переменные:</b> x, y, R
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="border: none; padding: 2px;">
|
|
<b>Примеры:</b> x^2 + y^2 < R^2 | sin(x) + abs(y) < R | abs(x) + abs(y) < R
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" 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>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<button type="submit" id="submit-btn" disabled>Проверить попадание</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="content-cell">
|
|
<h3>История проверок</h3>
|
|
<button type="button" id="clear-history-btn">Очистить историю</button>
|
|
<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>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<img id="oscar-easter-egg" src="assets/oscar.png" alt="Toasty">
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|