File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090015/Project/measure.html

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;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <style> :root { --primary: #D35400; --dark-bg: #2C3E50; --gold: #D4AC0D; --fb: #1877F2; } body { font-family: 'Sarabun', sans-serif; margin: 0; background: #f4f4f4; color: #333; line-height: 1.6; } nav { background: white; border-bottom: 3px solid var(--primary); padding: 0.5rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .nav-container { max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .logo { font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 10px; } .menu { display: flex; align-items: center; } .menu a { text-decoration: none; color: #444; margin-left: 20px; font-weight: 600; cursor: pointer; } .fb-link { background: var(--fb); color: white !important; padding: 8px 15px; border-radius: 4px; display: flex; align-items: center; gap: 5px; } .page { display: none; animation: fadeIn 0.5s; } .active-page { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .history-summary { max-width: 1000px; margin: 20px auto; background: white; border-radius: 12px; overflow: hidden; display: flex; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .history-summary img { width: 40%; object-fit: cover; } .history-summary-content { padding: 30px; width: 60%; } .history-summary-content h2 { color: var(--primary); margin-top: 0; } .btn-read-more { background: none; border: 2px solid var(--primary); color: var(--primary); padding: 8px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-top: 15px; transition: 0.3s; } .btn-read-more:hover { background: var(--primary); color: white; } .history-full { max-width: 900px; margin: 40px auto; background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); } .history-full h1 { color: var(--primary); text-align: center; } .hero-banner { background: var(--dark-bg); color: white; padding: 40px 0; } .hero-container { max-width: 1200px; margin: auto; display: flex; gap: 30px; padding: 0 20px; align-items: center; } .hero-image { flex: 1.2; height: 300px; border-radius: 8px; overflow: hidden; } .hero-image img { width: 100%; height: 100%; object-fit: cover; } .hero-content { flex: 1; } .news-section { max-width: 1200px; margin: 30px auto; padding: 0 20px; } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .card { background: white; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .card-img { width: 100%; height: 180px; object-fit: cover; cursor: pointer; } .card-body { padding: 15px; } .action-btns { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 10; } .btn-icon { border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; color: white; } .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; padding: 20px; } .modal-content { background: white; border-radius: 12px; max-width: 800px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 30px; position: relative; } .admin-form { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 8px; } input, textarea, select { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; font-family: 'Sarabun'; } .btn-submit { background: var(--primary); color: white; border: none; padding: 12px; cursor: pointer; width: 100%; font-weight: bold; border-radius: 4px; } footer { background: #222; color: #888; text-align: center; padding: 30px; margin-top: 40px; } @media (max-width: 768px) { .history-summary { flex-direction: column; } .history-summary img { width: 100%; height: 200px; } .history-summary-content { width: 100%; } .hero-container { flex-direction: column; } .menu { font-size: 12px; } .menu a { margin-left: 10px; } } </style> </head> <body> <nav> <div class="nav-container"> <div class="logo"><i class="fas fa-vihara"></i> วัดเจดีย์หลวง</div> <div class="menu"> <a onclick="showPage('home')">หน้าหลัก</a> <a onclick="showPage('history-page')">ประวัติ</a> <a onclick="showPage('news-all')">จัดการข่าว</a> <a onclick="showPage('admin')">เพิ่มข่าว</a> <a href="https://www.facebook.com/p/%E0%B8%A7%E0%B8%B1%E0%B8%94%E0%B9%80%E0%B8%88%E0%B8%94%E0%B8%B5%E0%B8%A2%E0%B9%8C%E0%B8%AB%E0%B8%A5%E0%B8%A7%E0%B8%87%E0%B8%A7%E0%B8%A3%E0%B8%A7%E0%B8%B4%E0%B8%AB%E0%B8%B2%E0%B8%A3-%E0%B9%80%E0%B8%8A%E0%B8%B5%E0%B8%A2%E0%B8%87%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88-Wat-Chedi-Luang-Chiang-Mai-100066349282997/" target="_blank" class="fb-link"> <i class="fab fa-facebook"></i> Facebook </a> </div> </div> </nav> <div id="home" class="page active-page"> <div class="history-summary"> <img src="unnamed.jpg" alt="วัดเจดีย์หลวง"> <div class="history-summary-content"> <h2>ประวัติวัดเจดีย์หลวง</h2> <p>พระอารามหลวงเก่าแก่ใจกลางเมืองเชียงใหม่ มีประวัติศาสตร์ยาวนานกว่า 600 ปี สร้างขึ้นในรัชสมัยพญาแสนเมืองมาเพื่ออุทิศส่วนกุศลให้พญากือนา...</p> <button class="btn-read-more" onclick="showPage('history-page')">อ่านประวัติทั้งหมด <i class="fas fa-arrow-right"></i></button> </div> </div> <div id="hero-display"></div> <div class="news-section"> <h3>ข่าวประชาสัมพันธ์ทั่วไป</h3> <div id="regular-news-grid" class="news-grid"></div> </div> </div> <div id="history-page" class="page"> <div class="history-full"> <h1>ประวัติวัดเจดีย์หลวงวรวิหาร</h1> <img src="unnamed.jpg" alt="วัดเจดีย์หลวง" style="width:100%; border-radius:10px; margin:20px 0;"> <p>วัดเจดีย์หลวงวรวิหาร เป็นพระอารามหลวงเก่าแก่ใจกลางเมืองเชียงใหม่ มีประวัติศาสตร์ยาวนานกว่า 600 ปี โดยมีข้อมูลสำคัญดังนี้:</p> <h3>การก่อสร้างและยุครุ่งเรือง</h3> <p>เริ่มสร้างในรัชสมัย <strong>พญาแสนเมืองมา</strong> และได้รับการปฏิสังขรณ์ครั้งใหญ่ในสมัย <strong>พญาติโลกราช</strong> จนเจดีย์มีความสูงถึง 82 เมตร</p> <center><button class="btn-submit" style="width:200px;" onclick="showPage('home')">กลับหน้าหลัก</button></center> </div> </div> <div id="news-all" class="page"> <div class="news-section"> <h3>จัดการข้อมูลข่าวสาร</h3> <div id="all-news-grid" class="news-grid"></div> </div> </div> <div id="admin" class="page"> <div class="admin-form"> <h3 id="formTitle">เขียนข่าวสารใหม่</h3> <input type="hidden" id="editId"> <select id="newsType"> <option value="important">ข่าวสำคัญ (Banner)</option> <option value="regular">ข่าวทั่วไป</option> </select> <input type="text" id="newsTitle" placeholder="หัวข้อข่าว"> <input type="text" id="newsImg" placeholder="ลิงก์รูปภาพข่าว"> <textarea id="newsDesc" rows="8" placeholder="รายละเอียด..."></textarea> <button class="btn-submit" id="submitBtn" onclick="saveNews()">บันทึกข้อมูล</button> </div> </div> <div id="newsModal" class="modal" onclick="if(event.target == this) closeModal()"> <div class="modal-content"> <span style="float:right; cursor:pointer; font-size:30px;" onclick="closeModal()">×</span> <img id="modalImg" src="" style="width:100%; border-radius:8px; margin-bottom:15px;"> <h2 id="modalTitle"></h2> <p id="modalDesc" style="white-space: pre-wrap;"></p> <button class="btn-submit" style="background:#e74c3c; margin-top:15px;" onclick="closeModal()">ปิด</button> </div> </div> <footer><p>© 2026 วัดเจดีย์หลวงวรวิหาร เชียงใหม่</p></footer> <script> const STORAGE_KEY = 'temple_final_v2'; let newsStore = JSON.parse(localStorage.getItem(STORAGE_KEY)) \|\| [ {id: 1, type: 'important', title: "ข่าวสารวัดเจดีย์หลวง", desc: "ติดตามข่าวประชาสัมพันธ์ได้ที่นี่", img: "https://via.placeholder.com/800x400"} ]; function showPage(id) { document.querySelectorAll('.page').forEach(p => p.classList.remove('active-page')); document.getElementById(id).classList.add('active-page'); render(); window.scrollTo(0,0); } function saveNews() { const title = document.getElementById('newsTitle').value; const type = document.getElementById('newsType').value; const img = document.getElementById('newsImg').value \|\| "https://via.placeholder.com/400x250"; const desc = document.getElementById('newsDesc').value; if(!title \|\| !desc) return alert("กรุณากรอกข้อมูล"); newsStore.unshift({ id: Date.now(), type, title, desc, img }); localStorage.setItem(STORAGE_KEY, JSON.stringify(newsStore)); showPage('home'); } function deleteNews(id) { if(confirm("ลบข่าวนี้?")) { newsStore = newsStore.filter(n => n.id !== id); localStorage.setItem(STORAGE_KEY, JSON.stringify(newsStore)); render(); } } function openModal(id) { const news = newsStore.find(n => n.id === id); if(news) { document.getElementById('modalTitle').innerText = news.title; document.getElementById('modalDesc').innerText = news.desc; document.getElementById('modalImg').src = news.img; document.getElementById('newsModal').style.display = 'flex'; } } function closeModal() { document.getElementById('newsModal').style.display = 'none'; } function render() { const hero = document.getElementById('hero-display'); const regularGrid = document.getElementById('regular-news-grid'); const allGrid = document.getElementById('all-news-grid'); if(hero) hero.innerHTML = ''; if(regularGrid) regularGrid.innerHTML = ''; if(allGrid) allGrid.innerHTML = ''; const imp = newsStore.find(n => n.type === 'important'); if(imp && hero) { hero.innerHTML = `<div class="hero-banner"><div class="hero-container"><div class="hero-image"><img src="${imp.img}"></div><div class="hero-content"><h2>${imp.title}</h2><p>${imp.desc}</p><button onclick="openModal(${imp.id})" style="background:var(--gold); border:none; padding:10px 20px; border-radius:5px; cursor:pointer; color:white;">อ่านรายละเอียด</button></div></div></div>`; } newsStore.forEach(n => { const card = `<div class="card"><div class="action-btns"><button class="btn-icon" style="background:#e74c3c" onclick="deleteNews(${n.id})"><i class="fas fa-trash"></i></button></div><img src="${n.img}" class="card-img" onclick="openModal(${n.id})"><div class="card-body"><h4>${n.title}</h4></div></div>`; if(allGrid) allGrid.innerHTML += card; if(n.type === 'regular' && regularGrid) regularGrid.innerHTML += card; }); } render(); </script> </body> </html>

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