PHPIndex

This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).

index.html 
wget 'https://sme10.lists2.roe3.org/mdrone/clock/index.html'
View Content 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Clock</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<clock></clock>
<input type="checkbox" />
</body>
</html>
style.css 
wget 'https://sme10.lists2.roe3.org/mdrone/clock/style.css'
View Content 
@property --h-m {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1260; 
}
@property --s {
  syntax: "<integer>";
  inherits: true;
  initial-value: 60;
}
@property --a {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
& {
  --h: round(down,var(--h-m)/100);
  --m: calc(var(--h-m) - var(--h)*100); 
  --ss: calc(var(--a) + var(--s));
  --mm: calc(round(down,var(--ss)/60,1) + var(--m));
  --hh: calc(round(down,var(--mm)/60,1) + var(--h));
  timeline-scope: --cx,--cy;
  animation: x linear,y linear,a linear 43200s;
  animation-timeline: --cx,--cy,auto;
  animation-range: entry 100% exit 100%;
  background: #3ec1c9;
  display: grid;
  place-content: center;
  min-height: 100%;
}
@keyframes x {to{--h-m:0}}
@keyframes y {to{--s:0}}
@keyframes a {to{--a:43200}}
clock {
  position: fixed;
  width: 1260px;
  height: 60px;
  inset: auto 0 0 auto;
  pointer-events: none;
  overflow: auto;
}
clock:before,
clock:after {
  content: url(https://api.temani-afif.com/clock/);
  font-size: 0;
  position: absolute;
  inset: 0 auto auto 0;
}
clock:after {
  content: url(https://api.temani-afif.com/clock/?l);
}
&:has(input:not(:checked)) clock:before {
  view-timeline: --cx inline,--cy block;
}
&:has(input:checked) clock:after {
  view-timeline: --cx inline,--cy block;
}
body {
  width: 280px;
  aspect-ratio: 1;
  display: grid;
  grid-area: 1/1;
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #36506b;
  box-shadow: 0 0 0 5px inset #cacdd2;
  background: 
    radial-gradient(#36506b 9px,#f5f5f5 10px 55%,#0000 0 60%),
    repeating-conic-gradient(from -2deg,#0000 0deg,#36506b 1deg 3deg,#0000 4deg 30deg),
    #f5f5f5;
}
body:before,
body:after {
  content:"";
  grid-area: 1/1;
  margin: auto;
  width: 8px;
  height: 50%;
  rotate: calc(var(--hh)*30deg);
  clip-path: polygon(20% 0,80% 0,100% 50%,0 50%);
  background: #36506b;
}

body:after {
  height: 70%;
  rotate: calc(var(--mm)*6deg);
}
&:before {
  content:"";
  grid-area: 1/1;
  margin: auto;
  width: 3px;
  height: 65%;
  background: 
    radial-gradient(9px,#36506b 95%,#0000),
    linear-gradient(0,#0000 40%,#f95a8b 0);
  z-index: 1;
  rotate: calc(var(--ss)*6deg);
}
&:after {
  content: "Coordinated Universal Time (UTC)";
  position: absolute;
  inset: 10px 0 auto;
  text-align: center;
}
&:has(input:checked):after {
  content: "Local Time";
}
& {
  font-size: 20px;
  font-family: system-ui, sans-serif;
  font-weight: bold;
}
body input {
  position: fixed;
  border: none;
  background: #000;
  color: #fff;
  border: 2px solid #0000;
  border-radius: 10px;
  inset: auto 0 10px;
  width: fit-content;
  padding: .5em 1em;
  margin: auto;
  font: inherit;
  cursor: pointer;
  appearance: none
}
body input:before {
  content:"Show my local time";
}
body input:checked {
  color: #000;
  background: none;
  border-color: #000;
}
body input:checked:before {
 content: "Show the UTC again"; 
}