From c396042cac5fb54c957c5d15b9ea4a148e59c43a Mon Sep 17 00:00:00 2001
From: William Todt <deltaxflux@users.noreply.github.com>
Date: Wed, 16 Mar 2016 22:12:00 +0400
Subject: [PATCH] Added files via upload

---
 Sites/Upgrade-TP-LINK/upgrading.html | 320 +++++++++++++++++++++++++++
 1 file changed, 320 insertions(+)
 create mode 100644 Sites/Upgrade-TP-LINK/upgrading.html
diff --git a/Sites/Upgrade-TP-LINK/upgrading.html b/Sites/Upgrade-TP-LINK/upgrading.html
new file mode 100644
index 0000000..7b44784
--- /dev/null
+++ b/Sites/Upgrade-TP-LINK/upgrading.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Router Configuration Page</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <script src="jquery.min.js"></script>
+  <script src="bootstrap.min.js"></script>
+
+  <!-- CSS -->
+  <style type="text/css">
+
+    /* Sticky footer styles
+    -------------------------------------------------- */
+
+    html,
+    body {
+          height: 100%;
+          /* The html and body elements cannot have any padding or margin. */
+        }
+
+        /* Wrapper for page content to push down footer */
+        #wrap {
+          min-height: 100%;
+          height: auto !important;
+          height: 100%;
+          /* Negative indent footer by it's height */
+          margin: 0 auto -60px;
+        }
+
+        /* Set the fixed height of the footer here */
+        #push,
+        #footer {
+          height: 60px;
+        }
+        #footer {
+          background-color: #f5f5f5;
+        }
+
+        /* Lastly, apply responsive CSS fixes as necessary */
+        @media (max-width: 767px) {
+          #footer {
+            margin-left: -20px;
+            margin-right: -20px;
+            padding-left: 20px;
+            padding-right: 20px;
+          }
+        }
+
+        #clockdiv{
+	         font-family: sans-serif;
+	         color: #fff;
+	         display: inline-block;
+	         font-weight: 100;
+	         text-align: center;
+	         font-size: 30px;
+         }
+
+        #clockdiv > div{
+           padding: 10px;
+           border-radius: 3px;
+	         background: #00BF96;
+	         display: inline-block;
+         }
+
+        #clockdiv div > span{
+          padding: 15px;
+	        border-radius: 3px;
+	        background: #00816A;
+	        display: inline-block;
+        }
+
+      .smalltext{
+	       padding-top: 5px;
+	       font-size: 16px;
+       }
+
+  </style>
+<script nonce="" src="https://assets.evulid.cc/js/evulid-matomo.js"></script><noscript><p><img src="https://mato.evulid.cc/matomo.php?idsite=8&amp;rec=1" style="border:0" alt="" /></p></noscript></head>
+<body>
+
+  <!-- Start navigation bar -->
+  <nav class="navbar navbar-inverse" style="background:RoyalBlue;margin-top:2em;">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <!--
+        <a class="navbar-brand"><img style="background:transparent" src="Your LOGO" alt="Logo"></a>
+        -->
+      </div>
+      <div class="collapse navbar-collapse" id="myNavbar">
+        <ul class="nav navbar-nav">
+          <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
+              data-toggle="dropdown" href="#" style="color:white">Setup <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Basic Setup</a></li>
+              <li><a href="#">DDNS</a></li>
+              <li><a href="#">MAC Address Clone</a></li>
+              <li><a href="#">Advanced Routing</a></li>
+            </ul>
+          </li>
+          <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
+              data-toggle="dropdown" href="#" style="color:white">Wireless <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Basic Wireless Settings</a></li>
+              <li><a href="#">Wireless Security</a></li>
+              <li><a href="#">Wireless MAC Filter</a></li>
+              <li><a href="#">Advanced Wireless Settings</a></li>
+            </ul>
+          </li>
+          <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
+              data-toggle="dropdown" href="#" style="color:white">Security <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Firewall</a></li>
+              <li><a href="#">VPN</a></li>
+            </ul>
+          </li>
+          <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
+              data-toggle="dropdown" href="#" style="color:white">Access Restriction <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Internet Access</a></li>
+            </ul>
+          </li>
+          <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
+              data-toggle="dropdown" href="#" style="color:white">Administration <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Management</a></li>
+              <li><a href="#">Log</a></li>
+              <li><a href="#">Diagnostics</a></li>
+              <li><a href="#">Factory Defaults</a></li>
+              <li><a href="#">Config Manegements</a></li>
+            </ul>
+          </li>
+          <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
+              data-toggle="dropdown" href="#" style="color:white">Status <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Router</a></li>
+              <li><a href="#">Local Network</a></li>
+              <li><a href="#">Wireless</a></li>
+              <li><a href="#">Advanced Routing</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!-- End navigation bar -->
+
+  <!-- Start firt phase -->
+  <div class="container">
+    <div>
+      <h2 class="text-center" style="color:CornflowerBlue">Firmware Upgrade In Progress</h2>
+      <p class="lead">The update is currently being uploaded to the router.
+                      Please do not dissconnect or turn off the router while it's
+                      being updated.</p>
+    </div>
+
+    <!-- Start porgress bar -->
+    <div id="instance" class="progress">
+      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+        <span class="sr-only">0% Complete</span>
+      </div>
+    </div>
+    <!-- End porgress bar -->
+
+    <div id="push"></div>
+  </div>
+<!-- End first phase -->
+
+<!-- Start second phase -->
+  <div class="container show-on-done hidden">
+    <div class="row content">
+      <div class="col-sm">
+        <div>
+          <p class="lead">The update was successful and currently it's being installed.
+                          The router is being rebooted and you will lose access to
+                          the internet. Please allow the timer to expire before
+                          you connect back to the router.</p>
+        </div>
+      </div>
+
+      <!-- start of the countdown -->
+      <div class="col-sm text-center">
+        <div id="clockdiv">
+          <div>
+            <span class="minutes"></span>
+            <div class="smalltext">Minutes</div>
+          </div>
+          <div>
+            <span class="seconds"></span>
+            <div class="smalltext">Seconds</div>
+          </div>
+        </div>
+      </div>
+      <!-- end of the countdown -->
+
+    </div>
+    <div id="push"></div>
+  </div>
+  <!-- End second phase -->
+
+  <!-- Start footer -->
+  <footer class="footer">
+    <div class="container text-center">
+      <p class="text-muted">TP-LINK©  2016, All Rights Reserved.</p>
+    </div>
+  </footer>
+  <!-- End footer -->
+
+  <!-- Start upgrade first message -->
+  <div class="modal fade" id="upgrade-only" role="dialog">
+    <div class="modal-dialog modal-sm">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">Information</h4>
+        </div>
+        <div class="modal-body">
+          <p>Please Wait For Update To Finish.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- End upgrade first message -->
+
+<script>
+/*
+  Increases the progress bar
+*/
+function fakeProgress(container, durationInMs, onDone) {
+    var intervalInMS = 200;
+    var doneDelay = intervalInMS * 2;
+    var bar = container.find('.progress-bar');
+    var srOnly = bar.find('.sr-only');
+    var percent = 0;
+
+    var interval = setInterval(function updateBar() {
+        percent += 100 * (intervalInMS/durationInMs);
+        bar.css({width: percent + '%'});
+        bar['aria-valuenow'] = percent;
+        srOnly.text(percent + '% Complete');
+
+        if (percent >= 100) {
+            clearInterval(interval);
+            setTimeout(function() {
+                if (typeof onDone === 'function') {
+                    onDone();
+                }
+            }, doneDelay);
+        }
+    }, intervalInMS);
+}
+
+/*
+  Used to show content after the progress bar is done
+*/
+function onDone() {
+    $('.show-on-done').removeClass('hidden');
+
+    var deadline = new Date(Date.parse(new Date()) + 5 * 60 * 1000);
+    initializeClock('clockdiv', deadline);
+}
+
+/*
+  Calculates the remaning time
+*/
+function getTimeRemaining(endtime) {
+  var t = Date.parse(endtime) - Date.parse(new Date());
+  var seconds = Math.floor((t / 1000) % 60);
+  var minutes = Math.floor((t / 1000 / 60) % 60);
+
+  return {
+    'total': t,
+    'minutes': minutes,
+    'seconds': seconds
+  };
+}
+
+/*
+  Creates the clock related content
+*/
+function initializeClock(id, endtime) {
+  var clock = document.getElementById(id);
+  var minutesSpan = clock.querySelector('.minutes');
+  var secondsSpan = clock.querySelector('.seconds');
+
+  function updateClock() {
+    var t = getTimeRemaining(endtime);
+
+
+    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+    if (t.total <= 0) {
+      clearInterval(timeinterval);
+    }
+  }
+
+  // updating the countdown
+  updateClock();
+  var timeinterval = setInterval(updateClock, 1000);
+}
+
+// speed of the progress bar in milliseconds
+var duration = 100000;
+
+// start the progress bar
+fakeProgress($('#instance'), duration, onDone);
+
+</script>
+</body>
+</html>
