File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090023/Portfolio/index.php

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SYS.OS // ARTHIT - Portfolio</title> <!-- Google Fonts for futuristic, clean, technical typography --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet"> <!-- Main stylesheet --> <link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>"> </head> <body class="boot-active"> <!-- Audio controls for immersive futuristic interaction --> <audio id="click-sound" src="https://assets.mixkit.co/active_storage/sfx/2568/2568-84.wav" preload="auto"></audio> <audio id="boot-success" src="https://assets.mixkit.co/active_storage/sfx/1600/1600-84.wav" preload="auto"></audio> <audio id="ambient-sound" src="https://assets.mixkit.co/active_storage/sfx/2073/2073-84.wav" preload="auto" loop></audio> <!-- Scanline overlay for that analog-digital sci-fi cathode terminal texture --> <div class="scanlines"></div> <div class="vignette"></div> <!-- Interactive subtle starfield / floating digital grid dust --> <canvas id="particles-canvas"></canvas> <!-- Background technical grid --> <div class="grid-background"></div> <!-- Outer Viewport Wrapper (Transition Architecture for horizontal sections) --> <div class="viewport-wrapper"> <!-- 01 - SYSTEM BOOT SCREEN --> <main id="boot-screen" class="hud-container section-panel"> <!-- Top HUD Header --> <header class="hud-header"> <div class="hud-header-left"> <span class="hud-tag text-cyan font-mono">SYS.OS // MAIN_FRAME</span> <span class="hud-divider"></span> <span class="hud-status font-mono">STATUS: <span class="blink-fast text-cyan" id="sys-status-indicator">ESTABLISHING_LINK...</span></span> </div> <div class="hud-header-right font-mono"> <span class="hud-time" id="hud-timestamp">UTC 00:00:00</span> <span class="hud-divider"></span> <span class="hud-tag text-orange">SECURE_MODE</span> </div> </header> <!-- Left Sidebar: Live Diagnostic Terminal Streams --> <aside class="hud-sidebar-left"> <div class="hud-panel-header font-mono"> <span class="text-blue">>_ SYSTEM_DIAGNOSTICS</span> </div> <div class="terminal-stream font-mono" id="diagnostic-log"> <!-- Streamed logs go here --> <div class="term-line loading">INITIALIZING BOOT LOADER...</div> </div> </aside> <!-- Right Sidebar: System Resource Monitor Details --> <aside class="hud-sidebar-right"> <div class="hud-panel-header font-mono"> <span class="text-blue">>_ SYS_LOAD_MONITOR</span> </div> <div class="resource-monitor font-mono"> <div class="monitor-item"> <span class="label">CPU CORES</span> <span class="value text-cyan" id="cpu-load">0.00%</span> </div> <div class="monitor-bar"><div class="bar-fill" id="cpu-bar" style="width: 0%;"></div></div> <div class="monitor-item margin-top"> <span class="label">MEMORY (RAM)</span> <span class="value text-cyan" id="ram-load">0.00%</span> </div> <div class="monitor-bar"><div class="bar-fill" id="ram-bar" style="width: 0%;"></div></div> <div class="monitor-item margin-top"> <span class="label">SIGNAL STRENGTH</span> <span class="value text-cyan">99.8%</span> </div> <div class="monitor-bar"><div class="bar-fill" style="width: 99.8%;"></div></div> <div class="network-matrix"> <div class="matrix-cell active"></div> <div class="matrix-cell active"></div> <div class="matrix-cell"></div> <div class="matrix-cell active"></div> <div class="matrix-cell active"></div> <div class="matrix-cell active"></div> <div class="matrix-cell"></div> <div class="matrix-cell"></div> <div class="matrix-cell active"></div> </div> </div> </aside> <!-- Central Core Interface --> <section class="hud-center"> <!-- Decorative Crosshair / Focus Reticle --> <div class="reticle-container"> <div class="reticle-corner top-left"></div> <div class="reticle-corner top-right"></div> <div class="reticle-corner bottom-left"></div> <div class="reticle-corner bottom-right"></div> <div class="reticle-scan-line"></div> </div> <!-- STATE A: BOOT LOADER PANEL --> <div class="boot-panel" id="boot-container"> <div class="boot-status-header"> <div class="bracket-indicator left">[</div> <div class="boot-status-text font-mono text-cyan" id="boot-status-title">SYSTEM INITIALIZING</div> <div class="bracket-indicator right">]</div> </div> <div class="progress-container"> <div class="progress-bar-segmented" id="progress-bar"> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> <div class="progress-segment"></div> </div> <div class="progress-percentage font-mono text-cyan" id="progress-text">00%</div> </div> <div class="skip-hint font-mono text-blue" id="skip-hint">PRESS ANY KEY TO BYPASS SEQUENCE</div> </div> <!-- STATE B: IDENTITY PANEL (True Visual Center Focus) --> <div class="identity-panel" id="identity-container"> <div class="identity-tag font-mono" id="id-tag">IDENTITY DETECTED</div> <h1 class="identity-name" id="id-name" data-text="ARTHIT">ARTHIT</h1> <div class="identity-roles" id="id-roles"> <span class="role-item font-mono text-cyan" id="id-role-1">DIGITAL ENGINEER</span> <span class="role-separator" id="id-role-sep">//</span> <span class="role-item font-mono text-blue" id="id-role-2">COMPUTER TECHNOLOGY</span> </div> <!-- SYSTEM ONLINE status below identity roles --> <div class="system-online-badge font-mono" id="id-status"> <span class="status-dot"></span> SYSTEM ONLINE </div> <!-- Refined HUD Button positioned directly below System Online --> <div class="enter-action-container" id="id-action"> <button class="enter-btn font-mono" id="enter-btn" disabled> <span class="btn-text">ENTER SYSTEM   →</span> </button> </div> </div> </section> <!-- Bottom HUD Footer --> <footer class="hud-footer"> <div class="hud-footer-left font-mono"> <span class="text-blue">LOC: </span><span class="text-cyan">13.7563° N, 100.5018° E</span> </div> <div class="hud-section-indicator font-mono"> <span class="current text-cyan">01</span> <span class="separator">/</span> <span class="total text-blue">06</span> </div> <div class="hud-footer-right font-mono"> <a href="#" class="sound-toggle text-cyan" id="sound-toggle-btn">SOUND: OFF</a> </div> </footer> </main> <!-- PLACEHOLDER MAIN SYSTEM SECTION (Section 02 - Prepped for horizontal scrolling transitions) --> <main id="main-system" class="hud-container section-panel hidden-section"> <header class="hud-header"> <div class="hud-header-left"> <span class="hud-tag text-cyan font-mono">SYS.OS // PORTFOLIO</span> <span class="hud-divider"></span> <span class="hud-status font-mono">STATUS: <span class="text-cyan">CONNECTED</span></span> </div> <div class="hud-header-right font-mono"> <span class="hud-time">UTC ONLINE</span> <span class="hud-divider"></span> <span class="hud-tag text-cyan">SECURE</span> </div> </header> <section class="hud-center"> <div class="success-message"> <h2 class="font-mono text-cyan animate-glitch">SYS_LINK_ESTABLISHED</h2> <p class="font-mono text-blue">Welcome, Operator. Section 01 initialized successfully.</p> <div class="stats-box font-mono"> <div>PORTFOLIO SECTIONS LOADED: 01 / 06</div> <div>TRANSITION MODULE: HORIZONTAL_SLIDE_READY</div> <div>STATUS: ACTIVE</div> </div> <button class="reset-btn font-mono" id="reset-btn">[ REBOOT SYSTEM ]</button> </div> </section> <footer class="hud-footer"> <div class="hud-footer-left font-mono"> <span class="text-blue">LOC: </span><span class="text-cyan">13.7563° N, 100.5018° E</span> </div> <div class="hud-section-indicator font-mono"> <span class="current text-cyan">02</span> <span class="separator">/</span> <span class="total text-blue">06</span> </div> <div class="hud-footer-right font-mono"> <span class="text-blue">SYS.OS v1.0.4</span> </div> </footer> </main> </div> <!-- Main application logic --> <script src="js/app.js?v=<?php echo time(); ?>"></script> </body> </html>

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