<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="เว็บไซต์สำหรับสร้างมีมสำหรับนักพัฒนา โปรแกรมเมอร์ และผู้สนใจ AI - เปลี่ยนบั๊กเป็นเสียงฮา โค้ดปัญหาให้เป็นมีม!">
<meta name="keywords" content="meme generator, โปรแกรมเมอร์, developer memes, AI memes, สร้างมีม, meme maker">
<meta name="author" content="Dev & AI Meme Forge">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Dev & AI Meme Forge - สร้างมีมสำหรับนักพัฒนา">
<meta property="og:description" content="เปลี่ยนบั๊กเป็นเสียงฮา โค้ดปัญหาให้เป็นมีม! เว็บไซต์สำหรับสร้างมีมที่เน้นไปที่กลุ่มนักพัฒนาซอฟต์แวร์">
<meta property="og:image" content="img/og-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Dev & AI Meme Forge - สร้างมีมสำหรับนักพัฒนา">
<meta property="twitter:description" content="เปลี่ยนบั๊กเป็นเสียงฮา โค้ดปัญหาให้เป็นมีม!">
<meta property="twitter:image" content="img/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" href="img/icon-192.png">
<link rel="apple-touch-icon" href="img/icon-192.png">
<!-- Enhanced SEO and Social Media Meta Tags -->
<meta name="robots" content="index, follow">
<meta name="author" content="Goragod Wiriya">
<meta name="generator" content="Meme Forge Pro">
<!-- Enhanced Open Graph -->
<meta property="og:site_name" content="Dev & AI Meme Forge">
<meta property="og:locale" content="th_TH">
<meta property="og:updated_time" content="2024-06-19T00:00:00Z">
<!-- Enhanced Twitter Cards -->
<meta name="twitter:site" content="@MemeForge">
<meta name="twitter:creator" content="@DevMemeForge">
<title>Dev & AI Meme Forge - สร้างมีมสำหรับนักพัฒนา</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- PWA Support -->
<meta name="theme-color" content="#00ff88">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Meme Forge">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- PWA Manifest -->
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- Particle Animation Background -->
<div class="particles" id="particles"></div>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text">กำลังสร้างมีม...</div>
</div>
<header>
<button class="theme-switcher" id="theme-switcher" aria-label="สลับธีม">
<span class="theme-icon">🌙</span>
<span class="theme-text">Dark</span>
</button>
<h1>🚀 Meme Forge Pro</h1>
<p>"เปลี่ยนบั๊กเป็นเสียงฮา โค้ดปัญหาให้เป็นมีม!"</p>
<small style="opacity: 0.7; font-size: 0.8rem;">by Goragod Wiriya</small>
</header>
<main class="main-grid">
<!-- Controls Panel -->
<div class="controls-panel glass-panel">
<h2>🎨 สร้างมีมของคุณ</h2>
<div class="input-group">
<label for="top-text">📝 ข้อความบน:</label>
<input type="text" id="top-text" placeholder="เมื่อโค้ดทำงานครั้งแรก" maxlength="100">
</div>
<div class="input-group">
<label for="bottom-text">📝 ข้อความล่าง:</label>
<input type="text" id="bottom-text" placeholder="It works on my machine" maxlength="100">
</div>
<!-- Drag Instructions -->
<div class="drag-instructions">
<p>💡 <strong>วิธีใช้:</strong> คลิกและลากข้อความบน canvas เพื่อย้ายตำแหน่ง</p>
<button type="button" class="reset-positions-btn" id="reset-positions-btn">
🔄 รีเซ็ตตำแหน่ง
</button>
</div>
<div class="input-group">
<label for="image-upload">📁 อัปโหลดรูปภาพ:</label>
<input type="file" id="image-upload" accept="image/*">
<small>รองรับไฟล์: JPG, PNG, GIF (สูงสุด 5MB)</small>
</div>
<div class="button-group">
<button id="clear-btn" class="btn btn-secondary" data-tooltip="ล้างข้อมูลทั้งหมด">🗑️ ล้าง</button>
<button id="download-btn" class="btn btn-primary" data-tooltip="ดาวน์โหลดเป็น PNG">💾 ดาวน์โหลด</button>
</div>
</div>
<!-- Preview Panel -->
<div class="preview-panel glass-panel">
<h3>👀 ตัวอย่างมีม</h3>
<div class="canvas-container">
<canvas id="meme-canvas" aria-label="ตัวอย่างมีมที่สร้าง"></canvas>
</div>
<div class="preview-info">
<span id="canvas-size">600 x 400 px</span>
</div>
</div>
</main>
<!-- Templates Section -->
<section class="templates-showcase">
<div class="templates-section">
<div class="templates-header">
<h2>🖼️ เลือกเทมเพลต</h2>
<span class="template-count" id="template-count">22 เทมเพลต</span>
</div>
<div class="templates" id="templates-container">
<!-- Template images will be added here by JS -->
</div>
</div>
</section>
<!-- Feature highlights -->
<section class="features">
<h2>✨ ฟีเจอร์เด่น</h2>
<div class="feature-grid">
<div class="feature-item">
<div class="feature-icon">🎨</div>
<h3>สร้างมีมง่ายๆ</h3>
<p>เพียงเลือกรูป เพิ่มข้อความ แล้วดาวน์โหลด</p>
</div>
<div class="feature-item">
<div class="feature-icon">📱</div>
<h3>ใช้งานได้ทุกอุปกรณ์</h3>
<p>รองรับทั้ง Desktop, Tablet และ Mobile</p>
</div>
<div class="feature-item">
<div class="feature-icon">🌙</div>
<h3>Dark/Light Mode</h3>
<p>เลือกธีมที่ชอบได้ตามใจ</p>
</div>
<div class="feature-item">
<div class="feature-icon">⚡</div>
<h3>Real-time Preview</h3>
<p>เห็นผลลัพธ์ทันทีที่แก้ไข</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<p>© 2024 Meme Forge Pro | สร้างด้วย ❤️ สำหรับชุมชนนักพัฒนา</p>
<div class="footer-links">
<a href="https://github.com/goragodwiriya/meme-forge-pro" target="_blank" rel="noopener">🐙 GitHub</a>
<a href="#" onclick="showAbout()">ℹ️ เกี่ยวกับเรา</a>
</div>
<div class="footer-author">
<p>Created by <strong>Goragod Wiriya</strong> | <a href="https://github.com/goragodwiriya" target="_blank" rel="noopener">@goragodwiriya</a></p>
</div>
</div>
</footer>
<!-- Enhanced Modal -->
<div id="modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal-title">Modal Title</h2>
<button class="modal-close" onclick="closeModal()" aria-label="ปิด">×</button>
</div>
<div class="modal-body" id="modal-body">
<!-- Modal content will be injected here -->
</div>
</div>
</div>
<script src="templates.js"></script>
<script src="script.js"></script>
<script src="enhanced.js"></script>
<!-- Add notification animations -->
<style>
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
</style>
</body>
</html>