Global Actions
-
-
+
+
-
+
+ Players will receive money based on their rank
+
diff --git a/addons/admin/ui/_site/script.js b/addons/admin/ui/_site/script.js
index 9dc0b9c..dd03a61 100644
--- a/addons/admin/ui/_site/script.js
+++ b/addons/admin/ui/_site/script.js
@@ -4,26 +4,33 @@ let adminData = {
{
id: 1,
name: "John_Doe",
- role: "admin",
+ rank: 5,
money: 50000,
status: "online"
},
{
id: 2,
name: "Jane_Smith",
- role: "mod",
+ rank: 3,
money: 25000,
status: "online"
},
{
id: 3,
name: "Mike_Johnson",
- role: "player",
+ rank: 1,
money: 10000,
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;
@@ -38,7 +45,7 @@ function initializeAdmin() {
// Update header statistics
function updateStats() {
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('staffCount').textContent = onlineStaff;
@@ -72,7 +79,7 @@ function filterPlayers(filter, searchTerm = '') {
if (filter === 'online') {
filteredPlayers = filteredPlayers.filter(p => p.status === 'online');
} else if (filter === 'staff') {
- filteredPlayers = filteredPlayers.filter(p => p.role === 'admin' || p.role === 'moderator');
+ filteredPlayers = filteredPlayers.filter(p => p.rank > 1);
}
// Apply search filter
@@ -89,53 +96,47 @@ function filterPlayers(filter, searchTerm = '') {
// Update the player list display
function updatePlayerList(players = adminData.players) {
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 `
Give All Money
+
+
+
+
+
${player.name}
- ${player.role}
- ${player.status}
+ Rank ${player.rank}
$${player.money.toLocaleString()}
+ Payday: $${paydayAmount.toLocaleString()}
- ${player.role !== 'admin' ? `
+ ${player.rank < adminData.maxRank ? `
` : ''}
- ${player.role !== 'player' ? `
+ ${player.rank > 1 ? `
` : ''}
-
-
Federal Deposit Insurance Corporation
-
-
- 💰
-
-
+ Wallet
- $0
-
+
Federal Deposit Insurance Corporation
+
+ FORGE - Garage
+
+
+
-
+
+
diff --git a/addons/bank/ui/_site/styles.css b/addons/bank/ui/_site/styles.css
index 1486173..5386e8c 100644
--- a/addons/bank/ui/_site/styles.css
+++ b/addons/bank/ui/_site/styles.css
@@ -4,78 +4,154 @@
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 {
- font-family: Arial, sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
- background-color: #f4f4f4;
+ background-color: var(--background-color);
+ color: var(--text-primary);
}
.container {
- max-width: 1200px;
+ max-width: 1280px;
margin: 0 auto;
- padding: 20px;
+ padding: 0 1rem;
}
header {
- background-color: #333;
- color: white;
+ background-color: var(--header-bg);
+ color: var(--header-text);
padding: 1rem 0;
- margin-bottom: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
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 {
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);
}
.balance-item {
display: flex;
align-items: center;
- gap: 0.5rem;
- background: rgba(255, 255, 255, 0.1);
- padding: 0.5rem 1rem;
- border-radius: 4px;
+ gap: 0.75rem;
+ padding: 0.5rem 0.75rem;
+ border-radius: 6px;
+ transition: all 0.2s ease-in-out;
+ min-width: 140px;
}
-.balance-item i {
- font-size: 1.2rem;
+.balance-item:hover {
+ 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 {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 2rem;
- padding: 1rem;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1.5rem;
}
.action-tile {
- background-color: white;
- border-radius: 8px;
+ background-color: var(--card-background);
+ border-radius: 12px;
overflow: hidden;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- transition: transform 0.3s;
- aspect-ratio: 1;
- padding: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease-in-out;
+ border: none;
+ padding: 1.5rem;
display: flex;
flex-direction: column;
- gap: 1rem;
+ gap: 1.5rem;
+ aspect-ratio: 1 / 1;
}
.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 {
- font-size: 1.5rem;
- color: #333;
- margin-bottom: 1rem;
+ font-size: 1.25rem;
+ color: var(--text-primary);
+ font-weight: 600;
}
.form-group {
@@ -86,44 +162,118 @@ header {
}
.form-group label {
- font-weight: bold;
- color: #555;
+ font-weight: 500;
+ color: var(--text-secondary);
+ font-size: 0.875rem;
}
.form-group input, .form-group select {
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
+ padding: 0.75rem 1rem;
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
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 {
- background-color: #007bff;
+ background-color: var(--primary-color);
color: white;
border: none;
- border-radius: 4px;
- padding: 0.75rem 1rem;
+ border-radius: 8px;
+ padding: 0.75rem 1.5rem;
font-size: 1rem;
+ font-weight: 500;
cursor: pointer;
- transition: background-color 0.3s;
+ transition: all 0.2s ease-in-out;
+ opacity: 0.9;
margin-top: auto;
}
.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 {
- background: white;
- border-radius: 8px;
- padding: 2rem;
- margin-top: 2rem;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ background-color: var(--card-background);
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ 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 {
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 {
@@ -131,33 +281,56 @@ header {
justify-content: space-between;
align-items: center;
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 {
- 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 {
- font-weight: bold;
+ font-weight: 500;
+ color: var(--text-primary);
+}
+
+.transaction-details {
+ color: var(--text-secondary);
+ font-size: 0.875rem;
}
.amount-positive {
- color: #28a745;
+ color: var(--success-color);
+ font-weight: 500;
}
.amount-negative {
- color: #dc3545;
+ color: var(--error-color);
+ font-weight: 500;
}
.error-message {
- color: #dc3545;
+ color: var(--error-color);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.success-message {
- color: #28a745;
+ color: var(--success-color);
font-size: 0.875rem;
margin-top: 0.25rem;
}
diff --git a/addons/garage/ui/_site/index.html b/addons/garage/ui/_site/index.html
index 1d73626..9e7a6dd 100644
--- a/addons/garage/ui/_site/index.html
+++ b/addons/garage/ui/_site/index.html
@@ -4,28 +4,30 @@
+ Wallet Balance
+ $0
-
- 🏦
-
+
+
-
+ Account
- $0
-
+
+
+ Account Balance
+ $0
-
-
Garage
-
-
- 🚗
-
-
+ Vehicles
- 0
-
+
Garage
+
+ FORGE - Locker
+
+
+
-
+
+
diff --git a/addons/garage/ui/_site/styles.css b/addons/garage/ui/_site/styles.css
index 8411181..9c88c52 100644
--- a/addons/garage/ui/_site/styles.css
+++ b/addons/garage/ui/_site/styles.css
@@ -4,79 +4,182 @@
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 {
- font-family: Arial, sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
- background-color: #f4f4f4;
+ background-color: var(--background-color);
+ color: var(--text-primary);
}
.container {
- max-width: 1200px;
+ max-width: 1280px;
margin: 0 auto;
- padding: 20px;
+ padding: 0 1rem;
+ margin-bottom: 1.5rem;
}
header {
- background-color: #333;
- color: white;
+ background-color: var(--header-bg);
+ color: var(--header-text);
padding: 1rem 0;
- margin-bottom: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
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 {
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 {
display: flex;
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);
- 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 {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 2rem;
- padding: 1rem;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1.5rem;
}
.vehicle-card {
- background-color: white;
- border-radius: 8px;
+ background-color: var(--card-background);
+ border-radius: 12px;
overflow: hidden;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- transition: transform 0.3s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease-in-out;
display: flex;
flex-direction: column;
+ border: none;
+ aspect-ratio: 1 / 1;
}
.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 {
width: 100%;
- height: 200px;
- background-color: #eee;
+ height: 50%;
+ background-color: var(--secondary-color);
background-size: cover;
background-position: center;
}
.vehicle-info {
- padding: 1.5rem;
+ padding: 1rem;
display: flex;
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 {
@@ -86,132 +189,144 @@ header {
}
.vehicle-name {
- font-size: 1.2rem;
- font-weight: bold;
- color: #333;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--text-primary);
}
.vehicle-status {
- font-size: 0.875rem;
+ font-size: 0.6rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
- font-weight: bold;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.025em;
}
.status-available {
- background-color: #28a745;
+ background-color: var(--success-color);
color: white;
}
.status-in-use {
- background-color: #dc3545;
+ background-color: var(--error-color);
color: white;
}
.status-maintenance {
- background-color: #ffc107;
- color: black;
+ background-color: var(--warning-color);
+ color: white;
}
.vehicle-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
- gap: 1rem;
+ gap: 0.75rem;
}
.detail-item {
display: flex;
flex-direction: column;
- gap: 0.25rem;
+ gap: 0.125rem;
}
.detail-label {
- font-size: 0.875rem;
- color: #666;
+ font-size: 0.6rem;
+ color: var(--text-secondary);
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.025em;
}
.detail-value {
- font-weight: bold;
- color: #333;
+ font-size: 0.7rem;
+ font-weight: 600;
+ color: var(--text-primary);
}
.vehicle-actions {
display: flex;
- gap: 1rem;
+ gap: 0.75rem;
margin-top: auto;
- padding-top: 1rem;
- border-top: 1px solid #eee;
}
.action-btn {
flex: 1;
padding: 0.75rem;
border: none;
- border-radius: 4px;
+ border-radius: 8px;
cursor: pointer;
- font-weight: bold;
- transition: background-color 0.3s;
+ font-weight: 500;
+ font-size: 0.7rem;
+ transition: all 0.2s ease-in-out;
+ opacity: 0.9;
+}
+
+.action-btn:hover {
+ opacity: 1;
}
.spawn-btn {
- background-color: #007bff;
+ background-color: var(--primary-color);
color: white;
}
-.spawn-btn:hover {
- background-color: #0056b3;
+.spawn-btn:hover:not(:disabled) {
+ background-color: var(--primary-hover);
}
.spawn-btn:disabled {
- background-color: #6c757d;
+ background-color: var(--text-secondary);
cursor: not-allowed;
- opacity: 0.65;
-}
-
-.spawn-btn:disabled:hover {
- background-color: #6c757d;
+ opacity: 0.5;
}
.maintain-btn {
- background-color: #ffc107;
- color: black;
+ background-color: var(--warning-color);
+ color: white;
}
-.maintain-btn:hover {
- background-color: #d39e00;
+.maintain-btn:hover:not(:disabled) {
+ background-color: var(--warning-hover);
}
.category-filters {
display: flex;
- gap: 1rem;
- margin-bottom: 2rem;
+ gap: 0.75rem;
+ margin-top: 1.5rem;
flex-wrap: wrap;
}
.filter-btn {
- padding: 0.5rem 1rem;
- border: none;
- border-radius: 4px;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
cursor: pointer;
- background-color: #444;
- color: white;
- transition: background-color 0.3s;
+ 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 {
- background-color: #666;
+ border-color: var(--primary-color);
+ color: var(--primary-color);
}
.filter-btn.active {
- background-color: #007bff;
+ background-color: var(--primary-color);
+ color: white;
+ border-color: var(--primary-color);
}
.vehicle-stats {
display: flex;
gap: 0.5rem;
align-items: center;
- color: #666;
+ color: var(--text-secondary);
font-size: 0.875rem;
+ font-weight: 500;
}
.stat-dot {
@@ -221,13 +336,13 @@ header {
}
.stat-green {
- background-color: #28a745;
+ background-color: var(--success-color);
}
.stat-yellow {
- background-color: #ffc107;
+ background-color: var(--warning-color);
}
.stat-red {
- background-color: #dc3545;
+ background-color: var(--error-color);
}
diff --git a/addons/locker/ui/_site/index.html b/addons/locker/ui/_site/index.html
index beeca72..ac6e7cb 100644
--- a/addons/locker/ui/_site/index.html
+++ b/addons/locker/ui/_site/index.html
@@ -4,28 +4,30 @@
+ Vehicles
+ 0
-
- 🔧
-
+
+
-
+ In Maintenance
- 0
-
+
+
+ Maintenance
+ 0
-
-
Locker
-
-
- 📦
-
-
+ Storage Space
- 0/100
-
+
Locker
+
+
FORGE - ORG
+
+
+
-
-
+
+
@@ -44,7 +46,9 @@
+ Storage Space
+ 0/100
-
- 🎒
-
+
+
-
+ Items Stored
- 0
-
+
+
+ Items Stored
+ 0
-
@@ -52,22 +56,13 @@
diff --git a/addons/locker/ui/_site/styles.css b/addons/locker/ui/_site/styles.css
index eb5a7ab..07129fb 100644
--- a/addons/locker/ui/_site/styles.css
+++ b/addons/locker/ui/_site/styles.css
@@ -4,98 +4,215 @@
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 {
- font-family: Arial, sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
- background-color: #f4f4f4;
+ background-color: var(--background-color);
+ color: var(--text-primary);
}
.container {
- max-width: 1200px;
+ max-width: 1280px;
margin: 0 auto;
- padding: 20px;
+ padding: 0 1rem;
+ margin-bottom: 1.5rem;
}
header {
- background-color: #333;
- color: white;
+ background-color: var(--header-bg);
+ color: var(--header-text);
padding: 1rem 0;
- margin-bottom: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
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 {
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 {
display: flex;
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);
- 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 {
display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: auto auto;
- gap: 2rem;
- padding: 1rem;
- min-height: calc(100vh - 200px); /* Account for header and padding */
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ margin-top: 1.5rem;
}
.equipment-section {
- background-color: white;
- border-radius: 8px;
+ background-color: var(--card-background);
+ border-radius: 12px;
overflow: hidden;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- transition: transform 0.3s;
- padding: 1.5rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease-in-out;
display: flex;
flex-direction: column;
- gap: 1rem;
- max-height: 100%;
+ border: none;
+ 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;
+ justify-content: space-between;
align-items: center;
- gap: 0.5rem;
- font-size: 1.2rem;
- color: #333;
+ padding: 1.25rem 1.5rem;
+ border-bottom: 1px solid var(--border-color);
+ 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 {
- list-style: none;
+ flex: 1;
overflow-y: auto;
- flex-grow: 1;
- height: 0; /* This forces the flex-grow to work properly */
- min-height: 400px;
+ padding: 0.75rem 1rem;
+}
+
+/* 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 {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0.75rem;
- border-bottom: 1px solid #eee;
- transition: background-color 0.3s;
+ padding: 0.875rem 1rem;
+ border-radius: 6px;
+ 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 {
- background-color: #f8f9fa;
+ background-color: var(--background-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.equipment-item:last-child {
- border-bottom: none;
+ margin-bottom: 0;
}
.item-info {
@@ -106,19 +223,27 @@ header {
.item-name {
font-weight: 500;
+ color: var(--text-primary);
}
.item-type {
- font-size: 0.875rem;
- color: #666;
+ font-size: 0.75rem;
+ 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 {
- font-size: 0.875rem;
- color: #28a745;
- background: rgba(40, 167, 69, 0.1);
- padding: 0.2rem 0.5rem;
+ font-size: 0.75rem;
+ color: var(--success-color);
+ background: rgba(22, 163, 74, 0.1);
+ padding: 0.25rem 0.5rem;
border-radius: 4px;
+ font-weight: 500;
}
.item-actions {
@@ -127,68 +252,97 @@ header {
}
.action-btn {
- padding: 0.5rem 1rem;
+ padding: 0.5rem 0.75rem;
border: none;
- border-radius: 4px;
+ border-radius: 6px;
cursor: pointer;
- font-weight: bold;
- transition: background-color 0.3s;
+ font-weight: 500;
+ 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 {
- background-color: #007bff;
+ background-color: var(--primary-color);
color: white;
}
-.store-btn:hover {
- background-color: #0056b3;
+.store-btn:hover:not(:disabled) {
+ background-color: var(--primary-hover);
}
.equip-btn {
- background-color: #28a745;
+ background-color: var(--success-color);
color: white;
}
-.equip-btn:hover {
- background-color: #218838;
+.equip-btn:hover:not(:disabled) {
+ background-color: var(--success-hover);
}
-.equip-btn:disabled {
- background-color: #6c757d;
+.action-btn:disabled {
+ background-color: var(--text-secondary);
cursor: not-allowed;
- opacity: 0.65;
-}
-
-.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;
+ opacity: 0.5;
}
.equipment-section.player-equipment {
- grid-column: span 2;
+ grid-column: span 1;
}
.equipment-section.stored-equipment {
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);
}
diff --git a/addons/org/ui/_site/index.html b/addons/org/ui/_site/index.html
index 1be3c64..bfca5e3 100644
--- a/addons/org/ui/_site/index.html
+++ b/addons/org/ui/_site/index.html
@@ -4,28 +4,30 @@
Current Equipment
+
+
Current Equipment
+
-
-
-
- Stored Equipment
+
+
Stored Equipment
+
-
Equipment Details
-
-
-
-
- Select an item to view its details
-
-
-
-
+
+
Organization Name
-
-
+
+
- ⭐
-
+
+
+
-
+ Reputation
- 0
-
+
+
Organization Name
+
+
+
+
+
@@ -56,28 +58,32 @@
+ Reputation
+ 0
-
- 💰
-
+
+
-
+ Funds
- $0
-
+
+
+ Funds
+ $0
Properties
Supplies
Transactions
-
Memos & Logs
-
+
+
Memos & Logs
-
diff --git a/addons/org/ui/_site/script.js b/addons/org/ui/_site/script.js
index dbe3198..b544077 100644
--- a/addons/org/ui/_site/script.js
+++ b/addons/org/ui/_site/script.js
@@ -13,7 +13,8 @@ let orgData = {
{ id: 1, name: "John Doe", role: "owner", status: "online" },
{ id: 2, name: "Jane Smith", role: "admin", status: "online" },
{ 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: [
{ id: 1, name: "Transport Truck", type: "Vehicle", value: 25000 },
@@ -118,12 +119,12 @@ function updateAssets() {
li.innerHTML = `
${item.name}
- ${item.type}
- $${item.value.toLocaleString()}
`;
equipmentList.appendChild(li);
- }); // Update properties
+ });
+
+ // Update properties
const propertiesList = document.getElementById('propertiesList');
propertiesList.innerHTML = '';
orgData.properties.forEach(property => {
@@ -163,29 +164,27 @@ function updateAssets() {
function updateTransactions() {
const transactionsList = document.getElementById('transactionsList');
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');
li.className = 'transaction-item';
- const date = new Date(transaction.date);
- 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 ? '+' : '';
+ const amount = parseFloat(transaction.amount);
+ const isPositive = amount >= 0;
li.innerHTML = `
-
+ ${transaction.description}
- ${formattedDate}
+ ${transaction.type}
+ ${transaction.description}
+
+ ${isPositive ? '+' : ''}$${Math.abs(amount).toLocaleString()}
- ${prefix}$${Math.abs(transaction.amount).toLocaleString()}
`;
transactionsList.appendChild(li);
diff --git a/addons/org/ui/_site/styles.css b/addons/org/ui/_site/styles.css
index 547a080..89adb1b 100644
--- a/addons/org/ui/_site/styles.css
+++ b/addons/org/ui/_site/styles.css
@@ -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;
padding: 0;
@@ -5,267 +20,318 @@
}
body {
- font-family: Arial, sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
- background-color: #f4f4f4;
+ background-color: var(--bg-color);
+ color: var(--text-color);
}
.container {
- max-width: 1200px;
+ max-width: 1280px;
margin: 0 auto;
- padding: 20px;
+ padding: 0 1rem;
+ margin-bottom: 1.5rem;
}
header {
- background-color: #333;
- color: white;
+ background-color: var(--header-bg);
+ color: var(--header-text);
padding: 1rem 0;
- margin-bottom: 2rem;
+ box-shadow: 0 1px 3px var(--shadow-color);
}
.header-content {
display: flex;
justify-content: space-between;
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 {
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 {
display: flex;
align-items: center;
- gap: 0.5rem;
- background: rgba(255, 255, 255, 0.1);
- padding: 0.5rem 1rem;
- border-radius: 4px;
+ gap: 0.75rem;
+ padding: 0.5rem 0.75rem;
+ border-radius: 6px;
+ transition: all 0.2s ease-in-out;
+ min-width: 140px;
}
-.stat-item i {
- font-size: 1.2rem;
+.stat-item:hover {
+ 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 {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 2rem;
- padding: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ 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 */
.section-tile.memo-section {
grid-column: 1 / -1;
- aspect-ratio: unset;
- min-height: 400px;
-}
-
-.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;
+ padding: 1.5rem;
+ height: auto;
+ max-height: calc(100vw / 3);
}
.section-tile:hover {
- transform: translateY(-5px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+ transform: translateY(-4px);
}
-.section-tile h2 {
- font-size: 1.5rem;
- color: #333;
+.section-tile:active {
+ transform: translateY(-2px);
+ 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;
- 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;
overflow-y: auto;
- flex-grow: 1;
+ flex: 1;
+ padding-right: 0.5rem;
+ margin-right: -0.5rem;
}
-.member-item, .asset-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.75rem;
- border-bottom: 1px solid #eee;
-}
-
-.member-item:last-child, .asset-item:last-child {
- border-bottom: none;
-}
-
-.member-info, .asset-info {
+.member-item,
+.asset-item,
+.transaction-item,
+.memo-item {
display: flex;
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;
- 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;
+ color: #64748b;
}
.memo-controls {
- margin-bottom: 1rem;
+ margin-bottom: 1.5rem;
display: flex;
justify-content: flex-end;
}
-.memo-list {
- list-style: none;
- overflow-y: auto;
- flex-grow: 1;
+.add-btn {
+ background-color: var(--accent-color);
+ color: white;
+ 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 {
- padding: 1rem;
- border-bottom: 1px solid #eee;
display: flex;
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 {
- border-bottom: none;
+.memo-item:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ background-color: var(--tile-hover);
}
.memo-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
+ margin-bottom: 0.75rem;
+ width: 100%;
}
.memo-title {
- font-weight: bold;
- color: #333;
+ font-weight: 600;
+ font-size: 1rem;
+ color: var(--text-color);
}
.memo-metadata {
display: flex;
gap: 1rem;
- font-size: 0.8rem;
- color: #666;
+ font-size: 0.75rem;
+ color: #64748b;
+ align-items: center;
}
.memo-author {
- color: #007bff;
+ font-weight: 500;
+ color: var(--accent-color);
+}
+
+.memo-date {
+ color: #94a3b8;
}
.memo-content {
- color: #444;
- line-height: 1.4;
+ font-size: 0.875rem;
+ line-height: 1.5;
+ color: #475569;
+ white-space: pre-wrap;
}
+/* Memo dialog styles */
.memo-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- background: white;
+ background: var(--tile-bg);
padding: 2rem;
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;
width: 90%;
max-width: 500px;
+ border: 1px solid var(--tile-border);
}
.memo-dialog-overlay {
@@ -274,7 +340,7 @@ header {
left: 0;
right: 0;
bottom: 0;
- background: rgba(0,0,0,0.5);
+ background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
@@ -284,76 +350,143 @@ header {
gap: 1rem;
}
-.memo-form input {
+.memo-form input,
+.memo-form textarea {
width: 100%;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
+ padding: 0.75rem;
+ border: 1px solid var(--tile-border);
+ 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 {
- width: 100%;
- min-height: 100px;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
+ min-height: 120px;
resize: vertical;
}
.memo-form-buttons {
display: flex;
justify-content: flex-end;
- gap: 1rem;
+ gap: 0.75rem;
+ margin-top: 0.5rem;
}
.cancel-btn {
- width: 100%;
- background-color: #6c757d;
- color: white;
+ background-color: #e2e8f0;
+ color: #475569;
border: none;
- border-radius: 4px;
- padding: 0.75rem 1rem;
- font-size: 1rem;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ font-weight: 500;
cursor: pointer;
- transition: background-color 0.3s;
-}
-
-.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;
+ transition: background-color 0.2s ease;
}
.cancel-btn:hover {
- background-color: #5a6268;
+ background-color: #cbd5e1;
}
-.member-status {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- margin-right: 0.5rem;
+.submit-btn {
+ background-color: var(--accent-color);
+ color: white;
+ 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;
}
-.status-online {
- background-color: #28a745;
+.submit-btn:hover {
+ background-color: var(--accent-hover);
+ opacity: 1;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
-.status-offline {
- background-color: #dc3545;
+.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;
+}
+
+.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);
}
diff --git a/addons/store/ui/_site/index.html b/addons/store/ui/_site/index.html
index 6279940..0eb3f12 100644
--- a/addons/store/ui/_site/index.html
+++ b/addons/store/ui/_site/index.html
@@ -4,19 +4,20 @@
-
-
General Military Surplus
-
-
-
+
+
diff --git a/addons/store/ui/_site/styles.css b/addons/store/ui/_site/styles.css
index caff0c7..2b1dfe4 100644
--- a/addons/store/ui/_site/styles.css
+++ b/addons/store/ui/_site/styles.css
@@ -4,197 +4,337 @@
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 {
- font-family: Arial, sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
- background-color: #f4f4f4;
+ background-color: var(--background-color);
+ color: var(--text-primary);
}
.container {
- max-width: 1200px;
+ max-width: 1280px;
margin: 0 auto;
- padding: 20px;
+ padding: 0 1rem;
+ margin-bottom: 1.5rem;
}
header {
- background-color: #333;
- color: white;
+ background-color: var(--header-bg);
+ color: var(--header-text);
padding: 1rem 0;
- margin-bottom: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ margin-bottom: 1.5rem;
}
header h1 {
- text-align: center;
+ font-size: 1.75rem;
+ font-weight: 600;
+ letter-spacing: -0.025em;
}
.categories-grid, .subcategories-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 2rem;
- padding: 1rem;
- margin-bottom: 2rem;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 1.5rem;
}
.category-tile, .subcategory-tile {
- background-color: #444;
- color: white;
+ background-color: var(--card-background);
+ color: var(--text-primary);
border: none;
- border-radius: 8px;
+ border-radius: 12px;
cursor: pointer;
- transition: all 0.3s;
+ transition: all 0.3s ease-in-out;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
- padding: 1rem;
- font-size: 1.3rem;
+ padding: 1.5rem;
+ font-size: 1.25rem;
+ font-weight: 500;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.category-tile:hover, .subcategory-tile:hover {
- background-color: #666;
- transform: translateY(-5px);
+ transform: translateY(-4px);
+ 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 {
- background-color: #007bff;
+ background-color: var(--primary-color);
+ color: white;
+ border-color: var(--primary-color);
}
.category-tile i, .subcategory-tile i {
- font-size: 2rem;
+ font-size: 2.5rem;
margin-bottom: 1rem;
+ color: var(--primary-color);
}
.back-button {
- background-color: #444;
- color: white;
- border: none;
- border-radius: 4px;
- padding: 0.5rem 1rem;
+ background-color: var(--card-background);
+ color: var(--text-primary);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 0.75rem 1.25rem;
cursor: pointer;
- margin-bottom: 1rem;
+ margin-bottom: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
+ font-weight: 500;
+ transition: all 0.2s ease-in-out;
}
.back-button:hover {
- background-color: #666;
+ background-color: var(--background-color);
+ border-color: var(--primary-color);
+ color: var(--primary-color);
}
.products-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 2rem;
- padding: 1rem;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 1.5rem;
+ /* padding: 1rem; */
}
.product-card {
- background-color: white;
- border-radius: 8px;
+ background-color: var(--card-background);
+ border-radius: 12px;
overflow: hidden;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- transition: transform 0.3s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease-in-out;
+ border: none;
+ display: flex;
+ flex-direction: column;
+ aspect-ratio: 1 / 1;
}
.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 {
width: 100%;
- height: 256px;
+ height: 50%;
object-fit: cover;
- background-color: #eee;
+ background-color: var(--secondary-color);
}
.product-info {
- padding: 1rem;
+ padding: 1.25rem;
+ display: flex;
+ flex-direction: column;
+ height: 50%;
}
.product-name {
font-size: 1.1rem;
+ color: var(--text-primary);
+ font-weight: 600;
+ letter-spacing: -0.01em;
+ line-height: 1.3;
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 {
- font-size: 1.2rem;
- color: #007bff;
- font-weight: bold;
+ font-size: 1.25rem;
+ color: var(--primary-color);
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+}
+
+.price-icon {
+ font-size: 0.9rem;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 1rem;
}
.payment-select {
- padding: 0.5rem;
- border-radius: 4px;
- background-color: white;
- border: 1px solid #ddd;
+ padding: 0.75rem 1rem;
+ border-radius: 8px;
+ background-color: var(--card-background);
+ border: 1px solid var(--border-color);
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 {
display: flex;
align-items: center;
gap: 1rem;
- margin-top: 1rem;
+ margin-top: auto;
padding-top: 1rem;
- border-top: 1px solid #eee;
+ border-top: 1px solid var(--border-color);
}
.quantity-controls {
display: flex;
align-items: center;
gap: 0.5rem;
+ background: var(--background-color);
+ padding: 0.25rem;
+ border-radius: 6px;
}
.quantity-btn {
- background-color: #007bff;
+ background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
- width: 30px;
- height: 30px;
- font-size: 1.2rem;
+ width: 28px;
+ height: 28px;
+ font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
+ transition: all 0.2s ease-in-out;
+ opacity: 0.9;
}
.quantity-btn:hover {
- background-color: #0056b3;
+ background-color: var(--primary-hover);
+ opacity: 1;
}
.quantity-display {
- font-size: 1.1rem;
- min-width: 40px;
+ font-size: 0.9rem;
+ min-width: 32px;
text-align: center;
+ font-weight: 600;
+ color: var(--text-primary);
}
.buy-btn {
flex: 1;
- background-color: #28a745;
+ background-color: var(--success-color);
color: white;
border: none;
- border-radius: 4px;
- padding: 0.5rem 1rem;
- font-size: 1rem;
+ border-radius: 6px;
+ padding: 0.75rem;
+ font-size: 0.9rem;
+ font-weight: 500;
cursor: pointer;
- transition: background-color 0.3s;
+ transition: all 0.2s ease-in-out;
+ opacity: 0.9;
}
.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 {
- background-color: #6c757d;
+ background-color: var(--text-secondary);
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;
}
General Military Surplus
+
+