เว็บบอร์ด › ฝั่งตอนใต้ › จวนจางหมิงเสวียน

Watcher โพสต์ 2026-2-16 07:17:16

จวนจางหมิงเสวียน

<!-- ฟอนต์ไทย (Playpen Sans Thai) & จีน (Long Cang) -->
<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=Playpen+Sans+Thai:wght@300;400;700&amp;family=Long+Cang&amp;display=swap" rel="stylesheet">

<style>

html::before{
content:"";
position:fixed; inset:0; z-index:-1; pointer-events:none;
background:url("https://iili.io/qHSk4Xp.gif") center/cover no-repeat;
opacity:1;
}

/* ============================================================
   SUPREME OLD MONEY MANSION - CALM DYNAMIC SLIDESHOW
   ============================================================ */

.cn-outer-wrapper {
background-color: #1b110a;
background-image: url("https://img5.pic.in.th/file/secure-sv1/272dc920ae080ffa7eddc4585cfc64a88e88a9eeb1036f-43APax_fw658webp.png");
background-size: cover;         
background-position: center top;
background-repeat: no-repeat;   
padding: 60px 20px;
min-height: 100vh;
display: flex;
justify-content: center;
}

.cn-page {
--ivory: #FDFCF0;
--gold: #E8D1A7;
--olive: #9D9167;
--caramel: #84592B;
--wine: #743014;
--cocoa: #442D1C;
--wallpaper: url("https://iili.io/qHkTWmP.png");
--wp-darkness: 0.40;

max-width: 950px;
width: 100%;
padding: 65px 50px 80px;
color: #f0e6d2;
position: relative;
isolation: isolate;
border-radius: 60px 15px 60px 15px;
font-family: "Playpen Sans Thai", cursive, system-ui;

background-color: var(--cocoa);
background-image:
    linear-gradient(180deg, rgba(68, 45, 28, 0.75) 0%, rgba(116, 48, 20, 0.85) 100%),
    var(--wallpaper);
background-size: cover;
background-position: center;

border: 2px solid var(--caramel);
box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.7),
    inset 0 0 0 12px var(--cocoa),
    inset 0 0 0 14px var(--caramel);
}

.cn-page::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: rgba(10, 5, 0, var(--wp-darkness));
z-index: 1;
pointer-events: none;
}

.cn-page > * { position: relative; z-index: 2; }

/* ===== Titles ===== */
.cn-mansion-header {
text-align: center;
margin-bottom: 45px;
}
.cn-title-cn {
font-family: "Long Cang", cursive;
font-size: clamp(65px, 11vw, 110px);
color: var(--gold);
margin: 0;
line-height: 0.95;
filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.6));
}
.cn-title-th {
font-weight: 700;
font-size: 28px;
color: var(--gold);
letter-spacing: 6px;
margin-top: 15px;
opacity: 0.85;
}

/* ===== 3. Main Mansion GIF ===== */
.cn-main-view {
width: 100%;
max-width: 100%;
margin: 0 auto 50px;
background: var(--gold);
padding: 15px;
border: 2px solid var(--caramel);
border-radius: 40px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
}
.cn-main-view img {
width: 100%;
height: auto;
max-width: 100%;
display: block;
border-radius: 28px;
object-fit: contain;
filter: contrast(1.05) brightness(0.95);
}

/* ===== 4. Mansion Details Section ===== */
.cn-hero {
display: grid;
grid-template-columns: 360px 1fr;
gap: 40px;
margin-bottom: 50px;
align-items: start;
}

.cn-meta {
background: linear-gradient(135deg, var(--ivory), #eee6d0);
border: 1.5px solid var(--caramel);
padding: 28px;
border-radius: 35px 5px 35px 5px;
box-shadow: 8px 8px 0px var(--caramel);
color: var(--cocoa);
}

.cn-row {
display: grid;
grid-template-columns: 105px 1fr;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid rgba(68, 45, 28, 0.1);
line-height: 1.4;
}
.cn-row:last-child { border-bottom: none; }
.cn-label { color: var(--wine); font-weight: 700; font-size: 14.5px; }
.cn-value { color: var(--cocoa); font-size: 14.5px; font-weight: 500; }

.cn-description { padding-top: 10px; }

/* Layout Grid */
.cn-content-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 45px;
}

.cn-left-column { display: flex; flex-direction: column; gap: 35px; }
.cn-right-column { display: flex; flex-direction: column; gap: 30px; }

/* 🔧 ระบบภาพเปลี่ยนวน (Dynamic Slideshow) ปรับให้ช้าลง */
.cn-image-slideshow {
background: var(--gold);
padding: 10px;
border: 1px solid var(--caramel);
border-radius: 25px;
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
}

.cn-slideshow-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
overflow: hidden;
}

.cn-slideshow-inner img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
/* 🔧 เพิ่มเวลาเป็น 21s เพื่อให้เปลี่ยนภาพช้าลง (7 วินาทีต่อภาพ) */
animation: cnFadeImages 21s infinite ease-in-out;
}

/* 🔧 ปรับ Delay ให้สัมพันธ์กับ 21 วินาที */
.cn-slideshow-inner img:nth-child(1) { animation-delay: 0s; }
.cn-slideshow-inner img:nth-child(2) { animation-delay: 7s; }
.cn-slideshow-inner img:nth-child(3) { animation-delay: 14s; }

@keyframes cnFadeImages {
0% { opacity: 0; z-index: 0; }
5% { opacity: 1; z-index: 1; }
33% { opacity: 1; z-index: 1; }
38% { opacity: 0; z-index: 0; }
100% { opacity: 0; z-index: 0; }
}

/* Badge (Ancient Style) */
.cn-badge {
display: inline-block;
padding: 5px 28px;
background: linear-gradient(135deg, var(--wine), #54220e);
border-radius: 20px 0 20px 0;
border-left: 6px solid var(--gold);
color: var(--gold);
font-weight: 700;
font-size: 16.5px;
margin-bottom: 18px;
box-shadow: 4px 4px 12px rgba(0,0,0,0.5);
}

.cn-text {
line-height: 1.8;
font-size: 15.5px;
color: #e5dac1;
text-align: left;
}

/* Rules Box */
.cn-rules-box {
background: rgba(0, 0, 0, 0.3);
padding: 30px;
border: 1px dashed var(--caramel);
border-radius: 40px 10px 40px 10px;
position: relative;
}

/* 🔧 NEW: Family Member Section Styles */
.cn-family-section {
margin-top: 60px;
padding: 30px;
background: rgba(0, 0, 0, 0.15);
border-radius: 40px;
border: 1px solid rgba(232, 209, 167, 0.1);
text-align: center;
}

.cn-family-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}

.cn-member-card {
width: 140px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.cn-member-photo {
width: 100px;
height: 100px;
background: var(--gold);
border: 2px solid var(--caramel);
border-radius: 30px 10px 30px 10px;
padding: 5px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
overflow: hidden;
}

.cn-member-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25px 8px 25px 8px;
filter: contrast(1.05);
}

.cn-member-name {
font-size: 14px;
font-weight: 700;
color: var(--gold);
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cn-member-role {
font-size: 11px;
color: #c4a484;
text-transform: uppercase;
letter-spacing: 1px;
}

@media (max-width: 850px) {
.cn-hero, .cn-content-layout { grid-template-columns: 1fr; }
.cn-page { padding: 40px 25px; }
}
</style>

<div class="cn-outer-wrapper">
<div class="cn-page">
   
    <!-- 1 & 2. Mansion Titles -->
    <header class="cn-mansion-header">
      <div class="cn-title-cn">张明轩</div>
      <div class="cn-title-th">จวนจางหมิงเสวียน</div>
    </header>

    <!-- 3. Main Mansion GIF -->
    <figure class="cn-main-view">
      <img src="https://iili.io/qHOGSol.gif" alt="Zhang Mansion View">
    </figure>

    <!-- 4. Mansion Details Section -->
    <section class="cn-hero">
      <div class="cn-meta">
      <dl class="cn-fields">
          <div class="cn-row"><dt class="cn-label">☯ เจ้าของจวน</dt><dd class="cn-value">จางกงกง (จาง ห่าวหมิง)</dd></div>
          <div class="cn-row"><dt class="cn-label">◆ ผู้อาศัย</dt><dd class="cn-value">หนาน หลินหยา | จาง อวี้หลิน</dd></div>
          <div class="cn-row"><dt class="cn-label">◆ สถานที่ตั้ง</dt><dd class="cn-value">ถนนสิบลี้ ฝั่งทิศใต้</dd></div>
          <div class="cn-row"><dt class="cn-label">◆ ประเภท</dt><dd class="cn-value">จวนคหบดีระดับสูง</dd></div>
          <div class="cn-row"><dt class="cn-label">◆ พื้นที่</dt><dd class="cn-value">กว้างขวาง (มีเขาวงกตไผ่)</dd></div>
          <div class="cn-row"><dt class="cn-label">◆ สถานะ</dt><dd class="cn-value">พื้นที่ส่วนบุคคล</dd></div>
          <div class="cn-row"><dt class="cn-label"></dt><dd class="cn-value"></dd></div>
      </dl>
      </div>

      <div class="cn-description">
      <div class="cn-badge">ภาพรวมของจวน</div>
      <div class="cn-text">
          <b>จวนจางหมิงเสวียน</b> จวนจางหมิงเสวียน จวนสกุลจางตั้งตระหง่านอย่างสง่างามท่ามกลางฝั่งทิศใต้ของถนนสิบลี้ในเมืองฉางอัน พื้นที่ทั้งหมดถูกล้อมรอบด้วยกำแพงสูงและแมกไม้เขียวขจีที่ช่วยพรางตาจากโลกภายนอก ตัวสถาปัตยกรรมเน้นโครงสร้างไม้ลงรักสีดำและหลังคากระเบื้องสีเถ้าถ่านตามแบบฉบับราชวงศ์ฮั่นตอนต้น สะท้อนถึงรสนิยมที่เรียบง่ายทว่าแฝงด้วยความมั่งคั่งและอำนาจมืดของเจ้าของจวน การวางผังอาคารแบบสามชั้นลึกแสดงถึงลำดับชั้นความสำคัญและความปลอดภัยที่เข้มงวด ทว่าหากเข้าไปยิ่งลึกเข้าไปเพียงใด บรรยากาศแห่งความขรึมขลังของขุนนางใหญ่ก็จะค่อย ๆ ผสมผสานเข้ากับความอบอุ่นของรอยยิ้มและกลิ่นอายของบ้านอย่างลงตัว
      </div>
      </div>
    </section>

    <!-- Content Columns -->
    <div class="cn-content-layout">
      
      <!-- ฝั่งซ้าย -->
      <div class="cn-left-column">
      <div>
          <div class="cn-badge">ด่านหน้าและห้องรับรองแขก</div>
          <div class="cn-text">
            เบื้องหน้าคือประตูศิลาทมิฬที่โอ่อ่า มีองครักษ์ชุดดำยืนประจำการราวกับรูปสลักหน้าจวน ทันทีที่ก้าวพ้นประตูจะพบกับกำแพงกิเลนสยบมารขนาดใหญ่ สลักลวดลายกิเลนขาวทะยานเมฆาอย่างประณีตเพื่อบังสายตาคนภายนอก ฝั่งขวาคือเรือนรับรองแขกที่ดูเคร่งขรึม เป็นจุดหยุดพักสำหรับขุนนางและผู้มาติดต่อที่ยังมิได้รับอนุญาตให้ล่วงเกินเข้าสู่พื้นที่ส่วนตัว
          </div>
      </div>

      <div>
          <div class="cn-badge">ลานกว้างและเรือนหลัก</div>
          <div class="cn-text">
            เมื่อผ่านประตูชั้นที่สองเข้าไป จะพบกับพื้นที่ลานกว้างปูหินเรียบเนียนจะปรากฏแก่สายตา ตรงกลางคือเรือนโถงหลักที่ตั้งอยู่บนฐานสูงดูสง่างามทว่าเยือกเย็น เป็นสถานที่สำคัญที่จางกงกงใช้สั่งการงานเมื่อกลับบ้านและต้อนรับแขกคนสำคัญ ขนาบข้างด้วยเรือนปีกซ้ายขวาที่เป็นดั่งสมองและคลังสมบัติของจวน บริเวณลานหินกว้างนี้ยังถูกใช้เป็นที่ฝึกยุทธ์หรือลานอเนกประสงค์
          </div>
      </div>

      <div>
          <div class="cn-badge">เรือนพำนักชั้นใน</div>
          <div class="cn-text">
            ส่วนลึกที่สุดของจวนคืออาณาเขตหวงห้าม บรรยากาศที่นี่เปลี่ยนไปอย่างสิ้นเชิงด้วยแมกไม้สีชมพูสะพรั่งและธารน้ำจำลองที่ไหลรินอย่างสงบ เรือนพักหลักถูกตกแต่งอย่างประณีตด้วยผ้าไหมและเครื่องหอมที่นายหญิงบรรจงเลือกสรร ใกล้กันนั้นคือเรือนที่พักของสมาชิกสกุลจางที่อบอวลไปด้วยความรักและการปกป้อง ที่นี่คือรังที่ปลอดภัยที่สุดในใต้หล้าสำหรับจางกงกง เป็นที่เดียวที่อสรพิษและกิเลนตัวน้อยจะได้พักผ่อนอย่างแท้จริง โดยมีกลิ่นหอมของอาหารจากโรงครัวข้างเรือนคอยเยียวยาหัวใจในทุกวัน
          </div>
      </div>

      <div class="cn-rules-box">
          <div style="position: absolute; right: 20px; top: 20px; font-size: 35px; opacity: 0.15; color: var(--gold);">🏮</div>
          <div class="cn-badge">กฎระเบียบของจวน</div>
          <div class="cn-text" style="font-size: 15px; font-weight: 500; color: #fff;">
            กฎจวนจางหมิงเสวียนเน้นรักษาความลับเข้มงวด ใครคิดปากสว่างจึงมีโทษหนัก เรือนส่วนในที่หากใครไม่ได้รับอนุญาติและธุระก็ห้ามเข้ามา เสบียงต้องพร้อมและห้ามกินทิ้งขว้าง ใครทำนายน้อยหิวมีโทษมหันต์ ทว่ากฎทั้งหมดล้วนผ่อนปรนให้เพียงบางกรณีเท่านั้น</div>
      </div>
      </div>

      <!-- ฝั่งขวา: สไลด์โชว์ที่เปลี่ยนภาพช้าลง -->
      <aside class="cn-right-column">
      
      <div class="cn-image-slideshow">
          <div class="cn-slideshow-inner">
            <img src="https://iili.io/qH8YaBS.md.png" alt="ห้องโถงใหญ่">
            <img src="https://iili.io/qH8YXhQ.md.png" alt="ห้องรับรอง">
            <img src="https://iili.io/qH8Y7Q2.png" alt="ทางเดินรอบ">
            <img src="https://iili.io/qH8rWAu.md.png" alt="ห้องครัว">
            <img src="https://iili.io/qH8rXwb.md.png" alt="ลานฝึก">
          </div>
      </div>
      <div class="cn-text" style="font-size: 13.5px; text-align: center; color: var(--gold); font-weight: 700; margin-top: -20px; margin-bottom: 20px;">เรือนส่วนกลาง</div>

      <div class="cn-image-slideshow">
          <div class="cn-slideshow-inner">
            <img src="https://iili.io/qH8Y5hl.md.png" alt="ห้องนอน">
            <img src="https://iili.io/qH8YorX.jpg" alt="ห้องอาบน้ำ">
            <img src="https://iili.io/qH8Yn1t.jpg" alt="ห้องพักผ่อน">
            <img src="https://iili.io/qH8QU1j.md.png" alt="สวนพักผ่อน">
          </div>
      </div>
      <div class="cn-text" style="font-size: 13.5px; text-align: center; color: var(--gold); font-weight: 700; margin-top: -20px;">เรือนส่วนใน</div>

      </aside>

    </div>

<!-- 🔧 NEW: Mansion Members Section (สมาชิกภายในจวน) -->
    <div class="cn-family-section">
      <div class="cn-badge" style="margin-bottom: 25px;">สมาชิกภายในจวน</div>
      <div class="cn-family-grid">

      <!-- สมาชิก 1: สมาชิก 1 -->
      <div class="cn-member-card">
          <div class="cn-member-photo">
            <img src="https://iili.io/qHSfFZG.jpg" alt="หนาน หลินหยา"> <!-- นายน้อยเปลี่ยน URL รูปที่นี่ -->
          </div>
          <div class="cn-member-name">หนาน หลินหยา</div>
          <div class="cn-member-role">นายหญิง</div>
      </div>

      <!-- สมาชิก 2: สมาชิก 2 -->
      <div class="cn-member-card">
          <div class="cn-member-photo">
            <img src="https://iili.io/qHSf3js.jpg" alt="คนกลาง"> <!-- นายน้อยเปลี่ยน URL รูปที่นี่ -->
          </div>
          <div class="cn-member-name">จางกงกง</div>
          <div class="cn-member-role">เจ้าของจวน</div>
      </div>

      <!-- สมาชิก 3: สมาชิก 3 -->
      <div class="cn-member-card">
          <div class="cn-member-photo">
            <img src="https://iili.io/qH9uvqJ.png" alt="คนขวา"> <!-- นายน้อยเปลี่ยน URL รูปที่นี่ -->
          </div>
          <div class="cn-member-name">จาง อวี้หลิน</div> <!-- นายน้อยเปลี่ยนชื่อที่นี่ -->
          <div class="cn-member-role">นายน้อย</div>
      </div>

      </div>
    </div>

    <!-- Footer -->
    <footer style="text-align: center; margin-top: 70px; opacity: 0.6; font-size: 11.5px; letter-spacing: 5px; color: var(--gold); font-weight: 700;">
      ✿ THE SUPREME QILIN MANOR • ZHANG CLAN ✿
    </footer>
</div>
</div>

ดูในรูปแบบกติ: จวนจางหมิงเสวียน