feat&typo: add a extend step between 5 and 6 to clearify step 5

src/index.html

@@ -65,7 +65,10 @@
 
     <div class="step" data-x="169" data-y="171" data-z="0" data-scale="0.1">
       <img src="assets/nokia-logo.jpg" alt="nokia-logo" style="margin: auto;position: relative;left: -190px;top: 7px;opacity: 0;" id="step5-logo">
-      <p style="position: absolute;font-size: 36px;width: 900px;top: 224px;background-color: rgb(255 255 255 / 0.98);border-radius: 64px 128px;padding: 32px;opacity: 0;" id="step5-announcement">The UK government announced in July that all the UK's mobile providers were being banned from buying new Huawei 5G equipment after 31 December, and must also remove all the Chinese firm's 5G kit from their networks by 2027.</p>
+    </div>
+    
+    <div class="step" data-x="169" data-y="171" data-z="20" data-rotate-x="85" data-scale="0.1" id="step5-ext"> <!-- step5-extend -->
+      <p style="position: absolute;font-size: 36px;width: 900px;top: 364px;background-color: rgb(255 255 255 / 0.98);border-radius: 64px 128px;padding: 32px;opacity: 0;" id="step5-announcement">The UK government announced in July that all the UK's mobile providers were being banned from buying new Huawei 5G equipment after 31 December, and must also remove all the Chinese firm's 5G kit from their networks by 2027.</p>
     </div>
 
     <div class="step" data-x="-350" data-y="0" data-scale="0.5" id="step6">

src/js/dr.js

@@ -8,7 +8,7 @@ function slideHandler() {
         document.currentStep += 1
     }
     else{
-        document.currentStep = 1;
+        document.currentStep = 1
     }
 }
 
@@ -46,7 +46,7 @@ document.stepFunctions.push(() => {
         document.querySelector("#step2-program").classList.add("animate__animated","animate__backInUp")
 
         document.querySelector("#step1-etwork").style.setProperty("opacity","0")
-    }, 1500);
+    }, 1500)
 })
 
 // brings out clean network program list
@@ -65,12 +65,12 @@ document.stepFunctions.push(() => {
     document.querySelector("#step3-carrier").style.setProperty("opacity", "1")
     setTimeout(() => {
         document.querySelector("#step2-cnp-list p").style.setProperty("visibility", "hidden")
-    }, 1000);
+    }, 1000)
     setTimeout(() => {
         // brings out carrier translation
         document.querySelector("#step3-carrier").classList.add("change-to-darkviolet")
         document.querySelector("#step3-carrier-translation").classList.add("animate__animated", "animate__fadeInUp")
-    }, 1500);
+    }, 1500)
     api.next()
 })
 
@@ -91,14 +91,15 @@ document.stepFunctions.push(() => {
     document.querySelector("#step5-logo").classList.add("animate__animated", "animate__fadeIn")
 })
 
-// brings out step5-announcement
+// 5 -> 5-ext and brings out step5-announcement
 document.stepFunctions.push(() => {
+    document.querySelector("#step3").style.setProperty("opacity", "0.3")
+    api.next()
     document.querySelector("#step5-announcement").classList.add("animate__animated", "animate__backInDown")
 })
 
 // 5 -> 6
 document.stepFunctions.push(() => {
-    document.querySelector("#step3").style.setProperty("opacity", "0.3")
     document.querySelector("#step1").style.setProperty("opacity", "1")
     api.next()
 })
@@ -136,8 +137,8 @@ document.stepFunctions.push(() => {
 
 // 8 -> 9
 document.stepFunctions.push(() => {
-    document.querySelector("#step8").style.setProperty("opacity", "1")
     api.next()
+    document.querySelector("#step8").style.setProperty("opacity", "1")
 })
 
 // brings out dialog
@@ -162,10 +163,10 @@ document.stepFunctions.push(() => {
 
     setTimeout(() => {
         document.querySelector("#step10-thanks").classList.add("animate__animated", "animate__jackInTheBox")
-    }, 1500);
+    }, 1500)
 })
 
-var isMobile = (function () {let check = false;(function (a) {if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;})(navigator.userAgent || navigator.vendor || window.opera);return check;})();
+var isMobile = (function () {let check = false;(function (a) {if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;})(navigator.userAgent || navigator.vendor || window.opera);return check;})()
 
 if (isMobile) {
     document.querySelector("#mobile-arrow").style.setProperty("visibility", "visible")