Блог

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;body style="background-color: #100028;" id="body" class="body" onload="loader()"gt;   lt;div id="preloder"gt;  lt;div class="loader"gt;lt;/divgt;  lt;/divgt;   lt;div id="quest"gt; lt;/divgt;  lt;div id="textrndm"gt;lt;/divgt;  lt;div id="movingDiv" class="movingDiv"gt;   lt;/divgt;  lt;img id="output" /gt;    lt;table id="whole" style="display: flex; background-color: #100028; max-width: 430px; border-radius: 2.50rem;"gt;  lt;trgt;  lt;tdgt;  lt;div id="app"gt;lt;/divgt;  lt;/tdgt;  lt;tdgt;  lt;button id="sizeHover" style="padding:10px; background-color: orange; color: white;" class="grey" onclick="showHide()"gt;lt;i class="fa fa-eye"gt; Show lt;/igt;lt;/buttongt;  lt;/tdgt;  lt;tdgt;  lt;button id="sizeHover" style="padding:10px; background-color: orange; color: white;" class="grey" onclick="showHide()"gt;lt;i class="fa fa-eye"gt; Hide lt;/igt;lt;/buttongt;  lt;/tdgt;   amp;nbsp;  amp;nbsp;  lt;tdgt;  lt;button id="sizeHover" style="padding:10px; background-color: orange; color: white; " class="grey" onclick="stopStart(); startTimer();"gt;lt;i class="fa fa-play"gt; Play lt;/igt;lt;/buttongt;  lt;/tdgt;  lt;tdgt;  lt;button id="sizeHover" style="padding:10px; background-color: orange; color: white;" class="grey" onclick="stopStart(); stopTimer();"gt;lt;i class="fa fa-pause"gt;lt;/igt; Pause lt;/buttongt;  lt;/tdgt;      lt;/trgt;    lt;/tablegt;   lt;div style="max-width: 1020px;" class="inp" id="settings"gt;  lt;div id="whole" style="background-color: #100028; color: white; border-radius: 2.50rem; padding: 15px;" class="set-wraper"gt;   lt;div class="inpItem"gt;lt;i class="fa fa-tachometer"gt;lt;/igt;lt;spangt; Speed: lt;/spangt;   lt;span contenteditable="True" style="display: inline-block ; width:100px; border: 1px; margin-top:1%;" id="changeVal"gt;4lt;/spangt;   lt;/divgt;  lt;br /gt;  lt;div class="inpItem"gt;lt;i class="fa fa-cubes"gt;lt;/igt;lt;spangt;Sets:lt;/spangt;lt;span contenteditable="True" style="display: inline-block ; width:100px; border: 1px; margin-top:1%;" id="changeSet"gt;10lt;/spangt;  lt;button class="primary-btn" id="setButton" onclick="setSetter()"gt;Manuallt;/buttongt;   lt;/divgt;  lt;br /gt;  lt;div class="inpItem"gt;lt;i class="fa fa-clock-o"gt;lt;/igt;lt;spangt; Time lt;/spangt;lt;span contenteditable="True" style="display: inline-block ; width:100px; border: 1px; " id="changeTime"gt;180lt;/spangt;  lt;button class="primary-btn" id="timeButton" onclick="timeSetter()"gt;Manuallt;/buttongt;   lt;/divgt;  lt;br /gt;   lt;divgt;Color:  lt;button class="backcolor" style="background-color: orange;" onclick="buttonAction('orange');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: red;" onclick="buttonAction('red');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: lawngreen;" onclick="buttonAction('lawngreen');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: aqua;" onclick="buttonAction('aqua');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: blueviolet;" onclick="buttonAction('blueviolet');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: violet;" onclick="buttonAction('violet');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: black;" onclick="buttonAction('black');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: #37bdb8;" onclick="buttonAction('#37bdb8');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: #864df5;" onclick="buttonAction('#864df5');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: #ff56f9;" onclick="buttonAction('#ff56f9');"gt;lt;/buttongt;  lt;br /gt;  lt;br /gt;  lt;/divgt;  lt;divgt;Background:  lt;button class="backcolor" style="background-color: #100028; color:whitesmoke" onclick="buttonBakground('#100028');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: black; color:whitesmoke" onclick="buttonBakground('black');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: grey; color:black;" onclick="buttonBakground('grey');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: white; color:black;" onclick="buttonBakground('white');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: red;" onclick="buttonBakground('red');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: orange;" onclick="buttonBakground('orange');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: lawngreen;" onclick="buttonBakground('lawngreen');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: aqua;" onclick="buttonBakground('aqua');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: blueviolet;" onclick="buttonBakground('blueviolet');"gt;lt;/buttongt;  lt;button class="backcolor" style="background-color: violet;" onclick="buttonBakground('violet');"gt;lt;/buttongt;  lt;!-- lt;input class="backcolor" style='background: no-repeat center/70% url("/images/image.svg");' phx-click="toggle_random_background_image"gt;lt;/buttongt; --gt;  lt;pgt;lt;input type="file" accept="image/*" name="image" id="file" onchange="previewFile(this);" style="display: none;"gt;lt;/pgt;  lt;pgt;lt;label class="primary-btn" for="file" style="cursor: pointer;"gt;Upload Imagelt;/labelgt;lt;/pgt;  lt;/divgt;  lt;divgt;Size:  lt;button id="sizeHover" style="padding: 12px; border-radius: 2.50rem; background-color: white; color:black;" onclick="ballSize(0);"gt;lt;/buttongt;  lt;button id="sizeHover" style="padding: 17px; border-radius: 2.50rem; background-color: white; color:black;" onclick="ballSize(1);"gt;lt;/buttongt;  lt;button id="sizeHover" style="padding: 22px; border-radius: 2.50rem; background-color: white; color:black;" onclick="ballSize(2);"gt;lt;/buttongt;  lt;br /gt;  lt;br /gt;  lt;/divgt;  lt;divgt;Direction:  lt;button class="backcolor" style='background: no-repeat center/70% url("/images/left-right-white-907674e9185a08b34f2cbd15549fe2e7.png"); background-color: orange; color:black;' onclick="direction(0);"gt;lt;/buttongt;  lt;button class="backcolor" style='background: no-repeat center/70% url("/images/top-left-diagonal-blue-b275d58826ba3a0146530cf14d3cc3e1.png"); background-color: white; color:black;' onclick="direction(1);"gt;lt;/buttongt;  lt;button class="backcolor" style='background: no-repeat center/70% url("/images/bottom-left-diagonal-blue-9eb3e2e5301ad4c76bb3c2cfb61e4d30.png"); background-color: white; color:black;' onclick="direction(2);"gt;lt;/buttongt;  lt;button id="fulls" class="backcolor" style='background: no-repeat center/70% url("/images/bottom-left-diagonal-blue-9eb3e2e5301ad4c76bb3c2cfb61e4d30.png"); background-color: white; color:black;"'gt;lt;/buttongt;   lt;br /gt;  lt;br /gt;  lt;/divgt;  lt;divgt;Random Words:  lt;button class="backcolor" style='background: no-repeat center/70% url("/images/left-right-white-907674e9185a08b34f2cbd15549fe2e7.png"); background-color: orange; color:black; text-size: 20px;' onclick="RndText();"gt;lt;/buttongt;  lt;br /gt;  lt;br /gt;  lt;/divgt;  lt;divgt;Show VOC Question:  lt;button class="backcolor" style='background: no-repeat center/70% url("/images/left-right-white-907674e9185a08b34f2cbd15549fe2e7.png"); background-color: orange; color:black;' onclick="QuestText();"gt;lt;/buttongt;  lt;br /gt;  lt;br /gt;  lt;divgt;Show SUD Question:  lt;button class="backcolor" style='background: no-repeat center/70% url("/images/left-right-white-907674e9185a08b34f2cbd15549fe2e7.png"); background-color: orange; color:black;' onclick="QuestText();"gt;lt;/buttongt;  lt;br /gt;  lt;br /gt;  lt;/divgt;   lt;spangt;Sound:lt;/spangt;   lt;input id="ad" type="button" value="PLAY" onclick="togglePlay()" style='background: no-repeat center/70% url("/images/image.svg");'gt;  lt;!-- lt;audio id="audio" src=""gt;lt;/audiogt; --gt;  lt;audio loop id="audio"  lt;source src="/images/hero/sound.mp3" /gt;     lt;/audiogt;  lt;audio id="audio"   lt;source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" /gt;    lt;/audiogt;   lt;/divgt;   lt;/divgt;   lt;/divgt;  lt;scriptgt; const elem = document.querySelector('#newz');  elem.addEventListener("click", function(e) {  toggleFullScreen(); }, false);  function toggleFullScreen() {   if (!document.fullscreenElement) {  elem.requestFullscreen().catch(err =gt; {  alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);  });  } else {  document.exitFullscreen();  } } lt;/scriptgt;     lt;scriptgt;  function previewFile(fileInput) {  var file = fileInput.files[0];  var reader = new FileReader();   reader.addEventListener("load", function() {  setBackground(reader.result);  }, false);   if (file) {  reader.readAsDataURL(file);  }  }  function setBackground(imageURL){  document.body.style.backgroundImage = "url("   imageURL   ")";  document.body.style.backgroundSize = "100% auto";  document.body.style.backgroundRepeat = "no-repeat";  document.body.style.backgroundPosition = "center top";  } lt;/scriptgt;  lt;!-- lt;scriptgt; function play() {  var audio = document.getElementById("audio");  audio.play();  }  lt;/scriptgt; --gt;   lt;script type="text/javascript"gt; var myAudio = document.getElementById("audio");  function togglePlay() { return myAudio.paused ? myAudio.play() : myAudio.pause(); }; lt;/scriptgt;    lt;script type="text/javascript"gt;   }  lt;/scriptgt;   lt;scriptgt;  var obj = document.getElementById("movingDiv");  var changeValObj = document.getElementById("changeVal");  var changeSetObj = document.getElementById("changeSet");  var timeSetObj = document.getElementById("changeTime");  var colValObj = document.getElementById("colVal");  var backValObj = document.getElementById("backVal");  var body = document.getElementById("body");  var sh = true;  var ss = true;  var dirSet = 0;  var opp;  var change = 2;  var j = 0;  var globTime = parseFloat(new Date().getTime() / 1000);  var setsDisp = true;  var timeDisp = true;  var windowWidth = window.innerWidth ||  document.documentElement.clientWidth ||  document.body.clientWidth;   var windowHeight = window.innerHeight ||  document.documentElement.clientHeight ||  document.body.clientHeight;    history.pushState(null, null, location.href);  window.onpopstate = function () {  history.go(1);  };    const FULL_DASH_ARRAY = 283;  const WARNING_THRESHOLD = 7;  const ALERT_THRESHOLD = 3;   const COLOR_CODES = {  info: {  color: "green"  },  warning: {  color: "orange",  threshold: WARNING_THRESHOLD  },  alert: {  color: "red",  threshold: ALERT_THRESHOLD  }  };   const TIME_LIMIT = 800;  let timePassed = 0;  let timeLeft = TIME_LIMIT;  let timerInterval = null;  let remainingPathColor = COLOR_CODES.info.color;   document.getElementById("app").innerHTML = `  lt;div class="base-timer"gt;  lt;svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"gt;  lt;g class="base-timer__circle"gt;  lt;circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"gt;lt;/circlegt;  lt;path  id="base-timer-path-remaining"  stroke-dasharray="283"  class="base-timer__path-remaining ${remainingPathColor}"  d="  M 50, 50  m -45, 0  a 45,45 0 1,0 90,0  a 45,45 0 1,0 -90,0  "  gt;lt;/pathgt;  lt;/ggt;  lt;/svggt;  lt;span id="base-timer-label" class="base-timer__label"gt;${formatTime(  timeLeft  )}lt;/spangt;  lt;/divgt;  `;   startTimer();   function onTimesUp() {  clearInterval(timerInterval);  }   function startTimer() {  timerInterval = setInterval(() =gt; {  timePassed = timePassed  = 1;  timeLeft = TIME_LIMIT - timePassed;  document.getElementById("base-timer-label").innerHTML = formatTime(  timeLeft  );  setCircleDasharray();  setRemainingPathColor(timeLeft);   if (timeLeft === 0) {  onTimesUp();  window.location.href = "/users/log_out";  }  }, 1000);  }   function stopTimer(){  clearInterval(timerInterval);  }   function formatTime(time) {  const minutes = Math.floor(time / 60);  let seconds = time % 60;   if (seconds lt; 10) {  seconds = `0${seconds}`;  }   return `${minutes}:${seconds}`;  }   function setRemainingPathColor(timeLeft) {  const { alert, warning, info } = COLOR_CODES;  if (timeLeft lt;= alert.threshold) {  document  .getElementById("base-timer-path-remaining")  .classList.remove(warning.color);  document  .getElementById("base-timer-path-remaining")  .classList.add(alert.color);  } else if (timeLeft lt;= warning.threshold) {  document  .getElementById("base-timer-path-remaining")  .classList.remove(info.color);  document  .getElementById("base-timer-path-remaining")  .classList.add(warning.color);  }  }   function calculateTimeFraction() {  const rawTimeFraction = timeLeft / TIME_LIMIT;  return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);  }   function setCircleDasharray() {  const circleDasharray = `${(  calculateTimeFraction() * FULL_DASH_ARRAY  ).toFixed(0)} 283`;  document  .getElementById("base-timer-path-remaining")  .setAttribute("stroke-dasharray", circleDasharray);  }    var x = windowWidth / 100;  var i = parseInt(windowWidth / x);  var v = windowWidth / 10;  var u = parseInt(windowHeight / v);  var w = parseInt(windowHeight / v);  var r = parseInt(windowWidth / x);   var z = parseInt(Math.sqrt(windowWidth ^ 2   windowHeight ^ 2) / x);  var y = parseInt(Math.sqrt(windowWidth ^ 2   windowHeight ^ 2) / x);    // diag angle calculation  var angleRad = Math.atan(windowHeight / windowWidth);  var diagAngle = angleRad;  var diagLen = Math.sqrt(windowWidth ** 2   windowHeight ** 2);   var angleRads = Math.asin(windowHeight / windowWidth);  var diagAngles = angleRads;  var diagLens = Math.sqrt(windowWidth ** 3   windowHeight ** 3);   var textarray = [  "hi",  "hello",  "Ravin",  "how r u",  "where r u"  ];   function RndText() {  var rannum= Math.floor(Math.random()*textarray.length);  document.getElementById('quest').innerHTML=textarray[rannum];  }  // onload = function() { RndText(); }   var questarray = [  "What is your name?",  "What is the background screen colour?",  "Why do you feel stressed?",  "What do you do for living?",  "What is your favourite moment in your life?"  ];   function QuestText() {  var rantxt= Math.floor(Math.random()*questarray.length);  document.getElementById('quest').innerHTML=questarray[rantxt];   }    function loader() {  timeSetObj.style.display = "none";  timeSetObj.style.display = "inline";  document.getElementById("timeButton").style.backgroundColor = "#100028";  document.getElementById("timeButton").style.borderRadius = "25px";  document.getElementById("timeButton").style.padding = "10px";  document.getElementById("timeButton").innerText = "Manual";    changeSetObj.style.display = "none";  changeSetObj.style.display = "inline";  document.getElementById("setButton").style.backgroundColor = "#100028";  document.getElementById("setButton").style.borderRadius = "25px";  document.getElementById("setButton").style.padding = "10px";  document.getElementById("setButton").innerText = "Manual";  }   function timeSetter() {  timeDisp = !timeDisp;  if (timeDisp == true) { //Manual  timeSetObj.style.display = "inline";  timeSetObj.innerText = "180";  document.getElementById("timeButton").style.backgroundColor = "#100028";  document.getElementById("timeButton").style.borderRadius = "25px";  document.getElementById("timeButton").style.padding = "10px";  document.getElementById("timeButton").innerText = "Manual";    } else if (timeDisp == false) { // Auto  timeSetObj.style.display = "none";  timeSetObj.innerText = "10000000000000000000000000000000000000000000000";  document.getElementById("timeButton").style.backgroundColor = "#100028";  document.getElementById("timeButton").style.borderRadius = "25px";  document.getElementById("timeButton").style.padding = "10px";  document.getElementById("timeButton").innerText = "Loop";  }  }   function setSetter() {  setsDisp = !setsDisp;  if (setsDisp == true) {  changeSetObj.style.display = "inline";  changeSetObj.innerText = "10";  document.getElementById("setButton").style.backgroundColor = "#100028";  document.getElementById("setButton").style.borderRadius = "25px";  document.getElementById("setButton").style.padding = "10px";  document.getElementById("setButton").innerText = "Manual";    } else if (setsDisp == false) {  changeSetObj.style.display = "none";  changeSetObj.innerText = "10000000000000000000000000000000000000000000000";  document.getElementById("setButton").style.backgroundColor = "#100028";  document.getElementById("setButton").style.borderRadius = "25px";  document.getElementById("setButton").style.padding = "10px";  document.getElementById("setButton").innerText = "Loop";  }  }   function direction(content) {  if (content == 0) {  dirSet = 0;   } else if (content == 1) {  dirSet = 1;   } else if (content == 2) {  dirSet = 2;   }  else if (content == 3) {  dirSet = 3;   }  }   function showHide() {  if (sh == true) {  document.getElementById('settings').style.display = 'none';  sh = false;  } else if (sh == false) {  document.getElementById('settings').style.display = '';  sh = true;  j = 0;  }  }    function stopStart() {  j = 0;  if (ss == true) {  ss = false;  //showHide();  } else if (ss == false) { // start  ss = true;  //showHide();  globTime = parseFloat(new Date().getTime() / 1000);    }  }   function ballSize(content) {  var out;  if (content == 0) {  out = 75;  } else if (content == 1) {  out = 100;  } else if (content == 2) {  out = 175;  }  obj.style.height = out   "px";  obj.style.width = out   "px";  }   function buttonAction(content) {  obj.style.backgroundColor = content;  }   function buttonBakground(content) {  body.style.backgroundColor = content;  }   function runner() {  var inptTime = parseInt(timeSetObj.innerText);  var settime = inptTime   globTime;  if (ss == true amp;amp; settime gt;= parseFloat(new Date().getTime() / 1000)) {  change = Number(changeValObj.innerText);  if (dirSet == 0) {  if (i gt;= windowWidth - r) {  opp = false;  } else if (i lt;= r) {  opp = true;  j  ;  if (j gt;= Number(changeSetObj.innerText)) {  ss = false;  //showHide();  j = 0;  }   }  obj.style.removeProperty('right');  obj.style.removeProperty('left');  obj.style.removeProperty('top');  obj.style.right = i   "px";  t = windowHeight / 2;  obj.style.top = t   "px";     } else if (dirSet == 1) {  size = obj.offsetWidth * 2.2;  if (i gt;= diagLen - size) {  opp = false;  } else if (i lt;= 50) {  opp = true;  j  ;  if (j gt;= Number(changeSetObj.innerText)) {  ss = false;  //showHide();   j = 0;   }  }  obj.style.removeProperty('right');  obj.style.removeProperty('left');  obj.style.removeProperty('top');   sined = Math.sin(diagAngle) * i;  cosed = Math.cos(diagAngle) * i;  obj.style.left = cosed   "px";  obj.style.top = sined   "px";     } else if (dirSet == 2) {   size = obj.offsetWidth * 2.2;  if (i gt;= diagLen - size) {  opp = false;  } else if (i lt;= 50) {  opp = true;  j  ;  if (j gt;= Number(changeSetObj.innerText)) {  ss = false;  //showHide();   j = 0;   }  }  obj.style.removeProperty('right');  obj.style.removeProperty('left');  obj.style.removeProperty('top');   sined = Math.sin(diagAngle) * i;  cosed = Math.cos(diagAngle) * i;  obj.style.right = cosed   "px";  obj.style.top = sined   "px";    }   else if (dirSet == 3) {   size = obj.offsetWidth * 2.2;  if (i gt;= diagLen - size) {  opp = false;  } else if (i lt;= 50) {  opp = true;  j  ;  if (j gt;= Number(changeSetObj.innerText)) {  ss = false;  //showHide();   j = 0;   }  }  obj.style.removeProperty('right');  obj.style.removeProperty('left');  obj.style.removeProperty('top');  obj.style.removeProperty('bottom');   sined = Math.asin(diagAngle) * i;  cosed = Math.acos(diagAngle) * i;   obj.style.right = sined   "px";  obj.style.left = cosed   "px";  obj.style.right = cosed   "px";  obj.style.left = sined   "px";    }       if (opp == true) {  i = i   change;  u = u   change;  } else if (opp == false) {  u = u - change;  i = i - change;  }  }   }   function main() {  setInterval(function() {  runner();  }, change);  }  main();  lt;/scriptgt;  lt;stylegt;  .inpItem {   color: white;  margin-top: 0.3%;  margin-bottom: 0.3%;  }  #settings{  background-color: transparent;   }   .set-wraper {  float: left;  background-color: lightgray;  color: black;  flex: 0.4;  margin-left: 0.3%;  }  #code  {  font-family:Arial;  font-style:italic;  font-weight:bold;  border:0;  letter-spacing:2px;  color:blue;  }   .grey {  background-color: white;  padding: 20px;  border-radius: 2.50rem;  }   .inp {  background-color: lightgray;  color: white;  z-index: 2;  margin-top: 10px;  display: flex;   }   .movingDiv {  position: absolute;  border: none;  text-align: center;  background-color: white;  font-weight: bold;  -moz-border-radius: 50%;  -webkit-border-radius: 50%;  border-radius: 50%;  width: 100px;  height: 100px;  z-index: 1;   }   button {  border: none;  padding: 0.3%;  margin-top: 0.3%;  z-index: 3;  }   body {   overflow: hidden;   }  lt;/stylegt;  lt;script src="/js/jquery-3.3.1.min.js"gt;lt;/scriptgt;  lt;script src="/js/bootstrap.min.js"gt;lt;/scriptgt;  lt;script src="/js/jquery.magnific-popup.min.js"gt;lt;/scriptgt;  lt;script src="/js/mixitup.min.js"gt;lt;/scriptgt;  lt;script src="/js/masonry.pkgd.min.js"gt;lt;/scriptgt;  lt;script src="/js/jquery.slicknav.js"gt;lt;/scriptgt;  lt;script src="/js/owl.carousel.min.js"gt;lt;/scriptgt;  lt;script src="/js/main.js"gt;lt;/scriptgt;  lt;/bodygt;  lt;/htmlgt; 

 lt;bodygt; lt;canvas id="canvas"gt;lt;/canvasgt; lt;/bodygt;