redvalley/red-valley
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update nui_simulator.html

Browse Source
This commit is contained in:
Kotzu
2026-03-30 02:20:03 +03:00
parent 8f2117124b
commit 583862995c
1 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
docs/nui_simulator.html
View File

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