Display elapsed time for offline participations

app/views/contests/offline_edit.html.slim

@@ -1,9 +1,23 @@
 = form_with model: @offline, url: "/public/#{@contest.friendly_id}/offline/#{@offline.generate_token_for(:token)}" do |form|
   = form.hidden_field :completed
-  .row.mb-3
+  h3 = t("offlines.form.start_message")
+  h1 id="display-time" style="font-size: 80px;"
+  javascript:
+    const startTime = #{@offline.start_time.to_i};
+    function updateTime() {
+      const displayTimeEl = document.getElementById('display-time');
+      const s = Math.floor((Date.now() - 1000 * startTime) / 1000);
+      let ss = s % 60;
+      let mm = Math.floor(s / 60) % 60;
+      let hh = Math.floor(s / 3600);
+      displayTimeEl.innerHTML = `${hh < 10 ? `0${hh}` : hh}:${mm < 10 ? `0${mm}` : mm}:${ss < 10 ? `0${ss}` : ss}`;
+      setTimeout(updateTime, 1000);
+    }
+    setTimeout(updateTime, 5);
+  .row.mt-5.mb-3
     .col
       .form-text.mb-1
-        = t("offlines.end_image_select")
+        = t("offlines.form.end_image_select")
       = form.file_field :end_image, accept: "image/*", class: "form-control"
       .form-text.error-message style="display: none;" id="image-error-message"
         = t("puzzles.form.file_too_big")

app/views/contests/offline_new.html.slim

@@ -7,7 +7,7 @@
   .row.mb-3
     .col
       .form-text.mb-1
-        = t("offlines.start_image_select")
+        = t("offlines.form.start_image_select")
       = form.file_field :images, accept: "image/*", class: "form-control"
       .form-text.error-message style="display: none;" id="image-error-message"
         = t("puzzles.form.file_too_big")