Update nui_simulator.html

This commit is contained in:
2026-03-30 02:20:03 +03:00
parent 8f2117124b
commit 583862995c

View File

@@ -1,10 +1,12 @@
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Valley — NUI Simulator</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<style>
* {
margin: 0;
@@ -196,9 +198,20 @@
flex-shrink: 0;
}
.tag-custom { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.tag-vendor { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.tag-core { background: rgba(192, 132, 252, 0.15); color: #c084fc; }
.tag-custom {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.tag-vendor {
background: rgba(96, 165, 250, 0.15);
color: #60a5fa;
}
.tag-core {
background: rgba(192, 132, 252, 0.15);
color: #c084fc;
}
/* Main content */
.main {
@@ -282,10 +295,10 @@
display: flex;
align-items: center;
justify-content: center;
background:
background:
radial-gradient(circle at 20% 50%, rgba(255, 26, 53, 0.03) 0%, transparent 50%),
repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255,255,255,0.02) 19px, rgba(255,255,255,0.02) 20px),
repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255,255,255,0.02) 19px, rgba(255,255,255,0.02) 20px),
repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255, 255, 255, 0.02) 19px, rgba(255, 255, 255, 0.02) 20px),
repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255, 255, 255, 0.02) 19px, rgba(255, 255, 255, 0.02) 20px),
var(--bg-primary);
padding: 20px;
position: relative;
@@ -436,7 +449,10 @@
.toggle-slider {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
border-radius: 11px;
transition: 0.2s;
@@ -454,11 +470,11 @@
transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
.toggle-switch input:checked+.toggle-slider {
background: var(--success);
}
.toggle-switch input:checked + .toggle-slider::before {
.toggle-switch input:checked+.toggle-slider::before {
transform: translateX(18px);
}
@@ -520,7 +536,7 @@
.log-entry {
font-size: 11px;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
line-height: 1.5;
}
@@ -529,11 +545,20 @@
font-size: 10px;
}
.log-success { color: var(--success); }
.log-error { color: var(--accent); }
.log-info { color: #60a5fa; }
.log-success {
color: var(--success);
}
.log-error {
color: var(--accent);
}
.log-info {
color: #60a5fa;
}
</style>
</head>
<body>
<div class="app">
<!-- Sidebar -->
@@ -613,13 +638,19 @@
<div class="sim-section">
<h4>💼 Job Center — Apply</h4>
<button class="sim-job-btn" data-job="garbage" onclick="simApply('garbage')">🗑️ Garbage Collector <span class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="deliverer" onclick="simApply('deliverer')">📦 Deliverer <span class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="postman" onclick="simApply('postman')">✉️ Postman <span class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="lumberjack" onclick="simApply('lumberjack')">🪓 Lumberjack <span class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="bus" onclick="simApply('bus')">🚌 Bus Driver <span class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="garbage" onclick="simApply('garbage')">🗑️ Garbage Collector <span
class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="deliverer" onclick="simApply('deliverer')">📦 Deliverer <span
class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="postman" onclick="simApply('postman')">✉️ Postman <span
class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="lumberjack" onclick="simApply('lumberjack')">🪓 Lumberjack <span
class="req">🚗 permis</span></button>
<button class="sim-job-btn" data-job="bus" onclick="simApply('bus')">🚌 Bus Driver <span class="req">🚗
permis</span></button>
<button class="sim-job-btn" data-job="miner" onclick="simApply('miner')">⛏️ Miner</button>
<button class="sim-job-btn" data-job="electrician" onclick="simApply('electrician')"> Electrician</button>
<button class="sim-job-btn" data-job="electrician" onclick="simApply('electrician')">
Electrician</button>
</div>
<div class="sim-log" id="simLog">
@@ -670,7 +701,7 @@
// Render sidebar
function renderList(filter = "") {
const list = document.getElementById("nuiList");
const filtered = nuiResources.filter(r =>
const filtered = nuiResources.filter(r =>
r.name.toLowerCase().includes(filter.toLowerCase()) ||
r.path.toLowerCase().includes(filter.toLowerCase())
);
@@ -697,7 +728,7 @@
activeResource = name;
const frame = document.getElementById("previewFrame");
const empty = document.getElementById("emptyState");
if (empty) empty.remove();
// Remove existing iframe
@@ -732,7 +763,7 @@
const [w, h] = document.getElementById("resolutionSelect").value.split("x").map(Number);
const frame = document.getElementById("previewFrame");
const container = document.querySelector(".preview-container");
frame.style.width = w + "px";
frame.style.height = h + "px";
@@ -747,7 +778,7 @@
// Event listeners
document.getElementById("searchInput").addEventListener("input", e => renderList(e.target.value));
document.getElementById("btnRefresh").addEventListener("click", () => {
const iframe = document.getElementById("nuiIframe");
if (iframe) iframe.src = iframe.src;
@@ -839,4 +870,5 @@
setTimeout(updateResolution, 100);
</script>
</body>
</html>
</html>