mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
123 lines
5.7 KiB
HTML
123 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Imgfloat Dashboard</title>
|
|
<meta name="_csrf" th:content="${_csrf.token}" />
|
|
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
|
</head>
|
|
<body class="dashboard-body">
|
|
<div class="dashboard-shell">
|
|
<header class="dashboard-topbar">
|
|
<div class="brand">
|
|
<img class="brand-mark" alt="brand" src="/img/brand.png" />
|
|
<div>
|
|
<div class="brand-title">Imgfloat</div>
|
|
<div class="brand-subtitle">Twitch overlay manager</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-pill">
|
|
<span class="eyebrow subtle">Signed in as</span>
|
|
<span class="user-display" th:text="${username}">user</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<p class="eyebrow">Navigation</p>
|
|
<h3>Shortcuts</h3>
|
|
<p class="muted">Jump into your overlay</p>
|
|
<div class="panel-actions">
|
|
<a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
|
|
<a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
|
|
<a class="button ghost block" href="/channels">Browse channels</a>
|
|
<form class="block" th:action="@{/logout}" method="post">
|
|
<button class="secondary block" type="submit">Logout</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<p class="eyebrow">Settings</p>
|
|
<h3>Overlay dimensions</h3>
|
|
<p class="muted">Match these with your OBS resolution.</p>
|
|
<div class="control-grid">
|
|
<label>
|
|
Width
|
|
<input id="canvas-width" type="number" min="100" step="10" />
|
|
</label>
|
|
<label>
|
|
Height
|
|
<input id="canvas-height" type="number" min="100" step="10" />
|
|
</label>
|
|
</div>
|
|
<div class="control-actions">
|
|
<button type="button" onclick="saveCanvasSettings()">Save canvas size</button>
|
|
<span id="canvas-status" class="muted"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card-grid two-col">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<p class="eyebrow">Collaboration</p>
|
|
<h3>Channel admins</h3>
|
|
<p class="muted">Invite moderators to help manage assets.</p>
|
|
</div>
|
|
</div>
|
|
<div class="inline-form">
|
|
<input id="new-admin" placeholder="Twitch username" />
|
|
<button type="button" onclick="addAdmin()">Add admin</button>
|
|
</div>
|
|
<div class="card-section">
|
|
<div class="section-header">
|
|
<h4 class="list-title">Channel Admins</h4>
|
|
<p class="muted">Users who can currently modify your overlay.</p>
|
|
</div>
|
|
<ul id="admin-list" class="stacked-list"></ul>
|
|
</div>
|
|
<div class="card-section">
|
|
<div class="section-header">
|
|
<h4 class="list-title">Your Twitch moderators</h4>
|
|
<p class="muted">Add moderators who already help run your channel.</p>
|
|
</div>
|
|
<ul id="admin-suggestions" class="stacked-list"></ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section th:if="${adminChannels != null}" class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<p class="eyebrow">Your access</p>
|
|
<h3>Channels you administer</h3>
|
|
<p class="muted">Jump into a teammate's overlay console.</p>
|
|
</div>
|
|
</div>
|
|
<p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>
|
|
<ul th:if="${!#lists.isEmpty(adminChannels)}" class="stacked-list">
|
|
<li th:each="channelName : ${adminChannels}" class="stacked-list-item">
|
|
<div>
|
|
<p class="list-title" th:text="${channelName}">channel</p>
|
|
<p class="muted">Channel admin access</p>
|
|
</div>
|
|
<a class="button ghost" th:href="@{'/view/' + ${channelName} + '/admin'}">Open</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="card download-card-block" th:insert="~{fragments/downloads :: downloads}"></section>
|
|
</div>
|
|
<script src="/js/cookie-consent.js"></script>
|
|
<script src="/js/csrf.js"></script>
|
|
<script src="/js/toast.js"></script>
|
|
<script src="/js/downloads.js"></script>
|
|
<script th:inline="javascript">
|
|
const broadcaster = /*[[${channel}]]*/ "";
|
|
</script>
|
|
<script src="/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|