

<!-- hey gavin stop skidding my code monkey-->
<!doctype html>
<html>
  <head>
   <style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
</style>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <title id="titlee">Clock</title>
  </head>
 <body style="margin:0">
 <button style="align:center;" class="button-settings" id="buttonset" onclick="settoggle()">
    settings </button>
<inline class="menu-settings" id="menu-settingsid"><b style="font-size:12px">show miliseconds</b><input type="checkbox" style="position:inline" class="inputsettings" id="sm"> <br><b>Title clock</b><input type="checkbox" style="position:inline" id="utcin"></input><br><b style="font-size:12px">Show 24 hour clock</b><input type="checkbox" style="position:inline" id="shc"></input><br><b style="font-size:15px; font-weight:9000">Center Clock</b><input type="checkbox" style="position:inline" id="centerC" checked></input><br><br>
<b style="margin:30px">THEMES</b>
<select class="selector">
  <option id="optionforest">forest</option>
  <option id="optionocean">ocean</option>
  <option id="optionsunset">lime green</option>
  <option id="optionsp">selinite purple</option>
  <option id="optionrg">rainbow gradient</option>
  <option id="optionrpg">black n white</option>
  <option id="optionpw" >plain white</option>
  <option id="optiondg" selected>light grey</option>
</select>
<button class="APPLYC" id="applyi" onclick="apply()">
  apply changes
</button>
</inline>

<script>
  const url = new URL(window.location.href);
 document.getElementById("menu-settingsid").style.display = "none"
var milornor = 12;
var ampm = "0"

pase = false
  showmil = false
function e(){
  if(pase === false){
document.getElementById("oops").style.display = "none"
document.getElementById("oo").style.display = "none"
document.getElementById("oop").style.display = "none"
const bob = new Date();
    var isz = bob.getHours() == 0
const mi = bob.getMinutes().toString() ;
const se = bob.getSeconds().toString() ;
const mili = bob.getMilliseconds().toString() ;
var horr = bob.getHours() - milornor;
var horstring = horr.toString(); 
let min = "0";
let sec = "0";
let mil = "0";
var hor = "0";
if(horstring.startsWith('-') == true){hor = bob.getHours(); ampm = "am"} else if(bob.getHours() == 12){hor = 12; ampm = "pm"}   else{hor = horr; ampm = "pm"};
      if(bob.getHours() == 0 && horstring.startsWith('-') == true){hor = 12; ampm = "am"}
if(mi.length == 1){ min = "0" + bob.getMinutes().toString()} else{ min = bob.getMinutes().toString()};
if(se.length == 1){ sec = "0" + bob.getSeconds().toString()} else{ sec = bob.getSeconds().toString()};
    if(showmil === true){if(mili.length == 1){ mil = "." + "0" + "0" + bob.getMilliseconds().toString()} else if(mili.length == 2){ mil = "." + "0" + bob.getMilliseconds().toString()} else{ mil = "." + bob.getMilliseconds().toString()};} else{mil = '';}
if(milornor == 12){document.getElementById("pel").textContent = hor + ":" + min + ":" + sec  + mil + " " + ampm;} else{document.getElementById("pel").textContent = bob.getHours() + ":" + min + ":" + sec  + mil}
document.getElementById("date").textContent = bob.toDateString() 
setTimeout(() => {e()}, 0)
} else{setTimeout(() => {e()}, 0)} }
  var titleup = false
  function titleupdate(){
    if(titleup === true){
    const bob = new Date();
const mi = bob.getMinutes().toString() ;
const se = bob.getSeconds().toString() ;
const mili = bob.getMilliseconds().toString() ;
var horr = bob.getHours() - milornor;
var horstring = horr.toString(); 
  if(bob.getHours() <= 12){ 
    document.getElementById("titlee").textContent = `${bob.toDateString()}/${bob.getHours()}:${mi}`} else{document.getElementById("titlee").textContent = `${bob.toDateString()}/${horr}:${mi}`} ;
                         setTimeout(() => {titleupdate()}, 1001)  }  else{setTimeout(() => {titleupdate()} , 1)}}
function miltime(){if(milornor == 12){milornor = 0; document.getElementById("milbut").textContent = "12 hour clock"} else{milornor = 12; document.getElementById("milbut").textContent = "24 hour clock"}}
  function settoggle(){if(document.getElementById("menu-settingsid").style.display == "none"){document.getElementById("menu-settingsid").style.display = "block"} else{document.getElementById("menu-settingsid").style.display = "none"}}
</script>
<h2 id="date" class="clockcol">[Date]</h2>
<p id="pel" class="clockco">[Clock]</p>
<div><h3 id="oo">OOps...</h3>
<p id="oop">it looks like the clock did not update when the page loaded. Please click "Fix clock" to Update it.</p></div>
<button onclick="e()" id="oops">Fix clock</button>
<button onclick="miltime()" id="milbut" class="clockbut">24 hour clock</button>
  </body>
</html>
<script>e()</script>
<script> titleupdate()</script>
<style>
  * {font-family:dm sans; }
  body{background-color:white ;filter: blur(0.5px)  }
  .button-settings {text-align:center; margin-left:95%; display:flex; position:inline; background-color:#292929; border:solid; border-radius:3px; transition:15ms; border-width:1px; backdrop-filter: blur(10px); opacity:64%; box-shadow: 0 0 4px; transition:250ms; cursor:pointer}
  .button-settings:hover {background-color:#35413a; border:solid; border-width:1px; filter: blur(0.2px); backdrop-filter: blur(10px); opacity:90%}
  .button-settings:active {background-color:#4e5f54; opacity:95%; border-color:#1c2631; transition:15ms}
  .menu-settings{background-color:#4e565f; position:absolute; border-radius:3px; margin-left:90%; margin-top:0px; width:141px; text-align:right; height:115%; color:#dbdbdb; border:none; border-width:1px; transition:250ms; webkit-backdrop-filter: blur(20px); box-shadow: 0 0 5px #242424; filter: blur(0.5px); opacity:79%; display:grid; cursor:normal};
  .menu-settings:hover{border:none; border-width:1px; background-color:#3b4f42; filter: blur(0.45px); opacity:95%; webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px); border-radius:5px}
   .menu-settings:hover  b{color:#ccdaea; opacity:95%; filter: blur(0px)}
  .menu-settings  b{color:#ccdaea; opacity:100%; filter: blur(1px); transition:50ms}
.selector {filter:blur(0.7px); webkit-backdrop-fliter: blur(10px); border-radius:5px; color:#303840; opacity:50%}
  .APPLYC {border:solid; border-radius:4px; border-width:0.5px; display:flex; position:block; margin-left:22px; opacity:70%; backdrop-filter: blur(2.3px); background-color:#31453c; box-shadow: 0  0 3px; filter: blur(1px); height:22px; margin-top:2px}
.APPLYC:hover {border-radius:2px; transition:5ms; animation: he 2s linear infinite; position:inline}
  .menu-settings:hover .APPLYC{filter: blur(0.5px); background-color:#68736e; transition:250ms}
  .APPLYC:active {border-radius:5px; transition:5ms;  border:dotted red 1px; box-shadow: 0 0 10px red}
option {background-color:#35413a; color:white; }
input[type="checkbox"]:hover {filter:blur(0.7px); border:solid; border-radius:5px;}
input[type="checkbox"] {filter:blur(0px); border:solid; border-radius:5px; opacity:70%}
  input[type="checkbox"]:checked {filter:blur(0.5px); border:solid;}
.menu-settings:hover .selector{filter: blur(0.3px); opacity:90%; transition:100ms}
@keyframes he {
   0%   {color: #ff0000;}
  13%  {color: #ff6600;}
  26%  {color: #ffc400;}
  39% {color: #bbff00;}
  42% {color: #33ff00}
  55% {color: #00ff91}
  67% {color: #00e5ff}
  80% {color: #006aff}
  85% {color: #8c00ff}
  90% {color: #ee00ff}
  95% {color: #ff009d}
  100% {color: #eb3440}
}
  .clockbut {border-radius:5px; border:solid; border-width:1px; opacity:78%; font-weight:bold; transition:70ms; display:none }
  .clockbut:hover {border-radius:10px; opacity:65%; color:#343e50 }
</style>
<script>
  // just put /?clockcolor={color} if u like color:)
otherif = "0"
  checkhex = "0"
  if(url.searchParams.has("clockcolor") === true){document.body.style.color = url.searchParams.get("clockcolor"); otherif = "1"}  if(otherif === "1" && url.searchParams.get("clockcolor").length === 6 ){document.body.style.color = url.searchParams.get("clockcolor"); checkhex = "1"} if(checkhex === "1" && document.body.style.color === ''){document.body.style.color = `#${url.searchParams.get("clockcolor")}` ; otherif = "1"}  if(otherif === "1" && document.body.style.color == ''){window.alert(`sorry! "${url.searchParams.get("clockcolor")}" did not return a valid color. if its a HEX value remove the #`)}  </script>
<script>
// this applys settings (please kill me)
// if code is unreadable srry
  function apply(){
    if(url.searchParams.has("clockcolor") === true){window.alert("this will change the color of the body; and why are u using themes with /?clockcolor  ?")}
if(document.getElementById("optionforest").selected === true){document.body.style = "background-color:#558268 ;filter: blur(0.5px); margin:0%;"; localStorage.setItem("forest", true); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", false); localStorage.setItem("rg", false); localStorage.setItem("rpg", false); localStorage.setItem("pw", false); localStorage.setItem("dg", false)}
  if(document.getElementById("optionocean").selected === true){document.body.style = "background-color:#637dbb ;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", true);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", false); localStorage.setItem("rg", false); localStorage.setItem("rpg", false); localStorage.setItem("pw", false); localStorage.setItem("dg", false)}
  if(document.getElementById("optionsunset").selected === true){document.body.style = "background-color:#bccda2 ;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", true);  localStorage.setItem("sp", false); localStorage.setItem("rg", false); localStorage.setItem("rpg", false); localStorage.setItem("pw", false); localStorage.setItem("dg", false)}
    if(document.getElementById("optionsp").selected === true){document.body.style = "background-color:#4a3552 ;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", true); localStorage.setItem("rg", false); localStorage.setItem("rpg", false); localStorage.setItem("pw", false); localStorage.setItem("dg", false)}
    if(document.getElementById("optionrg").selected === true){document.body.style = "background: linear-gradient(red, orange, yellow, green, blue, purple, pink,red, orange, yellow, green, blue, purple, pink,red, orange, yellow, green, blue, purple, pink) ;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", false); localStorage.setItem("rg", true); localStorage.setItem("rpg", false); localStorage.setItem("pw", false); localStorage.setItem("dg", false)}
     if(document.getElementById("optionrpg").selected === true){document.body.style = "background-color:black; color:white ;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", false); localStorage.setItem("rg", false); localStorage.setItem("rpg", true); localStorage.setItem("pw", false); localStorage.setItem("dg", false)}
    if(document.getElementById("optionpw").selected === true){document.body.style = "background-color:white; color:black ;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", false); localStorage.setItem("rg", false); localStorage.setItem("rpg", false); localStorage.setItem("pw", true); localStorage.setItem("dg", false)}
    if(document.getElementById("optiondg").selected === true){document.body.style = "background-color:#f0f0f0; color:#333;filter: blur(0.5px); margin:0%"; localStorage.setItem("forest", false); localStorage.setItem("ocean", false);  localStorage.setItem("sunset", false);  localStorage.setItem("sp", false); localStorage.setItem("rg", false); localStorage.setItem("rpg", false); localStorage.setItem("pw", false); localStorage.setItem("dg", true)} 
//
 if(document.getElementById("centerC").checked === true){document.getElementById("pel").style = "text-align:center; font-size:20px"; document.getElementById("date").style = "text-align:center; font-size:35px"; localStorage.setItem("centeR", true)} else if(document.getElementById("centerC").checked === false){document.getElementById("pel").style = ""; document.getElementById("date").style = ""; localStorage.setItem("centeR", false)}
    
  if(document.getElementById("shc").checked === true){milornor = 0; localStorage.setItem("shclock", true)} else if(document.getElementById("shc").checked === false){milornor = 12; localStorage.setItem("shclock", false)}
    
    if(document.getElementById("utcin").checked === true){titleup = true; document.getElementById("titlee").textContent = "Loading..."; localStorage.setItem("titlec", true)} else if(document.getElementById("utcin").checked === false){titleup = false; document.getElementById("titlee").textContent = "Clock"; localStorage.setItem("titlec", false)}
     if(document.getElementById("sm").checked === true){showmil = true; localStorage.setItem("sm", true)} else{showmil = false; localStorage.setItem("sm", false)}
  }
 
</script>
<script>
</script>
<script>

if(url.searchParams.get("localStorageClear") == "true"){localStorage.clear()}  ;
  if(url.searchParams.get("nosettings") == 'true'){ document.querySelector(".button-settings").style.display = "none"}
</script>
<script>
  var forestvar = localStorage.getItem("forest")
    var oceanvar = localStorage.getItem("ocean")
    var sunsetvar = localStorage.getItem("sunset")
    var spvar = localStorage.getItem("sp")
    var rgvar = localStorage.getItem("rg")
    var rpgvar = localStorage.getItem("rpg")
    var pwvar = localStorage.getItem("pw")
    var dgvar = localStorage.getItem("dg")
    

    
if(localStorage.getItem("forest") == 'true'){document.body.style = "background-color:#558268 ;filter: blur(0.5px); margin:0%;"; document.getElementById("optionforest").selected = true }
 else if(localStorage.getItem("ocean") == 'true'){document.body.style = "background-color:#637dbb ;filter: blur(0.5px); margin:0%"; document.getElementById("optionocean").selected = true}
 else if(localStorage.getItem("sunset") == 'true'){document.body.style = "background-color:#bccda2 ;filter: blur(0.5px); margin:0%"; document.getElementById("optionsunset").selected = true}
   else if(localStorage.getItem("sp") == 'true'){document.body.style = "background-color:#4a3552 ;filter: blur(0.5px); margin:0%"; document.getElementById("optionsp").selected = true}
   else if(localStorage.getItem("rg") == 'true'){document.body.style = "background: linear-gradient(red, orange, yellow, green, blue, purple, pink,red, orange, yellow, green, blue, purple, pink,red, orange, yellow, green, blue, purple, pink) ;filter: blur(0.5px); margin:0%"; document.getElementById("optionrg").selected = true}
    else if(localStorage.getItem("rpg") == 'true'){document.body.style = "background-color:black; color:white ;filter: blur(0.5px); margin:0%"; document.getElementById("optionrpg").selected = true}
  else if(localStorage.getItem("pw") == 'true'){document.body.style = "background-color:white; color:black ;filter: blur(0.5px); margin:0%"; document.getElementById("optionpw").selected = true}
   else if(localStorage.getItem("dg") == 'true'){document.body.style = "background-color:#f0f0f0; color:#333;filter: blur(0.5px); margin:0%";};
</script>
<script>
  if(localStorage.getItem("centeR") == 'true'){document.getElementById("pel").style = "text-align:center; font-size:20px"; document.getElementById("date").style = "text-align:center; font-size:35px";} else if(localStorage.getItem("centeR") == "false"){document.getElementById("pel").style = ""; document.getElementById("date").style = "";  document.getElementById("centerC").checked = false}
  else{document.getElementById("pel").style = "text-align:center; font-size:20px"; document.getElementById("date").style = "text-align:center; font-size:35px";}
  
  if(localStorage.getItem("shclock") == 'true'){milornor = 0; document.getElementById("shc").checked = true};
 
   if(localStorage.getItem("titlec") == 'true'){titleup = true; document.getElementById("titlee").textContent = "Loading..."; document.getElementById("utcin").checked = true} else if(localStorage.getItem("titlec") == 'false'){titleup = false; document.getElementById("titlee").textContent = "Clock"}
  if(localStorage.getItem("sm") == 'true'){showmil = true; document.getElementById("sm").checked = true} else if(localStorage.getItem("sm") == 'false'){showmil = false}
</script>

<script>
  var paseo = "0"
document.addEventListener("keydown", function(event){if(event.key === "p" ){if(pase === false){pase = true} else if(pase === true){pase = false}  }})
</script>