Time-Distributor/index.html at main · jm55/Time-Distributor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="public/js/script.js"></script>
        <script src="public/js/compute.js"></script>
        <script src="public/js/gui.js"></script>
        <script src="https://unpkg.com/validator@latest/validator.min.js"></script>
        <link rel="stylesheet" href="public/css/style.css">
        <title>Time Distributor</title>
    </head>
    <header>
        <h1><a href="https://jm55dlsu.github.io/TimeDistributor/" style="color: black;">Time Distributor</a></h1>
        <p>The downloadable Java app is found <a href="https://github.com/jm55/TimeDistributor/releases">here</a> and the web app's instruction document is <a href="https://github.com/jm55/TimeDistributor/blob/main/.others/WebApp_Instructions.pdf">here</a>.</p>
        <p>©2022 <a href="mailto:jm.escalona@outlook.com">エスカローナミゲル</a></p>
    </header>
    <br>
    <body>
        <div id="input_div">
            <div id="inputs">
                <h2>Input: </h2>
                <label id="aTime_label">Total Time (hh:mm:ss): </label>
                <span id="aTime_span">
                    <input type="number" min="0" class="time" id="aTime_h" placeholder="hh">:
                    <input type="number" min="0" class="time" id="aTime_m" placeholder="mm">:
                    <input type="number" min="0" class="time" id="aTime_s" placeholder="ss">
                </span>
                <label id="bTime_label">Duration Time (hh:mm:ss): </label>
                <span id="bTime_span">
                    <input type="number" min="0" class="time" id="bTime_h" placeholder="hh">:
                    <input type="number" min="0" class="time" id="bTime_m" placeholder="mm">:
                    <input type="number" min="0" class="time" id="bTime_s" placeholder="ss">
                </span>
                <span id="startendMode_span">
                    <label>Start-End Mode: </label>
                    <input type="checkbox" id="startendMode">
                </span>
                <span id="names_file">
                    <label>Names File (.txt; separated by new line): </label>
                    <input style="margin-top: 10px;" type="file" id="files" name="files" accept=".txt">
                </span>
                <span style="display: flexbox;">
                    <button id="compute">Compute</button>
                    <button id="reset">Reset</button>
                    <button style="margin-top: 10px; width: inherit;" id="recommended">Recommended Duration</button>
                </span>
            </div>
        </div>
        <div id="output_div">
            <div id="outputs">
                <h2>Output: </h2>
                <p id="nameCounter">Name(s) detected: 0</p>
                <p id="recommendCounter">Recommended Count: 0</p>
                <p id="recommendDuration">Recommended Duration: hh:mm:ss</p>
                <h3>Output Table:</h3>
                <table id="output_table">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Duration (sec)</th>
                    </tr>
                </table>
                <hr>
                <button id="save">Save</button>
                <p>You can open the file via any spreadsheet software.</p>
            </div>
        </div>
    </body>
    <br>
</html>