Part 1: registration, login and character creation written from scratch
Всё, что здесь лежит, написал ИИ-агент на живом сервере под запись — без ESX, без QBCore, без скачанных с форума скриптов. - resources/justrp — свой ресурс на Lua: регистрация, вход, создание персонажа, спавн - resources/justrp/html — экраны NUI: кинематографичная загрузка, вход, редактор персонажа - api/api.py — внутренний HTTP-API к MariaDB, пароли через scrypt - server.cfg.example — пример конфига Секреты (пароль БД, внутренний ключ API) вынесены в переменные окружения и convar. Ключ Cfx.re в репозиторий не попадает. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
RedlHosting
co-authored by
Claude Opus 5
Claude Opus 5
parent
968d047f87
commit
0144e83f05
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,598 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JustRP — Loading</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #07070c;
|
||||
--accent: #c8933f;
|
||||
--accent2: #e0aa55;
|
||||
--text: #ede9e4;
|
||||
--text2: rgba(237,233,228,0.55);
|
||||
--text3: rgba(237,233,228,0.28);
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%; height: 100%; overflow: hidden;
|
||||
background: var(--bg);
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Canvas cityscape ── */
|
||||
#city-canvas {
|
||||
position: fixed; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
|
||||
/* ── Vignette overlay ── */
|
||||
.vignette {
|
||||
position: fixed; inset: 0;
|
||||
background: radial-gradient(ellipse at center,
|
||||
transparent 30%,
|
||||
rgba(7,7,12,0.55) 70%,
|
||||
rgba(7,7,12,0.9) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Center brand ── */
|
||||
.brand {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
animation: fadeUp 1.2s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: clamp(56px, 7vw, 96px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--text);
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 80px rgba(200,147,63,0.35);
|
||||
}
|
||||
|
||||
.brand-title span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.brand-rule {
|
||||
width: 180px; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
margin: 20px auto 18px;
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text2);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Rules panel ── */
|
||||
.rules-panel {
|
||||
position: fixed;
|
||||
top: 50%; right: 72px;
|
||||
transform: translateY(-50%) translateX(40px);
|
||||
width: 260px;
|
||||
background: rgba(13,13,24,0.82);
|
||||
border: 1px solid rgba(200,147,63,0.12);
|
||||
border-radius: 10px;
|
||||
padding: 24px 26px;
|
||||
backdrop-filter: blur(12px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
|
||||
}
|
||||
|
||||
.rules-panel.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
|
||||
.rules-panel h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.rules-panel ol {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.rules-panel li {
|
||||
font-size: 12px;
|
||||
line-height: 1.9;
|
||||
color: var(--text2);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.rules-panel li::marker {
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
padding: 0 60px 42px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.8s ease 1.4s forwards;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text3);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.progress-label span:last-child {
|
||||
color: var(--accent);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 2px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent2));
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
|
||||
box-shadow: 0 0 12px rgba(200,147,63,0.6);
|
||||
}
|
||||
|
||||
/* ── Volume ── */
|
||||
.vol-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.8s ease 1.8s forwards;
|
||||
}
|
||||
|
||||
.vol-icon {
|
||||
font-size: 14px;
|
||||
color: var(--text3);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 90px; height: 2px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px; height: 12px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px rgba(200,147,63,0.6);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
input[type=range]:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* ── Animations ── */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
|
||||
to { opacity: 1; transform: translate(-50%, -50%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<canvas id="city-canvas"></canvas>
|
||||
<div class="vignette"></div>
|
||||
|
||||
<div class="brand">
|
||||
<div class="brand-title">JUST<span>RP</span></div>
|
||||
<div class="brand-rule"></div>
|
||||
<div class="brand-sub">Los Santos Roleplay</div>
|
||||
</div>
|
||||
|
||||
<div class="rules-panel" id="rules">
|
||||
<h3>Server Rules</h3>
|
||||
<ol>
|
||||
<li>Respect every player</li>
|
||||
<li>No metagaming or powergaming</li>
|
||||
<li>No random deathmatch (RDM)</li>
|
||||
<li>No vehicle deathmatch (VDM)</li>
|
||||
<li>Value your character's life</li>
|
||||
<li>Stay in character at all times</li>
|
||||
<li>Admin decisions are final</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="progress-wrap">
|
||||
<div class="progress-label">
|
||||
<span id="prog-label">Connecting to server…</span>
|
||||
<span id="prog-pct">0%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill" id="prog-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vol-wrap">
|
||||
<span class="vol-icon">♪</span>
|
||||
<input type="range" id="vol" min="0" max="100" value="35">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Cityscape canvas ─────────────────────────────────────────────────────────
|
||||
|
||||
const canvas = document.getElementById('city-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
let W, H, panX = 0;
|
||||
const layers = [];
|
||||
|
||||
function randInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function generateCity() {
|
||||
layers.length = 0;
|
||||
// 3 depth layers: far (small), mid, near (tall)
|
||||
const configs = [
|
||||
{ count: 80, minH: 0.06, maxH: 0.18, minW: 8, maxW: 30, baseY: 0.68, alpha: 0.18, drift: 0.015 },
|
||||
{ count: 40, minH: 0.12, maxH: 0.28, minW: 14, maxW: 50, baseY: 0.72, alpha: 0.30, drift: 0.030 },
|
||||
{ count: 22, minH: 0.18, maxH: 0.42, minW: 22, maxW: 80, baseY: 0.78, alpha: 0.55, drift: 0.055 },
|
||||
];
|
||||
for (const cfg of configs) {
|
||||
const bldgs = [];
|
||||
let x = -W * 0.3;
|
||||
for (let i = 0; i < cfg.count; i++) {
|
||||
const w = randInt(cfg.minW, cfg.maxW);
|
||||
const h = H * (cfg.minH + Math.random() * (cfg.maxH - cfg.minH));
|
||||
bldgs.push({ x, y: H * cfg.baseY - h, w, h });
|
||||
x += w + randInt(1, 8);
|
||||
}
|
||||
layers.push({ bldgs, alpha: cfg.alpha, drift: cfg.drift });
|
||||
}
|
||||
}
|
||||
|
||||
// Particles
|
||||
const particles = [];
|
||||
|
||||
function initParticles() {
|
||||
particles.length = 0;
|
||||
for (let i = 0; i < 60; i++) {
|
||||
particles.push({
|
||||
x: Math.random() * W,
|
||||
y: Math.random() * H,
|
||||
r: Math.random() * 1.5 + 0.3,
|
||||
vy: -(Math.random() * 0.4 + 0.1),
|
||||
vx: (Math.random() - 0.5) * 0.15,
|
||||
alpha: Math.random() * 0.35 + 0.05,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
W = canvas.width = window.innerWidth;
|
||||
H = canvas.height = window.innerHeight;
|
||||
generateCity();
|
||||
initParticles();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
// Sky gradient colours cycling slowly
|
||||
const SKY = [
|
||||
{ t: 0, r: 7, g: 7, b: 12 },
|
||||
{ t: 0.5, r: 9, g: 6, b: 18 },
|
||||
{ t: 1, r: 12, g: 8, b: 20 },
|
||||
];
|
||||
let skyT = 0;
|
||||
let skyDir = 0.0004;
|
||||
|
||||
function lerp(a, b, t) { return a + (b - a) * t; }
|
||||
|
||||
function getSky() {
|
||||
const t = (Math.sin(skyT * Math.PI) + 1) / 2;
|
||||
const s = SKY[0], e = SKY[2];
|
||||
return `rgb(${Math.round(lerp(s.r,e.r,t))},${Math.round(lerp(s.g,e.g,t))},${Math.round(lerp(s.b,e.b,t))})`;
|
||||
}
|
||||
|
||||
let lastTime = 0;
|
||||
|
||||
function drawFrame(ts) {
|
||||
const dt = Math.min((ts - lastTime) / 16.67, 3);
|
||||
lastTime = ts;
|
||||
|
||||
skyT += skyDir * dt;
|
||||
if (skyT > 1 || skyT < 0) skyDir = -skyDir;
|
||||
|
||||
panX += 0.08 * dt;
|
||||
|
||||
// Sky
|
||||
const skyCol = getSky();
|
||||
const grad = ctx.createLinearGradient(0, 0, 0, H);
|
||||
grad.addColorStop(0, skyCol);
|
||||
grad.addColorStop(0.55, '#0a0814');
|
||||
grad.addColorStop(1, '#040408');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// Distant stars/glow
|
||||
ctx.save();
|
||||
for (let i = 0; i < 80; i++) {
|
||||
const sx = ((i * 137.5 + panX * 0.3) % (W * 1.4)) - W * 0.2;
|
||||
const sy = (i * 73.1) % (H * 0.55);
|
||||
const s = 0.5 + (i % 3) * 0.4;
|
||||
const a = 0.1 + (Math.sin(ts * 0.001 + i) + 1) * 0.08;
|
||||
ctx.globalAlpha = a;
|
||||
ctx.fillStyle = '#c8d4f0';
|
||||
ctx.beginPath();
|
||||
ctx.arc(sx, sy, s, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
// Horizon glow
|
||||
const hGrad = ctx.createRadialGradient(W / 2, H * 0.75, 0, W / 2, H * 0.75, W * 0.6);
|
||||
hGrad.addColorStop(0, 'rgba(200,147,63,0.07)');
|
||||
hGrad.addColorStop(0.6, 'rgba(200,147,63,0.02)');
|
||||
hGrad.addColorStop(1, 'rgba(200,147,63,0)');
|
||||
ctx.fillStyle = hGrad;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// City layers
|
||||
for (const layer of layers) {
|
||||
ctx.save();
|
||||
ctx.globalAlpha = layer.alpha;
|
||||
ctx.fillStyle = '#0a0a14';
|
||||
const off = (panX * layer.drift) % W;
|
||||
for (const b of layer.bldgs) {
|
||||
const bx = ((b.x + off) % (W * 1.6)) - W * 0.3;
|
||||
ctx.fillRect(bx, b.y, b.w, b.h);
|
||||
// Windows
|
||||
ctx.fillStyle = 'rgba(200,200,160,0.12)';
|
||||
const cols = Math.max(1, Math.floor(b.w / 6));
|
||||
const rows = Math.max(1, Math.floor(b.h / 10));
|
||||
for (let c = 0; c < cols; c++) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
if (Math.random() < 0.35) continue;
|
||||
ctx.fillRect(bx + 2 + c * 6, b.y + 3 + r * 10, 3, 4);
|
||||
}
|
||||
}
|
||||
ctx.fillStyle = '#0a0a14';
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Ground fog
|
||||
const fogGrad = ctx.createLinearGradient(0, H * 0.75, 0, H);
|
||||
fogGrad.addColorStop(0, 'rgba(7,7,12,0)');
|
||||
fogGrad.addColorStop(1, 'rgba(7,7,12,0.95)');
|
||||
ctx.fillStyle = fogGrad;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// Particles
|
||||
for (const p of particles) {
|
||||
p.x += p.vx * dt;
|
||||
p.y += p.vy * dt;
|
||||
if (p.y < -5) { p.y = H + 5; p.x = Math.random() * W; }
|
||||
|
||||
ctx.save();
|
||||
ctx.globalAlpha = p.alpha;
|
||||
ctx.fillStyle = '#c8a060';
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
requestAnimationFrame(drawFrame);
|
||||
}
|
||||
|
||||
requestAnimationFrame(drawFrame);
|
||||
|
||||
// ── Progress simulation ───────────────────────────────────────────────────────
|
||||
|
||||
const fill = document.getElementById('prog-fill');
|
||||
const pctEl = document.getElementById('prog-pct');
|
||||
const labelEl = document.getElementById('prog-label');
|
||||
const rules = document.getElementById('rules');
|
||||
|
||||
const LABELS = [
|
||||
[0, 'Connecting to server…'],
|
||||
[10, 'Loading world data…'],
|
||||
[25, 'Streaming assets…'],
|
||||
[45, 'Initialising resources…'],
|
||||
[65, 'Authenticating session…'],
|
||||
[80, 'Almost ready…'],
|
||||
[95, 'Loading complete'],
|
||||
];
|
||||
|
||||
let progress = 0;
|
||||
let targetProg = 0;
|
||||
let ruleShown = false;
|
||||
let done = false;
|
||||
|
||||
function setProgress(pct) {
|
||||
targetProg = Math.min(100, Math.max(progress, pct));
|
||||
}
|
||||
|
||||
function animProgress() {
|
||||
if (progress < targetProg) {
|
||||
progress += Math.min((targetProg - progress) * 0.05 + 0.08, targetProg - progress);
|
||||
const p = Math.min(100, Math.round(progress));
|
||||
fill.style.width = p + '%';
|
||||
pctEl.textContent = p + '%';
|
||||
|
||||
for (let i = LABELS.length - 1; i >= 0; i--) {
|
||||
if (progress >= LABELS[i][0]) {
|
||||
labelEl.textContent = LABELS[i][1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (progress >= 50 && !ruleShown) {
|
||||
ruleShown = true;
|
||||
rules.classList.add('visible');
|
||||
}
|
||||
}
|
||||
setTimeout(animProgress, 40);
|
||||
}
|
||||
|
||||
// Fake progress curve
|
||||
function fakeProgress() {
|
||||
const steps = [
|
||||
[800, 12], [1600, 28], [2800, 48],
|
||||
[4500, 68], [6500, 82], [9000, 91],
|
||||
];
|
||||
for (const [delay, pct] of steps) {
|
||||
setTimeout(() => setProgress(pct), delay);
|
||||
}
|
||||
}
|
||||
|
||||
fakeProgress();
|
||||
animProgress();
|
||||
|
||||
// Listen for real completion from Lua (via postMessage or window message)
|
||||
window.addEventListener('message', function(e) {
|
||||
if (!e.data) return;
|
||||
// Standard FiveM loadingscreen shutdown via eventName
|
||||
if (e.data.eventName === 'loadingScreenCall') {
|
||||
const calls = e.data.data || [];
|
||||
for (const call of calls) {
|
||||
if (call.functionName === 'shutdown' || call.type === 'shutdown') {
|
||||
setProgress(100);
|
||||
setTimeout(() => { document.body.style.opacity = '0'; }, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ── Ambient sound ────────────────────────────────────────────────────────────
|
||||
|
||||
const volSlider = document.getElementById('vol');
|
||||
let audioCtx = null;
|
||||
let masterGain = null;
|
||||
|
||||
function initAudio() {
|
||||
if (audioCtx) return;
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
masterGain = audioCtx.createGain();
|
||||
masterGain.gain.value = volSlider.value / 100 * 0.7;
|
||||
masterGain.connect(audioCtx.destination);
|
||||
|
||||
// Drone frequencies: dark minor chord atmosphere
|
||||
const freqs = [
|
||||
{ f: 55.0, v: 0.18 }, // A1
|
||||
{ f: 65.4, v: 0.10 }, // C2
|
||||
{ f: 82.4, v: 0.12 }, // E2
|
||||
{ f: 110.0, v: 0.07 }, // A2
|
||||
{ f: 130.8, v: 0.04 }, // C3
|
||||
];
|
||||
|
||||
for (const { f, v } of freqs) {
|
||||
const osc = audioCtx.createOscillator();
|
||||
const gain = audioCtx.createGain();
|
||||
const filt = audioCtx.createBiquadFilter();
|
||||
|
||||
// Slow LFO for movement
|
||||
const lfo = audioCtx.createOscillator();
|
||||
const lfoGain = audioCtx.createGain();
|
||||
lfo.frequency.value = 0.05 + Math.random() * 0.1;
|
||||
lfoGain.gain.value = f * 0.003;
|
||||
lfo.connect(lfoGain);
|
||||
lfoGain.connect(osc.frequency);
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.value = f;
|
||||
filt.type = 'lowpass';
|
||||
filt.frequency.value = f * 3;
|
||||
filt.Q.value = 0.5;
|
||||
gain.gain.setValueAtTime(0, audioCtx.currentTime);
|
||||
gain.gain.linearRampToValueAtTime(v, audioCtx.currentTime + 4);
|
||||
|
||||
osc.connect(filt);
|
||||
filt.connect(gain);
|
||||
gain.connect(masterGain);
|
||||
osc.start();
|
||||
lfo.start();
|
||||
}
|
||||
|
||||
// Subtle reverb-like noise pad
|
||||
const buf = audioCtx.createBuffer(1, audioCtx.sampleRate * 2, audioCtx.sampleRate);
|
||||
const data = buf.getChannelData(0);
|
||||
for (let i = 0; i < data.length; i++) data[i] = (Math.random() * 2 - 1);
|
||||
const noise = audioCtx.createBufferSource();
|
||||
const nFilt = audioCtx.createBiquadFilter();
|
||||
const nGain = audioCtx.createGain();
|
||||
noise.buffer = buf;
|
||||
noise.loop = true;
|
||||
nFilt.type = 'bandpass';
|
||||
nFilt.frequency.value = 80;
|
||||
nFilt.Q.value = 0.2;
|
||||
nGain.gain.value = 0.018;
|
||||
noise.connect(nFilt);
|
||||
nFilt.connect(nGain);
|
||||
nGain.connect(masterGain);
|
||||
noise.start();
|
||||
}
|
||||
|
||||
// Start audio on first interaction (browser policy)
|
||||
document.addEventListener('click', initAudio, { once: true });
|
||||
document.addEventListener('keydown', initAudio, { once: true });
|
||||
// Also try after a moment — FiveM NUI may not block it
|
||||
setTimeout(initAudio, 1200);
|
||||
|
||||
volSlider.addEventListener('input', () => {
|
||||
if (masterGain) {
|
||||
masterGain.gain.linearRampToValueAtTime(
|
||||
volSlider.value / 100 * 0.7,
|
||||
audioCtx.currentTime + 0.1
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user