From a85cb89789fd59ab4240c9fbb7b8d2dde8f5d99a Mon Sep 17 00:00:00 2001 From: ilotterytea Date: Sat, 10 May 2025 02:51:16 +0500 Subject: upd: user page design --- public/static/img/icons/emotes/emote.png | Bin 0 -> 4877 bytes public/static/img/icons/emotes/emote_folder.png | Bin 0 -> 4885 bytes public/static/img/icons/emotes/emote_go.png | Bin 0 -> 4980 bytes public/static/img/icons/tag_blue.png | Bin 0 -> 586 bytes public/static/style.css | 83 +++++++- public/users.php | 255 ++++++++++++------------ 6 files changed, 210 insertions(+), 128 deletions(-) create mode 100644 public/static/img/icons/emotes/emote.png create mode 100644 public/static/img/icons/emotes/emote_folder.png create mode 100644 public/static/img/icons/emotes/emote_go.png create mode 100644 public/static/img/icons/tag_blue.png (limited to 'public') diff --git a/public/static/img/icons/emotes/emote.png b/public/static/img/icons/emotes/emote.png new file mode 100644 index 0000000..3cf0a16 Binary files /dev/null and b/public/static/img/icons/emotes/emote.png differ diff --git a/public/static/img/icons/emotes/emote_folder.png b/public/static/img/icons/emotes/emote_folder.png new file mode 100644 index 0000000..2f8951f Binary files /dev/null and b/public/static/img/icons/emotes/emote_folder.png differ diff --git a/public/static/img/icons/emotes/emote_go.png b/public/static/img/icons/emotes/emote_go.png new file mode 100644 index 0000000..36ae3f6 Binary files /dev/null and b/public/static/img/icons/emotes/emote_go.png differ diff --git a/public/static/img/icons/tag_blue.png b/public/static/img/icons/tag_blue.png new file mode 100644 index 0000000..9757fc6 Binary files /dev/null and b/public/static/img/icons/tag_blue.png differ diff --git a/public/static/style.css b/public/static/style.css index 3ce86af..d4af35c 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -9,6 +9,10 @@ --foreground-color: #425514; --foreground-color-hover: #1c220c; + + --body-background: #f2f8ee; + + --profile-background: radial-gradient(#f2f8eebb, #f2f8ee); } * { @@ -18,6 +22,10 @@ font-family: Arial, Helvetica, sans-serif; } +body { + background: var(--body-background); +} + h1 { font-size: 26px; } @@ -122,6 +130,14 @@ textarea { height: 128px; } +.content.row>.content { + margin: 0; +} + +.sidebar { + max-width: 300px; +} + /** ------------ COUNTER @@ -284,7 +300,7 @@ button.purple:hover, background: var(--background-color); border: 2px solid var(--border-color); border-radius: 4px; - padding: 4px; + padding: 8px; } .box.navtab { @@ -467,6 +483,12 @@ a.box:hover { vertical-align: middle; } +/** +--------------------------------- + SOMETHING FROM TAILWINDCSS +--------------------------------- +*/ + .row { display: flex; flex-direction: row; @@ -477,7 +499,7 @@ a.box:hover { flex-direction: column; } -.flex { +.grow { flex-grow: 1; } @@ -494,6 +516,63 @@ a.box:hover { align-items: center; } +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + .font-small { font-size: 12px; +} + +.p-16 { + padding: 16px; +} + +.m-8 { + margin: 8px; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + +.w-full { + width: 100%; +} + +/** +------------- + USER +------------- +*/ + +.background { + position: absolute; + background-position: center center; + top: 61px; + bottom: 0; + left: 0; + right: 0; + z-index: -1; +} + +.background-layer { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: var(--profile-background); } \ No newline at end of file diff --git a/public/users.php b/public/users.php index 7146cd1..430fda5 100644 --- a/public/users.php +++ b/public/users.php @@ -252,39 +252,10 @@ $stmt->execute([$user->id()]); $contributions += intval($stmt->fetch()[0]); // getting status -$status = "... i don't know who am i"; - $stmt = $db->prepare("SELECT * FROM roles r INNER JOIN role_assigns ra ON ra.user_id = ? WHERE ra.role_id = r.id"); $stmt->execute([$user->id()]); -if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { - $status = ''; - $status .= $row["name"]; - $status .= ''; -} +$role = $stmt->fetch(PDO::FETCH_ASSOC) ?? null; // getting reactions $stmt = $db->prepare("SELECT rate, COUNT(*) AS c FROM ratings WHERE user_id = ? GROUP BY rate ORDER BY c DESC"); @@ -295,6 +266,12 @@ $fav_reactions = $stmt->fetchAll(PDO::FETCH_ASSOC); // getting favorite emote $fav_emote = 1; +// User preferences +$stmt = $db->prepare("SELECT * FROM user_preferences WHERE id = ?"); +$stmt->execute([$user->id()]); + +$user_preferences = $stmt->fetch(PDO::FETCH_ASSOC) ?? null; + if ($is_json) { header("Content-type: application/json"); echo json_encode([ @@ -306,7 +283,7 @@ if ($is_json) { "joined_at" => $user->joined_at(), "last_active_at" => $user->last_active_at(), "stats" => [ - "status_id" => $status, + "role" => $role, "contributions" => $contributions, "favorite_reaction_id" => $fav_reaction, "favorite_emote_id" => $fav_emote @@ -330,45 +307,60 @@ if ($is_json) { +
+
+
+
- -
+
+
-

User

+ username() ?> +
+
+ id())) { + echo 'userdata/avatars/' . $user->id(); + } else { + echo 'img/defaults/profile_picture.png'; + } + echo '" width="192" height="192">'; + ?>
- id())) { - echo ' style="background-image: url(\'/static/userdata/banners/' . $user->id() . '\');">'; - } else { - echo '>'; - } - - echo 'id())) { - echo 'userdata/avatars/' . $user->id(); - } else { - echo 'img/defaults/profile_picture.png'; - } - echo '" width="96" height="96">'; - echo '

' . $user->username() . '

'; - - echo '
'; - ?> - - + + sprintf("background: rgba(%s);", $bg_color_split[1]), + "gradient" => sprintf("background: linear-gradient(0deg, rgba(%s), rgba(%s));", $bg_color_split[1], $bg_color_split[2]), + "img" => sprintf("background-image: url('%s')", $bg_color_split[1]), + default => "" + }; + + if (is_file($_SERVER["DOCUMENT_ROOT"] . $badge_path)): ?> +
+
+ <?php echo $role[" width="54" + height="54"> +
+
+

+ Role +
+
+ +
- - - -
I am
Joined
- - -
- Send a message - id() . '">Report user'; - } - ?> + +
+ + + + + +
- - -
- -
+
+ +
-

Emotes

+ +
+
+ '; + echo '' . $emote_row['; + echo '

' . $emote_row["code"] . '

'; + echo '

' . ($emote_row["uploaded_by"] == null ? (ANONYMOUS_DEFAULT_NAME . "*") : $emote_row["uploaded_by"]["username"]) . '

'; + echo ''; + echo ''; + } + } else { + echo '

No emotes found... ' . ((($_SESSION["user_id"] ?? "") == $id) ? 'Start adding emotes and they will appear here! :)

' : '

'); + } + } else { + echo "

This user doesn't have active emote set.

"; + } + ?> +
+
+ +
+
+ Emote sets
- - - -
-
- '; - echo '' . $emote_row['; - echo '

' . $emote_row["code"] . '

'; - echo '

' . ($emote_row["uploaded_by"] == null ? (ANONYMOUS_DEFAULT_NAME . "*") : $emote_row["uploaded_by"]["username"]) . '

'; - echo ''; - echo ''; - } - } else { - echo '

No emotes found... ' . ((($_SESSION["user_id"] ?? "") == $id) ? 'Start adding emotes and they will appear here! :)

' : '

'); - } - ?> -
-
- - - -
-
-

Uploaded emotes

-
-
- '; - echo '' . $emote_row['; - echo '

' . $emote_row["code"] . '

'; - echo ''; - } - ?> -
-
- - + -
+
-

Actions

+ Actions
+ +
+
+ Uploaded emotes +
+
+ '; + echo '' . $emote_row['; + echo '

' . $emote_row["code"] . '

'; + echo ''; + } + ?> +
+
+ + \ No newline at end of file -- cgit v1.2.3