<!doctype html>
<html>
<head>
  
  
  <title>(Bad) UI: Volume</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css'>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js' integrity='sha256-vrn14y7WH7zgEElyQqm2uCGSQrX/xjYDjniRUQx3NyU=' crossorigin='anonymous'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script>
  <link rel='stylesheet' href='style.css'/>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-MZVLD731EP"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-MZVLD731EP');
  </script>
</head>
<body>
  <audio id='audio' src='patience.mp3' loop></audio>
  <img id='hammer' src='hammer.svg'>
  <script src='script.js'></script>
  <div id='button' class='yellow accent-4'></div>
  <div id='info' class='light-blue lighten-5'>
    <span style='font-size: 18px'>Click the hammer to increase the volume! Don't stop, or it'll go back down :D</span><span class='grey-text'><br><br>Music: <b>Patience</b> by <a href='https://www.hooksounds.com/?ref=ryan778.github.io' target='_blank'>HookSounds</a><br>Legally licensed under <a href='https://creativecommons.org/licenses/by-nd/4.0/' target='_blank'>Creative Commons</a><br>Hammer image under <a href='https://commons.wikimedia.org/wiki/File:Tools-hammer.svg' target='_blank'>public domain</a>.</span>
  </div>
  <div>
    <p id='range-outer' class='range-field lime lighten-3'>
      <input type='range' id='range' disabled value='0' min='0' max='100' />
    </p>
  </div>
  <div id='vol-outer' class='lime lighten-3'>
    <p>Volume: <b id='vol-text'>0.00%</b></p>
  </div>
</body>
</html>

Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company