12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- % setdefault("start", False)
- % setdefault("end", False)
- % setdefault("progress", dict())
- % setdefault("done", False)
- % if start:
- <html>
- <head>
- <title>{{title}}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1"/>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
- <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
- <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
- <link rel="stylesheet" href="/grocery/static/cloud-gears.css"/>
- <style>
- html {
- --scrollbarBG: #333333;
- --thumbBG: #080808;
- }
- svg {
- max-height: min(100vh, calc(100vw * 9 / 16));
- max-width: calc(100vw - 2em);
- }
- body {
- background-color: #080808;
- color: #cccccc;
- text-align: center;
- }
- .loader-container {
- position: absolute;
- left: 45vw;
- top: 45vh;
- }
- .loader-container:has(+ .done) {
- display: none;
- }
- div.progress {
- display:grid;
- grid-template-columns: max-content max-content;
- grid-gap:5px;
- }
- div.progress label {
- text-align:left;
- }
- div.progress label:after {
- content: "...";
- }
- div.progress:has(+ .done) {
- display: none;
- }
- div.progress:has(+ .done) label:after {
- content: "";
- }
- </style>
- </head>
- <body align="center">
- <div class="loader-container">
- % end
- % include('progress', **progress, done=done)
- % if end:
- </div>
- <div class="done"/>
|