Time Zones Are Hard - https://tz.rita.moe

Fix cookie duration; Lighter page if JS

Otherwise I'm sending the full list inside the noscript tag every time.
I added a button to show the form again in case JS is disabled later.

Changed files
+25 -9
+25 -9
index.php
···
// User sets 24 hours
if (isset($_POST['user-24'])) {
-
setcookie('user-24', '1', time() + 60 * 60 * 24);
+
setcookie('user-24', '1', time() + 60 * 60 * 24 * 365);
$_COOKIE['user-24'] = '1';
+
}
+
+
// If had JS enabled but doesn't now, remove cookie
+
if (isset($_POST['no-js'])) {
+
setcookie('has-js', '0', time() + 60 * 60 * 24 * 365);
+
$_COOKIE['has-js'] = '0';
}
// Micro-routing
···
<?php
if (isset($_COOKIE['user-tz'])) {
$hm = $_COOKIE['user-24'] === '1' ? 'H:i' : 'h:i a';
-
echo toTZ($dt, $_COOKIE['user-tz'], 'l \t\h\e jS \o\f F, Y \a\t ' . $hm);
-
} else {
+
// I put spaces just so it looks nice in the source code
+
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/>
···
<input type="checkbox" id="user-24" name="user-24"/>
<label for="user-24"><span>24h format</span></label>
</form>
-
<?php
-
}
-
?>
+
<?php } else { ?>
+
Did you turn off Javascript?<br/>
+
<form method="post">
+
<input type="hidden" name="no-js" value="1"/>
+
<button type="submit">Reload to no-JS</button>
+
</form>
+
<?php } ?>
</noscript>
</h2>
···
<div class="tz-table">
<?php foreach($popTZ as $tz) { ?>
<div class="tz-table-element">
-
<strong>
-
<?= $tz === 'UTC' ? 'UTC' : str_replace('_', ' ', explode('/', $tz, 2)[1]) . ' (' . getOffset($tz) . ')' ?>
-
</strong>
+
<strong><?= $tz === 'UTC' ? 'UTC' : str_replace('_', ' ', explode('/', $tz, 2)[1]) . ' (' . getOffset($tz) . ')' ?></strong>
<br/>
<span><?= toTZ($dt, $tz) ?></span>
</div>
···
&copy; <?= date('Y') ?> Kody - Made with 🍮<br/>
<a href="https://thenounproject.com/icon/wall-clock-5456766/" target="_blank" title="Wall Clock Icon" rel="noopener">Wall Clock by Basicon</a> from Noun Project (CC BY 3.0)
</footer>
+
+
<script>
+
// Save on the request size if user has JavaScript
+
const date = new Date()
+
date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 365))
+
document.cookie = 'has-js=1; expires=' + date.toUTCString() + '; path=/'
+
</script>
</body>
</html>