AudioMoth-Configuration-App/progressBar.html at master · OpenAcousticDevices/AudioMoth-Configuration-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="progress-bar-window-title">Flashing AudioMoth</title>
    <link rel="stylesheet" href="ui.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body style="display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f8f9fa;">
    <div id="progress-bar-holder" class="p-4" style="height: 100%; width: 100%; font-size: 10pt; overflow:hidden; font-family: Helvetica, Arial, sans-serif;-webkit-user-select: none; -webkit-app-region: drag;">
        <h5 id="progress-bar-heading" style="font-weight: bold; font-size: 11pt; margin-bottom: 15px;">Flashing AudioMoth...</h5>
        <p id="progress-bar-detail">Flashing AudioMoth</p>
        <div class="progress" style="height: 30px;">
            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <button id="cancel-button" class="btn btn-secondary" style="position: absolute; bottom: 20px; right: 20px;" disabled>Cancel</button>
    </div>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="progressBar.js"></script>
</body>
</html>