diff options
| author | Emile <hanemile@protonmail.com> | 2019-10-09 15:45:14 +0200 |
|---|---|---|
| committer | Emile <hanemile@protonmail.com> | 2019-10-09 15:45:14 +0200 |
| commit | a03fb9abdf80a771bd71459cd3751b5cec4b3338 (patch) | |
| tree | cb16b004f7c30dc74d34a20dca4ae9e1b0c27dc6 | |
| parent | 392f2b771dcec723bd70f01e624653150f85931b (diff) | |
loading button spinner bootstrap stuff
| -rw-r--r-- | hosted/credentials.html | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/hosted/credentials.html b/hosted/credentials.html index 1b3f46d..5e5da0f 100644 --- a/hosted/credentials.html +++ b/hosted/credentials.html @@ -3,7 +3,8 @@ <html> <head> <meta charset="utf-8"> - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> body { background-image: url("/files/background.png"); @@ -47,7 +48,14 @@ </tbody> </table> - <a href="http://{{.Username}}.{{.Hostname}}" class="btn btn-primary" role="button">Login</a> + <button class="btn btn-primary" type="button" disabled id="before-a"> + <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="before-b"></span> + <span id="before-b-text"> + Loading... + </span> + </button> + + <a href="http://{{.Username}}.{{.Hostname}}" class="btn btn-primary" role="button" id="after" style="display: none;">Login</a> </div> </div> @@ -56,5 +64,26 @@ </div> </div> </body> + <script type="text/javascript"> + $(document).ready(function() { + setTimeout(function() { + $("#before-b-text").text("starting the container"); + }, 2000); + setTimeout(function() { + $("#before-b-text").text("adding the container to the circus network"); + }, 4000); + setTimeout(function() { + $("#before-b-text").text("fetching certificates"); + }, 6000); + setTimeout(function() { + $("#before-b-text").text("HACK THE PLANET!"); + }, 6000); + setTimeout(function() { + $("#before-a").hide(); + $("#before-b").hide(); + $("#after").show(); + }, 10000); + }); + </script> </html> {{end}} |
