Skip to content

M
MBetterc
Commit 6d573b42 authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Add user dropdown menu with gravatar support for player and broker dashboards 

- Added user dropdown menu with avatar, wallet and profile links
- Integrated Gravatar support with MD5 hash for email-based avatars
- Added dropdown toggle functionality with click-outside-to-close
- Fixed balance display colors for better readability
- Added dropdown divider styling
parent 5de4417b
Hide whitespace changes
Inline Side-by-side
Showing with 301 additions and 14 deletions
web/broker.html
View file @ 6d573b42
......@@ -14,11 +14,20 @@
<p class="tagline">Build your betting application with TCL API</p>
</div>
<div class="user-info">
<span id="user-name">Welcome, Broker</span>
<span id="user-balance" class="balance-display">Balance: $0.00</span>
<a href="wallet.html" class="btn btn-primary btn-sm">Wallet</a>
<a href="profile.html" class="btn btn-secondary btn-sm">Profile</a>
<button class="logout-btn" onclick="logout()">Logout</button>
<div class="nav-user">
<div class="user-profile" onclick="toggleUserDropdown()">
<img id="user-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234a5568'/%3E%3Ccircle cx='50' cy='35' r='20' fill='%23718096'/%3E%3Cellipse cx='50' cy='85' rx='35' ry='25' fill='%23718096'/%3E%3C/svg%3E" alt="Avatar" class="user-avatar">
<span id="user-name" class="user-welcome">Broker</span>
<span class="dropdown-arrow">▼</span>
</div>
<div id="user-dropdown" class="user-dropdown" style="display: none;">
<a href="wallet.html" class="dropdown-item">💰 Wallet</a>
<a href="profile.html" class="dropdown-item">⚙️ Profile Settings</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item" onclick="logout(); return false;">🚪 Logout</a>
</div>
</div>
</div>
</header>
......
web/broker.js
View file @ 6d573b42
......@@ -57,9 +57,21 @@ async function loadBrokerData() {
document.getElementById('callback-url').value = appData.callback_url;
}
// Update user name
if (currentUser && currentUser.name) {
document.getElementById('user-name').textContent = `Welcome, ${currentUser.name}`;
// Update user name and avatar
if (currentUser) {
const displayName = currentUser.real_name || currentUser.name || currentUser.username || 'Broker';
document.getElementById('user-name').textContent = displayName;
// Update avatar with Gravatar
const avatarElement = document.getElementById('user-avatar');
if (avatarElement) {
if (currentUser.avatar_url) {
avatarElement.src = currentUser.avatar_url;
} else if (currentUser.email) {
const emailHash = md5Hash(currentUser.email.toLowerCase().trim());
avatarElement.src = `https://www.gravatar.com/avatar/${emailHash}?s=32&d=identicon`;
}
}
}
} catch (error) {
console.error('Error loading broker data:', error);
......@@ -225,4 +237,123 @@ function exportApiDocs() {
URL.revokeObjectURL(url);
showNotification('API documentation exported successfully!', 'success');
}
// Toggle user dropdown menu
function toggleUserDropdown() {
const dropdown = document.getElementById('user-dropdown');
if (dropdown) {
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
}
}
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
const dropdown = document.getElementById('user-dropdown');
const userProfile = document.querySelector('.user-profile');
if (dropdown && userProfile && !userProfile.contains(e.target)) {
dropdown.style.display = 'none';
}
});
// Simple MD5 hash function for Gravatar
function md5Hash(string) {
function md5cycle(x, k) {
var a = x[0], b = x[1], c = x[2], d = x[3];
a = ff(a, b, c, d, k[0], 7, -680876936);
d = ff(d, a, b, c, k[1], 12, -389564586);
c = ff(c, d, a, b, k[2], 17, 606105819);
b = ff(b, c, d, a, k[3], 22, -1044525330);
a = ff(a, b, c, d, k[4], 7, -176418897);
d = ff(d, a, b, c, k[5], 12, 1200080426);
c = ff(c, d, a, b, k[6], 17, -1473231341);
b = ff(b, c, d, a, k[7], 22, -45705983);
a = ff(a, b, c, d, k[8], 7, 1770035416);
d = ff(d, a, b, c, k[9], 12, -1958414417);
c = ff(c, d, a, b, k[10], 17, -42063);
b = ff(b, c, d, a, k[11], 22, -1990404162);
a = ff(a, b, c, d, k[12], 7, 1804603682);
d = ff(d, a, b, c, k[13], 12, -40341101);
c = ff(c, d, a, b, k[14], 17, -1502002290);
b = ff(b, c, d, a, k[15], 22, 1236535329);
a = gg(a, b, c, d, k[1], 5, -165796510);
d = gg(d, a, b, c, k[6], 9, -1069501632);
c = gg(c, d, a, b, k[11], 14, 643717713);
b = gg(b, c, d, a, k[0], 20, -373897302);
a = gg(a, b, c, d, k[5], 5, -701558691);
d = gg(d, a, b, c, k[10], 9, 38016083);
c = gg(c, d, a, b, k[15], 14, -660478335);
b = gg(b, c, d, a, k[4], 20, -405537848);
a = gg(a, b, c, d, k[9], 5, 568446438);
d = gg(d, a, b, c, k[14], 9, -1019803690);
c = gg(c, d, a, b, k[3], 14, -187363961);
b = gg(b, c, d, a, k[8], 20, 1163531501);
a = gg(a, b, c, d, k[13], 5, -1444681467);
d = gg(d, a, b, c, k[2], 9, -51403784);
c = gg(c, d, a, b, k[7], 14, 1735328473);
b = gg(b, c, d, a, k[12], 20, -1926607734);
a = hh(a, b, c, d, k[5], 4, -378558);
d = hh(d, a, b, c, k[8], 11, -2022574463);
c = hh(c, d, a, b, k[11], 16, 1839030562);
b = hh(b, c, d, a, k[14], 23, -35309556);
a = hh(a, b, c, d, k[1], 4, -1530992060);
d = hh(d, a, b, c, k[4], 11, 1272893353);
c = hh(c, d, a, b, k[7], 16, -155497632);
b = hh(b, c, d, a, k[10], 23, -1094730640);
a = hh(a, b, c, d, k[13], 4, 681279174);
d = hh(d, a, b, c, k[0], 11, -358537222);
c = hh(c, d, a, b, k[3], 16, -722521979);
b = hh(b, c, d, a, k[6], 23, 76029189);
a = hh(a, b, c, d, k[9], 4, -640364487);
d = hh(d, a, b, c, k[12], 11, -421815835);
c = hh(c, d, a, b, k[15], 16, 530742520);
b = hh(b, c, d, a, k[2], 23, -995338651);
a = ii(a, b, c, d, k[0], 6, -198630844);
d = ii(d, a, b, c, k[7], 10, 1126891415);
c = ii(c, d, a, b, k[14], 15, -1416354905);
b = ii(b, c, d, a, k[5], 21, -57434055);
a = ii(a, b, c, d, k[12], 6, 1700485571);
d = ii(d, a, b, c, k[3], 10, -1894986606);
c = ii(c, d, a, b, k[10], 15, -1051523);
b = ii(b, c, d, a, k[1], 21, -2054922799);
a = ii(a, b, c, d, k[8], 6, 1873313359);
d = ii(d, a, b, c, k[15], 10, -30611744);
c = ii(c, d, a, b, k[6], 15, -1560198380);
b = ii(b, c, d, a, k[13], 21, 1309151649);
a = ii(a, b, c, d, k[4], 6, -145523070);
d = ii(d, a, b, c, k[11], 10, -1120210379);
c = ii(c, d, a, b, k[2], 15, 718787259);
b = ii(b, c, d, a, k[9], 21, -343485551);
x[0] = add32(a, x[0]);
x[1] = add32(b, x[1]);
x[2] = add32(c, x[2]);
x[3] = add32(d, x[3]);
}
function cmn(q, a, b, x, s, t) { a = add32(add32(a, q), add32(x, t)); return add32((a << s) | (a >>> (32 - s)), b); }
function ff(a, b, c, d, x, s, t) { return cmn((b & c) | ((~b) & d), a, b, x, s, t); }
function gg(a, b, c, d, x, s, t) { return cmn((b & d) | (c & (~d)), a, b, x, s, t); }
function hh(a, b, c, d, x, s, t) { return cmn(b ^ c ^ d, a, b, x, s, t); }
function ii(a, b, c, d, x, s, t) { return cmn(c ^ (b | (~d)), a, b, x, s, t); }
function md51(s) {
var n = s.length, state = [1732584193, -271733879, -1732584194, 271733878], i;
for (i = 64; i <= s.length; i += 64) { md5cycle(state, md5blk(s.substring(i - 64, i))); }
s = s.substring(i - 64);
var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (i = 0; i < s.length; i++) tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3);
tail[i >> 2] |= 0x80 << ((i % 4) << 3);
if (i > 55) { md5cycle(state, tail); for (i = 0; i < 16; i++) tail[i] = 0; }
tail[14] = n * 8;
md5cycle(state, tail);
return state;
}
function md5blk(s) {
var md5blks = [], i;
for (i = 0; i < 64; i += 4) { md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24); }
return md5blks;
}
var hex_chr = '0123456789abcdef'.split('');
function rhex(n) { var s = '', j = 0; for (; j < 4; j++) s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] + hex_chr[(n >> (j * 8)) & 0x0F]; return s; }
function hex(x) { for (var i = 0; i < x.length; i++) x[i] = rhex(x[i]); return x.join(''); }
function add32(a, b) { return (a + b) & 0xFFFFFFFF; }
return hex(md51(string));
}
\ No newline at end of file
web/player.html
View file @ 6d573b42
......@@ -15,11 +15,20 @@
<p class="tagline">Place bets and watch live matches</p>
</div>
<div class="user-info">
<span id="user-name">Welcome, Player</span>
<span id="user-balance" class="balance-display">Balance: $0.00</span>
<a href="wallet.html" class="btn btn-primary btn-sm">Wallet</a>
<a href="profile.html" class="btn btn-secondary btn-sm">Profile</a>
<button class="logout-btn" onclick="logout()">Logout</button>
<div class="nav-user">
<div class="user-profile" onclick="toggleUserDropdown()">
<img id="user-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234a5568'/%3E%3Ccircle cx='50' cy='35' r='20' fill='%23718096'/%3E%3Cellipse cx='50' cy='85' rx='35' ry='25' fill='%23718096'/%3E%3C/svg%3E" alt="Avatar" class="user-avatar">
<span id="user-name" class="user-welcome">Player</span>
<span class="dropdown-arrow">▼</span>
</div>
<div id="user-dropdown" class="user-dropdown" style="display: none;">
<a href="wallet.html" class="dropdown-item">💰 Wallet</a>
<a href="profile.html" class="dropdown-item">⚙️ Profile Settings</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item" onclick="logout(); return false;">🚪 Logout</a>
</div>
</div>
</div>
</header>
......
web/player.js
View file @ 6d573b42
......@@ -519,10 +519,21 @@ async function loadPlayerData() {
profitLossElement.textContent = `$${profitLoss.toFixed(2)}`;
profitLossElement.style.color = profitLoss >= 0 ? 'var(--success-color)' : 'var(--error-color)';
// Update user name
// Update user name and avatar
if (currentUser) {
const displayName = currentUser.real_name || currentUser.username || 'Player';
document.getElementById('user-name').textContent = `Welcome, ${displayName}`;
document.getElementById('user-name').textContent = displayName;
// Update avatar with Gravatar
const avatarElement = document.getElementById('user-avatar');
if (avatarElement) {
if (currentUser.avatar_url) {
avatarElement.src = currentUser.avatar_url;
} else if (currentUser.email) {
const emailHash = md5Hash(currentUser.email.toLowerCase().trim());
avatarElement.src = `https://www.gravatar.com/avatar/${emailHash}?s=32&d=identicon`;
}
}
}
} catch (error) {
console.error('Error loading player data:', error);
......@@ -1518,4 +1529,123 @@ function toggleOverlay() {
if (overlayController) overlayController.pause();
}
}
}
// Toggle user dropdown menu
function toggleUserDropdown() {
const dropdown = document.getElementById('user-dropdown');
if (dropdown) {
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
}
}
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
const dropdown = document.getElementById('user-dropdown');
const userProfile = document.querySelector('.user-profile');
if (dropdown && userProfile && !userProfile.contains(e.target)) {
dropdown.style.display = 'none';
}
});
// Simple MD5 hash function for Gravatar
function md5Hash(string) {
function md5cycle(x, k) {
var a = x[0], b = x[1], c = x[2], d = x[3];
a = ff(a, b, c, d, k[0], 7, -680876936);
d = ff(d, a, b, c, k[1], 12, -389564586);
c = ff(c, d, a, b, k[2], 17, 606105819);
b = ff(b, c, d, a, k[3], 22, -1044525330);
a = ff(a, b, c, d, k[4], 7, -176418897);
d = ff(d, a, b, c, k[5], 12, 1200080426);
c = ff(c, d, a, b, k[6], 17, -1473231341);
b = ff(b, c, d, a, k[7], 22, -45705983);
a = ff(a, b, c, d, k[8], 7, 1770035416);
d = ff(d, a, b, c, k[9], 12, -1958414417);
c = ff(c, d, a, b, k[10], 17, -42063);
b = ff(b, c, d, a, k[11], 22, -1990404162);
a = ff(a, b, c, d, k[12], 7, 1804603682);
d = ff(d, a, b, c, k[13], 12, -40341101);
c = ff(c, d, a, b, k[14], 17, -1502002290);
b = ff(b, c, d, a, k[15], 22, 1236535329);
a = gg(a, b, c, d, k[1], 5, -165796510);
d = gg(d, a, b, c, k[6], 9, -1069501632);
c = gg(c, d, a, b, k[11], 14, 643717713);
b = gg(b, c, d, a, k[0], 20, -373897302);
a = gg(a, b, c, d, k[5], 5, -701558691);
d = gg(d, a, b, c, k[10], 9, 38016083);
c = gg(c, d, a, b, k[15], 14, -660478335);
b = gg(b, c, d, a, k[4], 20, -405537848);
a = gg(a, b, c, d, k[9], 5, 568446438);
d = gg(d, a, b, c, k[14], 9, -1019803690);
c = gg(c, d, a, b, k[3], 14, -187363961);
b = gg(b, c, d, a, k[8], 20, 1163531501);
a = gg(a, b, c, d, k[13], 5, -1444681467);
d = gg(d, a, b, c, k[2], 9, -51403784);
c = gg(c, d, a, b, k[7], 14, 1735328473);
b = gg(b, c, d, a, k[12], 20, -1926607734);
a = hh(a, b, c, d, k[5], 4, -378558);
d = hh(d, a, b, c, k[8], 11, -2022574463);
c = hh(c, d, a, b, k[11], 16, 1839030562);
b = hh(b, c, d, a, k[14], 23, -35309556);
a = hh(a, b, c, d, k[1], 4, -1530992060);
d = hh(d, a, b, c, k[4], 11, 1272893353);
c = hh(c, d, a, b, k[7], 16, -155497632);
b = hh(b, c, d, a, k[10], 23, -1094730640);
a = hh(a, b, c, d, k[13], 4, 681279174);
d = hh(d, a, b, c, k[0], 11, -358537222);
c = hh(c, d, a, b, k[3], 16, -722521979);
b = hh(b, c, d, a, k[6], 23, 76029189);
a = hh(a, b, c, d, k[9], 4, -640364487);
d = hh(d, a, b, c, k[12], 11, -421815835);
c = hh(c, d, a, b, k[15], 16, 530742520);
b = hh(b, c, d, a, k[2], 23, -995338651);
a = ii(a, b, c, d, k[0], 6, -198630844);
d = ii(d, a, b, c, k[7], 10, 1126891415);
c = ii(c, d, a, b, k[14], 15, -1416354905);
b = ii(b, c, d, a, k[5], 21, -57434055);
a = ii(a, b, c, d, k[12], 6, 1700485571);
d = ii(d, a, b, c, k[3], 10, -1894986606);
c = ii(c, d, a, b, k[10], 15, -1051523);
b = ii(b, c, d, a, k[1], 21, -2054922799);
a = ii(a, b, c, d, k[8], 6, 1873313359);
d = ii(d, a, b, c, k[15], 10, -30611744);
c = ii(c, d, a, b, k[6], 15, -1560198380);
b = ii(b, c, d, a, k[13], 21, 1309151649);
a = ii(a, b, c, d, k[4], 6, -145523070);
d = ii(d, a, b, c, k[11], 10, -1120210379);
c = ii(c, d, a, b, k[2], 15, 718787259);
b = ii(b, c, d, a, k[9], 21, -343485551);
x[0] = add32(a, x[0]);
x[1] = add32(b, x[1]);
x[2] = add32(c, x[2]);
x[3] = add32(d, x[3]);
}
function cmn(q, a, b, x, s, t) { a = add32(add32(a, q), add32(x, t)); return add32((a << s) | (a >>> (32 - s)), b); }
function ff(a, b, c, d, x, s, t) { return cmn((b & c) | ((~b) & d), a, b, x, s, t); }
function gg(a, b, c, d, x, s, t) { return cmn((b & d) | (c & (~d)), a, b, x, s, t); }
function hh(a, b, c, d, x, s, t) { return cmn(b ^ c ^ d, a, b, x, s, t); }
function ii(a, b, c, d, x, s, t) { return cmn(c ^ (b | (~d)), a, b, x, s, t); }
function md51(s) {
var n = s.length, state = [1732584193, -271733879, -1732584194, 271733878], i;
for (i = 64; i <= s.length; i += 64) { md5cycle(state, md5blk(s.substring(i - 64, i))); }
s = s.substring(i - 64);
var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (i = 0; i < s.length; i++) tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3);
tail[i >> 2] |= 0x80 << ((i % 4) << 3);
if (i > 55) { md5cycle(state, tail); for (i = 0; i < 16; i++) tail[i] = 0; }
tail[14] = n * 8;
md5cycle(state, tail);
return state;
}
function md5blk(s) {
var md5blks = [], i;
for (i = 0; i < 64; i += 4) { md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24); }
return md5blks;
}
var hex_chr = '0123456789abcdef'.split('');
function rhex(n) { var s = '', j = 0; for (; j < 4; j++) s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] + hex_chr[(n >> (j * 8)) & 0x0F]; return s; }
function hex(x) { for (var i = 0; i < x.length; i++) x[i] = rhex(x[i]); return x.join(''); }
function add32(a, b) { return (a + b) & 0xFFFFFFFF; }
return hex(md51(string));
}
\ No newline at end of file
web/styles.css
View file @ 6d573b42
......@@ -2612,12 +2612,20 @@ body {
/* Balance Display in Header */
.balance-display {
background: linear-gradient(135deg, var(--accent-color, #00d4ff), #667eea);
background: linear-gradient(135deg, #00d4ff, #0099cc);
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
color: #000;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
/* Dropdown Divider */
.dropdown-divider {
height: 1px;
background: var(--border-color, #3d3d3d);
margin: 8px 0;
}
/* Modal Improvements */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment