<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Filadelfia web portal</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="/favicon.png"> <style> [hidden] { display: none !important; } :root { --bg: #fff; --bg-component: #f3f7ff; --bg-component-half: #f3f7ff77; --bg-component-alt: #ffd99c; --color: #031131; --main: #1066ff; --main-fg: #fff; --error: red; --error-bg: hsl(0, 75%, 80%); } /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; font-size: 16px; font-family: 'Inter var', Helvetica, Arial, sans-serif; font-variation-settings: "slnt" 0; font-feature-settings: "case", "frac", "tnum", "ss02", "calt", "ccmp", "kern"; background: var(--bg); color: var(--color); display: flex; flex-direction: column; } .italic { font-variation-settings: "slnt" 10deg; } input, button, textarea, select { font: inherit; } h1 { font-size: 1.88rem; } h2 { font-size: 1.66rem; } h3 { font-size: 1.44rem; } h4 { font-size: 1.22rem; } h5 { font-size: 1.0rem; } a, a:visited, button { text-decoration: underline; border: none; padding: 0; margin: 0; font-weight: bold; cursor: pointer; color: var(--main); background: transparent; } input[type=text], input[type=password], input[type=datetime] { border: 1px solid var(--main); background: #fff; color: var(--color); border-radius: 0; padding: 0.25rem; line-height: 1rem; outline: none; width: 100%; } .button, input[type=submit] { background: var(--main); color:var(--main-fg); border-radius: 10px; padding: 0.25rem 1rem; border: none; margin: 1rem 0 2rem; align-self: center; cursor: pointer; } .button.spinner, input[type=submit].spinner { height: 2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus { outline: 1px solid var(--main); } h1 { margin-bottom: 1rem; } #main { flex: 2 1 auto; display: flex; flex-direction: column; } .page { flex: 2 1 auto; display: flex; flex-direction: column; } .modal { flex: 2 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .modal h3 { text-align: center; margin-bottom: 1rem; } form p, label { font-size: 0.75rem; font-weight: 500; margin: 0.5rem 0; display: block; } .error { color: var(--error); } .modal form { background: var(--bg-component); border-radius: 20px; width: 100%; max-width: 500px; margin: 2rem; padding: 1rem; display: flex; flex-direction: column; } .loading-spinner { display: inline-block; width: 80px; height: 80px; align-self: center; } .loading-spinner:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid var(--main); border-color: var(--main) transparent var(--main) transparent; animation: loading-spinner 1.2s linear infinite; } @keyframes loading-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Nav */ #header nav { display: flex; background: var(--bg-component); padding: 0.5rem 1rem 0.5rem 0; } #header nav a, #header nav button { margin-left: 1rem; } #header h4 { flex: 2 1 auto; } #header h4 a, #header h4 a:visited { color: var(--color); } #header .change { font-size: 1.2rem; line-height: 2rem; font-weight: normal; padding: 0 0.5rem; } #header .logout, #header .upload { padding: 0.25rem 1.5rem; border-radius: 2rem; text-decoration: none; } #header .logout { background: var(--bg-component-alt); color: var(--color); } #header .upload { background: var(--main); color: var(--main-fg); } /* Main */ .full-error { background: var(--error-bg); color: var(--color); font-size: 0.8rem; text-align: center; padding: 0.25rem; cursor: pointer; flex: 2 1 auto; display: flex; justify-content: center; align-items: center; } footer { text-align: center; padding: 1rem; } footer a { font-size: 0.8rem; } /* login */ .page-login form a { text-align: center; font-weight: normal; } .page-login { background-repeat: no-repeat; background-position: center; background-size: cover; } .page-login .modal form { backdrop-filter: blur(10px); background: var(--bg-component-half); } .avifsupport .page-login { background-image: url('./assets/bg.avif'); } .jpegonly .page-login { background-image: url('./assets/bg.jpg'); } </style> </head> <body> <div id="header"></div> <main id="main"></main> <script type="text/javascript" src="/assets/app.js?v=2"></script> </body> </html>