LearnerLog/statistics.html at main · jridz/LearnerLog · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LearnerLog</title>
    <link rel=preconnect href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="global.css"/>
    <link rel="stylesheet" href="styles/statistics.css"/>
    <link rel="preload" href="./assets/fonts/inter_variable.ttf" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="./assets/fonts/inter_italic_variable.ttf" as="font" type="font/woff2"
          crossorigin="anonymous">
    <link rel="icon" href="assets/branding/LearnerLog.svg"/>
    <link rel="apple-touch-icon" href="assets/branding/LearnerLog.png"/>
    <link rel="manifest" href="manifest.json"/>
    <script type="module" src="app.js"></script>
    <script type="module" src="scripts/statistics.js"></script>
</head>
<body class="hidden">
<nav id="navMenu">
    <a href="index.html">
        <div class="navIcon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
            </svg>
        </div>
        <p>Home</p>
    </a>
    <a href="statistics.html">
        <div class="navIcon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="M120-120v-80l80-80v160h-80Zm160 0v-240l80-80v320h-80Zm160 0v-320l80 81v239h-80Zm160 0v-239l80-80v319h-80Zm160 0v-400l80-80v480h-80ZM120-327v-113l280-280 160 160 280-280v113L560-447 400-607 120-327Z"/>
            </svg>
        </div>
        <p>Statistics</p>
    </a>
    <a href="settings.html">
        <div class="navIcon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
            </svg>
        </div>
        <p>Settings</p>
    </a>
</nav>
<div id="content">
    <div id="header">
        <div class="logo">
            <img src="assets/branding/LearnerLog.svg" alt="LearnerLog logo"/>
            <h1>LearnerLog</h1>
        </div>
    </div>
    <main>
        <h2>Statistics</h2>
        <h3>Total Hours</h3>
        <div class="fillBar" id="totalTime"></div>
        <h3>Average Session Length</h3>
        <div class="filledBar" id="averageSessionLength"></div>
        <h3>Number Of Sessions</h3>
        <div class="filledBar" id="numberOfSessions"></div>
        <h3>Total Days Active</h3>
        <div class="filledBar" id="totalDaysActive"></div>
        <h3>Average Sessions Per Day</h3>
        <div class="filledBar" id="averageSessionsPerDay"></div>
        <h3>Longest Session</h3>
        <div class="filledBar" id="longestSession"></div>
    </main>
</div>
</body>
</html>