<!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="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/assets/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: #18597d; --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); } } /* Common components */ .row { display: flex; } .column { display: flex; flex-direction: column; } .filler { flex-grow: 2; } 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; flex-wrap: wrap; } .form-row input { flex: 2 1 auto; } .form-row > input { width: 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; margin: -0.5rem; } #header h4 a, #header h4 a:visited { background: url('/assets/logo_nobg.svg') left center no-repeat; background-size: auto calc(3rem - 4px); height: 3rem; display: inline-block; padding-left: 3rem; line-height: 3rem; } #header .link { font-size: 1.0rem; line-height: 2rem; font-weight: normal; padding: 0 0.5rem; } #header .changelang { font-size: 1.2rem; } #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 */ /* upload */ .page-login, .page-upload { background-image: url('./assets/bg.avif'); background-repeat: no-repeat; background-position: center; background-size: cover; } .page-login .modal form, .page-upload .modal form { backdrop-filter: blur(10px); background: var(--bg-component-half); } /* 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: 100%; aspect-ratio: 16 / 9; } /* article */ .article { width: 100%; max-width: 1280px; padding: 0.5rem; align-self: center; margin-bottom: 5rem; } .article .full-error { margin-top: 1rem; } .article-name { flex: 2 1 auto; margin-left: 1rem; } .article h1 { margin: 0; } .article h1, .article p { padding: 0 0.5rem 0.5rem; } /* table */ .table { display: grid; column-gap: 0; row-gap: 0; grid-template-columns: minmax(150px, 1.33fr) minmax(150px, 2.33fr); } .table-row { display: contents; } .table-row:nth-child(odd) .table-item { background: #f8f6ff; } .table-item { padding: 0.5rem; } /* holdbutton */ .holdbutton { --hold-bg: var(--bg-component); --hold-color: var(--main); --hold-fill: var(--main); --hold-fill-fg: white; display: inline-block; background: var(--hold-bg); position: relative; padding: 0; } .holdbutton .inner { padding: 0.25rem 1rem; display: flex; align-items: center; text-align: center; justify-content: center; height: 100%; background: var(--hold-color); background-clip: text; color: transparent; } .holdbutton.holdbutton-active { background: linear-gradient( var(--hold-fill) , var(--hold-fill)) var(--hold-bg) no-repeat 0 0; background-size: 0 100%; animation: stripes 2s linear 1 forwards; } .holdbutton.holdbutton-active div.inner { background: linear-gradient( var(--hold-fill-fg), var(--hold-fill-fg)) var(--hold-color) no-repeat 0 0; background-size: 0 100%; animation: stripes 2s linear 1 forwards; background-clip: text; } @keyframes stripes { to { background-size: 100% 100%; } } </style> </head> <body> <div id="header"></div> <main id="main"></main> <script type="text/javascript" src="/assets/app.js?v=2"></script> </body> </html>