2023-07-14 04:00:37 +00:00
|
|
|
{% extends "base.html" %}
|
|
|
|
|
|
|
|
{% block style %}
|
2023-07-14 15:48:14 +00:00
|
|
|
<style>
|
|
|
|
#camera_list_items {
|
|
|
|
max-height: 500px;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
#events_list {
|
|
|
|
max-height: 500px;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
2023-08-07 20:55:20 +00:00
|
|
|
|
|
|
|
.progress {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
z-index: 1000;
|
|
|
|
height: 4px;
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 2px;
|
|
|
|
background-clip: padding-box;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.progress .indeterminate:before {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
background-color: inherit;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
will-change: left, right;
|
|
|
|
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
|
|
|
|
infinite;
|
|
|
|
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
|
|
}
|
|
|
|
.progress .indeterminate:after {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
background-color: inherit;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
will-change: left, right;
|
|
|
|
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
|
|
|
|
infinite;
|
|
|
|
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
|
|
|
|
infinite;
|
|
|
|
-webkit-animation-delay: 1.15s;
|
|
|
|
animation-delay: 1.15s;
|
|
|
|
}
|
|
|
|
.progress {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.htmx-request .progress {
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
.htmx-request.progress {
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate {
|
|
|
|
0% {
|
|
|
|
left: -35%;
|
|
|
|
right: 100%;
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
left: 100%;
|
|
|
|
right: -90%;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
left: 100%;
|
|
|
|
right: -90%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
|
|
0% {
|
|
|
|
left: -35%;
|
|
|
|
right: 100%;
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
left: 100%;
|
|
|
|
right: -90%;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
left: 100%;
|
|
|
|
right: -90%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate-short {
|
|
|
|
0% {
|
|
|
|
left: -200%;
|
|
|
|
right: 100%;
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
left: 107%;
|
|
|
|
right: -8%;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
left: 107%;
|
|
|
|
right: -8%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes indeterminate-short {
|
|
|
|
0% {
|
|
|
|
left: -200%;
|
|
|
|
right: 100%;
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
left: 107%;
|
|
|
|
right: -8%;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
left: 107%;
|
|
|
|
right: -8%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-07-14 15:48:14 +00:00
|
|
|
</style>
|
2023-07-14 04:00:37 +00:00
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
{% block current_user %}
|
|
|
|
{{ template_values['current_user']['email'] }}
|
|
|
|
<a href="/logout" tabindex="-1">Logout</a>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
{% block main %}
|
|
|
|
|
2023-08-07 20:55:20 +00:00
|
|
|
<div class="progress" style="height: 3px; background-color: white;">
|
|
|
|
<div class="indeterminate" style="background-color: red;"></div>
|
|
|
|
</div>
|
|
|
|
|
2023-07-14 06:11:14 +00:00
|
|
|
<div class="container text-center">
|
|
|
|
|
2023-07-26 13:34:33 +00:00
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-5" id="camera_list" style="max-height:400px; overflow:auto;">
|
|
|
|
{% include 'cameras_partial.html' %}
|
|
|
|
</div>
|
|
|
|
<div class="col-md-7" id="camera_detail">
|
2023-08-07 18:55:58 +00:00
|
|
|
<h2>Preview Image <i class="bi bi-card-image"></i></h2>
|
2023-07-26 13:34:33 +00:00
|
|
|
</div>
|
2023-07-14 06:11:14 +00:00
|
|
|
</div>
|
2023-07-26 13:34:33 +00:00
|
|
|
<br>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-5" id="camera_status_events" style="max-height:400px; overflow:auto;">
|
2023-08-07 18:55:58 +00:00
|
|
|
<h2>List of Events <i class="bi bi-calendar-event"></i></h2>
|
2023-07-26 13:34:33 +00:00
|
|
|
</div>
|
|
|
|
<div class="col-md-7" id="camera_status_plot">
|
2023-08-07 18:55:58 +00:00
|
|
|
<h2>Graph of Status Events <i class="bi bi-bar-chart"></i></h2>
|
2023-07-26 13:34:33 +00:00
|
|
|
</div>
|
2023-07-24 21:10:38 +00:00
|
|
|
</div>
|
|
|
|
|
2023-07-14 04:00:37 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
{% endblock %}
|