You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
7.8 KiB
156 lines
7.8 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>布防时间计划</title>
|
|
<link rel="stylesheet" href="{{ url_for('main.static', filename='css/bootstrap.min.css') }}">
|
|
<style>
|
|
.schedule-table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.schedule-table th, .schedule-table td {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
border: 1px solid #dee2e6;
|
|
padding: 8px;
|
|
}
|
|
.schedule-table td.allowed {
|
|
background-color: white;
|
|
}
|
|
.schedule-table td.blocked {
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<table class="schedule-table table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>小时</th>
|
|
<th>00</th>
|
|
<th>01</th>
|
|
<th>02</th>
|
|
<th>03</th>
|
|
<th>04</th>
|
|
<th>05</th>
|
|
<th>06</th>
|
|
<th>07</th>
|
|
<th>08</th>
|
|
<th>09</th>
|
|
<th>10</th>
|
|
<th>11</th>
|
|
<th>12</th>
|
|
<th>13</th>
|
|
<th>14</th>
|
|
<th>15</th>
|
|
<th>16</th>
|
|
<th>17</th>
|
|
<th>18</th>
|
|
<th>19</th>
|
|
<th>20</th>
|
|
<th>21</th>
|
|
<th>22</th>
|
|
<th>23</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Repeat above row for each day of the week (Monday to Saturday) -->
|
|
<tr>
|
|
<th>星期一</th>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>星期二</th>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>星期三</th>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>星期四</th>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>星期五</th>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>星期六</th>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>星期日</th>
|
|
<!-- 24 cells for each hour -->
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
<td class="blocked"></td><td class="blocked"></td><td class="blocked"></td><td class="blocked"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="mt-3">
|
|
<div class="d-inline-block mr-3">
|
|
<div class="d-inline-block align-middle" style="width: 20px; height: 20px; background-color: white; border: 1px solid black;"></div>
|
|
<span class="align-middle">允许</span>
|
|
</div>
|
|
<div class="d-inline-block">
|
|
<div class="d-inline-block align-middle" style="width: 20px; height: 20px; background-color: blue;"></div>
|
|
<span class="align-middle">阻止</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cells = document.querySelectorAll('.schedule-table tbody td');
|
|
cells.forEach(cell => {
|
|
cell.addEventListener('click', () => {
|
|
if (cell.classList.contains('blocked')) {
|
|
cell.classList.remove('blocked');
|
|
cell.classList.add('allowed');
|
|
} else {
|
|
cell.classList.remove('allowed');
|
|
cell.classList.add('blocked');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|