[แจกโค้ดสำหรับนิวบี้] แบบฟอร์มสร้างตัวละคร
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@700;900&family=Noto+Sans+Thai:wght@300;400;700&family=Montserrat:wght@500;800&display=swap');
/* --- 🏛️ MAIN DISTRIBUTION FRAME --- */
.distro-wrapper { max-width: 950px; margin: 50px auto; background: #0a0a0a; font-family: 'Noto Sans Thai', sans-serif; border: 1px solid #222; box-shadow: 0 50px 100px rgba(0,0,0,0.5); }
.distro-header { padding: 80px 40px; text-align: center; background: linear-gradient(to bottom, #1a1a1a, #0a0a0a); border-bottom: 2px solid #d4af37; }
.distro-title { font-family: 'Cinzel Decorative', serif; font-size: 45px; color: #d4af37; letter-spacing: 8px; margin: 0; text-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
.distro-content { padding: 60px; color: #ccc; }
.camp-card { background: #111; border: 1px solid #333; margin-bottom: 80px; position: relative; }
.camp-label { position: absolute; top: -15px; left: 40px; padding: 5px 25px; font-family: 'Cinzel', serif; font-weight: 900; font-size: 12px; letter-spacing: 3px; color: #000; }
/* --- 📋 CODE BOX AREA --- */
.code-container { padding: 0 40px 40px 40px; }
.code-box-header { display: flex; justify-content: space-between; align-items: center; background: #222; padding: 10px 20px; border-radius: 5px 5px 0 0; border: 1px solid #444; border-bottom: none; }
.code-box-title { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800; color: #888; letter-spacing: 1px; }
.copy-btn { background: #d4af37; color: #000; border: none; padding: 5px 15px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800; cursor: pointer; border-radius: 3px; transition: 0.3s; }
.copy-btn:hover { background: #fff; }
.code-area { width: 100%; height: 200px; background: #050505; color: #71d5ff; border: 1px solid #444; padding: 15px; font-family: 'Courier New', monospace; font-size: 12px; resize: vertical; outline: none; box-sizing: border-box; }
.distro-footer { padding: 40px; text-align: center; background: #000; border-top: 1px solid #222; }
</style>
<div class="distro-wrapper">
<div class="distro-header">
<h1 class="distro-title"><font face="Cinzel Decorative" size="7" color="#d4af37">CHARACTER ARCHIVES</font></h1>
<font color="#888" size="2" face="Cinzel" style="letter-spacing: 5px;">HTML SOURCE CODE DISTRIBUTION</font>
</div>
<div class="distro-content">
<div class="camp-card" style="border-top: 3px solid #e67e22;">
<div class="camp-label" style="background: #e67e22;"><font face="Cinzel" size="2" color="#fff">CAMP HALF-BLOOD</font></div>
<div style="padding: 40px;">
<font size="4" color="#fff" face="Cinzel"><b>THE GREEK HERO'S FILE (ORANGE THEME)</b></font><br>
<font size="2" color="#888">แบบฟอร์มค่ายฮาล์ฟบลัด โทนสีส้ม ปรับปรุงใหม่เพิ่มส่วนบุคลิกภาพและการจัดวางที่สวยงาม</font>
</div>
<div class="code-container">
<div class="code-box-header">
<span class="code-box-title">GREEK_ORANGE_FORM_2026.HTML</span>
<button class="copy-btn" onclick="var t=document.getElementById('greekCode'); t.select(); document.execCommand('copy'); alert('คัดลอกโค้ดค่ายฮาล์ฟบลัดเรียบร้อย!');">CLICK TO COPY CODE</button>
</div>
<textarea id="greekCode" class="code-area" readonly>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Noto+Sans+Thai:wght@300;400;700&family=Montserrat:wght@500;800&display=swap');
.chb-profile-wrapper { max-width: 900px; margin: 50px auto; background: #ffffff; font-family: 'Noto Sans Thai', sans-serif; border: 2px solid #e67e22; box-shadow: 0 40px 100px rgba(230, 126, 34, 0.15); position: relative; }
.char-portal { width: 100%; height: 550px; background: #fdf2e9; background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png'); display: flex; align-items: center; justify-content: center; border-bottom: 5px double #e67e22; position: relative; overflow: hidden; }
.char-portal img { max-width: 100%; max-height: 100%; object-fit: contain; }
.portal-label { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; background: linear-gradient(to top, rgba(230, 126, 34, 0.3), transparent); text-align: center; }
.profile-content { padding: 70px 90px; background-image: url('https://www.transparenttextures.com/patterns/paper.png'); }
.chb-section-head { display: flex; align-items: center; gap: 20px; margin: 50px 0 30px 0; }
.chb-head-line { flex-grow: 1; height: 1px; background: #e67e22; }
.chb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.chb-field { border-bottom: 1px solid #fae5d3; padding: 12px 0; }
.label-orange { color: #d35400; font-weight: 700; font-size: 13px; display: block; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.chb-text-box { line-height: 2.3; text-align: justify; color: #444; padding: 35px; background: #fef9f5; border: 1px solid #fad7a0; margin-bottom: 30px; }
.chb-footer { background: #d35400; padding: 35px; text-align: center; border-top: 5px solid #e67e22; }
</style>
<div class="chb-profile-wrapper">
<div class="char-portal">
<img src="https://via.placeholder.com/800x550.png?text=REPLACE+WITH+CHARACTER+IMAGE" alt="Demigod Portrait">
<div class="portal-label"><font face="Cinzel" size="3" color="#d35400" style="letter-spacing: 8px;">DEMIGOD CLASSIFICATION</font></div>
</div>
<div class="profile-content">
<div class="chb-section-head"><font face="Cinzel" size="5" color="#d35400">IDENTIFICATION</font><div class="chb-head-line"></div></div>
<div class="chb-grid">
<div class="chb-field"><span class="label-orange">Full Name (TH)</span> <font size="3" color="#2c3e50">ระบุชื่อ-นามสกุลภาษาไทย</font></div>
<div class="chb-field"><span class="label-orange">Full Name (EN)</span> <font size="3" color="#2c3e50">Full Name in English</font></div>
<div class="chb-field"><span class="label-orange">Nickname</span> <font size="3" color="#2c3e50">ระบุชื่อเล่น</font></div>
<div class="chb-field"><span class="label-orange">Ethnicity</span> <font size="3" color="#2c3e50">ระบุเชื้อชาติ</font></div>
<div class="chb-field"><span class="label-orange">Physique (H/W)</span> <font size="3" color="#2c3e50">... cm / ... kg</font></div>
<div class="chb-field"><span class="label-orange">Orientation</span> <font size="3" color="#2c3e50">ระบุรสนิยมความรัก</font></div>
</div>
<div class="chb-section-head"><font face="Cinzel" size="5" color="#d35400">ORIGIN & LINEAGE</font><div class="chb-head-line"></div></div>
<div class="chb-grid">
<div class="chb-field"><span class="label-orange">Date of Birth</span> <font size="3" color="#2c3e50">ระบุวันเดือนปีเกิด</font></div>
<div class="chb-field"><span class="label-orange">Place of Birth</span> <font size="3" color="#2c3e50">ระบุสถานที่เกิด</font></div>
</div>
<div class="chb-text-box"><span class="label-orange" style="margin-bottom:15px;">Family Tree</span><font size="3"><b>Divine Parent:</b> ระบุชื่อเทพผู้เป็นบิดา/มารดา<br><b>Human Parent:</b> ระบุชื่อบิดา/มารดามนุษย์<br><b>Siblings:</b> ระบุพี่น้อง (ถ้ามี)<br><b>Others:</b> ระบุความสัมพันธ์อื่นๆ</font></div>
<div class="chb-section-head"><font face="Cinzel" size="5" color="#d35400">PSYCHOLOGICAL PROFILE</font><div class="chb-head-line"></div></div>
<div class="chb-text-box" style="border-left: 5px solid #d35400;"><span class="label-orange" style="margin-bottom:15px;">Personality & Traits</span><font size="3">ระบุบุคลิกภาพ อุปนิสัยใจคอของตัวละครอย่างละเอียดที่นี่ เช่น เป็นคนร่าเริง เงียบขรึม หรือมีความเป็นผู้นำสูง การแสดงออกต่อเพื่อนร่วมค่าย และทัศนคติที่มีต่อโลก</font></div>
<div class="chb-grid">
<div class="chb-field"><span class="label-orange">Fatal Flaw</span> <font size="3" color="#2c3e50">ข้อบกพร่องร้ายแรง</font></div>
<div class="chb-field"><span class="label-orange">Demigod Disorder</span> <font size="3" color="#2c3e50">ดิสเล็กเซีย / สมาธิสั้น (ระบุ)</font></div>
<div class="chb-field"><span class="label-orange">Likes</span> <font size="2" color="#2c3e50">สิ่งที่ชอบ (5 อย่างขึ้นไป)</font></div>
<div class="chb-field"><span class="label-orange">Dislikes</span> <font size="2" color="#2c3e50">สิ่งที่ไม่ชอบ (5 อย่างขึ้นไป)</font></div>
</div>
<div class="chb-section-head"><font face="Cinzel" size="5" color="#d35400">CHRONICLES</font><div class="chb-head-line"></div></div>
<div class="chb-text-box"><font size="3">เขียนประวัติตัวละครของคุณอย่างละเอียดที่นี่ ตั้งแต่ชีวิตวัยเด็ก การค้นพบพลังกึ่งเทพ จนกระทั่งการเดินทางมาถึงค่ายฮาล์ฟบลัด</font></div>
</div>
<div class="chb-footer">
<font face="Cinzel" size="1" color="#ffffff" style="letter-spacing: 5px;">CAMP HALF-BLOOD OFFICIAL ARCHIVE // 2026</font><br>
<font face="Noto Sans Thai" size="1" color="#fad7a0">Rick Riordan's Universe • PERCY JACKSON and the Olympians Thailand Community • 2026</font>
</div>
</div></textarea>
</div>
</div>
<div class="camp-card" style="border-top: 3px solid #5d34a4;">
<div class="camp-label" style="background: #5d34a4;"><font face="Cinzel" size="2" color="#fff">CAMP JUPITER</font></div>
<div style="padding: 40px;">
<font size="4" color="#fff" face="Cinzel"><b>THE ROMAN LEGION RECORD (PURPLE THEME)</b></font><br>
<font size="2" color="#888">แบบฟอร์มค่ายจูปิเตอร์ โทนม่วงจักรพรรดิ เคร่งครัด ดุดัน และทรงอำนาจ</font>
</div>
<div class="code-container">
<div class="code-box-header">
<span class="code-box-title">ROMAN_PURPLE_FORM_2026.HTML</span>
<button class="copy-btn" onclick="var t=document.getElementById('romanCode'); t.select(); document.execCommand('copy'); alert('คัดลอกโค้ดค่ายจูปิเตอร์เรียบร้อย!');">CLICK TO COPY CODE</button>
</div>
<textarea id="romanCode" class="code-area" readonly>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Noto+Sans+Thai:wght@300;400;700&family=Cinzel:wght@700;900&family=Montserrat:wght@700&display=swap');
.roman-form-wrapper { max-width: 900px; margin: 50px auto; background: #0d0d0d; font-family: 'Noto Sans Thai', sans-serif; border: 2px solid #5d34a4; box-shadow: 0 0 80px rgba(93, 52, 164, 0.3); position: relative; }
.roman-header { background: #2a1a4a; background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://www.transparenttextures.com/patterns/dark-matter.png'); padding: 70px 20px; text-align: center; border-bottom: 3px solid #d4af37; }
.spqr-banner { font-family: 'Cinzel Decorative', serif; font-size: 55px; color: #d4af37; letter-spacing: 20px; margin: 0; line-height: 1; }
.roman-body { padding: 70px 90px; background-image: url('https://www.transparenttextures.com/patterns/black-linen.png'); color: #e0e0e0; }
.regiment-head { border-left: 5px solid #d4af37; background: rgba(93, 52, 164, 0.1); padding: 15px 25px; margin: 50px 0 25px 0; display: flex; justify-content: space-between; align-items: center; }
.legion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.legion-input { background: rgba(255, 255, 255, 0.03); border: 1px solid #333; padding: 15px 20px; position: relative; }
.legion-label { color: #9b6dff; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 10px; }
.marking-vault { border: 1px dashed #5d34a4; padding: 40px; text-align: center; background: rgba(0,0,0,0.5); margin: 30px 0; }
.marking-vault img { filter: drop-shadow(0 0 10px #5d34a4); max-width: 120px; }
.chronicler-box { background: #111; border: 1px solid #222; padding: 30px; line-height: 2.2; color: #bbb; font-size: 15px; }
.roman-footer { background: #000; padding: 30px; text-align: center; border-top: 1px solid #d4af37; }
.gold-link { color: #d4af37; text-decoration: none; border-bottom: 1px solid #d4af37; }
</style>
<div class="roman-form-wrapper">
<div class="roman-header"><h1 class="spqr-banner">SPQR</h1><font face="Cinzel" size="2" color="#d4af37" style="letter-spacing: 6px;"><br>CAMP JUPITER IDENTIFICATION FORM</font><br><font size="2" color="#9b6dff" style="letter-spacing: 2px;">LEGIO XII FULMINATA // 2026</font></div>
<div class="roman-body">
<div class="regiment-head"><font face="Cinzel" size="4" color="#d4af37">I. CIVIS ROMANUS (IDENTIFICATION)</font><font size="1" color="#5d34a4">CODEX: 001</font></div>
<div class="legion-grid">
<div class="legion-input"><span class="legion-label">Nomen (TH)</span> <font size="3" color="#fff">ระบุชื่อ-นามสกุลภาษาไทย</font></div>
<div class="legion-input"><span class="legion-label">Nomen (EN)</span> <font size="3" color="#fff">ระบุชื่อ-นามสกุลภาษาอังกฤษ</font></div>
<div class="legion-input"><span class="legion-label">Cognomen (Nickname)</span> <font size="3" color="#fff">ระบุชื่อเล่น</font></div>
<div class="legion-input"><span class="label-purple">Ethnicity</span> <font size="3" color="#fff">ระบุเชื้อชาติ</font></div>
<div class="legion-input"><span class="legion-label">Dimensions (Height/Weight)</span> <font size="3" color="#fff">... cm / ... kg</font></div>
<div class="legion-input"><span class="legion-label">Orientation</span> <font size="2" color="#fff">ชอบเพศตรงข้าม / ชอบเพศเดียวกัน / ชอบทั้งสองเพศ / สนใจที่ตัวบุคคลไม่ใช่เพศ / ยังไม่สนใจมีความรัก</font></div>
</div>
<div class="chronicler-box" style="border-left: 4px solid #5d34a4;"><span class="legion-label">Bloodline Status</span><font size="3" color="#fff"><b>ระบุฐานะ:</b> เดมี่ก็อต หรือ ลูกหลานโรม หรือ ทั้งคู่</font></div>
<div class="regiment-head"><font face="Cinzel" size="4" color="#d4af37">II. DIES NATALIS (ORIGIN)</font><font size="1" color="#5d34a4">CODEX: 002</font></div>
<div class="legion-grid">
<div class="legion-input"><span class="legion-label">Date of Birth</span> <font size="3" color="#fff">ระบุวันเกิด</font></div>
<div class="legion-input"><span class="legion-label">Locus Nativitatis (Place)</span> <font size="3" color="#fff">ระบุสถานที่เกิด</font></div>
</div>
<div class="regiment-head"><font face="Cinzel" size="4" color="#d4af37">III. COGNATIO (FAMILY & LIFE)</font><font size="1" color="#5d34a4">CODEX: 003</font></div>
<div class="legion-grid">
<div class="legion-input"><span class="legion-label">Affinities (Likes)</span> <font size="2" color="#fff">ระบุ 5 รายการขึ้นไป</font></div>
<div class="legion-input"><span class="legion-label">Aversions (Dislikes)</span> <font size="2" color="#fff">ระบุ 5 รายการขึ้นไป</font></div>
</div>
<div class="legion-input" style="margin-bottom: 20px;"><span class="legion-label">Academic Record</span> <font size="3" color="#fff">ระบุประวัติการศึกษา</font></div>
<div class="chronicler-box"><span class="legion-label">Family Lineage</span><font size="3" color="#fff"><b>Pater (พ่อ):</b> ระบุชื่อ <br><b>Mater (แม่):</b> ระบุชื่อ <br><b>Siblings (พี่น้อง):</b> ระบุชื่อ <br><b>Others:</b> ชื่อ, ความสัมพันธ์ และ อายุ <br><font size="2">อ้างอิงการให้กำเนิด: <a href="https://percyjackson.mooorp.com/thread/514/1/1" target="_blank" class="gold-link">Codex Link</a></font></font></div>
<div class="regiment-head"><font face="Cinzel" size="4" color="#d4af37">IV. PSYCHOLOGICAL & MEDICAL</font><font size="1" color="#5d34a4">CODEX: 004</font></div>
<div class="chronicler-box" style="background: rgba(155, 109, 255, 0.05);"><span class="legion-label">Demigod Disorders</span><font size="3">1. โรคดิสเล็กเซีย (...) <br>2. โรคสมาธิสั้น (...)</font></div>
<div class="regiment-head"><font face="Cinzel" size="4" color="#d4af37">V. STIGMA (THE MARKING)</font><font size="1" color="#5d34a4">CODEX: 005</font></div>
<div class="marking-vault"><img src="https://iili.io/fLZY6EQ.png" border="0"><br><br><font size="3" color="#fff"><b>สัญลักษณ์เทพ:</b> [ระบุชื่อเทพ]</font><br><font size="2">สถาบันตรวจสอบสัญลักษณ์: <a href="applyforcamprjupiteregistration.htm" class="gold-link">Reference Link</a></font></div>
<div class="regiment-head"><font face="Cinzel" size="4" color="#d4af37">VI. CHRONICLES (HISTORY)</font><font size="1" color="#5d34a4">CODEX: 006</font></div>
<span class="legion-label">Personal History</span><div class="chronicler-box" style="margin-bottom: 30px;">กรุณาเขียนประวัติตัวละครที่นี่...</div>
<span class="legion-label">Ancestral History (For Legacy)</span><div class="chronicler-box">กรณีเป็นลูกหลานโรมัน เขียนข้อมูลประวัติต้นตระกูลคนแรกที่เป็นเดมิกอด...</div>
</div>
<div class="roman-footer">
<font face="Cinzel" size="1" color="#d4af37" style="letter-spacing: 5px;">SENATUS POPULUSQUE ROMANUS // NEW ROME // 2026</font><br>
<font face="Noto Sans Thai" size="1" color="#444">Rick Riordan's Universe • PERCY JACKSON and the Olympians Thailand Community • 2026</font>
</div>
</div></textarea>
</div>
</div>
</div>
<div class="distro-footer">
<font face="Noto Sans Thai" size="1" color="#666" style="letter-spacing: 2px;">
Rick Riordan's Universe • PERCY JACKSON and the Olympians Thailand Community • 2026
</font>
</div>
</div>
หน้า:
[1]