marijo/movmaker-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine landing page header

Browse source
This commit is contained in:
hbrain 2026-05-25 21:44:14 +02:00
parent 923d6f4ff0
commit b9848916b1
2 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.php
View file

@ -86,7 +86,7 @@ usort($videos, function($a, $b) use ($videoCache) {
$page=max(1,(int)($_GET['page']??1)); $per=$config['items_per_page']; $total=count($videos); $pages=max(1,(int)ceil($total/$per)); $page=min($page,$pages); $slice=array_slice($videos,($page-1)*$per,$per); $page=max(1,(int)($_GET['page']??1)); $per=$config['items_per_page']; $total=count($videos); $pages=max(1,(int)ceil($total/$per)); $page=min($page,$pages); $slice=array_slice($videos,($page-1)*$per,$per);
?> ?>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MVLog</title><link rel="stylesheet" href="style.css"></head><body> <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MVLog</title><link rel="stylesheet" href="style.css"></head><body>
<header><h1>MVLog</h1></header><main> <header class="site-header"><div class="brand"><h1>MVLog</h1><p>Bubulescu.Org</p></div></header><main>
<section id="videos"><?php if(!$slice): ?><p>No videos yet.</p><?php endif; ?><div class="video-list"> <section id="videos"><?php if(!$slice): ?><p>No videos yet.</p><?php endif; ?><div class="video-list">
<?php foreach($slice as $v): $name=basename($v); $url=$config['public_videos'].'/'.rawurlencode($name); $size=filesize($v); $m=$videoCache[$name]['metadata'] ?? video_metadata($v); ?> <?php foreach($slice as $v): $name=basename($v); $url=$config['public_videos'].'/'.rawurlencode($name); $size=filesize($v); $m=$videoCache[$name]['metadata'] ?? video_metadata($v); ?>
<article class="video-row"><video controls controlsList="nodownload" oncontextmenu="return false" preload="metadata" src="<?=h($url)?>"></video><div class="video-info"><h2><?=h($m['title'])?></h2><p class="meta"><span><?=h($m['date'])?></span><?php if($m['location']): ?><span><?=h($m['location'])?></span><?php endif; ?></p><?php if($m['description']): ?><p class="description"><?=h($m['description'])?></p><?php endif; ?><p class="details"><?=h(round($size/1048576,1))?> MB</p></div></article> <article class="video-row"><video controls controlsList="nodownload" oncontextmenu="return false" preload="metadata" src="<?=h($url)?>"></video><div class="video-info"><h2><?=h($m['title'])?></h2><p class="meta"><span><?=h($m['date'])?></span><?php if($m['location']): ?><span><?=h($m['location'])?></span><?php endif; ?></p><?php if($m['description']): ?><p class="description"><?=h($m['description'])?></p><?php endif; ?><p class="details"><?=h(round($size/1048576,1))?> MB</p></div></article>

2
style.css
View file

@ -1 +1 @@
@font-face{font-family:BebasNeue;src:url('assets/fonts/BebasNeue-Regular.ttf')}@font-face{font-family:IBMPlexCaption;src:url('assets/fonts/IBMPlexSans-SemiBold.ttf')}@font-face{font-family:NotoStamp;src:url('assets/fonts/NotoSans-Bold.ttf')}:root{font-family:IBMPlexCaption,system-ui,sans-serif;color:#F3F4F6;background:#111315}body{margin:0;background:#111315 url(assets/img/background.jpg) center center/cover fixed no-repeat;min-height:100vh}body::before{content:'';position:fixed;inset:0;background:rgba(17,19,21,.78);z-index:-1}header{position:sticky;top:0;z-index:1000;background:rgba(27,30,34,.96);backdrop-filter:blur(6px);color:#F3F4F6;padding:1.2rem 2rem;text-align:center;box-shadow:0 2px 16px #0008}header h1{font-family:NotoStamp,system-ui,sans-serif;font-size:3rem;letter-spacing:.06em;margin:0}a{color:#3BA7A0}.button,button{background:#C46A3A;color:#111315;border:0;border-radius:.5rem;padding:.7rem 1rem;text-decoration:none;cursor:pointer}nav a{margin-left:1rem;color:#F3F4F6}main{max-width:1100px;margin:2rem auto;padding:0 1rem}.tabs{display:flex;gap:0;justify-content:center;margin:1rem auto -1.2rem;border-bottom:1px solid #3BA7A0}.tabs a{background:#111315;padding:.65rem 1.2rem;border:1px solid #3BA7A0;border-bottom:0;border-radius:.55rem .55rem 0 0;text-decoration:none;color:#F3F4F6;margin:0 .12rem;position:relative;top:1px}.tabs a.active{background:#C46A3A;color:#111315;border-color:#C46A3A}.video-list{display:flex;flex-direction:column;gap:1rem}.video-row,form{background:rgba(27,30,34,.92);backdrop-filter:blur(2px);border-radius:.8rem;padding:1rem;box-shadow:0 2px 16px #0006}.video-row{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:1rem;align-items:start}.video-row video{width:100%;aspect-ratio:16/9;background:#111315;border-radius:.5rem}.video-info h2{font-size:1.6rem;margin:.1rem 0 .5rem}.meta{display:flex;gap:.5rem;flex-wrap:wrap;color:#A0A4AB;margin:.25rem 0}.meta span{background:#26383A;border-radius:999px;padding:.25rem .55rem}.description{font-family:system-ui,sans-serif;font-weight:400;font-size:1rem;line-height:1.45;color:#F3F4F6;margin:.9rem 0}.details{color:#A0A4AB;font-size:.9rem}label{display:block;margin:.8rem 0;font-weight:600}.counter{display:block;margin-top:.25rem;color:#A0A4AB;font-size:.8rem;font-weight:400}input,textarea{display:block;width:100%;box-sizing:border-box;margin-top:.3rem;padding:.65rem;border:1px solid #3BA7A0;background:#111315;color:#F3F4F6;border-radius:.45rem}textarea{min-height:6rem}.ok,.err{padding:1rem;border-radius:.5rem;margin-bottom:1rem}.ok{background:#1f3b32;color:#F3F4F6}.err{background:#4a241f;color:#F3F4F6}.pages a{display:inline-block;margin:.2rem;padding:.45rem .7rem;background:#1B1E22;border-radius:.4rem;text-decoration:none}.pages .active{background:#C46A3A;color:#111315}footer{font-family:NotoStamp,system-ui,sans-serif;text-align:center;color:#A0A4AB;padding:2rem;font-size:.8rem}.admin-list{display:flex;flex-direction:column;gap:.7rem}.admin-item,.file-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:rgba(27,30,34,.92);padding:.8rem;border-radius:.6rem}.admin-item span,.file-row span{color:#A0A4AB}.file-list{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.file-row{margin:0}.file-row button{padding:.45rem .7rem}.caption-row{display:grid;grid-template-columns:140px 1fr auto;gap:1rem;align-items:start;background:rgba(27,30,34,.92);padding:.8rem;border-radius:.6rem}.preview img,.preview video{width:140px;aspect-ratio:16/9;object-fit:cover;border-radius:.4rem;background:#111315}.preview span{display:grid;place-items:center;width:140px;aspect-ratio:16/9;background:#111315;border-radius:.4rem;color:#A0A4AB}.caption-fields textarea{min-height:4rem}.caption-fields strong{display:block;margin-bottom:.35rem}@media(max-width:760px){.caption-row{grid-template-columns:1fr}.preview img,.preview video,.preview span{width:100%}}@media(max-width:760px){.video-row{grid-template-columns:1fr}header h1{font-size:2.4rem}} @font-face{font-family:BebasNeue;src:url('assets/fonts/BebasNeue-Regular.ttf')}@font-face{font-family:IBMPlexCaption;src:url('assets/fonts/IBMPlexSans-SemiBold.ttf')}@font-face{font-family:NotoStamp;src:url('assets/fonts/NotoSans-Bold.ttf')}:root{font-family:IBMPlexCaption,system-ui,sans-serif;color:#F3F4F6;background:#111315}body{margin:0;background:#111315 url(assets/img/background.jpg) center center/cover fixed no-repeat;min-height:100vh}body::before{content:'';position:fixed;inset:0;background:rgba(17,19,21,.78);z-index:-1}header{position:sticky;top:0;z-index:1000;background:rgba(27,30,34,.96);backdrop-filter:blur(6px);color:#F3F4F6;padding:1.2rem 2rem;text-align:center;box-shadow:0 2px 16px #0008}header h1{font-family:NotoStamp,system-ui,sans-serif;font-size:3rem;letter-spacing:.06em;margin:0}.site-header{background:linear-gradient(180deg,rgba(27,30,34,.88),rgba(27,30,34,.62));border-bottom:1px solid rgba(59,167,160,.35)}.brand{display:inline-block;padding:.25rem 2rem .55rem;border-bottom:2px solid #3BA7A0}.brand p{font-family:NotoStamp,system-ui,sans-serif;margin:.25rem 0 0;color:#A0A4AB;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}a{color:#3BA7A0}.button,button{background:#C46A3A;color:#111315;border:0;border-radius:.5rem;padding:.7rem 1rem;text-decoration:none;cursor:pointer}nav a{margin-left:1rem;color:#F3F4F6}main{max-width:1100px;margin:2rem auto;padding:0 1rem}.tabs{display:flex;gap:0;justify-content:center;margin:1rem auto -1.2rem;border-bottom:1px solid #3BA7A0}.tabs a{background:#111315;padding:.65rem 1.2rem;border:1px solid #3BA7A0;border-bottom:0;border-radius:.55rem .55rem 0 0;text-decoration:none;color:#F3F4F6;margin:0 .12rem;position:relative;top:1px}.tabs a.active{background:#C46A3A;color:#111315;border-color:#C46A3A}.video-list{display:flex;flex-direction:column;gap:1rem}.video-row,form{background:rgba(27,30,34,.92);backdrop-filter:blur(2px);border-radius:.8rem;padding:1rem;box-shadow:0 2px 16px #0006}.video-row{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:1rem;align-items:start}.video-row video{width:100%;aspect-ratio:16/9;background:#111315;border-radius:.5rem}.video-info h2{font-size:1.6rem;margin:.1rem 0 .5rem}.meta{display:flex;gap:.5rem;flex-wrap:wrap;color:#A0A4AB;margin:.25rem 0}.meta span{background:#26383A;border-radius:999px;padding:.25rem .55rem}.description{font-family:system-ui,sans-serif;font-weight:400;font-size:1rem;line-height:1.45;color:#F3F4F6;margin:.9rem 0}.details{color:#A0A4AB;font-size:.9rem}label{display:block;margin:.8rem 0;font-weight:600}.counter{display:block;margin-top:.25rem;color:#A0A4AB;font-size:.8rem;font-weight:400}input,textarea{display:block;width:100%;box-sizing:border-box;margin-top:.3rem;padding:.65rem;border:1px solid #3BA7A0;background:#111315;color:#F3F4F6;border-radius:.45rem}textarea{min-height:6rem}.ok,.err{padding:1rem;border-radius:.5rem;margin-bottom:1rem}.ok{background:#1f3b32;color:#F3F4F6}.err{background:#4a241f;color:#F3F4F6}.pages a{display:inline-block;margin:.2rem;padding:.45rem .7rem;background:#1B1E22;border-radius:.4rem;text-decoration:none}.pages .active{background:#C46A3A;color:#111315}footer{font-family:NotoStamp,system-ui,sans-serif;text-align:center;color:#A0A4AB;padding:2rem;font-size:.8rem}.admin-list{display:flex;flex-direction:column;gap:.7rem}.admin-item,.file-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:rgba(27,30,34,.92);padding:.8rem;border-radius:.6rem}.admin-item span,.file-row span{color:#A0A4AB}.file-list{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.file-row{margin:0}.file-row button{padding:.45rem .7rem}.caption-row{display:grid;grid-template-columns:140px 1fr auto;gap:1rem;align-items:start;background:rgba(27,30,34,.92);padding:.8rem;border-radius:.6rem}.preview img,.preview video{width:140px;aspect-ratio:16/9;object-fit:cover;border-radius:.4rem;background:#111315}.preview span{display:grid;place-items:center;width:140px;aspect-ratio:16/9;background:#111315;border-radius:.4rem;color:#A0A4AB}.caption-fields textarea{min-height:4rem}.caption-fields strong{display:block;margin-bottom:.35rem}@media(max-width:760px){.caption-row{grid-template-columns:1fr}.preview img,.preview video,.preview span{width:100%}}@media(max-width:760px){.video-row{grid-template-columns:1fr}header h1{font-size:2.4rem}}