File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090023/Portfolio/js/app.js

Back
/** * SYS.OS v1.0.4 - Portfolio Engine * Author: Arthit * Composition Rework: True-centering, State Swaps, & Sequential Reveal Timers / document.addEventListener('DOMContentLoaded', () => { // --- DOM Elements --- const diagnosticLog = document.getElementById('diagnostic-log'); const cpuLoad = document.getElementById('cpu-load'); const cpuBar = document.getElementById('cpu-bar'); const ramLoad = document.getElementById('ram-load'); const ramBar = document.getElementById('ram-bar'); const timestamp = document.getElementById('hud-timestamp'); const sysStatusIndicator = document.getElementById('sys-status-indicator'); // State Containers const bootContainer = document.getElementById('boot-container'); const identityContainer = document.getElementById('identity-container'); // Progress loader parts const progressSegments = document.querySelectorAll('.progress-segment'); const progressText = document.getElementById('progress-text'); const bootStatusTitle = document.getElementById('boot-status-title'); // Identity parts for sequential reveal const idTag = document.getElementById('id-tag'); const idName = document.getElementById('id-name'); const idRoles = document.getElementById('id-roles'); const idStatus = document.getElementById('id-status'); const idAction = document.getElementById('id-action'); const enterBtn = document.getElementById('enter-btn'); const skipHint = document.getElementById('skip-hint'); const soundToggleBtn = document.getElementById('sound-toggle-btn'); const bootScreen = document.getElementById('boot-screen'); const mainSystem = document.getElementById('main-system'); const resetBtn = document.getElementById('reset-btn'); // --- Audio Elements --- const clickSound = document.getElementById('click-sound'); const bootSuccess = document.getElementById('boot-success'); const ambientSound = document.getElementById('ambient-sound'); let soundEnabled = false; // --- State Variables --- let bootCompleted = false; let progress = 0; let bootInterval = null; let particleAnimationId = null; // --- Check Motion Preferences --- const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // --- UTC Clock Syncer --- function updateClock() { const now = new Date(); const utcStr = now.toISOString().replace('T', ' ').substr(11, 8); timestamp.textContent = `UTC ${utcStr}`; } setInterval(updateClock, 1000); updateClock(); // --- Audio Controller --- function toggleSound(e) { if (e) e.preventDefault(); soundEnabled = !soundEnabled; if (soundEnabled) { soundToggleBtn.textContent = 'SOUND: ON'; soundToggleBtn.classList.remove('text-cyan'); soundToggleBtn.classList.add('text-orange'); ambientSound.volume = 0.12; ambientSound.play().catch(err => { console.log('Audio playback policy restriction active.'); }); } else { soundToggleBtn.textContent = 'SOUND: OFF'; soundToggleBtn.classList.remove('text-orange'); soundToggleBtn.classList.add('text-cyan'); ambientSound.pause(); } } soundToggleBtn.addEventListener('click', toggleSound); function playSound(sound) { if (soundEnabled && sound) { sound.currentTime = 0; sound.play().catch(err => console.log('Audio playback issue:', err)); } } // --- CPU/RAM Monitors --- function updateResourceStats() { if (bootCompleted) { const cpuVal = (Math.random() 2 + 1.1).toFixed(2); const ramVal = (38.2 + Math.random() * 0.3).toFixed(2); cpuLoad.textContent = `${cpuVal}%`; cpuBar.style.width = `${parseFloat(cpuVal) * 10}%`; ramLoad.textContent = `${ramVal}%`; ramBar.style.width = `${ramVal}%`; } else { const targetCpu = Math.min(84.5, (progress * 1.1 + Math.random() * 12)).toFixed(2); const targetRam = Math.min(54.8, (progress * 0.4 + 18.2 + Math.random() * 4)).toFixed(2); cpuLoad.textContent = `${targetCpu}%`; cpuBar.style.width = `${targetCpu}%`; ramLoad.textContent = `${targetRam}%`; ramBar.style.width = `${targetRam}%`; } } setInterval(updateResourceStats, 300); // --- Subtle Micro-Particles Canvas --- const canvas = document.getElementById('particles-canvas'); const ctx = canvas.getContext('2d'); let particles = []; function resizeCanvas() { if (canvas) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; initParticles(); } } class Particle { constructor() { this.reset(); } reset() { this.x = Math.random() * (canvas ? canvas.width : 800); this.y = (canvas ? canvas.height : 600) + Math.random() * 20; this.size = Math.random() * 1.2 + 0.4; this.speedY = -(Math.random() * 0.4 + 0.1); this.speedX = Math.random() * 0.3 - 0.15; this.opacity = Math.random() * 0.35 + 0.08; } update() { this.y += this.speedY; this.x += this.speedX; if (canvas && (this.y < -10 \|\| this.x < -10 \|\| this.x > canvas.width + 10)) { this.reset(); } } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(0, 243, 255, ${this.opacity})`; ctx.fill(); } } function initParticles() { particles = []; const particleCount = window.innerWidth < 768 ? 15 : 40; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function animateParticles() { if (prefersReducedMotion) return; ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(p => { p.update(); p.draw(); }); particleAnimationId = requestAnimationFrame(animateParticles); } if (!prefersReducedMotion) { window.addEventListener('resize', resizeCanvas); resizeCanvas(); animateParticles(); } // --- Streamlined Diagnostics Log (5 technical lines) --- const diagnosticLines = [ { text: 'SYS_LINK: CORRELATING TELEMETRY...', delay: 100, type: 'info' }, { text: 'SECURE_TUNNEL: INITIATING INTEGRITY MATCH...', delay: 700, type: 'info' }, { text: 'AUTH_KEY: VALIDATING OWNER PROFILE KEYS...', delay: 1500, type: 'info' }, { text: 'DECRYPT_SUCCESS: SYSTEM ID MATRICES ESTABLISHED.', delay: 2200, type: 'success' }, { text: 'SYS_ONLINE: COMMENCING PORTFOLIO CONNECTION...', delay: 2900, type: 'success' } ]; let logIndex = 0; function streamDiagnostics() { if (prefersReducedMotion) return; if (logIndex < diagnosticLines.length) { const item = diagnosticLines[logIndex]; const currentLoading = diagnosticLog.querySelector('.term-line.loading'); if (currentLoading) currentLoading.classList.remove('loading'); const line = document.createElement('div'); line.className = `term-line loading ${item.type === 'success' ? 'success' : item.type === 'warn' ? 'warn' : ''}`; line.textContent = item.text; diagnosticLog.appendChild(line); diagnosticLog.scrollTop = diagnosticLog.scrollHeight; logIndex++; setTimeout(streamDiagnostics, item.delay - (diagnosticLines[logIndex - 2]?.delay \|\| 0)); } else { const currentLoading = diagnosticLog.querySelector('.term-line.loading'); if (currentLoading) currentLoading.classList.remove('loading'); } } // --- Target 3-3.5s Boot Sequence --- function startBootSequence() { if (prefersReducedMotion) return; const totalDuration = 3200; // ~3.2 seconds const intervalTime = 40; bootInterval = setInterval(() => { let increment = 1; if (progress > 28 && progress < 40) { increment = Math.random() < 0.12 ? 1 : 0; } else if (progress > 68 && progress < 78) { increment = Math.random() < 0.16 ? 1 : 0; } else { increment = Math.random() < 0.75 ? 1 : 2; } progress = Math.min(100, progress + increment); progressText.textContent = `${String(progress).padStart(2, '0')}%`; const segmentsToActivate = Math.floor(progress / 10); progressSegments.forEach((seg, idx) => { if (idx < segmentsToActivate) { seg.classList.add('active'); } }); if (progress >= 100) { clearInterval(bootInterval); completeBoot(); } }, intervalTime); } // --- Complete Boot Sequence: Swap State A for State B --- function completeBoot() { if (bootCompleted) return; bootCompleted = true; progressSegments.forEach(seg => seg.classList.add('active')); progressText.textContent = '100%'; sysStatusIndicator.textContent = 'ONLINE'; sysStatusIndicator.className = 'text-cyan blink-fast'; playSound(bootSuccess); // Transition from State A to State B setTimeout(() => { // Fade out Boot Loader (State A) bootContainer.classList.add('fade-out'); // Wait for fade-out, then display Identity (State B) setTimeout(() => { bootContainer.style.display = 'none'; identityContainer.classList.add('fade-in'); // Sequential Reveal Animations with subtle micro-delays if (!prefersReducedMotion) { setTimeout(() => idTag.classList.add('show'), 150); setTimeout(() => idName.classList.add('show'), 350); setTimeout(() => idRoles.classList.add('show'), 550); setTimeout(() => idStatus.classList.add('show'), 750); // Reveal active button container setTimeout(() => { idAction.classList.add('show'); enterBtn.removeAttribute('disabled'); enterBtn.classList.add('active'); }, 950); } else { // Instant reveal for accessibility idTag.classList.add('show'); idName.classList.add('show'); idRoles.classList.add('show'); idStatus.classList.add('show'); idAction.classList.add('show'); enterBtn.removeAttribute('disabled'); enterBtn.classList.add('active'); } }, 500); }, 300); } // --- Skip / Bypass Trigger --- function bypassSequence() { if (bootCompleted) return; clearInterval(bootInterval); diagnosticLog.innerHTML = ''; diagnosticLines.forEach(item => { const line = document.createElement('div'); line.className = `term-line ${item.type === 'success' ? 'success' : item.type === 'warn' ? 'warn' : ''}`; line.textContent = item.text; diagnosticLog.appendChild(line); }); diagnosticLog.scrollTop = diagnosticLog.scrollHeight; progress = 100; completeBoot(); } // Skip bindings skipHint.addEventListener('click', bypassSequence); document.addEventListener('keydown', (e) => { if (!bootCompleted && document.body.classList.contains('boot-active')) { bypassSequence(); } }); // --- Prefers Reduced Motion Initialization Override --- function handleReducedMotionInstantBoot() { bootCompleted = true; diagnosticLog.innerHTML = ''; diagnosticLines.forEach(item => { const line = document.createElement('div'); line.className = `term-line ${item.type === 'success' ? 'success' : item.type === 'warn' ? 'warn' : ''}`; line.textContent = item.text; diagnosticLog.appendChild(line); }); diagnosticLog.scrollTop = diagnosticLog.scrollHeight; sysStatusIndicator.textContent = 'ONLINE'; sysStatusIndicator.className = 'text-cyan'; bootContainer.style.display = 'none'; bootContainer.classList.add('fade-out'); identityContainer.classList.add('fade-in'); idTag.classList.add('show'); idName.classList.add('show'); idRoles.classList.add('show'); idStatus.classList.add('show'); idAction.classList.add('show'); enterBtn.removeAttribute('disabled'); enterBtn.classList.add('active'); } if (prefersReducedMotion) { handleReducedMotionInstantBoot(); } else { setTimeout(streamDiagnostics, 100); startBootSequence(); } // --- ENTER SYSTEM Horizontal Transition Architecture --- enterBtn.addEventListener('click', () => { if (!bootCompleted) return; playSound(clickSound); // Slide current panel left, slide main operating dashboard in from right bootScreen.classList.add('slide-out'); mainSystem.classList.remove('hidden-section'); setTimeout(() => { mainSystem.classList.add('slide-in'); }, 50); document.body.classList.remove('boot-active'); if (particleAnimationId) { cancelAnimationFrame(particleAnimationId); } }); // --- REBOOT SYSTEM (Reset handler) --- resetBtn.addEventListener('click', () => { playSound(clickSound); mainSystem.classList.remove('slide-in'); mainSystem.classList.add('slide-out'); setTimeout(() => { mainSystem.classList.add('hidden-section'); mainSystem.classList.remove('slide-out'); bootScreen.classList.remove('slide-out'); document.body.classList.add('boot-active'); // State resets bootCompleted = false; progress = 0; logIndex = 0; diagnosticLog.innerHTML = '<div class="term-line loading">INITIALIZING BOOT LOADER...</div>'; // Re-render boot panels bootContainer.style.display = 'flex'; bootContainer.classList.remove('fade-out'); identityContainer.classList.remove('fade-in'); idTag.classList.remove('show'); idName.classList.remove('show'); idRoles.classList.remove('show'); idStatus.classList.remove('show'); idAction.classList.remove('show'); progressSegments.forEach(seg => seg.classList.remove('active')); progressText.textContent = '00%'; bootStatusTitle.textContent = 'SYSTEM INITIALIZING'; sysStatusIndicator.textContent = 'ESTABLISHING_LINK...'; sysStatusIndicator.className = 'blink-fast text-cyan'; enterBtn.setAttribute('disabled', 'true'); enterBtn.classList.remove('active'); skipHint.style.display = 'block'; skipHint.style.opacity = '0.4'; if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { animateParticles(); setTimeout(streamDiagnostics, 100); startBootSequence(); } else { handleReducedMotionInstantBoot(); } }, 800); }); });

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.38 | proxy | phpinfo | Settings