···

       
1
       
-
       
body{background-color:#efefef;color:#000;font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;margin:0 auto;max-width:900px}header{background:#fff;border-radius:10px;margin:1rem .5rem 0;padding:1rem 1.5rem}header h1{font-size:1.5rem;margin:0}@media screen and (min-width: 500px){header h1{font-size:2rem}}header a{color:inherit;text-decoration:none}main{padding:1rem 2rem}main h2{font-size:1.5rem;margin:1rem 0;text-align:center}main h2 span{font-size:1.2rem}main form{line-height:2rem}main button{cursor:pointer}main .tz-table{column-gap:1rem;display:grid;grid-template-columns:repeat(1, 1fr);row-gap:1rem;text-align:center}@media screen and (min-width: 440px){main .tz-table{grid-template-columns:repeat(2, 1fr)}}@media screen and (min-width: 630px){main .tz-table{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 820px){main .tz-table{grid-template-columns:repeat(4, 1fr)}}footer{color:gray;font-size:.7rem;margin-top:1rem;padding:1rem;text-align:center}@media screen and (prefers-color-scheme: dark){body{background-color:#111;color:#fff}header{background:#000}}/*# sourceMappingURL=styles.css.map */

     

···

       
1
       
+
       
body{background-color:#efefef;color:#000;font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;margin:0 auto;max-width:900px}header{background:#fff;border-radius:10px;margin:1rem .5rem 0;padding:1rem 1.5rem}header h1{font-size:1.5rem;margin:0}@media screen and (min-width: 500px){header h1{font-size:2rem}}header a{color:inherit;text-decoration:none}main{padding:1rem 2rem}main h2{font-size:1.5rem;margin:1rem 0;text-align:center}main h2 span{font-size:1.2rem}main form{line-height:2rem}main button{cursor:pointer}main .tz-table{display:flex;flex-wrap:wrap;justify-content:center;text-align:center}main .tz-table .tz-table-element{flex:0 0 calc(100% - 1rem);margin:1rem .5rem}@media screen and (min-width: 440px){main .tz-table .tz-table-element{flex:0 0 calc(50% - 1rem)}}@media screen and (min-width: 630px){main .tz-table .tz-table-element{flex:0 0 calc(33% - 1rem)}}@media screen and (min-width: 820px){main .tz-table .tz-table-element{flex:0 0 calc(25% - 1rem)}}footer{color:gray;font-size:.7rem;margin-top:1rem;padding:1rem;text-align:center}@media screen and (prefers-color-scheme: dark){body{background-color:#111;color:#fff}header{background:#000}}/*# sourceMappingURL=styles.css.map */

     

···

       
1
       
-
       
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA,KACE,yBACA,WACA,gGACA,cACA,gBAGF,OACE,gBACA,mBACA,oBACA,oBAEA,UACE,iBACA,SAEA,qCAJF,UAKI,gBAIJ,SACE,cACA,qBAIJ,KACE,kBAEA,QACE,iBACA,cACA,kBAEA,aACE,iBAIJ,UACE,iBAGF,YACE,eAGF,eACE,gBACA,aACA,qCACA,aACA,kBAEA,qCAPF,eAQI,sCAGF,qCAXF,eAYI,sCAGF,qCAfF,eAgBI,sCAKN,OACE,WACA,gBACA,gBACA,aACA,kBAGF,+CACE,KACE,sBACA,WAGF,OACE","file":"styles.css"}
     

···

       
1
       
+
       
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA,KACE,yBACA,WACA,gGACA,cACA,gBAGF,OACE,gBACA,mBACA,oBACA,oBAEA,UACE,iBACA,SAEA,qCAJF,UAKI,gBAIJ,SACE,cACA,qBAIJ,KACE,kBAEA,QACE,iBACA,cACA,kBAEA,aACE,iBAIJ,UACE,iBAGF,YACE,eAGF,eACE,aACA,eACA,uBACA,kBAIA,iCACE,2BACA,kBAEA,qCAJF,iCAKI,2BAGF,qCARF,iCASI,2BAGF,qCAZF,iCAaI,2BAMR,OACE,WACA,gBACA,gBACA,aACA,kBAGF,+CACE,KACE,sBACA,WAGF,OACE","file":"styles.css"}
     

···

       
49
       
 
       
  }

     

       
50
       
 
       
  

     

       
51
       
 
       
  .tz-table {

     

       
52
       
-
       
    column-gap: 1rem;

     

       
53
       
-
       
    display: grid;

     

       
54
       
-
       
    grid-template-columns: repeat(1, 1fr);

     

       
55
       
-
       
    row-gap: 1rem;

     

       
56
       
 
       
    text-align: center;

     

       
57
       
-
       
  

     

       
58
       
-
       
    @media screen and (min-width: 440px) {

     

       
59
       
-
       
      grid-template-columns: repeat(2, 1fr);

     

       
60
       
-
       
    }

     

       
61
       
-
       
  

     

       
62
       
-
       
    @media screen and (min-width: 630px) {

     

       
63
       
-
       
      grid-template-columns: repeat(3, 1fr);

     

       
64
       
-
       
    }

     

       
65
       
-
       
  

     

       
66
       
-
       
    @media screen and (min-width: 820px) {

     

       
67
       
-
       
      grid-template-columns: repeat(4, 1fr);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
68
       
 
       
    }

     

       
69
       
 
       
  }

     

       
70
       
 
       
}

     

···

       
49
       
 
       
  }

     

       
50
       
 
       
  

     

       
51
       
 
       
  .tz-table {

     

       
52
       
+
       
    display: flex;

     

       
53
       
+
       
    flex-wrap: wrap;

     

       
54
       
+
       
    justify-content: center;

     

       
0
       
 
       

     

       
55
       
 
       
    text-align: center;

     

       
56
       
+
       


     

       
57
       
+
       
    $vertical-spacing: 1rem;

     

       
58
       
+
       


     

       
59
       
+
       
    .tz-table-element {

     

       
60
       
+
       
      flex: 0 0 calc(100% - $vertical-spacing);

     

       
61
       
+
       
      margin: 1rem calc($vertical-spacing / 2);

     

       
62
       
+
       


     

       
63
       
+
       
      @media screen and (min-width: 440px) {

     

       
64
       
+
       
        flex: 0 0 calc(50% - $vertical-spacing);

     

       
65
       
+
       
      }

     

       
66
       
+
       
    

     

       
67
       
+
       
      @media screen and (min-width: 630px) {

     

       
68
       
+
       
        flex: 0 0 calc(33% - $vertical-spacing);

     

       
69
       
+
       
      }

     

       
70
       
+
       
    

     

       
71
       
+
       
      @media screen and (min-width: 820px) {

     

       
72
       
+
       
        flex: 0 0 calc(25% - $vertical-spacing);

     

       
73
       
+
       
      }

     

       
74
       
 
       
    }

     

       
75
       
 
       
  }

     

       
76
       
 
       
}

     

···

       
18
       
 
       
  'Asia/Dubai',

     

       
19
       
 
       
  'Asia/Bangkok',

     

       
20
       
 
       
  'Asia/Tokyo',

     

       
21
       
-
       
  'Australia/Sydney'

     

       
0
       
 
       

     

       
22
       
 
       
];

     

       
23
       
 
       


     

       
24
       
 
       
// Micro-routing

     
···

       
93
       
 
       
    <h3>In popular time zones</h3>

     

       
94
       
 
       
    <div class="tz-table">

     

       
95
       
 
       
<?php foreach($popTZ as $tz) { ?>

     

       
96
       
-
       
      <div>

     

       
97
       
 
       
        <strong>

     

       
98
       
 
       
          <?= str_replace('_', ' ', explode('/', $tz, 2)[1]) ?> (<?= getOffset($tz) ?>)

     

       
99
       
 
       
        </strong>

     
···

       
121
       
 
       
    </script>

     

       
122
       
 
       
<?php } else { ?>

     

       
123
       
 
       
    <p>

     

       
124
       
-
       
      Fill out this form to make a page that shows a set date and time in the visitor's time zone.

     

       
125
       
 
       
      It will also show the time in other popular time zones.

     

       
126
       
 
       
    </p>

     

       
127
       
 
       


     

       
128
       
 
       
    <form action="/" method="post">

     

       
129
       
 
       
      <label for="datetime">Date and Time:</label>&nbsp;

     

       
130
       
-
       
      <input required type="datetime-local" id="datetime" name="datetime" />

     

       
131
       
 
       


     

       
132
       
 
       
      <br/>

     

       
133
       
 
       


     

···

       
18
       
 
       
  'Asia/Dubai',

     

       
19
       
 
       
  'Asia/Bangkok',

     

       
20
       
 
       
  'Asia/Tokyo',

     

       
21
       
+
       
  'Australia/Sydney',

     

       
22
       
+
       
  'UTC'

     

       
23
       
 
       
];

     

       
24
       
 
       


     

       
25
       
 
       
// Micro-routing

     
···

       
94
       
 
       
    <h3>In popular time zones</h3>

     

       
95
       
 
       
    <div class="tz-table">

     

       
96
       
 
       
<?php foreach($popTZ as $tz) { ?>

     

       
97
       
+
       
      <div class="tz-table-element">

     

       
98
       
 
       
        <strong>

     

       
99
       
 
       
          <?= str_replace('_', ' ', explode('/', $tz, 2)[1]) ?> (<?= getOffset($tz) ?>)

     

       
100
       
 
       
        </strong>

     
···

       
122
       
 
       
    </script>

     

       
123
       
 
       
<?php } else { ?>

     

       
124
       
 
       
    <p>

     

       
125
       
+
       
      Fill out this form to make a page that shows a set date and time in the visitor's time zone.<br/>

     

       
126
       
 
       
      It will also show the time in other popular time zones.

     

       
127
       
 
       
    </p>

     

       
128
       
 
       


     

       
129
       
 
       
    <form action="/" method="post">

     

       
130
       
 
       
      <label for="datetime">Date and Time:</label>&nbsp;

     

       
131
       
+
       
      <input required type="datetime-local" id="datetime" name="datetime"/>

     

       
132
       
 
       


     

       
133
       
 
       
      <br/>

     

       
134
       
 
       


     

···

       
1
       
 
       
<?php

     

       
2
       
-
       
// Use this with the local PHP server for development

     

       
3
       
 
       
// php -S 127.0.0.1:8080 routing.php

     

       
4
       
 
       


     

       
5
       
 
       
// Check static file

     

···

       
1
       
 
       
<?php

     

       
2
       
+
       
// Use this with the built-in PHP server

     

       
3
       
 
       
// php -S 127.0.0.1:8080 routing.php

     

       
4
       
 
       


     

       
5
       
 
       
// Check static file