File: /var/www/w230/html/dpassk1/index.html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบดาวน์โหลด PA3 ออนไลน์ สพป.ศรีสะเกษ เขต 1</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Sarabun', sans-serif;
background-color: #f0f4f8;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.loader {
border-top-color: #3498db;
-webkit-animation: spinner 1.5s linear infinite;
animation: spinner 1.5s linear infinite;
}
@-webkit-keyframes spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.main-content {
flex: 1;
}
footer {
margin-top: auto;
}
</style>
</head>
<body>
<!-- Header -->
<header class="bg-white shadow-md py-4">
<div class="container mx-auto px-4 flex flex-col items-center">
<img src="https://lh3.googleusercontent.com/d/1jCvhGVWiuCEV0LW1X_ootYyuJUSopkPv" alt="Logo" class="w-[150px] mb-3">
<h1 class="text-2xl font-bold text-blue-800 text-center">ระบบดาวน์โหลด PA3 ออนไลน์ สพป.ศรีสะเกษ เขต 1</h1>
</div>
</header>
<!-- Main Content -->
<div class="main-content container mx-auto px-4 py-8 max-w-5xl">
<!-- Statistics Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
<div class="flex items-center">
<div class="p-3 rounded-full bg-blue-400 bg-opacity-30">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</div>
<div class="ml-4">
<p class="text-blue-100 text-sm">ผู้เข้าชมวันนี้</p>
<p class="text-2xl font-bold" id="todayVisitors">-</p>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg shadow-lg p-6 text-white">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-400 bg-opacity-30">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<div class="ml-4">
<p class="text-green-100 text-sm">การค้นหาวันนี้</p>
<p class="text-2xl font-bold" id="todaySearches">-</p>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
<div class="flex items-center">
<div class="p-3 rounded-full bg-purple-400 bg-opacity-30">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<div class="ml-4">
<p class="text-purple-100 text-sm">ผู้เข้าชมทั้งหมด</p>
<p class="text-2xl font-bold" id="totalVisitors">-</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-xl font-bold text-center text-blue-700 mb-6">ค้นหาข้อมูล</h2>
<!-- คำแนะนำการใช้งาน -->
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 mb-6 rounded">
<h3 class="font-bold text-lg mb-2">คำแนะนำการใช้งาน</h3>
<ol class="list-decimal pl-5 space-y-1">
<li>กรอกเลขบัตรประจำตัวประชาชน 13 หลักของท่านในช่องค้นหา</li>
<li>คลิกปุ่ม "ค้นหา" เพื่อตรวจสอบข้อมูล PA3 ของท่าน</li>
<li>หากพบข้อมูล ท่านสามารถคลิกปุ่ม "ดาวน์โหลด PA3" เพื่อบันทึกไฟล์ได้ทันที</li>
<li>หากไม่พบข้อมูล กรุณาติดต่อผู้ดูแลระบบที่เบอร์ 065-3175708</li>
</ol>
</div>
<div class="flex flex-col md:flex-row gap-4 mb-6">
<div class="flex-grow">
<input type="text" id="searchInput" placeholder="ค้นหาด้วยเลขบัตรประจำตัวประชาชน 13 หลัก..."
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex gap-2">
<button id="searchButton" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300">
ค้นหา
</button>
<button id="clearButton" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg transition duration-300">
ล้างข้อมูล
</button>
</div>
</div>
<div id="loading" class="hidden flex justify-center my-8">
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
</div>
<div id="noResults" class="hidden bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded">
<p>ไม่มีข้อมูลที่คุณค้นหา กรุณาติดต่อผู้ดูแลระบบที่เบอร์ 065-3175708</p>
</div>
<div id="resultsContainer" class="hidden">
<h2 class="text-xl font-semibold mb-4 text-gray-700">ผลการค้นหา</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
<thead>
<tr class="bg-gray-100">
<th class="py-3 px-4 border-b text-left">เลขบัตรประชาชน</th>
<th class="py-3 px-4 border-b text-left">ชื่อ-สกุล</th>
<th class="py-3 px-4 border-b text-center">การดำเนินการ</th>
</tr>
</thead>
<tbody id="resultsTable">
<!-- Results will be inserted here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-blue-800 text-white py-6">
<div class="container mx-auto px-4">
<p class="text-center text-sm md:text-base">
© 2025 ระบบดาวน์โหลด PA3 ออนไลน์ สพป.ศรีสะเกษ เขต 1<br>
โดย นายกิตติศักดิ์ มครนันท์ ผู้อำนวยการโรงเรียนบ้านหัววัวหนองนารีตาตวด<br>
และทีมงาน ICT DPA สพป.ศรีสะเกษ เขต 1
</p>
</div>
</footer>
<!-- Detail Modal -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 overflow-hidden">
<div class="flex justify-between items-center border-b p-4 bg-blue-50">
<h3 class="text-xl font-semibold text-blue-800">รายละเอียดข้อมูล</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="p-6">
<div id="modalContent" class="space-y-4">
<!-- Modal content will be inserted here -->
</div>
</div>
<div class="bg-gray-50 px-4 py-3 flex justify-end">
<button id="closeModalButton" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg transition duration-300">
ปิด
</button>
</div>
</div>
</div>
<script>
// Configuration
const API_URL = 'https://script.google.com/macros/s/AKfycbyo9cGNBuYWrc8CS9REfCnl19Od3TEzRy9TMcSBBZnUeTWuirpaW8mhLhGpSLaRn_ag/exec';
const SHEET_ID = '1rb_nORn8X1afX7Cz5k1vvmSq2fwyo762ESXdl5DMrV8';
// DOM Elements
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const clearButton = document.getElementById('clearButton');
const resultsContainer = document.getElementById('resultsContainer');
const resultsTable = document.getElementById('resultsTable');
const noResults = document.getElementById('noResults');
const loading = document.getElementById('loading');
const detailModal = document.getElementById('detailModal');
const modalContent = document.getElementById('modalContent');
const closeModal = document.getElementById('closeModal');
const closeModalButton = document.getElementById('closeModalButton');
// Current data storage
let currentData = [];
// Statistics tracking
let statistics = {
todayVisitors: 0,
todaySearches: 0,
totalVisitors: 0
};
// Event Listeners
searchButton.addEventListener('click', performSearch);
clearButton.addEventListener('click', clearSearch);
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
performSearch();
}
});
closeModal.addEventListener('click', hideModal);
closeModalButton.addEventListener('click', hideModal);
// Helper function to check if a string is a URL
function isURL(str) {
const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
return pattern.test(str);
}
// Function to handle document download and open
function downloadAndOpenDocument(url) {
try {
let finalUrl = url;
// Handle Google Drive links - convert to proper view format
if (url.includes('drive.google.com') || url.includes('drive.usercontent.google.com')) {
let fileId = null;
// Extract file ID from various Google Drive URL formats
if (url.includes('/file/d/')) {
const match = url.match(/\/file\/d\/([a-zA-Z0-9-_]+)/);
if (match) fileId = match[1];
} else if (url.includes('id=')) {
const match = url.match(/id=([a-zA-Z0-9-_]+)/);
if (match) fileId = match[1];
} else if (url.includes('drive.usercontent.google.com')) {
// Extract from usercontent URL
const match = url.match(/\/([a-zA-Z0-9-_]+)\//);
if (match) fileId = match[1];
}
// Convert to direct view format that works better
if (fileId) {
finalUrl = `https://drive.google.com/file/d/${fileId}/view?usp=sharing`;
}
}
// Open the processed URL
window.open(finalUrl, '_blank');
showMessage('เปิดเอกสารแล้ว', 'success');
} catch (error) {
console.error('Download error:', error);
// Fallback: try alternative method
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showMessage('เปิดเอกสารแล้ว', 'success');
}
}
// Helper function to format value based on type
function formatValue(value, key) {
if (!value) return '-';
// Check if the value is a URL - apply to ALL URL fields
if (typeof value === 'string' && isURL(value)) {
// Show as download/open document button with unique ID
const buttonId = 'btn_' + Math.random().toString(36).substr(2, 9);
setTimeout(() => {
const button = document.getElementById(buttonId);
if (button) {
button.addEventListener('click', () => downloadAndOpenDocument(value));
}
}, 100);
return `<button id="${buttonId}" class="bg-green-500 hover:bg-green-600 text-white text-sm py-2 px-4 rounded-lg transition duration-300 flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
ดาวน์โหลด/เปิดเอกสาร
</button>`;
}
return value;
}
// Function to show message
function showMessage(message, type) {
const messageDiv = document.createElement('div');
messageDiv.className = 'fixed top-20 right-4 z-50 px-4 py-2 rounded-lg text-white font-medium transition-all duration-300 transform translate-x-full';
messageDiv.className += type === 'success' ? ' bg-green-600' : ' bg-red-600';
messageDiv.textContent = message;
document.body.appendChild(messageDiv);
setTimeout(() => {
messageDiv.classList.remove('translate-x-full');
}, 100);
setTimeout(() => {
messageDiv.classList.add('translate-x-full');
setTimeout(() => {
if (messageDiv.parentNode) {
messageDiv.parentNode.removeChild(messageDiv);
}
}, 300);
}, 3000);
}
// Function to clear search
function clearSearch() {
searchInput.value = '';
resultsContainer.classList.add('hidden');
noResults.classList.add('hidden');
currentData = [];
}
// Functions
async function performSearch() {
const searchId = searchInput.value.trim();
if (!searchId) {
alert('กรุณาระบุเลขบัตรประจำตัวประชาชน 13 หลักที่ต้องการค้นหา');
return;
}
// Increment search count
incrementSearchCount();
showLoading();
try {
const response = await fetch(`${API_URL}?action=search&sheetId=${SHEET_ID}&searchId=${searchId}`);
const data = await response.json();
if (data.success && data.data && data.data.length > 0) {
currentData = data.data;
displayResults(data.data);
} else {
showNoResults();
}
} catch (error) {
console.error('Error fetching data:', error);
alert('เกิดข้อผิดพลาดในการค้นหาข้อมูล กรุณาลองใหม่อีกครั้ง');
hideLoading();
}
}
function displayResults(data) {
resultsTable.innerHTML = '';
data.forEach((item, index) => {
const row = document.createElement('tr');
row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
row.innerHTML = `
<td class="py-3 px-4 border-b">${item.id || ''}</td>
<td class="py-3 px-4 border-b">${item.name || ''}</td>
<td class="py-3 px-4 border-b text-center">
<button class="view-details bg-blue-500 hover:bg-blue-600 text-white text-sm py-1 px-3 rounded transition duration-300"
data-index="${index}">
ดูรายละเอียด
</button>
</td>
`;
resultsTable.appendChild(row);
});
// Add event listeners to view detail buttons
document.querySelectorAll('.view-details').forEach(button => {
button.addEventListener('click', function() {
const index = this.getAttribute('data-index');
showDetails(currentData[index]);
});
});
hideLoading();
noResults.classList.add('hidden');
resultsContainer.classList.remove('hidden');
}
function showDetails(item) {
// Create content for modal
let content = '<div class="grid grid-cols-1 md:grid-cols-2 gap-4">';
// Loop through all properties
for (const [key, value] of Object.entries(item)) {
let formattedKey = key.charAt(0).toUpperCase() + key.slice(1);
// Convert specific field names to Thai
if (key.toLowerCase() === 'name') {
formattedKey = 'ชื่อ-สกุล';
} else if (key.toLowerCase() === 'id') {
formattedKey = 'เลขบัตรประชาชน';
} else if (key.toLowerCase() === 'no') {
formattedKey = 'ลำดับ';
}
const formattedValue = formatValue(value, formattedKey);
content += `
<div class="border-b pb-2">
<p class="text-sm text-gray-600 font-medium">${formattedKey}</p>
<div class="text-gray-800">${formattedValue}</div>
</div>
`;
}
content += '</div>';
modalContent.innerHTML = content;
detailModal.classList.remove('hidden');
}
function hideModal() {
detailModal.classList.add('hidden');
}
function showNoResults() {
hideLoading();
resultsContainer.classList.add('hidden');
noResults.classList.remove('hidden');
}
function showLoading() {
loading.classList.remove('hidden');
resultsContainer.classList.add('hidden');
noResults.classList.add('hidden');
}
function hideLoading() {
loading.classList.add('hidden');
}
// Statistics functions
function initializeStatistics() {
// Get today's date as key
const today = new Date().toDateString();
// Load statistics from localStorage
const savedStats = localStorage.getItem('pa3_statistics');
const savedDate = localStorage.getItem('pa3_stats_date');
if (savedStats && savedDate === today) {
// Same day, load existing stats
statistics = JSON.parse(savedStats);
} else {
// New day or first visit, reset daily stats
statistics.todayVisitors = 0;
statistics.todaySearches = 0;
// Keep total visitors from previous data if exists
if (savedStats) {
const oldStats = JSON.parse(savedStats);
statistics.totalVisitors = oldStats.totalVisitors || 300;
} else {
statistics.totalVisitors = 300;
}
}
// Increment today's visitors
statistics.todayVisitors++;
statistics.totalVisitors++;
// Save updated statistics
localStorage.setItem('pa3_statistics', JSON.stringify(statistics));
localStorage.setItem('pa3_stats_date', today);
// Update display
updateStatisticsDisplay();
}
function updateStatisticsDisplay() {
document.getElementById('todayVisitors').textContent = statistics.todayVisitors.toLocaleString();
document.getElementById('todaySearches').textContent = statistics.todaySearches.toLocaleString();
document.getElementById('totalVisitors').textContent = statistics.totalVisitors.toLocaleString();
}
function incrementSearchCount() {
statistics.todaySearches++;
localStorage.setItem('pa3_statistics', JSON.stringify(statistics));
updateStatisticsDisplay();
}
// Initialize statistics when page loads
window.addEventListener('load', initializeStatistics);
// Close modal when clicking outside
window.addEventListener('click', function(event) {
if (event.target === detailModal) {
hideModal();
}
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9573e3166409797c',t:'MTc1MTE4Mzk5My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>