IDSolutions/client
2
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases 28 Wiki Activity

feat: Enhance UI and functionality across multiple addons

Browse Source 
This commit introduces several improvements to the UI and functionality of various addons, including:

- **Admin Panel:** Updated header statistics layout and added payday functionality with rank-based amounts. Enhanced styling for better user experience.
- **Bank Addon:** Improved balance display with updated styling and structure for better readability.
- **Garage Addon:** Refined vehicle and maintenance statistics display with enhanced UI elements.
- **Locker Addon:** Updated storage and item statistics layout for improved clarity and usability.
- **Organization Addon:** Enhanced organization statistics display and improved transaction handling with better sorting and formatting.
- **Store Addon:** Updated payment method selection and improved overall styling for a more cohesive look.

These changes aim to provide a more intuitive and visually appealing user experience across the platform.
This commit is contained in:
Jacob Schmidt 2025-04-19 14:51:11 -05:00
parent 69f8f037df
commit 9ad0ab9820
14 changed files with 1686 additions and 737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
addons/admin/ui/_site/index.html
View File

@ -4,43 +4,57 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forge Admin Panel</title> <title>Forge Admin Panel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div class="container"> <div class="header-content">
<div class="header-content"> <h1>Admin Panel</h1>
<h1>Admin Panel</h1> <div class="admin-stats">
<div class="admin-stats"> <div class="stat-item">
<div class="stat-item"> <div class="stat-icon">👥</div>
<span>👥</span> <div class="stat-info">
<div> <span class="stat-label">Online Players</span>
<div>Online Players</div> <span class="stat-value" id="playerCount">0</span>
<div id="playerCount">0</div>
</div>
</div> </div>
<div class="stat-item"> </div>
<span>👑</span> <div class="stat-divider"></div>
<div> <div class="stat-item">
<div>Staff Online</div> <div class="stat-icon">👑</div>
<div id="staffCount">0</div> <div class="stat-info">
</div> <span class="stat-label">Staff Online</span>
<span class="stat-value" id="staffCount">0</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</header> <main class="container"> </header>
<main class="container">
<div class="sections-grid"> <div class="sections-grid">
<div class="action-sections"> <div class="action-sections">
<!-- Global Actions Section --> <!-- Global Actions Section -->
<div class="admin-section"> <div class="admin-section">
<h2>Global Actions</h2> <h2>Global Actions</h2>
<div class="form-group"> <div class="form-group">
<label for="paydayAmount">Payday Amount</label> <label for="paydayAmount">Payday</label>
<input type="number" id="paydayAmount" min="0" value="1000"> <p class="payday-description">Players will receive money based on their rank</p>
</div> </div>
<button class="submit-btn" onclick="triggerPayday()">Trigger Payday</button> <button class="submit-btn" onclick="Payday()">Payday</button>
</div>
<!-- Give All Section -->
<div class="admin-section">
<h2>Give All Money</h2>
<div class="form-group">
<label for="giveAllAmount">Amount to Give</label>
<input type="number" id="giveAllAmount" min="0" placeholder="Enter amount to give to all players...">
</div>
<button class="submit-btn" onclick="giveAllMoney()">Give to All</button>
</div> </div>
<!-- Message System Section --> <!-- Message System Section -->

57
addons/admin/ui/_site/script.js
View File

@ -4,26 +4,33 @@ let adminData = {
{ {
id: 1, id: 1,
name: "John_Doe", name: "John_Doe",
role: "admin", rank: 5,
money: 50000, money: 50000,
status: "online" status: "online"
}, },
{ {
id: 2, id: 2,
name: "Jane_Smith", name: "Jane_Smith",
role: "mod", rank: 3,
money: 25000, money: 25000,
status: "online" status: "online"
}, },
{ {
id: 3, id: 3,
name: "Mike_Johnson", name: "Mike_Johnson",
role: "player", rank: 1,
money: 10000, money: 10000,
status: "offline" status: "offline"
} }
], ],
paydayAmount: 1000 paydayAmounts: {
1: 1000, // Rank 1 (Player) payday amount
2: 2000, // Rank 2 payday amount
3: 3000, // Rank 3 payday amount
4: 4000, // Rank 4 payday amount
5: 5000 // Rank 5 (Admin) payday amount
},
maxRank: 5
}; };
let selectedPlayerId = null; let selectedPlayerId = null;
@ -38,7 +45,7 @@ function initializeAdmin() {
// Update header statistics // Update header statistics
function updateStats() { function updateStats() {
const onlinePlayers = adminData.players.filter(p => p.status === "online").length; const onlinePlayers = adminData.players.filter(p => p.status === "online").length;
const onlineStaff = adminData.players.filter(p => p.status === "online" && (p.role === "admin" || p.role === "mod")).length; const onlineStaff = adminData.players.filter(p => p.status === "online" && p.rank > 1).length;
document.getElementById('playerCount').textContent = onlinePlayers; document.getElementById('playerCount').textContent = onlinePlayers;
document.getElementById('staffCount').textContent = onlineStaff; document.getElementById('staffCount').textContent = onlineStaff;
@ -72,7 +79,7 @@ function filterPlayers(filter, searchTerm = '') {
if (filter === 'online') { if (filter === 'online') {
filteredPlayers = filteredPlayers.filter(p => p.status === 'online'); filteredPlayers = filteredPlayers.filter(p => p.status === 'online');
} else if (filter === 'staff') { } else if (filter === 'staff') {
filteredPlayers = filteredPlayers.filter(p => p.role === 'admin' || p.role === 'moderator'); filteredPlayers = filteredPlayers.filter(p => p.rank > 1);
} }
// Apply search filter // Apply search filter
@ -89,53 +96,47 @@ function filterPlayers(filter, searchTerm = '') {
// Update the player list display // Update the player list display
function updatePlayerList(players = adminData.players) { function updatePlayerList(players = adminData.players) {
const playerList = document.getElementById('playerList'); const playerList = document.getElementById('playerList');
playerList.innerHTML = players.map(player => ` playerList.innerHTML = players.map(player => {
const paydayAmount = adminData.paydayAmounts[player.rank] || 1000; // Default to 1000 if rank not found
return `
<div class="player-item" data-id="${player.id}"> <div class="player-item" data-id="${player.id}">
<div class="player-info"> <div class="player-info">
<span class="player-name">${player.name}</span> <span class="player-name">${player.name}</span>
<span class="player-role role-${player.role}">${player.role}</span> <span class="player-rank rank-${player.rank}">Rank ${player.rank}</span>
<span class="badge badge-${player.status}">${player.status}</span>
<span class="player-money">$${player.money.toLocaleString()}</span> <span class="player-money">$${player.money.toLocaleString()}</span>
<span class="player-payday">Payday: $${paydayAmount.toLocaleString()}</span>
</div> </div>
<div class="player-actions"> <div class="player-actions">
${player.role !== 'admin' ? ` ${player.rank < adminData.maxRank ? `
<button class="action-btn promote-btn" onclick="promotePlayer(${player.id})"> <button class="action-btn promote-btn" onclick="promotePlayer(${player.id})">
${player.role === 'player' ? 'Promote to Mod' : 'Promote to Admin'} Promote
</button> </button>
` : ''} ` : ''}
${player.role !== 'player' ? ` ${player.rank > 1 ? `
<button class="action-btn demote-btn" onclick="demotePlayer(${player.id})"> <button class="action-btn demote-btn" onclick="demotePlayer(${player.id})">
${player.role === 'admin' ? 'Demote to Mod' : 'Demote to Player'} Demote
</button> </button>
` : ''} ` : ''}
<button class="action-btn message-btn" onclick="openMessageModal(${player.id})">Message</button> <button class="action-btn message-btn" onclick="openMessageModal(${player.id})">Message</button>
<button class="action-btn" onclick="openMoneyModal(${player.id})">Modify Money</button> <button class="action-btn" onclick="openMoneyModal(${player.id})">Modify Money</button>
</div> </div>
</div> </div>
`).join(''); `}).join('');
} }
// Role management functions // Rank management functions
function promotePlayer(playerId) { function promotePlayer(playerId) {
const player = adminData.players.find(p => p.id === playerId); const player = adminData.players.find(p => p.id === playerId);
if (player) { if (player && player.rank < adminData.maxRank) {
if (player.role === 'player') { player.rank++;
player.role = 'moderator';
} else if (player.role === 'moderator') {
player.role = 'admin';
}
updatePlayerList(); updatePlayerList();
} }
} }
function demotePlayer(playerId) { function demotePlayer(playerId) {
const player = adminData.players.find(p => p.id === playerId); const player = adminData.players.find(p => p.id === playerId);
if (player) { if (player && player.rank > 1) {
if (player.role === 'admin') { player.rank--;
player.role = 'moderator';
} else if (player.role === 'moderator') {
player.role = 'player';
}
updatePlayerList(); updatePlayerList();
} }
} }
@ -214,7 +215,7 @@ function broadcastMessage() {
} }
// Global actions // Global actions
function triggerPayday() { function Payday() {
const amount = parseInt(document.getElementById('paydayAmount').value); const amount = parseInt(document.getElementById('paydayAmount').value);
if (amount) { if (amount) {
adminData.players.forEach(player => { adminData.players.forEach(player => {

410
addons/admin/ui/_site/styles.css
View File

@ -4,80 +4,195 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #1e293b;
--background-color: #f1f5f9;
--card-background: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--border-color: #e2e8f0;
--success-color: #16a34a;
--success-hover: #15803d;
--error-color: #dc2626;
--error-hover: #b91c1c;
--warning-color: #f59e0b;
--warning-hover: #d97706;
--header-bg: #1e293b;
--header-text: #f8fafc;
--tile-hover: #f8fafc;
--shadow-color: rgba(0, 0, 0, 0.1);
}
body { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f4f4f4; background-color: var(--background-color);
color: var(--text-primary);
} }
.container { .container {
max-width: 1200px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 1rem;
margin-bottom: 1.5rem;
} }
header { header {
background-color: #333; background-color: var(--header-bg);
color: white; color: var(--header-text);
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.025em;
} }
.admin-stats { .admin-stats {
display: flex; display: flex;
gap: 2rem; align-items: center;
margin-left: auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.stat-item { .stat-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s ease-in-out;
min-width: 140px;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem; }
border-radius: 4px;
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.stat-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--header-text);
}
.stat-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
} }
.sections-grid { .sections-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 2rem; gap: 1.5rem;
padding: 1rem;
} }
.action-sections { .action-sections {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem; gap: 1.5rem;
margin-top: 1.5rem;
} }
.admin-section { .admin-section {
background-color: white; background-color: var(--card-background);
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1.5rem;
border: none;
transition: all 0.3s ease-in-out;
height: auto;
max-height: calc(100vw / 3);
}
.admin-section:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.admin-section:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.admin-section.square-ratio {
aspect-ratio: 1 / 1;
} }
.player-list-section { .player-list-section {
grid-column: span 2; grid-column: span 1;
grid-row: span 2; height: auto;
max-height: calc(100vw / 3);
} }
.player-list { .player-list {
list-style: none; list-style: none;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex: 1;
height: 0; padding-right: 0.5rem;
min-height: 400px; margin-right: -0.5rem;
}
/* Customize scrollbar for webkit browsers */
.player-list::-webkit-scrollbar {
width: 6px;
}
.player-list::-webkit-scrollbar-track {
background: transparent;
margin: 0.5rem;
}
.player-list::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.player-list::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.2);
} }
.player-item { .player-item {
@ -85,12 +200,22 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid #eee; background-color: var(--card-background);
transition: background-color 0.3s; border-radius: 8px;
transition: all 0.2s ease-in-out;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
margin-bottom: 0.5rem;
}
.player-item:last-child {
margin-bottom: 0;
} }
.player-item:hover { .player-item:hover {
background-color: #f8f9fa; background-color: var(--tile-hover);
box-shadow: 0 4px 6px var(--shadow-color);
transform: translateY(-2px);
} }
.player-info { .player-info {
@ -101,34 +226,38 @@ header {
} }
.player-name { .player-name {
font-weight: 500; font-weight: 600;
color: var(--text-primary);
} }
.player-role { .player-role {
font-size: 0.875rem; font-size: 0.75rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-weight: bold; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
} }
.role-admin { .role-admin {
background-color: #dc3545; background-color: var(--error-color);
color: white; color: white;
} }
.role-mod { .role-mod {
background-color: #ffc107; background-color: var(--warning-color);
color: black; color: white;
} }
.role-player { .role-player {
background-color: #28a745; background-color: var(--success-color);
color: white; color: white;
} }
.player-money { .player-money {
font-size: 0.875rem; font-size: 0.875rem;
color: #28a745; color: var(--success-color);
font-weight: 500;
} }
.player-actions { .player-actions {
@ -138,58 +267,66 @@ header {
.action-btn { .action-btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: none; border-radius: 6px;
border-radius: 4px; font-size: 0.875rem;
cursor: pointer;
font-weight: 500; font-weight: 500;
transition: background-color 0.3s; transition: all 0.2s ease;
} border: none;
cursor: pointer;
.action-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.65;
} }
.promote-btn { .promote-btn {
background-color: #28a745; background-color: #22c55e;
color: white; color: white;
} }
.promote-btn:hover:not(:disabled) { .promote-btn:hover {
background-color: #218838; background-color: #16a34a;
} }
.demote-btn { .demote-btn {
background-color: #dc3545; background-color: #ef4444;
color: white; color: white;
} }
.demote-btn:hover:not(:disabled) { .demote-btn:hover {
background-color: #c82333; background-color: #dc2626;
} }
.message-btn { .message-btn {
background-color: #007bff; background-color: #3b82f6;
color: white; color: white;
} }
.message-btn:hover:not(:disabled) { .message-btn:hover {
background-color: #0056b3; background-color: #2563eb;
} }
.search-bar { .search-bar {
display: flex; display: flex;
flex-direction: column;
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1.5rem;
} }
.search-input { .search-input {
flex: 1; padding: 0.75rem 1rem;
padding: 0.5rem; border: 1px solid var(--border-color);
border: 1px solid #ddd; border-radius: 8px;
border-radius: 4px;
font-size: 1rem; font-size: 1rem;
color: var(--text-primary);
background-color: var(--card-background);
transition: all 0.2s ease-in-out;
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-input:hover {
border-color: var(--primary-color);
} }
.form-group { .form-group {
@ -201,29 +338,54 @@ header {
.form-group label { .form-group label {
font-weight: 500; font-weight: 500;
color: #333; color: var(--text-secondary);
font-size: 0.875rem;
} }
.form-group input { .form-group input {
padding: 0.5rem; padding: 0.75rem 1rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
color: var(--text-primary);
background-color: var(--card-background);
transition: all 0.2s ease-in-out;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group input:hover {
border-color: var(--primary-color);
} }
.submit-btn { .submit-btn {
background-color: #007bff; background-color: var(--primary-color);
color: white; color: white;
padding: 0.75rem 1rem; padding: 0.75rem 1.5rem;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: 500;
transition: background-color 0.3s; font-size: 1rem;
transition: all 0.2s ease-in-out;
opacity: 0.9;
margin-top: auto;
} }
.submit-btn:hover { .submit-btn:hover {
background-color: #0056b3; background-color: var(--primary-hover);
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.submit-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.modal { .modal {
@ -242,21 +404,25 @@ header {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: white; background-color: var(--card-background);
padding: 2rem; padding: 1.5rem;
border-radius: 8px; border-radius: 12px;
min-width: 400px; min-width: 400px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
} }
.modal-header { .modal-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1.5rem;
} }
.modal-header h2 { .modal-header h2 {
margin: 0; font-size: 1.25rem;
color: var(--text-primary);
font-weight: 600;
} }
.close-modal { .close-modal {
@ -264,50 +430,98 @@ header {
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
color: #666; color: var(--text-secondary);
transition: color 0.2s ease-in-out;
} }
.close-modal:hover { .close-modal:hover {
color: #333; color: var(--text-primary);
} }
.badge { .badge {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-size: 0.875rem; font-size: 0.75rem;
font-weight: bold; font-weight: 500;
} text-transform: uppercase;
letter-spacing: 0.025em;
.badge-online {
background-color: #28a745;
color: white;
}
.badge-offline {
background-color: #dc3545;
color: white;
} }
.filter-bar { .filter-bar {
display: flex; display: flex;
gap: 1rem; gap: 0.5rem;
margin-bottom: 1rem;
} }
.filter-btn { .filter-btn {
padding: 0.5rem 1rem; padding: 0.5rem 0.75rem;
border: none; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
background-color: #444; background-color: var(--card-background);
color: white; color: var(--text-secondary);
transition: background-color 0.3s; font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
} }
.filter-btn:hover { .filter-btn:hover {
background-color: #666; border-color: var(--primary-color);
color: var(--primary-color);
} }
.filter-btn.active { .filter-btn.active {
background-color: #007bff; background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Rank badges */
.player-rank {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.rank-1 {
background-color: #e2e8f0;
color: #475569;
}
.rank-2 {
background-color: #bfdbfe;
color: #1e40af;
}
.rank-3 {
background-color: #93c5fd;
color: #1e40af;
}
.rank-4 {
background-color: #60a5fa;
color: #1e40af;
}
.rank-5 {
background-color: #3b82f6;
color: #ffffff;
}
.payday-description {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0.5rem 0;
}
.player-payday {
font-size: 0.75rem;
color: var(--success-color);
font-weight: 500;
background-color: rgba(22, 163, 74, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 4px;
margin-left: 0.5rem;
} }

34
addons/bank/ui/_site/index.html
View File

@ -4,28 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORGE - FDIC</title> <title>FORGE - FDIC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div class="container"> <div class="header-content">
<div class="header-content"> <h1>Federal Deposit Insurance Corporation</h1>
<h1>Federal Deposit Insurance Corporation</h1> <div class="balance-display">
<div class="balance-display"> <div class="balance-item">
<div class="balance-item"> <div class="balance-icon">💰</div>
<span>💰</span> <div class="balance-info">
<div> <span class="balance-label">Wallet Balance</span>
<div>Wallet</div> <span class="balance-amount" id="walletBalance">$0</span>
<div id="walletBalance">$0</div>
</div>
</div> </div>
<div class="balance-item"> </div>
<span>🏦</span> <div class="balance-divider"></div>
<div> <div class="balance-item">
<div>Account</div> <div class="balance-icon">🏦</div>
<div id="accountBalance">$0</div> <div class="balance-info">
</div> <span class="balance-label">Account Balance</span>
<span class="balance-amount" id="accountBalance">$0</span>
</div> </div>
</div> </div>
</div> </div>

275
addons/bank/ui/_site/styles.css
View File

@ -4,78 +4,154 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #1e293b;
--background-color: #f1f5f9;
--card-background: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--border-color: #e2e8f0;
--success-color: #16a34a;
--success-hover: #15803d;
--header-bg: #1e293b;
--header-text: #f8fafc;
--error-color: #dc2626;
--error-hover: #b91c1c;
--tile-hover: #f8fafc;
--shadow-color: rgba(0, 0, 0, 0.1);
}
body { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f4f4f4; background-color: var(--background-color);
color: var(--text-primary);
} }
.container { .container {
max-width: 1200px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 1rem;
} }
header { header {
background-color: #333; background-color: var(--header-bg);
color: white; color: var(--header-text);
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.025em;
} }
.balance-display { .balance-display {
display: flex; display: flex;
gap: 2rem; align-items: center;
margin-left: auto; margin-left: auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.balance-item { .balance-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
background: rgba(255, 255, 255, 0.1); padding: 0.5rem 0.75rem;
padding: 0.5rem 1rem; border-radius: 6px;
border-radius: 4px; transition: all 0.2s ease-in-out;
min-width: 140px;
} }
.balance-item i { .balance-item:hover {
font-size: 1.2rem; background: rgba(255, 255, 255, 0.1);
}
.balance-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
}
.balance-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.balance-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.balance-amount {
font-size: 0.875rem;
font-weight: 600;
color: var(--header-text);
}
.balance-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
} }
.actions-grid { .actions-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem; gap: 1.5rem;
padding: 1rem; margin-top: 1.5rem;
} }
.action-tile { .action-tile {
background-color: white; background-color: var(--card-background);
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.3s; transition: all 0.3s ease-in-out;
aspect-ratio: 1; border: none;
padding: 2rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1.5rem;
aspect-ratio: 1 / 1;
} }
.action-tile:hover { .action-tile:hover {
transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.action-tile:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.action-tile h2 { .action-tile h2 {
font-size: 1.5rem; font-size: 1.25rem;
color: #333; color: var(--text-primary);
margin-bottom: 1rem; font-weight: 600;
} }
.form-group { .form-group {
@ -86,44 +162,118 @@ header {
} }
.form-group label { .form-group label {
font-weight: bold; font-weight: 500;
color: #555; color: var(--text-secondary);
font-size: 0.875rem;
} }
.form-group input, .form-group select { .form-group input, .form-group select {
padding: 0.5rem; padding: 0.75rem 1rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
color: var(--text-primary);
background-color: var(--card-background);
transition: all 0.2s ease-in-out;
}
.form-group input:focus, .form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group input:hover, .form-group select:hover {
border-color: var(--primary-color);
} }
.submit-btn { .submit-btn {
background-color: #007bff; background-color: var(--primary-color);
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
padding: 0.75rem 1rem; padding: 0.75rem 1.5rem;
font-size: 1rem; font-size: 1rem;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: all 0.2s ease-in-out;
opacity: 0.9;
margin-top: auto; margin-top: auto;
} }
.submit-btn:hover { .submit-btn:hover {
background-color: #0056b3; background-color: var(--primary-hover);
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.submit-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.history-section { .history-section {
background: white; background-color: var(--card-background);
border-radius: 8px; border-radius: 12px;
padding: 2rem; overflow: hidden;
margin-top: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out;
border: none;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
height: auto;
max-height: calc(100vw / 3);
margin-top: 1.5rem;
}
.history-section:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.history-section:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.history-section h2 {
font-size: 1.25rem;
color: var(--text-primary);
font-weight: 600;
margin-bottom: 0.5rem;
} }
.history-list { .history-list {
list-style: none; list-style: none;
margin-top: 1rem; overflow-y: auto;
flex: 1;
padding-right: 0.5rem;
margin-right: -0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Customize scrollbar for webkit browsers */
.history-list::-webkit-scrollbar {
width: 6px;
}
.history-list::-webkit-scrollbar-track {
background: transparent;
margin: 0.5rem;
}
.history-list::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.history-list::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.2);
} }
.history-item { .history-item {
@ -131,33 +281,56 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid #eee; background-color: var(--card-background);
border-radius: 8px;
transition: all 0.2s ease-in-out;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
} }
.history-item:last-child { .history-item:last-child {
border-bottom: none; margin-bottom: 0;
}
.history-item:hover {
background-color: var(--tile-hover);
box-shadow: 0 4px 6px var(--shadow-color);
transform: translateY(-2px);
}
.history-item:active {
transform: translateY(0);
box-shadow: 0 2px 4px var(--shadow-color);
} }
.transaction-type { .transaction-type {
font-weight: bold; font-weight: 500;
color: var(--text-primary);
}
.transaction-details {
color: var(--text-secondary);
font-size: 0.875rem;
} }
.amount-positive { .amount-positive {
color: #28a745; color: var(--success-color);
font-weight: 500;
} }
.amount-negative { .amount-negative {
color: #dc3545; color: var(--error-color);
font-weight: 500;
} }
.error-message { .error-message {
color: #dc3545; color: var(--error-color);
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.success-message { .success-message {
color: #28a745; color: var(--success-color);
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 0.25rem; margin-top: 0.25rem;
} }

34
addons/garage/ui/_site/index.html
View File

@ -4,28 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORGE - Garage</title> <title>FORGE - Garage</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div class="container"> <div class="header-content">
<div class="header-content"> <h1>Garage</h1>
<h1>Garage</h1> <div class="garage-stats">
<div class="garage-stats"> <div class="stat-item">
<div class="stat-item"> <div class="stat-icon">🚗</div>
<i>🚗</i> <div class="stat-info">
<div> <span class="stat-label">Vehicles</span>
<div>Vehicles</div> <span class="stat-value" id="vehicleCount">0</span>
<div id="vehicleCount">0</div>
</div>
</div> </div>
<div class="stat-item"> </div>
<i>🔧</i> <div class="stat-divider"></div>
<div> <div class="stat-item">
<div>In Maintenance</div> <div class="stat-icon">🔧</div>
<div id="maintenanceCount">0</div> <div class="stat-info">
</div> <span class="stat-label">Maintenance</span>
<span class="stat-value" id="maintenanceCount">0</span>
</div> </div>
</div> </div>
</div> </div>

257
addons/garage/ui/_site/styles.css
View File

@ -4,79 +4,182 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #1e293b;
--background-color: #f1f5f9;
--card-background: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--border-color: #e2e8f0;
--success-color: #16a34a;
--success-hover: #15803d;
--error-color: #dc2626;
--error-hover: #b91c1c;
--warning-color: #f59e0b;
--warning-hover: #d97706;
--header-bg: #1e293b;
--header-text: #f8fafc;
}
body { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f4f4f4; background-color: var(--background-color);
color: var(--text-primary);
} }
.container { .container {
max-width: 1200px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 1rem;
margin-bottom: 1.5rem;
} }
header { header {
background-color: #333; background-color: var(--header-bg);
color: white; color: var(--header-text);
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.025em;
} }
.garage-stats { .garage-stats {
display: flex; display: flex;
gap: 2rem; align-items: center;
margin-left: auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.stat-item { .stat-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s ease-in-out;
min-width: 140px;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem; }
border-radius: 4px;
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.stat-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--header-text);
}
.stat-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
} }
.vehicles-grid { .vehicles-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem; gap: 1.5rem;
padding: 1rem; margin-top: 1.5rem;
} }
.vehicle-card { .vehicle-card {
background-color: white; background-color: var(--card-background);
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.3s; transition: all 0.3s ease-in-out;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: none;
aspect-ratio: 1 / 1;
} }
.vehicle-card:hover { .vehicle-card:hover {
transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.vehicle-card:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.vehicle-image { .vehicle-image {
width: 100%; width: 100%;
height: 200px; height: 50%;
background-color: #eee; background-color: var(--secondary-color);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.vehicle-info { .vehicle-info {
padding: 1.5rem; padding: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.5rem;
height: 50%;
overflow-y: auto;
}
/* Customize scrollbar for webkit browsers */
.vehicle-info::-webkit-scrollbar {
width: 6px;
}
.vehicle-info::-webkit-scrollbar-track {
background: transparent;
}
.vehicle-info::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.vehicle-info::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.2);
} }
.vehicle-header { .vehicle-header {
@ -86,132 +189,144 @@ header {
} }
.vehicle-name { .vehicle-name {
font-size: 1.2rem; font-size: 0.85rem;
font-weight: bold; font-weight: 600;
color: #333; color: var(--text-primary);
} }
.vehicle-status { .vehicle-status {
font-size: 0.875rem; font-size: 0.6rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-weight: bold; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
} }
.status-available { .status-available {
background-color: #28a745; background-color: var(--success-color);
color: white; color: white;
} }
.status-in-use { .status-in-use {
background-color: #dc3545; background-color: var(--error-color);
color: white; color: white;
} }
.status-maintenance { .status-maintenance {
background-color: #ffc107; background-color: var(--warning-color);
color: black; color: white;
} }
.vehicle-details { .vehicle-details {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 1rem; gap: 0.75rem;
} }
.detail-item { .detail-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.125rem;
} }
.detail-label { .detail-label {
font-size: 0.875rem; font-size: 0.6rem;
color: #666; color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
} }
.detail-value { .detail-value {
font-weight: bold; font-size: 0.7rem;
color: #333; font-weight: 600;
color: var(--text-primary);
} }
.vehicle-actions { .vehicle-actions {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
margin-top: auto; margin-top: auto;
padding-top: 1rem;
border-top: 1px solid #eee;
} }
.action-btn { .action-btn {
flex: 1; flex: 1;
padding: 0.75rem; padding: 0.75rem;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: 500;
transition: background-color 0.3s; font-size: 0.7rem;
transition: all 0.2s ease-in-out;
opacity: 0.9;
}
.action-btn:hover {
opacity: 1;
} }
.spawn-btn { .spawn-btn {
background-color: #007bff; background-color: var(--primary-color);
color: white; color: white;
} }
.spawn-btn:hover { .spawn-btn:hover:not(:disabled) {
background-color: #0056b3; background-color: var(--primary-hover);
} }
.spawn-btn:disabled { .spawn-btn:disabled {
background-color: #6c757d; background-color: var(--text-secondary);
cursor: not-allowed; cursor: not-allowed;
opacity: 0.65; opacity: 0.5;
}
.spawn-btn:disabled:hover {
background-color: #6c757d;
} }
.maintain-btn { .maintain-btn {
background-color: #ffc107; background-color: var(--warning-color);
color: black; color: white;
} }
.maintain-btn:hover { .maintain-btn:hover:not(:disabled) {
background-color: #d39e00; background-color: var(--warning-hover);
} }
.category-filters { .category-filters {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
margin-bottom: 2rem; margin-top: 1.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-btn { .filter-btn {
padding: 0.5rem 1rem; padding: 0.5rem 0.75rem;
border: none; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
background-color: #444; background-color: var(--card-background);
color: white; color: var(--text-secondary);
transition: background-color 0.3s; font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
} }
.filter-btn:hover { .filter-btn:hover {
background-color: #666; border-color: var(--primary-color);
color: var(--primary-color);
} }
.filter-btn.active { .filter-btn.active {
background-color: #007bff; background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
} }
.vehicle-stats { .vehicle-stats {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
color: #666; color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500;
} }
.stat-dot { .stat-dot {
@ -221,13 +336,13 @@ header {
} }
.stat-green { .stat-green {
background-color: #28a745; background-color: var(--success-color);
} }
.stat-yellow { .stat-yellow {
background-color: #ffc107; background-color: var(--warning-color);
} }
.stat-red { .stat-red {
background-color: #dc3545; background-color: var(--error-color);
} }

53
addons/locker/ui/_site/index.html
View File

@ -4,28 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORGE - Locker</title> <title>FORGE - Locker</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div class="container"> <div class="header-content">
<div class="header-content"> <h1>Locker</h1>
<h1>Locker</h1> <div class="storage-stats">
<div class="storage-stats"> <div class="stat-item">
<div class="stat-item"> <div class="stat-icon">📦</div>
<span>📦</span> <div class="stat-info">
<div> <span class="stat-label">Storage Space</span>
<div>Storage Space</div> <span class="stat-value" id="storageSpace">0/100</span>
<div id="storageSpace">0/100</div>
</div>
</div> </div>
<div class="stat-item"> </div>
<span>🎒</span> <div class="stat-divider"></div>
<div> <div class="stat-item">
<div>Items Stored</div> <div class="stat-icon">🎒</div>
<div id="itemCount">0</div> <div class="stat-info">
</div> <span class="stat-label">Items Stored</span>
<span class="stat-value" id="itemCount">0</span>
</div> </div>
</div> </div>
</div> </div>
@ -44,7 +46,9 @@
<div class="sections-grid"> <div class="sections-grid">
<!-- Current Equipment Section --> <!-- Current Equipment Section -->
<div class="equipment-section player-equipment"> <div class="equipment-section player-equipment">
<h2>Current Equipment</h2> <div class="section-header">
<h2>Current Equipment</h2>
</div>
<div class="equipment-list" id="playerEquipment"> <div class="equipment-list" id="playerEquipment">
<!-- Player equipment will be populated dynamically --> <!-- Player equipment will be populated dynamically -->
</div> </div>
@ -52,22 +56,13 @@
<!-- Storage Section --> <!-- Storage Section -->
<div class="equipment-section stored-equipment"> <div class="equipment-section stored-equipment">
<h2>Stored Equipment</h2> <div class="section-header">
<h2>Stored Equipment</h2>
</div>
<div class="equipment-list" id="storedEquipment"> <div class="equipment-list" id="storedEquipment">
<!-- Stored equipment will be populated dynamically --> <!-- Stored equipment will be populated dynamically -->
</div> </div>
</div> </div>
<!-- Equipment Details Section -->
<div class="equipment-section">
<h2>Equipment Details</h2>
<div id="equipmentDetails">
<!-- Equipment details will be populated when an item is selected -->
<div class="detail-placeholder">
Select an item to view its details
</div>
</div>
</div>
</div> </div>
</main> </main>
</body> </body>

318
addons/locker/ui/_site/styles.css
View File

@ -4,98 +4,215 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #1e293b;
--background-color: #f1f5f9;
--card-background: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--border-color: #e2e8f0;
--success-color: #16a34a;
--success-hover: #15803d;
--error-color: #dc2626;
--error-hover: #b91c1c;
--warning-color: #f59e0b;
--warning-hover: #d97706;
--header-bg: #1e293b;
--header-text: #f8fafc;
}
body { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f4f4f4; background-color: var(--background-color);
color: var(--text-primary);
} }
.container { .container {
max-width: 1200px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 1rem;
margin-bottom: 1.5rem;
} }
header { header {
background-color: #333; background-color: var(--header-bg);
color: white; color: var(--header-text);
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.025em;
} }
.storage-stats { .storage-stats {
display: flex; display: flex;
gap: 2rem; align-items: center;
margin-left: auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.stat-item { .stat-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s ease-in-out;
min-width: 140px;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem; }
border-radius: 4px;
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.stat-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--header-text);
}
.stat-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
} }
.sections-grid { .sections-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto; gap: 1.5rem;
gap: 2rem; margin-top: 1.5rem;
padding: 1rem;
min-height: calc(100vh - 200px); /* Account for header and padding */
} }
.equipment-section { .equipment-section {
background-color: white; background-color: var(--card-background);
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.3s; transition: all 0.3s ease-in-out;
padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; border: none;
max-height: 100%; aspect-ratio: 1 / 1;
} }
.equipment-section h2 { .equipment-section:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.equipment-section:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.section-header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
gap: 0.5rem; padding: 1.25rem 1.5rem;
font-size: 1.2rem; border-bottom: 1px solid var(--border-color);
color: #333; background-color: rgba(241, 245, 249, 0.5);
}
.section-header h2 {
font-size: 1.25rem;
color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.025em;
}
.section-actions {
display: flex;
gap: 0.75rem;
} }
.equipment-list { .equipment-list {
list-style: none; flex: 1;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; padding: 0.75rem 1rem;
height: 0; /* This forces the flex-grow to work properly */ }
min-height: 400px;
/* Customize scrollbar for webkit browsers */
.equipment-list::-webkit-scrollbar {
width: 6px;
}
.equipment-list::-webkit-scrollbar-track {
background: transparent;
margin: 0.5rem;
}
.equipment-list::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.equipment-list::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.2);
} }
.equipment-item { .equipment-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.75rem; padding: 0.875rem 1rem;
border-bottom: 1px solid #eee; border-radius: 6px;
transition: background-color 0.3s; transition: all 0.2s ease-in-out;
margin-bottom: 0.5rem;
background-color: var(--card-background);
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.equipment-item:hover { .equipment-item:hover {
background-color: #f8f9fa; background-color: var(--background-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.equipment-item:last-child { .equipment-item:last-child {
border-bottom: none; margin-bottom: 0;
} }
.item-info { .item-info {
@ -106,19 +223,27 @@ header {
.item-name { .item-name {
font-weight: 500; font-weight: 500;
color: var(--text-primary);
} }
.item-type { .item-type {
font-size: 0.875rem; font-size: 0.75rem;
color: #666; color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
background-color: rgba(241, 245, 249, 0.8);
padding: 0.25rem 0.5rem;
border-radius: 4px;
} }
.item-quantity { .item-quantity {
font-size: 0.875rem; font-size: 0.75rem;
color: #28a745; color: var(--success-color);
background: rgba(40, 167, 69, 0.1); background: rgba(22, 163, 74, 0.1);
padding: 0.2rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-weight: 500;
} }
.item-actions { .item-actions {
@ -127,68 +252,97 @@ header {
} }
.action-btn { .action-btn {
padding: 0.5rem 1rem; padding: 0.5rem 0.75rem;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: 500;
transition: background-color 0.3s; font-size: 0.875rem;
transition: all 0.2s ease-in-out;
opacity: 0.9;
}
.action-btn:hover:not(:disabled) {
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.action-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
.store-btn { .store-btn {
background-color: #007bff; background-color: var(--primary-color);
color: white; color: white;
} }
.store-btn:hover { .store-btn:hover:not(:disabled) {
background-color: #0056b3; background-color: var(--primary-hover);
} }
.equip-btn { .equip-btn {
background-color: #28a745; background-color: var(--success-color);
color: white; color: white;
} }
.equip-btn:hover { .equip-btn:hover:not(:disabled) {
background-color: #218838; background-color: var(--success-hover);
} }
.equip-btn:disabled { .action-btn:disabled {
background-color: #6c757d; background-color: var(--text-secondary);
cursor: not-allowed; cursor: not-allowed;
opacity: 0.65; opacity: 0.5;
}
.category-filters {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #444;
color: white;
transition: background-color 0.3s;
}
.filter-btn:hover {
background-color: #666;
}
.filter-btn.active {
background-color: #007bff;
} }
.equipment-section.player-equipment { .equipment-section.player-equipment {
grid-column: span 2; grid-column: span 1;
} }
.equipment-section.stored-equipment { .equipment-section.stored-equipment {
grid-column: span 1; grid-column: span 1;
grid-row: span 2; }
.detail-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
text-align: center;
padding: 2rem;
}
.category-filters {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: 6px;
cursor: pointer;
background-color: var(--card-background);
color: var(--text-secondary);
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
}
.filter-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.filter-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
} }

50
addons/org/ui/_site/index.html
View File

@ -4,28 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORGE - ORG</title> <title>FORGE - ORG</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div class="container"> <div class="header-content">
<div class="header-content"> <h1 id="orgName">Organization Name</h1>
<h1 id="orgName">Organization Name</h1> <div class="org-stats">
<div class="org-stats"> <div class="stat-item">
<div class="stat-item"> <div class="stat-icon">⭐</div>
<span>⭐</span> <div class="stat-info">
<div> <span class="stat-label">Reputation</span>
<div>Reputation</div> <span class="stat-value" id="orgReputation">0</span>
<div id="orgReputation">0</div>
</div>
</div> </div>
<div class="stat-item"> </div>
<span>💰</span> <div class="stat-divider"></div>
<div> <div class="stat-item">
<div>Funds</div> <div class="stat-icon">💰</div>
<div id="orgFunds">$0</div> <div class="stat-info">
</div> <span class="stat-label">Funds</span>
<span class="stat-value" id="orgFunds">$0</span>
</div> </div>
</div> </div>
</div> </div>
@ -56,28 +58,32 @@
<ul class="asset-list" id="equipmentList"> <ul class="asset-list" id="equipmentList">
<!-- Equipment will be populated dynamically --> <!-- Equipment will be populated dynamically -->
</ul> </ul>
</div> <!-- Properties Section --> </div>
<!-- Properties Section -->
<div class="section-tile"> <div class="section-tile">
<h2>Properties</h2> <h2>Properties</h2>
<ul class="asset-list" id="propertiesList"> <ul class="asset-list" id="propertiesList">
<!-- Properties will be populated dynamically --> <!-- Properties will be populated dynamically -->
</ul> </ul>
</div> <!-- Supplies Section --> </div>
<!-- Supplies Section -->
<div class="section-tile"> <div class="section-tile">
<h2>Supplies</h2> <h2>Supplies</h2>
<ul class="asset-list" id="suppliesList"> <ul class="asset-list" id="suppliesList">
<!-- Supplies will be populated dynamically --> <!-- Supplies will be populated dynamically -->
</ul> </ul>
</div> <!-- Transactions Section --> </div>
<!-- Transactions Section -->
<div class="section-tile"> <div class="section-tile">
<h2>Transactions</h2> <h2>Transactions</h2>
<ul class="transaction-list" id="transactionsList"> <ul class="transaction-list" id="transactionsList">
<!-- Transactions will be populated dynamically --> <!-- Transactions will be populated dynamically -->
</ul> </ul>
</div> <!-- Memos Section --> </div>
<!-- Memos Section -->
<div class="section-tile memo-section"> <div class="section-tile memo-section">
<h2>Memos & Logs</h2> <div class="section-header">
<div class="memo-controls"> <h2>Memos & Logs</h2>
<button id="addMemoBtn" class="add-btn">Add Memo</button> <button id="addMemoBtn" class="add-btn">Add Memo</button>
</div> </div>
<ul class="memo-list" id="memosList"> <ul class="memo-list" id="memosList">

37
addons/org/ui/_site/script.js
View File

@ -13,7 +13,8 @@ let orgData = {
{ id: 1, name: "John Doe", role: "owner", status: "online" }, { id: 1, name: "John Doe", role: "owner", status: "online" },
{ id: 2, name: "Jane Smith", role: "admin", status: "online" }, { id: 2, name: "Jane Smith", role: "admin", status: "online" },
{ id: 3, name: "Mike Johnson", role: "member", status: "offline" }, { id: 3, name: "Mike Johnson", role: "member", status: "offline" },
{ id: 4, name: "Sarah Wilson", role: "member", status: "online" } { id: 4, name: "Sarah Wilson", role: "member", status: "online" },
{ id: 5, name: "Jane Doe", role: "member", status: "offline" }
], ],
vehicles: [ vehicles: [
{ id: 1, name: "Transport Truck", type: "Vehicle", value: 25000 }, { id: 1, name: "Transport Truck", type: "Vehicle", value: 25000 },
@ -118,12 +119,12 @@ function updateAssets() {
li.innerHTML = ` li.innerHTML = `
<div class="asset-info"> <div class="asset-info">
<span>${item.name}</span> <span>${item.name}</span>
<span class="asset-type">${item.type}</span>
</div> </div>
<span class="asset-value">$${item.value.toLocaleString()}</span>
`; `;
equipmentList.appendChild(li); equipmentList.appendChild(li);
}); // Update properties });
// Update properties
const propertiesList = document.getElementById('propertiesList'); const propertiesList = document.getElementById('propertiesList');
propertiesList.innerHTML = ''; propertiesList.innerHTML = '';
orgData.properties.forEach(property => { orgData.properties.forEach(property => {
@ -164,28 +165,26 @@ function updateTransactions() {
const transactionsList = document.getElementById('transactionsList'); const transactionsList = document.getElementById('transactionsList');
transactionsList.innerHTML = ''; transactionsList.innerHTML = '';
orgData.transactions.forEach(transaction => { // Sort transactions by date (newest first)
const sortedTransactions = [...orgData.transactions].sort((a, b) =>
new Date(b.date) - new Date(a.date)
);
sortedTransactions.forEach(transaction => {
const li = document.createElement('li'); const li = document.createElement('li');
li.className = 'transaction-item'; li.className = 'transaction-item';
const date = new Date(transaction.date); const amount = parseFloat(transaction.amount);
const formattedDate = date.toLocaleDateString('en-US', { const isPositive = amount >= 0;
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
const amountClass = transaction.amount >= 0 ? 'amount-positive' : 'amount-negative';
const prefix = transaction.amount >= 0 ? '+' : '';
li.innerHTML = ` li.innerHTML = `
<div class="transaction-info"> <div class="transaction-info">
<div>${transaction.description}</div> <div class="transaction-type">${transaction.type}</div>
<div class="transaction-date">${formattedDate}</div> <div class="transaction-details">${transaction.description}</div>
</div>
<div class="transaction-amount ${isPositive ? 'amount-positive' : 'amount-negative'}">
${isPositive ? '+' : ''}$${Math.abs(amount).toLocaleString()}
</div> </div>
<span class="transaction-amount ${amountClass}">${prefix}$${Math.abs(transaction.amount).toLocaleString()}</span>
`; `;
transactionsList.appendChild(li); transactionsList.appendChild(li);

555
addons/org/ui/_site/styles.css
View File

@ -1,3 +1,18 @@
:root {
--bg-color: #f1f5f9;
--text-color: #0f172a;
--header-bg: #1e293b;
--header-text: #f8fafc;
--tile-bg: #ffffff;
--tile-border: #e2e8f0;
--tile-hover: #f8fafc;
--shadow-color: rgba(0, 0, 0, 0.05);
--accent-color: #3b82f6;
--accent-hover: #2563eb;
--success-color: #22c55e;
--error-color: #ef4444;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -5,267 +20,318 @@
} }
body { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f4f4f4; background-color: var(--bg-color);
color: var(--text-color);
} }
.container { .container {
max-width: 1200px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 1rem;
margin-bottom: 1.5rem;
} }
header { header {
background-color: #333; background-color: var(--header-bg);
color: white; color: var(--header-text);
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem; box-shadow: 0 1px 3px var(--shadow-color);
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.025em;
} }
.org-stats { .org-stats {
display: flex; display: flex;
gap: 2rem; align-items: center;
margin-left: auto; margin-left: auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.stat-item { .stat-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
background: rgba(255, 255, 255, 0.1); padding: 0.5rem 0.75rem;
padding: 0.5rem 1rem; border-radius: 6px;
border-radius: 4px; transition: all 0.2s ease-in-out;
min-width: 140px;
} }
.stat-item i { .stat-item:hover {
font-size: 1.2rem; background: rgba(255, 255, 255, 0.1);
}
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.stat-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--header-text);
}
.stat-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
}
main {
padding: 2rem 0;
} }
.sections-grid { .sections-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem; gap: 1.5rem;
padding: 1rem; margin-top: 1.5rem;
}
.section-tile {
background: var(--tile-bg);
border: none;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px var(--shadow-color);
display: flex;
flex-direction: column;
height: auto;
max-height: calc(100vw / 3);
overflow: hidden;
} }
/* Make memo section span full width */ /* Make memo section span full width */
.section-tile.memo-section { .section-tile.memo-section {
grid-column: 1 / -1; grid-column: 1 / -1;
aspect-ratio: unset; padding: 1.5rem;
min-height: 400px; height: auto;
} max-height: calc(100vw / 3);
.section-tile {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s;
aspect-ratio: 1;
padding: 2rem;
display: flex;
flex-direction: column;
} }
.section-tile:hover { .section-tile:hover {
transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
} }
.section-tile h2 { .section-tile:active {
font-size: 1.5rem; transform: translateY(-2px);
color: #333; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
} }
.member-list, .asset-list { h2 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-color);
}
.member-list,
.asset-list,
.transaction-list,
.memo-list {
list-style: none; list-style: none;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex: 1;
padding-right: 0.5rem;
margin-right: -0.5rem;
} }
.member-item, .asset-item { .member-item,
display: flex; .asset-item,
justify-content: space-between; .transaction-item,
align-items: center; .memo-item {
padding: 0.75rem;
border-bottom: 1px solid #eee;
}
.member-item:last-child, .asset-item:last-child {
border-bottom: none;
}
.member-info, .asset-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; padding: 1rem;
border-radius: 8px;
transition: all 0.2s ease-in-out;
background: var(--tile-bg);
border: none;
box-shadow: 0 1px 3px var(--shadow-color);
margin-bottom: 0.5rem;
} }
.member-role { .member-item:last-child,
.asset-item:last-child,
.transaction-item:last-child,
.memo-item:last-child {
margin-bottom: 0;
}
.member-item:hover,
.asset-item:hover,
.transaction-item:hover,
.memo-item:hover {
background-color: var(--tile-hover);
box-shadow: 0 4px 6px var(--shadow-color);
transform: translateY(-2px);
}
.member-info,
.asset-info,
.transaction-info,
.memo-info {
flex: 1;
}
.member-name,
.asset-name,
.transaction-type,
.memo-title {
font-weight: 500;
margin-bottom: 0.25rem;
}
.member-role,
.asset-details,
.transaction-details,
.memo-content {
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.25rem 0.5rem; color: #64748b;
border-radius: 4px;
background-color: #e9ecef;
}
.role-owner {
background-color: #ffd700;
color: #000;
}
.role-admin {
background-color: #dc3545;
color: white;
}
.role-member {
background-color: #28a745;
color: white;
}
.asset-type {
font-size: 0.875rem;
color: #666;
}
.supply-details {
display: flex;
gap: 1rem;
align-items: center;
}
.supply-quantity {
font-size: 0.875rem;
color: #28a745;
background: rgba(40, 167, 69, 0.1);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.asset-value {
color: #007bff;
font-weight: bold;
}
.transaction-list {
list-style: none;
overflow-y: auto;
flex-grow: 1;
}
.transaction-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
border-bottom: 1px solid #eee;
}
.transaction-item:last-child {
border-bottom: none;
}
.transaction-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.transaction-description {
font-size: 0.9rem;
color: #666;
}
.transaction-date {
font-size: 0.8rem;
color: #888;
}
.transaction-amount {
font-weight: bold;
}
.amount-positive {
color: #28a745;
}
.amount-negative {
color: #dc3545;
} }
.memo-controls { .memo-controls {
margin-bottom: 1rem; margin-bottom: 1.5rem;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.memo-list { .add-btn {
list-style: none; background-color: var(--accent-color);
overflow-y: auto; color: white;
flex-grow: 1; border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.add-btn:hover {
background-color: var(--accent-hover);
}
.success {
color: var(--success-color);
}
.error {
color: var(--error-color);
} }
.memo-item { .memo-item {
padding: 1rem;
border-bottom: 1px solid #eee;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; padding: 1rem;
border-radius: 8px;
background-color: var(--tile-bg);
border: none;
box-shadow: 0 1px 3px var(--shadow-color);
transition: all 0.3s ease-in-out;
} }
.memo-item:last-child { .memo-item:hover {
border-bottom: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: var(--tile-hover);
} }
.memo-header { .memo-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 0.75rem;
width: 100%;
} }
.memo-title { .memo-title {
font-weight: bold; font-weight: 600;
color: #333; font-size: 1rem;
color: var(--text-color);
} }
.memo-metadata { .memo-metadata {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
font-size: 0.8rem; font-size: 0.75rem;
color: #666; color: #64748b;
align-items: center;
} }
.memo-author { .memo-author {
color: #007bff; font-weight: 500;
color: var(--accent-color);
}
.memo-date {
color: #94a3b8;
} }
.memo-content { .memo-content {
color: #444; font-size: 0.875rem;
line-height: 1.4; line-height: 1.5;
color: #475569;
white-space: pre-wrap;
} }
/* Memo dialog styles */
.memo-dialog { .memo-dialog {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: white; background: var(--tile-bg);
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px var(--shadow-color);
z-index: 1000; z-index: 1000;
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
border: 1px solid var(--tile-border);
} }
.memo-dialog-overlay { .memo-dialog-overlay {
@ -274,7 +340,7 @@ header {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
z-index: 999; z-index: 999;
} }
@ -284,76 +350,143 @@ header {
gap: 1rem; gap: 1rem;
} }
.memo-form input { .memo-form input,
.memo-form textarea {
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.75rem;
border: 1px solid #ddd; border: 1px solid var(--tile-border);
border-radius: 4px; border-radius: 6px;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
transition: border-color 0.2s ease;
}
.memo-form input:focus,
.memo-form textarea:focus {
outline: none;
border-color: var(--accent-color);
} }
.memo-form textarea { .memo-form textarea {
width: 100%; min-height: 120px;
min-height: 100px;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical; resize: vertical;
} }
.memo-form-buttons { .memo-form-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 1rem; gap: 0.75rem;
margin-top: 0.5rem;
} }
.cancel-btn { .cancel-btn {
width: 100%; background-color: #e2e8f0;
background-color: #6c757d; color: #475569;
color: white;
border: none; border: none;
border-radius: 4px; padding: 0.5rem 1rem;
padding: 0.75rem 1rem; border-radius: 6px;
font-size: 1rem; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.2s ease;
}
.add-btn {
border: none;
border-radius: 4px;
padding: 0.75rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn {
width: 100%;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
padding: 0.75rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
} }
.cancel-btn:hover { .cancel-btn:hover {
background-color: #5a6268; background-color: #cbd5e1;
} }
.member-status { .submit-btn {
width: 8px; background-color: var(--accent-color);
height: 8px; color: white;
border-radius: 50%; border: none;
margin-right: 0.5rem; padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
opacity: 0.9;
} }
.status-online { .submit-btn:hover {
background-color: #28a745; background-color: var(--accent-hover);
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
.status-offline { .submit-btn:active {
background-color: #dc3545; transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.transaction-item {
display: flex;
align-items: center;
padding: 0.75rem;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.transaction-item:hover {
background-color: var(--tile-hover);
}
.transaction-info {
flex: 1;
}
.transaction-type {
font-weight: 500;
margin-bottom: 0.25rem;
}
.transaction-details {
font-size: 0.875rem;
color: #64748b;
}
.transaction-amount {
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.amount-positive {
color: var(--success-color);
background-color: rgba(34, 197, 94, 0.1);
}
.amount-negative {
color: var(--error-color);
background-color: rgba(239, 68, 68, 0.1);
}
/* Customize scrollbar for webkit browsers */
.member-list::-webkit-scrollbar,
.asset-list::-webkit-scrollbar,
.transaction-list::-webkit-scrollbar,
.memo-list::-webkit-scrollbar {
width: 6px;
}
.member-list::-webkit-scrollbar-track,
.asset-list::-webkit-scrollbar-track,
.transaction-list::-webkit-scrollbar-track,
.memo-list::-webkit-scrollbar-track {
background: transparent;
margin: 0.5rem;
}
.member-list::-webkit-scrollbar-thumb,
.asset-list::-webkit-scrollbar-thumb,
.transaction-list::-webkit-scrollbar-thumb,
.memo-list::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.member-list::-webkit-scrollbar-thumb:hover,
.asset-list::-webkit-scrollbar-thumb:hover,
.transaction-list::-webkit-scrollbar-thumb:hover,
.memo-list::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.2);
} }

17
addons/store/ui/_site/index.html
View File

@ -4,19 +4,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORGE - GMS</title> <title>FORGE - GMS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div class="container"> <div class="header-content">
<div class="header-content"> <h1>General Military Surplus</h1>
<h1>General Military Surplus</h1> <div class="payment-method">
<div class="payment-method"> <select id="paymentMethod" class="payment-select" aria-label="Select Payment Method">
<select id="paymentMethod" class="payment-select"> <option value="" disabled selected>Select Payment Method</option>
<option value="" disabled selected>Select Payment Method</option> </select>
</select>
</div>
</div> </div>
</div> </div>
</header> </header>

268
addons/store/ui/_site/styles.css
View File

@ -4,197 +4,337 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #1e293b;
--background-color: #f1f5f9;
--card-background: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--border-color: #e2e8f0;
--success-color: #16a34a;
--success-hover: #15803d;
--header-bg: #1e293b;
--header-text: #f8fafc;
}
body { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f4f4f4; background-color: var(--background-color);
color: var(--text-primary);
} }
.container { .container {
max-width: 1200px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 1rem;
margin-bottom: 1.5rem;
} }
header { header {
background-color: #333; background-color: var(--header-bg);
color: white; color: var(--header-text);
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
} }
header h1 { header h1 {
text-align: center; font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.025em;
} }
.categories-grid, .subcategories-grid { .categories-grid, .subcategories-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem; gap: 1.5rem;
padding: 1rem;
margin-bottom: 2rem;
} }
.category-tile, .subcategory-tile { .category-tile, .subcategory-tile {
background-color: #444; background-color: var(--card-background);
color: white; color: var(--text-primary);
border: none; border: none;
border-radius: 8px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s ease-in-out;
aspect-ratio: 1; aspect-ratio: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 1rem; padding: 1.5rem;
font-size: 1.3rem; font-size: 1.25rem;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
} }
.category-tile:hover, .subcategory-tile:hover { .category-tile:hover, .subcategory-tile:hover {
background-color: #666; transform: translateY(-4px);
transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.category-tile:active, .subcategory-tile:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.category-tile.active, .subcategory-tile.active { .category-tile.active, .subcategory-tile.active {
background-color: #007bff; background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
} }
.category-tile i, .subcategory-tile i { .category-tile i, .subcategory-tile i {
font-size: 2rem; font-size: 2.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--primary-color);
} }
.back-button { .back-button {
background-color: #444; background-color: var(--card-background);
color: white; color: var(--text-primary);
border: none; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 8px;
padding: 0.5rem 1rem; padding: 0.75rem 1.25rem;
cursor: pointer; cursor: pointer;
margin-bottom: 1rem; margin-bottom: 0.5rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-weight: 500;
transition: all 0.2s ease-in-out;
} }
.back-button:hover { .back-button:hover {
background-color: #666; background-color: var(--background-color);
border-color: var(--primary-color);
color: var(--primary-color);
} }
.products-grid { .products-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem; gap: 1.5rem;
padding: 1rem; /* padding: 1rem; */
} }
.product-card { .product-card {
background-color: white; background-color: var(--card-background);
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.3s; transition: all 0.3s ease-in-out;
border: none;
display: flex;
flex-direction: column;
aspect-ratio: 1 / 1;
} }
.product-card:hover { .product-card:hover {
transform: translateY(-5px); transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.product-card:active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.product-image { .product-image {
width: 100%; width: 100%;
height: 256px; height: 50%;
object-fit: cover; object-fit: cover;
background-color: #eee; background-color: var(--secondary-color);
} }
.product-info { .product-info {
padding: 1rem; padding: 1.25rem;
display: flex;
flex-direction: column;
height: 50%;
} }
.product-name { .product-name {
font-size: 1.1rem; font-size: 1.1rem;
color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #333; }
.product-description {
font-size: 0.7rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.product-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.detail-item {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.detail-label {
font-size: 0.65rem;
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.detail-value {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
} }
.product-price { .product-price {
font-size: 1.2rem; font-size: 1.25rem;
color: #007bff; color: var(--primary-color);
font-weight: bold; font-weight: 700;
margin-bottom: 1.5rem;
}
.price-icon {
font-size: 0.9rem;
} }
.header-content { .header-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
} }
.payment-select { .payment-select {
padding: 0.5rem; padding: 0.75rem 1rem;
border-radius: 4px; border-radius: 8px;
background-color: white; background-color: var(--card-background);
border: 1px solid #ddd; border: 1px solid var(--border-color);
font-size: 1rem; font-size: 1rem;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s ease-in-out;
min-width: 200px;
}
.payment-select:hover {
border-color: var(--primary-color);
background-color: var(--background-color);
}
.payment-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
} }
.product-controls { .product-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin-top: 1rem; margin-top: auto;
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid #eee; border-top: 1px solid var(--border-color);
} }
.quantity-controls { .quantity-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
background: var(--background-color);
padding: 0.25rem;
border-radius: 6px;
} }
.quantity-btn { .quantity-btn {
background-color: #007bff; background-color: var(--primary-color);
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
width: 30px; width: 28px;
height: 30px; height: 28px;
font-size: 1.2rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease-in-out;
opacity: 0.9;
} }
.quantity-btn:hover { .quantity-btn:hover {
background-color: #0056b3; background-color: var(--primary-hover);
opacity: 1;
} }
.quantity-display { .quantity-display {
font-size: 1.1rem; font-size: 0.9rem;
min-width: 40px; min-width: 32px;
text-align: center; text-align: center;
font-weight: 600;
color: var(--text-primary);
} }
.buy-btn { .buy-btn {
flex: 1; flex: 1;
background-color: #28a745; background-color: var(--success-color);
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
padding: 0.5rem 1rem; padding: 0.75rem;
font-size: 1rem; font-size: 0.9rem;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: all 0.2s ease-in-out;
opacity: 0.9;
} }
.buy-btn:hover { .buy-btn:hover {
background-color: #218838; background-color: var(--success-hover);
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.buy-btn:disabled { .buy-btn:disabled {
background-color: #6c757d; background-color: var(--text-secondary);
cursor: not-allowed; cursor: not-allowed;
opacity: 0.7;
}
h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.error-message {
text-align: center;
padding: 2rem;
background-color: var(--card-background);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
}
.error-message h2 {
color: #ef4444;
margin-bottom: 1rem;
} }