From cb77f4f9db6447cde0fcd8373dd17d937c2cb42f Mon Sep 17 00:00:00 2001
From: Kody <im@kdy.ch>
Date: Tue, 5 Nov 2024 09:08:32 +0100
Subject: [PATCH] Improvements for no-js/textual browsers

---
 index.php | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/index.php b/index.php
index 0ea0a83..d689d04 100644
--- a/index.php
+++ b/index.php
@@ -126,8 +126,7 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {
         echo '        ' . toTZ($dt, $_COOKIE['user-tz'], 'l \t\h\e jS \o\f F, Y \a\t ' . $hm) . PHP_EOL;
       } else if ($_COOKIE['has-js'] !== '1') {
 ?>
-        Sorry, we use JavaScript to detect your local time.<br/>
-        Enable it or select your time zone:<br/>
+        Please select your local time zone <small>(or enable JavaScript)</small>:<br/>
         <form method="post">
           <select required id="user-tz" name="user-tz">
             <option selected disabled>(pick one)</option>
@@ -146,9 +145,11 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {
 <?php } ?>
             </optgroup>
           </select>
-          <button type="submit">Submit</button><br/>
+          <br/>
           <input type="checkbox" id="user-24" name="user-24"/>
           <label for="user-24"><span>24h format</span></label>
+          <br/>
+          <button type="submit">Submit</button>
         </form>
 <?php } else { ?>
         Did you turn off Javascript?<br/>
@@ -174,7 +175,6 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {
     </div>
 
     <div class="share">
-      <button type="button" onclick="shareURL()">Share</button>
       <input type="hidden" id="url" value="https://tz.kdy.ch<?= $_SERVER['REQUEST_URI'] ?>"/>
     </div>
 
@@ -195,7 +195,11 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {
       document.querySelector('.local').innerHTML = localDT + '<br/><span>(' + relative + ')</span>'
 
       // Display share button
-      document.querySelector('.share').style.display = 'block'
+      const shareButton = document.createElement('button')
+      shareButton.type = 'button'
+      shareButton.textContent = 'Share'
+      shareButton.onclick = shareURL
+      document.querySelector('.share').appendChild(shareButton)
 
       // Our share URL function
       function shareURL () {
@@ -242,6 +246,10 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {
     </p>
 
     <form action="/" method="post">
+      <noscript>
+        <small>(If you only see a plain input, use the "YYYY-MM-DD HH:MM" format.)</small>
+        <br/>
+      </noscript>
       <label for="datetime">Date and Time:</label>
       <input required type="datetime-local" id="datetime" name="datetime"/>
 
-- 
2.51.2