feat: add extension implementation and docs
Add manifest.json, sidepanel components, and scripts. Include project assets and documentation files. Remove placeholder blank file.
This commit is contained in:
Kunthawat Greethong
314
sidepanel/panel.html
Normal file
314
sidepanel/panel.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="th">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Auto Cover Generator</title>
|
||||
<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=Sarabun:wght@300;400;600;700;800&family=Prompt:wght@400;600;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="panel.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<nav class="tabs">
|
||||
<button class="tab-btn active" data-tab="ai-cover">AI Cover (Gemini)</button>
|
||||
<button class="tab-btn" data-tab="grid-creator">Grid Creator</button>
|
||||
</nav>
|
||||
|
||||
<!-- TAB 1: AI Cover (Original Content Restored) -->
|
||||
<div id="tab-ai-cover" class="tab-content active">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-gradient"></div>
|
||||
<h1 class="title">🎨 Auto Cover Generator</h1>
|
||||
<p class="subtitle">สร้างหน้าปกสุดเจ๋งด้วย Gemini AI</p>
|
||||
</header>
|
||||
|
||||
<!-- Settings Section -->
|
||||
<section class="section" style="padding-bottom: 10px;">
|
||||
<h2 class="section-title" style="margin-bottom: 10px;">⚙️ การตั้งค่า</h2>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="autoDownloadToggle">
|
||||
<span>ดาวน์โหลดรูปภาพอัตโนมัติ (Auto Download)</span>
|
||||
</label>
|
||||
<p style="font-size: 11px; color: var(--text-secondary); margin-left: 28px; margin-top: 4px;">
|
||||
เมื่อเปิดใช้งาน รูปที่ Gen เสร็จจะถูกดาวน์โหลดลงเครื่องทันที
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Image Upload Section -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">🖼️ เพิ่มรูปภาพ (สูงสุด 10 รูป)</h2>
|
||||
<div class="upload-area" id="dropZone">
|
||||
<div class="upload-placeholder" id="uploadPlaceholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
||||
<polyline points="21 15 16 10 5 21"></polyline>
|
||||
</svg>
|
||||
<p>คลิกหรือลากรูปมาวางที่นี่</p>
|
||||
<span class="upload-hint">รองรับ JPG, PNG (Max 10)</span>
|
||||
</div>
|
||||
<input type="file" id="imageInput" multiple accept="image/*" style="display: none;">
|
||||
<div class="image-preview-grid" id="imagePreviewGrid" style="display: none;"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Style Selector -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">🎭 เลือกสไตล์ปก</h2>
|
||||
<div class="style-grid">
|
||||
<button class="style-card active" data-style="breaking-news">
|
||||
<div class="style-icon">🚨</div>
|
||||
<div class="style-name">ข่าวด่วน</div>
|
||||
<div class="style-desc">Breaking News</div>
|
||||
</button>
|
||||
<button class="style-card" data-style="political">
|
||||
<div class="style-icon">🏛️</div>
|
||||
<div class="style-name">ข่าวการเมือง</div>
|
||||
<div class="style-desc">Political</div>
|
||||
</button>
|
||||
<button class="style-card" data-style="movie-poster">
|
||||
<div class="style-icon">🎬</div>
|
||||
<div class="style-name">โปสเตอร์ภาพยนต์</div>
|
||||
<div class="style-desc">Movie Poster</div>
|
||||
</button>
|
||||
<button class="style-card" data-style="drama">
|
||||
<div class="style-icon">🎭</div>
|
||||
<div class="style-name">ดราม่า</div>
|
||||
<div class="style-desc">Drama</div>
|
||||
</button>
|
||||
<button class="style-card" data-style="action">
|
||||
<div class="style-icon">💥</div>
|
||||
<div class="style-name">แอคชั่น</div>
|
||||
<div class="style-desc">Action</div>
|
||||
</button>
|
||||
<button class="style-card" data-style="original-image">
|
||||
<div class="style-icon">🖼️</div>
|
||||
<div class="style-name">ภาพต้นแบบเหมือนเดิม</div>
|
||||
<div class="style-desc">ไม่แก้ไขภาพ</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Aspect Ratio Selector -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">📐 ขนาดหน้าปก</h2>
|
||||
<div class="ratio-grid">
|
||||
<button class="ratio-btn" data-ratio="1:1">
|
||||
<div class="ratio-box square"></div>
|
||||
<span>1:1</span>
|
||||
</button>
|
||||
<button class="ratio-btn" data-ratio="4:5">
|
||||
<div class="ratio-box portrait-45"></div>
|
||||
<span>4:5</span>
|
||||
</button>
|
||||
<button class="ratio-btn" data-ratio="3:4">
|
||||
<div class="ratio-box portrait-34"></div>
|
||||
<span>3:4</span>
|
||||
</button>
|
||||
<button class="ratio-btn" data-ratio="4:3">
|
||||
<div class="ratio-box landscape-43"></div>
|
||||
<span>4:3</span>
|
||||
</button>
|
||||
<button class="ratio-btn" data-ratio="2:3">
|
||||
<div class="ratio-box portrait-23"></div>
|
||||
<span>2:3</span>
|
||||
</button>
|
||||
<button class="ratio-btn" data-ratio="9:16">
|
||||
<div class="ratio-box portrait-916"></div>
|
||||
<span>9:16</span>
|
||||
</button>
|
||||
<button class="ratio-btn active" data-ratio="16:9">
|
||||
<div class="ratio-box landscape-169"></div>
|
||||
<span>16:9</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Emotion/Mood Selector -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">😊 อารมณ์ของตัวแบบ</h2>
|
||||
<div class="emotion-grid">
|
||||
<button class="emotion-btn" data-emotion="none">🚫 ไม่ใส่</button>
|
||||
<button class="emotion-btn" data-emotion="happy">😊 ยิ้มแย้ม</button>
|
||||
<button class="emotion-btn active" data-emotion="serious">😐 จริงจัง</button>
|
||||
<button class="emotion-btn" data-emotion="sad">😢 เศร้า</button>
|
||||
<button class="emotion-btn" data-emotion="angry">😠 โกรธ</button>
|
||||
<button class="emotion-btn" data-emotion="surprised">😲 ตกใจ</button>
|
||||
<button class="emotion-btn" data-emotion="confident">😎 มั่นใจ</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Text Customization -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">✍️ ปรับแต่งตัวหนังสือ</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="includeText" checked>
|
||||
<span>ใส่ข้อความในหน้าปก</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="textOptions">
|
||||
<div class="form-group">
|
||||
<label for="headlineText">หัวข้อข่าว / ข้อความ</label>
|
||||
<textarea id="headlineText" placeholder="พิมพ์หัวข้อที่ต้องการ..." class="text-input" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>ตำแหน่งตัวหนังสือ</label>
|
||||
<div class="position-grid">
|
||||
<button class="position-btn" data-position="top-left">บนซ้าย</button>
|
||||
<button class="position-btn" data-position="top">บน</button>
|
||||
<button class="position-btn" data-position="top-right">บนขวา</button>
|
||||
<button class="position-btn" data-position="center-left">ซ้าย</button>
|
||||
<button class="position-btn active" data-position="center">กลาง</button>
|
||||
<button class="position-btn" data-position="center-right">ขวา</button>
|
||||
<button class="position-btn" data-position="bottom-left">ล่างซ้าย</button>
|
||||
<button class="position-btn" data-position="bottom">ล่าง</button>
|
||||
<button class="position-btn" data-position="bottom-right">ล่างขวา</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>สไตล์ฟอนต์ (เลือกได้มากกว่า 1)</label>
|
||||
<div class="font-style-grid" id="fontStyleGrid">
|
||||
<button class="font-style-btn" data-font-style="3d">3D</button>
|
||||
<button class="font-style-btn active" data-font-style="thai-news-loop">ข่าวไทยมีหัว</button>
|
||||
<button class="font-style-btn active" data-font-style="bold">ตัวหนา</button>
|
||||
<button class="font-style-btn" data-font-style="thin">ตัวบาง</button>
|
||||
<button class="font-style-btn" data-font-style="italic">ตัวเอียง</button>
|
||||
<button class="font-style-btn" data-font-style="thai-news">ฟอนต์ข่าวไทย</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Preset Management -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">💾 บันทึกการตั้งค่า (Presets)</h2>
|
||||
<div class="preset-controls">
|
||||
<input type="text" id="presetName" class="text-input" placeholder="ตั้งชื่อ Preset..."
|
||||
style="margin-bottom: 8px;">
|
||||
<button class="btn btn-secondary btn-full" id="savePresetBtn">บันทึกการตั้งค่า</button>
|
||||
</div>
|
||||
<div id="presetList" class="preset-list">
|
||||
<!-- Presets will be loaded here -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Custom Prompt -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">🎨 Prompt เพิ่มเติม (ถ้ามี)</h2>
|
||||
<textarea id="customPrompt" class="custom-prompt"
|
||||
placeholder="เพิ่มรายละเอียดเพิ่มเติมที่ต้องการ... เช่น: เพิ่มเอฟเฟกต์แสง, เปลี่ยนบรรยากาศ, ฯลฯ"
|
||||
rows="4"></textarea>
|
||||
</section>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary btn-full" id="generateBtn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M8 12h8"></path>
|
||||
<path d="M12 8v8"></path>
|
||||
</svg>
|
||||
สร้างหน้าปก
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- History Section -->
|
||||
<div class="history-section section">
|
||||
<div class="history-header">
|
||||
<h2 class="section-title">📜 ประวัติการสร้าง</h2>
|
||||
<button class="btn-small" id="exportHistoryBtn">ส่งออก Log</button>
|
||||
</div>
|
||||
<div class="history-stats">
|
||||
<span id="historyCount">ทั้งหมด: 0</span>
|
||||
</div>
|
||||
<div class="history-list" id="historyList">
|
||||
<p style="text-align: center; color: var(--text-secondary); padding: 20px;">ยังไม่มีประวัติ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: Grid Creator (Original Content Restored) -->
|
||||
<div id="tab-grid-creator" class="tab-content">
|
||||
<header class="header">
|
||||
<div class="header-gradient"></div>
|
||||
<h1 class="title">🧩 Grid Creator</h1>
|
||||
<p class="subtitle">รวมภาพหลายช่องในสไตล์คุณ</p>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="upload-area" id="gridDropZone">
|
||||
<div class="upload-placeholder">
|
||||
<p>+ เพิ่มรูปภาพ</p>
|
||||
<span class="upload-hint">ลาก หรือ คลิก</span>
|
||||
</div>
|
||||
<input type="file" id="gridImageInput" multiple accept="image/*" style="display: none;">
|
||||
</div>
|
||||
<div id="gridImagesList" class="grid-images-list"></div>
|
||||
<p class="section-status"><small id="gridImageCount">0 ภาพ</small></p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Layout</h2>
|
||||
<div id="gridTemplateList" class="template-list"></div>
|
||||
</section>
|
||||
|
||||
<!-- Fake Number Settings -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">🔢 Fake Number Overlay</h2>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="fakeNumberToggle">
|
||||
<span>แสดงตัวเลขมุมขวาล่าง</span>
|
||||
</label>
|
||||
<div id="fakeNumberInputContainer" style="margin-top: 8px; display: none;">
|
||||
<input type="text" id="fakeNumberInput" class="text-input" value="+5" placeholder="e.g. +5">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="preview-section">
|
||||
<div id="gridCanvasPreview" class="canvas-preview-container">
|
||||
<!-- Canvas will be here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary btn-full" id="gridGenerateBtn">Generate Grid</button>
|
||||
<button class="btn btn-secondary btn-full" id="gridDownloadBtn" style="margin-top: 8px;">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div> <!-- Container End -->
|
||||
|
||||
|
||||
<div class="status-message" id="statusMessage" style="display: none;"></div>
|
||||
|
||||
<script src="../scripts/grid_templates.js"></script>
|
||||
<script src="../scripts/grid_generator.js"></script>
|
||||
<script src="grid_ui.js"></script>
|
||||
|
||||
<script src="panel.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user