File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090048/portfolio/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio \| Suphakol Linecome</title> <meta name="description" content="Personal portfolio of David Johnson, showcasing premium web design and development with a minimal, dark wood aesthetic and Thai support."> <!-- Google Fonts for English and Thai (Prompt & Cinzel) --> <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=Cinzel:wght@400;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- FontAwesome for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* Color Palette & Custom Design Tokens / :root { --bg-black: #0a0604; --bg-dark-gray: #120d0a; --wood-dark: #1a0f08; --wood-medium: #2c1a0e; --wood-accent: #5c351c; --wood-light: #8a5330; --warm-light-color: rgba(224, 130, 68, 0.16); --gold-accent: #d4af37; --text-primary: #f5f2eb; --text-secondary: #c0b8b0; --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); --font-display: 'Cinzel', serif; --font-body: 'Prompt', sans-serif; } / Reset & Base Styles / { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { background-color: var(--bg-black); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; position: relative; } /* Dark Walnut CSS Wood Grain Background Pattern / .wood-background-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2; / Vertical wood plank joints and fine horizontal grain lines / background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0px, transparent 1px, transparent 180px, rgba(0, 0, 0, 0.75) 181px), repeating-linear-gradient(0deg, rgba(26, 15, 8, 0.08) 0px, rgba(26, 15, 8, 0.08) 2px, transparent 2px, transparent 4px), linear-gradient(135deg, rgba(26, 15, 8, 0.7) 0%, rgba(10, 6, 4, 0.98) 100%); background-size: 180px 100%, 100% 4px, 100% 100%; opacity: 0.95; } / Warm Ambient Light Pulse Animation / .warm-ambient-light { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; background: radial-gradient(circle at 50% -20%, var(--warm-light-color) 0%, transparent 65%); animation: warmPulse 12s ease-in-out infinite alternate; } @keyframes warmPulse { 0% { opacity: 0.65; background: radial-gradient(circle at 45% -25%, rgba(224, 130, 68, 0.12) 0%, transparent 60%); filter: blur(40px); } 50% { opacity: 0.85; background: radial-gradient(circle at 55% -15%, rgba(224, 130, 68, 0.20) 0%, transparent 70%); filter: blur(60px); } 100% { opacity: 1.0; background: radial-gradient(circle at 50% -20%, rgba(224, 130, 68, 0.16) 0%, transparent 65%); filter: blur(50px); } } / Custom Scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-black); } ::-webkit-scrollbar-thumb { background: var(--wood-medium); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--wood-accent); } / Typography & Globals / h1, h2, h3, h4 { letter-spacing: 2px; font-weight: 600; } section { padding: 120px 24px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } a { color: inherit; text-decoration: none; transition: var(--transition-smooth); } / Navigation / header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(10, 6, 4, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(138, 83, 48, 0.12); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 4px; background: linear-gradient(135deg, var(--text-primary), var(--wood-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; list-style: none; gap: 40px; } .nav-links a { font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; position: relative; padding: 6px 0; color: var(--text-secondary); } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--wood-light); transition: var(--transition-smooth); } .nav-links a:hover { color: var(--text-primary); } .nav-links a:hover::after { width: 100%; } / Button Styling / .btn { padding: 16px 36px; border-radius: 2px; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); display: inline-flex; align-items: center; gap: 12px; } .btn-primary { background: linear-gradient(135deg, var(--wood-medium), var(--wood-dark)); color: var(--text-primary); border: 1px solid var(--wood-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(138, 83, 48, 0.25); background: linear-gradient(135deg, var(--wood-accent), var(--wood-medium)); border-color: var(--wood-light); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid rgba(245, 242, 235, 0.2); } .btn-secondary:hover { border-color: var(--wood-light); background: rgba(138, 83, 48, 0.08); transform: translateY(-4px); } / Section Headings / .section-header { margin-bottom: 70px; } .section-header h2 { font-size: clamp(2rem, 5vw, 2.75rem); font-family: var(--font-display); position: relative; display: inline-block; padding-bottom: 18px; color: var(--text-primary); } .section-header h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 2px; background-color: var(--wood-light); } .section-header p { color: var(--text-secondary); margin-top: 20px; font-size: 1rem; max-width: 600px; font-weight: 300; } / Responsive Media Queries & Container Adjustments / @media (max-width: 768px) { section { padding: 80px 20px; } .nav-links { gap: 20px; } .btn { width: 100%; justify-content: center; } } </style> </head> <body> <!-- CSS patterns and pulsing glow overlay container --> <div class="wood-background-pattern"></div> <div class="warm-ambient-light"></div> <!-- Navigation Header --> <header> <div class="nav-container"> <a href="#" class="logo">PORTFOLIO</a> <nav> <ul class="nav-links"> <li><a href="#about">About</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> </header> <!-- /************************************************************** HERO SECTION Text on the left side, Profile Image on the right side. ***************************************************************/ --> <style> .hero { min-height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 60px; padding-top: 140px; } .hero-left { flex: 1 1 auto; } .hero-right { flex: 0 0 auto; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s; } / Profile Image Container with Pulsing Dark Wood Frame / .profile-frame-container { width: 280px; height: 280px; border-radius: 24px; / Rounded Square / padding: 10px; background: linear-gradient(135deg, var(--wood-medium), var(--wood-dark)); border: 1px solid var(--wood-accent); box-shadow: 0 0 0 0 rgba(92, 53, 28, 0.7); animation: frameWoodPulse 2.5s infinite ease-in-out; display: flex; align-items: center; justify-content: center; } .profile-img-element { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; / Smooth matching inner curve / } @keyframes frameWoodPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(138, 83, 48, 0.5); } 50% { transform: scale(1.02); box-shadow: 0 0 25px 8px rgba(138, 83, 48, 0.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(138, 83, 48, 0); } } .hero-pretitle { font-size: 1rem; color: var(--wood-light); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 15px; font-weight: 600; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; } .hero-title { font-size: clamp(3rem, 6vw, 5.5rem); font-family: var(--font-display); line-height: 1.1; margin-bottom: 25px; font-weight: 700; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s; } .hero-title span { color: var(--wood-light); background: linear-gradient(180deg, var(--text-primary), var(--wood-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: var(--text-secondary); max-width: 650px; margin-bottom: 45px; font-weight: 300; line-height: 1.7; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.7s; } .hero-cta { display: flex; gap: 20px; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.9s; width: 100%; } @keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } } / Mobile interface design layout constraints / @media (max-width: 768px) { .hero { flex-direction: column-reverse; / Stacks image top-most or nicely in flow on smaller viewports / justify-content: center; align-items: center; text-align: center; padding-top: 100px; gap: 40px; } .profile-frame-container { width: 220px; height: 220px; } .hero-cta { flex-direction: column; gap: 15px; } } </style> <section id="hero" class="hero"> <!-- Text Content on the Left Side --> <div class="hero-left"> <div class="hero-pretitle">Online Guildsman and Basic Coder</div> <h1 class="hero-title">SUPHAKOL<br><span>LINECOME</span></h1> <p class="hero-subtitle"> Online Guildsman, Service support and Basic Troubleshooting about Computer in Both English and Thai Language. <br> <span style="font-size: 0.95rem; opacity: 0.8; display: block; margin-top: 10px;"> ผู้ให้คำปรึกษาเเละคำเเนะนำเกียวกับการเลือกซื้อคอมพิวเตอร์ เเละการเเก้ไขปัญหาคอมพิวเตอร์เบื้องต้นในสื่อสังคมออนไลน์ควบคู่ทั้งสองภาษา </span> </p> <div class="hero-cta"> <a href="#projects" class="btn btn-primary">View Projects <i class="fa-solid fa-arrow-right"></i></a> <a href="#contact" class="btn btn-secondary">Get In Touch</a> </div> </div> <!-- Profile Image on the Right Side --> <div class="hero-right"> <div class="profile-frame-container"> <img src="IMG_20260701_144141.jpg" alt="Suphakol Linecome" class="profile-img-element"> </div> </div> </section> <!-- /************************************************************** ABOUT SECTION (AESTHETIC ADDITION) Modify your professional bio, story, and skills listed below. **************************************************************/ --> <style> .about-wrapper { display: grid; grid-template-columns: 1fr; gap: 50px; } .about-text { font-size: 1.1rem; color: var(--text-secondary); font-weight: 300; line-height: 1.8; margin-bottom: 30px; } .about-skills { display: flex; flex-wrap: wrap; gap: 15px; } .skill-badge { background: rgba(92, 53, 28, 0.1); border: 1px solid rgba(138, 83, 48, 0.2); color: var(--text-primary); padding: 10px 20px; border-radius: 2px; font-size: 0.85rem; letter-spacing: 1px; transition: var(--transition-smooth); } .skill-badge:hover { background: rgba(138, 83, 48, 0.2); border-color: var(--wood-light); transform: translateY(-3px); } @media (min-width: 768px) { .about-wrapper { grid-template-columns: 3fr 2fr; align-items: center; } } </style> <section id="about" class="reveal"> <div class="section-header"> <h2>ABOUT ME</h2> <p>ข้อมูลส่วนตัวเกี่ยวกับตัวฉัน</p> </div> <div class="about-wrapper"> <div class="about-content"> <p class="about-text"> Hello, i am Suphakol Linecome. I am 18 and currently studying in chiangmai technical collage, Computer technology Division 1st year. I am capable of guild a basic computer knowledge on both Hardware and Software side. I am also Capable in writing a basic python code. And i am able to write, talk or chat in an English Language on both daily life and Social Media. </p> <p class="about-text" style="font-size: 1rem;"> สวัสดี ผมชื่อสุภคล ลายคำ ปัจจุบันอายุ 18 ปี กำลังศึกษาอยู่ที่วิทยาลัยเทคนิคเชียงใหม่ ชั้นปวส.1 สาขาอิเล็กทรอนิกส์: เทคโนโลยีคอมพิวเตอร์ ผมมีความสามารถในการเเนะนำความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์ในทั้งด้านฮาร์ดเเวร์เเละซอฟเเวร์ มีความรู้ด้านการเขียนโค้ดไพธอนเบื้องต้น เเละผมสามารถสนทนาอ่านเขียนเป็นภาษาอังกฤษทั้งในสื่อสังสังคมออนไลน์เเละในชีวิตประจำวัน </p> </div> <div class="about-skills"> <span class="skill-badge">Willing to innovates</span> <span class="skill-badge">Interest in new Discovery</span> <span class="skill-badge">Obsessed in PC and Tech world</span> <span class="skill-badge">In love with Complex Task</span> </div> </div> </section> <!-- /************************************************************* PROJECTS SECTION Modify the projects grid. 1 column on mobile, 3 columns on PC. **************************************************************/ --> <style> .projects-grid { display: grid; grid-template-columns: 1fr; gap: 35px; } .project-card { background-color: var(--bg-dark-gray); border: 1px solid rgba(138, 83, 48, 0.12); border-radius: 4px; overflow: hidden; transition: var(--transition-smooth); display: flex; flex-direction: column; height: 100%; } .project-card:hover { transform: translateY(-10px); border-color: rgba(138, 83, 48, 0.4); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(138, 83, 48, 0.05); } .project-image-box { height: 240px; position: relative; background-color: var(--wood-dark); border-bottom: 1px solid rgba(138, 83, 48, 0.15); display: flex; align-items: center; justify-content: center; overflow: hidden; } .project-card-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: var(--transition-smooth); } .project-card:hover .project-card-img { transform: scale(1.08); } .project-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%); transition: var(--transition-smooth); z-index: 1; } .project-card:hover .project-image-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%); } .project-icon { font-size: 3.5rem; color: var(--text-primary); text-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 2; transition: var(--transition-smooth); opacity: 0.85; } .project-card:hover .project-icon { transform: scale(1.15) rotate(5deg); color: var(--wood-light); } .project-details { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; } .project-category { font-size: 0.75rem; color: var(--wood-light); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; font-weight: 600; } .project-title { font-size: 1.35rem; margin-bottom: 15px; font-family: var(--font-display); color: var(--text-primary); } .project-description { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 25px; font-weight: 300; flex-grow: 1; line-height: 1.7; } .project-link { font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; width: fit-content; } .project-link i { transition: var(--transition-smooth); } .project-card:hover .project-link { color: var(--wood-light); } .project-card:hover .project-link i { transform: translateX(6px); } @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } } </style> <section id="projects" class="reveal"> <div class="section-header"> <h2>My Experience & knowledge.</h2> <p>คลังประสบการณ์เเละความรู้ของฉัน</p> </div> <div class="projects-grid"> <!-- Project 1 Card --> <article class="project-card"> <div class="project-image-box"> <img src="nick-morrison-FHnnjk1Yj7Y-unsplash.jpg" alt="Hardware" class="project-card-img"> <div class="project-image-overlay"></div> <!-- Updated with Laptop Icon --> <i class="fa-solid fa-laptop project-icon"></i> </div> <div class="project-details"> <div class="project-category">Hardware</div> <h3 class="project-title">ONLINE PC GUILDSMAN</h3> <p class="project-description"> Social media guides for computer hardware basics and troubleshooting. <br> <span style="font-size: 0.85rem; opacity: 0.8;"> การเเนะนำไกด์พื้นฐานคอมพิวเตอร์และการแก้ไขปัญหาเบื้องต้นในสื่อสังคมออนไลน์ </span> </p> <a href="#" class="project-link">Explore<i class="fa-solid fa-arrow-right-long"></i></a> </div> </article> <!-- Project 2 Card --> <article class="project-card"> <div class="project-image-box"> <img src="chris-ried-ieic5Tq8YMk-unsplash.jpg" alt="Software" class="project-card-img"> <div class="project-image-overlay"></div> <!-- Updated with Code Development Icon --> <i class="fa-solid fa-code project-icon"></i> </div> <div class="project-details"> <div class="project-category">Software</div> <h3 class="project-title">PYTHON CODING</h3> <p class="project-description"> Writing, Thinking, troubleshooting and solve a basic Python Codes. <br> <span style="font-size: 0.85rem; opacity: 0.8;"> การเขียน การใช้กระบวนการคิด เเละการเเก้ไขปัญหาเบื้องต้นในภาษาไพธอน </span> </p> <a href="#" class="project-link">Explore <i class="fa-solid fa-arrow-right-long"></i></a> </div> </article> <!-- Project 3 Card --> <article class="project-card"> <div class="project-image-box"> <img src="waldemar-brandt-U3Ptj3jafX8-unsplash.jpg" alt="Language" class="project-card-img"> <div class="project-image-overlay"></div> <!-- Updated with Learning Book Icon --> <i class="fa-solid fa-book-open project-icon"></i> </div> <div class="project-details"> <div class="project-category">Language</div> <h3 class="project-title">ENGLISH SPECIALIST</h3> <p class="project-description"> English reading, writing and Conversation both daily life and social. <br> <span style="font-size: 0.85rem; opacity: 0.8;"> การเขียน สื่อสาร เเละสนทนาด้วยภาษาอังกฤษในทั้งสื่อสังสังคมออนไลน์เเละในชีวิตประจำวัน </span> </p> <a href="#" class="project-link">Explore <i class="fa-solid fa-arrow-right-long"></i></a> </div> </article> </div> </section> <!-- /************************************************************* CONTACT SECTION Contains your call to action, email copy tool, and contact button. **************************************************************/ --> <style> .contact-container { text-align: center; } .contact-card { background: linear-gradient(145deg, var(--bg-dark-gray), #080504); border: 1px solid rgba(138, 83, 48, 0.2); max-width: 750px; margin: 0 auto; padding: 70px 45px; border-radius: 4px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7); position: relative; overflow: hidden; } .contact-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--wood-dark), var(--wood-light), var(--wood-dark)); } .email-copy-panel { margin: 35px auto; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: rgba(10, 6, 4, 0.8); border: 1px dashed rgba(138, 83, 48, 0.4); padding: 18px 30px; border-radius: 2px; position: relative; max-width: 480px; width: 100%; } .email-address-text { font-size: clamp(0.95rem, 3.5vw, 1.2rem); font-weight: 500; color: var(--text-primary); letter-spacing: 1px; user-select: all; } .email-copy-btn { background: transparent; border: none; color: var(--wood-light); cursor: pointer; font-size: 1.2rem; transition: var(--transition-smooth); padding: 5px; display: inline-flex; align-items: center; } .email-copy-btn:hover { color: var(--text-primary); transform: scale(1.18); } .email-copy-tooltip { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--wood-medium); color: var(--text-primary); padding: 6px 14px; font-size: 0.75rem; border-radius: 2px; opacity: 0; pointer-events: none; transition: var(--transition-smooth); letter-spacing: 1px; } .email-copy-tooltip.active { opacity: 1; transform: translateX(-50%) translateY(0); } </style> <section id="contact" class="reveal"> <div class="contact-container"> <div class="contact-card"> <div class="section-header" style="margin-bottom: 30px; text-align: center;"> <h2 style="display: inline-block;">Let's Connect</h2> <p style="margin: 15px auto 0 auto;"> Have an interest, like to simply chat with or want to request an Interview about myself ? Feel free to reach out. </p> <p style="margin: 5px auto 0 auto; font-size: 0.9rem; opacity: 0.85;"> มีความสนใจในตัวผม อยากเเชทด้วยเล็กๆน้อยๆ หรือนัดคุยสัมภาษณ์เเลกเปลี่ยนข้อมูล ? คุณสามารถส่งข้อความมาที่ผมได้เลย </p> </div> <div class="email-copy-panel"> <span class="email-address-text" id="target-email">rinnchann1@gmail.com</span> <button class="email-copy-btn" id="trigger-copy" title="Copy Email"> <i class="fa-regular fa-copy"></i> </button> <div class="email-copy-tooltip" id="status-tooltip">Copied / คัดลอกแล้ว!</div> </div> <div style="margin-top: 30px;"> <a href="mailto:examplegmail1@gmail.com" class="btn btn-primary"> Send Message <i class="fa-regular fa-envelope"></i> </a> </div> </div> </div> </section> <!-- /************************************************************* FOOTER SECTION Modify social icons, links, and copyright text details. ***************************************************************/ --> <style> footer { padding: 60px 24px; border-top: 1px solid rgba(138, 83, 48, 0.12); text-align: center; background-color: var(--bg-black); position: relative; z-index: 2; } .socials-row { display: flex; justify-content: center; gap: 24px; margin-bottom: 25px; } .socials-row a { width: 44px; height: 44px; border-radius: 50%; background: rgba(138, 83, 48, 0.05); border: 1px solid rgba(138, 83, 48, 0.15); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.1rem; } .socials-row a:hover { background: var(--wood-medium); color: var(--text-primary); border-color: var(--wood-light); transform: translateY(-4px); } .footer-copyright { font-size: 0.85rem; color: var(--text-secondary); letter-spacing: 1px; } </style> <footer> <div class="socials-row"> <a href="#" aria-label="GitHub"><i class="fa-brands fa-github"></i></a> <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a> <a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a> <a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook"></i></a> <a href="tel:+1234567890" aria-label="Phone"><i class="fa-solid fa-phone"></i></a> </div> <p class="footer-copyright">© 2026 Suphakol. All rights reserved. \| เพื่อนวัตกรรมเเห่งอนาคต</p> </footer> <!-- JavaScript Animations & Copy Interactions --> <script> // Scroll Reveal Animation Setup const revealElements = document.querySelectorAll('.reveal'); const checkReveal = () => { const triggerBottom = (window.innerHeight / 5) 4.2; revealElements.forEach(el => { const elementTop = el.getBoundingClientRect().top; if (elementTop < triggerBottom) { el.classList.add('active'); } }); }; window.addEventListener('scroll', checkReveal); // Initial call to render loaded sections checkReveal(); // Clipboard Copy Script const copyBtn = document.getElementById('trigger-copy'); const emailVal = document.getElementById('target-email').innerText; const copyStatus = document.getElementById('status-tooltip'); copyBtn.addEventListener('click', () => { navigator.clipboard.writeText(emailVal).then(() => { const icon = copyBtn.querySelector('i'); icon.className = 'fa-solid fa-check'; copyStatus.classList.add('active'); setTimeout(() => { icon.className = 'fa-regular fa-copy'; copyStatus.classList.remove('active'); }, 2000); }).catch(err => { console.error('Copy action failed: ', err); }); }); </script> </body> </html>

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