File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090027/01_portfolio/index.html

Back
<!DOCTYPE html> <html lang="th" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Portfolio ของ นายสุรพศ ยะกันมูล นักศึกษาเทคโนโลยีคอมพิวเตอร์ วิทยาลัยเทคนิคเชียงใหม่ - รวบรวมผลงานด้านฮาร์ดแวร์ อิเล็กทรอนิกส์ และซอฟต์แวร์"> <meta name="keywords" content="สุรพศ ยะกันมูล, Suraphot Yakanmoon, เทคโนโลยีคอมพิวเตอร์, เทคนิคเชียงใหม่, พอร์ตโฟลิโอ, อิเล็กทรอนิกส์, Web Developer, IoT, Computer Technology"> <meta name="author" content="Suraphot Yakanmoon"> <title>SURAPHOT.SYS // Computer Technology Portfolio</title> <!-- Google Fonts: Orbitron, Share Tech Mono, Rajdhani, Inter --> <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=Inter:wght@300;400;500;600&family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"> <!-- Font Awesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Tailwind CSS CDN & Custom Config --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { orbitron: ['Orbitron', 'sans-serif'], 'share-tech': ['"Share Tech Mono"', 'monospace'], inter: ['Inter', 'sans-serif'], }, colors: { cyber: { dark: '#0a0a0f', card: '#0d0d16', cyan: '#00f0ff', blue: '#0055ff', green: '#39ff14', pink: '#ff007f', } } } } } </script> <!-- Custom CSS --> <link rel="stylesheet" href="style.css"> </head> <body class="bg-[#0a0a0f] text-gray-200 overflow-x-hidden font-inter antialiased selection:bg-[#00f0ff] selection:text-black"> <!-- Cyber Background Canvas --> <canvas id="cyber-bg" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0 opacity-40"></canvas> <!-- Glitch Scanlines Overlay --> <div class="scanlines pointer-events-none fixed top-0 left-0 w-full h-full z-50"></div> <!-- HEADER / NAVIGATION --> <header class="fixed top-0 left-0 w-full z-40 bg-[#0a0a0f]/80 backdrop-blur-md border-b border-[#00f0ff]/15 transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between"> <!-- Logo --> <a href="#home" class="font-orbitron font-black text-xl tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] flex items-center gap-2 group"> <span class="text-[#00f0ff] font-mono"><</span> SURAPHOT<span class="text-[#39ff14] animate-pulse">.SYS</span> <span class="text-[#00f0ff] font-mono">></span> </a> <!-- Desktop Nav Menu --> <nav class="hidden md:flex items-center gap-8 font-share-tech text-base tracking-wider"> <a href="#home" class="nav-link text-[#00f0ff] hover:text-[#00f0ff] transition-all relative py-2">HOME</a> <a href="#about" class="nav-link text-gray-400 hover:text-[#00f0ff] transition-all relative py-2">ABOUT</a> <a href="#education" class="nav-link text-gray-400 hover:text-[#00f0ff] transition-all relative py-2">EDUCATION</a> <a href="#skills" class="nav-link text-gray-400 hover:text-[#00f0ff] transition-all relative py-2">SKILLS</a> <a href="#projects" class="nav-link text-gray-400 hover:text-[#00f0ff] transition-all relative py-2">PROJECTS</a> <a href="#contact" class="nav-link text-gray-400 hover:text-[#00f0ff] transition-all relative py-2">CONTACT</a> </nav> <!-- Tech Status Indicator (Desktop) --> <div class="hidden lg:flex items-center gap-3 bg-black/40 border border-[#00f0ff]/20 px-3 py-1.5 rounded-sm font-share-tech text-xs tracking-wider"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#39ff14] opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-[#39ff14]"></span> </span> <span class="text-[#39ff14]">PORT_2005_ONLINE</span> </div> <!-- Hamburger Button (Mobile) --> <button id="mobile-menu-btn" class="md:hidden text-gray-400 hover:text-[#00f0ff] focus:outline-none transition-colors" aria-label="Toggle Menu"> <div class="w-6 h-5 relative flex flex-col justify-between"> <span class="w-full h-[2px] bg-current rounded-sm transition-all duration-300 origin-left line-1"></span> <span class="w-full h-[2px] bg-current rounded-sm transition-all duration-300 opacity-100 line-2"></span> <span class="w-full h-[2px] bg-current rounded-sm transition-all duration-300 origin-left line-3"></span> </div> </button> </div> <!-- Mobile Nav Menu (Drawer) --> <div id="mobile-menu" class="hidden md:hidden fixed top-20 left-0 w-full h-[calc(100vh-80px)] bg-[#0a0a0f]/95 border-b border-[#00f0ff]/20 backdrop-blur-lg z-30 transition-all duration-300 px-6 py-8 flex flex-col gap-6"> <a href="#home" class="mobile-nav-link font-orbitron text-xl text-[#00f0ff] tracking-wide py-2 border-b border-gray-800">01 // HOME</a> <a href="#about" class="mobile-nav-link font-orbitron text-xl text-gray-400 hover:text-[#00f0ff] tracking-wide py-2 border-b border-gray-800">02 // ABOUT</a> <a href="#education" class="mobile-nav-link font-orbitron text-xl text-gray-400 hover:text-[#00f0ff] tracking-wide py-2 border-b border-gray-800">03 // EDUCATION</a> <a href="#skills" class="mobile-nav-link font-orbitron text-xl text-gray-400 hover:text-[#00f0ff] tracking-wide py-2 border-b border-gray-800">04 // SKILLS</a> <a href="#projects" class="mobile-nav-link font-orbitron text-xl text-gray-400 hover:text-[#00f0ff] tracking-wide py-2 border-b border-gray-800">05 // PROJECTS</a> <a href="#contact" class="mobile-nav-link font-orbitron text-xl text-gray-400 hover:text-[#00f0ff] tracking-wide py-2 border-b border-gray-800">06 // CONTACT</a> <div class="mt-auto flex items-center justify-between bg-black/60 border border-[#00f0ff]/20 p-4 rounded-sm font-share-tech text-sm"> <span class="text-gray-400">COORDINATES:</span> <span class="text-[#00f0ff]">18.7883° N, 98.9853° E</span> </div> </div> </header> <!-- HERO SECTION --> <section id="home" class="min-h-screen relative flex items-center justify-center pt-24 pb-12 overflow-hidden z-10"> <!-- Sci-Fi background Grid lines --> <div class="absolute inset-0 grid-lines opacity-20 pointer-events-none"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex flex-col lg:flex-row items-center justify-between gap-12 relative"> <!-- Left Info Panel --> <div class="flex-1 text-center lg:text-left z-10"> <div class="inline-flex items-center gap-2 px-3 py-1 bg-[#00f0ff]/10 border border-[#00f0ff]/30 text-[#00f0ff] font-share-tech text-xs tracking-widest uppercase mb-6 animate-pulse"> <span class="w-1.5 h-1.5 rounded-full bg-[#00f0ff]"></span> SYSTEM_INITIALIZED // RUN_MODE: DEV </div> <h2 class="font-orbitron font-black text-3xl sm:text-5xl lg:text-6xl tracking-tight text-white mb-4 uppercase leading-none"> HELLO, I'M <br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] font-black glitch-text" data-text="SURAPHOT">SURAPHOT</span> </h2> <p class="font-share-tech text-xl sm:text-2xl text-[#39ff14] mb-6 flex justify-center lg:justify-start items-center gap-2 h-8"> <span>></span> <span id="typing-text" class="border-r-2 border-[#39ff14] pr-1 whitespace-nowrap"></span> </p> <p class="text-gray-400 text-sm sm:text-base max-w-xl mb-8 leading-relaxed"> นักศึกษาเทคโนโลยีคอมพิวเตอร์และอิเล็กทรอนิกส์ มุ่งเน้นการเชื่อมต่อโลกฮาร์ดแวร์ (Microcontrollers & IoT) เข้ากับโลกซอฟต์แวร์ (Web Development & Systems Networking) เพื่อสร้างสรรค์นวัตกรรมแห่งอนาคต </p> <!-- Action Buttons --> <div class="flex flex-wrap gap-4 justify-center lg:justify-start font-share-tech"> <a href="#projects" class="cyber-btn primary"> <span class="cyber-btn-inner"> <i class="fa-solid fa-folder-open mr-2"></i>ACCESS_FILES </span> </a> <a href="#contact" class="cyber-btn secondary"> <span class="cyber-btn-inner"> <i class="fa-solid fa-network-wired mr-2"></i>ESTABLISH_CONN </span> </a> </div> </div> <!-- Right Terminal System Stats Grid --> <div class="w-full max-w-md lg:max-w-lg z-10"> <div class="cyber-card relative bg-[#0d0d16]/80 backdrop-blur-md border border-[#00f0ff]/30 p-6 shadow-[0_0_25px_rgba(0,240,255,0.15)] rounded-sm"> <!-- Top Window Bar --> <div class="absolute top-0 left-0 w-full h-8 bg-black/60 border-b border-[#00f0ff]/20 flex items-center justify-between px-4 font-share-tech text-[10px] text-gray-400"> <div class="flex items-center gap-2"> <span class="w-2.5 h-2.5 rounded-full bg-red-600/60 border border-red-500"></span> <span class="w-2.5 h-2.5 rounded-full bg-yellow-600/60 border border-yellow-500"></span> <span class="w-2.5 h-2.5 rounded-full bg-green-600/60 border border-green-500"></span> <span class="ml-2 font-mono">SYS_MONITOR.SH</span> </div> <span class="text-[#00f0ff] uppercase tracking-widest">v1.2.0-active</span> </div> <!-- Content (Spacer for bar) --> <div class="mt-4 pt-2 font-share-tech text-xs sm:text-sm text-gray-300 space-y-4"> <!-- Stat Item 1 --> <div class="flex items-center justify-between border-b border-gray-800/80 pb-2"> <span class="text-gray-400"><i class="fa-solid fa-user-circle mr-2 text-[#00f0ff]"></i>NAME:</span> <span class="text-[#00f0ff] font-bold text-right">SURAPHOT YAKANMOON</span> </div> <!-- Stat Item 2 --> <div class="flex items-center justify-between border-b border-gray-800/80 pb-2"> <span class="text-gray-400"><i class="fa-solid fa-cake-candles mr-2 text-[#00f0ff]"></i>BIRTHDAY:</span> <span class="text-white text-right">02 / 06 / 2005 (AGE 21)</span> </div> <!-- Stat Item 3 --> <div class="flex items-center justify-between border-b border-gray-800/80 pb-2"> <span class="text-gray-400"><i class="fa-solid fa-microchip mr-2 text-[#00f0ff]"></i>SPECIALTY:</span> <span class="text-[#39ff14] text-right">COMP_TECH & ELECTRONICS</span> </div> <!-- Stat Item 4 --> <div class="flex items-center justify-between border-b border-gray-800/80 pb-2"> <span class="text-gray-400"><i class="fa-solid fa-graduation-cap mr-2 text-[#00f0ff]"></i>INSTITUTION:</span> <span class="text-white text-right text-xs">CHIANG MAI TECHNICAL COLLEGE</span> </div> <!-- Stat Item 5 --> <div class="flex items-center justify-between pb-2"> <span class="text-gray-400"><i class="fa-solid fa-location-dot mr-2 text-[#00f0ff]"></i>CURRENT_LOC:</span> <span class="text-white text-right">CHIANG MAI, THAILAND</span> </div> <!-- Mini Diagnostic Bar --> <div class="bg-black/60 border border-gray-800 p-3 rounded-sm space-y-2 mt-2"> <div class="flex justify-between text-[11px] text-gray-500 font-mono"> <span>HARDWARE CORE STABILITY:</span> <span class="text-[#39ff14]">94% READY</span> </div> <div class="w-full bg-gray-900 h-1.5 rounded-full overflow-hidden border border-gray-800"> <div class="bg-[#39ff14] h-full rounded-full shadow-[0_0_10px_#39ff14]" style="width: 94%"></div> </div> <div class="flex justify-between text-[11px] text-gray-500 font-mono pt-1"> <span>SOFTWARE MODULE LINKAGE:</span> <span class="text-[#00f0ff]">88% LOADED</span> </div> <div class="w-full bg-gray-900 h-1.5 rounded-full overflow-hidden border border-gray-800"> <div class="bg-[#00f0ff] h-full rounded-full shadow-[0_0_10px_#00f0ff]" style="width: 88%"></div> </div> </div> </div> </div> </div> </div> <!-- Bottom Section Divider (Tech line) --> <div class="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#00f0ff]/40 to-transparent"> </div> </section> <!-- ABOUT & EDUCATION SECTION --> <section id="about" class="py-24 relative overflow-hidden z-10 bg-[#0d0d16]/30"> <!-- Tech grid background --> <div class="absolute inset-0 grid-lines opacity-10 pointer-events-none"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="mb-16 text-center lg:text-left"> <div class="flex items-center justify-center lg:justify-start gap-3 mb-2"> <span class="text-[#00f0ff] font-share-tech tracking-wider text-sm">[ SEC_02 ]</span> <div class="h-[1px] w-12 bg-[#00f0ff]/30"></div> </div> <h3 class="font-orbitron font-black text-3xl sm:text-4xl text-white uppercase tracking-wider"> PROFILE & <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] to-[#0055ff]">EDUCATION</span> </h3> <div class="mt-3 h-[2px] w-24 bg-gradient-to-r from-[#00f0ff] to-transparent mx-auto lg:mx-0"></div> </div> <!-- Two Column Layout: About Details and Timeline --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Left: Biography details & Stats Card (5 cols) --> <div class="lg:col-span-5 space-y-6"> <div class="cyber-card relative bg-black/40 border border-[#00f0ff]/20 p-6 rounded-sm"> <div class="flex items-center gap-4 mb-6 border-b border-[#00f0ff]/15 pb-4"> <div class="w-16 h-16 rounded-sm border border-[#00f0ff] flex items-center justify-center bg-[#00f0ff]/10 text-[#00f0ff] text-2xl font-mono relative overflow-hidden"> <img src="images/profile.jpg" alt="สุรพศ ยะกันมูล" class="w-full h-full object-cover"> <!-- Cyber corners --> <span class="absolute top-0 left-0 w-1.5 h-1.5 bg-[#00f0ff]"></span> <span class="absolute bottom-0 right-0 w-1.5 h-1.5 bg-[#00f0ff]"></span> </div> <div> <h4 class="font-orbitron text-lg font-bold text-white tracking-wide">สุรพศ ยะกันมูล</h4> <p class="font-share-tech text-xs text-gray-400">SURAPHOT YAKANMOON // DEV_ID: 20050206 </p> </div> </div> <p class="text-gray-300 text-sm leading-relaxed mb-6 font-light"> สวัสดีครับ ผมชื่อ<strong> สุรพศ ยะกันมูล (ชื่อเล่น ปาย) (ปัจจุบันกำลังศึกษาด้านสาขาเทคโนโลยีคอมพิวเตอร์)</strong> ปัจจุบันกำลังศึกษาด้านสาขาเทคโนโลยีคอมพิวเตอร์ แผนกอิเล็กทรอนิกส์ มีความหลงใหลในเทคโนโลยีล้ำสมัย ทั้งในส่วนของบอร์ดวงจรสมองกลฝังตัว (Microcontrollers) การควบคุมระบบไฟฟ้า และการพัฒนาระบบเครือข่าย พร้อมทั้งขยายองค์ความรู้สู่วงการ Web Development และ Programming เพื่อเชื่อมประสานเทคโนโลยีอิเล็กทรอนิกส์กับระบบดิจิทัลได้อย่างลงตัว </p> <div class="space-y-3 font-share-tech text-sm"> <div class="flex justify-between border-b border-gray-800/60 pb-2"> <span class="text-gray-500">PROGRAM:</span> <span class="text-[#00f0ff] uppercase">Computer Technology (เทคโนโลยีคอมพิวเตอร์)</span> </div> <div class="flex justify-between border-b border-gray-800/60 pb-2"> <span class="text-gray-500">DEPARTMENT:</span> <span class="text-[#00f0ff] uppercase">Electronics Division (แผนกอิเล็กทรอนิกส์)</span> </div> <div class="flex justify-between border-b border-gray-800/60 pb-2"> <span class="text-gray-500">HOBBIES:</span> <span class="text-[#39ff14] uppercase">IoT Projects, Network Lab, Keyboard Modding</span> </div> <div class="flex justify-between pb-2"> <span class="text-gray-500">INTERESTS:</span> <span class="text-white uppercase">Automation, Embedded C++, Web Engineering</span> </div> </div> </div> </div> <!-- Right: Education Timeline (7 cols) --> <div id="education" class="lg:col-span-7 space-y-6"> <div class="cyber-card relative bg-[#0d0d16]/80 backdrop-blur-md border border-[#0055ff]/30 p-8 rounded-sm"> <!-- Corner Accent --> <div class="absolute -top-[1px] -right-[1px] w-6 h-6 bg-[#0055ff] clip-triangle"></div> <h4 class="font-orbitron text-lg font-bold text-white tracking-wider uppercase mb-8 flex items-center gap-3"> <i class="fa-solid fa-graduation-cap text-[#00f0ff]"></i> EDUCATION PATHWAY </h4> <!-- Education Timeline Content --> <div class="relative border-l border-[#00f0ff]/30 pl-6 sm:pl-8 space-y-8"> <!-- Timeline Item 1 --> <div class="relative"> <!-- Node point --> <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-[#0a0a0f] border-2 border-[#00f0ff] flex items-center justify-center"> <div class="w-1.5 h-1.5 rounded-full bg-[#00f0ff] animate-ping"></div> </div> <div class="inline-flex px-2 py-0.5 bg-[#00f0ff]/10 border border-[#00f0ff]/20 text-[#00f0ff] font-share-tech text-xs tracking-wider mb-2"> 2026 - ปัจจุบัน (CURRENT) </div> <h5 class="font-orbitron font-bold text-white text-base sm:text-lg"> ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) </h5> <p class="font-share-tech text-sm text-[#39ff14] mb-2"> สาขาเทคโนโลยีคอมพิวเตอร์ // แผนกอิเล็กทรอนิกส์ </p> <p class="text-[#00f0ff] text-xs font-bold mb-2"> วิทยาลัยเทคนิคเชียงใหม่ </p> <p class="text-gray-400 text-xs leading-relaxed"> มุ่งเน้นการศึกษาด้านเทคโนโลยีเครือข่ายคอมพิวเตอร์ ระบบคอมพิวเตอร์สมองกลฝังตัว (Microcontroller) การเขียนโปรแกรมควบคุมคอมพิวเตอร์และเว็บแอปพลิเคชัน การซ่อมแซมและบำรุงรักษาระบบเครือข่าย งานออกแบบโครงสร้างพื้นฐานเครือข่ายและระบบคลาวด์เบื้องต้น </p> </div> <!-- Timeline Item 2 --> <div class="relative"> <!-- Node point --> <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-[#0a0a0f] border-2 border-gray-600 flex items-center justify-center"> <div class="w-1.5 h-1.5 rounded-full bg-gray-500"></div> </div> <div class="inline-flex px-2 py-0.5 bg-gray-800/50 border border-gray-700 text-gray-400 font-share-tech text-xs tracking-wider mb-2"> 2021 - 2024 </div> <h5 class="font-orbitron font-bold text-gray-300 text-base sm:text-lg"> ระดับประกาศนียบัตรวิชาชีพ (ปวช.) </h5> <p class="font-share-tech text-sm text-[#00f0ff]/70 mb-2"> สาขางานอิเล็กทรอนิกส์ / คอมพิวเตอร์ </p> <p class="text-gray-400 text-xs font-bold mb-2"> วิทยาลัยเทคโนโลยีโปลิเทคนิคลานนาเชียงใหม่ </p> <p class="text-gray-500 text-xs leading-relaxed"> ศึกษาโครงสร้างพื้นฐานทางอิเล็กทรอนิกส์ การออกแบบแผ่นวงจรพิมพ์ (PCB Design) ระบบไฟฟ้ายานยนต์และเครื่องขยายเสียง สัญญาณดิจิทัลเบื้องต้น และโครงสร้างการทำงานเชิงฮาร์ดแวร์ของระบบประมวลผลคอมพิวเตอร์ </p> </div> </div> </div> </div> </div> </div> <!-- Bottom Section Divider (Tech line) --> <div class="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#0055ff]/30 to-transparent"> </div> </section> <!-- SKILLS SECTION --> <section id="skills" class="py-24 relative overflow-hidden z-10"> <!-- Tech grid background --> <div class="absolute inset-0 grid-lines opacity-10 pointer-events-none"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="mb-16 text-center"> <div class="flex items-center justify-center gap-3 mb-2"> <span class="text-[#39ff14] font-share-tech tracking-wider text-sm">[ SEC_03 ]</span> <div class="h-[1px] w-12 bg-[#39ff14]/30"></div> </div> <h3 class="font-orbitron font-black text-3xl sm:text-4xl text-white uppercase tracking-wider"> TECHNICAL <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#39ff14] to-[#00f0ff]">MATRIX</span> </h3> <div class="mt-3 h-[2px] w-24 bg-gradient-to-r from-[#39ff14] to-transparent mx-auto"></div> </div> <!-- Skills Panels Grid (Hardware vs Software) --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <!-- Part 1: Hardware & Electronics --> <div class="cyber-card relative bg-[#0a0a0f]/80 border border-[#39ff14]/20 p-8 rounded-sm shadow-[0_0_15px_rgba(57,255,20,0.05)]"> <h4 class="font-orbitron text-lg font-bold text-white tracking-wider uppercase mb-8 flex items-center gap-3 border-b border-[#39ff14]/15 pb-4"> <i class="fa-solid fa-microchip text-[#39ff14]"></i> 01 // HARDWARE & ELECTRONICS </h4> <div class="space-y-6"> <!-- Skill 1 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">MICROCONTROLLER & EMBEDDED SYSTEMS (Arduino, ESP32, ESP8266)</span> <span class="text-[#39ff14]">85%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#39ff14] to-[#00f0ff] h-full rounded-full shadow-[0_0_8px_#39ff14]" style="width: 85%"></div> </div> </div> <!-- Skill 2 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">CIRCUIT DESIGN & PCB LAYOUT (Proteus, EasyEDA)</span> <span class="text-[#39ff14]">75%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#39ff14] to-[#00f0ff] h-full rounded-full shadow-[0_0_8px_#39ff14]" style="width: 75%"></div> </div> </div> <!-- Skill 3 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">IOT (INTERNET OF THINGS) PROTOCOLS (MQTT, Blynk, API Integrations)</span> <span class="text-[#39ff14]">80%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#39ff14] to-[#00f0ff] h-full rounded-full shadow-[0_0_8px_#39ff14]" style="width: 80%"></div> </div> </div> <!-- Skill 4 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">COMPUTER REPAIR & HARDWARE ASSEMBLY</span> <span class="text-[#39ff14]">90%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#39ff14] to-[#00f0ff] h-full rounded-full shadow-[0_0_8px_#39ff14]" style="width: 90%"></div> </div> </div> <!-- Skill 5 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">UTILITY WIRING & DIGITAL INSTRUMENTATION</span> <span class="text-[#39ff14]">80%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#39ff14] to-[#00f0ff] h-full rounded-full shadow-[0_0_8px_#39ff14]" style="width: 80%"></div> </div> </div> </div> </div> <!-- Part 2: Software & Computer Systems --> <div class="cyber-card relative bg-[#0a0a0f]/80 border border-[#00f0ff]/20 p-8 rounded-sm shadow-[0_0_15px_rgba(0,240,255,0.05)]"> <h4 class="font-orbitron text-lg font-bold text-white tracking-wider uppercase mb-8 flex items-center gap-3 border-b border-[#00f0ff]/15 pb-4"> <i class="fa-solid fa-code text-[#00f0ff]"></i> 02 // SOFTWARE & COMPUTER SYSTEMS </h4> <div class="space-y-6"> <!-- Skill 1 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">WEB DEVELOPMENT (HTML5, CSS3, Tailwind CSS, JavaScript)</span> <span class="text-[#00f0ff]">80%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] h-full rounded-full shadow-[0_0_8px_#00f0ff]" style="width: 80%"></div> </div> </div> <!-- Skill 2 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">PROGRAMMING LANGUAGES (C, C++, Python, PHP)</span> <span class="text-[#00f0ff]">70%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] h-full rounded-full shadow-[0_0_8px_#00f0ff]" style="width: 70%"></div> </div> </div> <!-- Skill 3 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">COMPUTER NETWORKING (LAN, WAN, TCP/IP, DNS, Router Config)</span> <span class="text-[#00f0ff]">75%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] h-full rounded-full shadow-[0_0_8px_#00f0ff]" style="width: 75%"></div> </div> </div> <!-- Skill 4 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">OPERATING SYSTEMS (Linux Server, Windows Server management)</span> <span class="text-[#00f0ff]">70%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] h-full rounded-full shadow-[0_0_8px_#00f0ff]" style="width: 70%"></div> </div> </div> <!-- Skill 5 --> <div> <div class="flex justify-between font-share-tech text-sm mb-2"> <span class="text-gray-300">DATABASES & VERSION CONTROL (MySQL, SQLite, Git & GitHub)</span> <span class="text-[#00f0ff]">65%</span> </div> <div class="w-full bg-gray-900 h-2 rounded-full overflow-hidden border border-gray-800"> <div class="bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14] h-full rounded-full shadow-[0_0_8px_#00f0ff]" style="width: 65%"></div> </div> </div> </div> </div> </div> </div> <!-- Bottom Section Divider (Tech line) --> <div class="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#39ff14]/30 to-transparent"> </div> </section> <!-- PROJECT SECTION --> <section id="projects" class="py-24 relative overflow-hidden z-10 bg-[#0d0d16]/30"> <!-- Tech grid background --> <div class="absolute inset-0 grid-lines opacity-10 pointer-events-none"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="mb-16 text-center"> <div class="flex items-center justify-center gap-3 mb-2"> <span class="text-[#00f0ff] font-share-tech tracking-wider text-sm">[ SEC_04 ]</span> <div class="h-[1px] w-12 bg-[#00f0ff]/30"></div> </div> <h3 class="font-orbitron font-black text-3xl sm:text-4xl text-white uppercase tracking-wider"> COMPLETED <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] to-[#0055ff]">ARCHIVES</span> </h3> <div class="mt-3 h-[2px] w-24 bg-gradient-to-r from-[#00f0ff] to-transparent mx-auto"></div> </div> <!-- Project Filters --> <div class="flex justify-center flex-wrap gap-3 mb-12 font-share-tech"> <button class="project-filter-btn active" data-filter="all">ALL_ARCHIVES</button> <button class="project-filter-btn" data-filter="hardware">HARDWARE_IoT</button> <button class="project-filter-btn" data-filter="network">NETWORKING</button> <button class="project-filter-btn" data-filter="software">SOFTWARE_WEB</button> </div> <!-- Project Card Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project Card 1 (Hardware / IoT) --> <div class="project-card cyber-card bg-[#0d0d16] border border-gray-800 hover:border-[#00f0ff]/50 rounded-sm overflow-hidden flex flex-col group transition-all duration-300" data-category="hardware"> <!-- Top visual/placeholder --> <div class="h-48 w-full bg-black/60 relative overflow-hidden flex items-center justify-center border-b border-gray-900"> <div class="absolute inset-0 bg-cover bg-center group-hover:scale-110 transition-transform duration-500 opacity-60" style="background-image: url('images/project_iot.png');"> </div> <div class="absolute top-3 left-3 bg-[#39ff14]/10 border border-[#39ff14]/30 px-2 py-0.5 text-[10px] text-[#39ff14] font-share-tech uppercase tracking-wider"> Hardware // IoT </div> <span class="absolute top-0 right-0 w-8 h-8 bg-gray-900 border-b border-l border-gray-800 clip-card-corner"></span> </div> <!-- Details --> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h4 class="font-orbitron font-bold text-white text-base group-hover:text-[#00f0ff] transition-colors duration-300 uppercase mb-2"> Smart Agriculture IoT System </h4> <p class="text-gray-400 text-xs leading-relaxed mb-4"> ระบบเกษตรอัจฉริยะควบคุมความชื้นในดินและอุณหภูมิในโรงเรียนอัตโนมัติ โดยใช้บอร์ด ESP32 เชื่อมต่อเซ็นเซอร์วัดความชื้นและรีเลย์ ส่งข้อมูลแบบเรียลไทม์ขึ้น Blynk App </p> </div> <div> <div class="flex flex-wrap gap-1.5 mb-4"> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">ESP32</span> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">C++</span> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">Blynk API</span> </div> <a href="#projects" class="font-share-tech text-xs text-[#00f0ff] hover:text-white transition-colors duration-200 flex items-center gap-1.5"> <i class="fa-solid fa-folder-open"></i> VIEW_SPEC_DATA </a> </div> </div> </div> <!-- Project Card 2 (Networking) --> <div class="project-card cyber-card bg-[#0d0d16] border border-gray-800 hover:border-[#00f0ff]/50 rounded-sm overflow-hidden flex flex-col group transition-all duration-300" data-category="network"> <!-- Top visual/placeholder --> <div class="h-48 w-full bg-black/60 relative overflow-hidden flex items-center justify-center border-b border-gray-900"> <div class="absolute inset-0 bg-cover bg-center group-hover:scale-110 transition-transform duration-500 opacity-60" style="background-image: url('images/project_network.png');"> </div> <div class="absolute top-3 left-3 bg-[#00f0ff]/10 border border-[#00f0ff]/30 px-2 py-0.5 text-[10px] text-[#00f0ff] font-share-tech uppercase tracking-wider"> Networking </div> <span class="absolute top-0 right-0 w-8 h-8 bg-gray-900 border-b border-l border-gray-800 clip-card-corner"></span> </div> <!-- Details --> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h4 class="font-orbitron font-bold text-white text-base group-hover:text-[#00f0ff] transition-colors duration-300 uppercase mb-2"> LAN & Windows Server Lab Setup </h4> <p class="text-gray-400 text-xs leading-relaxed mb-4"> การจัดจำลองระบบเครือข่ายภายในห้องแล็บคอมพิวเตอร์ กำหนดค่า Active Directory Domain Controller, DHCP, DNS, และ File Sharing บน Windows Server 2022 ในสภาพแวดล้อมเสมือนจริง </p> </div> <div> <div class="flex flex-wrap gap-1.5 mb-4"> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">Windows Server</span> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">AD DS</span> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">VLAN</span> </div> <a href="#projects" class="font-share-tech text-xs text-[#00f0ff] hover:text-white transition-colors duration-200 flex items-center gap-1.5"> <i class="fa-solid fa-folder-open"></i> VIEW_SPEC_DATA </a> </div> </div> </div> <!-- Project Card 3 (Software / Web) --> <div class="project-card cyber-card bg-[#0d0d16] border border-gray-800 hover:border-[#00f0ff]/50 rounded-sm overflow-hidden flex flex-col group transition-all duration-300" data-category="software"> <!-- Top visual/placeholder --> <div class="h-48 w-full bg-black/60 relative overflow-hidden flex items-center justify-center border-b border-gray-900"> <div class="absolute inset-0 bg-cover bg-center group-hover:scale-110 transition-transform duration-500 opacity-60" style="background-image: url('images/project_web.png');"> </div> <div class="absolute top-3 left-3 bg-[#0055ff]/10 border border-[#0055ff]/30 px-2 py-0.5 text-[10px] text-[#0055ff] font-share-tech uppercase tracking-wider"> Web Dev // Software </div> <span class="absolute top-0 right-0 w-8 h-8 bg-gray-900 border-b border-l border-gray-800 clip-card-corner"></span> </div> <!-- Details --> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h4 class="font-orbitron font-bold text-white text-base group-hover:text-[#00f0ff] transition-colors duration-300 uppercase mb-2"> Hardware Control Web Console </h4> <p class="text-gray-400 text-xs leading-relaxed mb-4"> เว็บหน้าควบคุมอุปกรณ์ฮาร์ดแวร์ภายนอกผ่าน HTTP Request/API พัฒนาหน้าจอ Dashboard สวยงาม แสดงผลอุณหภูมิ-ความชื้นแบบกราฟเส้น และสามารถคลิกควบคุมสวิตช์รีเลย์ได้ </p> </div> <div> <div class="flex flex-wrap gap-1.5 mb-4"> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">HTML/CSS</span> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">Vanilla JS</span> <span class="text-[10px] font-share-tech px-2 py-0.5 bg-gray-950 text-gray-400 border border-gray-800">WebSockets</span> </div> <a href="#projects" class="font-share-tech text-xs text-[#00f0ff] hover:text-white transition-colors duration-200 flex items-center gap-1.5"> <i class="fa-solid fa-folder-open"></i> VIEW_SPEC_DATA </a> </div> </div> </div> </div> </div> <!-- Bottom Section Divider (Tech line) --> <div class="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#00f0ff]/30 to-transparent"> </div> </section> <!-- CONTACT & FOOTER SECTION --> <section id="contact" class="py-24 relative overflow-hidden z-10"> <!-- Tech grid background --> <div class="absolute inset-0 grid-lines opacity-10 pointer-events-none"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="mb-16 text-center"> <div class="flex items-center justify-center gap-3 mb-2"> <span class="text-[#00f0ff] font-share-tech tracking-wider text-sm">[ SEC_05 ]</span> <div class="h-[1px] w-12 bg-[#00f0ff]/30"></div> </div> <h3 class="font-orbitron font-black text-3xl sm:text-4xl text-white uppercase tracking-wider"> ESTABLISH <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] via-[#0055ff] to-[#39ff14]">CONNECTION</span> </h3> <div class="mt-3 h-[2px] w-24 bg-gradient-to-r from-[#00f0ff] to-transparent mx-auto"></div> </div> <!-- Contact Panel Grid --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-stretch"> <!-- Left: Holographic Info Panels (5 cols) --> <div class="lg:col-span-5 space-y-6"> <!-- Call Sign Panel --> <div class="cyber-card relative bg-[#0a0a0f]/80 border border-[#00f0ff]/20 p-6 rounded-sm"> <div class="absolute -top-[1px] -left-[1px] w-4 h-4 bg-[#00f0ff] clip-triangle-left"></div> <h4 class="font-orbitron text-xs font-bold text-gray-400 uppercase tracking-widest mb-4"> // COMM_CHANNELS </h4> <div class="space-y-4"> <!-- Contact item 1: Phone --> <div class="flex items-center justify-between p-3 bg-black/40 border border-gray-800 rounded-sm"> <div class="flex items-center gap-3"> <div class="text-[#39ff14] text-lg w-5 text-center"><i class="fa-solid fa-phone"></i></div> <div> <div class="text-[10px] text-gray-500 font-share-tech">PHONE_VOICE</div> <div class="text-white text-sm font-share-tech font-bold" id="text-phone"> 097-285-9019</div> </div> </div> <button onclick="copyToClipboard('097-285-9019', 'phone-copy-status')" class="text-gray-500 hover:text-[#39ff14] transition-colors relative" aria-label="Copy Phone Number"> <i class="fa-solid fa-copy"></i> <span id="phone-copy-status" class="absolute bottom-6 right-0 bg-[#39ff14] text-black text-[9px] px-1.5 py-0.5 rounded font-share-tech opacity-0 transition-opacity whitespace-nowrap">COPIED!</span> </button> </div> <!-- Contact item 2: Email --> <div class="flex items-center justify-between p-3 bg-black/40 border border-gray-800 rounded-sm"> <div class="flex items-center gap-3"> <div class="text-[#00f0ff] text-lg w-5 text-center"><i class="fa-solid fa-envelope"></i></div> <div> <div class="text-[10px] text-gray-500 font-share-tech">EMAIL_ADDR</div> <div class="text-white text-sm font-share-tech font-bold" id="text-email"> ppongpai2017@gmail.com</div> </div> </div> <button onclick="copyToClipboard('ppongpai2017@gmail.com', 'email-copy-status')" class="text-gray-500 hover:text-[#00f0ff] transition-colors relative" aria-label="Copy Email"> <i class="fa-solid fa-copy"></i> <span id="email-copy-status" class="absolute bottom-6 right-0 bg-[#00f0ff] text-black text-[9px] px-1.5 py-0.5 rounded font-share-tech opacity-0 transition-opacity whitespace-nowrap">COPIED!</span> </button> </div> <!-- Contact item 3: GitHub --> <div class="flex items-center justify-between p-3 bg-black/40 border border-gray-800 rounded-sm"> <div class="flex items-center gap-3"> <div class="text-[#0055ff] text-lg w-5 text-center"><i class="fa-brands fa-github"></i></div> <div> <div class="text-[10px] text-gray-500 font-share-tech">GITHUB_REPO</div> <div class="text-white text-sm font-share-tech font-bold">github.com/suraphot-y </div> </div> </div> <a href="https://github.com/suraphot-y" target="_blank" class="text-gray-500 hover:text-[#0055ff] transition-colors" aria-label="Visit GitHub Profile"> <i class="fa-solid fa-arrow-up-right-from-square"></i> </a> </div> <!-- Contact item 4: LinkedIn --> <div class="flex items-center justify-between p-3 bg-black/40 border border-gray-800 rounded-sm"> <div class="flex items-center gap-3"> <div class="text-[#00f0ff] text-lg w-5 text-center"><i class="fa-brands fa-linkedin-in"></i></div> <div> <div class="text-[10px] text-gray-500 font-share-tech">LINKEDIN_PROF</div> <div class="text-white text-sm font-share-tech font-bold"> linkedin.com/in/suraphot-yakanmoon</div> </div> </div> <a href="https://linkedin.com" target="_blank" class="text-gray-500 hover:text-[#00f0ff] transition-colors" aria-label="Visit LinkedIn Profile"> <i class="fa-solid fa-arrow-up-right-from-square"></i> </a> </div> </div> </div> <!-- Tech Status Panel --> <div class="bg-black/60 border border-gray-800/80 p-6 rounded-sm text-xs font-share-tech text-gray-400 space-y-3"> <div class="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] to-[#39ff14] text-xs font-bold uppercase tracking-wider"> > TRANSMITTER_NODE_STATUS </div> <p class="leading-relaxed"> ระบบพร้อมทำการตอบรับข้อมูล ข้อเสนอร่วมงานโปรเจกต์ หรือการฝึกงานในตำแหน่งผู้ช่วยวิศวกรคอมพิวเตอร์และอิเล็กทรอนิกส์ </p> <div class="flex items-center justify-between pt-2 border-t border-gray-900"> <span>ENCRYPTION:</span> <span class="text-white">AES-256 SYSTEM</span> </div> <div class="flex items-center justify-between"> <span>PING STATE:</span> <span class="text-[#39ff14] flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-[#39ff14] animate-pulse"></span> 14ms (EXCELLENT)</span> </div> </div> </div> <!-- Right: Futuristic Contact Form (7 cols) --> <div class="lg:col-span-7"> <form action="#" id="cyber-contact-form" class="cyber-card relative bg-[#0d0d16]/80 backdrop-blur-md border border-[#00f0ff]/30 p-8 rounded-sm h-full flex flex-col justify-between"> <!-- Top header --> <div class="mb-6"> <h4 class="font-orbitron text-base font-bold text-white tracking-wider uppercase mb-1"> SEND MESSAGE DIRECTLY </h4> <p class="font-share-tech text-[10px] text-gray-500"> ENTER IDENTIFICATION & CORRESPONDENCE BODY </p> </div> <!-- Inputs --> <div class="space-y-4 mb-6"> <div class="relative"> <label for="form-name" class="block font-share-tech text-[10px] text-[#00f0ff] uppercase mb-1">Sender Name (ชื่อผู้ติดต่อ)</label> <input type="text" id="form-name" required class="w-full bg-black/60 border border-gray-800 focus:border-[#00f0ff] focus:outline-none px-4 py-2.5 rounded-sm font-share-tech text-sm text-white tracking-wide transition-colors"> <span class="absolute bottom-0 right-0 w-2 h-[2px] bg-[#00f0ff]"></span> </div> <div class="relative"> <label for="form-email" class="block font-share-tech text-[10px] text-[#00f0ff] uppercase mb-1">Return Comm Channel (อีเมลติดต่อกลับ)</label> <input type="email" id="form-email" required class="w-full bg-black/60 border border-gray-800 focus:border-[#00f0ff] focus:outline-none px-4 py-2.5 rounded-sm font-share-tech text-sm text-white tracking-wide transition-colors"> <span class="absolute bottom-0 right-0 w-2 h-[2px] bg-[#00f0ff]"></span> </div> <div class="relative"> <label for="form-message" class="block font-share-tech text-[10px] text-[#00f0ff] uppercase mb-1">Transmission Data (ข้อความ)</label> <textarea id="form-message" required rows="4" class="w-full bg-black/60 border border-gray-800 focus:border-[#00f0ff] focus:outline-none px-4 py-2.5 rounded-sm font-share-tech text-sm text-white tracking-wide transition-colors resize-none"></textarea> <span class="absolute bottom-0 right-0 w-2 h-[2px] bg-[#00f0ff]"></span> </div> </div> <!-- Submit Button --> <button type="submit" class="cyber-btn primary w-full text-center font-share-tech"> <span class="cyber-btn-inner justify-center py-3"> <i class="fa-solid fa-paper-plane mr-2 animate-bounce"></i>INITIATE_TRANSMISSION </span> </button> </form> </div> </div> </div> <!-- Scroll to Top Button --> <a href="#home" id="scroll-top-btn" class="fixed bottom-6 right-6 z-40 bg-[#0a0a0f] border border-[#00f0ff] hover:bg-[#00f0ff]/10 hover:shadow-[0_0_15px_#00f0ff] text-[#00f0ff] w-10 h-10 flex items-center justify-center rounded-sm transition-all duration-300 opacity-0 pointer-events-none" aria-label="Scroll to Top"> <i class="fa-solid fa-arrow-up"></i> </a> </section> <!-- FOOTER --> <footer class="bg-black py-8 border-t border-gray-900 font-share-tech text-xs tracking-wider z-10 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4"> <!-- Left Info --> <div class="text-gray-500 text-center md:text-left"> © 2026 SURAPHOT YAKANMOON. ALL RIGHTS RESERVED. <div class="text-[10px] mt-1 text-gray-600">DESIGNED WITH CYBERPUNK THEME // SECURED CONSOLE</div> </div> <!-- Middle Status --> <div class="flex items-center gap-6 text-gray-500"> <span>V1.0.9-RELEASE</span> <span class="h-3 w-[1px] bg-gray-800"></span> <span>STATUS: <span class="text-[#39ff14]">OK</span></span> </div> <!-- Right credits --> <div class="text-gray-500 text-center md:text-right"> BUILD: HTML5.CSS3.JS <div class="text-[10px] mt-1 text-[#00f0ff]">LOCATION: CHIANG MAI, TH</div> </div> </div> </footer> <!-- Form Submit Success Modal (Glassmorphism Cyberpunk) --> <div id="success-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm opacity-0 pointer-events-none transition-all duration-300"> <div class="cyber-card max-w-md w-full bg-[#0d0d16] border border-[#39ff14] p-8 rounded-sm relative shadow-[0_0_30px_rgba(57,255,20,0.2)]"> <!-- Cut corner --> <div class="absolute -top-[1px] -right-[1px] w-6 h-6 bg-[#39ff14] clip-triangle"></div> <div class="text-center space-y-4"> <div class="w-16 h-16 rounded-full border-2 border-[#39ff14] flex items-center justify-center text-[#39ff14] text-2xl mx-auto mb-4 animate-pulse"> <i class="fa-solid fa-check"></i> </div> <h4 class="font-orbitron font-bold text-white text-xl uppercase tracking-wider"> TRANSMISSION SUCCESSFUL </h4> <p class="font-share-tech text-sm text-gray-400"> ข้อมูลของท่านได้ถูกส่งไปยังระบบหลักของ Suraphot เรียบร้อยแล้ว ระบบจะทำการตอบกลับโดยเร็วที่สุด </p> <div class="font-mono text-[10px] text-[#39ff14]/70 bg-black/60 p-2.5 rounded border border-gray-900/60 uppercase"> > connection_established_ok </div> <button onclick="closeModal()" class="cyber-btn primary w-full text-center font-share-tech mt-6"> <span class="cyber-btn-inner justify-center py-2.5"> DISMISS_DIALOG </span> </button> </div> </div> </div> <!-- Script File --> <script src="script.js"></script> </body> </html>

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