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/winking-owl/index.html'
View Content 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Winking Owl</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
  <button>Open Both Eyes</button>
  <p>Click anywhere on the owl to make her blink</p>
<input type="checkbox" role="switch" class="owl">
    <script  src="./script.js"></script>
  </body>
</html>
script.js 
wget 'https://sme10.lists2.roe3.org/mdrone/winking-owl/script.js'
View Content 
document.querySelector("input").indeterminate = true;
document.querySelector("button").addEventListener("click", () => document.querySelector("input").indeterminate = true);
style.css 
wget 'https://sme10.lists2.roe3.org/mdrone/winking-owl/style.css'
View Content 
body {
  margin: 0;
  min-height: 60vh;
  display: grid;
  place-items: center;
  background: #888888;
}

@property --p1 {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --p2 {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

.owl {
  --pupil: #000;
  --eye: #ff0;
  --beak: #fb0;
  --color1: #d6a664;
  --color2: #8d3e00;
  --color3: #6d3c00;
  --color4: #441b06;
  --color5: #240500;
  --color1: #741f00;
  --p1: 0%;
  --p2: 50%;
  appearance: none;
  font-size: 0.25em;
  width: 50em;
  height: 90em;
  position: relative;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  transition: --p1 0.25s, --p2 0.25s;
  background: 
    /* beak */
    conic-gradient(#fb0 30deg, #fb00 0 330deg, var(--beak) 0) 50% 27.5em / 25em 25em,
    /* legs */
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 0 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 6.25em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 12.5em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 31.25em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 37.5em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 100% 75% / 6.25em 6.25em,
    /* background */
    radial-gradient(farthest-side at 0 100%, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, var(--color4) 0 99.5%, #0a10 99.9999%) 0 0 / 25em 25em,
    radial-gradient(farthest-side at 100% 100%, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, var(--color4) 0 99.5%, #0a10 99.9999%) 100% 0 / 25em 25em,
    linear-gradient(90deg, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, #0000 0) 0 30.1em / 25em 12em,
    linear-gradient(to left, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, #0000 0) 100% 30.1em / 25em 12em,
    radial-gradient(farthest-side at 0 0, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, #0000 0) 0 42em / 25em 25em,
    radial-gradient(farthest-side at 100% 0, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, #0000 0) 100% 42em / 25em 25em,
    radial-gradient(farthest-side at 50% 100%, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 74.5%, #0000 75%) 50% 0 / 50em 25em,
    linear-gradient(var(--color4) 0 0) 0 24.99em / 100% 40em,
    /* branch */
/*     linear-gradient(#0000 73%, var(--color5) 0 84%, #0000 0), */
    /* tail */
    radial-gradient(farthest-side at 50% 0%, var(--color4) 25%, var(--color3) 0 50%, var(--color2) 0 75%, var(--color1) 0 99.7%, #fb00 99.9999%) 0 100% / 100% 25.1em,
    #f000;
  background-repeat: no-repeat;
  clip-path: polygon(-100% -100%, 200% -100%, 100% 100%, 60% 100%, 55% 95%, 50% 100%, 45% 95%, 40% 100%, 0% 100%);
  
  &::before,
  &::after {
    content: "";
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    background:
      linear-gradient(var(--color5) calc(50% - var(--p1)), #0000 0 calc(var(--p1) + 50%), var(--color5) 0),
      radial-gradient(farthest-side, var(--pupil) 50%, var(--eye) calc(50% + 1px));
    left: 0;
    top: 15em;
  }
  
  &::after {
    background:
      linear-gradient(var(--color5) calc(50% - var(--p2)), #0000 0 calc(var(--p2) + 50%), var(--color5) 0),
      radial-gradient(farthest-side, var(--pupil) 50%, var(--eye) calc(50% + 1px));
    left: 50%;
  }
  
  &:checked {
    --p1: 50%;
    --p2: 0%;
  }
  
  &:indeterminate {
    --p1: 50%;
    --p2: 50%;
  }
}

button {
//  position: absolute;
//  top: 1em;
//  left: 1em;
  display: block;
  margin: 0 auto;
  color: #369;
  background: #fff;
  border: 1px solid #0000;
  padding: 0.5em 1em;
  font-size: 1em;
}

p {
  color: #fff;
  font-size: 1em;
  font-family: Arial,Verdana,san-serif;


}