<!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=Kanit:wght@300;400;600;700&family=Mitr:wght@300;400;500;600&family=Sarabun:wght@300;400;600;700&family=Prompt:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Kanit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.header {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
padding: 30px;
text-align: center;
color: white;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
animation: bounce 2s infinite;
font-family: 'Mitr', sans-serif;
}
.header p {
font-size: 1.2em;
opacity: 0.9;
font-family: 'Prompt', sans-serif;
}
@keyframes bounce {
0%,
20%,
60%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
80% {
transform: translateY(-5px);
}
}
.form-container {
padding: 40px;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 1.1em;
font-family: 'Sarabun', sans-serif;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.8);
font-family: 'Kanit', sans-serif;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.submit-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 18px 40px;
border: none;
border-radius: 50px;
font-size: 1.2em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: 20px;
position: relative;
overflow: hidden;
font-family: 'Prompt', sans-serif;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.submit-btn:active {
transform: translateY(-1px);
}
.meme-result {
display: none;
text-align: center;
padding: 40px;
background: linear-gradient(135deg, #a8edea, #fed6e3);
border-radius: 15px;
margin-top: 30px;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.meme-image {
max-width: 400px;
width: 100%;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.meme-text {
font-size: 1.5em;
font-weight: bold;
color: #333;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
font-family: 'Mitr', sans-serif;
}
.meme-caption {
font-size: 1.1em;
color: #666;
font-style: italic;
font-family: 'Prompt', sans-serif;
}
.emoji {
font-size: 1.5em;
margin: 0 5px;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.row {
display: flex;
gap: 20px;
}
.col {
flex: 1;
}
.download-btn {
background: linear-gradient(135deg, #ff6b35, #f7931e);
max-width: 300px;
margin: 20px auto 0;
}
#receiptCanvas {
display: none;
}
@media (max-width: 768px) {
.row {
flex-direction: column;
gap: 0;
}
.header h1 {
font-size: 2em;
}
.form-container {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚨 ฟอร์มรับแจ้งความ 🚨</h1>
<p>บริการรับแจ้งความออนไลน์ที่สนุกที่สุดในจักรวาล!</p>
</div>
<div class="form-container">
<form id="reportForm">
<div class="row">
<div class="col">
<div class="form-group">
<label for="reporterName">ชื่อผู้แจ้ง <span class="emoji">👤</span></label>
<input type="text" id="reporterName" name="reporterName" required>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="phone">เบอร์โทรศัพท์ <span class="emoji">📱</span></label>
<input type="tel" id="phone" name="phone" required>
</div>
</div>
</div>
<div class="form-group">
<label for="incidentType">ประเภทเหตุการณ์ <span class="emoji">🚨</span></label>
<select id="incidentType" name="incidentType" required>
<option value="">เลือกประเภทเหตุการณ์</option>
<option value="theft">ขโมย/ลักทรัพย์</option>
<option value="fraud">หลอกลวง</option>
<option value="accident">อุบัติเหตุ</option>
<option value="harassment">รบกวน/คุกคาม</option>
<option value="bullying">ถูกล้อเลียน/รังแก</option>
<option value="noise">เสียงดัง/รบกวนความสงบ</option>
<option value="other">อื่นๆ</option>
</select>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="location">สถานที่เกิดเหตุ <span class="emoji">📍</span></label>
<input type="text" id="location" name="location" required>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="incidentDate">วันที่เกิดเหตุ <span class="emoji">📅</span></label>
<input type="datetime-local" id="incidentDate" name="incidentDate" required>
</div>
</div>
</div>
<div class="form-group">
<label for="description">รายละเอียดเหตุการณ์ <span class="emoji">📝</span></label>
<textarea id="description" name="description" placeholder="อธิบายรายละเอียดเหตุการณ์ที่เกิดขึ้น..." required></textarea>
</div>
<div class="form-group">
<label for="suspect">ข้อมูลผู้ต้องสงสัย (ถ้ามี) <span class="emoji">🕵️</span></label>
<textarea id="suspect" name="suspect" placeholder="อธิบายลักษณะหรือข้อมูลของผู้ต้องสงสัย (ถ้ามี)"></textarea>
</div>
<button type="submit" class="submit-btn">
<span class="emoji">🚀</span> ส่งใบแจ้งความ <span class="emoji">🚀</span>
</button>
</form>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>กำลังประมวลผลใบแจ้งความ... <span class="emoji">⚡</span></p>
</div>
<div class="meme-result" id="memeResult">
<img class="meme-image" id="memeImage" src="" alt="Meme">
<div class="meme-text" id="memeText"></div>
<div class="meme-caption" id="memeCaption"></div>
<button id="downloadBtn" class="submit-btn download-btn">
<span class="emoji">📸</span> ดาวน์โหลดใบรับแจ้งความ <span class="emoji">📸</span>
</button>
</div>
</div>
</div>
<canvas id="receiptCanvas" width="600" height="800"></canvas>
<script>
const memeTemplates = [
{
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23ffeb3b'/%3E%3Ctext x='200' y='150' text-anchor='middle' font-family='Arial Black' font-size='24' fill='%23000'%3E%F0%9F%91%AE%E2%80%8D%E2%99%82%EF%B8%8F POLICE%3C/text%3E%3C/svg%3E",
texts: [
"ใบแจ้งความของคุณถูกรับแล้ว!",
"เจ้าหน้าที่กำลังเร่งดำเนินการ",
"ขอบคุณที่เป็นพลเมืองดี!"
],
captions: [
"หมายเลขคดี: MEME-" + Math.floor(Math.random() * 10000),
"สถานะ: กำลังสืบสวน 🔍",
"ความคืบหน้า: จะติดตามแจ้งให้ทราบ"
]
},
{
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%234caf50'/%3E%3Ctext x='200' y='120' text-anchor='middle' font-family='Arial Black' font-size='32' fill='white'%3E%E2%9C%85 SUCCESS%3C/text%3E%3Ctext x='200' y='180' text-anchor='middle' font-family='Arial' font-size='18' fill='white'%3E%F0%9F%8E%89 MISSION COMPLETE%3C/text%3E%3C/svg%3E",
texts: [
"ภารกิจสำเร็จ!",
"ใบแจ้งความถูกส่งแล้ว",
"คุณคือฮีโร่ของสังคม!"
],
captions: [
"คะแนนพลเมือง: +100 🌟",
"Achievement Unlocked: Law Abiding Citizen",
"ระบบจะส่ง SMS แจ้งผลภายใน 24 ชั่วโมง"
]
}
];
const incidentMemes = {
theft: {
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e91e63'/%3E%3Ctext x='200' y='120' text-anchor='middle' font-family='Arial Black' font-size='24' fill='white'%3E%F0%9F%A6%B9%E2%80%8D%E2%99%82%EF%B8%8F THEFT ALERT%3C/text%3E%3Ctext x='200' y='180' text-anchor='middle' font-family='Arial' font-size='16' fill='white'%3EANTI-THEFT UNIT ACTIVATED%3C/text%3E%3C/svg%3E",
text: "หน่วยปราบขโมยเข้าปฏิบัติการแล้ว!",
caption: "ขโมยเตรียมพร้อมรับโทษ! ⚖️"
},
fraud: {
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23f44336'/%3E%3Ctext x='200' y='120' text-anchor='middle' font-family='Arial Black' font-size='24' fill='white'%3E%F0%9F%9A%A8 FRAUD ALERT%3C/text%3E%3Ctext x='200' y='180' text-anchor='middle' font-family='Arial' font-size='16' fill='white'%3ESCAM BUSTERS ACTIVATED%3C/text%3E%3C/svg%3E",
text: "หน่วยปราบคดีหลอกลวงรับทราบแล้ว!",
caption: "พวกมิจฉาชีพจะได้รับบทเรียน! 💪"
},
accident: {
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23ff5722'/%3E%3Ctext x='200' y='120' text-anchor='middle' font-family='Arial Black' font-size='24' fill='white'%3E%F0%9F%9A%91 EMERGENCY%3C/text%3E%3Ctext x='200' y='180' text-anchor='middle' font-family='Arial' font-size='16' fill='white'%3ERESCUE TEAM NOTIFIED%3C/text%3E%3C/svg%3E",
text: "หน่วยฉุกเฉินได้รับแจ้งแล้ว!",
caption: "ความปลอดภัยเป็นสิ่งสำคัญที่สุด 🏥"
},
bullying: {
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23ff6b35'/%3E%3Ctext x='200' y='100' text-anchor='middle' font-family='Arial Black' font-size='22' fill='white'%3E%F0%9F%98%A4 ANTI-BULLY%3C/text%3E%3Ctext x='200' y='140' text-anchor='middle' font-family='Arial Black' font-size='22' fill='white'%3ESQUAD ACTIVATED%3C/text%3E%3Ctext x='200' y='200' text-anchor='middle' font-family='Arial' font-size='16' fill='white'%3ENO MORE BULLIES!%3C/text%3E%3C/svg%3E",
text: "หน่วยปราบล้อเลียนเข้าปฏิบัติการ!",
caption: "เราจะทำให้พวกกบาลเลิกกวนใจคุณ! 💪😤"
}
};
const fakeNames = [
"นายใส่ใจ มากมาย", "นางสาวใจดี รักษาความยุติธรรม", "นายสุจริต ปราศจากโกง",
"นางดวงดี มีสิทธิ์", "นายมั่นใจ ไม่กลัวใคร", "นางสาวกล้าหาญ พูดความจริง",
"นายไม่ยอม ถูกรังแก", "นางแกล้วกล้า ทำดี", "นายจริงใจ ไม่หลอกใคร",
"นางสาวใจสู้ ไม่ถอย", "นายสุภาพ มีมารยาท", "นางร่าเริง แต่เคร่งครัด"
];
let currentFormData = {};
document.getElementById('reportForm').addEventListener('submit', function(e) {
e.preventDefault();
// Show loading
document.getElementById('loading').style.display = 'block';
// Get form data
const formData = new FormData(this);
currentFormData = {
reporterName: formData.get('reporterName'),
phone: formData.get('phone'),
incidentType: formData.get('incidentType'),
location: formData.get('location'),
incidentDate: formData.get('incidentDate'),
description: formData.get('description'),
suspect: formData.get('suspect')
};
// Simulate processing time
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
showMemeResult(currentFormData.incidentType);
}, 2000);
});
document.getElementById('downloadBtn').addEventListener('click', function() {
generateReceipt();
});
function showMemeResult(incidentType) {
let meme;
// Choose specific meme based on incident type if available
if (incidentMemes[incidentType]) {
meme = incidentMemes[incidentType];
document.getElementById('memeImage').src = meme.image;
document.getElementById('memeText').textContent = meme.text;
document.getElementById('memeCaption').textContent = meme.caption;
} else {
// Random general meme
const randomMeme = memeTemplates[Math.floor(Math.random() * memeTemplates.length)];
document.getElementById('memeImage').src = randomMeme.image;
document.getElementById('memeText').textContent = randomMeme.texts[Math.floor(Math.random() * randomMeme.texts.length)];
document.getElementById('memeCaption').textContent = randomMeme.captions[Math.floor(Math.random() * randomMeme.captions.length)];
}
document.getElementById('memeResult').style.display = 'block';
// Scroll to result
document.getElementById('memeResult').scrollIntoView({
behavior: 'smooth'
});
}
function generateReceipt() {
const canvas = document.getElementById('receiptCanvas');
const ctx = canvas.getContext('2d');
// Set canvas size for social media sharing
canvas.width = 600;
canvas.height = 800;
// Create gradient background
const bgGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
bgGradient.addColorStop(0, '#667eea');
bgGradient.addColorStop(1, '#764ba2');
ctx.fillStyle = bgGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add decorative border
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 8;
ctx.strokeRect(20, 20, canvas.width - 40, canvas.height - 40);
// Header section
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 36px Arial';
ctx.textAlign = 'center';
ctx.fillText('🚨 ใบรับแจ้งความ 🚨', canvas.width / 2, 100);
ctx.font = 'bold 24px Arial';
ctx.fillText('สำนักงานตำหรวจ', canvas.width / 2, 140);
// Case number
const caseNumber = 'MEME-' + Math.floor(Math.random() * 10000);
ctx.font = 'bold 20px Arial';
ctx.fillText(`หมายเลขคดี: ${caseNumber}`, canvas.width / 2, 180);
// Date
const today = new Date().toLocaleDateString('th-TH');
ctx.font = '18px Arial';
ctx.fillText(`วันที่: ${today}`, canvas.width / 2, 210);
// Main content box
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.fillRect(50, 250, canvas.width - 100, 400);
// Content
ctx.fillStyle = '#333333';
ctx.textAlign = 'left';
ctx.font = 'bold 18px Arial';
const fakeName = fakeNames[Math.floor(Math.random() * fakeNames.length)];
const lines = [
`👤 ผู้แจ้ง: ${fakeName}`,
`📱 เบอร์: 0xx-xxx-xxxx`,
`🚨 ประเภท: ${getIncidentTypeText(currentFormData.incidentType)}`,
`📍 สถานที่: ${currentFormData.location}`,
`📅 วันเกิดเหตุ: ${formatDate(currentFormData.incidentDate)}`,
'',
'📝 รายละเอียด:',
];
// Add description lines
const descLines = wrapText(currentFormData.description, 35);
let y = 290;
lines.forEach(line => {
ctx.fillText(line, 70, y);
y += line === '' ? 10 : 22;
});
// Add description
descLines.forEach(line => {
ctx.fillText(line, 70, y);
y += 22;
});
// Status section
ctx.fillStyle = '#4CAF50';
ctx.fillRect(50, 680, canvas.width - 100, 80);
ctx.fillStyle = '#ffffff';
ctx.textAlign = 'center';
ctx.font = 'bold 22px Arial';
ctx.fillText('✅ สถานะ: รับเรื่องแล้ว', canvas.width / 2, 710);
ctx.font = '16px Arial';
ctx.fillText('เจ้าหน้าที่จะติดต่อกลับภายใน 24 ชั่วโมง', canvas.width / 2, 740);
// Download the image
const link = document.createElement('a');
link.download = `ใบรับแจ้งความ_${caseNumber}.png`;
link.href = canvas.toDataURL();
link.click();
}
function getIncidentTypeText(type) {
const types = {
'theft': 'ขโมย/ลักทรัพย์',
'fraud': 'หลอกลวง',
'accident': 'อุบัติเหตุ',
'harassment': 'รบกวน/คุกคาม',
'bullying': 'ถูกล้อเลียน/รังแก',
'noise': 'เสียงดัง/รบกวนความสงบ',
'other': 'อื่นๆ'
};
return types[type] || type;
}
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('th-TH') + ' ' +
date.toLocaleTimeString('th-TH', {hour: '2-digit', minute: '2-digit'});
}
function wrapText(text, maxLength) {
const words = text.split(' ');
const lines = [];
let currentLine = '';
words.forEach(word => {
if ((currentLine + word).length > maxLength) {
if (currentLine) lines.push(currentLine.trim());
currentLine = word + ' ';
} else {
currentLine += word + ' ';
}
});
if (currentLine) lines.push(currentLine.trim());
return lines.slice(0, 4); // Limit to 4 lines
}
// Add some interactive effects
document.querySelectorAll('input, select, textarea').forEach(element => {
element.addEventListener('focus', function() {
this.parentElement.style.transform = 'scale(1.02)';
});
element.addEventListener('blur', function() {
this.parentElement.style.transform = 'scale(1)';
});
});
</script>
</body>
</html>