d178e39164
- Rework org and store UI state modules (rename/move store/getter files, add runtime and bridge wiring) - Update store UI components and page structure (navbar/cart split, new StoreView flow) - Apply broad markdown/YAML/HTML/CSS/JS formatting cleanup across docs, templates, and workflows
262 lines
12 KiB
HTML
262 lines
12 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>
|