<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Designer - โปรแกรมสร้างแบนเนอร์</title>
<link rel="stylesheet" href="style.css">
<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=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<h1>🎨 Banner Designer</h1>
<p>สร้างแบนเนอร์สวยๆ ง่ายๆ ด้วยตัวคุณเอง</p>
</header>
<div class="main-content">
<!-- Sidebar Controls -->
<aside class="sidebar">
<div class="control-section">
<h3>📐 ขนาดแบนเนอร์</h3>
<div class="size-selection">
<select id="sizePreset">
<option value="1200x630">Facebook Cover (1200×630)</option>
<option value="1584x396">Facebook Event (1584×396)</option>
<option value="1128x191">Twitter Header (1128×191)</option>
<option value="1080x1080">Instagram Square (1080×1080)</option>
<option value="1080x1920">Instagram Story (1080×1920)</option>
<option value="728x90">Banner 728×90</option>
<option value="320x50">Mobile Banner (320×50)</option>
<option value="custom">ขนาดกำหนดเอง</option>
</select>
</div>
<div class="custom-size" id="customSizeInputs" style="display: none;">
<label>📏 ขนาดกำหนดเอง:</label>
<div class="size-inputs">
<input type="number" id="customWidth" placeholder="กว้าง" value="1200" size="5">
<span>×</span>
<input type="number" id="customHeight" placeholder="สูง" value="630" size="5">
</div>
<button id="applyCustomSize">ใช้ขนาดนี้</button>
</div>
</div>
<div class="control-section">
<h3>🎨 พื้นหลัง</h3>
<div class="background-controls">
<label for="bgColor">สีพื้นหลัง:</label>
<input type="color" id="bgColor" value="#ffffff">
<label for="bgImage">รูปภาพพื้นหลัง:</label>
<input type="file" id="bgImage" accept="image/*">
<button id="removeBgImage">ลบรูปพื้นหลัง</button>
<label for="bgOpacity">ความโปร่งใสพื้นหลัง:</label>
<input type="range" id="bgOpacity" min="0" max="100" value="100">
<span id="opacityValue">100%</span>
</div>
</div>
<div class="control-section">
<h3>📝 เพิ่มข้อความ</h3>
<button id="addText" class="add-btn">+ เพิ่มข้อความ</button>
</div>
<div class="control-section">
<h3>🏷️ เพิ่มโลโก้</h3>
<input type="file" id="logoImage" accept="image/*">
<button id="addLogo" class="add-btn">+ เพิ่มโลโก้</button>
</div>
<div class="control-section" id="textControls" style="display: none;">
<h3>✏️ แก้ไขข้อความ</h3>
<input type="text" id="textContent" placeholder="ใส่ข้อความ">
<label for="fontFamily">ฟอนต์:</label>
<select id="fontFamily">
<option value="Kanit">Kanit</option>
<option value="Noto Sans Thai">Noto Sans Thai</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
</select>
<label for="fontSize">ขนาดตัวอักษร:</label>
<input type="range" id="fontSize" min="12" max="200" value="24">
<span id="fontSizeValue">24px</span>
<small style="color: #666; font-size: 0.75rem;">💡 ลากมุมกรอบข้อความเพื่อปรับขนาดแบบสัดส่วน</small>
<label for="textColor">สีตัวอักษร:</label>
<input type="color" id="textColor" value="#000000">
<div class="text-style-buttons">
<button id="boldBtn" class="style-btn">B</button>
<button id="italicBtn" class="style-btn">I</button>
<button id="underlineBtn" class="style-btn">U</button>
</div>
<label for="textAlign">จัดข้อความ:</label>
<select id="textAlign">
<option value="left">ซ้าย</option>
<option value="center">กลาง</option>
<option value="right">ขวา</option>
</select>
<button id="deleteElement" class="delete-btn">🗑️ ลบองค์ประกอบ</button>
</div>
<div class="control-section">
<h3>💾 ส่งออก</h3>
<select id="exportFormat">
<option value="png">PNG (รองรับความโปร่งใส)</option>
<option value="jpeg">JPEG</option>
<option value="webp">WebP</option>
</select>
<button id="exportBtn" class="export-btn">� ดาวน์โหลด</button>
</div>
</aside>
<!-- Canvas Area -->
<main class="canvas-area">
<div class="canvas-container">
<canvas id="bannerCanvas" width="1200" height="630"></canvas>
<div id="overlay" class="overlay"></div>
</div>
<div class="canvas-info">
<span id="canvasSize">1200 × 630 px</span>
<p style="font-size: 0.8rem; color: #888; margin-top: 5px;">💡 คลิกเพื่อเลือก | ลากเพื่อย้าย | ใช้จุดสีน้ำเงินเพื่อปรับขนาด | ใช้คีย์ลัดสำหรับการทำงานรวดเร็ว</p>
</div>
</main>
</div>
</div>
<script src="script.js"></script>
</body>
</html>