web/tablet: Adjust position of timer

Author: rkdarst

web/control.js

@@ -728,16 +728,16 @@ async function init_timers() {
                 endtime.setMinutes(parseInt(match_at[2]))
                 duration = match_at[4]*60 || null
                 endtime = Math.round(endtime.getTime()/1000)
-                console.log('timer parse', match_at, endtime, duration)
+                console.log('timer parse (end time)', match_at, endtime, duration)
             } else {
                 // Simple match
-                regex = /(\d\d?)(:(\d\d?))?(\/(\d\+))?/
+                regex = /(\d\d?)(:(\d\d?))?(\/(\d+))?/
                 match = input.value.match(regex)
                 minutes = match[1]
                 seconds = match[3] || 0
                 duration = match[5]*60 || null
                 endtime = Math.round(Date.now()/1000 + 60*parseInt(minutes)  + parseInt(seconds))
-                console.log('timer parse', match, minutes, seconds, duration)
+                console.log('timer parse (duration)', match, minutes, seconds, duration)
             }
             if (duration === null) {
                 duration = Math.round(endtime - Date.now()/1000)

web/tablet.html

@@ -47,7 +47,7 @@
 
     <div id="main" style="height: 100%; display: grid; grid-template-columns: 9fr 1fr; background-color: white"> <!-- main (contains panel/sidebar) -->
       <div style="display: grid; grid-template-rows: .5fr 4.5fr"> <!-- main panel -->
-        <div style="display: grid; grid-template-columns: repeat(9, 1fr); border: .5ex black solid"> <!-- top indicators -->
+        <div style="display: grid; grid-template-columns: repeat(10, 1fr); border: .5ex black solid"> <!-- top indicators -->
           <div class="live centered centeredV" title="When red, (audio, camera gallery, or screenshare) may be being broadcasted">Live</div>
           <button class="indicator" id="warning">Warn</button>
           <button class="indicator" id="caution">Caution</button>
@@ -57,13 +57,10 @@
           <button class="indicator" id="chat">Chat</button>
           <button class="indicator" id="slower">Slower</button>
           <button class="indicator" id="faster">Faster</button>
+          <input size="6" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @HH:MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through.">
         </div>
         <div style="display: grid; grid-template-columns: 1fr 2fr 2fr 1fr"> <!-- under indicators-->
           <div style="display:grid;"> <!-- first column-->
-            <div>
-              <div>Timer</div>
-              <div class="centered"><input size="6" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @HH:MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></div>
-            </div>
             <div>
               <div>Time:</div>
               <div class="time centered" title="Current time"></div>