119 lines
7.8 KiB
HTML
119 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
|
<title>RadioSync Hub</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--ink: #e9eef1;
|
|
--muted: #9ca9b2;
|
|
--canvas: #151a1e;
|
|
--surface: #20272c;
|
|
--surface-strong: #293238;
|
|
--line: #3b474e;
|
|
--cyan: #29d3e8;
|
|
--yellow: #ffd166;
|
|
--red: #ff6b6b;
|
|
--green: #5ee0a0;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body { background: var(--canvas); color: var(--ink); font-family: "DM Sans", sans-serif; letter-spacing: 0; }
|
|
h1, h2, h3, h4, h5, .navbar-brand { font-family: "Space Grotesk", sans-serif; letter-spacing: 0; }
|
|
.navbar { background: rgba(21, 26, 30, .96) !important; border-color: var(--line) !important; }
|
|
.navbar-brand { color: var(--cyan) !important; font-weight: 700; }
|
|
.navbar-brand-mark { color: var(--yellow); margin-right: .5rem; }
|
|
.nav-link { color: var(--muted) !important; font-weight: 600; }
|
|
.nav-link:hover, .nav-link.active { color: var(--cyan) !important; }
|
|
.btn { border-radius: 7px; font-weight: 600; }
|
|
.btn-primary { background: var(--cyan); border-color: var(--cyan); color: #102126; }
|
|
.btn-primary:hover { background: #7ae7f2; border-color: #7ae7f2; color: #102126; }
|
|
.btn-outline-info { color: var(--cyan); border-color: var(--cyan); }
|
|
.btn-outline-warning { color: var(--yellow); border-color: var(--yellow); }
|
|
.btn-light { background: var(--ink); border-color: var(--ink); color: #182025; }
|
|
.btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
|
|
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
|
|
.section-label { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
|
.eyebrow { color: var(--cyan); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
|
|
.page-title { font-size: clamp(1.65rem, 3vw, 2.35rem); margin: 0; }
|
|
.log-box { height: 250px; overflow-y: auto; background: #111519; color: #b9c7ce; font-family: monospace; padding: 14px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; }
|
|
.podcast-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
|
|
.form-control, .form-select { background: #181e22; border-color: var(--line); color: var(--ink); border-radius: 7px; }
|
|
.form-control:focus, .form-select:focus { background: #181e22; border-color: var(--cyan); color: var(--ink); box-shadow: 0 0 0 .2rem rgba(41, 211, 232, .14); }
|
|
.form-label { color: var(--muted); font-size: .82rem; font-weight: 600; }
|
|
.text-muted { color: var(--muted) !important; }
|
|
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
|
|
.table thead th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
|
|
.badge { font-weight: 700; }
|
|
.station-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; height: 100%; }
|
|
.station-card .card-header { background: var(--surface-strong); border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; }
|
|
.station-card .card-body { padding: 1rem 1.1rem; }
|
|
.station-card .card-footer { border-top: 1px solid var(--line) !important; }
|
|
.metric-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
|
|
.metric-value { font-size: 1.1rem; font-weight: 700; }
|
|
.config-surface { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
|
|
.config-surface .card-header { background: var(--surface-strong); border-color: var(--line); }
|
|
.error-item { background: var(--surface) !important; border-width: 1px !important; }
|
|
.error-item strong { font-family: "Space Grotesk", sans-serif; }
|
|
.program-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
|
|
.program-card .card-body { padding: 1rem; }
|
|
.program-title { font-size: 1.05rem; line-height: 1.2; }
|
|
.program-card .card-footer { border-color: var(--line) !important; background: #1a2024 !important; }
|
|
.episode-item { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; }
|
|
.episode-title { font-size: 1.05rem; }
|
|
.page-toolbar { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.25rem; }
|
|
.empty-state { color: var(--muted); padding: 2rem 0; }
|
|
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
|
|
.config-grid > div { min-width: 0; }
|
|
.config-grid .form-label { display: block; line-height: 1.35; margin-bottom: .35rem !important; }
|
|
@media (max-width: 767.98px) {
|
|
.container { padding-left: 18px; padding-right: 18px; }
|
|
.navbar .container { padding-left: 18px; padding-right: 18px; }
|
|
.page-title { font-size: 1.7rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/"><span class="navbar-brand-mark">●</span>RadioSync Hub</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item"><a class="nav-link" href="/programs/radio357">357</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="/programs/rns">Nowy Świat</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="/programs/jazz">Jazz FM</a></li>
|
|
</ul>
|
|
<div class="d-flex gap-2">
|
|
<button onclick="copyToClipboard('/live/radio357', this)" class="btn btn-outline-info btn-sm" title="Kopiuj bezpośredni stream premium Radia 357">Stream 357</button>
|
|
<button onclick="copyToClipboard('/live/rns', this)" class="btn btn-outline-info btn-sm" title="Kopiuj bezpośredni stream premium RNŚ">Stream RNŚ</button>
|
|
<button onclick="copyToClipboard('/feeds/Podcasts.opml', this)" class="btn btn-outline-warning btn-sm">Master OPML</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container mt-4 mb-5">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function copyToClipboard(path, btn) {
|
|
const fullUrl = window.location.origin + path;
|
|
navigator.clipboard.writeText(fullUrl).then(() => {
|
|
const originalText = btn.innerText;
|
|
btn.innerText = 'Skopiowano!';
|
|
setTimeout(() => { btn.innerText = originalText; }, 2000);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|