Aklivtsov/Web-Lab-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ver 2.0

Browse Source
This commit is contained in:
Aklivtsov
2026-10-06 10:28:24 +03:00
parent 11b6ac9433
commit 9afbc04a7d
6 changed files with 1218 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+122 -64
View File
@@ -44,13 +44,17 @@
width: 50%;
}
#point-form > .form-group {
margin-bottom: 20px;
#point-form table {
width: 100%;
border-collapse: collapse;
}
#point-form td {
padding: 10px;
border: 1px dashed #aaaaaa;
}
.checkbox-group label {
#point-form label {
margin-right: 15px;
}
@@ -98,9 +102,8 @@
margin-bottom: 10px;
}
.table-scroll-container {
max-height: 250px;
overflow-y: scroll;
#results-table {
width: 100%;
}
#results-table th {
@@ -113,10 +116,36 @@
text-align: center;
}
.canvas-container {
#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;
@@ -141,50 +170,84 @@
</td>
</tr>
<tr>
<td class="content-cell canvas-container">
<td class="content-cell canvas-cell">
<h3>Область графика</h3>
<canvas id="graphCanvas" width="300" height="300"></canvas>
<p style="font-size: 12px;">(Точки отображаются относительно выбранного R)</p>
<p>(Точки отображаются относительно выбранного 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>
<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>
@@ -192,30 +255,25 @@
<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>
<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>
<script src="https://cdn.jsdelivr.net/npm/yopta-script@latest/yopta.min.js"></script>
<script src="script.ys" type="text/yopta"></script>
</body>
</html>