[โครงการสร้างท่าเรือฮาล์ฟบลัด]
<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');
/* --- ⚓ NAVAL PROJECT MAIN CONTAINER --- */
.harbor-project-wrapper {
max-width: 950px;
margin: 50px auto;
background: #0a192f; /* น้ำเงินเข้มก้นทะเล */
border: 2px solid #b87333; /* ขอบทองแดง */
box-shadow: 0 40px 100px rgba(0,0,0,0.6);
font-family: 'Noto Sans Thai', sans-serif;
position: relative;
overflow: hidden;
}
/* เส้นกริดสไตล์พิมพ์เขียววิศวกรรม */
.blueprint-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: linear-gradient(rgba(184, 115, 51, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 115, 51, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
}
/* --- 🛳️ HEADER: CSS LOGO WITH NEON GLOW --- */
.harbor-header {
background: linear-gradient(180deg, #050c18 0%, #0a192f 100%);
padding: 70px 20px;
text-align: center;
border-bottom: 4px solid #b87333;
}
.harbor-logo-css {
font-family: 'Orbitron', sans-serif;
font-size: 48px;
color: #00d4ff;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
letter-spacing: 8px;
display: block;
transform: skewX(-10deg);
}
/* --- 📊 FUNDING PROGRESS BAR --- */
.fund-status-card {
margin: 40px 80px;
padding: 30px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #b87333;
position: relative;
z-index: 2;
}
.progress-track {
width: 100%;
height: 20px;
background: #050c18;
border-radius: 10px;
margin: 15px 0;
overflow: hidden;
border: 1px solid #1a3a5a;
}
.progress-fill {
width: 11.11%; /* 100 จาก 900 */
height: 100%;
background: linear-gradient(90deg, #b87333, #ffcc33);
box-shadow: 0 0 15px #ffcc33;
}
/* --- 📜 PROJECT DETAILS --- */
.project-body {
padding: 40px 80px;
line-height: 2.2;
position: relative;
z-index: 2;
}
.tech-specs {
background: rgba(184, 115, 51, 0.05);
border-left: 4px solid #b87333;
padding: 25px 35px;
margin: 30px 0;
}
/* --- 💎 DONOR REWARDS --- */
.contributor-box {
background: #050c18;
border: 1px solid #00d4ff;
padding: 30px;
margin-top: 50px;
text-align: center;
}
.reward-pill {
display: inline-block;
border: 1px solid #b87333;
padding: 5px 20px;
margin: 10px;
background: rgba(184, 115, 51, 0.1);
}
/* --- 🏁 FOOTER --- */
.harbor-footer {
padding: 25px;
background: #050c18;
text-align: center;
border-top: 1px solid #1a3a5a;
}
</style>
<div class="harbor-project-wrapper">
<div class="blueprint-overlay"></div>
<div class="harbor-header">
<span class="harbor-logo-css">HARBOR PROJECT</span>
<font face="Orbitron" size="2" color="#b87333" style="letter-spacing: 5px;">JOINT EFFORT: HALF-BLOOD & FISH-BLOOD</font>
</div>
<div class="fund-status-card">
<font face="Orbitron" size="3" color="#00d4ff"><b>DRACHMA FUNDING STATUS</b></font>
<div class="progress-track">
<div class="progress-fill"></div>
</div>
<div style="display: flex; justify-content: space-between;">
<font size="4" color="#ffffff"><b>100</b> <font size="2" color="#888">DRACHMAS</font></font>
<font size="4" color="#b87333"><b>900</b> <font size="2" color="#888">GOAL</font></font>
</div>
</div>
<div class="project-body">
<div style="margin-bottom: 40px;">
<font face="Cinzel Decorative" size="5" color="#b87333"><b>UNLOCK: ท่าเรือค่ายฮาล์ฟบลัด</b></font><br>
<font size="3" color="#a0b4c8">
โครงการก่อสร้างท่าเรือส่วนกลางที่ได้รับการสนับสนุนเทคโนโลยีจากค่ายฟิชบลัด และการดูแลรักษาเครื่องยนต์โดยบ้านเฮเฟตัส เพื่อเปิดเส้นทางการเดินทางทางน้ำที่รวดเร็วและล้ำสมัยที่สุด
</font>
</div>
<font face="Orbitron" size="3" color="#00d4ff"><b>DEVELOPMENT REQUIREMENTS</b></font><hr style="border:0; border-top:1px solid #1a3a5a; margin: 10px 0;">
<font size="3" color="#ffffff">
● บริจาคทรัพยากรผ่านค่ายฟิชบลัด หรือใช้ม้วนเฮอร์มีสส่งมอบทรัพยากร<br>
● สำเร็จภารกิจคำพยากรณ์ที่ช่วยเหลือค่ายฟิชบลัดอย่างน้อย 1 ครั้ง<br>
● ชาวค่ายต้องผ่านภารกิจจากค่ายฟิชบลัดสำเร็จรวม 5 ครั้ง (ตรวจสอบผ่านแอปเดดาลัส)
</font>
<div class="tech-specs">
<font face="Orbitron" size="2" color="#b87333"><b>VESSEL SPECIFICATION: GLASS SUBMARINE</b></font><br>
<font size="3" color="#ffffff">
เรือดำน้ำกระจกมือสองคุณภาพสูง ความเร็วเทียบเท่ารถไฟความเร็วสูงโตเกียว<br>
<b>เงื่อนไขการใช้งาน:</b><br>
- ต้องเรียนจบคลาสเรือดำน้ำจากค่ายฟิชบลัด<br>
- ค่าสมทบทุนเบิกเรือ 25 ดรักม่าต่อครั้ง (นำกลับมาส่งที่เดิมทุกครั้ง)
</font>
</div>
<div style="margin-top: 50px; text-align: center;">
<font face="Cinzel Decorative" size="4" color="#00d4ff"><b>PROJECT COMPLETION REWARDS</b></font><br>
<div style="margin-top: 15px;">
<font size="3" color="#ffffff">เปิดระบบเบิกเรือดำน้ำปฏิบัติภารกิจทางทะเล</font><br>
<font size="2" color="#b87333">(ใช้ป้ายเกียรติยศ 30 ป้ายต่อ 1 ภารกิจ)</font>
</div>
</div>
<div class="contributor-box">
<font face="Orbitron" size="3" color="#00d4ff"><b>CONTRIBUTOR BONUSES</b></font><br>
<font size="2" color="#888" style="display: block; margin-bottom: 15px;">สำหรับผู้บริจาคทุก 100 ดรักม่า</font>
<div class="reward-pill">
<font size="3" color="#ffffff"><b>+30 EXP</b></font> <font size="1" color="#888">(MAX LV: +1 POINT)</font>
</div>
<div class="reward-pill">
<font size="3" color="#ffffff"><b>+50 เกียรติยศ</b></font>
</div>
<div class="reward-pill">
<font size="3" color="#ffffff"><b>ป้ายเกียรติยศ 5</b></font>
</div>
</div>
</div>
<div class="harbor-footer">
<font face="Orbitron" size="1" color="#1a3a5a" style="letter-spacing: 5px;">NAVY BLUEPRINT • HEPHAESTUS MAINTENANCE • FISH-BLOOD TECH</font>
</div>
</div>
หน้า:
[1]