Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| @property --rotate { | |
| syntax: "<angle>"; | |
| initial-value: 132deg; | |
| inherits: false; | |
| } | |
| :root { | |
| --card-height: 65vh; | |
| --card-width: calc(var(--card-height) / 1.5); | |
| } | |
| body { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| .card { | |
| background: #6882f7; | |
| width: var(--card-width); | |
| height: var(--card-height); | |
| padding: 3px; | |
| position: relative; | |
| border-radius: 6px; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| display: flex; | |
| font-size: 1.5em; | |
| color: rgb(88 199 250 / 0%); | |
| cursor: pointer; | |
| font-family: cursive; | |
| } | |
| .card:hover { | |
| color: rgb(0, 238, 255); | |
| transition: color 1s; | |
| } | |
| .card:hover:before, .card:hover:after { | |
| animation: none; | |
| opacity: 0; | |
| } | |
| .card::before { | |
| content: ""; | |
| width: 104%; | |
| height: 102%; | |
| border-radius: 8px; | |
| background-image: linear-gradient( | |
| var(--rotate) | |
| , #5ddcff, #3c67e3 43%, #4e00c2); | |
| position: absolute; | |
| z-index: -1; | |
| top: -1%; | |
| left: -2%; | |
| animation: spin 2.5s linear infinite; | |
| } | |
| .card::after { | |
| position: absolute; | |
| content: ""; | |
| top: calc(var(--card-height) / 6); | |
| left: 0; | |
| right: 0; | |
| z-index: -1; | |
| height: 100%; | |
| width: 100%; | |
| margin: 0 auto; | |
| transform: scale(0.8); | |
| filter: blur(calc(var(--card-height) / 6)); | |
| background-image: linear-gradient( | |
| var(--rotate) | |
| , #5ddcff, #3c67e3 43%, #4e00c2); | |
| opacity: 1; | |
| transition: opacity .5s; | |
| animation: spin 2.5s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| --rotate: 0deg; | |
| } | |
| 100% { | |
| --rotate: 360deg; | |
| } | |
| } | |
| a { | |
| color: #212534; | |
| text-decoration: none; | |
| font-family: sans-serif; | |
| font-weight: bold; | |
| margin-top: 2rem; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| width: 80%; | |
| } | |
| @media only screen and (max-width: 600px) { | |
| .container { | |
| width: 100%; | |
| } | |
| .card::before { | |
| content: ""; | |
| width: 104%; | |
| height: 102%; | |
| } | |
| :root { | |
| --card-height: 30vh; | |
| --card-width: calc(var(--card-height) / 1.5); | |
| } | |
| } | |
| </style> | |
| <title>File Storage</title> | |
| </head> | |
| <body> | |
| <h1 style="text-align: center; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold;">File Storage System</h1> | |
| <div class="container"> | |
| <a href="{{ url_for('upload_file') }}"> | |
| <div class="card"> | |
| Upload a file | |
| </div> | |
| </a> | |
| <a href="{{ url_for('list_files') }}"> | |
| <div class="card"> | |
| View uploaded files | |
| </div> | |
| </a> | |
| </div> | |
| </body> | |
| </html> | |