File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090041/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" /> <meta name="description" content="Portfolio ของ อนล ปูยอดเครือ (เพชร) - นักศึกษาผู้มีความหลงใหลในเทคโนโลยีและการสร้างสรรค์" /> <title>Petch \| Portfolio — Anol Puyodkrua</title> <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;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- ═══════════════════════════════════════════════════════════ ENTRY SCREEN / SPLASH PAGE ═══════════════════════════════════════════════════════════ --> <div id="entry-screen" class="entry-screen"> <canvas id="matrix-canvas"></canvas> <div class="entry-overlay"></div> <div class="entry-content"> <div class="entry-hex-grid"></div> <div class="entry-logo-wrap"> <div class="entry-ring ring-1"></div> <div class="entry-ring ring-2"></div> <div class="entry-ring ring-3"></div> <div class="entry-initials">AP</div> </div> <div class="entry-text-wrap"> <p class="entry-greeting">ยินดีต้อนรับสู่</p> <h1 class="entry-name glitch" data-text="PETCH PORTFOLIO">PETCH PORTFOLIO</h1> <p class="entry-subtitle">Anol Puyodkrua · <span class="neon-text">Digital Creative</span></p> <div class="entry-divider"></div> <p class="entry-desc">กด Enter เพื่อสัมผัสประสบการณ์ใหม่</p> </div> <button id="enter-btn" class="enter-btn" onclick="enterPortfolio()"> <span class="btn-border btn-border-top"></span> <span class="btn-border btn-border-right"></span> <span class="btn-border btn-border-bottom"></span> <span class="btn-border btn-border-left"></span> <span class="btn-text"> <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <polyline points="13 17 18 12 13 7"></polyline> <polyline points="6 17 11 12 6 7"></polyline> </svg> ENTER PORTFOLIO </span> </button> <div class="entry-scroll-hint"> <span></span><span></span><span></span> </div> </div> </div> <!-- ═══════════════════════════════════════════════════════════ TRANSITION OVERLAY ═══════════════════════════════════════════════════════════ --> <div id="transition-overlay" class="transition-overlay"> <div class="transition-lines"> <div class="tl tl1"></div> <div class="tl tl2"></div> <div class="tl tl3"></div> </div> <div class="transition-text">LOADING<span class="dots">...</span></div> </div> <!-- ═══════════════════════════════════════════════════════════ MAIN PORTFOLIO ═══════════════════════════════════════════════════════════ --> <div id="portfolio" class="portfolio hidden"> <!-- NAVBAR --> <nav id="navbar" class="navbar"> <div class="nav-container"> <a href="#hero" class="nav-logo"> <span class="logo-bracket">[</span>PETCH<span class="logo-dot">.</span><span class="logo-dev">DEV</span><span class="logo-bracket">]</span> </a> <div class="nav-links" id="nav-links"> <a href="#hero" class="nav-link active" data-section="hero">HOME</a> <a href="#about" class="nav-link" data-section="about">ABOUT</a> <a href="#skills" class="nav-link" data-section="skills">SKILLS</a> <a href="#hobbies" class="nav-link" data-section="hobbies">HOBBIES</a> <a href="#contact" class="nav-link" data-section="contact">CONTACT</a> </div> <button class="nav-hamburger" id="hamburger" onclick="toggleMenu()" aria-label="Toggle menu"> <span></span><span></span><span></span> </button> </div> </nav> <!-- ── HERO SECTION ── --> <section id="hero" class="section hero-section"> <canvas id="particles-canvas"></canvas> <div class="hero-grid-bg"></div> <div class="hero-container"> <div class="hero-left"> <div class="hero-badge"> <span class="badge-dot"></span> Available & Active </div> <h1 class="hero-title"> <span class="hero-greeting">สวัสดี, ฉันชื่อ</span> <span class="hero-name">อนล ปูยอดเครือ</span> <span class="hero-name-en">Anol Puyodkrua</span> </h1> <div class="hero-roles"> <span class="role-prefix"><</span> <span id="typed-role" class="typed-role"></span> <span class="role-cursor">\|</span> <span class="role-suffix">/></span> </div> <p class="hero-desc"> นักศึกษาอายุ 18 ปี ผู้หลงใหลในโลกเทคโนโลยีและความคิดสร้างสรรค์<br/> มีความกล้าแสดงออกและใฝ่รู้อยู่เสมอ 🚀 </p> <div class="hero-btns"> <a href="#contact" class="btn-primary">ติดต่อฉัน</a> <a href="#about" class="btn-secondary">ดูข้อมูลเพิ่มเติม</a> </div> <div class="hero-social"> <a href="https://www.facebook.com/Anol-Puyodkrua" target="_blank" class="social-link" title="Facebook" id="social-fb"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg> </a> <a href="https://instagram.com/petchisalwayshappy" target="_blank" class="social-link" title="Instagram" id="social-ig"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> </a> <a href="mailto:anonpuyodkrua1@gmail.com" class="social-link" title="Email" id="social-email"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> </a> <a href="tel:0930645246" class="social-link" title="Phone" id="social-phone"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8a19.79 19.79 0 01-3.07-8.67A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.29 6.29l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg> </a> </div> </div> <div class="hero-right"> <div class="profile-container"> <div class="profile-outer-ring"></div> <div class="profile-hex-ring"></div> <div class="profile-inner"> <img src="assets/img/profile.jpg" alt="Anol Puyodkrua - เพชร" class="profile-img" id="profile-photo" onerror="this.onerror=null;this.src='assets/img/profile_frame.png';" /> </div> <div class="profile-scan-line"></div> <div class="profile-corner pc1"></div> <div class="profile-corner pc2"></div> <div class="profile-corner pc3"></div> <div class="profile-corner pc4"></div> <div class="profile-tag"> <span class="tag-name">PETCH</span> <span class="tag-id">#001</span> </div> <div class="profile-orbit orbit-1"> <div class="orbit-dot"></div> </div> <div class="profile-orbit orbit-2"> <div class="orbit-dot"></div> </div> </div> </div> </div> <div class="hero-scroll-indicator"> <div class="scroll-mouse"> <div class="scroll-wheel"></div> </div> <span>SCROLL DOWN</span> </div> </section> <!-- ── ABOUT SECTION ── --> <section id="about" class="section about-section"> <div class="section-container"> <div class="section-header reveal"> <span class="section-tag">// 01</span> <h2 class="section-title">เกี่ยวกับฉัน <span class="title-accent">About Me</span></h2> <div class="section-line"></div> </div> <div class="about-grid"> <div class="about-card reveal"> <div class="about-card-header"> <div class="card-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> </div> <h3>ข้อมูลส่วนตัว</h3> </div> <div class="about-info-list"> <div class="info-item"> <span class="info-label">ชื่อ (TH)</span> <span class="info-value">อนล ปูยอดเครือ</span> </div> <div class="info-item"> <span class="info-label">ชื่อ (EN)</span> <span class="info-value">Mr. Anol Puyodkrua</span> </div> <div class="info-item"> <span class="info-label">ชื่อเล่น</span> <span class="info-value neon-text">เพชร (Petch)</span> </div> <div class="info-item"> <span class="info-label">วันเกิด</span> <span class="info-value">12 พฤศจิกายน 2550</span> </div> <div class="info-item"> <span class="info-label">อายุ</span> <span class="info-value">18 ปี</span> </div> </div> </div> <div class="about-card reveal" style="--delay:0.15s"> <div class="about-card-header"> <div class="card-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg> </div> <h3>ช่องทางติดต่อ</h3> </div> <div class="about-info-list"> <div class="info-item"> <span class="info-label">📞 โทรศัพท์</span> <span class="info-value"><a href="tel:0930645246">093-064-5246</a></span> </div> <div class="info-item"> <span class="info-label">✉️ อีเมล</span> <span class="info-value"><a href="mailto:anonpuyodkrua1@gmail.com">anonpuyodkrua1@gmail.com</a></span> </div> <div class="info-item"> <span class="info-label">💬 Line ID</span> <span class="info-value">petch121150</span> </div> <div class="info-item"> <span class="info-label">📘 Facebook</span> <span class="info-value"><a href="https://www.facebook.com" target="_blank">Anol Puyodkrua</a></span> </div> <div class="info-item"> <span class="info-label">📷 Instagram</span> <span class="info-value"><a href="https://instagram.com/petchisalwayshappy" target="_blank">petchisalwayshappy</a></span> </div> </div> </div> <div class="about-card about-card-wide reveal" style="--delay:0.3s"> <div class="about-card-header"> <div class="card-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> </div> <h3>จุดเด่นของฉัน</h3> </div> <div class="trait-grid"> <div class="trait-item"> <div class="trait-icon">🎤</div> <div class="trait-text"> <strong>กล้าแสดงออก</strong> <p>ไม่กลัวที่จะแสดงความคิดเห็นและนำเสนอตัวเอง</p> </div> </div> <div class="trait-item"> <div class="trait-icon">📚</div> <div class="trait-text"> <strong>ใฝ่รู้อยู่เสมอ</strong> <p>ชอบเรียนรู้สิ่งใหม่ๆ และพัฒนาตัวเองอยู่เสมอ</p> </div> </div> <div class="trait-item"> <div class="trait-icon">💡</div> <div class="trait-text"> <strong>คิดสร้างสรรค์</strong> <p>มีความคิดสร้างสรรค์และมองหาวิธีใหม่ๆ เสมอ</p> </div> </div> <div class="trait-item"> <div class="trait-icon">🤝</div> <div class="trait-text"> <strong>ทำงานเป็นทีม</strong> <p>สามารถทำงานร่วมกับผู้อื่นได้อย่างมีประสิทธิภาพ</p> </div> </div> </div> </div> </div> </div> </section> <!-- ── SKILLS SECTION ── --> <section id="skills" class="section skills-section"> <div class="section-container"> <div class="section-header reveal"> <span class="section-tag">// 02</span> <h2 class="section-title">ทักษะ & ความสามารถ <span class="title-accent">Skills</span></h2> <div class="section-line"></div> </div> <div class="skills-grid"> <div class="skill-category reveal"> <h3 class="skill-cat-title"> <span class="cat-icon">💻</span> เทคโนโลยี & Digital </h3> <div class="skill-bars"> <div class="skill-bar-item"> <div class="skill-bar-info"> <span>การใช้งานคอมพิวเตอร์</span> <span class="skill-pct">80%</span> </div> <div class="skill-bar-track"> <div class="skill-bar-fill" data-width="80"></div> </div> </div> <div class="skill-bar-item"> <div class="skill-bar-info"> <span>การออกแบบกราฟิก (เบื้องต้น)</span> <span class="skill-pct">65%</span> </div> <div class="skill-bar-track"> <div class="skill-bar-fill" data-width="65"></div> </div> </div> <div class="skill-bar-item"> <div class="skill-bar-info"> <span>Social Media Management</span> <span class="skill-pct">75%</span> </div> <div class="skill-bar-track"> <div class="skill-bar-fill" data-width="75"></div> </div> </div> <div class="skill-bar-item"> <div class="skill-bar-info"> <span>การสร้าง Icon / Emoji</span> <span class="skill-pct">70%</span> </div> <div class="skill-bar-track"> <div class="skill-bar-fill" data-width="70"></div> </div> </div> </div> </div> <div class="skill-category reveal" style="--delay:0.15s"> <h3 class="skill-cat-title"> <span class="cat-icon">🎯</span> Soft Skills </h3> <div class="skill-hexgrid"> <div class="hex-skill"> <div class="hex-inner"> <span class="hex-icon">🎤</span> <span class="hex-label">กล้าแสดงออก</span> </div> </div> <div class="hex-skill"> <div class="hex-inner"> <span class="hex-icon">📖</span> <span class="hex-label">ใฝ่รู้</span> </div> </div> <div class="hex-skill"> <div class="hex-inner"> <span class="hex-icon">🤝</span> <span class="hex-label">ทีมเวิร์ค</span> </div> </div> <div class="hex-skill"> <div class="hex-inner"> <span class="hex-icon">💡</span> <span class="hex-label">สร้างสรรค์</span> </div> </div> <div class="hex-skill"> <div class="hex-inner"> <span class="hex-icon">🎯</span> <span class="hex-label">มุ่งมั่น</span> </div> </div> <div class="hex-skill"> <div class="hex-inner"> <span class="hex-icon">⚡</span> <span class="hex-label">กระตือรือร้น</span> </div> </div> </div> </div> </div> </div> </section> <!-- ── HOBBIES SECTION ── --> <section id="hobbies" class="section hobbies-section"> <div class="section-container"> <div class="section-header reveal"> <span class="section-tag">// 03</span> <h2 class="section-title">งานอดิเรก <span class="title-accent">Hobbies</span></h2> <div class="section-line"></div> </div> <div class="hobbies-grid"> <div class="hobby-card reveal" id="hobby-gaming"> <div class="hobby-glow"></div> <div class="hobby-emoji">🎮</div> <div class="hobby-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 12h4m-2-2v4"/><circle cx="16" cy="10" r="1" fill="currentColor"/><circle cx="18" cy="12" r="1" fill="currentColor"/></svg> </div> <h3>เล่นเกม</h3> <p>ชอบเล่นเกมและสร้างสรรค์ Icon / Emoji ในเกมต่างๆ มีทักษะด้านการออกแบบ Digital Asset</p> <div class="hobby-tag">🎮 Gaming · 🖼️ Icon Design</div> </div> <div class="hobby-card reveal" id="hobby-music" style="--delay:0.1s"> <div class="hobby-glow"></div> <div class="hobby-emoji">🎵</div> <div class="hobby-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> </div> <h3>ฟังเพลง</h3> <p>ดนตรีคือแรงบันดาลใจ ชอบฟังหลากหลายแนว ทั้ง Pop, Hip-Hop และ Lo-fi เพื่อเพิ่มความคิดสร้างสรรค์</p> <div class="hobby-tag">🎵 Music · 🎧 All Genres</div> </div> <div class="hobby-card reveal" id="hobby-movies" style="--delay:0.2s"> <div class="hobby-glow"></div> <div class="hobby-emoji">🎬</div> <div class="hobby-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> </div> <h3>ดูหนัง</h3> <p>ชื่นชอบการดูภาพยนตร์หลากหลายประเภท ทั้ง Sci-Fi, Action, Thriller ที่กระตุ้นจินตนาการ</p> <div class="hobby-tag">🎬 Movies · 🍿 Sci-Fi & Action</div> </div> <div class="hobby-card reveal" id="hobby-exercise" style="--delay:0.3s"> <div class="hobby-glow"></div> <div class="hobby-emoji">💪</div> <div class="hobby-icon-wrap"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg> </div> <h3>ออกกำลังกาย</h3> <p>รักษาสุขภาพด้วยการออกกำลังกายสม่ำเสมอ ช่วยเสริมสร้างความแข็งแกร่งทั้งกายและใจ</p> <div class="hobby-tag">💪 Fitness · 🏃 Active Lifestyle</div> </div> </div> </div> </section> <!-- ── CONTACT SECTION ── --> <section id="contact" class="section contact-section"> <div class="section-container"> <div class="section-header reveal"> <span class="section-tag">// 04</span> <h2 class="section-title">ติดต่อฉัน <span class="title-accent">Contact</span></h2> <div class="section-line"></div> </div> <div class="contact-grid"> <div class="contact-info reveal"> <p class="contact-intro"> ถ้าคุณต้องการพูดคุย ร่วมงาน หรือแค่ทักทาย<br/> ฉันยินดีต้อนรับเสมอ! 😊 </p> <div class="contact-cards"> <a href="tel:0930645246" class="contact-card" id="contact-phone"> <div class="contact-card-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8a19.79 19.79 0 01-3.07-8.67A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.29 6.29l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg> </div> <div class="contact-card-info"> <span class="cc-label">โทรศัพท์</span> <span class="cc-value">093-064-5246</span> </div> <svg class="contact-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> </a> <a href="mailto:anonpuyodkrua1@gmail.com" class="contact-card" id="contact-email"> <div class="contact-card-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> </div> <div class="contact-card-info"> <span class="cc-label">อีเมล</span> <span class="cc-value">anonpuyodkrua1@gmail.com</span> </div> <svg class="contact-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> </a> <div class="contact-card" id="contact-line"> <div class="contact-card-icon" style="background: linear-gradient(135deg,#00c300,#00e800);"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.04 2 11c0 3.41 1.93 6.4 4.82 8.13L6 22l2.44-1.3C9.5 21.22 10.73 21.5 12 21.5c5.52 0 10-4.03 10-9S17.52 2 12 2zm1 13H9v-1.5h2V10H9V8.5h3c.55 0 1 .45 1 1V14c0 .55-.45 1-1 1z"/></svg> </div> <div class="contact-card-info"> <span class="cc-label">Line ID</span> <span class="cc-value">petch121150</span> </div> <svg class="contact-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> </div> <a href="https://www.facebook.com" target="_blank" class="contact-card" id="contact-fb"> <div class="contact-card-icon" style="background: linear-gradient(135deg,#1877f2,#0d6efd);"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg> </div> <div class="contact-card-info"> <span class="cc-label">Facebook</span> <span class="cc-value">Anol Puyodkrua</span> </div> <svg class="contact-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> </a> <a href="https://instagram.com/petchisalwayshappy" target="_blank" class="contact-card" id="contact-ig"> <div class="contact-card-icon" style="background: linear-gradient(135deg,#e1306c,#833ab4,#fd1d1d);"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> </div> <div class="contact-card-info"> <span class="cc-label">Instagram</span> <span class="cc-value">petchisalwayshappy</span> </div> <svg class="contact-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg> </a> </div> </div> <div class="contact-form-wrap reveal" style="--delay:0.2s"> <form class="contact-form" id="contact-form" onsubmit="handleFormSubmit(event)"> <div class="form-header"> <h3>ส่งข้อความหาฉัน</h3> <p>กรอกแบบฟอร์มด้านล่างเพื่อส่งข้อความ</p> </div> <div class="form-group"> <label for="form-name">ชื่อของคุณ</label> <input type="text" id="form-name" placeholder="กรอกชื่อของคุณ" required /> <div class="form-line"></div> </div> <div class="form-group"> <label for="form-email">อีเมลของคุณ</label> <input type="email" id="form-email" placeholder="example@email.com" required /> <div class="form-line"></div> </div> <div class="form-group"> <label for="form-message">ข้อความ</label> <textarea id="form-message" rows="4" placeholder="พิมพ์ข้อความที่นี่..." required></textarea> <div class="form-line"></div> </div> <button type="submit" class="btn-submit" id="btn-submit"> <span class="submit-text">ส่งข้อความ 🚀</span> <span class="submit-loader hidden">กำลังส่ง...</span> </button> <div id="form-success" class="form-success hidden"> ✅ ส่งข้อความสำเร็จ! ฉันจะติดต่อกลับโดยเร็ว </div> </form> </div> </div> </div> </section> <!-- FOOTER --> <footer class="footer"> <div class="footer-container"> <div class="footer-logo"> <span class="logo-bracket">[</span>PETCH<span class="logo-dot">.</span><span class="logo-dev">DEV</span><span class="logo-bracket">]</span> </div> <p class="footer-text"> © 2024 อนล ปูยอดเครือ (เพชร) · ออกแบบด้วย ❤️ & ☕ </p> <p class="footer-sub">Built with HTML · CSS · JavaScript</p> </div> </footer> </div><!-- /portfolio --> <script src="script.js"></script> </body> </html>

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