<!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; --color-alt: #7a9ad3; --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; } 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; } .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; margin-top: 0.5rem; 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); } } .page-upload { background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('./assets/bg_admin.avif'); } .page-upload footer { backdrop-filter: blur(10px); background: var(--bg-component-half); align-self: center; padding: 0.25rem 2rem; border-radius: 1rem; margin-bottom: 1rem; } /* Common components */ 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%; } input[type=text]:disabled, input[type=password]:disabled, input[type=datetime]:disabled { background: var(--bg-component); border-color: var(--color-alt); color: var(--color-alt); } .form-row input:disabled + button { border-color: var(--color-alt); } .form-row { display: flex; position: relative; } .form-row input { flex: 2 1 auto; } .form-row .form-column { display: flex; flex-direction: column; justify-content: space-around; } .form-row button { min-width: 30px; text-align: center; border: 1px solid var(--main); border-left: none; background: var(--bg-component); text-decoration: none; } .form-row.image-banner { background-size: cover; background-color: white; border: 2px dashed var(--main); aspect-ratio: 16 / 9; align-self: center; width: 100%; max-width: 360px; } .form-row .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus { outline: 1px solid var(--main); } .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; text-decoration: none; } .button.spinner, input[type=submit].spinner { height: 2rem; margin-top: 2rem; margin-bottom: 1.5rem; } .button-alert { background: var(--error-bg); color: var(--color); } .loading-bar { border: 1px solid var(--main); background: var(--bg-component); } .loading-bar::after { height: 1rem; background: var(--main); min-width: 1px; content: ''; display: block; width: var(--progress); transition: width 3s; } form p, label { font-size: 0.75rem; font-weight: 500; margin: 0.75rem 0 0.5rem 0; display: block; } form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-alt); } /* Nav */ #header { background: var(--bg-component); } #header nav, #header .nav { display: flex; 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); } #header .nav { overflow-x: hidden; padding: 0.75rem 1rem 0.25rem; min-height: 4rem; align-items: flex-start; border-bottom: 1px solid #0001; } #header .nav:hover { overflow-x: auto; } #header .nav .inner { flex: 2 1 auto; display: flex; justify-content: center; } #header .nav a { margin: 0 0.25rem; padding: 0.25rem 1.5rem; border-radius: 3rem; } #header .nav a.empty { opacity: 0.5; } #header .nav a.active { background: var(--bg-component-alt); color: var(--color); text-decoration: none; } #header .error { background: var(--error-bg); color: var(--color); font-size: 0.8rem; text-align: center; padding: 0.25rem; cursor: pointer; } /* 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'); } /* browse */ .gallery { margin: 1rem; display: flex; flex-direction: column; } .gallery-year { margin: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--main); text-align: center; font-size: 2rem; } .gallery-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; } .gallery .group { display: flex; flex-wrap: wrap; } .gallery .group a { width: 40vw; max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); } .gallery .group a span { align-self: stretch; text-align: center; background: #fffb; } /* Player */ .player { background: black; text-align: center; margin-bottom: 1rem; } .player video { margin: 0 auto; width: 1280px; max-width: 100vw; aspect-ratio: 16 / 9; } </style> </head> <body> <div id="header"></div> <main id="main"></main> <script type="text/javascript" src="/assets/app.js?v=2"></script> </body> </html>