gaffe

3 years ago in HTML

                            
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body {
}
input {
  max-width: 80%;
  flex-grow: 1;
  height: 36px;
}
h1   {color: blue;}
p    {color: red;}
div {width: 100%; font-size: 20px; display: flex;
  align-items: center;
}
output {}
/* .tgaffe-slider {
  width: 90%;
} */
</style>
</head>
<body>
<div class="gaffe"></div>
<div >
  <input type="range" class="gaffe-slider gaffe-slider--01"><output class="gaffe-output--01">0</output> &nbsp;mg   
</div>
<div >
  <input type="range" class="tgaffe-slider tgaffe-slider--01">Klo.&nbsp; <output class="tgaffe-output--01"></output>   
</div>
*
<div >
  <input type="range" class="gaffe-slider gaffe-slider--02"><output class="gaffe-output--02">0</output> &nbsp;mg 
</div>
<div >
  <input type="range" class="tgaffe-slider tgaffe-slider--02">Klo.&nbsp; <output class="tgaffe-output--02"></output>   
</div>
*
<div >
  <input type="range" class="gaffe-slider gaffe-slider--03"><output class="gaffe-output--03">0</output> &nbsp;mg
</div>
<div >
  <input type="range" class="tgaffe-slider tgaffe-slider--03">Klo.&nbsp;<output class="tgaffe-output--03"></output>   
</div>
*
<div >
  <input type="range" class="gaffe-slider gaffe-slider--04"><output class="gaffe-output--04">0</output> &nbsp;mg
</div>
<div >
  <input type="range" class="tgaffe-slider tgaffe-slider--04">Klo.&nbsp; <output class="tgaffe-output--04"></output>   
</div>
Nukkumaan
<div >
  <input type="range" class="tgaffe-slider tgaffe-slider--nuq">Klo.&nbsp; <output class="tgaffe-output--nuq">23</output>   
</div>
<p>Nukkumaan mennessä&nbsp;<output class="gaffe-total">0</output>&nbsp;mg kofeiinia elimistössä</p>
<script>
  ( function () {
  let gaffedemo = document.querySelector(".gaffe")
  if (gaffedemo) {
    //const selectElem = document.querySelector('select');
    const divElem1 = document.querySelector('.gaffe__layer--01');
    const divElem2 = document.querySelector('.gaffe__layer--02');
    const divElem3 = document.querySelector('.gaffe__layer--03');
    const divElem4 = document.querySelector('.gaffe__layer--04');
    const slider1 = document.querySelector('.tgaffe-slider--01');
    const slider2 = document.querySelector('.tgaffe-slider--02');
    const slider3 = document.querySelector('.tgaffe-slider--03');
    const slider4 = document.querySelector('.tgaffe-slider--04');
    const slidernuq = document.querySelector('.tgaffe-slider--nuq');
    const gslider1 = document.querySelector('.gaffe-slider--01');
    const gslider2 = document.querySelector('.gaffe-slider--02');
    const gslider3 = document.querySelector('.gaffe-slider--03');
    const gslider4 = document.querySelector('.gaffe-slider--04');
    const output1 = document.querySelector('.tgaffe-output--01');
    const output2 = document.querySelector('.tgaffe-output--02');
    const output3 = document.querySelector('.tgaffe-output--03');
    const output4 = document.querySelector('.tgaffe-output--04');
    const outputnuq = document.querySelector('.tgaffe-output--nuq');
    const goutput1 = document.querySelector('.gaffe-output--01');
    const goutput2 = document.querySelector('.gaffe-output--02');
    const goutput3 = document.querySelector('.gaffe-output--03');
    const goutput4 = document.querySelector('.gaffe-output--04');
    const masteroutput = document.querySelector('.gaffe-total');
    const blinkbutton = document.querySelector(".fleetman-blink")
    gslider1.value = 0;
    gslider1.min = 0;
    gslider1.max = 300;
    gslider1.step = 10;
    gslider2.value = 0;
    gslider2.min = 0;
    gslider2.max = 300;
    gslider2.step = 10;
    gslider3.value = 0;
    gslider3.min = 0;
    gslider3.max = 300;
    gslider3.step = 10;
    gslider4.value = 0;
    gslider4.min = 0;
    gslider4.max = 300;
    gslider4.step = 10;
    slider1.value = 6;
    slider1.min = 6;
    slider1.max = 23;
    slider1.step = 1;
    slider2.value = 6;
    slider2.min = 6;
    slider2.max = 23;
    slider2.step = 1;
    slider3.value = 6;
    slider3.min = 6;
    slider3.max = 23;
    slider3.step = 1;
    slider4.value = 6;
    slider4.min = 6;
    slider4.max = 23;
    slider4.step = 1;
    slidernuq.value = 23;
    slidernuq.min = 18;
    slidernuq.max = 27;
    slidernuq.step = 1;
    
    // selectElem.addEventListener('change', () => {
      //   setSlider(selectElem.value);
      //   updateTime(selectElem.value);
      // });
      
    gslider1.addEventListener('input', () => {
      updateDose(gslider1, goutput1);
    });
    gslider2.addEventListener('input', () => {
      updateDose(gslider2, goutput2);
    });
    gslider3.addEventListener('input', () => {
      updateDose(gslider3, goutput3);
    });
    gslider4.addEventListener('input', () => {
      updateDose(gslider4, goutput4);
    });
    slider1.addEventListener('input', () => {
      updateTime(slider1, output1);
    });
    slider2.addEventListener('input', () => {
      updateTime(slider2, output2);
    });
    slider3.addEventListener('input', () => {
      updateTime(slider3, output3);
    });
    slider4.addEventListener('input', () => {
      updateTime(slider4, output4);
    });
    slidernuq.addEventListener('input', () => {
      updateTime(slidernuq, outputnuq);
    });
      
    //console.log("fleetman "+selectElem.value)
    
    
    function updateTime(slideri, outputti) {
      
      //layer.style.filter = `brightness(${slideri.value}`;
    
      updateTimeOutput(slideri, outputti);
      updateCurValue();
    }
    function updateDose(slideri, outputti) {
      
      //layer.style.filter = `brightness(${slideri.value}`;
    
      updateDoseOutput(slideri, outputti);
      updateCurValue();
    }
    
    function updateTimeOutput(slideri, outputti) {
      if (Number(slideri.value) < 24) {
        outputti.textContent = slideri.value;
      }
      else {
        let aftermidnight = Number(slideri.value) - 24;
        outputti.textContent = aftermidnight
      }
    }
    function updateDoseOutput(slideri, outputti) {
      outputti.textContent = slideri.value;
    }
    
    function updateCurValue() {
      let dose1 = Number(gslider1.value);
      let dose2 = Number(gslider2.value);
      let dose3 = Number(gslider3.value);
      let dose4 = Number(gslider4.value);
      let t1 = Number(slider1.value);
      let t2 = Number(slider2.value);
      let t3 = Number(slider3.value);
      let t4 = Number(slider4.value);
      let tfinal = Number(slidernuq.value);
      let doses = [
        {"time": t1, "dose": dose1},
        {"time": t2, "dose": dose2},
        {"time": t3, "dose": dose3},
        {"time": t4, "dose": dose4},
        {"time": tfinal, "dose": 0}
      ]
      doses.sort(function (a, b) {
        return a.time - b.time;
      })
      let cinb = Number(doses[0].dose);
      for (let i = 0; i < 4; i++) {
        let timebetween = doses[i+1].time - doses[i].time
        cinb = cinb * 0.5 ** (timebetween/5) + Number(doses[i+1].dose)
      }
      console.log(cinb+" klo. "+doses[4].time)
      masteroutput.textContent = Math.round(cinb);
    }
    
    //setSlider(selectElem.value);
    //updateTime(selectElem.value);
    updateTime(slider1, output1);
    updateTime(slider2, output2);
    updateTime(slider3, output3);
    updateTime(slider4, output4);
    gaffedemo.addEventListener('click', () => {
      console.log()
    });
  }
})();
</script>
</body>
</html>

                        
Recent Public Pastes
6 videos of old men fucking young girls BEST COLLECTION - 1 day ago Amazing Collections - 4 days ago [v1.2.1.0] Farming Simulator 25 Trainer (2025) (Plus +8) - 6 days ago TradingView - 1 week ago Untitled - 1 week ago They Like Nature - 1 week ago Untitled - 2 weeks ago Untitled - 2 weeks ago VIDEOS NO SHORTLINK AT ALL FREEEEEEEEEEEEE - 2 weeks ago Sanyuuu - 2 weeks ago