Update.

Browse Source
This commit is contained in:
retoor 2025-05-15 23:16:28 +02:00
parent 25d109beed
commit dd80f3732b
5 changed files with 183 additions and 121 deletions

90
src/snek/static/base.css
View File

@ -412,8 +412,8 @@ a {
display: block;
width: 100%;
}
}
}
/*
body {
justify-content: flex-start;
@ -429,3 +429,89 @@ a {
position:sticky;
}*/
}
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
border-radius: 12px;
padding: 24px;
background-color: #000; /* Deep black */
color: #f1f1f1;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
width: 90%;
max-width: 400px;
animation: dialogFadeIn 0.3s ease-out, dialogScaleIn 0.3s ease-out;
z-index: 1000;
}
/* Backdrop styling */
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
/* Title and content */
dialog .dialog-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 16px;
color: #fff;
}
dialog .dialog-content {
font-size: 1rem;
color: #ccc;
margin-bottom: 20px;
}
/* Button layout */
dialog .dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
dialog .dialog-button {
padding: 8px 16px;
font-size: 0.95rem;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
@keyframes dialogFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes dialogScaleIn {
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}
dialog .dialog-button.primary {
background-color: #f05a28;
color: white;
}
dialog .dialog-button.primary:hover {
background-color: #f05a28;
}
dialog .dialog-button.secondary {
background-color: #f0a328;
color: #eee;
}
dialog .dialog-button.secondary:hover {
background-color: #f0b84c;
}

61
src/snek/templates/dialog_help.html Normal file
View File

@ -0,0 +1,61 @@
<dialog id="help-dialog">
<div class="dialog-backdrop">
<div class="dialog-box">
<div class="dialog-title"><h2>Help</h2></div>
<div class="dialog-content">
<help-command-list></help-command-list>
</div>
<div class="dialog-actions">
<button class="dialog-button primary">Close</button>
</div>
</div>
</div>
</dialog>
<script>
class HelpCommandListComponent extends HTMLElement {
helpCommands = [
{
command: "/help",
description: "Show this help message"
},
{
command: "/online",
description: "Show online users"
},
{
command: "/clear",
description: "Clear the board"
},
{
command: "/img-gen",
description: "Generate an image"
}
];
constructor() {
super();
}
connectedCallback() {
this.innerHTML = this.helpCommands
.map(cmd => `<div><h2>${cmd.command}</h2><div>${cmd.description}</div></div>`)
.join('');
}
}
customElements.define('help-command-list', HelpCommandListComponent);
const helpDialog = document.getElementById("help-dialog");
const helpCloseButton = helpDialog.querySelector('.dialog-button.primary');
function showHelp() {
helpDialog.showModal();
helpCloseButton.focus();
}
helpCloseButton.addEventListener('click', () => {
helpDialog.close();
});
</script>

28
src/snek/templates/dialog_online.html Normal file
View File

@ -0,0 +1,28 @@
<dialog id="online-users">
<div class="dialog-backdrop">
<div class="dialog-box">
<div class="dialog-title"><h2>Online Users</h2></div>
<div class="dialog-content"><user-list></user-list></div>
<div class="dialog-actions">
<button class="dialog-button primary">Close</button>
</div>
</div>
</div>
</dialog>
<script>
const onlineUsersDialog = document.getElementById("online-users");
const closeButton = onlineUsersDialog.querySelector('.dialog-button.primary');
closeButton.addEventListener('click', () => {
onlineUsersDialog.close();
});
async function showOnline() {
const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
onlineUsersDialog.querySelector('user-list').data = users;
onlineUsersDialog.showModal();
closeButton.focus();
}
</script>

117
src/snek/templates/online.html
View File

@ -1,117 +0,0 @@
<style>
/* Ensure the dialog appears centered when open as modal */
#online-users {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
border-radius: 12px;
padding: 24px;
background-color: #111; /* Deep black */
color: #f1f1f1;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
width: 90%;
max-width: 400px;
animation: fadeIn 0.3s ease-out, scaleIn 0.3s ease-out;
z-index: 1000;
}
/* Backdrop styling */
#online-users::backdrop {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
/* Title and content */
#online-users .dialog-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 16px;
color: #fff;
}
#online-users .dialog-content {
font-size: 1rem;
color: #ccc;
margin-bottom: 20px;
}
/* Button layout */
#online-users .dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Buttons */
#online-users .dialog-button {
padding: 8px 16px;
font-size: 0.95rem;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
#online-users .dialog-button.primary {
background-color: #4f46e5;
color: white;
}
#online-users .dialog-button.primary:hover {
background-color: #4338ca;
}
#online-users .dialog-button.secondary {
background-color: #333;
color: #eee;
}
#online-users .dialog-button.secondary:hover {
background-color: #444;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}
</style>
<dialog id="online-users">
<div class="dialog-backdrop">
<div class="dialog-box">
<div class="dialog-title"><h2>Currently online</h2></div>
<div class="dialog-content"><user-list></user-list></div>
<div class="dialog-actions">
<button class="dialog-button primary">Close</button>
</div>
</div>
</div>
</dialog>
<script>
const onlineDialog = document.getElementById("online-users");
const dialogButton = onlineDialog.querySelector('.dialog-button.primary');
dialogButton.addEventListener('click', () => {
onlineDialog.close();
});
async function showOnlineUsers() {
const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
onlineDialog.querySelector('user-list').data = users;
onlineDialog.showModal();
}
</script>

8
src/snek/templates/web.html
View File

@ -21,7 +21,8 @@
<upload-button channel="{{ channel.uid.value }}"></upload-button>
</div>
</section>
{% include "online.html" %}
{% include "dialog_help.html" %}
{% include "dialog_online.html" %}
<script type="module">
import { app } from "/app.js";
import { Schedule } from "/schedule.js";
@ -32,13 +33,16 @@
}
getInputField().autoComplete = {
"/online": () =>{
showOnlineUsers();
showOnline();
},
"/clear": () => {
document.querySelector(".chat-messages").innerHTML = '';
},
"/live": () =>{
getInputField().liveType = !getInputField().liveType
},
"/help": () => {
showHelp();
}
}