File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090004/Final/media.php

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>จัดการสื่อ - CMS</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } header { background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); color: white; padding: 30px 20px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } header h1 { font-size: 2.5rem; font-weight: 300; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } main { padding: 40px 20px; max-width: 1200px; margin: 0 auto; } .controls { margin-bottom: 30px; text-align: center; } .search-box { padding: 12px 20px; border: none; border-radius: 25px; font-size: 16px; width: 300px; max-width: 100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); outline: none; } .search-box:focus { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transform: translateY(-2px); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .media-card { background: white; border-radius: 15px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .media-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .media-card img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.5s ease; } .media-card:hover img { transform: scale(1.1); } .card-content { padding: 20px; text-align: center; } .media-card h4 { font-size: 1.3rem; color: #333; margin-bottom: 8px; font-weight: 600; } .media-card p { color: #666; font-size: 0.95rem; line-height: 1.5; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(5px); } .modal-content { background: white; padding: 40px; border-radius: 20px; max-width: 600px; width: 90%; text-align: center; position: relative; animation: modalSlide 0.3s ease; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } @keyframes modalSlide { from { opacity: 0; transform: scale(0.8) translateY(-50px); } to { opacity: 1; transform: scale(1) translateY(0); } } .close { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #999; transition: color 0.3s ease; } .close:hover { color: #333; transform: rotate(90deg); } .modal h2 { font-size: 2rem; color: #333; margin-bottom: 15px; font-weight: 600; } .modal p { font-size: 1.1rem; color: #666; line-height: 1.6; } .no-results { text-align: center; color: white; font-size: 1.2rem; margin-top: 50px; } @media (max-width: 768px) { header h1 { font-size: 2rem; } .search-box { width: 250px; } .grid { grid-template-columns: 1fr; } .modal-content { padding: 30px 20px; margin: 20px; } } </style> </head> <body> <header> <h1>จัดการสื่อ</h1> </header> <main> <div class="controls"> <input type="text" class="search-box" id="searchBox" placeholder="🔍 ค้นหาสื่อ..." onkeyup="filterMedia()"> </div> <div class="grid" id="mediaGrid"> <!-- Media cards will be generated here --> </div> <div class="no-results" id="noResults" style="display: none;"> ไม่พบผลลัพธ์ที่ตรงกับการค้นหา </div> </main> <!-- Modal --> <div id="modal" class="modal" onclick="closeModal(event)"> <div class="modal-content" onclick="event.stopPropagation()"> <span class="close" onclick="closeModal()">×</span> <h2 id="modalTitle"></h2> <p id="modalDesc"></p> </div> </div> <script> // Media data const mediaData = [ { id: 1, title: 'Pyton', description: 'การเขียนcodepyton', img: 'https://i.pinimg.com/736x/09/b7/47/09b747ff1f5d2b3d7551bf408f001399.jpg' }, { id: 2, title: 'Phpmyadmin', description: 'การทำphpmyadmin', img: 'https://i.pinimg.com/736x/20/63/6f/20636fff11ecc324fd4c98b83ae61990.jpg' }, { id: 3, title: 'การเขียนcodeเว็บ', description: 'วิธีการเขียนphp', img: 'https://i.pinimg.com/736x/b4/8b/83/b48b831fe6e7dc548ab66b85e048a1c0.jpg' }, { id: 4, title: 'C+', description: 'รู้จักภาษาC+', img: 'https://i.pinimg.com/736x/bd/5e/5e/bd5e5e8343406ab07303bd2b1faaa853.jpg' }, { id: 5, title: 'JavaScript', description: 'รู้จักภาษาjava', img: 'https://i.pinimg.com/736x/60/6e/27/606e27da8528efb78f42690df07534ad.jpg' }, { id: 6, title: 'TypeScript', description: 'รู้จักภาษาTypeScript', img: 'https://i.pinimg.com/736x/74/8f/d1/748fd1893e48c107613129624f4cf0b2.jpg' } ]; let filteredMedia = mediaData; // Render media cards function renderMedia(media) { const grid = document.getElementById('mediaGrid'); const noResults = document.getElementById('noResults'); if (media.length === 0) { grid.innerHTML = ''; noResults.style.display = 'block'; return; } noResults.style.display = 'none'; grid.innerHTML = ''; media.forEach(item => { const card = document.createElement('div'); card.className = 'media-card'; card.onclick = () => showModal(item.title, item.description); card.innerHTML = ` <img src="${item.img}" alt="${item.title}" onerror="this.src='https://via.placeholder.com/600x250?text=ไม่พบภาพ'"> <div class="card-content"> <h4>${item.title}</h4> <p>${item.description}</p> </div> `; grid.appendChild(card); }); } // Show modal function showModal(title, description) { document.getElementById('modalTitle').innerText = title; document.getElementById('modalDesc').innerText = description; document.getElementById('modal').style.display = 'flex'; document.body.style.overflow = 'hidden'; } // Close modal function closeModal(event) { if (!event \|\| event.target === document.getElementById('modal')) { document.getElementById('modal').style.display = 'none'; document.body.style.overflow = 'auto'; } } // Filter media based on search function filterMedia() { const searchTerm = document.getElementById('searchBox').value.toLowerCase(); filteredMedia = mediaData.filter(item => item.title.toLowerCase().includes(searchTerm) \|\| item.description.toLowerCase().includes(searchTerm) ); renderMedia(filteredMedia); } // Close modal with Escape key document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { closeModal(); } }); // Initialize the page renderMedia(mediaData); </script> </body> </html>

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