File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090019/Project019/index.php

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>วัดศรีสุพรรณ - ศรัทธาแห่งหัตถศิลป์เงินล้านนา</title> <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;700&family=Kanit:wght@500&display=swap" rel="stylesheet"> <style> :root { --silver: #C0C0C0; --dark-blue: #1a2a6c; --gold: #d4af37; --white: #ffffff; } body { font-family: 'Sarabun', sans-serif; margin: 0; padding: 0; background-color: #f0f2f5; line-height: 1.6; } header { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('bg.jfif'); background-size: cover; background-position: center; height: 400px; color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; } header h1 { font-family: 'Kanit', sans-serif; font-size: 3rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } nav { background: var(--dark-blue); padding: 10px 0; text-align: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } nav a { color: var(--white); text-decoration: none; padding: 12px 20px; margin: 0 5px; font-weight: bold; display: inline-block; transition: 0.3s; } nav a:hover { background: var(--silver); color: var(--dark-blue); border-radius: 5px; } .container { max-width: 1100px; margin: 30px auto; background: var(--white); border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); overflow: hidden; min-height: 400px; /* เพิ่มเพื่อให้มั่นใจว่าพื้นที่จะแสดงผล / } .section { display: none; padding: 40px; animation: fadeIn 0.5s ease-in-out; background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-image 1.5s ease-in-out; } .section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: center; } .silver-card { border-left: 6px solid var(--silver); padding: 20px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(5px); border-radius: 0 10px 10px 0; margin: 15px 0; } .highlight-box { background: rgba(238, 242, 243, 0.85); backdrop-filter: blur(5px); padding: 20px; border-radius: 10px; border: 1px dashed var(--dark-blue); } .warning { background: rgba(255, 243, 243, 0.9); border: 1px solid #ffcccc; color: #d93025; padding: 15px; border-radius: 8px; margin-top: 15px; } img.main-img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } footer { text-align: center; padding: 30px; background: #2c3e50; color: white; margin-top: 50px; } @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } header h1 { font-size: 2rem; } } </style> </head> <body> <header> <h1>วัดศรีสุพรรณ</h1> <p>The First Silver Shrine in the World \| เชียงใหม่</p> </header> <nav> <a href="javascript:void(0)" onclick="showSection('home')">หน้าแรก</a> <a href="javascript:void(0)" onclick="showSection('history')">ประวัติวัด</a> <a href="javascript:void(0)" onclick="showSection('silver-ubosot')">อุโบสถเงิน</a> <a href="javascript:void(0)" onclick="showSection('wisdom')">ภูมิปัญญาช่างเงิน</a> <a href="javascript:void(0)" onclick="showSection('contact')">ติดต่อ</a> </nav> <div class="container"> <div id="home" class="section active"> <h2>ยินดีต้อนรับสู่คุณค่าแห่งล้านนา</h2> <div class="grid"> <div> <p>วัดศรีสุพรรณ ตั้งอยู่บนถนนวัวลาย จังหวัดเชียงใหม่ เป็นวัดที่มีประวัติศาสตร์ยาวนานและเป็นที่ตั้งของอุโบสถเงินหลังแรกของโลก ซึ่งสร้างขึ้นด้วยแรงศรัทธาของชาวบ้านร่วมกับช่างเงินชุมชนวัวลาย</p> <div class="highlight-box"> <strong>สิ่งน่าสนใจ:</strong> <ul> <li>ชมความงามศิลปะการตอกลายโลหะ</li> <li>กราบขอพรพระเจ้าเจ็ดตื้อ</li> <li>เรียนรู้วิถีชีวิตช่างเงินวัวลาย</li> </ul> </div> </div> <div> <img src="wat.jfif" class="main-img" alt="Wat Sri Suphan"> </div> </div> </div> <div id="history" class="section"> <h2>ประวัติความเป็นมา (History)</h2> <div class="grid"> <div> <p>สร้างขึ้นเมื่อ พ.ศ. 2043 ในสมัย <b>พระเจ้าเมืองแก้ว</b> กษัตริย์ในราชวงศ์มังราย โดยพระองค์พร้อมด้วยพระราชมารดาได้โปรดเกล้าฯ ให้สร้างวิหารและอัญเชิญพระพุทธปฏิมามหาปาฏิหาริย์มาประดิษฐาน</p> <div class="silver-card"> <h4>ตำนานพระเจ้าเจ็ดตื้อ</h4> <p>พระประธานเป็นพระพุทธรูปปางมารวิชัย เนื้อทองสัมฤทธิ์ ที่มีขนาดใหญ่และหนักมาก (7 ตื้อ) เชื่อกันว่าท่านมีความศักดิ์สิทธิ์ในการดลบันดาลให้ผู้ที่มาขอพรประสบความสำเร็จและมีสุขภาพแข็งแรง</p> </div> </div> <div> <img src="พระพิฆเนศเงิน.jfif" class="main-img" alt="History of Wat Sri Suphan"> </div> </div> </div> <div id="silver-ubosot" class="section"> <h2>อุโบสถเงิน (The Silver Shrine)</h2> <p>อุโบสถหลังนี้ใช้เทคนิคการ ดุนลาย* หรือการตอกลายจากแผ่นโลหะเงิน ดีบุก และอะลูมิเนียม มาประกอบกันจนเป็นอาคารทั้งหลัง เพื่อรักษามรดกทางวัฒนธรรมของบรรพบุรุษ</p> <div class="warning"> <strong>⚠️ กฎระเบียบตามจารีตล้านนา:</strong> เนื่องจากใต้พื้นอุโบสถมีการฝังสิ่งศักดิ์สิทธิ์และเครื่องรางตามธรรมเนียมโบราณ จึง <u>ไม่อนุญาตให้สุภาพสตรีเข้าภายในตัวอุโบสถ</u> แต่สามารถชมความงามรอบบริเวณภายนอกได้ครับ </div> <div class="silver-card" style="margin-top:20px;"> <h4>ลวดลายมงคล</h4> <p>รอบอุโบสถจะแสดงภาพพุทธประวัติ และภาพพระธาตุประจำปีเกิด 12 นักษัตร ซึ่งเป็นงานฝีมือที่หาชมได้ยากในปัจจุบัน</p> </div> </div> <div id="wisdom" class="section"> <h2>ข่วงผญา ภูมิปัญญาหัตถกรรมเครื่องเงิน</h2> <div class="grid"> <div> <p>วัดศรีสุพรรณเป็นศูนย์กลางการเรียนรู้การทำเครื่องเงิน โดยมีการจัดตั้ง "กลุ่มหัตถศิลป์ล้านนาวัดศรีสุพรรณ" เพื่อถ่ายทอดทักษะช่างเงินให้กับเยาวชนและผู้สนใจ</p> <div class="highlight-box"> <h4>การตอกลาย (Repoussé)</h4> <p>เป็นศิลปะการใช้ค้อนและลิ่มเหล็กตอกลงบนแผ่นเงินให้เกิดลวดลายนูนสวยงาม ต้องใช้สมาธิและความชำนาญสูงมาก</p> </div> <div class="highlight-box" style="margin-top:10px;"> <h4>ท้าวเวสสุวรรณเงินบริสุทธิ์</h4> <p>เป็นองค์ท้าวเวสสุวรรณที่สร้างจากโลหะเงินบริสุทธิ์แห่งเดียวในโลก ตั้งอยู่หน้าพระอุโบสถเงินหลังแรกของโลก เชื่อกันว่ามีความศักดิ์สิทธิ์มาก ผู้คนนิยมมากราบไหว้ขอพรเรื่องโชคลาภ เงินทอง และปัดเป่าสิ่งชั่วร้าย</p> </div> </div> <div> <img src="ท้าวเวสสุวรรณเงินคู่.jfif" class="main-img" alt="Silversmith Wisdom"> </div> </div> </div> <div id="contact" class="section"> <h2>ข้อมูลการเดินทางและการติดต่อ</h2> <div class="grid"> <div> <p>📍 <b>ที่ตั้ง:</b> 100 ถนนวัวลาย ต.หายยา อ.เมือง จ.เชียงใหม่</p> <p>⏰ <b>เวลาเปิด-ปิด:</b> 08.00 - 18.00 น. (วันเสาร์เปิดถึง 22.00 น.)</p> <div class="silver-card"> <p>📞 <b>เบอร์โทรศัพท์:</b> 053-200-332</p> <p>📧 <b>Facebook:</b> วัดศรีสุพรรณ อุโบสถเงินหลังแรกของโลก</p> </div> </div> <div> <img src="หลัง.jfif" class="main-img" alt="Contact Map View"> </div> </div> </div> </div> <footer> <p>© <?php echo date("Y"); ?> Project019 - Information of Wat Sri Suphan, Chiang Mai</p> <small>จัดทำขึ้นเพื่อการเรียนรู้และสืบสานวัฒนธรรมไทย</small> </footer> <script> // ระบบ Slideshow พื้นหลัง const bgImages = ['bg.jfif', 'wat.jfif', 'ท้าวเวสสุวรรณเงินคู่.jfif', 'พระพิฆเนศเงิน.jfif']; let currentImgIndex = 0; function updateBackgrounds() { const sections = document.querySelectorAll('.section'); sections.forEach(section => { section.style.backgroundImage = `linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('${bgImages[currentImgIndex]}')`; }); currentImgIndex = (currentImgIndex + 1) % bgImages.length; } updateBackgrounds(); setInterval(updateBackgrounds, 5000); function showSection(sectionId) { // ซ่อนทุก section ก่อน const sections = document.querySelectorAll('.section'); sections.forEach(s => s.classList.remove('active')); // แสดงเฉพาะอันที่เลือก const target = document.getElementById(sectionId); if(target) { target.classList.add('active'); } // เลื่อนหน้าลงมาให้เห็นเนื้อหา window.scrollTo({ top: 350, behavior: 'smooth' }); } </script> </body> </html>

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