Enter Camp › Blueprint Database [ร้านขายอุปกรณ์กลาดิเอเตอร์] › ปลอกคอย่อหดรุ่นเฉพาะตัว

Moneka โพสต์ 2025-11-25 08:29:27

ปลอกคอย่อหดรุ่นเฉพาะตัว

<!-- ====== SCOPED STYLES: ใช้ได้ในบอร์ด ไม่ไปรบกวนข้อความอื่น ====== -->
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans+Thai&amp;display=swap" rel="stylesheet">
<style>
/* ทุกอย่างอยู่ใต้ .igeb เท่านั้น */
.igeb{
--bg:#fff7f8;
--card1:#fffdfd;
--card2:#ffeef2;
--ink:#5b4046;
--muted:#b4868d;
--accent:#fcb3b7;
--accent2:#aee1dd;
--border:#f4cfd5;
--chip:#fad5cd;
font-family:'Playpen Sans Thai', cursive;
color:var(--ink);
}
.igeb, .igeb *{ box-sizing:border-box }

/* พื้นหลังเฉพาะโซนการ์ด */
.igeb__wrap{
background:
    radial-gradient(900px 500px at 90% -10%, #aee1dd44, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, #fcb3b744, transparent 60%),
    linear-gradient(180deg,#fff9fb,#fef3f4);
padding:20px;
border-radius:18px;
overflow:hidden;
border:1px solid #fbe0e4;
}

/* การ์ด */
.igeb__card{
background:linear-gradient(160deg,var(--card1),var(--card2));
border:1px solid var(--border);
border-radius:20px;
box-shadow:0 10px 26px rgba(252,179,183,.45);
overflow:hidden;
position:relative;
}

/* แถบหัวการ์ด */
.igeb__head{
padding:14px 20px;
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
background:linear-gradient(90deg,var(--accent),var(--accent2));
color:#ffffff;
border-bottom:1px solid rgba(255,255,255,.6);
}
.igeb__title{
font-weight:700;
font-size:13px;
letter-spacing:.24em;
text-transform:uppercase;
}
.igeb__sub{
font-weight:600;
font-size:12px;
opacity:.96;
padding:6px 10px;
border-radius:999px;
background:#ffffff33;
}

/* เนื้อหาแบบกริด */
.igeb__content{
padding:22px;
display:grid;
gap:22px;
grid-template-columns:360px 1fr;
}
@media (max-width:900px){
.igeb__content{ grid-template-columns:1fr }
}

/* ฝั่งซ้าย – โพลารอยด์ */
.igeb__polaroid{
background:#fffaf9;
border:1px solid var(--border);
border-radius:16px;
padding:14px;
box-shadow:0 8px 22px rgba(250,181,189,.45);
overflow:hidden;
}

/* >> ตรงนี้คือส่วนที่แก้ใหม่ ให้รูปอยู่ในกรอบ เห็นเต็มภาพ << */
.igeb__hero{
width:100%;
height:auto;            /* ให้สูงตามสัดส่วนจริง */
max-height:420px;         /* กันไม่ให้สูงเว่อร์ ถ้ารูปยาวมาก */
object-fit:contain;       /* แสดงทั้งภาพ ไม่ครอป */
border-radius:12px;
display:block;
margin:0 auto;
transition:transform .35s ease, filter .35s ease;
filter:saturate(1.05) contrast(1.02);
}
.igeb__hero:hover{
transform:scale(1.03);
filter:saturate(1.12) contrast(1.05);
}

.igeb__icons{
display:flex;
align-items:center;
gap:12px;
margin-top:14px;
flex-wrap:wrap;
}
.igeb__icon{
width:56px;
height:56px;
border-radius:12px;
object-fit:cover;
border:1px solid var(--border);
transition:transform .3s ease, box-shadow .3s ease;
display:block;
}
.igeb__icon:hover{
transform:scale(1.08) rotate(-1deg);
box-shadow:0 10px 26px rgba(174,225,221,.65);
}
.igeb__cap{
color:var(--muted);
font-weight:600;
font-size:14px;
}

/* ฝั่งขวา – ชื่อ + badge */
.igeb__titleRow{
display:flex;
align-items:baseline;
gap:12px;
flex-wrap:wrap;
}
.igeb__name{
margin:0;
font-weight:700;
font-size:32px;
line-height:1.15;
letter-spacing:.02em;
color:var(--ink);
}
.igeb__badge{
font-weight:700;
font-size:11px;
letter-spacing:.15em;
padding:8px 12px;
border-radius:999px;
border:1px solid var(--border);
color:#7a5560;
background:linear-gradient(90deg,#fad5cd,#d6e5dc);
}

/* ฟิลด์ข้อมูล 2 คอลัมน์ */
.igeb__grid2{
display:grid;
gap:16px;
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:900px){
.igeb__grid2{ grid-template-columns:1fr }
}

.igeb__field{
background:#fffaf8;
border:1px solid var(--border);
border-radius:14px;
padding:14px 16px;
}
.igeb__label{
font-weight:600;
font-size:12px;
letter-spacing:.18em;
color:var(--muted);
text-transform:uppercase;
}
.igeb__value{
margin-top:8px;
font-weight:500;
font-size:15px;
line-height:1.75;
color:var(--ink);
}

/* รายละเอียดยืดหด */
.igeb__desc{
background:#fffaf8;
border:1px solid var(--border);
border-radius:14px;
padding:14px 16px;
}
.igeb__desc > summary{
cursor:pointer;
list-style:none;
outline:none;
font-weight:600;
font-size:12px;
letter-spacing:.18em;
color:var(--muted);
text-transform:uppercase;
}
.igeb__desc > summary::-webkit-details-marker{ display:none }
.igeb__descBody{
margin-top:10px;
color:var(--ink);
font-weight:500;
font-size:15px;
line-height:1.8;
}

/* ฟีเจอร์เป็นชิป – เวอร์ชันใหญ่ขึ้นสวยขึ้น */
.igeb__features{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}
.igeb__chip{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 16px;
border:1px solid var(--border);
border-radius:16px;
background:linear-gradient(135deg,#ffe7eb,#d6e5dc);
box-shadow:0 6px 16px rgba(252,179,183,.35);
font-weight:600;
font-size:14px;
line-height:1.8;
color:#5f3f46;
}
</style>

<!-- ====== ITEM CARD (วางซ้ำได้หลายใบ ไม่ทับโพสต์อื่น) ====== -->
<div class="igeb">
<div class="igeb__wrap">
    <article class="igeb__card">
      <header class="igeb__head">
      <div class="igeb__title"><font size="6">ปลอกคอย่อหดรุ่นเฉพาะตัว</font></div>
      <div class="igeb__sub"><font size="3">ผู้สร้าง : ร้านขายอุปกรณ์กลาดิเอเตอร์ (มาร์คัส วาเลเรียส สมิธ)</font></div>
      </header>

      <section class="igeb__content">
      <!-- ซ้าย: รูปใหญ่ + ไอคอน -->
      <aside>
          <div class="igeb__polaroid">
            <img class="igeb__hero" src="https://img2.pic.in.th/pic/Untitled-design-16-1.png" alt="ภาพอุปกรณ์">
            <img src="https://img2.pic.in.th/pic/Untitled-design-22-1.gif" border="0" alt="" style="max-width:340px">
            <img src="https://img5.pic.in.th/file/secure-sv1/Untitled-design-17-1.png" border="0" alt="" style="max-width:340px">
            <img src="https://img5.pic.in.th/file/secure-sv1/Untitled-design-17-2.png" border="0" alt="" style="max-width:340px">
            <div class="igeb__icons">
            <img class="igeb__icon" src="https://img2.pic.in.th/pic/Gemini_Generated_Image_f2wr5sf2wr5sf2wr-1.png" alt="ไอคอนอุปกรณ์">
            <div class="igeb__cap">
                <font size="4">⬅️</font>&nbsp;ภาพ 84*84&nbsp;
                <a href="https://img5.pic.in.th/file/secure-sv1/Gemini_Generated_Image_f2wr5sf2wr5sf2wr.png" style="font-size: 12px; display: inline !important;">
                  <font color="#000000">(ภาพใหญ่)</font>
                </a>
            </div>
            </div>
          </div>
      </aside>

      <!-- ขวา: เนื้อหา -->
      <div>
          <div class="igeb__titleRow">
            <h2 class="igeb__name"><font size="6">The Exclusive Shrinking Collar</font></h2>
            <span class="igeb__badge">อุปกรณ์ที่คอ (สัตว์เลี้ยง)</span>
          </div>

          <div class="igeb__grid2">
            <div class="igeb__field">
            <div class="igeb__label"><font size="3">ชื่ออุปกรณ์</font></div>
            <div class="igeb__value"><font size="3">ปลอกคอย่อหดรุ่นเฉพาะตัว</font></div>
            </div>
            <div class="igeb__field">
            <div class="igeb__label"><font size="3">ประเภทของอุปกรณ์</font></div>
            <div class="igeb__value"><font size="3">ปลอกคอ / อุปกรณ์ที่คอ</font></div>
            </div>
          </div>

          <details class="igeb__desc" open="">
            <summary><font size="3">รายละเอียดอุปกรณ์</font></summary>
            <div class="igeb__descBody">
            <font size="3">
            ปลอกคอหนังแท้ประดับอัญมณีล้ำค่า(ตัวพลังงาน) สร้างขึ้นเพื่อผูกมัดกับสัตว์เลี้ยงเพียงหนึ่งเดียว (ผูกพันเฉพาะตัว) มีพลังเวทมนตร์ในการควบคุมและย่อ/ขยายขนาดร่างกายของสัตว์เลี้ยงตัวนั้นได้อย่างปลอดภัย เพื่อให้ง่ายต่อการพกพาสัตว์เลี้ยงที่ท่านรักไปยังทุกที่แม้มันจะเป็นสัตว์น้อยระดับภัยพิบัติเพียงใดก็ตาม มนต์บังตาจะทำให้เห็นเป็นสัตว์เลี้ยงทั่วไปที่พกพาได้ (หากเอาให้มนุษย์สวมใส่จะไม่เกิดอะไรขึ้น แต่อาจจะโดนมองว่าสวมใส่โชคเกอร์ประดับเฉย ๆ) และมีพลังป้องกันให้เจ้าของสามารถสัมผัสสัตว์วิเศษได้อย่างปลอดภัย</font></div>
          </details>

          <div class="igeb__grid2">
            <div class="igeb__field">
            <div class="igeb__label"><font size="3">รูปลักษณ์พกพาของอุปกรณ์</font></div>
            <div class="igeb__value">
                <font size="3">
                  ปลอกคอหนังสำหรับสัตว์เลี้ยงทั่วไป (General Pet Leather Collar) รูปลักษณ์ภายนอกดูเหมือนปลอกคอหรูหราที่ประดับด้วยอัญมณีสีน้ำเงินเข้มและโลหะทอง/โรสโกลด์ โดยไม่มีสัญญาณภายนอกว่าเป็นอุปกรณ์เวทมนตร์ หรืออะไรที่น่าผิดสังเกต
                </font>
            </div>
            </div>

            <div class="igeb__field">
            <div class="igeb__label"><font size="3">ฟีเจอร์ของอุปกรณ์ (4)</font></div>
            <div class="igeb__value igeb__features">
                <div class="igeb__chip">
                  สามารถย่อหรือขยายขนาดร่างกายของสัตว์เลี้ยงที่สวมใส่ได้ตามความตั้งใจของผู้เป็นเจ้าของ (ย่อได้เล็กสุดถึงขนาดพกพา และขยายได้ไม่เกิน 1.5 เท่าของขนาดปกติ)</div>
                <div class="igeb__chip">
                  ปลอกคอจะ ผูกมัดทางพลังงานกับสัตว์เลี้ยงตัวแรกที่สวมใส่เท่านั้น และไม่สามารถใช้งานกับสัตว์เลี้ยงตัวอื่นได้อีกต่อไป (อยากได้ใหม่ต้องไปซื้อเพิ่ม)
                </div>
                <div class="igeb__chip">
                  สร้างสนามพลังคุ้มกันรอบตัวสัตว์เลี้ยงและเจ้าของในระยะประชิด เพื่อให้เจ้าของสามารถสัมผัส, อุ้ม, หรือเข้าใกล้สัตว์เลี้ยงที่ปล่อยพลังงานเป็นอันตรายได้ (เช่น เปลวไฟฟีนิกซ์, พิษร้ายแรง, หรือกระแสไฟฟ้าแสนโวลต์) โดยไม่ได้รับบาดเจ็บ (ได้เฉพาะสัตว์เลี้ยงที่สวมใส่ปลอกคอนี้เท่านั้น เจอพลังอันอื่นก็บาดเจ็บอยู่ดี)
                </div>
                <div class="igeb__chip">
                  เจ้าของสามารถเปิดใช้งานฟีเจอร์การปรับขนาดได้ทันทีโดยการ แตะที่อัญมณีหลักบนปลอกคอ พร้อมกับการนึกถึงขนาดที่ต้องการ
                </div>
            </div>
            </div>
          </div>

      </div>
      </section>
    </article>
</div>
</div>

ดูในรูปแบบกติ: ปลอกคอย่อหดรุ่นเฉพาะตัว