neige d'aout

knowledge, art, and other stuff

User Tools

Site Tools

Trace:
solartime

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
solartime [2026/02/20 01:40] – created Yukisolartime [2026/02/20 16:39] (current) – Yuki
Line 5: Line 5:
   font-family: "7segment";   font-family: "7segment";
   src: url("https://torinak.com/font/7segment.woff") format("woff2");   src: url("https://torinak.com/font/7segment.woff") format("woff2");
 +}
 +#clock
 +{
 +  text-align: center;
 } }
 #output #output
Line 10: Line 14:
   font-family: "7segment";   font-family: "7segment";
   font-size: 12em;   font-size: 12em;
-  text-align: center;+  background: #000; 
 +  padding: 0 0.1em; 
 +  color: #fcc; 
 +  text-shadow: 0 0 5px #fcc, 0 0 10px #fcc, 0 0 15px #fcc, 0 0 20px #f00, 0 0 30px #f00, 0 0 40px #f00, 0 0 55px #f00, 0 0 75px #f00; 
 +}
 } }
 </style> </style>
-<geolocation watch><button id="fallback">Use location</button></geolocation> Latitude: <input id="zone" value="-71.25"/> +<geolocation watch onlocation="handleLocation(event)"> 
-<div id="output">00:00:00</div>+  <!-- Fallback contents if the element is not supported --> 
 +  <button onclick="navigator.geolocation.getCurrentPosition(handleLocation)"> 
 +    Use location 
 +  </button> 
 +</geolocation> 
 +Longitude: <input id="zone" type="number" value="-71.25" min="-180" max="180" step="any"/> 
 + GMT<span id="gmt">+00:00:00</span> 
 +<div id="clock"><span id="output">00:00:00</span></div>
 <script src="https://unpkg.com/@js-temporal/polyfill/dist/index.umd.js"></script> <script src="https://unpkg.com/@js-temporal/polyfill/dist/index.umd.js"></script>
 <script> <script>
 setInterval(()=>{ setInterval(()=>{
   var instant = temporal.Temporal.Now.instant();   var instant = temporal.Temporal.Now.instant();
-  var time = parseFloat(document.querySelector("#zone").value);+  var time = parseFloat(document.querySelector("#zone").value)||0;
   var zone = temporal.Temporal.Duration.from({nanoseconds: Math.floor(time*240000000000)})   var zone = temporal.Temporal.Duration.from({nanoseconds: Math.floor(time*240000000000)})
 +  var gmt = temporal.Temporal.Instant.fromEpochNanoseconds(BigInt(Math.floor(Math.abs(time)*240000000000)))
   instant=instant.add(zone);   instant=instant.add(zone);
-  document.querySelector("#output").innerHTML = instant.toZonedDateTimeISO("GMT").toPlainTime().toLocaleString();+  document.querySelector("#output").innerHTML = instant.toZonedDateTimeISO("GMT").toPlainTime().toLocaleString("fr-FR"); 
 +  document.querySelector("#gmt").innerHTML = (zone.sign>=0?'+':'-')+gmt.toZonedDateTimeISO("GMT").toPlainTime().toLocaleString("fr-FR");
 }, 100); }, 100);
 +
 +function handleLocation(event) {
 +  // Directly access the GeolocationPosition object on the element
 +  if (event.target.position) {
 +    const { latitude, longitude } = event.target.position.coords;
 +    console.log("Location retrieved:", latitude, longitude);
 +    document.querySelector("#zone").value = longitude;
 +  } else if (event.target.error) {
 +    console.error("Error:", event.target.error.message);
 +  }
 +}
 </script> </script>
 </html> </html>
solartime.1771569655.txt.gz · Last modified: by Yuki

Page Tools