test.html 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta name="description" content="">
  7. <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  8. <meta name="generator" content="Hugo 0.83.1">
  9. <title>Import in progress</title>
  10. <style type="text/css">
  11. .progress {
  12. height: 20px;
  13. margin-bottom: 20px;
  14. overflow: hidden;
  15. background-color: #f5f5f5;
  16. border-radius: 4px;
  17. box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  18. }
  19. .progress-bar {
  20. float: left;
  21. width: 0%;
  22. height: 100%;
  23. font-size: 12px;
  24. line-height: 20px;
  25. color: #fff;
  26. text-align: center;
  27. background-color: #337ab7;
  28. -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  29. box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  30. -webkit-transition: width .6s ease;
  31. -o-transition: width .6s ease;
  32. transition: width .6s ease;
  33. }
  34. </style>
  35. <script src="https://unpkg.com/htmx.org@1.4.1"></script>
  36. <script src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>
  37. <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans&display=swap" rel="stylesheet">
  38. <!-- Bootstrap core CSS -->
  39. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  40. </head>
  41. <body class="bg-dark text-white" style="font-family: 'Fredoka One'">
  42. <div class="container-fluid">
  43. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  44. <h1>UnTube</h1>
  45. </div>
  46. <br>
  47. <br>
  48. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  49. <h3>{{ user.username|capfirst }}, click the button below to import your YouTube playlists into UnTube.</h3>
  50. </div>
  51. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  52. <h3>It will take a few minutes depending on the number of playlists you have.</h3>
  53. </div>
  54. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  55. <h3>You will be redirected automatically. Please be patient :)</h3>
  56. </div>
  57. <div hx-target="this" hx-swap="outerHTML">
  58. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  59. <button class="btn btn-lg btn-success" hx-post="{% url 'start' %}">
  60. Import
  61. </button>
  62. </div>
  63. </div>
  64. </div>
  65. <script>
  66. <!-- for htmx to send csrf_token with every post request -->
  67. document.body.addEventListener('htmx:configRequest', (event) => {
  68. event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
  69. })
  70. </script>
  71. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  72. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  73. <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
  74. </body>
  75. </html>