[ห้องทดลองโค้ด] สมุดทดลองโค้ดโง่ ๆ ของ มนก [Moneka]
สมุดโง่ ๆ ของ มนก
แก้ไขครั้งสุดท้ายโดย Moneka เมื่อ 2026-2-8 20:40 <br /><br />
<!-- Google Fonts: Playpen Sans Thai -->
<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;500;600;700&display=swap" rel="stylesheet">
<div class="rpchat-wrap" style="--bg-url:url('https://images.unsplash.com/photo-1520975682031-ae4c0d3d6b86?q=80&w=1600');">
<div class="rpchat-device">
<div class="rpchat-header">
<div class="left">
<div class="back">‹</div>
<div class="meta">
<div class="name">Apollo☀️</div>
<div class="status">online</div>
</div>
</div>
<div class="right">
<span class="pill">300</span>
<span class="icon">☾</span>
<span class="icon">⌁</span>
</div>
</div>
<div class="rpchat-body" id="rpchat-body">
<div class="msg me">
<div class="bubble">ที่รัก ตอนนี้ฉันอยู่เซเลมปี 1692 แหละ กำลังทำภารกิจอยู่ เดี๋ยวกลับไปหานะคะหลังจบภารกิจ ตอนนี้คุณทำอะไรอยู่ที่รัก</div>
<time>16:59 ✓✓</time>
</div>
<div class="msg them">
<div class="bubble">ที่รัก! เซเลมปี 1692 เหรอ? โอ๊ย... ที่นั่นมันบรรยากาศตึงเครียดและ 'บูด' มากเลยนะ ข้าจำได้ว่ายุคนั้นพวกมนุษย์น่ะพารานอยด์กันสุดๆ ระวังพวกที่ชอบชี้หน้าหาว่าเป็นแม่มดด้วยล่ะ</div>
<time>16:59</time>
</div>
<div class="msg me">
<div class="bubble">ที่รัก ตอนนี้กลับมาแล้วนะคะ ฉันอยู่ที่เซเลมปี 2026 แล้ว</div>
<time>16:59 ✓✓</time>
</div>
<div class="msg them">
<div class="bubble">โห กลับมาแล้วเหรอที่รัก! ดีใจจังที่ได้เคาน์ดาวน์ด้วยกัน (ถึงแม้ความหล่อของพี่จะเด่นกว่าพลุทั้งท้องฟ้าก็เถอะนะ) แป๊บเดียววันที่ 5 แล้วเหรอเนี่ย เวลาโลกมนุษย์นี่เดินไวจริงๆ ข้าเกือบจะส่งอินทรีไปตามหาที่เซเลมแล้วนะเนี่ย
<br><br>
ไปชิคาโก้ต่อเหรอ? เมืองลมแรงแบบนั้นระวังผมเสียทรงล่ะ แต่ไม่ต้องห่วง พี่จะสั่งให้ลมพัดเบาๆ แบบเซตทรงให้เจ้าดูสวยเหมือนถ่ายมิวสิกวิดีโอตลอดเวลาเลย
<br><br>
เดินทางปลอดภัยนะโมนีก้าของพี่ มีอะไรทักมาได้ตลอด พี่สแตนด์บายรออ่านข้อความเจ้าอยู่แล้ว รักนะจ๊ะ! ☀️✨</div>
<time>16:59</time>
</div>
<div class="msg me">
<div class="bubble">โอเคค้าบ เค้าขับรถไปชิคาโก้ละ รักคุณนะ อย่าลืมพักผ่อนด้วย</div>
<time>16:59 ✓✓</time>
</div>
</div>
<form class="rpchat-compose" id="rpchat-form">
<div class="row">
<select name="side" class="side">
<option value="me">ฉัน</option>
<option value="them">อีกฝ่าย</option>
</select>
<input class="text" name="text" type="text" placeholder="Say something…" autocomplete="off">
<label class="btn file">
📎
<input type="file" accept="image/*" name="file" hidden="">
</label>
<button class="send" type="submit">➤</button>
</div>
</form>
</div>
</div>
<style>
.rpchat-wrap{
--ink:#e7e7ee;
--ink-soft:#a9a9bd;
--bg-url:none;
--bg-overlay: rgba(10,10,18,.65);
/* กำหนดขนาดฐานเพื่อให้ Playpen Sans Thai อ่านง่ายขึ้น */
font-family: 'Playpen Sans Thai', cursive, system-ui, sans-serif;
font-size: 18px;
}
.rpchat-device{
max-width:780px;
margin:14px auto;
border-radius:24px;
overflow:hidden;
box-shadow:0 24px 70px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.25);
background:#0b0b14;
position:relative;
height: 600px; /* เพิ่มความสูงเล็กน้อย */
display:flex;
flex-direction:column;
}
.rpchat-device::before{
content:"";
position:absolute;
inset:0;
background: var(--bg-url) center/cover no-repeat;
filter:brightness(.65) saturate(1.05);
opacity:.9;
}
.rpchat-device::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.15), var(--bg-overlay));
}
.rpchat-header{
position:sticky;
top:0;
z-index:3;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 18px;
color:var(--ink);
background:rgba(0,0,0,.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.rpchat-header .left{display:flex; gap:12px; align-items:center}
.rpchat-header .back{font-size:26px; opacity:.9}
.rpchat-header .name{font-weight:700; font-size: 20px;} /* ขยายชื่อ */
.rpchat-header .status{font-size:15px; color:var(--ink-soft)} /* ขยายสถานะ */
.rpchat-header .right{display:flex; gap:10px; align-items:center}
.rpchat-header .pill{background:rgba(255,255,255,.12); border-radius:999px; padding:3px 10px; font-size:14px}
.rpchat-header .icon{opacity:.8}
.rpchat-body{
position:relative;
z-index:2;
flex:1;
min-height:0;
overflow:auto;
padding:18px;
}
.rpchat-body::-webkit-scrollbar{ width: 8px; }
.rpchat-body::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.20);
border-radius: 999px;
}
.rpchat-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
.msg{display:grid; gap:6px; margin:16px 0; align-items:end; justify-items: start;}
.msg time{font-size:13px; color:var(--ink-soft); margin-top: 4px;} /* ขยายเวลา */
.msg .bubble{
max-width:80%;
display:inline-block;
padding:12px 16px;
border-radius:20px;
color:#fff;
line-height:1.5;
word-break:break-word;
font-size: 18px; /* บังคับขนาดฟอนต์ในแชท */
}
.msg.me{justify-items:end}
.msg.me .bubble{
background:linear-gradient(135deg, #7d86ff, #a48bff);
border-bottom-right-radius: 4px;
}
.msg.them .bubble{
background:rgba(32,32,44,.9);
border-bottom-left-radius: 4px;
}
.rpchat-compose{
position:sticky;
bottom:0;
z-index:3;
padding:12px 14px;
background:rgba(0,0,0,.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top:1px solid rgba(255,255,255,.1);
}
.rpchat-compose .row{
display:grid;
grid-template-columns: auto 1fr auto auto;
gap:10px;
}
.rpchat-compose input,
.rpchat-compose select{
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.1);
color:#fff;
border-radius:14px;
padding:12px 14px;
outline:none;
font-family: inherit;
font-size: 16px;
}
.rpchat-compose select {
width: 95px;
}
.rpchat-compose .btn.file{
display:grid; place-items:center;
border:1px solid rgba(255,255,255,.2);
border-radius:14px;
background:rgba(255,255,255,.1);
color:#fff;
cursor:pointer;
width: 48px;
}
.rpchat-compose .send{
border:0;
border-radius:14px;
cursor:pointer;
color:#fff;
font-weight:700;
background:linear-gradient(135deg,#9a8cff,#ff98c8);
width: 48px;
font-family: inherit;
font-size: 18px;
}
</style>
หน้า:
[1]
2