import_in_progress.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="keywords" content="youtube, playlists, videos, delete videos, delete playlists, delete multiple videos, move multiple videos, merge playlists, video manager, playlist manager, youtube playlists, untube, google">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="UnTube is a simple Youtube playlist manager. Modify and keep track of your YouTube playlists with ease.">
  8. <meta name="author" content="Mohammed Abu Bakar Khan">
  9. <title>Import in progress</title>
  10. <style type="text/css">
  11. body {
  12. //background: linear-gradient(-45deg, #B2A3FF, #84bcf3, #AE876B, #B0E7AE);
  13. //background: linear-gradient(-45deg, #0645a4, #2480cd, #84bcf3, #b7d6f7);
  14. background: linear-gradient(-45deg, #AE876B, #ABA27B, #A7BC8A, #A3D69A);
  15. background-size: 400% 400%;
  16. animation: gradient 5s ease infinite;
  17. }
  18. @keyframes gradient {
  19. 0% {
  20. background-position: 0% 50%;
  21. }
  22. 50% {
  23. background-position: 100% 50%;
  24. }
  25. 100% {
  26. background-position: 0% 50%;
  27. }
  28. }
  29. .progress {
  30. height: 20px;
  31. margin-bottom: 20px;
  32. overflow: hidden;
  33. background-color: #f5f5f5;
  34. border-radius: 4px;
  35. box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  36. }
  37. .progress-bar {
  38. float: left;
  39. width: 0%;
  40. height: 100%;
  41. font-size: 12px;
  42. line-height: 20px;
  43. color: #fff;
  44. text-align: center;
  45. background-color: #337ab7;
  46. -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  47. box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  48. -webkit-transition: width .6s ease;
  49. -o-transition: width .6s ease;
  50. transition: width .6s ease;
  51. }
  52. </style>
  53. <script src="https://unpkg.com/htmx.org@1.4.1"></script>
  54. <script src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>
  55. <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans&display=swap" rel="stylesheet">
  56. <!-- Bootstrap core CSS -->
  57. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  58. </head>
  59. <body class="bg-dark text-dark" style="font-family: 'Fredoka One',monospace">
  60. <div class="container-fluid">
  61. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  62. <h1><kbd>UnTube</kbd></h1>
  63. </div>
  64. <br>
  65. <br>
  66. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  67. <h3>{{ user.username|capfirst }}, click the button below to import your YouTube playlists into UnTube.</h3>
  68. </div>
  69. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  70. <h3>It will take a few minutes depending on the number of playlists you have.</h3>
  71. </div>
  72. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  73. <h3>Please be patient :)</h3>
  74. </div>
  75. <div hx-target="this" hx-swap="outerHTML">
  76. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  77. <button class="btn btn-lg btn-success me-2" hx-post="{% url 'start' %}">
  78. Import
  79. </button>
  80. </div>
  81. <div class="d-flex justify-content-center">
  82. <a class="btn btn-lg btn-secondary" href="{% url 'cancel' %}">
  83. Nevermind, I'll do it later :(
  84. </a>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <script>
  90. <!-- for htmx to send csrf_token with every post request -->
  91. document.body.addEventListener('htmx:configRequest', (event) => {
  92. event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
  93. })
  94. </script>
  95. <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>
  96. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  97. <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>
  98. </body>
  99. </html>