From 9d18a2aa42602b75114665777272eade5704f0b2 Mon Sep 17 00:00:00 2001
From: nykroy <ivan@nykroy.es>
Date: Thu, 5 Mar 2026 18:10:59 +0100
Subject: [PATCH] Modernize UI: vertical card menus, dual-panel multi-select
 widgets, and CSS improvements

- Replace plain <ul> menus with modern vertical card menus using emoji icons in admin (tce_menu_users.php, tce_menu_modules.php, tce_menu_tests.php) and public (tce_page_user.php)

- Replace <select multiple> with interactive dual-panel multi-select widgets with search, click-to-toggle items, and add/remove all buttons in tce_edit_test.php (groups + SSL certs) and tce_edit_user.php (groups)

- Fix a.white links: increase padding from 5px to 12px with hover effect for better usability

- Improve div.minibutton: use flexbox for proper centering and hover transitions

- Add .vmenu and .ms-widget CSS styles to both admin and public stylesheets
---
 admin/code/tce_edit_test.php    | 135 ++++++++++++++++++++++++++------
 admin/code/tce_edit_user.php    | 106 +++++++++++++++++++++----
 admin/code/tce_menu_modules.php |  31 ++++++--
 admin/code/tce_menu_tests.php   |  30 +++++--
 admin/code/tce_menu_users.php   |  28 +++++--
 admin/styles/default.css        | 129 +++++++++++++++++++++++++++++-
 public/code/tce_page_user.php   |  25 ++++--
 public/styles/default.css       | 108 ++++++++++++++++++++++++-
 8 files changed, 530 insertions(+), 62 deletions(-)

diff --git a/admin/code/tce_edit_test.php b/admin/code/tce_edit_test.php
index 5d1b86aeb..4a303397f 100644
--- a/admin/code/tce_edit_test.php
+++ b/admin/code/tce_edit_test.php
@@ -970,55 +970,144 @@
 
 echo '<div class="row">' . K_NEWLINE;
 echo '<span class="label">' . K_NEWLINE;
-echo '<label for="user_groups">' . $l['w_groups'] . '</label>' . K_NEWLINE;
+echo '<label>' . $l['w_groups'] . '</label>' . K_NEWLINE;
 echo '</span>' . K_NEWLINE;
 echo '<span class="formw">' . K_NEWLINE;
-echo '<select name="user_groups[]" id="user_groups" size="5" multiple="multiple">' . K_NEWLINE;
-//$sql = F_user_group_select_sql();
+
+echo '<div id="groups_container">' . K_NEWLINE;
+echo '<input type="text" class="ms-search" id="groups_search" placeholder="&#128269; ' . htmlspecialchars($l['w_search'] ?? 'Search', ENT_COMPAT, $l['a_meta_charset']) . '..." />' . K_NEWLINE;
+echo '<div class="ms-widget">' . K_NEWLINE;
+echo '<div class="ms-panel" id="groups_available"><div class="ms-panel-title">' . htmlspecialchars($l['w_available'] ?? 'Available', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="groups_available_list"></div></div>' . K_NEWLINE;
+echo '<div class="ms-arrows"><button type="button" onclick="msAddAll(\'groups\')" title="Add all">&raquo;</button><button type="button" onclick="msRemoveAll(\'groups\')" title="Remove all">&laquo;</button></div>' . K_NEWLINE;
+echo '<div class="ms-panel ms-selected" id="groups_selected"><div class="ms-panel-title">' . htmlspecialchars($l['w_selected'] ?? 'Selected', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="groups_selected_list"></div></div>' . K_NEWLINE;
+echo '</div></div>' . K_NEWLINE;
+
+echo '<div id="groups_hidden_inputs">' . K_NEWLINE;
 $sql = 'SELECT * FROM ' . K_TABLE_GROUPS . ' ORDER BY group_name';
+$all_groups_json = [];
 if ($r = F_db_query($sql, $db)) {
     while ($m = F_db_fetch_array($r)) {
-        echo '<option value="' . $m['group_id'] . '"';
-        if (isset($test_id) && $test_id > 0 && F_isTestOnGroup($test_id, $m['group_id'])) {
-            echo ' selected="selected"';
+        $gid = (int) $m['group_id'];
+        $is_sel = (isset($test_id) && $test_id > 0 && F_isTestOnGroup($test_id, $gid));
+        $all_groups_json[] = '{"id":' . $gid . ',"name":"' . addslashes($m['group_name']) . '","sel":' . ($is_sel ? 'true' : 'false') . '}';
+        if ($is_sel) {
+            echo '<input type="hidden" name="user_groups[]" value="' . $gid . '" />' . K_NEWLINE;
         }
-
-        echo '>' . htmlspecialchars($m['group_name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</option>' . K_NEWLINE;
     }
 } else {
-    echo '</select></span></div>' . K_NEWLINE;
     F_display_db_error();
 }
-
-echo '</select>' . K_NEWLINE;
-echo '</span>' . K_NEWLINE;
 echo '</div>' . K_NEWLINE;
 
+echo '</span></div>' . K_NEWLINE;
+
 echo '<div class="row">' . K_NEWLINE;
 echo '<span class="label">' . K_NEWLINE;
-echo '<label for="sslcerts">' . $l['w_sslcerts'] . '</label>' . K_NEWLINE;
+echo '<label>' . $l['w_sslcerts'] . '</label>' . K_NEWLINE;
 echo '</span>' . K_NEWLINE;
 echo '<span class="formw">' . K_NEWLINE;
-echo '<select name="sslcerts[]" id="sslcerts" size="5" multiple="multiple">' . K_NEWLINE;
+
+echo '<div id="ssl_container">' . K_NEWLINE;
+echo '<input type="text" class="ms-search" id="ssl_search" placeholder="&#128269; ' . htmlspecialchars($l['w_search'] ?? 'Search', ENT_COMPAT, $l['a_meta_charset']) . '..." />' . K_NEWLINE;
+echo '<div class="ms-widget">' . K_NEWLINE;
+echo '<div class="ms-panel" id="ssl_available"><div class="ms-panel-title">' . htmlspecialchars($l['w_available'] ?? 'Available', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ssl_available_list"></div></div>' . K_NEWLINE;
+echo '<div class="ms-arrows"><button type="button" onclick="msAddAll(\'ssl\')" title="Add all">&raquo;</button><button type="button" onclick="msRemoveAll(\'ssl\')" title="Remove all">&laquo;</button></div>' . K_NEWLINE;
+echo '<div class="ms-panel ms-selected" id="ssl_selected"><div class="ms-panel-title">' . htmlspecialchars($l['w_selected'] ?? 'Selected', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ssl_selected_list"></div></div>' . K_NEWLINE;
+echo '</div></div>' . K_NEWLINE;
+
+echo '<div id="ssl_hidden_inputs">' . K_NEWLINE;
 $sql = 'SELECT * FROM ' . K_TABLE_SSLCERTS . ' ORDER BY ssl_name';
+$all_ssl_json = [];
 if ($r = F_db_query($sql, $db)) {
     while ($m = F_db_fetch_array($r)) {
-        echo '<option value="' . $m['ssl_id'] . '"';
-        if (isset($test_id) && $test_id > 0 && F_isTestOnSSLCerts($test_id, $m['ssl_id'])) {
-            echo ' selected="selected"';
+        $sid = (int) $m['ssl_id'];
+        $sname = $m['ssl_name'] . ' (' . substr($m['ssl_end_date'], 0, 10) . ')';
+        $is_sel = (isset($test_id) && $test_id > 0 && F_isTestOnSSLCerts($test_id, $sid));
+        $all_ssl_json[] = '{"id":' . $sid . ',"name":"' . addslashes($sname) . '","sel":' . ($is_sel ? 'true' : 'false') . '}';
+        if ($is_sel) {
+            echo '<input type="hidden" name="sslcerts[]" value="' . $sid . '" />' . K_NEWLINE;
         }
-
-        echo '>' . htmlspecialchars($m['ssl_name'] . ' (' . substr($m['ssl_end_date'], 0, 10) . ')', ENT_NOQUOTES, $l['a_meta_charset']) . '</option>' . K_NEWLINE;
     }
 } else {
-    echo '</select></span></div>' . K_NEWLINE;
     F_display_db_error();
 }
-
-echo '</select>' . K_NEWLINE;
-echo '</span>' . K_NEWLINE;
 echo '</div>' . K_NEWLINE;
 
+echo '</span></div>' . K_NEWLINE;
+
+echo '<script type="text/javascript">
+//<![CDATA[
+var msData = {};
+msData["groups"] = {items: [' . implode(',', $all_groups_json) . '], hiddenName: "user_groups[]"};
+msData["ssl"] = {items: [' . implode(',', $all_ssl_json) . '], hiddenName: "sslcerts[]"};
+
+function msRender(key) {
+    var d = msData[key];
+    var searchVal = document.getElementById(key + "_search").value.toLowerCase();
+    var avail = document.getElementById(key + "_available_list");
+    var sel = document.getElementById(key + "_selected_list");
+    var hidden = document.getElementById(key + "_hidden_inputs");
+    avail.innerHTML = "";
+    sel.innerHTML = "";
+    hidden.innerHTML = "";
+    var hasAvail = false, hasSel = false;
+    for (var i = 0; i < d.items.length; i++) {
+        var item = d.items[i];
+        var el = document.createElement("span");
+        el.className = "ms-item " + (item.sel ? "ms-item-selected" : "ms-item-available");
+        el.textContent = item.name;
+        el.setAttribute("data-idx", i);
+        el.setAttribute("data-key", key);
+        el.onclick = function() {
+            var k = this.getAttribute("data-key");
+            var idx = parseInt(this.getAttribute("data-idx"));
+            msData[k].items[idx].sel = !msData[k].items[idx].sel;
+            msRender(k);
+        };
+        if (item.sel) {
+            sel.appendChild(el);
+            hasSel = true;
+            var inp = document.createElement("input");
+            inp.type = "hidden";
+            inp.name = d.hiddenName;
+            inp.value = item.id;
+            hidden.appendChild(inp);
+        } else {
+            if (searchVal === "" || item.name.toLowerCase().indexOf(searchVal) !== -1) {
+                avail.appendChild(el);
+                hasAvail = true;
+            }
+        }
+    }
+    if (!hasAvail) { avail.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
+    if (!hasSel) { sel.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
+}
+
+function msAddAll(key) {
+    var d = msData[key];
+    var s = document.getElementById(key + "_search").value.toLowerCase();
+    for (var i = 0; i < d.items.length; i++) {
+        if (!d.items[i].sel && (s === "" || d.items[i].name.toLowerCase().indexOf(s) !== -1)) {
+            d.items[i].sel = true;
+        }
+    }
+    msRender(key);
+}
+
+function msRemoveAll(key) {
+    for (var i = 0; i < msData[key].items.length; i++) {
+        msData[key].items[i].sel = false;
+    }
+    msRender(key);
+}
+
+document.getElementById("groups_search").onkeyup = function() { msRender("groups"); };
+document.getElementById("ssl_search").onkeyup = function() { msRender("ssl"); };
+msRender("groups");
+msRender("ssl");
+//]]>
+</script>' . K_NEWLINE;
+
 echo getFormRowTextInput('test_score_right', $l['w_score_right'], $l['h_score_right'], '', $test_score_right, '^([0-9\+\-]*)([\.]?)([0-9]*)$', 20, false, false, false);
 echo getFormRowTextInput('test_score_wrong', $l['w_score_wrong'], $l['h_score_wrong'], '', $test_score_wrong, '^([0-9\+\-]*)([\.]?)([0-9]*)$', 20, false, false, false);
 echo getFormRowTextInput('test_score_unanswered', $l['w_score_unanswered'], $l['h_score_unanswered'], '', $test_score_unanswered, '^([0-9\+\-]*)([\.]?)([0-9]*)$', 20, false, false, false);
diff --git a/admin/code/tce_edit_user.php b/admin/code/tce_edit_user.php
index 716b30156..724b5bc9d 100644
--- a/admin/code/tce_edit_user.php
+++ b/admin/code/tce_edit_user.php
@@ -486,33 +486,109 @@
 
 echo '<div class="row">' . K_NEWLINE;
 echo '<span class="label">' . K_NEWLINE;
-echo '<label for="user_groups">' . $l['w_groups'] . '</label>' . K_NEWLINE;
+echo '<label>' . $l['w_groups'] . '</label>' . K_NEWLINE;
 echo '</span>' . K_NEWLINE;
 echo '<span class="formw">' . K_NEWLINE;
-echo '<select name="user_groups[]" id="user_groups" size="5" multiple="multiple">' . K_NEWLINE;
+
+echo '<div id="ugroups_container">' . K_NEWLINE;
+echo '<input type="text" class="ms-search" id="ugroups_search" placeholder="&#128269; ' . htmlspecialchars($l['w_search'] ?? 'Search', ENT_COMPAT, $l['a_meta_charset']) . '..." />' . K_NEWLINE;
+echo '<div class="ms-widget">' . K_NEWLINE;
+echo '<div class="ms-panel" id="ugroups_available"><div class="ms-panel-title">' . htmlspecialchars($l['w_available'] ?? 'Available', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ugroups_available_list"></div></div>' . K_NEWLINE;
+echo '<div class="ms-arrows"><button type="button" onclick="msAddAll(\'ugroups\')" title="Add all">&raquo;</button><button type="button" onclick="msRemoveAll(\'ugroups\')" title="Remove all">&laquo;</button></div>' . K_NEWLINE;
+echo '<div class="ms-panel ms-selected" id="ugroups_selected"><div class="ms-panel-title">' . htmlspecialchars($l['w_selected'] ?? 'Selected', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ugroups_selected_list"></div></div>' . K_NEWLINE;
+echo '</div></div>' . K_NEWLINE;
+
+echo '<div id="ugroups_hidden_inputs">' . K_NEWLINE;
 $sql = 'SELECT * FROM ' . K_TABLE_GROUPS . ' ORDER BY group_name';
+$ugroups_json = [];
 if ($r = F_db_query($sql, $db)) {
     while ($m = F_db_fetch_array($r)) {
-        echo '<option value="' . $m['group_id'] . '"';
-        if (! F_isAuthorizedEditorForGroup($m['group_id'])) {
-            echo ' style="text-decoration:line-through;"';
+        $gid = (int) $m['group_id'];
+        $is_auth = F_isAuthorizedEditorForGroup($gid);
+        $is_sel = F_isUserOnGroup($user_id, $gid);
+        $gname = ($is_sel ? '* ' : '') . $m['group_name'] . ($is_auth ? '' : ' ✗');
+        $ugroups_json[] = '{"id":' . $gid . ',"name":"' . addslashes($gname) . '","sel":' . ($is_sel ? 'true' : 'false') . ',"auth":' . ($is_auth ? 'true' : 'false') . '}';
+        if ($is_sel) {
+            echo '<input type="hidden" name="user_groups[]" value="' . $gid . '" />' . K_NEWLINE;
         }
+    }
+} else {
+    F_display_db_error();
+}
+echo '</div>' . K_NEWLINE;
 
-        if (F_isUserOnGroup($user_id, $m['group_id'])) {
-            echo ' selected="selected"';
-            $m['group_name'] = '* ' . $m['group_name'];
+echo '</span></div>' . K_NEWLINE;
+
+echo '<script type="text/javascript">
+//<![CDATA[
+var msData = {};
+msData["ugroups"] = {items: [' . implode(',', $ugroups_json) . '], hiddenName: "user_groups[]"};
+
+function msRender(key) {
+    var d = msData[key];
+    var searchVal = document.getElementById(key + "_search").value.toLowerCase();
+    var avail = document.getElementById(key + "_available_list");
+    var sel = document.getElementById(key + "_selected_list");
+    var hidden = document.getElementById(key + "_hidden_inputs");
+    avail.innerHTML = "";
+    sel.innerHTML = "";
+    hidden.innerHTML = "";
+    var hasAvail = false, hasSel = false;
+    for (var i = 0; i < d.items.length; i++) {
+        var item = d.items[i];
+        var el = document.createElement("span");
+        el.className = "ms-item " + (item.sel ? "ms-item-selected" : "ms-item-available");
+        if (item.auth === false) { el.style.textDecoration = "line-through"; el.style.opacity = "0.6"; }
+        el.textContent = item.name;
+        el.setAttribute("data-idx", i);
+        el.setAttribute("data-key", key);
+        el.onclick = function() {
+            var k = this.getAttribute("data-key");
+            var idx = parseInt(this.getAttribute("data-idx"));
+            msData[k].items[idx].sel = !msData[k].items[idx].sel;
+            msRender(k);
+        };
+        if (item.sel) {
+            sel.appendChild(el);
+            hasSel = true;
+            var inp = document.createElement("input");
+            inp.type = "hidden";
+            inp.name = d.hiddenName;
+            inp.value = item.id;
+            hidden.appendChild(inp);
+        } else {
+            if (searchVal === "" || item.name.toLowerCase().indexOf(searchVal) !== -1) {
+                avail.appendChild(el);
+                hasAvail = true;
+            }
+        }
+    }
+    if (!hasAvail) { avail.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
+    if (!hasSel) { sel.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
+}
+
+function msAddAll(key) {
+    var d = msData[key];
+    var s = document.getElementById(key + "_search").value.toLowerCase();
+    for (var i = 0; i < d.items.length; i++) {
+        if (!d.items[i].sel && (s === "" || d.items[i].name.toLowerCase().indexOf(s) !== -1)) {
+            d.items[i].sel = true;
         }
+    }
+    msRender(key);
+}
 
-        echo '>' . htmlspecialchars($m['group_name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</option>' . K_NEWLINE;
+function msRemoveAll(key) {
+    for (var i = 0; i < msData[key].items.length; i++) {
+        msData[key].items[i].sel = false;
     }
-} else {
-    echo '</select></span></div>' . K_NEWLINE;
-    F_display_db_error();
+    msRender(key);
 }
 
-echo '</select>' . K_NEWLINE;
-echo '</span>' . K_NEWLINE;
-echo '</div>' . K_NEWLINE;
+document.getElementById("ugroups_search").onkeyup = function() { msRender("ugroups"); };
+msRender("ugroups");
+//]]>
+</script>' . K_NEWLINE;
 
 echo getFormRowTextInput('user_otpkey', $l['w_otpkey'], $l['h_otpkey'], '', $user_otpkey, '', 255, false, false, false);
 
diff --git a/admin/code/tce_menu_modules.php b/admin/code/tce_menu_modules.php
index 81af79d56..3c7ddafa2 100644
--- a/admin/code/tce_menu_modules.php
+++ b/admin/code/tce_menu_modules.php
@@ -40,13 +40,34 @@
 
 echo '<div class="container">' . K_NEWLINE;
 
-// print submenu
-echo '<ul>' . K_NEWLINE;
+// Modern vertical menu with icons
+$module_icons = [
+    'tce_edit_module.php' => '&#128218;',
+    'tce_edit_subject.php' => '&#128209;',
+    'tce_edit_question.php' => '&#10067;',
+    'tce_edit_answer.php' => '&#9989;',
+    'tce_show_all_questions.php' => '&#128203;',
+    'tce_import_questions.php' => '&#128228;',
+    'tce_filemanager.php' => '&#128193;',
+    'tce_edit_sslcerts.php' => '&#128274;',
+];
+
+echo '<div class="vmenu">' . K_NEWLINE;
 foreach ($menu['tce_menu_modules.php']['sub'] as $link => $data) {
-    echo F_menu_link($link, $data, 1);
+    if (! $data['enabled'] || $_SESSION['session_user_level'] < $data['level']) {
+        continue;
+    }
+    $icon = isset($module_icons[$link]) ? $module_icons[$link] : '&#128196;';
+    echo '<a href="' . $data['link'] . '" class="vmenu-item" title="' . htmlspecialchars($data['title'], ENT_COMPAT, $l['a_meta_charset']) . '">' . K_NEWLINE;
+    echo '<span class="vmenu-icon">' . $icon . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-text">' . K_NEWLINE;
+    echo '<span class="vmenu-name">' . htmlspecialchars($data['name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-desc">' . htmlspecialchars($data['title'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-arrow">&rsaquo;</span>' . K_NEWLINE;
+    echo '</a>' . K_NEWLINE;
 }
-
-echo '</ul>' . K_NEWLINE;
+echo '</div>' . K_NEWLINE;
 
 //echo '<div class="pagehelp">'.$l['w_modules'].'</div>'.K_NEWLINE;
 echo '</div>' . K_NEWLINE;
diff --git a/admin/code/tce_menu_tests.php b/admin/code/tce_menu_tests.php
index 57970f3d4..6317ba024 100644
--- a/admin/code/tce_menu_tests.php
+++ b/admin/code/tce_menu_tests.php
@@ -40,13 +40,33 @@
 
 echo '<div class="container">' . K_NEWLINE;
 
-// print submenu
-echo '<ul>' . K_NEWLINE;
+// Modern vertical menu with icons
+$test_icons = [
+    'tce_edit_test.php' => '&#128221;',
+    'tce_select_tests.php' => '&#128269;',
+    'tce_import_omr_answers.php' => '&#128196;',
+    'tce_import_omr_bulk.php' => '&#128230;',
+    'tce_edit_rating.php' => '&#11088;',
+    'tce_show_result_allusers.php' => '&#128202;',
+    'tce_show_result_user.php' => '&#128100;',
+];
+
+echo '<div class="vmenu">' . K_NEWLINE;
 foreach ($menu['tce_menu_tests.php']['sub'] as $link => $data) {
-    echo F_menu_link($link, $data, 1);
+    if (! $data['enabled'] || $_SESSION['session_user_level'] < $data['level']) {
+        continue;
+    }
+    $icon = isset($test_icons[$link]) ? $test_icons[$link] : '&#128196;';
+    echo '<a href="' . $data['link'] . '" class="vmenu-item" title="' . htmlspecialchars($data['title'], ENT_COMPAT, $l['a_meta_charset']) . '">' . K_NEWLINE;
+    echo '<span class="vmenu-icon">' . $icon . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-text">' . K_NEWLINE;
+    echo '<span class="vmenu-name">' . htmlspecialchars($data['name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-desc">' . htmlspecialchars($data['title'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-arrow">&rsaquo;</span>' . K_NEWLINE;
+    echo '</a>' . K_NEWLINE;
 }
-
-echo '</ul>' . K_NEWLINE;
+echo '</div>' . K_NEWLINE;
 
 //echo '<div class="pagehelp">'.$l['w_tests'].'</div>'.K_NEWLINE;
 echo '</div>' . K_NEWLINE;
diff --git a/admin/code/tce_menu_users.php b/admin/code/tce_menu_users.php
index 8e31daa87..af825963f 100644
--- a/admin/code/tce_menu_users.php
+++ b/admin/code/tce_menu_users.php
@@ -40,13 +40,31 @@
 
 echo '<div class="container">' . K_NEWLINE;
 
-// print submenu
-echo '<ul>' . K_NEWLINE;
+// Modern vertical menu with icons
+$user_icons = [
+    'tce_edit_user.php' => '&#128100;',
+    'tce_edit_group.php' => '&#128101;',
+    'tce_select_users.php' => '&#128269;',
+    'tce_show_online_users.php' => '&#127760;',
+    'tce_import_users.php' => '&#128228;',
+];
+
+echo '<div class="vmenu">' . K_NEWLINE;
 foreach ($menu['tce_menu_users.php']['sub'] as $link => $data) {
-    echo F_menu_link($link, $data, 1);
+    if (! $data['enabled'] || $_SESSION['session_user_level'] < $data['level']) {
+        continue;
+    }
+    $icon = isset($user_icons[$link]) ? $user_icons[$link] : '&#128196;';
+    echo '<a href="' . $data['link'] . '" class="vmenu-item" title="' . htmlspecialchars($data['title'], ENT_COMPAT, $l['a_meta_charset']) . '">' . K_NEWLINE;
+    echo '<span class="vmenu-icon">' . $icon . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-text">' . K_NEWLINE;
+    echo '<span class="vmenu-name">' . htmlspecialchars($data['name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-desc">' . htmlspecialchars($data['title'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-arrow">&rsaquo;</span>' . K_NEWLINE;
+    echo '</a>' . K_NEWLINE;
 }
-
-echo '</ul>' . K_NEWLINE;
+echo '</div>' . K_NEWLINE;
 
 //echo '<div class="pagehelp">'.$l['w_users'].'</div>'.K_NEWLINE;
 echo '</div>' . K_NEWLINE;
diff --git a/admin/styles/default.css b/admin/styles/default.css
index e5a07f472..7b60d42f1 100644
--- a/admin/styles/default.css
+++ b/admin/styles/default.css
@@ -78,7 +78,11 @@ a.tcecode:hover{
 
 a.white {
     color: #FFFFFF;
-    font-size: 5px;
+    font-size: 12px;
+    text-decoration: none;
+    padding: 4px 10px;
+    border-radius: 3px;
+    transition: all 0.2s ease;
 }
 
 a.white:visited {
@@ -87,6 +91,7 @@ a.white:visited {
 
 a.white:hover {
     color: #FFFFFF;
+    background: rgba(255,255,255,0.15);
 }
 
 a.xmlbutton:link, a.xmlbutton:visited {
@@ -289,8 +294,14 @@ div.message {
 /* W3C logos ------------ */
 div.minibutton {
     clear: both;
-    margin: 0px 0px 0px 0px;
+    margin: 12px 0;
+    padding: 6px 0;
     text-align: center;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    align-items: center;
 }
 
 div.minibutton span.copyright {
@@ -965,3 +976,117 @@ span.accesskey {
     color:#006000 !important;
     text-align:right !important;
 }
+
+/* ===== MODERN VERTICAL MENU ===== */
+.vmenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-width: 560px;
+}
+
+.vmenu-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 20px;
+    background: #FFFFFF;
+    border: 1px solid #E0E0E0;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #333333;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.vmenu-item:visited {
+    color: #333333;
+    text-decoration: none;
+}
+
+.vmenu-item:hover,
+.vmenu-item:focus {
+    border-color: #003399;
+    background: #F0F4FF;
+    box-shadow: 0 2px 8px rgba(0,51,153,0.12);
+    transform: translateX(4px);
+    text-decoration: none;
+    color: #003399;
+}
+
+.vmenu-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #003399 0%, #336FCC 100%);
+    color: #FFFFFF;
+    font-size: 18px;
+    flex-shrink: 0;
+}
+
+.vmenu-item:hover .vmenu-icon {
+    background: linear-gradient(135deg, #002266 0%, #003399 100%);
+}
+
+.vmenu-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.vmenu-name {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.vmenu-desc {
+    font-size: 12px;
+    color: #888888;
+    line-height: 1.3;
+}
+
+.vmenu-item:hover .vmenu-desc {
+    color: #555555;
+}
+
+.vmenu-arrow {
+    margin-left: auto;
+    font-size: 16px;
+    color: #CCCCCC;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.vmenu-item:hover .vmenu-arrow {
+    color: #003399;
+    transform: translateX(3px);
+}
+
+/* ===== MODERN MULTI-SELECT WIDGET ===== */
+.ms-widget { display:flex; gap:8px; align-items:flex-start; width:100%; }
+.ms-panel { flex:1; border:1px solid #CCCCCC; border-radius:6px; background:#FFFFFF; min-height:120px; max-height:200px; overflow-y:auto; padding:4px; }
+.ms-panel.ms-selected { border-color:#003399; background:#F0F4FF; }
+.ms-panel-title { font-size:11px; font-weight:600; color:#666666; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; padding:2px 6px; }
+.ms-search { width:100%; padding:5px 8px; border:1px solid #DDDDDD; border-radius:4px; font-size:12px; margin-bottom:6px; box-sizing:border-box; outline:none; }
+.ms-search:focus { border-color:#003399; box-shadow:0 0 0 2px rgba(0,51,153,0.15); }
+.ms-item { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; margin:2px; border-radius:14px; font-size:12px; cursor:pointer; transition:all 0.15s ease; user-select:none; border:1px solid transparent; }
+.ms-item-available { background:#F0F0F0; color:#333333; }
+.ms-item-available:hover { background:#003399; color:#FFFFFF; }
+.ms-item-available.ms-unauthorized { text-decoration:line-through; opacity:0.6; }
+.ms-item-selected { background:#003399; color:#FFFFFF; }
+.ms-item-selected:hover { background:#CC3333; }
+.ms-item-selected::after { content:"\00d7"; font-size:14px; font-weight:bold; margin-left:2px; }
+.ms-item-selected.ms-unauthorized { text-decoration:line-through; opacity:0.7; }
+.ms-arrows { display:flex; flex-direction:column; gap:4px; justify-content:center; align-self:center; }
+.ms-arrows button { background:#E8E8E8; border:1px solid #CCCCCC; border-radius:4px; padding:4px 8px; cursor:pointer; font-size:14px; line-height:1; }
+.ms-arrows button:hover { background:#003399; color:#FFFFFF; border-color:#003399; }
+.ms-empty { color:#999999; font-size:11px; font-style:italic; padding:8px; text-align:center; }
diff --git a/public/code/tce_page_user.php b/public/code/tce_page_user.php
index 5ca6811d5..a28b47b75 100644
--- a/public/code/tce_page_user.php
+++ b/public/code/tce_page_user.php
@@ -40,13 +40,28 @@
 
 echo '<div class="container">' . K_NEWLINE;
 
-// print submenu
-echo '<ul>' . K_NEWLINE;
+// Modern vertical menu with icons
+$user_page_icons = [
+    'tce_user_change_email.php' => '&#9993;',
+    'tce_user_change_password.php' => '&#128273;',
+];
+
+echo '<div class="vmenu">' . K_NEWLINE;
 foreach ($menu['tce_page_user.php']['sub'] as $link => $data) {
-    echo F_menu_link($link, $data, 1);
+    if (! $data['enabled'] || $_SESSION['session_user_level'] < $data['level']) {
+        continue;
+    }
+    $icon = isset($user_page_icons[$link]) ? $user_page_icons[$link] : '&#128196;';
+    echo '<a href="' . $data['link'] . '" class="vmenu-item" title="' . htmlspecialchars($data['title'], ENT_COMPAT, $l['a_meta_charset']) . '">' . K_NEWLINE;
+    echo '<span class="vmenu-icon">' . $icon . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-text">' . K_NEWLINE;
+    echo '<span class="vmenu-name">' . htmlspecialchars($data['name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-desc">' . htmlspecialchars($data['title'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
+    echo '</span>' . K_NEWLINE;
+    echo '<span class="vmenu-arrow">&rsaquo;</span>' . K_NEWLINE;
+    echo '</a>' . K_NEWLINE;
 }
-
-echo '</ul>' . K_NEWLINE;
+echo '</div>' . K_NEWLINE;
 
 echo '</div>' . K_NEWLINE;
 
diff --git a/public/styles/default.css b/public/styles/default.css
index 343385196..a8af3f2b9 100644
--- a/public/styles/default.css
+++ b/public/styles/default.css
@@ -64,7 +64,11 @@ a.tcecode:hover{
 
 a.white {
 	color: #FFFFFF;
-	font-size: 5px;
+	font-size: 12px;
+	text-decoration: none;
+	padding: 4px 10px;
+	border-radius: 3px;
+	transition: all 0.2s ease;
 }
 
 a.white:visited {
@@ -73,6 +77,7 @@ a.white:visited {
 
 a.white:hover {
 	color: #FFFFFF;
+	background: rgba(255,255,255,0.15);
 }
 
 acronym.offbox {
@@ -260,8 +265,14 @@ div.message {
 /* W3C logos ------------ */
 div.minibutton {
 	clear: both;
-	margin: 0px 0px 0px 0px;
+	margin: 12px 0;
+	padding: 6px 0;
 	text-align: center;
+	font-size: 12px;
+	display: flex;
+	justify-content: center;
+	gap: 8px;
+	align-items: center;
 }
 
 div.minibutton span.copyright {
@@ -995,3 +1006,96 @@ span.accesskey {
 	text-align:right !important;
 }
 
+/* ===== MODERN VERTICAL MENU ===== */
+.vmenu {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	max-width: 560px;
+}
+
+.vmenu-item {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 14px 20px;
+	background: #FFFFFF;
+	border: 1px solid #E0E0E0;
+	border-radius: 8px;
+	text-decoration: none;
+	color: #333333;
+	transition: all 0.2s ease;
+	cursor: pointer;
+	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.vmenu-item:visited {
+	color: #333333;
+	text-decoration: none;
+}
+
+.vmenu-item:hover,
+.vmenu-item:focus {
+	border-color: #003399;
+	background: #F0F4FF;
+	box-shadow: 0 2px 8px rgba(0,51,153,0.12);
+	transform: translateX(4px);
+	text-decoration: none;
+	color: #003399;
+}
+
+.vmenu-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 38px;
+	height: 38px;
+	border-radius: 8px;
+	background: linear-gradient(135deg, #003399 0%, #336FCC 100%);
+	color: #FFFFFF;
+	font-size: 18px;
+	flex-shrink: 0;
+}
+
+.vmenu-item:hover .vmenu-icon {
+	background: linear-gradient(135deg, #002266 0%, #003399 100%);
+}
+
+.vmenu-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.vmenu-name {
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1.3;
+}
+
+.vmenu-desc {
+	font-size: 12px;
+	color: #888888;
+	line-height: 1.3;
+}
+
+.vmenu-item:hover .vmenu-desc {
+	color: #555555;
+}
+
+.vmenu-arrow {
+	margin-left: auto;
+	font-size: 16px;
+	color: #CCCCCC;
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+}
+
+.vmenu-item:hover .vmenu-arrow {
+	color: #003399;
+	transform: translateX(3px);
+}