[เปิดระดมทุนระบบ UI ร้านค้าไอเท็มใหม่และระบบค้นหาในร้านค้า]
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Noto+Sans+Thai:wght@300;400;700&family=Orbitron:wght@400;700&display=swap');
/* --- 💎 CYBER-OLYMPUS MAIN CONTAINER --- */
.fund-interface-wrapper {
max-width: 950px;
margin: 50px auto;
background: #0d0d0d; /* พื้นหลังดำขลับ */
border: 1px solid #c5a059;
box-shadow: 0 0 50px rgba(197, 160, 89, 0.2);
font-family: 'Noto Sans Thai', sans-serif;
position: relative;
overflow: hidden;
}
/* ลายวงจรสีทองจางๆ */
.circuit-bg {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: radial-gradient(rgba(197, 160, 89, 0.1) 1px, transparent 1px);
background-size: 25px 25px;
pointer-events: none;
}
/* --- ⚡ HEADER: GLOWING INTERFACE --- */
.interface-header {
background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
padding: 70px 20px;
text-align: center;
border-bottom: 3px solid #c5a059;
}
.interface-title-css {
font-family: 'Orbitron', sans-serif;
font-size: 40px;
color: #ffffff;
text-shadow: 0 0 10px #c5a059, 0 0 20px #c5a059;
letter-spacing: 5px;
display: block;
text-transform: uppercase;
}
/* --- 📊 PROGRESS RADAR --- */
.progress-radar-box {
margin: 50px 80px;
padding: 40px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(197, 160, 89, 0.3);
backdrop-filter: blur(10px);
}
.funding-bar-track {
width: 100%;
height: 12px;
background: #1a1a1a;
margin: 20px 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid #333;
}
.funding-bar-fill {
width: 550%; /* ความคืบหน้า 0/600 */
height: 100%;
background: linear-gradient(90deg, #c5a059, #fff);
box-shadow: 0 0 15px #c5a059;
}
/* --- 📜 DESCRIPTION & DETAILS --- */
.interface-body {
padding: 60px 80px;
position: relative;
z-index: 2;
}
.detail-glow-card {
border-left: 4px solid #c5a059;
padding-left: 30px;
margin-bottom: 50px;
}
/* --- ✍️ REGISTRATION FORM --- */
.bonus-request-form {
background: #141414;
border: 1px solid #c5a059;
padding: 50px;
margin-top: 40px;
position: relative;
}
.bonus-request-form::before {
content: "REWARD FORM";
position: absolute;
top: -12px; left: 20px;
background: #c5a059;
color: #000;
padding: 2px 15px;
font-family: 'Orbitron';
font-size: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 25px;
border-bottom: 1px solid #2a2a2a;
padding-bottom: 10px;
}
/* --- 🎁 REWARD BOX --- */
.reward-highlight {
display: flex;
gap: 20px;
margin-top: 40px;
}
.reward-tier {
flex: 1;
background: rgba(197, 160, 89, 0.1);
border: 1px solid #c5a059;
padding: 25px;
text-align: center;
}
/* --- 🏁 FOOTER --- */
.interface-footer {
background: #000;
padding: 25px;
text-align: center;
border-top: 1px solid #333;
}
</style>
<div class="fund-interface-wrapper">
<div class="circuit-bg"></div>
<div class="interface-header">
<span class="interface-title-css">INTERFACE UPGRADE</span>
<font face="Cinzel Decorative" size="2" color="#c5a059" style="letter-spacing: 5px; display: block; margin-top: 10px;">SHOP & INVENTORY RECONSTRUCTION</font>
</div>
<div class="progress-radar-box">
<div style="display: flex; justify-content: space-between; align-items: center;">
<font face="Orbitron" size="3" color="#ffffff"><b>PROJECT PROGRESS</b></font>
<font face="Orbitron" size="4" color="#c5a059">550 <font size="2" color="#666">/ 600 THB</font></font>
</div>
<div class="funding-bar-track">
<div class="funding-bar-fill"></div>
</div>
<font color="#888" size="4">เป้าหมาย: ปรับปรุงอินเตอร์เฟชร้านค้ายกแผงและระบบค้นหาไอเท็มภายในร้านค้า [</font><a href="https://percyjackson.mooorp.com/hux_city_shop-hux_city_shop"><font face="Noto Sans Thai Looped" color="#ffff00" size="4">LINK</font></a><font color="#888" size="4">]</font></div>
<div class="interface-body">
<div class="detail-glow-card">
<font size="3" color="#ffffff" style="line-height: 2;">
ขณะนี้เรากำลังเปิดระดมทุนเพื่อปรับเปลี่ยน <b><font color="#c5a059">อินเตอร์เฟชร้านค้าทั้งหมด</font></b> รวมไปถึงระบบฟังก์ชันค้นหาไอเท็ม เพื่อความสะดวกสบายสูงสุดของชาวค่ายทุกคน
</font>
</div>
<div style="margin-bottom: 40px;">
<font size="3" color="#cccccc">
* การร่วมระดมทุนสามารถใช้ <b><font color="#c5a059">ระบบโดเนทของเว็บไซต์</font></b> ได้โดยตรง<br>
** เมื่อร่วมสมทบทุนแล้ว โปรดโพสต์หลักฐานลงในกระทู้นี้เพื่อรับโบนัสพิเศษและนับยอดความคืบหน้า
</font>
</div>
<div class="bonus-request-form">
<div class="form-row">
<font size="3" color="#c5a059"><b>Username รับรางวัลโบนัสเพิ่มเติม :</b></font><br>
<font size="3" color="#666">..................................................................................</font>
</div>
<div class="form-row" style="border:none;">
<font size="3" color="#c5a059"><b>หลักฐานจากระบบโดเนท :</b></font><br>
<font size="3" color="#666">แนบรูปภาพหรือลิ้งก์หลักฐานการโอนเงินที่นี่</font>
</div>
</div>
<div class="reward-highlight">
<div class="reward-tier">
<font face="Orbitron" size="2" color="#c5a059">BASIC BONUS</font><hr style="border:0; border-top:1px solid rgba(197, 160, 89, 0.3); margin:10px 0;">
<font size="4" color="#ffffff"><b>+50</b></font><br>
<font size="2" color="#ffffff">ดรักม่า / ดีนาเรียส (ขึ้นกับสังกัดค่าย)</font></div>
<div class="reward-tier" style="border-width: 2px;">
<font face="Orbitron" size="2" color="#ffffff">SUPPORT TIER (50+ THB)</font><hr style="border:0; border-top:1px solid rgba(197, 160, 89, 0.3); margin:10px 0;">
<font size="4" color="#c5a059"><b>ผลึกไททัน x10</b></font><br>
<font size="2" color="#ffffff">และศิลาก่อกำเนิด x10</font>
</div>
</div>
</div>
<div class="interface-footer">
<font face="Orbitron" size="1" color="#444" style="letter-spacing: 5px;">CAMP HALF-BLOOD • SYSTEM EVOLUTION • 2026</font>
</div>
</div>
หน้า:
[1]