ebfe77a340
Implemented features: - High-performance Rust extension with Redis persistence - Actor/player management with loadout, position, and state tracking - Banking system with deposit, withdraw, and transfer operations - Physical and virtual garage/locker systems for vehicle and equipment storage - Organization management with member tracking and permissions - Client-side UI with React-like state management - Server-side event-driven architecture with CBA Events - Security: Self-transfer prevention at multiple layers - Logging system with per-module log files - ICOM module for inter-server communication Co-Authored-By: Warp <agent@warp.dev>
206 lines
9.2 KiB
HTML
206 lines
9.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vehicle Garage</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<!--
|
|
Dynamic Resource Loading
|
|
The following script loads CSS and JavaScript files dynamically using the A3API
|
|
This approach is used instead of static HTML imports to work with Arma 3's file system
|
|
-->
|
|
<script>
|
|
Promise.all([
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\garage\\ui\\_site\\style.css",
|
|
),
|
|
A3API.RequestFile(
|
|
"forge\\forge_client\\addons\\garage\\ui\\_site\\script.js",
|
|
),
|
|
]).then(([css, js]) => {
|
|
const style = document.createElement("style");
|
|
style.textContent = css;
|
|
document.head.appendChild(style);
|
|
|
|
const script = document.createElement("script");
|
|
script.text = js;
|
|
document.head.appendChild(script);
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="garage-container">
|
|
<!-- Header Section -->
|
|
<div class="garage-header">
|
|
<div class="garage-logo">
|
|
<div class="logo-icon">🚗</div>
|
|
</div>
|
|
<div class="garage-info">
|
|
<h1 class="garage-title">Vehicle Garage</h1>
|
|
<p class="garage-subtitle">Vehicle Management System</p>
|
|
</div>
|
|
<div class="garage-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Stored</span>
|
|
<span class="stat-value" id="storedCount">12</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Active</span>
|
|
<span class="stat-value" id="activeCount">2</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Capacity</span>
|
|
<span class="stat-value" id="capacityCount">20</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="action-btn close-btn">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="garage-content">
|
|
<!-- Left Panel - Filters -->
|
|
<div class="garage-panel filters-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Filters</h2>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Status Filter -->
|
|
<div class="filter-section">
|
|
<h3 class="filter-title">Status</h3>
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="stored">Stored</button>
|
|
<button class="filter-btn" data-filter="active">Active</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Type Filter -->
|
|
<div class="filter-section">
|
|
<h3 class="filter-title">Vehicle Type</h3>
|
|
<div class="type-list">
|
|
<button class="type-item active" data-type="all">
|
|
<span class="type-icon">📦</span>
|
|
<span class="type-name">All Types</span>
|
|
</button>
|
|
<button class="type-item" data-type="car">
|
|
<span class="type-icon">🚗</span>
|
|
<span class="type-name">Cars</span>
|
|
</button>
|
|
<button class="type-item" data-type="truck">
|
|
<span class="type-icon">🚛</span>
|
|
<span class="type-name">Trucks</span>
|
|
</button>
|
|
<button class="type-item" data-type="air">
|
|
<span class="type-icon">🚁</span>
|
|
<span class="type-name">Aircraft</span>
|
|
</button>
|
|
<button class="type-item" data-type="sea">
|
|
<span class="type-icon">🚤</span>
|
|
<span class="type-name">Boats</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search -->
|
|
<div class="filter-section">
|
|
<h3 class="filter-title">Search</h3>
|
|
<input type="text" class="search-input" id="searchInput" placeholder="Search vehicles...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Panel - Vehicle Grid -->
|
|
<div class="garage-panel vehicles-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Your Vehicles</h2>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="vehicles-grid" id="vehiclesGrid">
|
|
<!-- Vehicles will be dynamically generated -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel - Vehicle Details -->
|
|
<div class="garage-panel details-panel" id="detailsPanel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Vehicle Details</h2>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="no-selection" id="noSelection">
|
|
<div class="no-selection-icon">🚗</div>
|
|
<p>Select a vehicle to view details</p>
|
|
</div>
|
|
|
|
<div class="vehicle-details" id="vehicleDetails" style="display: none;">
|
|
<div class="detail-header">
|
|
<div class="detail-icon" id="detailIcon">🚗</div>
|
|
<div class="detail-info">
|
|
<h3 class="detail-name" id="detailName">Vehicle Name</h3>
|
|
<p class="detail-type" id="detailType">Type</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-stats">
|
|
<div class="detail-stat">
|
|
<span class="detail-label">Status</span>
|
|
<span class="detail-value" id="detailStatus">Stored</span>
|
|
</div>
|
|
<div class="detail-stat">
|
|
<span class="detail-label">Condition</span>
|
|
<span class="detail-value" id="detailCondition">100%</span>
|
|
</div>
|
|
<div class="detail-stat">
|
|
<span class="detail-label">Fuel</span>
|
|
<span class="detail-value" id="detailFuel">100%</span>
|
|
</div>
|
|
<div class="detail-stat">
|
|
<span class="detail-label">Location</span>
|
|
<span class="detail-value" id="detailLocation">Garage A</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-actions">
|
|
<button class="detail-btn spawn-btn" id="spawnBtn">
|
|
<span class="btn-icon">🚀</span>
|
|
<span class="btn-text">Spawn Vehicle</span>
|
|
</button>
|
|
<button class="detail-btn store-btn" id="storeBtn" style="display: none;">
|
|
<span class="btn-icon">📦</span>
|
|
<span class="btn-text">Store Vehicle</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="detail-specs">
|
|
<h4 class="specs-title">Specifications</h4>
|
|
<div class="specs-list">
|
|
<div class="spec-item">
|
|
<span class="spec-label">Seats</span>
|
|
<span class="spec-value" id="detailSeats">4</span>
|
|
</div>
|
|
<div class="spec-item">
|
|
<span class="spec-label">Speed</span>
|
|
<span class="spec-value" id="detailSpeed">180 km/h</span>
|
|
</div>
|
|
<div class="spec-item">
|
|
<span class="spec-label">Cargo</span>
|
|
<span class="spec-value" id="detailCargo">200 kg</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html>
|