From 84e052a64a5ac8172095b993e2d0855e2ce69897 Mon Sep 17 00:00:00 2001 From: ilotterytea Date: Thu, 15 May 2025 16:32:54 +0500 Subject: feat: new emote upload design --- public/emotes/upload.php | 272 ++++++++++++++++++++++++++++------------------- public/static/style.css | 37 +++++++ 2 files changed, 201 insertions(+), 108 deletions(-) diff --git a/public/emotes/upload.php b/public/emotes/upload.php index 4506152..df64d0f 100644 --- a/public/emotes/upload.php +++ b/public/emotes/upload.php @@ -24,6 +24,8 @@ if (isset($_SESSION["user_role"]) && $_SESSION["user_role"]["permission_upload"] $uploader_name = $_SESSION["user_name"] ?? ANONYMOUS_DEFAULT_NAME; } +$db = new PDO(DB_URL, DB_USER, DB_PASS); + function abort_upload(string $path, PDO $db, string $id) { $stmt = $db->prepare("DELETE FROM emotes WHERE id = ?"); @@ -56,112 +58,164 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") {
+ -
- -
-
-
- Upload a new emote -

You can just upload, btw. Anything you want.

-
-
-
-
-

Image*

- - - - - +
+
+
+
- - + Upload a new emote +

You can just upload, btw. Anything you want.

- -

Emote name*

- - -
- -
-

test

-
- - - - - - - - - - + +
+ +

Image*

+ + + + + +
+ + +
+ +

Emote name*

+ + +
+ +
+

test

+
+ + + + +
Emote source:
- - + + - -
Tags [?]: - Emote source: +
- -
- - + + + Tags [?]: + + + + + + +
+ + +
+ + + +
+
+ + +
+ +
+
@@ -197,7 +251,6 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") { }); const code = document.getElementById("code"); - let validCode = ""; code.addEventListener("input", (e) => { const regex = ; @@ -207,6 +260,8 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") { } else { e.target.value = validCode; } + + document.getElementById("emote-name").innerHTML = e.target.value ? e.target.value : "Empty"; }); const visibility = document.getElementById("form-visibility"); @@ -305,17 +360,20 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") { const max_w = max_width / multiplier; const max_h = max_height / multiplier; - const parentId = `emote-image-${image_index}x`; - const img = document.getElementById(parentId); - img.setAttribute("src", e.target.result); + const parentId = `.emote-image-${image_index}x`; + const imgs = document.querySelectorAll(parentId); + + for (const img of imgs) { + img.setAttribute("src", e.target.result); - let ratio = Math.min(max_w / image.width, max_h / image.height); + let ratio = Math.min(max_w / image.width, max_h / image.height); - img.setAttribute("width", Math.floor(image.width * ratio)); - img.setAttribute("height", Math.floor(image.height * ratio)); + img.setAttribute("width", Math.floor(image.width * ratio)); + img.setAttribute("height", Math.floor(image.height * ratio)); - const sizeElement = document.querySelector(`.emote-image:has(#${parentId}) .size`); - sizeElement.innerHTML = `${img.getAttribute("width")}x${img.getAttribute("height")}`; + const sizeElement = document.querySelector(`.emote-image:has(${parentId}) .size`); + sizeElement.innerHTML = `${img.getAttribute("width")}x${img.getAttribute("height")}`; + } } } @@ -367,8 +425,6 @@ if (MOD_EMOTES_APPROVE && $visibility == 1 && EMOTE_VISIBILITY_DEFAULT != 1) { } // creating a new emote record -$db = new PDO(DB_URL, DB_USER, DB_PASS); - $id = bin2hex(random_bytes(16)); $stmt = $db->prepare("INSERT INTO emotes(id, code, notes, source, uploaded_by, visibility) VALUES (?, ?, ?, ?, ?, ?)"); $stmt->execute([$id, $code, $notes, $source, $uploaded_by, $visibility]); diff --git a/public/static/style.css b/public/static/style.css index 0abe8d0..b1233cc 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -523,6 +523,10 @@ a.box:hover { gap: 32px; } +.no-gap { + gap: 0; +} + .center { justify-content: center; align-items: center; @@ -573,6 +577,10 @@ a.box:hover { font-weight: normal; } +.rounded { + border-radius: 4px; +} + /** ------------- USER @@ -596,4 +604,33 @@ a.box:hover { left: 0; right: 0; background: var(--profile-background); +} + +/** +------------- + CHAT +------------- +*/ + +.chat-message { + background: linear-gradient(0deg, #202020, #303030); + color: #fff; + padding: 8px; +} + +.chat .chat-message:nth-child(even) { + background: linear-gradient(0deg, #353535, #454545); + + border-top: 1px solid #707070; + border-bottom: 1px solid #707070; +} + +.chat.rounded .chat-message:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.chat.rounded .chat-message:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } \ No newline at end of file -- cgit v1.2.3