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

Compare commits

base: IDSolutions:8e23fdb2e2aee86b0d5b703f999968fd9cf7467c
Branches Tags
IDSolutions:master
IDSolutions:1.0.0.32
IDSolutions:1.0.0.31
IDSolutions:1.0.0.30
IDSolutions:1.0.0.29
IDSolutions:1.0.0.28
IDSolutions:1.0.0.26
IDSolutions:1.0.0.25
IDSolutions:1.0.0.23
IDSolutions:1.0.0.22
IDSolutions:1.0.0.21
IDSolutions:1.0.0.20
IDSolutions:1.0.0.19
IDSolutions:1.0.0.18
IDSolutions:1.0.0.17
IDSolutions:1.0.0.16
IDSolutions:1.0.0.15
IDSolutions:1.0.0.14
IDSolutions:1.0.0.13
IDSolutions:1.0.0.12
IDSolutions:1.0.0.11
IDSolutions:1.0.0.10
IDSolutions:1.0.0.9
IDSolutions:1.0.0.8
IDSolutions:1.0.0.7
IDSolutions:1.0.0.4
IDSolutions:1.0.0.3
IDSolutions:1.0.0.2
IDSolutions:1.0.0.1
..
compare: IDSolutions:9bbb033437e810331321d7a285b37a65a0bcb315
Branches Tags
IDSolutions:master
IDSolutions:1.0.0.32
IDSolutions:1.0.0.31
IDSolutions:1.0.0.30
IDSolutions:1.0.0.29
IDSolutions:1.0.0.28
IDSolutions:1.0.0.26
IDSolutions:1.0.0.25
IDSolutions:1.0.0.23
IDSolutions:1.0.0.22
IDSolutions:1.0.0.21
IDSolutions:1.0.0.20
IDSolutions:1.0.0.19
IDSolutions:1.0.0.18
IDSolutions:1.0.0.17
IDSolutions:1.0.0.16
IDSolutions:1.0.0.15
IDSolutions:1.0.0.14
IDSolutions:1.0.0.13
IDSolutions:1.0.0.12
IDSolutions:1.0.0.11
IDSolutions:1.0.0.10
IDSolutions:1.0.0.9
IDSolutions:1.0.0.8
IDSolutions:1.0.0.7
IDSolutions:1.0.0.4
IDSolutions:1.0.0.3
IDSolutions:1.0.0.2
IDSolutions:1.0.0.1

No commits in common. "8e23fdb2e2aee86b0d5b703f999968fd9cf7467c" and "9bbb033437e810331321d7a285b37a65a0bcb315" have entirely different histories.
8e23fdb2e2 ... 9bbb033437

14 changed files with 719 additions and 1668 deletions
Show Stats Expand all files Collapse all files

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

@ -4,57 +4,43 @@
<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="header-content"> <div class="container">
<h1>Admin Panel</h1> <div class="header-content">
<div class="admin-stats"> <h1>Admin Panel</h1>
<div class="stat-item"> <div class="admin-stats">
<div class="stat-icon">👥</div> <div class="stat-item">
<div class="stat-info"> <span>👥</span>
<span class="stat-label">Online Players</span> <div>
<span class="stat-value" id="playerCount">0</span> <div>Online Players</div>
<div id="playerCount">0</div>
</div>
</div> </div>
</div> <div class="stat-item">
<div class="stat-divider"></div> <span>👑</span>
<div class="stat-item"> <div>
<div class="stat-icon">👑</div> <div>Staff Online</div>
<div class="stat-info"> <div id="staffCount">0</div>
<span class="stat-label">Staff Online</span> </div>
<span class="stat-value" id="staffCount">0</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</header> </header> <main class="container">
<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</label> <label for="paydayAmount">Payday Amount</label>
<p class="payday-description">Players will receive money based on their rank</p> <input type="number" id="paydayAmount" min="0" value="1000">
</div> </div>
<button class="submit-btn" onclick="Payday()">Payday</button> <button class="submit-btn" onclick="triggerPayday()">Trigger 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,33 +4,26 @@ let adminData = {
{ {
id: 1, id: 1,
name: "John_Doe", name: "John_Doe",
rank: 5, role: "admin",
money: 50000, money: 50000,
status: "online" status: "online"
}, },
{ {
id: 2, id: 2,
name: "Jane_Smith", name: "Jane_Smith",
rank: 3, role: "mod",
money: 25000, money: 25000,
status: "online" status: "online"
}, },
{ {
id: 3, id: 3,
name: "Mike_Johnson", name: "Mike_Johnson",
rank: 1, role: "player",
money: 10000, money: 10000,
status: "offline" status: "offline"
} }
], ],
paydayAmounts: { paydayAmount: 1000
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;
@ -45,7 +38,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.rank > 1).length; const onlineStaff = adminData.players.filter(p => p.status === "online" && (p.role === "admin" || p.role === "mod")).length;
document.getElementById('playerCount').textContent = onlinePlayers; document.getElementById('playerCount').textContent = onlinePlayers;
document.getElementById('staffCount').textContent = onlineStaff; document.getElementById('staffCount').textContent = onlineStaff;
@ -79,7 +72,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.rank > 1); filteredPlayers = filteredPlayers.filter(p => p.role === 'admin' || p.role === 'moderator');
} }
// Apply search filter // Apply search filter
@ -96,47 +89,53 @@ 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-rank rank-${player.rank}">Rank ${player.rank}</span> <span class="player-role role-${player.role}">${player.role}</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.rank < adminData.maxRank ? ` ${player.role !== 'admin' ? `
<button class="action-btn promote-btn" onclick="promotePlayer(${player.id})"> <button class="action-btn promote-btn" onclick="promotePlayer(${player.id})">
Promote ${player.role === 'player' ? 'Promote to Mod' : 'Promote to Admin'}
</button> </button>
` : ''} ` : ''}
${player.rank > 1 ? ` ${player.role !== 'player' ? `
<button class="action-btn demote-btn" onclick="demotePlayer(${player.id})"> <button class="action-btn demote-btn" onclick="demotePlayer(${player.id})">
Demote ${player.role === 'admin' ? 'Demote to Mod' : 'Demote to Player'}
</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('');
} }
// Rank management functions // Role 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 && player.rank < adminData.maxRank) { if (player) {
player.rank++; if (player.role === 'player') {
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 && player.rank > 1) { if (player) {
player.rank--; if (player.role === 'admin') {
player.role = 'moderator';
} else if (player.role === 'moderator') {
player.role = 'player';
}
updatePlayerList(); updatePlayerList();
} }
} }
@ -215,7 +214,7 @@ function broadcastMessage() {
} }
// Global actions // Global actions
function Payday() { function triggerPayday() {
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 => {

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

@ -4,195 +4,80 @@
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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: var(--background-color); background-color: #f4f4f4;
color: var(--text-primary);
} }
.container { .container {
max-width: 1280px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 20px;
margin-bottom: 1.5rem;
} }
header { header {
background-color: var(--header-bg); background-color: #333;
color: var(--header-text); color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;
} }
.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;
align-items: center; gap: 2rem;
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.75rem; gap: 0.5rem;
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: 1.5rem; gap: 2rem;
padding: 1rem;
} }
.action-sections { .action-sections {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; gap: 2rem;
margin-top: 1.5rem;
} }
.admin-section { .admin-section {
background-color: var(--card-background); background-color: white;
border-radius: 12px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1rem;
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 1; grid-column: span 2;
height: auto; grid-row: span 2;
max-height: calc(100vw / 3);
} }
.player-list { .player-list {
list-style: none; list-style: none;
overflow-y: auto; overflow-y: auto;
flex: 1; flex-grow: 1;
padding-right: 0.5rem; height: 0;
margin-right: -0.5rem; min-height: 400px;
}
/* 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 {
@ -200,22 +85,12 @@ header h1 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background-color: var(--card-background); border-bottom: 1px solid #eee;
border-radius: 8px; transition: background-color 0.3s;
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: var(--tile-hover); background-color: #f8f9fa;
box-shadow: 0 4px 6px var(--shadow-color);
transform: translateY(-2px);
} }
.player-info { .player-info {
@ -226,38 +101,34 @@ header h1 {
} }
.player-name { .player-name {
font-weight: 600; font-weight: 500;
color: var(--text-primary);
} }
.player-role { .player-role {
font-size: 0.75rem; font-size: 0.875rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.025em;
} }
.role-admin { .role-admin {
background-color: var(--error-color); background-color: #dc3545;
color: white; color: white;
} }
.role-mod { .role-mod {
background-color: var(--warning-color); background-color: #ffc107;
color: white; color: black;
} }
.role-player { .role-player {
background-color: var(--success-color); background-color: #28a745;
color: white; color: white;
} }
.player-money { .player-money {
font-size: 0.875rem; font-size: 0.875rem;
color: var(--success-color); color: #28a745;
font-weight: 500;
} }
.player-actions { .player-actions {
@ -267,66 +138,58 @@ header h1 {
.action-btn { .action-btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
border: none; border: none;
border-radius: 4px;
cursor: pointer; cursor: pointer;
font-weight: 500;
transition: background-color 0.3s;
}
.action-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.65;
} }
.promote-btn { .promote-btn {
background-color: #22c55e; background-color: #28a745;
color: white; color: white;
} }
.promote-btn:hover { .promote-btn:hover:not(:disabled) {
background-color: #16a34a; background-color: #218838;
} }
.demote-btn { .demote-btn {
background-color: #ef4444; background-color: #dc3545;
color: white; color: white;
} }
.demote-btn:hover { .demote-btn:hover:not(:disabled) {
background-color: #dc2626; background-color: #c82333;
} }
.message-btn { .message-btn {
background-color: #3b82f6; background-color: #007bff;
color: white; color: white;
} }
.message-btn:hover { .message-btn:hover:not(:disabled) {
background-color: #2563eb; background-color: #0056b3;
} }
.search-bar { .search-bar {
display: flex; display: flex;
flex-direction: column;
gap: 1rem; gap: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1rem;
} }
.search-input { .search-input {
padding: 0.75rem 1rem; flex: 1;
border: 1px solid var(--border-color); padding: 0.5rem;
border-radius: 8px; border: 1px solid #ddd;
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 {
@ -338,54 +201,29 @@ header h1 {
.form-group label { .form-group label {
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: #333;
font-size: 0.875rem;
} }
.form-group input { .form-group input {
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;
}
.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: var(--primary-color); background-color: #007bff;
color: white; color: white;
padding: 0.75rem 1.5rem; padding: 0.75rem 1rem;
border: none; border: none;
border-radius: 8px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: bold;
font-size: 1rem; transition: background-color 0.3s;
transition: all 0.2s ease-in-out;
opacity: 0.9;
margin-top: auto;
} }
.submit-btn:hover { .submit-btn:hover {
background-color: var(--primary-hover); background-color: #0056b3;
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 {
@ -404,25 +242,21 @@ header h1 {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: var(--card-background); background-color: white;
padding: 1.5rem; padding: 2rem;
border-radius: 12px; border-radius: 8px;
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: 1.5rem; margin-bottom: 1rem;
} }
.modal-header h2 { .modal-header h2 {
font-size: 1.25rem; margin: 0;
color: var(--text-primary);
font-weight: 600;
} }
.close-modal { .close-modal {
@ -430,98 +264,50 @@ header h1 {
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: #666;
transition: color 0.2s ease-in-out;
} }
.close-modal:hover { .close-modal:hover {
color: var(--text-primary); color: #333;
} }
.badge { .badge {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-size: 0.75rem; font-size: 0.875rem;
font-weight: 500; font-weight: bold;
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: 0.5rem; gap: 1rem;
margin-bottom: 1rem;
} }
.filter-btn { .filter-btn {
padding: 0.5rem 0.75rem; padding: 0.5rem 1rem;
border: 1px solid var(--border-color); border: none;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
background-color: var(--card-background); background-color: #444;
color: var(--text-secondary); color: white;
font-weight: 500; transition: background-color 0.3s;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
} }
.filter-btn:hover { .filter-btn:hover {
border-color: var(--primary-color); background-color: #666;
color: var(--primary-color);
} }
.filter-btn.active { .filter-btn.active {
background-color: var(--primary-color); background-color: #007bff;
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,30 +4,28 @@
<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="header-content"> <div class="container">
<h1>Federal Deposit Insurance Corporation</h1> <div class="header-content">
<div class="balance-display"> <h1>Federal Deposit Insurance Corporation</h1>
<div class="balance-item"> <div class="balance-display">
<div class="balance-icon">💰</div> <div class="balance-item">
<div class="balance-info"> <span>💰</span>
<span class="balance-label">Wallet Balance</span> <div>
<span class="balance-amount" id="walletBalance">$0</span> <div>Wallet</div>
<div id="walletBalance">$0</div>
</div>
</div> </div>
</div> <div class="balance-item">
<div class="balance-divider"></div> <span>🏦</span>
<div class="balance-item"> <div>
<div class="balance-icon">🏦</div> <div>Account</div>
<div class="balance-info"> <div id="accountBalance">$0</div>
<span class="balance-label">Account Balance</span> </div>
<span class="balance-amount" id="accountBalance">$0</span>
</div> </div>
</div> </div>
</div> </div>

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

@ -4,154 +4,78 @@
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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: var(--background-color); background-color: #f4f4f4;
color: var(--text-primary);
} }
.container { .container {
max-width: 1280px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 20px;
} }
header { header {
background-color: var(--header-bg); background-color: #333;
color: var(--header-text); color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;
} }
.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;
align-items: center; gap: 2rem;
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.75rem; gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s ease-in-out;
min-width: 140px;
}
.balance-item:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 4px;
} }
.balance-icon { .balance-item i {
display: flex; font-size: 1.2rem;
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(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem; gap: 2rem;
margin-top: 1.5rem; padding: 1rem;
} }
.action-tile { .action-tile {
background-color: var(--card-background); background-color: white;
border-radius: 12px; border-radius: 8px;
overflow: hidden; overflow: hidden;
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; transition: transform 0.3s;
border: none; aspect-ratio: 1;
padding: 1.5rem; padding: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1rem;
aspect-ratio: 1 / 1;
} }
.action-tile:hover { .action-tile:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); transform: translateY(-5px);
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.25rem; font-size: 1.5rem;
color: var(--text-primary); color: #333;
font-weight: 600; margin-bottom: 1rem;
} }
.form-group { .form-group {
@ -162,118 +86,44 @@ header h1 {
} }
.form-group label { .form-group label {
font-weight: 500; font-weight: bold;
color: var(--text-secondary); color: #555;
font-size: 0.875rem;
} }
.form-group input, .form-group select { .form-group input, .form-group select {
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;
}
.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: var(--primary-color); background-color: #007bff;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 4px;
padding: 0.75rem 1.5rem; padding: 0.75rem 1rem;
font-size: 1rem; font-size: 1rem;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease-in-out; transition: background-color 0.3s;
opacity: 0.9;
margin-top: auto; margin-top: auto;
} }
.submit-btn:hover { .submit-btn:hover {
background-color: var(--primary-hover); background-color: #0056b3;
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-color: var(--card-background); background: white;
border-radius: 12px; border-radius: 8px;
overflow: hidden; padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); margin-top: 2rem;
transition: all 0.3s ease-in-out; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
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;
overflow-y: auto; margin-top: 1rem;
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 {
@ -281,56 +131,33 @@ header h1 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background-color: var(--card-background); border-bottom: 1px solid #eee;
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 {
margin-bottom: 0; border-bottom: none;
}
.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: 500; font-weight: bold;
color: var(--text-primary);
}
.transaction-details {
color: var(--text-secondary);
font-size: 0.875rem;
} }
.amount-positive { .amount-positive {
color: var(--success-color); color: #28a745;
font-weight: 500;
} }
.amount-negative { .amount-negative {
color: var(--error-color); color: #dc3545;
font-weight: 500;
} }
.error-message { .error-message {
color: var(--error-color); color: #dc3545;
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.success-message { .success-message {
color: var(--success-color); color: #28a745;
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,30 +4,28 @@
<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="header-content"> <div class="container">
<h1>Garage</h1> <div class="header-content">
<div class="garage-stats"> <h1>Garage</h1>
<div class="stat-item"> <div class="garage-stats">
<div class="stat-icon">🚗</div> <div class="stat-item">
<div class="stat-info"> <i>🚗</i>
<span class="stat-label">Vehicles</span> <div>
<span class="stat-value" id="vehicleCount">0</span> <div>Vehicles</div>
<div id="vehicleCount">0</div>
</div>
</div> </div>
</div> <div class="stat-item">
<div class="stat-divider"></div> <i>🔧</i>
<div class="stat-item"> <div>
<div class="stat-icon">🔧</div> <div>In Maintenance</div>
<div class="stat-info"> <div id="maintenanceCount">0</div>
<span class="stat-label">Maintenance</span> </div>
<span class="stat-value" id="maintenanceCount">0</span>
</div> </div>
</div> </div>
</div> </div>

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

@ -4,182 +4,79 @@
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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: var(--background-color); background-color: #f4f4f4;
color: var(--text-primary);
} }
.container { .container {
max-width: 1280px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 20px;
margin-bottom: 1.5rem;
} }
header { header {
background-color: var(--header-bg); background-color: #333;
color: var(--header-text); color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;
} }
.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;
align-items: center; gap: 2rem;
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.75rem; gap: 0.5rem;
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(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem; gap: 2rem;
margin-top: 1.5rem; padding: 1rem;
} }
.vehicle-card { .vehicle-card {
background-color: var(--card-background); background-color: white;
border-radius: 12px; border-radius: 8px;
overflow: hidden; overflow: hidden;
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; transition: transform 0.3s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: none;
aspect-ratio: 1 / 1;
} }
.vehicle-card:hover { .vehicle-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); transform: translateY(-5px);
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: 50%; height: 200px;
background-color: var(--secondary-color); background-color: #eee;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.vehicle-info { .vehicle-info {
padding: 1rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 1rem;
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 {
@ -189,144 +86,132 @@ header h1 {
} }
.vehicle-name { .vehicle-name {
font-size: 0.85rem; font-size: 1.2rem;
font-weight: 600; font-weight: bold;
color: var(--text-primary); color: #333;
} }
.vehicle-status { .vehicle-status {
font-size: 0.6rem; font-size: 0.875rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.025em;
} }
.status-available { .status-available {
background-color: var(--success-color); background-color: #28a745;
color: white; color: white;
} }
.status-in-use { .status-in-use {
background-color: var(--error-color); background-color: #dc3545;
color: white; color: white;
} }
.status-maintenance { .status-maintenance {
background-color: var(--warning-color); background-color: #ffc107;
color: white; color: black;
} }
.vehicle-details { .vehicle-details {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; gap: 1rem;
} }
.detail-item { .detail-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.125rem; gap: 0.25rem;
} }
.detail-label { .detail-label {
font-size: 0.6rem; font-size: 0.875rem;
color: var(--text-secondary); color: #666;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
} }
.detail-value { .detail-value {
font-size: 0.7rem; font-weight: bold;
font-weight: 600; color: #333;
color: var(--text-primary);
} }
.vehicle-actions { .vehicle-actions {
display: flex; display: flex;
gap: 0.75rem; gap: 1rem;
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: 8px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: bold;
font-size: 0.7rem; transition: background-color 0.3s;
transition: all 0.2s ease-in-out;
opacity: 0.9;
}
.action-btn:hover {
opacity: 1;
} }
.spawn-btn { .spawn-btn {
background-color: var(--primary-color); background-color: #007bff;
color: white; color: white;
} }
.spawn-btn:hover:not(:disabled) { .spawn-btn:hover {
background-color: var(--primary-hover); background-color: #0056b3;
} }
.spawn-btn:disabled { .spawn-btn:disabled {
background-color: var(--text-secondary); background-color: #6c757d;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.65;
}
.spawn-btn:disabled:hover {
background-color: #6c757d;
} }
.maintain-btn { .maintain-btn {
background-color: var(--warning-color); background-color: #ffc107;
color: white; color: black;
} }
.maintain-btn:hover:not(:disabled) { .maintain-btn:hover {
background-color: var(--warning-hover); background-color: #d39e00;
} }
.category-filters { .category-filters {
display: flex; display: flex;
gap: 0.75rem; gap: 1rem;
margin-top: 1.5rem; margin-bottom: 2rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-btn { .filter-btn {
padding: 0.5rem 0.75rem; padding: 0.5rem 1rem;
border: 1px solid var(--border-color); border: none;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
background-color: var(--card-background); background-color: #444;
color: var(--text-secondary); color: white;
font-weight: 500; transition: background-color 0.3s;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
} }
.filter-btn:hover { .filter-btn:hover {
border-color: var(--primary-color); background-color: #666;
color: var(--primary-color);
} }
.filter-btn.active { .filter-btn.active {
background-color: var(--primary-color); background-color: #007bff;
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: var(--text-secondary); color: #666;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500;
} }
.stat-dot { .stat-dot {
@ -336,13 +221,13 @@ header h1 {
} }
.stat-green { .stat-green {
background-color: var(--success-color); background-color: #28a745;
} }
.stat-yellow { .stat-yellow {
background-color: var(--warning-color); background-color: #ffc107;
} }
.stat-red { .stat-red {
background-color: var(--error-color); background-color: #dc3545;
} }

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

@ -4,30 +4,28 @@
<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="header-content"> <div class="container">
<h1>Locker</h1> <div class="header-content">
<div class="storage-stats"> <h1>Locker</h1>
<div class="stat-item"> <div class="storage-stats">
<div class="stat-icon">📦</div> <div class="stat-item">
<div class="stat-info"> <span>📦</span>
<span class="stat-label">Storage Space</span> <div>
<span class="stat-value" id="storageSpace">0/100</span> <div>Storage Space</div>
<div id="storageSpace">0/100</div>
</div>
</div> </div>
</div> <div class="stat-item">
<div class="stat-divider"></div> <span>🎒</span>
<div class="stat-item"> <div>
<div class="stat-icon">🎒</div> <div>Items Stored</div>
<div class="stat-info"> <div id="itemCount">0</div>
<span class="stat-label">Items Stored</span> </div>
<span class="stat-value" id="itemCount">0</span>
</div> </div>
</div> </div>
</div> </div>
@ -46,9 +44,7 @@
<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">
<div class="section-header"> <h2>Current Equipment</h2>
<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>
@ -56,13 +52,22 @@
<!-- Storage Section --> <!-- Storage Section -->
<div class="equipment-section stored-equipment"> <div class="equipment-section stored-equipment">
<div class="section-header"> <h2>Stored Equipment</h2>
<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>

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

@ -4,215 +4,98 @@
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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: var(--background-color); background-color: #f4f4f4;
color: var(--text-primary);
} }
.container { .container {
max-width: 1280px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 20px;
margin-bottom: 1.5rem;
} }
header { header {
background-color: var(--header-bg); background-color: #333;
color: var(--header-text); color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;
} }
.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;
align-items: center; gap: 2rem;
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.75rem; gap: 0.5rem;
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(2, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; grid-template-rows: auto auto;
margin-top: 1.5rem; gap: 2rem;
padding: 1rem;
min-height: calc(100vh - 200px); /* Account for header and padding */
} }
.equipment-section { .equipment-section {
background-color: var(--card-background); background-color: white;
border-radius: 12px; border-radius: 8px;
overflow: hidden; overflow: hidden;
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; transition: transform 0.3s;
padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: none; gap: 1rem;
aspect-ratio: 1 / 1; max-height: 100%;
} }
.equipment-section:hover { .equipment-section h2 {
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;
padding: 1.25rem 1.5rem; gap: 0.5rem;
border-bottom: 1px solid var(--border-color); font-size: 1.2rem;
background-color: rgba(241, 245, 249, 0.5); color: #333;
}
.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 {
flex: 1; list-style: none;
overflow-y: auto; overflow-y: auto;
padding: 0.75rem 1rem; flex-grow: 1;
} 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.875rem 1rem; padding: 0.75rem;
border-radius: 6px; border-bottom: 1px solid #eee;
transition: all 0.2s ease-in-out; transition: background-color 0.3s;
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: var(--background-color); background-color: #f8f9fa;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.equipment-item:last-child { .equipment-item:last-child {
margin-bottom: 0; border-bottom: none;
} }
.item-info { .item-info {
@ -223,27 +106,19 @@ header h1 {
.item-name { .item-name {
font-weight: 500; font-weight: 500;
color: var(--text-primary);
} }
.item-type { .item-type {
font-size: 0.75rem; font-size: 0.875rem;
color: var(--text-secondary); color: #666;
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.75rem; font-size: 0.875rem;
color: var(--success-color); color: #28a745;
background: rgba(22, 163, 74, 0.1); background: rgba(40, 167, 69, 0.1);
padding: 0.25rem 0.5rem; padding: 0.2rem 0.5rem;
border-radius: 4px; border-radius: 4px;
font-weight: 500;
} }
.item-actions { .item-actions {
@ -252,97 +127,68 @@ header h1 {
} }
.action-btn { .action-btn {
padding: 0.5rem 0.75rem; padding: 0.5rem 1rem;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: bold;
font-size: 0.875rem; transition: background-color 0.3s;
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: var(--primary-color); background-color: #007bff;
color: white; color: white;
} }
.store-btn:hover:not(:disabled) { .store-btn:hover {
background-color: var(--primary-hover); background-color: #0056b3;
} }
.equip-btn { .equip-btn {
background-color: var(--success-color); background-color: #28a745;
color: white; color: white;
} }
.equip-btn:hover:not(:disabled) { .equip-btn:hover {
background-color: var(--success-hover); background-color: #218838;
} }
.action-btn:disabled { .equip-btn:disabled {
background-color: var(--text-secondary); background-color: #6c757d;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.65;
}
.equipment-section.player-equipment {
grid-column: span 1;
}
.equipment-section.stored-equipment {
grid-column: span 1;
}
.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 { .category-filters {
display: flex; display: flex;
gap: 0.75rem; gap: 1rem;
margin-top: 1.5rem; margin-bottom: 2rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-btn { .filter-btn {
padding: 0.5rem 0.75rem; padding: 0.5rem 1rem;
border: 1px solid var(--border-color); border: none;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
background-color: var(--card-background); background-color: #444;
color: var(--text-secondary); color: white;
font-weight: 500; transition: background-color 0.3s;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
} }
.filter-btn:hover { .filter-btn:hover {
border-color: var(--primary-color); background-color: #666;
color: var(--primary-color);
} }
.filter-btn.active { .filter-btn.active {
background-color: var(--primary-color); background-color: #007bff;
color: white; }
border-color: var(--primary-color);
.equipment-section.player-equipment {
grid-column: span 2;
}
.equipment-section.stored-equipment {
grid-column: span 1;
grid-row: span 2;
} }

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

@ -4,30 +4,28 @@
<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="header-content"> <div class="container">
<h1 id="orgName">Organization Name</h1> <div class="header-content">
<div class="org-stats"> <h1 id="orgName">Organization Name</h1>
<div class="stat-item"> <div class="org-stats">
<div class="stat-icon">⭐</div> <div class="stat-item">
<div class="stat-info"> <span>⭐</span>
<span class="stat-label">Reputation</span> <div>
<span class="stat-value" id="orgReputation">0</span> <div>Reputation</div>
<div id="orgReputation">0</div>
</div>
</div> </div>
</div> <div class="stat-item">
<div class="stat-divider"></div> <span>💰</span>
<div class="stat-item"> <div>
<div class="stat-icon">💰</div> <div>Funds</div>
<div class="stat-info"> <div id="orgFunds">$0</div>
<span class="stat-label">Funds</span> </div>
<span class="stat-value" id="orgFunds">$0</span>
</div> </div>
</div> </div>
</div> </div>
@ -58,32 +56,28 @@
<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> </div> <!-- Properties Section -->
<!-- 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> </div> <!-- Supplies Section -->
<!-- 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> </div> <!-- Transactions Section -->
<!-- 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> </div> <!-- Memos Section -->
<!-- Memos Section -->
<div class="section-tile memo-section"> <div class="section-tile memo-section">
<div class="section-header"> <h2>Memos & Logs</h2>
<h2>Memos & Logs</h2> <div class="memo-controls">
<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">

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

@ -13,8 +13,7 @@ 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 },
@ -119,12 +118,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,27 +163,29 @@ function updateAssets() {
function updateTransactions() { function updateTransactions() {
const transactionsList = document.getElementById('transactionsList'); const transactionsList = document.getElementById('transactionsList');
transactionsList.innerHTML = ''; transactionsList.innerHTML = '';
// Sort transactions by date (newest first) orgData.transactions.forEach(transaction => {
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 amount = parseFloat(transaction.amount); const date = new Date(transaction.date);
const isPositive = amount >= 0; const formattedDate = date.toLocaleDateString('en-US', {
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 class="transaction-type">${transaction.type}</div> <div>${transaction.description}</div>
<div class="transaction-details">${transaction.description}</div> <div class="transaction-date">${formattedDate}</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);

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

@ -1,18 +1,3 @@
: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;
@ -20,318 +5,267 @@
} }
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: var(--bg-color); background-color: #f4f4f4;
color: var(--text-color);
} }
.container { .container {
max-width: 1280px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 20px;
margin-bottom: 1.5rem;
} }
header { header {
background-color: var(--header-bg); background-color: #333;
color: var(--header-text); color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 1px 3px var(--shadow-color); margin-bottom: 2rem;
} }
.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;
align-items: center; gap: 2rem;
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.75rem; gap: 0.5rem;
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 { .stat-item i {
display: flex; font-size: 1.2rem;
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-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem; gap: 2rem;
margin-top: 1.5rem; padding: 1rem;
}
.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;
padding: 1.5rem; aspect-ratio: unset;
height: auto; min-height: 400px;
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 {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); transform: translateY(-5px);
transform: translateY(-4px);
} }
.section-tile:active { .section-tile h2 {
transform: translateY(-2px); font-size: 1.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: #333;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
} }
.section-header { .member-list, .asset-list {
list-style: none;
overflow-y: auto;
flex-grow: 1;
}
.member-item, .asset-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; padding: 0.75rem;
border-bottom: 1px solid #eee;
} }
h2 { .member-item:last-child, .asset-item:last-child {
font-size: 1.125rem; border-bottom: none;
font-weight: 600;
color: var(--text-color);
} }
.member-list, .member-info, .asset-info {
.asset-list,
.transaction-list,
.memo-list {
list-style: none;
overflow-y: auto;
flex: 1;
padding-right: 0.5rem;
margin-right: -0.5rem;
}
.member-item,
.asset-item,
.transaction-item,
.memo-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 1rem; gap: 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-item:last-child, .member-role {
.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;
color: #64748b; padding: 0.25rem 0.5rem;
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: 1.5rem; margin-bottom: 1rem;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.add-btn { .memo-list {
background-color: var(--accent-color); list-style: none;
color: white; overflow-y: auto;
border: none; flex-grow: 1;
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;
padding: 1rem; gap: 0.5rem;
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:hover { .memo-item:last-child {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-bottom: none;
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: 600; font-weight: bold;
font-size: 1rem; color: #333;
color: var(--text-color);
} }
.memo-metadata { .memo-metadata {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
font-size: 0.75rem; font-size: 0.8rem;
color: #64748b; color: #666;
align-items: center;
} }
.memo-author { .memo-author {
font-weight: 500; color: #007bff;
color: var(--accent-color);
}
.memo-date {
color: #94a3b8;
} }
.memo-content { .memo-content {
font-size: 0.875rem; color: #444;
line-height: 1.5; line-height: 1.4;
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: var(--tile-bg); background: white;
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px var(--shadow-color); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
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 {
@ -340,7 +274,7 @@ h2 {
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;
} }
@ -350,143 +284,76 @@ h2 {
gap: 1rem; gap: 1rem;
} }
.memo-form input, .memo-form input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}
.memo-form textarea { .memo-form textarea {
width: 100%; width: 100%;
padding: 0.75rem; min-height: 100px;
border: 1px solid var(--tile-border); padding: 0.5rem;
border-radius: 6px; border: 1px solid #ddd;
font-family: 'Inter', sans-serif; border-radius: 4px;
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 {
min-height: 120px;
resize: vertical; resize: vertical;
} }
.memo-form-buttons { .memo-form-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 1rem;
margin-top: 0.5rem;
} }
.cancel-btn { .cancel-btn {
background-color: #e2e8f0; width: 100%;
color: #475569; background-color: #6c757d;
color: white;
border: none; border: none;
padding: 0.5rem 1rem; border-radius: 4px;
border-radius: 6px; padding: 0.75rem 1rem;
font-weight: 500; font-size: 1rem;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.3s;
} }
.cancel-btn:hover { .add-btn {
background-color: #cbd5e1; border: none;
border-radius: 4px;
padding: 0.75rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
} }
.submit-btn { .submit-btn {
background-color: var(--accent-color); width: 100%;
background-color: #007bff;
color: white; color: white;
border: none; border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
opacity: 0.9;
}
.submit-btn:hover {
background-color: var(--accent-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);
}
.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; border-radius: 4px;
padding: 0.75rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
} }
.amount-positive { .cancel-btn:hover {
color: var(--success-color); background-color: #5a6268;
background-color: rgba(34, 197, 94, 0.1);
} }
.amount-negative { .member-status {
color: var(--error-color); width: 8px;
background-color: rgba(239, 68, 68, 0.1); height: 8px;
border-radius: 50%;
margin-right: 0.5rem;
} }
/* Customize scrollbar for webkit browsers */ .status-online {
.member-list::-webkit-scrollbar, background-color: #28a745;
.asset-list::-webkit-scrollbar,
.transaction-list::-webkit-scrollbar,
.memo-list::-webkit-scrollbar {
width: 6px;
} }
.member-list::-webkit-scrollbar-track, .status-offline {
.asset-list::-webkit-scrollbar-track, background-color: #dc3545;
.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,20 +4,19 @@
<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="header-content"> <div class="container">
<h1>General Military Surplus</h1> <div class="header-content">
<div class="payment-method"> <h1>General Military Surplus</h1>
<select id="paymentMethod" class="payment-select" aria-label="Select Payment Method"> <div class="payment-method">
<option value="" disabled selected>Select Payment Method</option> <select id="paymentMethod" class="payment-select">
</select> <option value="" disabled selected>Select Payment Method</option>
</select>
</div>
</div> </div>
</div> </div>
</header> </header>

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

@ -4,337 +4,197 @@
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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: var(--background-color); background-color: #f4f4f4;
color: var(--text-primary);
} }
.container { .container {
max-width: 1280px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 20px;
margin-bottom: 1.5rem;
} }
header { header {
background-color: var(--header-bg); background-color: #333;
color: var(--header-text); color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;
margin-bottom: 1.5rem;
} }
header h1 { header h1 {
font-size: 1.75rem; text-align: center;
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(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem; gap: 2rem;
padding: 1rem;
margin-bottom: 2rem;
} }
.category-tile, .subcategory-tile { .category-tile, .subcategory-tile {
background-color: var(--card-background); background-color: #444;
color: var(--text-primary); color: white;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease-in-out; transition: all 0.3s;
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: 1.5rem; padding: 1rem;
font-size: 1.25rem; font-size: 1.3rem;
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 {
transform: translateY(-4px); background-color: #666;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); transform: translateY(-5px);
}
.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: var(--primary-color); background-color: #007bff;
color: white;
border-color: var(--primary-color);
} }
.category-tile i, .subcategory-tile i { .category-tile i, .subcategory-tile i {
font-size: 2.5rem; font-size: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--primary-color);
} }
.back-button { .back-button {
background-color: var(--card-background); background-color: #444;
color: var(--text-primary); color: white;
border: 1px solid var(--border-color); border: none;
border-radius: 8px; border-radius: 4px;
padding: 0.75rem 1.25rem; padding: 0.5rem 1rem;
cursor: pointer; cursor: pointer;
margin-bottom: 0.5rem; margin-bottom: 1rem;
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: var(--background-color); background-color: #666;
border-color: var(--primary-color);
color: var(--primary-color);
} }
.products-grid { .products-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem; gap: 2rem;
/* padding: 1rem; */ padding: 1rem;
} }
.product-card { .product-card {
background-color: var(--card-background); background-color: white;
border-radius: 12px; border-radius: 8px;
overflow: hidden; overflow: hidden;
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; transition: transform 0.3s;
border: none;
display: flex;
flex-direction: column;
aspect-ratio: 1 / 1;
} }
.product-card:hover { .product-card:hover {
transform: translateY(-4px); transform: translateY(-5px);
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: 50%; height: 256px;
object-fit: cover; object-fit: cover;
background-color: var(--secondary-color); background-color: #eee;
} }
.product-info { .product-info {
padding: 1.25rem; padding: 1rem;
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.25rem; font-size: 1.2rem;
color: var(--primary-color); color: #007bff;
font-weight: 700; font-weight: bold;
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.75rem 1rem; padding: 0.5rem;
border-radius: 8px; border-radius: 4px;
background-color: var(--card-background); background-color: white;
border: 1px solid var(--border-color); border: 1px solid #ddd;
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: auto; margin-top: 1rem;
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--border-color); border-top: 1px solid #eee;
} }
.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: var(--primary-color); background-color: #007bff;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
width: 28px; width: 30px;
height: 28px; height: 30px;
font-size: 1rem; font-size: 1.2rem;
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: var(--primary-hover); background-color: #0056b3;
opacity: 1;
} }
.quantity-display { .quantity-display {
font-size: 0.9rem; font-size: 1.1rem;
min-width: 32px; min-width: 40px;
text-align: center; text-align: center;
font-weight: 600;
color: var(--text-primary);
} }
.buy-btn { .buy-btn {
flex: 1; flex: 1;
background-color: var(--success-color); background-color: #28a745;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
padding: 0.75rem; padding: 0.5rem 1rem;
font-size: 0.9rem; font-size: 1rem;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease-in-out; transition: background-color 0.3s;
opacity: 0.9;
} }
.buy-btn:hover { .buy-btn:hover {
background-color: var(--success-hover); background-color: #218838;
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.buy-btn:disabled { .buy-btn:disabled {
background-color: var(--text-secondary); background-color: #6c757d;
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;
} }