65 lines
3.9 KiB
HTML
65 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<link rel="stylesheet" href="{{ url_for('ui.static', filename='css/style.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('ui.static', filename='css/reset.min.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('ui.static', filename='css/flexboxgrid.min.css') }}">
|
|
<link rel="icon" href="{{ url_for('ui.static', filename='favicon.ico') }}" type="image/x-icon">
|
|
|
|
<script src="{{ url_for('ui.static', filename='split-type.js') }}"></script>
|
|
<script src="{{ url_for('ui.static', filename='gsap.min.js') }}"></script>
|
|
<script src="{{ url_for('ui.static', filename='script.js') }}"></script>
|
|
|
|
<title>Devices</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="preloader">
|
|
<div class="progress-container">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<div class="text-container">
|
|
<div class="loading-text initial">Loading</div>
|
|
<div class="loading-text complete">Complete</div>
|
|
</div>
|
|
<div class="percentage">0</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<section>
|
|
<div class="row">
|
|
{% set classes = ["item-a", "item-b", "item-c"] %}
|
|
{% for device in devices %}
|
|
<div class="col-md-4 col-sm-6 col-xs-12">
|
|
<div class="card">
|
|
<div class="cover {{ classes[loop.index0 % classes|length] }}">
|
|
<h1>{{ device|capitalize }}</h1>
|
|
<div class="card-back">
|
|
<a href="javascript:void(0);" data-action="openModal" data-action-type="wol" data-device="{{ device }}">Wake Up</a>
|
|
<a href="javascript:void(0);" data-action="openModal" data-action-type="ping" data-device="{{ device }}">Ping</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<div id="loading-spinner" class="spinner" style="display: none;">
|
|
|
|
<div class="semi-circle semi-circle-1"></div>
|
|
<div class="semi-circle semi-circle-2"></div>
|
|
<div class="semi-circle semi-circle-3"></div>
|
|
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;M12 2 Q6.5 2.2 3.3 7 Q2 9.5 2 12 Q2 15 3.4 17 Q6.5 22 12 22;" /> </path> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;" /> </path> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q15 2.2 16.6 7 Q17.5 9.5 17.5 12 Q17.5 15 16.7 17 Q15 22 12 22;M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;" /> </path> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q17.5 2.2 20.7 7 Q22 9.5 22 12 Q22 15 20.6 17 Q17.5 22 12 22;M12 2 Q15 2.2 16.6 7 Q17.5 9.5 17.5 12 Q17.5 15 16.7 17 Q15 22 12 22;" /> </path> <circle cx="12" cy="12" r="10" /> <path d="M2.4 8.6 Q6 7.1 12 7 Q18 7.1 21.6 8.6" /> <path d="M2.4 15.2 Q6 17.1 12 17.2 Q17 17.1 21.6 15.2" /> <path> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q6.5 2.2 3.3 7 Q2 9.5 2 12 Q2 15 3.4 17 Q6.5 22 12 22;M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;" /> </path> <path> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;" /> </path> <path> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;M12 2 Q15 2.2 16.6 7 Q17.5 9.5 17.5 12 Q17.5 15 16.7 17 Q15 22 12 22;M12 2 Q17.5 2.2 20.7 7 Q22 9.5 22 12 Q22 15 20.6 17 Q17.5 22 12 22;" /> </path> </svg>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|