-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathattention-training.min.html
1 lines (1 loc) · 10.7 KB
/
attention-training.min.html
1
<!doctypehtml> <html lang="en"> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> <title>Attention Training Helper v1.0</title> <style>.arrow{width:100px;height:100px;margin:50px}.arrow svg{width:100%;height:100%}.countdown{font-size:24px;margin-top:20px}</style> <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script> <div class="container" id="timer-container" style="border:1px solid #000"> <h1>Attention Training Session Helper</h1> <div class="row gy-5"> <div class="col col-md-9"> <div class="row gy-5"> <div class="col col-md-4"> </div> <div class="col col-md-4 d-flex justify-content-center"> <div class="arrow"><svg class="bi bi-arrow-up-circle-fill" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/> </svg></div> </div> <div class="col col-md-4"> </div> </div> <div class="row align-items-center"> <div class="col col-md-4 d-flex justify-content-center"> <div class="arrow"><svg class="bi bi-arrow-left-circle-fill" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"/> </svg></div> </div> <div class="col col-md-4 d-flex justify-content-center"> <div class="person" style="width:150px;height:150px"><img alt="Human Icon" src="icons/person-svgrepo-com.svg" style="width:100%;height:100%"></div> </div> <div class="col col-md-4 d-flex justify-content-center"> <div class="arrow"><svg class="bi bi-arrow-right-circle-fill" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/> </svg></div> </div> </div> <div class="row gy-5"> <div class="col col-md-4 d-flex justify-content-center"> <div class="arrow"><svg class="bi bi-arrow-down-circle-fill" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/> </svg></div> </div> </div> <div class="row gy-5"> <div class="card"> <div class="card-header">Countdown Process</div> <div class="card-body"> <div class="row"> <div class="col col-md-3"> <h1><span class="badge text-bg-secondary" id="countdown"> 00:00</span></h1> </div> <div class="col col-md-9"> <div class="progress" id="spinner" aria-label="Example with label" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar"> <div class="progress-bar" id="countdown-progress" style="width:0%">0%</div> </div> </div> </div> </div> </div> </div> </div> <div class="col col-md-3"> <div class="btn-group" aria-label="Basic mixed styles example" role="group"><button class="btn btn-success" type="button" id="start-btn"><svg class="bi bi-play-circle" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/> </svg> Start</button> <button class="btn btn-secondary" type="button" id="pause-btn" disabled><svg class="bi bi-pause-circle" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> <path d="M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z"/> </svg> Pause</button> <button class="btn btn-danger" type="button" id="reset-btn" disabled><svg class="bi bi-stop-circle" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> <path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5z"/> </svg> Reset</button> <button class="btn btn-warning" type="button" data-bs-target="#settingsModal" data-bs-toggle="modal"><svg class="bi bi-gear" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/> <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/> </svg> Settings</button></div> </div> </div> <div class="fade modal" id="settingsModal" aria-hidden="true" aria-labelledby="settingsModalLabel" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Settings</h5> </div> <div class="modal-body"> <div class="mb-3"><label class="form-label" for="inputTimerSelect">Countdown Selector</label> <select class="form-select form-select-sm" id="inputTimerSelect" aria-label="Small select example"> <option value="300">05:00 <option value="360">06:00 <option value="420">07:00 <option value="480">08:00 <option value="540">09:00 <option value="600">10:00 <option value="660">11:00 <option value="720">12:00 <option value="780" selected>13:00 <option value="840">14:00 <option value="900">15:00 </select></div> <div class="mb-3"><label class="form-label" for="arrowColorSelect">Select Arrow Color</label> <select class="form-select" id="arrowColorSelect"> <option value="blue">Blue <option value="red">Red <option value="yellow">Yellow <option value="green">Green </select></div> <div class="mb-3"><label class="form-label" for="soundFrontSelect">Select Front Sound</label> <select class="form-select" id="soundFrontSelect"> <option value="sounds/fronts/hammering-1.wav">Hammering 1 <option value="sounds/fronts/hammering-2.wav">Hammering 2 <option value="sounds/fronts/hammering-3.wav">Hammering 3 <option value="sounds/fronts/hammering-4.wav">Hammering 4 </select></div> <div class="mb-3"><label class="form-label" for="soundSelect">Select Beep Sound</label> <select class="form-select" id="soundSelect"> <option value="sounds/beeps/beep-01.wav">Beep 01 <option value="sounds/beeps/beep-02.wav">Beep 02 <option value="sounds/beeps/beep-03.wav">Beep 03 <option value="sounds/beeps/beep-04.wav">Beep 04 <option value="sounds/beeps/beep-05.wav">Beep 05 <option value="sounds/beeps/beep-06.wav">Beep 06 <option value="sounds/beeps/beep-07.wav">Beep 07 <option value="sounds/beeps/beep-08.wav">Beep 08 <option value="sounds/beeps/beep-09.wav">Beep 09 <option value="sounds/beeps/beep-10.wav">Beep 10 </select></div> </div> <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button> <button class="btn btn-primary" type="button" id="apply-settings-btn">Apply</button></div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script>!function(n){n.fn.timerPlugin=function(t){let o,e=n.extend({countdownTime:n("#inputTimerSelect").val(),arrowColor:"blue",soundSource:"sounds/beeps/beep-07.wav",soundFrontSource:"sounds/fronts/hammering-1.wav"},t),r=e.countdownTime,i=-1,s=r,l=new Audio(e.soundFrontSource);function a(){o=setInterval(p,1e3),n("#start-btn").prop("disabled",!0),n("#pause-btn").prop("disabled",!1),n("#reset-btn").prop("disabled",!1),n("#spinner").css("visibility","visible"),l=new Audio(e.soundFrontSource),l.loop=!0,l.play()}function d(){clearInterval(o),n("#start-btn").prop("disabled",!1),n("#pause-btn").prop("disabled",!0),n("#spinner").css("visibility","hidden"),l.pause()}function u(){clearInterval(o),r=e.countdownTime,s=r,n("#countdown").html(""),n("#start-btn").prop("disabled",!1),n("#pause-btn").prop("disabled",!0),n("#reset-btn").prop("disabled",!0),n("#spinner").css("visibility","hidden"),l.pause()}function c(){e.arrowColor=n("#arrowColorSelect").val(),e.soundSource=n("#soundSelect").val(),e.soundFrontSource=n("#soundFrontSelect").val(),e.countdownTime=n("#inputTimerSelect").val(),u(),n("#settingsModal").modal("hide")}function p(){if(r<=0)clearInterval(o),n("#countdown").html("Countdown Ended");else{r--;let t=Math.floor(r/60),o=r%60;t<10&&(t="0"+t),o<10&&(o="0"+o);let e=(s-r)/s*100;console.log("Percent:",e);let i=n("#countdown-progress");i.parent().attr("aria-valuenow",e),i.css("width",e+"%").text(e.toFixed(0)+"%"),n("#countdown").html(`${t}:${o}`)}r%5==0&&function(){let t=n(".arrow svg"),o=Math.floor(Math.random()*t.length);for(;o===i;)o=Math.floor(Math.random()*t.length);i=o,t.each((function(t,r){t===o?n(r).attr("fill",e.arrowColor):n(r).attr("fill","white")})),r=o,new Audio(["sounds/directions/front.wav","sounds/directions/left.wav","sounds/directions/right.wav","sounds/directions/back.wav"][r]).play();var r}()}return this.each((function(){n("#start-btn").on("click",a),n("#pause-btn").on("click",d),n("#reset-btn").on("click",u),n("#apply-settings-btn").on("click",c)}))}}(jQuery),$(document).ready((function(){$("#timer-container").timerPlugin()}))</script>