mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Improve dashboard look
This commit is contained in:
@@ -230,6 +230,121 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard-body {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: radial-gradient(circle at 0% 30%, rgba(59, 130, 246, 0.14), transparent 30%),
|
||||||
|
radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.12), transparent 28%),
|
||||||
|
#0f172a;
|
||||||
|
padding: 36px 18px 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-shell {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 22px;
|
||||||
|
background: rgba(15, 23, 42, 0.8);
|
||||||
|
border: 1px solid #1f2937;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 18px 50px rgba(0,0,0,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header h1 {
|
||||||
|
margin: 6px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(124, 58, 237, 0.15);
|
||||||
|
color: #c4b5fd;
|
||||||
|
border: 1px solid rgba(124, 58, 237, 0.25);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip.subtle {
|
||||||
|
background: rgba(148, 163, 184, 0.12);
|
||||||
|
color: #e2e8f0;
|
||||||
|
border-color: rgba(148, 163, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.two-col {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #0b1220;
|
||||||
|
border: 1px solid #1f2937;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 18px;
|
||||||
|
box-shadow: 0 14px 40px rgba(0,0,0,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill {
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(59, 130, 246, 0.15);
|
||||||
|
color: #bfdbfe;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.25);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-form {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-form input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 220px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #1f2937;
|
||||||
|
background: #111827;
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
margin: 40px auto;
|
margin: 40px auto;
|
||||||
@@ -435,3 +550,27 @@ body {
|
|||||||
.landing-footer .muted {
|
.landing-footer .muted {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stacked-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 12px 0 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked-list-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #111827;
|
||||||
|
border: 1px solid #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked-list-item .list-title {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,20 +5,37 @@
|
|||||||
<title>Imgfloat Dashboard</title>
|
<title>Imgfloat Dashboard</title>
|
||||||
<link rel="stylesheet" href="/css/styles.css" />
|
<link rel="stylesheet" href="/css/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="dashboard-body">
|
||||||
<div class="container">
|
<div class="dashboard-shell">
|
||||||
<h1>Welcome, <span th:text="${username}">user</span></h1>
|
<header class="dashboard-header">
|
||||||
<p>Manage your overlay or invite channel admins.</p>
|
<div>
|
||||||
<div class="actions">
|
<p class="eyebrow">Logged in</p>
|
||||||
<a class="button" th:href="@{'/view/' + ${channel} + '/admin'}">Admin console</a>
|
<h1>Welcome back, <span th:text="${username}">user</span></h1>
|
||||||
<a class="button" th:href="@{'/view/' + ${channel} + '/broadcast'}">Broadcast overlay</a>
|
<p class="muted">Control your channel overlay, invite trusted teammates, and get to broadcasting faster.</p>
|
||||||
|
<div class="chip-row">
|
||||||
|
<span class="chip">Primary channel: <strong th:text="${channel}">channel</strong></span>
|
||||||
|
<span class="chip subtle">Secure dashboard</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<a class="button" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
|
||||||
|
<a class="button ghost" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
|
||||||
<form th:action="@{/logout}" method="post">
|
<form th:action="@{/logout}" method="post">
|
||||||
<button class="secondary" type="submit">Logout</button>
|
<button class="secondary" type="submit">Logout</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
</header>
|
||||||
<h3>Canvas size</h3>
|
|
||||||
<p>Set the pixel dimensions for your overlay. Admins will see this aspect ratio when positioning assets.</p>
|
<section class="card-grid two-col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Canvas setup</p>
|
||||||
|
<h3>Overlay dimensions</h3>
|
||||||
|
<p class="muted">Match the canvas size to your streaming output so overlays sit exactly where you expect.</p>
|
||||||
|
</div>
|
||||||
|
<div class="pill">Visible to admins</div>
|
||||||
|
</div>
|
||||||
<div class="control-grid">
|
<div class="control-grid">
|
||||||
<label>
|
<label>
|
||||||
Width
|
Width
|
||||||
@@ -34,26 +51,42 @@
|
|||||||
<span id="canvas-status" class="muted"></span>
|
<span id="canvas-status" class="muted"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Collaboration</p>
|
||||||
<h3>Channel admins</h3>
|
<h3>Channel admins</h3>
|
||||||
<p>Add trusted moderators who can upload overlay assets on your behalf.</p>
|
<p class="muted">Invite moderators or teammates to manage overlay assets without sharing your login.</p>
|
||||||
<div class="actions">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inline-form">
|
||||||
<input id="new-admin" placeholder="Twitch username" />
|
<input id="new-admin" placeholder="Twitch username" />
|
||||||
<button type="button" onclick="addAdmin()">Add admin</button>
|
<button type="button" onclick="addAdmin()">Add admin</button>
|
||||||
</div>
|
</div>
|
||||||
<ul id="admin-list" class="stacked-list"></ul>
|
<ul id="admin-list" class="stacked-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
<div th:if="${adminChannels != null}"
|
</section>
|
||||||
class="panel">
|
|
||||||
|
<section th:if="${adminChannels != null}" class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Your access</p>
|
||||||
<h3>Channels you administer</h3>
|
<h3>Channels you administer</h3>
|
||||||
|
<p class="muted">Hop into a teammate's overlay console with the right permissions.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>
|
<p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>
|
||||||
<ul th:if="${!#lists.isEmpty(adminChannels)}">
|
<ul th:if="${!#lists.isEmpty(adminChannels)}" class="stacked-list">
|
||||||
<li th:each="channelName : ${adminChannels}">
|
<li th:each="channelName : ${adminChannels}" class="stacked-list-item">
|
||||||
<a th:href="@{'/view/' + ${channelName} + '/admin'}"
|
<div>
|
||||||
th:text="${channelName}">channel</a>
|
<p class="list-title" th:text="${channelName}">channel</p>
|
||||||
|
<p class="muted">Admin access</p>
|
||||||
|
</div>
|
||||||
|
<a class="button ghost" th:href="@{'/view/' + ${channelName} + '/admin'}">Open</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<script th:inline="javascript">
|
<script th:inline="javascript">
|
||||||
const broadcaster = /*[[${channel}]]*/ '';
|
const broadcaster = /*[[${channel}]]*/ '';
|
||||||
|
|||||||
Reference in New Issue
Block a user