basicPitHtml/Pit Website.htm at master · frc4123/basicPitHtml · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robot Run Through</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 5em;
            font-weight: bold;
            color: black;
        }

        #page1 {
            background-color: #ff6666; /* Slightly darker red color */
        }

        #page2 {
            background-color: green;
            display: none;
        }

        #page3 {
            background-color: #add8e6; /* Pastel blue */
            display: none;
        }

        #logo {
            position: absolute;
            bottom: 10px;
            left: 10px;
            max-width: 200px; /* Increased size of the logo */
            max-height: 200px; /* Increased size of the logo */
        }

        #thumbsUp {
            font-size: 1.5em; /* Adjust the size of the emoji */
        }

        #freshBatteryCheckboxContainer {
            margin-top: 20px;
        }

        #freshBatteryCheckbox {
            display: none;
        }

        #freshBatteryLabel {
            font-size: 1em;
            color: #333; /* Dark gray color for better visibility */
            cursor: pointer;
        }

        #finalTimerValue {
            font-size: 1em; /* Adjusted font size for "Final Time" */
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div id="page1" class="page">
    Pit Procedure: In Process
    <div id="timerContainer"></div>
</div>

<div id="page2" class="page">
    <div>Pit Procedure: Finished</div>
    <div id="thumbsUp">👍</div>
    <div id="freshBatteryCheckboxContainer" onclick="toggleFreshBatteryCheckbox()">
        <input type="checkbox" id="freshBatteryCheckbox">
        <label id="freshBatteryLabel" for="freshBatteryCheckbox">Fresh Battery?</label>
    </div>
    <div id="finalTimerValue"></div>
</div>

<div id="page3" class="page">
    Away At Match
</div>

<img id="logo" src="https://frc4123.files.wordpress.com/2019/02/cropped-4123_2016-logo_3a_nobg_padded_512.png?w=200" alt="Logo">

<script>
    let currentPage = 1;
    let spaceEnabled = true;
    let timerInterval;
    let timerSeconds = 0;

    function toggleFreshBatteryCheckbox() {
        const checkbox = document.getElementById('freshBatteryCheckbox');
        checkbox.checked = !checkbox.checked;
        spaceEnabled = checkbox.checked;
    }

    function startTimer() {
        timerInterval = setInterval(function () {
            timerSeconds++;
            document.getElementById('timerContainer').innerText = `Timer: ${formatTime(timerSeconds)}`;
        }, 1000);
    }

    function stopTimer() {
        clearInterval(timerInterval);
        document.getElementById('finalTimerValue').innerText = `Final Time: ${formatTime(timerSeconds)}`;
        timerSeconds = 0;
    }

    function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
    }

    document.body.addEventListener('keydown', function(event) {
        if (event.code === 'Space' && spaceEnabled) {
            switch (currentPage) {
                case 1:
                    document.getElementById('page1').style.display = 'none';
                    document.getElementById('page2').style.display = 'flex';
                    spaceEnabled = false; // Disable space bar on green page
                    stopTimer();
                    break;
                case 2:
                    document.getElementById('page2').style.display = 'none';
                    document.getElementById('page3').style.display = 'flex';
                    break;
                case 3:
                    document.getElementById('page3').style.display = 'none';
                    document.getElementById('page1').style.display = 'flex';
                    spaceEnabled = true; // Re-enable space bar on red page
                    startTimer();
                    break;
            }
            currentPage = (currentPage % 3) + 1;
        }
    });

    startTimer(); // Start the timer when the page loads
</script>

</body>
</html>