trend.tpl 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. % setdefault("start", False)
  2. % setdefault("end", False)
  3. % setdefault("error", '')
  4. % if start:
  5. <html>
  6. <head>
  7. <title>Trend</title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
  10. <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
  11. <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
  12. <link rel="stylesheet" href="/grocery/static/cloud-gears.css"/>
  13. <link rel="manifest" href="/grocery/static/manifest.json"/>
  14. <link rel="icon" type="image/png" href="/grocery/static/favicon.png"/>
  15. <style>
  16. html {
  17. --scrollbarBG: #333333;
  18. --thumbBG: #080808;
  19. }
  20. svg {
  21. max-height: min(100vh, calc(100vw * 9 / 16));
  22. max-width: calc(100vw - 2em);
  23. }
  24. body {
  25. background-color: #080808;
  26. color: #cccccc;
  27. text-align: center;
  28. }
  29. div.loader-container {
  30. position: absolute;
  31. left: 50vw;
  32. top: 50vh;
  33. margin-top: -5.5em;
  34. margin-left: -87.5px;
  35. padding-bottom: 2em;
  36. height: 9em;
  37. width: 175px;
  38. }
  39. div.loader-container:not(:has(+ .done)) {
  40. display: block;
  41. }
  42. .loader-container:not(:last-child) {
  43. display: none;
  44. }
  45. div.progress {
  46. margin: 1em 0 1em;
  47. }
  48. div.progress:not(:has(+ .done)) {
  49. display: block;
  50. }
  51. .progress label {
  52. text-align:left;
  53. }
  54. .progress label:after {
  55. content: "...";
  56. }
  57. .progress:not(:last-child) {
  58. display: none;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="loader-container">
  64. <span class="loader"></span>
  65. % end
  66. % if end:
  67. </div>
  68. <div class="done"></div>
  69. {{!form}}
  70. % if error:
  71. % include('error-500', error=error)
  72. % else:
  73. {{!svg}}
  74. % end
  75. </body>
  76. </html>
  77. % end