<!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>