Spaces:
Sleeping
Sleeping
| <html lang="th"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ระบบตรวจสอบภาพโปรโมทงานออนไลน์</title> | |
| <style> | |
| * { box-sizing: border-box; font-family: 'Sukhumvit Set', 'Kanit', sans-serif; margin: 0; padding: 0; } | |
| body { background: #0f172a; color: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } | |
| .card { background: #1e293b; border-radius: 16px; padding: 28px; width: 100%; max-width: 480px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid #334155; text-align: center; } | |
| h1 { font-size: 1.5rem; margin-bottom: 8px; color: #38bdf8; } | |
| p.subtitle { font-size: 0.9rem; color: #94a3b8; margin-bottom: 24px; } | |
| .upload-box { border: 2px dashed #475569; border-radius: 12px; padding: 24px; cursor: pointer; transition: 0.2s; background: #0f172a; position: relative; } | |
| .upload-box:hover { border-color: #38bdf8; } | |
| .upload-box input { display: none; } | |
| .upload-icon { font-size: 2.5rem; color: #94a3b8; margin-bottom: 8px; } | |
| #preview-img { max-width: 100%; max-height: 200px; border-radius: 8px; margin-top: 12px; display: none; } | |
| button.btn-main { width: 100%; background: #0284c7; color: white; border: none; padding: 14px; border-radius: 10px; font-size: 1rem; font-weight: bold; margin-top: 20px; cursor: pointer; transition: 0.2s; } | |
| button.btn-main:hover { background: #0369a1; } | |
| button.btn-main:disabled { background: #475569; cursor: not-allowed; } | |
| .result-box { margin-top: 24px; padding: 16px; border-radius: 12px; display: none; text-align: center; } | |
| .result-scam { background: #450a0a; border: 1px solid #dc2626; color: #fca5a5; } | |
| .result-safe { background: #064e3b; border: 1px solid #10b981; color: #a7f3d0; } | |
| .result-unknown { background: #1e293b; border: 1px solid #64748b; color: #cbd5e1; } | |
| .result-title { font-size: 1.4rem; font-weight: bold; margin-bottom: 4px; } | |
| .result-detail { font-size: 0.85rem; opacity: 0.9; margin-bottom: 12px; } | |
| .vote-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 8px; align-items: center; } | |
| .vote-text { font-size: 0.85rem; color: #94a3b8; } | |
| .vote-buttons { display: flex; gap: 12px; width: 100%; justify-content: center; } | |
| .vote-btn { flex: 1; padding: 8px 12px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } | |
| .vote-like { background: #15803d; color: white; } | |
| .vote-like:hover { background: #166534; } | |
| .vote-dislike { background: #b91c1c; color: white; } | |
| .vote-dislike:hover { background: #991b1b; } | |
| .vote-btn:disabled { opacity: 0.5; cursor: not-allowed; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h1>🔍 ตรวจสอบภาพงานออนไลน์</h1> | |
| <p class="subtitle">อัปโหลดภาพโปรโมทเพื่อเช็คประวัติมิจฉาชีพ</p> | |
| <div class="upload-box" onclick="document.getElementById('fileInput').click()"> | |
| <div class="upload-icon">📁</div> | |
| <span id="upload-text">แตะเพื่อเลือกรูปภาพ</span> | |
| <input type="file" id="fileInput" accept="image/*" onchange="handleFileSelect(event)"> | |
| <img id="preview-img" alt="Preview"> | |
| </div> | |
| <button id="checkBtn" class="btn-main" onclick="uploadAndCheck()" disabled>เช็ครูปภาพนี้</button> | |
| <div id="resultBox" class="result-box"> | |
| <div id="resultTitle" class="result-title"></div> | |
| <div id="resultDetail" class="result-detail"></div> | |
| <div id="voteSection" class="vote-section"> | |
| <span class="vote-text">ช่วยยืนยันความถูกต้องของภาพนี้:</span> | |
| <div class="vote-buttons"> | |
| <button id="likeBtn" class="vote-btn vote-like" onclick="submitVote('like')"> | |
| 👍 ไกลก์ (<span id="likeCount">0</span>) | |
| </button> | |
| <button id="dislikeBtn" class="vote-btn vote-dislike" onclick="submitVote('dislike')"> | |
| 👎 เดดไลก์ (<span id="dislikeCount">0</span>) | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let selectedFile = null; | |
| let currentImageHash = null; | |
| function getUserId() { | |
| let uid = localStorage.getItem('scam_checker_uid'); | |
| if (!uid) { | |
| uid = 'uid_' + Math.random().toString(36).substring(2) + Date.now().toString(36); | |
| localStorage.setItem('scam_checker_uid', uid); | |
| } | |
| return uid; | |
| } | |
| function handleFileSelect(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| selectedFile = file; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const img = document.getElementById('preview-img'); | |
| img.src = e.target.result; | |
| img.style.display = 'block'; | |
| document.getElementById('upload-text').innerText = 'เปลี่ยนรูปภาพ'; | |
| document.getElementById('checkBtn').disabled = false; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| async function uploadAndCheck() { | |
| if (!selectedFile) return; | |
| const btn = document.getElementById('checkBtn'); | |
| const resultBox = document.getElementById('resultBox'); | |
| btn.disabled = true; | |
| btn.innerText = 'กำลังตรวจสอบ...'; | |
| resultBox.style.display = 'none'; | |
| const formData = new FormData(); | |
| formData.append('file', selectedFile); | |
| try { | |
| const res = await fetch('/check', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await res.json(); | |
| if (data.error) { | |
| alert(data.error); | |
| return; | |
| } | |
| currentImageHash = data.image_hash; | |
| updateResultUI(data); | |
| } catch (err) { | |
| alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์'); | |
| } finally { | |
| btn.disabled = false; | |
| btn.innerText = 'เช็ครูปภาพนี้'; | |
| } | |
| } | |
| function updateResultUI(data) { | |
| const resultBox = document.getElementById('resultBox'); | |
| const resultTitle = document.getElementById('resultTitle'); | |
| const resultDetail = document.getElementById('resultDetail'); | |
| const likeCount = document.getElementById('likeCount'); | |
| const dislikeCount = document.getElementById('dislikeCount'); | |
| resultBox.style.display = 'block'; | |
| if (data.result === 'ปลอดภัย') { | |
| resultBox.className = 'result-box result-safe'; | |
| resultTitle.innerText = '✅ ' + data.result; | |
| } else if (data.is_scam) { | |
| resultBox.className = 'result-box result-scam'; | |
| resultTitle.innerText = '⚠️ ' + data.result; | |
| } else { | |
| resultBox.className = 'result-box result-unknown'; | |
| resultTitle.innerText = '❓ ' + data.result; | |
| } | |
| resultDetail.innerText = data.detail || ''; | |
| likeCount.innerText = data.likes || 0; | |
| dislikeCount.innerText = data.dislikes || 0; | |
| document.getElementById('likeBtn').disabled = false; | |
| document.getElementById('dislikeBtn').disabled = false; | |
| } | |
| async function submitVote(voteType) { | |
| if (!currentImageHash) return; | |
| const likeBtn = document.getElementById('likeBtn'); | |
| const dislikeBtn = document.getElementById('dislikeBtn'); | |
| likeBtn.disabled = true; | |
| dislikeBtn.disabled = true; | |
| const formData = new FormData(); | |
| formData.append('image_hash', currentImageHash); | |
| formData.append('vote_type', voteType); | |
| formData.append('user_id', getUserId()); | |
| try { | |
| const res = await fetch('/vote', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await res.json(); | |
| if (data.success) { | |
| updateResultUI(data); | |
| } else { | |
| alert(data.error || 'ไม่สามารถบันทึกการโหวตได้'); | |
| } | |
| } catch (err) { | |
| alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |