เกม3

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<nobr>><<set $rememberDeviceChoice to true>><</nobr>> <div class="device-select-root"> <div class="device-select-card" role="region" aria-labelledby="device-select-title"> <div class="device-select-title" id="device-select-title"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="opacity:0.9"> <path d="M3 12h18" stroke="#32f0f0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 6h10" stroke="#8befff" stroke-width="1.2" stroke-linecap="round" /> </svg> เลือกรูปแบบการเล่น </div> <p style="margin:0; color:#aeeff6; opacity:0.9;"> โปรดเลือกเวอร์ชันที่เหมาะกับอุปกรณ์ของคุณ — ระบบจะจำการตั้งค่าถ้าต้องการ </p> <div class="device-btns" style="margin-top:6px;"> <<button "Tablet / PC">> <<run setup.saveDeviceChoice("desktop", document.getElementById("rememberChoice") ? document.getElementById("rememberChoice").checked : true)>> <<goto "Intro">> <</button>> <<button "Mobile">> <<run setup.saveDeviceChoice("mobile", document.getElementById("rememberChoice") ? document.getElementById("rememberChoice").checked : true)>> <<goto "Intro">> <</button>> </div> <label class="device-remember" style="margin-top:12px;"> <input type="checkbox" id="rememberChoice" checked aria-checked="true" style="width:16px;height:16px;vertical-align:middle;margin-right:6px;"> จำการเลือกนี้ (จำไว้จนกว่าจะล้างข้อมูล) </label> <div style="margin-top:18px; font-size:13px; color:#9eeffb; opacity:0.85;"> หากต้องการให้ระบบเลือกให้โดยอัตโนมัติ ให้กลับไปเปลี่ยนในการตั้งค่า (เมนู) </div> </div> </div>

<div class="intro-root"> <div id="intro-hero" class="intro-hero" role="region" aria-label="Introduction"> <h1 class="intro-line" data-step="0">วันแห่งการรวมตัวเริ่มขึ้นแล้ว !</h1> <div class="intro-line" data-step="1"> กีฬาสีแห่งผู้รอดชีวิตกำลังดำเนินไปอย่างร้อนแรงใน Kisai NeoPlaza! </div> <div class="intro-line" data-step="2"> เจ้าของเวทีในตอนนี้ โซชิ โซชิดะ กำลังโบกมือเริงร่าเปี่ยมไปด้วยพลังสุดขีด!!<br>คุณได้เห็นแล้วประจักษ์สู่สายตา และเมื่อสิ้นสุด เขาประกาศ </div> <div class="orange-quote-container"> <blockquote class="orange-quote" data-step="3">“โชว์จบแล้ว แต่ชีวิตยังไม่จบใช่ป่ะล่ะ งั้นมานี่ !! วันนี้พวกเราชมรมการแสดงแห่งคิโบวซากุระมีอะไรมาอวด !”</blockquote> <blockquote class="orange-quote" data-step="4">“ มาเจอกันเด้อที่โซนร้านว่าง มีบอร์ดเกมเจ๋ง ๆ รออยู่ ต้องมาให้ได้เลยนะเฟ้ย !!”</blockquote> </div> <div class="intro-line" data-step="5"> ว่ากันว่าที่นั่นถูกตกแต่งไปด้วยของดี ๆ ที่ทุกคนร่วมกันหา ดูท่า คุณจะต้องไปดูกันหน่อยแล้ว </div>  <div id="intro-cta-wrap"> <<link "ตามไปดูที่โซนร้านว่าง">> <<replace "#intro-hero">>  <<run $("#intro-hero").fadeOut(500, function(){ Engine.play("EmptyShopZone"); });>> <</replace>> <</link>> </div> </div> </div>  <script> /* ใช้ jQuery ที่มีใน SugarCube เพื่อไล่โชว์แต่ละบรรทัด */ $(document).one(':passagedisplay', function (ev) { if (ev.passage !== undefined && ev.passage.title === 'Intro') { var steps = $('#intro-hero').find('[data-step]').toArray(); var delay = 350; // base delay before first line (ms) var perLine = 520; // interval between lines (ms) // sequentially reveal each element steps.forEach(function(el, idx){ setTimeout(function(){ $(el).addClass('visible'); }, delay + perLine * idx); }); // after all lines shown, reveal CTA (slightly after last) var total = delay + perLine * steps.length + 150; setTimeout(function(){ // show CTA area by adding visible class to the link container's child (link macros are rendered as <a>) $('#intro-cta-wrap').find('a, button, .link').first().addClass('show'); }, total); } }); </script>

<<set $deviceMode to "auto">> <<set $rememberDeviceChoice to true>> <<set $deviceChoiceLoaded to false>> /* StoryInit: ตั้งค่าตัวแปรเริ่มต้น - $deviceMode: "auto" / "mobile" / "desktop" - $rememberDeviceChoice: ค่าเริ่มต้น checkbox (true = จำการเลือก) - $deviceChoiceLoaded: ธงบอกว่าโหลดจาก localStorage แล้ว (กันโหลดซ้ำ) */ /* ตัวแปรสำหรับเก็บผลการเลือกตัวแทน (จากพาสเสจ "ตัวแทน") */ <<set $agentChoice to null>> /* ค่า: "A" / "B" / "C" */ <<set $agentChoiceLabel to "">> /* คำอธิบายสั้น ๆ เช่น "หุ่นตัวแรก (โล่เล็ก)" */ /* (สำรอง) ตัวแปรสถานะอื่น ๆ ที่อาจใช้ในอนาคต */ <<set $visitedIntro to false>> <<set $visitedEmptyShopZone to false>> <<cacheaudio "bgm_glitch" "https://files.catbox.moe/nbc9xw.mp3">> <<cacheaudio "bgm_genesis" "https://files.catbox.moe/cm3kti.mp3">> <<cacheaudio "bgm_sakura" "https://files.catbox.moe/8n5z4o.mp3">> <<cacheaudio "bgm_magic" "https://files.catbox.moe/mfv9lv.mp3">> <<cacheaudio "bgm_adventure" "https://files.catbox.moe/g3naxr.mp3">> <<cacheaudio "bgm_guardian" "https://files.catbox.moe/qreiak.mp3">> <<cacheaudio "bgm_healer" "https://files.catbox.moe/jznsrn.mp3">> <<cacheaudio "bgm_seeker" "https://files.catbox.moe/65c609.mp3">> <<cacheaudio "bgm_knight" "https://files.catbox.moe/ja3gxj.mp3">> <<cacheaudio "bgm_fusion" "https://files.catbox.moe/n8a089.mp3">> <<cacheaudio "bgm_glitch2" "https://files.catbox.moe/o82yfi.mp3">> <<cacheaudio "ending_music" "https://files.catbox.moe/b80amp.mp3">> /* ลงทะเบียนเพลง */ <<cacheaudio "bgm_war" "https://files.catbox.moe/o1r6lm.mp3">> /* รีเซ็ตคะแนนลักษณ์ต่าง ๆ ให้เป็น 0 ก่อนเริ่มเกม */ <<set $type1 to 0>> <<set $type2 to 0>> <<set $type3 to 0>> <<set $type4 to 0>> <<set $type5 to 0>> <<set $type6 to 0>> <<set $type7 to 0>> <<set $type8 to 0>> <<set $type9 to 0>> /* ลิงก์รูปภาพผลลัพธ์ทั้ง 9 ลักษณ์ */ <<set setup.resultImages = { 1: "https://i.imgur.com/JCHTOWx.png", 2: "https://i.imgur.com/hZR01yj.png", 3: "https://i.imgur.com/gpq8JA1.png", 4: "https://i.imgur.com/6TtUCRb.png", 5: "https://i.imgur.com/rkE8lX7.png", 6: "https://i.imgur.com/ozXoRlv.png", 7: "https://i.imgur.com/tdN4apB.png", 8: "https://i.imgur.com/oWCUQlG.png", 9: "https://i.imgur.com/WZbcNbi.png" }>>

<div class="empty-shop-root"> <div class="empty-dialog" role="region" aria-label="Empty Shop Zone Dialog"> <div class="line" data-step="0">ณ โซนร้านว่าง<br>ผู้คนกำลังจอแจได้ที่ จนคุณเองก็ต้องชะโงกหน้ามองซ้ายทีขวาทีระหว่างรอคิว</div> <div class="line" data-step="1">ผู้คนเข้ามา เมื่อเล่นเสร็จเดินออกไป จนตอนนี้ ก็มาถึงคิวของคุณจนได้<br>โต้ะเตี้ยโต้ะหนึ่งเพิ่งว่างพร้อมกับการเชิญชวนจากสมาชิกชมรมการแสดงที่เดินมาตรงหน้าของคุณ ใครสักคนที่เปี่ยมรอยยิ้มสดใส เธอพาคุณไปยังโต้ะนั้น</div> <blockquote data-step="2">“ขออภัยที่ทำให้รอนาน เดี๋ยวฉันจะอธิบายให้คุณฟังนะคะ<br> Final Act คือเกมสไตล์บอร์ดเกมที่คุณจะต้องคอยทำเควสต่าง ๆ และเอาชีวิตรอด" !”</blockquote> <blockquote data-step="3">“แต่ก่อนจะอธิบายเพิ่มเติม คุณต้องเลือกตัวแทนของคุณก่อนนะ! ตัวไหนก็ได้ค่ะ ที่คุณรู้สึกว่า รู้สึกเชื่อมโยงกับมันน่ะ”</blockquote>  <div id="empty-cta-wrap" style="margin-top:8px;"> <<link "ตัวแทนงั้นเหรอ ?">> <<replace "#empty-cta-wrap">> <<run $("#empty-cta-wrap").fadeOut(300, function(){ Engine.play("ตัวแทน"); });>> <</replace>> <</link>> </div> </div> </div> <script> /* sequential fade-in: reveal each [data-step] in order, then show CTA */ $(document).one(':passagedisplay', function (ev) { if (!ev || !ev.passage || ev.passage.title !== 'EmptyShopZone') return; var elems = $('.empty-dialog').find('[data-step]').toArray(); var startDelay = 300; // ms before first var stepDelay = 480; // interval between lines elems.forEach(function(el, idx){ setTimeout(function(){ $(el).addClass('visible'); }, startDelay + stepDelay * idx); }); // reveal CTA slightly after last element var total = startDelay + stepDelay * elems.length + 180; setTimeout(function(){ $('#empty-cta-wrap').find('a, button, .link').first().addClass('show'); }, total); }); </script>

<div class="agent-root"> <div class="agent-dialog" id="agent-dialog" role="region" aria-label="เลือกตัวแทน">  <div class="part" id="agent-part1"> <blockquote>“ใช่แล้วค่ะ”</blockquote> <div style="margin-top:8px; color:#e6f7ff; max-width:760px; margin-left:auto; margin-right:auto;"> บางสิ่งถูกหยิบออกจากกล่องที่เธอถือ<br> ที่นั่นมีหุ่นไม้ 3 ตัววางเรียงกันอยู่ </div> <div style="margin-top:12px; font-weight:700; color:#dffcff;">“เลือกตัวที่คุณชอบเลย”</div> </div>  <div class="part" id="agent-part2" style="margin-top:12px;"> <div style="color:#e6f7ff; max-width:760px; margin:0 auto 8px auto;"> พวกมันทั้งหมดล้วนไร้ใบหน้า แต่กลับมีเอกลักษณ์ชัดเจนจากท่วงท่าและสิ่งที่ถืออยู่ ถ้ามันต้องเป็นตัวแทนคุณ มันควรจะเป็นหุ่นแบบไหนกัน ? </div> <div id="agent-choices" class="agent-choices" role="list">  <<button "A) หุ่นตัวแรก — ท่าตั้งรับ ถือโล่ขนาดเล็ก">> <<set $agentChoice = "A">> <<set $agentChoiceLabel to "หุ่นตัวแรก (โล่เล็ก)">> <<run $("#agent-choices").fadeOut(220, function(){ $("#agent-final").fadeIn(300); });>> <</button>> <<button "B) หุ่นตัวที่สอง — ท่วงท่าบุก เงื้อดาบไม้">> <<set $agentChoice = "B">> <<set $agentChoiceLabel to "หุ่นตัวที่สอง (ดาบ)">> <<run $("#agent-choices").fadeOut(220, function(){ $("#agent-final").fadeIn(300); });>> <</button>> <<button "C) หุ่นตัวที่สาม — ยืนนิ่ง ถือคทา/กิ่งไม้">> <<set $agentChoice = "C">> <<set $agentChoiceLabel to "หุ่นตัวที่สาม (คทา)">> <<run $("#agent-choices").fadeOut(220, function(){ $("#agent-final").fadeIn(300); });>> <</button>> </div> </div>  <div id="agent-final" aria-hidden="true"> <div style="max-width:760px; margin:0 auto 10px auto; text-align:center;"> คุณจ้องมองพวกมัน... และรู้สึกถึงความเชื่อมโยงกับหุ่นตัวนั้นเป็นพิเศษ </div>  <div> <<link "ฉันรู้สึกถึงมัน">> <<goto "บัค1">> <</link>> </div> </div> </div> </div> <script> /* Control flow: - แสดง part1 ทีละน้อย (fade-in) - รอ 5 วินาที (5000ms) แล้ว fadeOut part1 -> แสดง part2 (และเฉพาะส่วน choices) - เมื่อผู้เล่นกดตัวเลือก เราเซ็ต $agentChoice/$agentChoiceLabel แล้วซ่อน choices และโชว์โซน final */ $(document).one(':passagedisplay', function (ev) { if (!ev || !ev.passage || ev.passage.title !== 'ตัวแทน') return; // reveal part1 smoothly $('#agent-part1').addClass('visible'); // after 5s, hide part1 and show part2 (with choices) setTimeout(function(){ $('#agent-part1').fadeOut(420, function(){ // reveal descriptive part2 (non-choice text) $('#agent-part2').addClass('visible'); // show the choices container $('#agent-choices').fadeIn(360); }); }, 5000); }); </script>

<div id="bug-scene-scroll" class="bug-root"> <div id="content-part-1" class="bug-content-box"> <div class="fade-in-text" style="animation-delay: 0.5s; color: #bff6ff; font-size: 1.25em; margin-bottom: 20px; font-weight: bold;"> “ เป็นการเลือกที่น่าสนใจนะคะ! ” </div> <div class="fade-in-text" style="animation-delay: 2.5s; margin-bottom: 30px; color: #e0f7fa;"> เธอยิ้มกว้างจนตาหยี พลางผายมือเชื้อเชิญให้คุณรับหุ่นตัวนั้นไปถือไว้<br> <span style="font-size: 1.1em; font-weight: bold; display:block; margin-top: 10px;">“ เอาล่ะ... ลองวางตัวแทนของคุณลงบนจุดเริ่มต้นสิคะ ”</span> </div> <hr class="fade-in-text" style="animation-delay: 3.5s; border-color: rgba(255,255,255,0.1); width: 50%; margin: 20px auto;"> <div class="slow-fade internal-thought" style="animation-delay: 4.5s;"> <p>คุณรับหุ่นตัวนั้นมาถือไว้ในมือ สัมผัสแรกที่ปลายนิ้วแตะโดน<br>ไม่ใช่ความสากระคายหรือความอุ่นของเนื้อไม้แบบที่คุณคาดไว้...</p> <p>มันเป็นวัตถุ <span class="highlight-thought">สีเทาด้าน</span> ผิวสัมผัสเรียบเนียนละเอียดราวกับถูกขัดเกลามาอย่างดี<br>มีน้ำหนักเบาคล้ายพลาสติกสังเคราะห์ คุณหมุนมันไปมา สังเกตเห็นร่องรอยการแกะสลักที่ประณีตบรรจง<br>แม้จะไร้ใบหน้า แต่ท่วงท่าของมันกลับสื่อสารอารมณ์บางอย่างออกมาได้อย่างชัดเจน</p> <p class="deep-thought">ความรู้สึกประหลาดแล่นผ่านฝ่ามือ... มันเข้ามือคุณได้พอดี<br> ราวกับว่ามันถูกสร้างมาเพื่อคุณโดยเฉพาะ หรือไม่ก็...<br>คุณเคยจับมันมาก่อนหน้านี้นานแสนนานมาแล้ว</p> </div> <div class="slow-fade" style="animation-delay: 9s; margin-top: 40px; text-align: center; padding-bottom: 40px;"> <<button "[ ... ]">> <<script>> // สั่งให้ส่วนที่ 1 จางหายไป $("#content-part-1").fadeOut(800, function(){ // เมื่อหายไปแล้ว ให้ลบคลาส hidden ออกจากส่วนที่ 2 แล้วค่อยเฟดมา $("#content-part-2").removeClass("hidden").hide().fadeIn(1000); }); <</script>> <</button>> </div> </div> <div id="content-part-2" class="bug-content-box hidden"> <div class="internal-thought" style="margin-bottom: 20px;"> เสียงจอแจรอบข้างเริ่มแผ่วเบาลงเมื่อคุณจดจ่ออยู่กับสิ่งนี้<br> คุณจ้องมองไปยังส่วนหัวที่ว่างเปล่าของหุ่น สีเทาหม่นของมันสะท้อนกับแสงไฟนีออนจนเกิดเงาสลัว </div> <div style="font-size: 1.3em; font-weight: bold; color: #80deea; margin-top: 35px; margin-bottom: 40px; text-shadow: 0 0 10px rgba(128,222,234,0.3);"> ภายใต้ความว่างเปล่านั้น... ฉันกำลังมองหาอะไรอยู่? </div> <div class="choice-container" style="display: flex; flex-direction: column; gap: 15px; align-items: center; padding-bottom: 50px;"> <<button "ฉันอยากตามหาตัวฉันเองให้เจอ">> <<set $playerGoal to "self">> <<goto "โลกใหม่">> <</button>> <<button "ฉันอยากตามหาคนที่หายไปให้เจอ">> <<set $playerGoal to "lost_one">> <<goto "โลกใหม่">> <</button>> <<button "ฉันแค่อยากรอดชีวิต">> <<set $playerGoal to "survival">> <<goto "โลกใหม่">> <</button>> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { // ตั้งค่าพื้นฐานหน้าจอ $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.bug-root').css('display', 'flex'); }); </script> <style> /* --- Layout & Scroll --- */ .bug-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; /* ให้เลื่อนได้ */ display: flex; flex-direction: column; align-items: center; } .bug-content-box { margin: auto; width: 90%; max-width: 780px; text-align: center; padding-top: 40px; padding-bottom: 40px; } /* Scrollbar */ .bug-root::-webkit-scrollbar { width: 8px; } .bug-root::-webkit-scrollbar-track { background: #111; } .bug-root::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } /* --- Styles --- */ .bug-root button { background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: #e6f7ff; padding: 10px 24px; font-size: 1em; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; font-family: "Sarabun", sans-serif; min-width: 240px; backdrop-filter: blur(2px); } .bug-root button:hover { background: rgba(128, 222, 234, 0.1); border-color: #80deea; color: #80deea; transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 15px rgba(0,0,0,0.5); } .internal-thought { font-style: italic; color: #cfd8dc; line-height: 1.8; text-shadow: 0 0 5px rgba(0,0,0,0.8); margin-top: 25px; } .internal-thought p { margin-bottom: 20px; } .highlight-thought { color: #eceff1; font-weight: bold; font-style: normal; text-shadow: 0 0 8px rgba(255,255,255,0.2); } .deep-thought { color: #b2ebf2; opacity: 0.9; } /* Animation */ .fade-in-text { opacity: 0; animation: simpleFadeIn 1.5s forwards; } .slow-fade { opacity: 0; animation: simpleFadeIn 2.5s forwards; } @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } </style>

<div id="dream-scene-scroll" class="dream-root"> <div class="dream-container"> <div class="dream-text fade-blur" style="animation-delay: 0.5s;"> คุณวางหุ่นไม้ลงบนแผนที่ที่ถูกกางเอาไว้<br> แค่เพียงชั่วอึดใจ... แต่ก็เหมือนว่ามันยาวนาน </div> <div class="dream-text fade-blur" style="animation-delay: 3s;"> คุณเหม่อไปเล็กน้อย ความเหนื่อยล้าที่สะสมมาตลอดทำให้คุณยากจะโฟกัส<br> แต่นั่นก็แค่ชั่วคราว... คุณหลับตาลง </div> <hr class="dream-divider fade-blur" style="animation-delay: 5s;"> <div class="dream-deep fade-blur" style="animation-delay: 6s;"> หรือคุณจะจมลงไปอีกแล้วนะ<br> <span class="syrup-text">กับฝันหวาน .. ที่เหมือนน้ำตาลเชื่อม</span> </div> <div class="fade-blur" style="animation-delay: 9s; margin-top: 40px;"> <<button "จมดิ่งลงไป...">> <<script>> // 1. สั่งเล่นเพลง bgm_glitch (nbc9xw.mp3) // การสั่งในนี้จะทำให้ Browser ยอมให้เล่นเสียงแน่นอน 100% var glitch = SugarCube.SimpleAudio.tracks.get("bgm_glitch"); if (glitch) { glitch.volume(0.7); // ความดัง 70% glitch.loop(true); // วนลูป glitch.play(); // เล่นทันที } // 2. ไปพาสเสจ "บัค2" SugarCube.Engine.play("บัค2"); <</script>> <</button>> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { // บังคับหน้าจอ Full Screen และสีพื้นหลัง $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#050505' // ดำเกือบสนิท }); $('.tw-passage').css('display', 'none'); $('.dream-root').css('display', 'flex'); }); </script> <style> /* --- Layout & Scroll --- */ .dream-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%); z-index: 9999; /* ทำให้ Scroll ได้ */ overflow-y: auto; display: flex; flex-direction: column; align-items: center; } .dream-container { margin: auto; /* ดันให้อยู่กึ่งกลาง ถ้าเนื้อหาล้นจะยอมให้ scroll */ text-align: center; width: 90%; max-width: 700px; /* เผื่อพื้นที่บนล่างให้หายใจเวลาเลื่อน */ padding-top: 40px; padding-bottom: 40px; } /* แต่ง Scrollbar */ .dream-root::-webkit-scrollbar { width: 6px; } .dream-root::-webkit-scrollbar-track { background: #000; } .dream-root::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } /* --- Typography & Effects --- */ .dream-text { color: #b0b0b0; font-size: 1.1em; line-height: 1.45; margin-bottom: 15px; text-shadow: 0 0 4px rgba(255,255,255,0.1); } .dream-divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); margin: 20px auto; width: 60%; } .dream-deep { font-size: 1.3em; color: #e0e0e0; font-style: italic; line-height: 1.4; } .syrup-text { display: block; margin-top: 8px; color: #fff; font-weight: bold; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 220, 180, 0.4); animation: syrupPulse 3s infinite alternate; } /* --- ปุ่มกดสไตล์ภาพฝัน (Dreamy Button) --- */ .dream-root button { background-color: rgba(255, 255, 255, 0.9); color: #222; border: none; padding: 12px 30px; font-size: 1.1em; font-weight: bold; border-radius: 50px; cursor: pointer; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 1); transition: all 0.5s ease; font-family: "Sarabun", sans-serif; backdrop-filter: blur(5px); } .dream-root button:hover { background-color: #fff; transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 255, 255, 0.4); letter-spacing: 2px; } /* --- Animations --- */ .fade-blur { opacity: 0; filter: blur(10px); animation: fadeBlurIn 2.5s forwards; } @keyframes fadeBlurIn { 0% { opacity: 0; filter: blur(10px); transform: translateY(10px); } 100% { opacity: 1; filter: blur(0px); transform: translateY(0); } } @keyframes syrupPulse { 0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); opacity: 0.8; } 100% { text-shadow: 0 0 25px rgba(255, 240, 200, 0.8); opacity: 1; } } </style>

<div id="bug2-root" class="bug-root"> <div class="bg-layer"></div> <div class="bug-content-box"> <div id="part-1" class="story-text"> <p class="fade-in-text" style="animation-delay: 1s;">คุณลืมตาขึ้นมา</p> <p class="fade-in-text" style="animation-delay: 3s;">ได้ยินเสียงลมหวีดหวิวบาดหู<br>กลิ่นฝุ่นผงและบางอย่างที่เหมือนโลหะไหม้ลอยอยู่ในอากาศ</p> <p class="fade-in-text" style="animation-delay: 6s;">คุณพบว่าตัวเองกำลังนอนอยู่บนพื้นดินที่แตกระแหง</p> <div class="fade-in-text" style="animation-delay: 9s; margin-top: 15px;"> คุณพยุงตัวลุกขึ้นนั่ง พยายามกวาดสายตามองรอบ ๆ<br> ไม่นานก็หยุดลงข้างตัว ข้างกายนั้น...<br> <span style="color: #ffab91; font-weight: bold;">มีอาวุธชิ้นหนึ่งที่ละม้ายคล้ายกับหุ่นก่อนหน้าไม่มีผิด</span> </div> </div> <div id="part-2" class="story-text hidden"> <p class="internal-thought">หุ่นก่อนหน้านี้ ?</p> <p>คุณตระหนักได้ว่าที่นี่ไม่ใช่ร้านว่าง</p> <p class="internal-thought">คุณฝันอีกแล้วเหรอ ?<br>คุณไม่รู้เหมือนกันว่าตัวเองหลับไปตอนไหน</p> <p style="margin-top: 15px; font-weight: bold; color: #80deea;">คุณจึง ..</p> <div id="choices-container" class="choice-list"> <<button "เอื้อมมือไปหามัน... สัมผัสที่คุ้นเคยอาจเป็นคำตอบว่าที่นี่คือที่ไหน">> <<script>> $("#choices-container").fadeOut(500, function() { $("#result-1").removeClass("hidden").hide().fadeIn(1000); setTimeout(function(){ $("#next-btn-area").removeClass("hidden").hide().fadeIn(1000); }, 1500); }); <</script>> <</button>> <<button "พยายามเพ่งมองฝ่าพายุฝุ่น... สำรวจสภาพแวดล้อมที่โหดร้ายนี้ให้ชัดเจนขึ้น">> <<script>> $("#choices-container").fadeOut(500, function() { $("#result-2").removeClass("hidden").hide().fadeIn(1000); setTimeout(function(){ $("#next-btn-area").removeClass("hidden").hide().fadeIn(1000); }, 1500); }); <</script>> <</button>> <<button "หลับตาลงอีกครั้งแน่น ๆ ... หวังว่าเมื่อลืมตา ทุกอย่างจะกลับไปเป็นเหมือนเดิม">> <<script>> $("#choices-container").fadeOut(500, function() { $("#result-3").removeClass("hidden").hide().fadeIn(1000); setTimeout(function(){ $("#next-btn-area").removeClass("hidden").hide().fadeIn(1000); }, 1500); }); <</script>> <</button>> </div> </div> <div id="result-area" class="story-text" style="margin-top: 20px;"> <div id="result-1" class="hidden"> <p>ความเย็นเยียบแล่นผ่านปลายนิ้วทันทีที่แตะโดน<br>น้ำหนักของโลหะกดทับลงบนฝ่ามืออย่างชัดเจน...</p> <p style="color: #ff8a80; margin-top: 10px;">มันหนักเกินกว่าจะเป็นภาพลวงตา และคมกริบเกินกว่าจะเป็นแค่ความฝัน</p> </div> <div id="result-2" class="hidden"> <p>คุณหรี่ตาลงสู้กับแรงลม... ท่ามกลางพายุฝุ่นสีขาวโพลน<br>สิ่งที่เห็นมีเพียงซากปรักหักพังไกลสุดลูกหูลูกตา</p> <p style="color: #b0bec5; margin-top: 10px;">โลกใบนี้ดูเหมือนถูกลบสีสันออกไปจนหมดสิ้น เหลือไว้เพียงโครงสร้างที่พังทลาย</p> </div> <div id="result-3" class="hidden"> <p>คุณข่มตาแน่น ภาวนาให้ภาพตรงหน้าหายไป...<br>แต่เสียงลมหวีดหวิวยังคงกรีดร้องข้างหู กลิ่นไหม้ยังคงฉุนจมูก</p> <p style="color: #ffcc80; margin-top: 10px;">ความเป็นจริงตรงหน้าปฏิเสธที่จะปล่อยคุณไป และบีบให้คุณต้องยอมรับมัน</p> </div> </div> <div id="next-btn-area" class="hidden" style="margin-top: 30px; padding-bottom: 60px;"> <<button "[ ... ]">> <<script>> // สั่งหยุดเพลงเก่า (bgm_glitch) แบบค่อยๆ เงียบ var audio = SugarCube.SimpleAudio.tracks.get("bgm_glitch"); if (audio) { audio.fadeOut(2); } <</script>> <<goto "บัค3">> <</button>> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.bug-root').css('display', 'flex'); // Fade พื้นหลัง setTimeout(function() { $('.bg-layer').css('opacity', '1'); }, 100); // เปลี่ยน Part 1 -> Part 2 setTimeout(function() { $('#part-1').fadeOut(1500, function() { $('#part-2').removeClass('hidden').hide().fadeIn(1500); }); }, 16000); }); </script> <style> /* Layout */ .bug-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; } /* Scrollbar */ .bug-root::-webkit-scrollbar { width: 6px; } .bug-root::-webkit-scrollbar-track { background: #111; } .bug-root::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; } /* Background */ .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/NCUi8sf.png'); background-size: cover; background-position: center; opacity: 0; transition: opacity 3s ease-in-out; z-index: -1; filter: brightness(0.5) contrast(1.2); } .bug-content-box { margin: auto; width: 90%; max-width: 780px; text-align: center; padding-top: 40px; padding-bottom: 40px; position: relative; z-index: 2; } /* Text */ .story-text { color: #e0e0e0; font-family: "Sarabun", sans-serif; font-size: 1.1em; line-height: 1.45; text-shadow: 0 2px 4px rgba(0,0,0,0.9); } .story-text p { margin-bottom: 12px; } .internal-thought { font-style: italic; color: #b0bec5; margin-bottom: 10px; } /* Buttons */ .choice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .bug-root button { background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); color: #e6f7ff; padding: 10px 18px; font-size: 0.95em; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-family: "Sarabun", sans-serif; text-align: center; backdrop-filter: blur(2px); } .bug-root button:hover { background: rgba(255, 255, 255, 0.1); border-color: #80deea; color: #fff; transform: translateY(-2px); } /* Animation */ .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 10px; } @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } </style>

<div class="bug3-root"> <div class="bg-layer-static"></div> <div class="terminal-wrapper"> <div class="system-header"> SYSTEM_DIAGNOSTIC_TOOL </div> <hr style="border-color: #555; margin-bottom: 15px;"> <div id="console-log" class="console-log"> </div> <div id="loading-spinner" class="spinner"></div> <div id="mystery-btn-area" class="hidden"> <<button "???">> <<script>> // สั่งเล่นเพลงใหม่ (bgm_glitch2) var audio = SugarCube.SimpleAudio.tracks.get("bgm_glitch2"); if (audio) { audio.loop(true); audio.volume(0.7); // ความดัง 70% audio.play(); } <</script>> <<goto "ปรากฏตัว">> <</button>> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { // Setup หน้าจอ $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.bug3-root').css('display', 'flex'); const logBox = $('#console-log'); // รายการข้อความที่จะค่อยๆ ขึ้นมา (อ่านง่าย ไม่รก) const logs = [ { text: "> Checking System Integrity...", delay: 500 }, { text: "> Error: User data not found.", delay: 1500, color: "#ff8a80" }, // สีแดงอ่อนๆ { text: "> Attempting to restore backup...", delay: 2500 }, { text: "> Loading Asset: Character_Model_01", delay: 3500 }, { text: "> Connection established.", delay: 4500, color: "#b9f6ca" } // สีเขียวอ่อนๆ ]; // ฟังก์ชันรันข้อความทีละบรรทัด logs.forEach(item => { setTimeout(() => { const line = $(`<div class="log-line">${item.text}</div>`); if(item.color) line.css('color', item.color); logBox.append(line.hide().fadeIn(500)); // เฟดข้อความเข้ามาช้าๆ }, item.delay); }); // หลังจาก 5 วินาที (ข้อความครบแล้ว) ให้ซ่อนตัวหมุน แล้วโชว์ปุ่ม setTimeout(function() { $('#loading-spinner').fadeOut(500); $('#mystery-btn-area').delay(500).removeClass('hidden').hide().fadeIn(1000); }, 5500); }); </script> <style> /* --- Layout --- */ .bug3-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; font-family: "Courier New", Courier, monospace; } /* พื้นหลังนิ่งๆ มืดๆ */ .bg-layer-static { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/NCUi8sf.png'); background-size: cover; background-position: center; z-index: -2; opacity: 0.4; /* ลดความสว่างลงให้อ่านตัวหนังสือสบายตา */ filter: grayscale(80%); /* ลดสีลงให้ดูหม่นๆ เหมือนเครื่องค้าง */ } /* กล่อง Terminal */ .terminal-wrapper { width: 90%; max-width: 500px; background: rgba(20, 20, 20, 0.95); /* พื้นหลังเกือบดำสนิท */ border: 1px solid #555; /* ขอบสีเทาเรียบๆ */ border-radius: 8px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); text-align: left; } .system-header { color: #e0e0e0; font-weight: bold; font-size: 1.1em; letter-spacing: 1px; } .console-log { margin-bottom: 20px; min-height: 120px; /* จองพื้นที่ไว้กันขยับ */ } .log-line { margin-bottom: 8px; color: #b0bec5; /* สีเทาอ่านง่าย */ font-size: 0.95em; } /* ตัวโหลดหมุนช้าๆ (Spinner) */ .spinner { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.1); border-top: 3px solid #80deea; /* สีฟ้าอ่อน */ border-radius: 50%; animation: spin 1.5s linear infinite; /* หมุนช้าๆ */ margin: 0 auto; /* จัดกลาง */ } /* ปุ่ม ??? */ #mystery-btn-area { text-align: center; margin-top: 20px; } .bug3-root button { background: transparent; color: #fff; border: 1px solid #fff; font-size: 1.2em; padding: 10px 30px; cursor: pointer; font-family: "Courier New", monospace; border-radius: 4px; transition: all 0.3s ease; } .bug3-root button:hover { background: rgba(255,255,255,0.1); box-shadow: 0 0 10px rgba(255,255,255,0.2); } /* Animations */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hidden { display: none !important; } </style>

<div id="appear-root" class="bug-root"> <div id="bg-1" class="bg-layer" style="opacity: 1;"></div> <div id="bg-2" class="bg-layer" style="background-image: url('https://i.imgur.com/2pFvE27.png'); opacity: 0;"></div> <div id="content-box" class="bug-content-box chaos-box"> <div id="phase-1" class="story-text"> <p class="fade-in-text text-pop-orange" style="animation-delay: 0.5s; font-size: 1.3em;"> <span class="glitch-text">"</span> เห็นไหมล่ะนั่น บัคเต็มไปหมดเลย! <span class="glitch-text">"</span><br> ฉันตามแก้ไม่ไหวแล้วเนี่ย หัวจะปวด!! </p> <div class="fade-in-text" style="animation-delay: 2s; margin-top: 40px;"> <<button "?">> <<script>> // เปลี่ยนพื้นหลังทันที $("#bg-1").css('opacity', '0'); $("#bg-2").css('opacity', '1'); // ซ่อนกล่องข้อความ (เพื่อให้ผู้เล่นดูรูป 4 วินาที) $("#content-box").addClass("pop-out"); // ใส่ effect เด้งออก setTimeout(function() { $("#content-box").hide().removeClass("pop-out"); // เตรียมเนื้อหา Phase 2 $("#phase-1").hide(); $("#phase-2").removeClass("hidden"); // เด้งกลับมา $("#content-box").show().addClass("pop-in"); }, 4000); <</script>> <</button>> </div> </div> <div id="phase-2" class="story-text hidden"> <div id="dynamic-content"> <p class="char-voice text-pop-cyan" style="font-size: 2em; margin-bottom: 15px; transform: rotate(-2deg); display:inline-block;"> " โย่ว! " </p> <p style="margin-bottom: 15px; font-weight: bold;"> " เธอคือผู้มาใหม่สินะ เป็นไงที่นี่เจ๋งป่ะล่ะ !? " </p> <p style="color: #ff4081; font-weight: bold; font-style: italic;"> " ฉันเห็นเธอปั้บ รีบกระโดดออกมาเลยนะจะบอกให้ ฮ่า ๆๆ ล้อเล่นน่า " </p> <div class="chaos-divider"></div> <div class="choice-container"> <button class="chaos-btn" onclick="window.updateDialogue('where')">ที่นี่ที่ไหน ?</button> <button class="chaos-btn" onclick="window.updateDialogue('who')">นายเป็นใคร ?</button> <button class="chaos-btn" onclick="window.updateDialogue('bug')">บัคเหรอ ?</button> </div> </div> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.bug-root').css('display', 'flex'); window.qState = { where: false, who: false, bug: false }; }); window.updateDialogue = function(type) { const container = $("#dynamic-content"); if(type) window.qState[type] = true; let responseHTML = ""; // เพิ่มสีสันให้คำตอบ if (type === 'where') { responseHTML = ` <p style="color:#fff;">"ที่นี่เหรอ? ...อืม จะเรียกว่าอะไรดีล่ะ <span class='highlight-pop'>'ถังขยะข้อมูล'</span> มั้ง? หรือ <span class='highlight-pop'>'ห้องเก็บของที่ถูกลืม'</span> ดี?</p> <p style='margin-top:15px;'>มันคือที่ที่สคริปต์เน่าๆ กับโมเดลพังๆ มารวมตัวกันไงล่ะ ดูนั่นสิ!</p> <p style='color:#00e5ff; font-style:italic; font-size:0.9em; margin:10px 0;'>(เขาชี้ไปที่ก้อนโพลิกอนเหลี่ยมๆ ลอยคว้าง)</p> <p>นั่นน่ะเกือบจะได้เป็นปราสาทหรูแล้วนะ ถ้าคนเขียนโค้ดไม่เทงานไปซะก่อน... น่าเศร้าเนอะ?"</p> `; } else if (type === 'who') { responseHTML = ` <p style="color:#fff;">"ฉันชื่อ <span class='glitch-name-pop'>THE87_S0...[NULL]...#D4</span> <br>โอ๊ย! ชื่อพังอีกละ! ช่างเถอะ ฉันเป็นผู้ดูแล... หรือภารโรงของที่นี่แหละ!</p> <p style='margin-top:15px; color:#ffeb3b;'>แล้วก็ขอดักคอไว้ก่อนนะ ห้ามถามว่า 'นายเป็นลิงเหรอ' หรือ 'ชอบกินกล้วยไหม' เด็ดขาด!</p> <p style='margin-top:10px;'>ทำไมใครๆ ก็ชอบทักแบบนั้นฟะ! หน้าฉันเหมือนลิงตรงไหน! ฉันชอบกิน <b class='highlight-pop'>โซบะ</b> ต่างหาก! โซบะเย็นน่ะเข้าใจไหม!!"</p> `; } else if (type === 'bug') { responseHTML = ` <p style="color:#fff;">"ใช่ <span class='highlight-pop-cyan'>บัค..</span> รอยรั่วของความเป็นจริง ข้อมูลที่ผิดพลาด เหมือนแผลเป็นของโลกนี้แหละ</p> <p style='margin-top:15px;'>ปกติฉันก็คอยไล่ตบพวกมันนะ แต่ช่วงนี้มันเยอะผิดปกติ... เหมือนระบบแกนกลางกำลังจะพังทลายลงมายังไงยังงั้นแหละ</p> <p style='margin-top:10px; color:#ff4081;'>เธอโชคดีนะที่ตอนตื่นมา ขาไม่จมหายเข้าไปในพื้นน่ะ ฮ่าๆๆ"</p> `; } let buttonsHTML = '<div class="choice-container" style="margin-top:30px;">'; if (!window.qState.where) buttonsHTML += `<button class="chaos-btn" onclick="window.updateDialogue('where')">ที่นี่ที่ไหน ?</button>`; if (!window.qState.who) buttonsHTML += `<button class="chaos-btn" onclick="window.updateDialogue('who')">นายเป็นใคร ?</button>`; if (!window.qState.bug) buttonsHTML += `<button class="chaos-btn" onclick="window.updateDialogue('bug')">บัคเหรอ ?</button>`; if (window.qState.where && window.qState.who && window.qState.bug) { buttonsHTML += `<div style="margin-top: 20px;"><button class="chaos-btn next-btn" onclick="SugarCube.Engine.play('วงกลม')">...</button></div>`; } buttonsHTML += '</div>'; container.fadeOut(200, function() { $(this).html(responseHTML + '<div class="chaos-divider"></div>' + buttonsHTML).fadeIn(200); }); }; </script> <style> /* --- Layout --- */ .bug-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/NCUi8sf.png'); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #000; transition: opacity 1.5s ease-in-out; z-index: -1; } /* --- Chaos Box Style (ตัวป่วน) --- */ .chaos-box { margin: 60px auto 40px auto; width: 90%; max-width: 720px; position: relative; z-index: 2; /* พื้นหลังดำเข้ม */ background: rgba(10, 10, 15, 0.9); /* ขอบหนาสีสดใส */ border: 3px solid #fff; border-bottom: 6px solid #fff; /* ให้ดูมีมิติ */ border-radius: 0px; /* เหลี่ยมคม */ /* เงาแบบ Hard Shadow */ box-shadow: 10px 10px 0px rgba(0, 229, 255, 0.5); padding: 35px; transform: rotate(-1deg); /* เอียงนิดๆ ให้ดูกวนๆ */ transition: transform 0.3s; } .chaos-box:hover { transform: rotate(0deg) scale(1.01); /* เด้งกลับมาตรงเวลามีเมาส์ชี้ */ } /* Typography */ .story-text { font-family: "Sarabun", sans-serif; font-size: 1.15em; line-height: 1.5; color: #ffffff; text-shadow: 2px 2px 0px #000; } .text-pop-orange { color: #ff9100; font-weight: bold; text-shadow: 2px 2px 0 #000; } .text-pop-cyan { color: #00e5ff; font-weight: 900; text-shadow: 3px 3px 0 #000; } .highlight-pop { background: #ff9100; color: #000; padding: 0 4px; font-weight: bold; display: inline-block; transform: rotate(-2deg); } .highlight-pop-cyan { background: #00e5ff; color: #000; padding: 0 4px; font-weight: bold; display: inline-block; transform: rotate(2deg); } .char-voice { font-weight: bold; font-size: 1.3em; } /* Divider แบบเส้นประ */ .chaos-divider { height: 2px; width: 100%; margin: 20px auto; background-image: linear-gradient(90deg, #fff 50%, transparent 50%); background-size: 20px 100%; } /* Glitch Name */ .glitch-name-pop { display: inline-block; font-family: "Courier New", monospace; font-weight: bold; color: #ff4081; text-shadow: 2px 0 #00e5ff; animation: shake 0.3s infinite; } /* Buttons (สไตล์ปุ่มเกมตู้) */ .choice-container { display: flex; flex-direction: column; gap: 15px; align-items: center; margin-top: 25px; } .bug-root button, .chaos-btn { background: #fff; border: 3px solid #000; color: #000; padding: 12px 25px; font-size: 1.1em; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: all 0.1s; font-family: "Sarabun", sans-serif; width: 100%; max-width: 400px; /* เงาแข็งๆ */ box-shadow: 5px 5px 0px #ff9100; transform: skew(-5deg); /* เอียงปุ่ม */ } .bug-root button:hover, .chaos-btn:hover { transform: skew(-5deg) translate(-2px, -2px); box-shadow: 7px 7px 0px #00e5ff; background: #ffff00; } .next-btn { background: #ff4081 !important; color: #fff !important; box-shadow: 5px 5px 0px #fff !important; } .next-btn:hover { background: #f50057 !important; box-shadow: 7px 7px 0px #ff9100 !important; } /* Animation */ .fade-in-text { opacity: 0; animation: simpleFadeIn 0.5s forwards; } .pop-in { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .pop-out { animation: popOut 0.5s forwards; } @keyframes simpleFadeIn { to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: scale(0.8) rotate(-1deg); } to { opacity: 1; transform: scale(1) rotate(-1deg); } } @keyframes popOut { from { opacity: 1; transform: scale(1) rotate(-1deg); } to { opacity: 0; transform: scale(1.2) rotate(5deg); } } @keyframes shake { 0% { transform: translate(0,0); } 25% { transform: translate(2px,2px); } 50% { transform: translate(-2px,1px); } 75% { transform: translate(1px,-2px); } 100% { transform: translate(0,0); } } .hidden { display: none !important; } .bug-root::-webkit-scrollbar { width: 8px; } .bug-root::-webkit-scrollbar-track { background: #050505; } .bug-root::-webkit-scrollbar-thumb { background: #ff9100; border-radius: 0; } </style>

<div id="throw-root" class="throw-root"> <div id="spinning-world"> <div class="bg-sky"></div> <div id="content-box" class="throw-content-box chaos-box" style="display:none;"> <div id="phase-1"> <div class="text-group fade-in-text" style="animation-delay: 0.5s;"> <p class="char-dialogue">“ก็ประมาณนั้นแหละ... พูดก็พูดเถอะ อันที่จริงเธอกับฉันไม่ควรเจอกันที่นี่ด้วยซ้ำ เพราะมันน่าจะมีแต่ฉันที่เข้ามาได้ไงล่ะ ให้ตายสิ ระบบรวนไปหมดแล้วเนี่ย!”</p> </div> <div class="text-group fade-in-text" style="animation-delay: 2.5s;"> <p class="char-dialogue">“ช่างมันเถอะ! ตรงนี้ไม่ใช่เกมที่เธอตามหา ! ในเมื่อเธอหลุดมาถึงที่นี่แล้ว ฉันก็ต้อง ถีบ... เอ๊ย! พาลูกค้า VIP อย่างเธอ เข้าไปในเกมจริง ๆ ให้ได้อยู่แล้วล่ะ!”</p> </div> <div class="action-block fade-in-text" style="animation-delay: 4.5s;"> ฝ่ามือคว้าหมับเข้าที่ข้อมือคุณอย่างถือวิสาสะ แรงบีบแน่นเปรี้ยะ<br> เขาดึงคุณเข้าไปใกล้ จนเห็นรอยยิ้มกว้างที่ดูเจ้าเล่ห์นั่น </div> <div class="highlight-block fade-in-text" style="animation-delay: 6.5s;"> <p>“ฟังนะ... ตอนนี้เธอเป็นบัคที่หลุดเข้ามา เหมือนแมลงไง ! เธอต้องเลิกทำตัวเป็น ‘บัค’ แล้วไปหา ‘บทบาท’ ของตัวเองซะ!”</p> <p class="final-act-text">“ เพราะ Final Act คือเกมค้นหาตัวตนเฟ้ย เข้าใจบ่!?<br>ไปทำข้อสอบ ตอบให้ตรงใจ คิดซะว่าไปสอบไฟนอลก็แล้วกัน เอาล่ะ เกาะอากาศให้แน่น !!?”</p> </div> <div class="fade-in-text" style="animation-delay: 8s; margin-top: 30px;"> <<button "หา ???">> <<script>> $("#phase-1").fadeOut(300, function() { $("#phase-2").removeClass("hidden").hide().fadeIn(300); }); <</script>> <</button>> </div> </div> <div id="phase-2" class="hidden" style="text-align: center;"> <p class="shout-header">“เอาล่ะ... ไปโลดดด!!”</p> <div class="action-block" style="margin-top: 15px;"> <p>สิ้นเสียงนั้น โลกทั้งใบก็ถูกกระชากกลับหัวกลับหาง!</p> <p>เขาจับคุณเหวี่ยงหมุนติ้วราวกับคุณเป็นลูกข่างไร้น้ำหนัก</p> </div> <div class="action-block" style="margin-top: 10px; font-size: 0.95em;"> แรงเหวี่ยงมหาศาลส่งร่างของคุณพุ่งทะยานขึ้นสู่อากาศธาตุ<br> ฝ่าทะลุชั้นบรรยากาศของกองขยะข้อมูลขึ้นไป... </div> <div class="rocket-text"> บ้าจริงเชียว ไม่พูดไม่ได้แล้วนะ ถ้อยคำในตำนานน่ะ!<br> <span class="highlight-yellow">ลางไม่ดีอีกแล้วววววว!!</span> </div> <div style="margin-top: 25px;"> <<button "!!!!">> <<script>> // สั่งหยุดเพลง Glitch (ถ้าเล่นอยู่) if (SugarCube.SimpleAudio.tracks.has("bgm_glitch2")) { SugarCube.SimpleAudio.tracks.get("bgm_glitch2").fadeOut(3); } // เริ่มหมุนโลก $("#spinning-world").addClass("world-spin"); // จอดำทำงาน setTimeout(function() { $(".bg-black-void").css("opacity", "1"); }, 3000); // แสดงข้อความสุดท้าย setTimeout(function() { $("#phase-3-container").removeClass("hidden").hide().fadeIn(1500); }, 4000); <</script>> <</button>> </div> </div> </div> </div> <div class="bg-black-void"></div> <div id="phase-3-container" class="hidden" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; z-index: 20;"> <p style="color: #90a4ae; font-style: italic; margin-bottom: 20px;"> ท่ามกลางเสียงลมหวีดหวิวและสติที่กำลังจะหลุดลอย...<br> เสียงตะโกนสุดท้ายของเขายังคงไล่หลังมา </p> <div class="fun-text"> “ถ้าเจอกันอีกรอบล่ะก็ ต้องจำให้ได้นะว่า...<br> <span style="font-size: 1.5em; color: #ffab91; text-shadow: 0 0 20px #ffab91;">ฉันชอบโซบะที่สุดในโลก!! ไม่ใช่กล้วยนะ !!</span><br> <span style="font-size: 1.2em;">ก๊าาฮ่าฮ่าฮ่า!!”</span> </div> <div style="margin-top: 40px;"> <<button "...">> <<script>> var oldMusic = SugarCube.SimpleAudio.tracks.get("bgm_glitch2"); if (oldMusic) { oldMusic.fadeOut(2); } var newMusic = SugarCube.SimpleAudio.tracks.get("bgm_genesis"); if (newMusic) { newMusic.volume(0.7); newMusic.loop(true); newMusic.play(); } SugarCube.Engine.play("เริ่มสักที"); <</script>> <</button>> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.throw-root').css('display', 'block'); // 1. สั่งเล่นเพลงต่อเนื่อง (กันเหนียว) var bgm = SugarCube.SimpleAudio.tracks.get("bgm_glitch2"); if (bgm && bgm.isPaused()) { bgm.play(); } // 2. Fade In พื้นหลังท้องฟ้า setTimeout(function() { $('.bg-sky').css('opacity', '1'); }, 100); // 3. Fade In กล่องข้อความ (หลังจาก 1 วิ) setTimeout(function() { $('#content-box').fadeIn(1000).addClass('pop-in'); }, 1000); }); </script> <style> /* --- Layout --- */ .throw-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: block; text-align: center; } #spinning-world { width: 100%; min-height: 100%; position: relative; transform-style: preserve-3d; } /* --- Chaos Box --- */ .throw-content-box { margin: 60px auto 80px auto; width: 90%; max-width: 680px; background: rgba(10, 10, 15, 0.9); border: 3px solid #fff; border-bottom: 6px solid #fff; box-shadow: 10px 10px 0px rgba(0, 229, 255, 0.5); transform: rotate(-1deg); padding: 35px 25px 50px 25px; color: #fff; font-family: "Sarabun", sans-serif; font-size: 1.1em; z-index: 1; position: relative; } /* --- Typography --- */ .char-dialogue { color: #fff; line-height: 1.5; margin-bottom: 0; font-weight: 500; } .text-group { margin-bottom: 15px; text-align: center; } .action-block { color: #ff4081; font-style: italic; font-size: 0.95em; font-weight: bold; background: rgba(255, 64, 129, 0.1); padding: 12px; margin: 15px 0; line-height: 1.5; border: 2px dashed #ff4081; text-align: center; transform: rotate(1deg); } .highlight-block { margin-top: 20px; padding: 5px; } .final-act-text { font-weight: 900; font-size: 1.3em; color: #ffff00; margin-top: 8px; text-shadow: 3px 3px 0 #000; text-transform: uppercase; background: #000; padding: 5px; display: inline-block; transform: skew(-5deg); } .shout-header { font-size: 2.5em; font-weight: 900; color: #ff5252; text-transform: uppercase; text-shadow: 3px 3px 0 #fff; margin-bottom: 20px; margin-top: 0; animation: shake 0.5s infinite; } .rocket-text { margin-top: 25px; font-size: 1.1em; color: #e0e0e0; } .highlight-yellow { display: block; margin-top: 8px; font-size: 1.5em; font-weight: 900; color: #ffff00; text-shadow: 3px 3px 0 #ff0055; transform: rotate(2deg); } .fun-text { color: #ffff8d; font-weight: bold; font-size: 1.3em; text-shadow: 0 0 15px rgba(255, 255, 141, 0.4); animation: bounce 1s infinite alternate; } /* Buttons */ .throw-root button { background: #fff; border: 3px solid #000; color: #000; padding: 10px 30px; font-size: 1.2em; font-weight: 900; cursor: pointer; transition: all 0.1s; font-family: "Sarabun", sans-serif; box-shadow: 5px 5px 0 #ff0055; transform: skew(-10deg); } .throw-root button:hover { background: #00e5ff; color: #000; transform: skew(-10deg) translate(-2px, -2px); box-shadow: 7px 7px 0 #fff; border-color: #000; } /* Backgrounds & Animations */ .bg-sky { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; background-image: url('https://i.imgur.com/unt1LkF.png'); background-size: contain; background-repeat: no-repeat; background-position: center top; background-color: #000; opacity: 0; transition: opacity 2s ease-in-out; z-index: -2; } .bg-black-void { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 10; pointer-events: none; } .bg-black-void[style*="opacity: 1"] { pointer-events: auto; } .world-spin { animation: spinWorld 4s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; overflow: hidden !important; } .fade-in-text { opacity: 0; animation: simpleFadeIn 0.5s forwards; } .pop-in { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes simpleFadeIn { to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: scale(0.8) rotate(-1deg); } to { opacity: 1; transform: scale(1) rotate(-1deg); } } @keyframes shake { 0% { transform: translate(0,0); } 25% { transform: translate(2px,2px); } 50% { transform: translate(-2px,1px); } 75% { transform: translate(1px,-2px); } 100% { transform: translate(0,0); } } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes spinWorld { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(0) rotate(1080deg); opacity: 0; } } .throw-root::-webkit-scrollbar { width: 8px; } .throw-root::-webkit-scrollbar-track { background: #000; } .throw-root::-webkit-scrollbar-thumb { background: #ff0055; border-radius: 0; } .hidden { display: none !important; } </style>

<div class="genesis-root"> <div class="stars"></div> <div class="twinkling"></div> <div class="genesis-container"> <div id="part-1" class="story-text"> <p class="fade-blur-in">ในกาลเวลาที่โลกยังคงไร้รูปทรง</p> <p class="fade-blur-in" style="animation-delay: 2.5s;"> ความปรารถนาอันแรงกล้าของมนุษยชาติ...<br> ได้ถักทอก่อตัวขึ้นเป็น <span class="gold-text">'มหาอาณาจักร'</span> ทั้งเก้า </p> <br> <p class="fade-blur-in" style="animation-delay: 5.5s;"> แต่ละดินแดน... ล้วนได้รับการปกป้องโดย <span class="gold-text">'ผู้พิทักษ์'</span>...<br> ตัวแทนแห่งเจตจำนงอันสูงสุด </p> </div> <div id="part-2" class="story-text hidden"> <p class="fade-blur-in">ทว่าบัดนี้... โลกใบนั้นได้แตกสลายลงแล้ว</p> <p class="fade-blur-in" style="animation-delay: 3s;"> จิตวิญญาณของผู้คนล่องลอย บ้างหายลับ บ้างคงอยู่ </p> <br> <p class="fade-blur-in" style="animation-delay: 6s;"> ท่านเองก็เช่นกัน จิตวิญญาณที่ยังคงหล่อหลอมและไร้รูปทรง<br> ถึงเวลาแล้วที่จะต้องออกตามหา ประกอบกลับมาใหม่ และไม่เลือนหาย </p> </div> <div id="part-input" class="input-wrapper hidden"> <p class="fade-blur-in gold-text" style="font-size: 1.4em; margin-bottom: 20px;"> จงเอ่ยนามของท่าน </p> <div class="fade-in-up" style="animation-delay: 1s;"> <input type="text" id="player-name-input" placeholder="พิมพ์ชื่อของคุณ..." maxlength="20" autocomplete="off"> <div style="margin-top: 25px;"> <button class="genesis-btn" onclick="window.submitName()">ยืนยันนามนี้</button> </div> <div id="error-msg" style="color: #ff5252; margin-top: 10px; opacity: 0; font-size: 0.9em;"> โปรดระบุนามของท่าน... </div> </div> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { // ตั้งค่าหน้าจอ $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.genesis-root').css('display', 'flex'); // --- TIMELINE (ส่วนที่หายไป ใส่กลับมาให้แล้วค่ะ) --- // วินาทีที่ 10: เปลี่ยน Part 1 -> Part 2 setTimeout(function() { $('#part-1').fadeOut(1500, function() { $('#part-2').removeClass('hidden').hide().fadeIn(1500); }); }, 10000); // วินาทีที่ 22 (10 + 12): เปลี่ยน Part 2 -> Part Input setTimeout(function() { $('#part-2').fadeOut(1500, function() { $('#part-input').removeClass('hidden').hide().fadeIn(1500); }); }, 22000); }); // ฟังก์ชันบันทึกชื่อ window.submitName = function() { var name = $('#player-name-input').val().trim(); if (name === "") { $('#error-msg').css('opacity', '1'); return; } // บันทึกชื่อ SugarCube.State.variables.playerName = name; // ไปหน้าถัดไป $('.genesis-root').fadeOut(1000, function() { SugarCube.Engine.play("บทนำ_เข้าเกม"); }); }; </script> <style> /* --- Layout --- */ .genesis-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; font-family: "Sarabun", sans-serif; overflow: hidden; } .genesis-container { width: 90%; max-width: 700px; text-align: center; z-index: 10; } .stars, .twinkling { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .stars { background: #000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center; z-index: 0; } .twinkling { background: transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center; z-index: 1; animation: move-twink-back 200s linear infinite; opacity: 0.4; } .story-text { color: #e0e0e0; font-size: 1.15em; line-height: 1.8; letter-spacing: 0.5px; text-shadow: 0 0 5px rgba(0,0,0,0.8); } .gold-text { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); font-weight: bold; } input[type=text] { background: rgba(255, 255, 255, 0.05); border: none; border-bottom: 2px solid #666; color: #fff; font-size: 1.5em; text-align: center; padding: 10px; width: 80%; max-width: 300px; transition: all 0.3s; font-family: "Sarabun", sans-serif; } input[type=text]:focus { outline: none; border-bottom: 2px solid #ffd700; background: rgba(255, 255, 255, 0.1); } .genesis-btn { background: transparent; border: 1px solid #ffd700; color: #ffd700; padding: 10px 30px; font-size: 1em; cursor: pointer; transition: all 0.3s; border-radius: 4px; font-family: "Sarabun", sans-serif; } .genesis-btn:hover { background: #ffd700; color: #000; box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); } @keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } .fade-blur-in { animation: fadeBlur 2s forwards; opacity: 0; filter: blur(5px); } .fade-in-up { animation: fadeInUp 1.5s forwards; opacity: 0; transform: translateY(20px); } @keyframes fadeBlur { to { opacity: 1; filter: blur(0); } } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .hidden { display: none !important; } </style>

<<audio "bgm_genesis" stop>> <div id="p1-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text" style="color: #b0bec5; font-style: italic; margin-bottom: 30px;"> “...ผู้พิทักษ์ทั้งเก้างั้นเหรอ...” </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="window.startWarScene()">ฉันต้องเจอใครกันนะ</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <p class="fade-in-text">กลิ่นควันไฟและดินปืนคลุ้งอยู่ในอากาศแสนหนาวเย็น</p> <p class="fade-in-text" style="animation-delay: 3s;">คุณยืนอยู่กลางซากสมรภูมิใต้ท้องฟ้าสีเทาหม่น<br>รอบกายมีเพียงธงทิวที่หักสะบั้น</p> <p class="fade-in-text" style="animation-delay: 6s;">เสียงลมหวีดหวิวผ่านผืนธงที่ยังคงตั้งตระหง่าน</p> <div class="fade-in-text" style="animation-delay: 9s; margin-top: 20px;"> เบื้องหน้าคุณ <span class="highlight-red">"จอมทัพผู้พิทักษ์"</span> ยืนหยัดมั่นคงในชุดเกราะ<br> มือข้างหนึ่งกำด้ามธง <span class="highlight-red">‘กุหลาบดำ’</span> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-3-text"> <p class="commander-voice">“สมรภูมินี้จบแล้ว แต่สงครามยังไม่สิ้นสุด...”</p> <p>“ที่นี่ไม่มีที่ว่างสำหรับคนอ่อนแอ หรือคนที่แสดงความลังเล”</p> <hr style="border-color: #555; width: 80%; margin: 15px auto;"> <p>“ดวงวิญญาณที่มอดไหม้ ข้าต้องรู้ว่าเจ้าเป็นใคร”</p> <p style="color: #ff8a80; font-weight: bold;">“ไม่มีเวลามากมาย ตอบคำถามเหล่านี้ด้วยความสัตย์จริง อย่าเสแสร้งเด็ดขาด”</p> <p style="font-size: 0.9em; color: #aaa; margin-top: 15px; font-style: italic;"> (จอมทัพยื่นม้วนกระดาษให้คุณ ในนั้นมีคำถามที่รอให้คุณเลือกคำตอบที่สะท้อนความเป็นตัวเอง<br> คุณตระหนักได้แล้วว่าเขาคนนี้คือหนึ่งในผู้พิทักษ์) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-5" class="hidden" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 700px; text-align: center; z-index: 50;"> <p class="commander-voice" style="font-size: 1.4em;">“ข้าเห็นคำตอบของเจ้าแล้ว ชัดเจนดี”</p> <p style="margin-top: 20px; color: #e0e0e0;">“ไม่ว่าเจ้าจะเป็นใคร จงยืนหยัดในสิ่งที่เจ้าเลือก”</p> <p style="margin-top: 20px; font-weight: bold; color: #ff5252; font-size: 1.5em;">“เอาล่ะ... ไปได้แล้ว!”</p> <div style="margin-top: 40px;"> <button class="war-btn" onclick="window.warpNext()">ฉันยังต้องไปต่อ</button> </div> </div> </div> </div> <script> /* ใช้ window. นำหน้าตัวแปร เพื่อให้มันเป็น Global (แก้ปัญหา ประกาศซ้ำ และ หาไม่เจอ) */ window.warQuestions = [ { text: "1. เมื่อฉันต้องเผชิญหน้า...", options: [ { label: "ฉันมีแนวโน้มที่จะเผชิญหน้ากับการขัดแย้ง", type: 8 }, { label: "ฉันมีแนวโน้มที่จะหลีกเลี่ยงการขัดแย้ง", type: 9 } ] }, { text: "2. โดยทั่วไปแล้ว...", options: [ { label: "การยั่วโมโหฉันเป็นเรื่องง่าย", type: 6 }, { label: "การยั่วโมโหฉันเป็นเรื่องยาก", type: 9 } ] }, { text: "3. คนอื่นมักจะพึ่งพา...", options: [ { label: "ความเข้าใจลึกซึ้งและความรู้ของฉัน", type: 5 }, { label: "ความแข็งแกร่งและความเด็ดขาดของฉัน", type: 8 } ] }, { text: "4. ฉันมีแนวโน้มที่จะ...", options: [ { label: "ลังเลและผัดวันประกันพรุ่ง", type: 9 }, { label: "กล้าหาญและชอบควบคุม", type: 8 } ] }, { text: "5. โดยปกติแล้วฉันสนใจที่จะ...", options: [ { label: "ตั้งคำถามที่ตอบยากและรักษาความเป็นอิสระของตัวเอง", type: 5 }, { label: "รักษาความมั่นคงและความสงบในใจของตัวเอง", type: 9 } ] } ]; window.warQIndex = 0; $(document).one(':passagedisplay', function() { $('body, html').css({'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000'}); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.warQIndex = 0; // รีเซ็ตข้อสอบทุกครั้งที่เข้าหน้า $('#pre-phase').show(); $('#main-scene').hide(); $('#phase-5').addClass('hidden').hide(); }); window.startWarScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_war"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#bg-layer').css('opacity', '1'); }, 12000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1000); }, 16000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); // เรียกฟังก์ชันแสดงคำถาม }); }, 28000); }); }; window.showQuestion = function() { // ถ้าคำถามหมดแล้ว ให้จบ if (window.warQIndex >= window.warQuestions.length) { window.endQuiz(); return; } var q = window.warQuestions[window.warQIndex]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { // *** การเก็บคะแนน (จุดสำคัญ) *** // เรายังคงเก็บคะแนนลงใน SugarCube State เหมือนเดิม เพื่อให้ระบบเกมนับแต้มได้ var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.warQIndex++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); // บังคับแสดงตอนจบ setTimeout(function() { $('#phase-5').removeClass('hidden').css('display','block').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_war"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("2"); }, 1500); }; </script> <style> /* --- CSS เดิมทั้งหมด (ใช้งานได้ดีอยู่แล้ว) --- */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; font-family: "Sarabun", sans-serif; overflow-y: auto; } .pre-phase-container { text-align: center; z-index: 50; } .start-scene-btn { background: transparent; border: 1px solid #777; color: #ddd; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #fff; color: #000; border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.5); } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/uxhsVhY.png'); background-size: cover; background-position: center; opacity: 0; transition: opacity 2s ease-in-out; z-index: -1; filter: brightness(0.7) grayscale(0.3); } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; pointer-events: none; transition: opacity 1.5s ease-in-out; z-index: 10; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } .dialogue-box { width: 90%; max-width: 700px; background: rgba(20, 20, 20, 0.9); border: 2px solid #5d4037; border-radius: 4px; padding: 40px; text-align: center; color: #e0e0e0; box-shadow: 0 0 30px rgba(0,0,0,0.8); z-index: 5; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } .highlight-red { color: #ff5252; font-weight: bold; } .commander-voice { color: #ffcc80; font-weight: bold; font-size: 1.2em; text-shadow: 0 0 5px rgba(255, 204, 128, 0.3); } .question-header { font-size: 1.3em; font-weight: bold; margin-bottom: 25px; color: #fff; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: linear-gradient(to bottom, #3e2723, #281a16); border: 1px solid #6d4c41; color: #d7ccc8; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; } .quiz-btn:hover { background: #5d4037; border-color: #a1887f; color: #fff; transform: translateY(-2px); } .war-btn { background: transparent; border: 2px solid #ff5252; color: #ff5252; padding: 12px 30px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-weight: bold; } .war-btn:hover { background: #ff5252; color: #fff; box-shadow: 0 0 20px #ff5252; } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } </style>

<div id="p2-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text" style="color: #cfd8dc; font-style: italic; margin-bottom: 30px; font-size: 1.1em;"> " เขาคนนั้น .. ทำไมทำสายตาแบบนั้นนะ ? " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="startSakuraScene()">หรือว่า ...</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="sakura-container"> <div class="sakura"></div><div class="sakura"></div><div class="sakura"></div> <div class="sakura"></div><div class="sakura"></div><div class="sakura"></div> <div class="sakura"></div><div class="sakura"></div><div class="sakura"></div> </div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="zen-text"> <p class="fade-in-text">คุณเดินเข้ามาในสวนที่เงียบสงบ...</p> <p class="fade-in-text" style="animation-delay: 2s;">แสงแดดอ่อนๆ ส่องผ่านกิ่งก้านของต้นซากุระที่กำลังเบ่งบานสะพรั่ง</p> <p class="fade-in-text" style="animation-delay: 4s; color: #f8bbd0;">กลีบดอกไม้สีชมพูอ่อนโปรยปรายลงมาช้าๆ ปกคลุมไปทั่วบริเวณ</p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p style="margin-bottom: 15px;">อากาศอบอวลไปด้วยกลิ่นหอมหวานจางๆ และความรู้สึกผ่อนคลายอย่างประหลาด<br>ทุกสิ่งรอบตัวคุณดูเหมือนจะเคลื่อนไหวอย่างกลมกลืนและไม่เร่งรีบ</p> <p style="font-style: italic; color: #888; margin-bottom: 15px;"> ท่ามกลางหมู่มวลกลีบดอกไม้ที่ร่วงหล่น คุณเห็นร่างบอบบางในชุดสีอ่อนยืนยิ้มต้อนรับคุณอยู่<br> <span style="color: #ec407a; font-weight: bold;">"ปราชญ์ผู้สร้างสันติ"</span> ประสานมือไว้เบื้องหน้าอย่างนอบน้อม </p> <p class="sage-voice">"ยินดีต้อนรับ"</p> <p class="sage-voice">"ในที่สุดคุณก็มาถึง... ที่นี่ ทุกสิ่งล้วนเชื่อมโยงกัน ไม่จำเป็นต้องรีบร้อน หรือแก่งแย่งชิงดี"</p> <br> <p class="sage-voice">"โลกภายนอกบางครั้งก็วุ่นวายเหลือเกินใช่ไหม? ความขัดแย้งมักทำให้จิตใจเราหนักอึ้ง<br>แต่สิ่งสำคัญที่สุดคือการรักษาความสงบภายในใจของเราไว้"</p> </div> <div id="phase-3-text" class="hidden"> <p class="sage-voice" style="font-size: 1.15em;"> "ฉันอยากรู้จักตัวตนที่แท้จริงของคุณ...<br>ลองมองเข้าไปในใจของคุณ แล้วตอบคำถามเหล่านี้ตามที่คุณรู้สึกจริงๆ เถอะนะ" </p> <p style="margin-top: 20px; font-style: italic; color: #888;"> (เธอค่อยๆ ยื่นม้วนกระดาษเล็กๆ ที่ผูกด้วยริบบิ้นสีอ่อนให้คุณ) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden outro-compact"> <div class="zen-text"> <p class="sage-voice" style="font-size: 1.25em; margin-bottom: 10px;">"ขอบคุณนะ... ฉันเข้าใจตัวตนของคุณมากขึ้นแล้ว"</p> <p class="sage-voice" style="margin-top: 5px;">"ไม่ว่าคำตอบจะเป็นเช่นไร ขอให้ใจของคุณสงบสุขเสมอนะ"</p> <hr style="border-color: #555; width: 30%; margin: 20px auto;"> <p style="color: #f8bbd0; margin-top: 5px;">"ฉันจะส่งคุณไปพบกับคนต่อไป... เดินทางโดยสวัสดิภาพนะคะ"</p> </div> <div style="margin-top: 30px;"> <button class="sage-btn" onclick="warpNext()">ขอบคุณนะ</button> </div> </div> </div> </div> <script> // --- ข้อมูลคำถาม --- const questions = [ { text: "1. ตัวฉัน...", options: [ { label: "ไม่ค่อยกล้าพูดเพื่อปกป้องตัวเอง", type: 9 }, { label: "เป็นคนโผงผาง—พูดในสิ่งที่คนอื่นอยากพูดแต่ไม่กล้า", type: 8 } ] }, { text: "2. ปกติแล้ว เมื่อเจอปัญหา ฉันจะ...", options: [ { label: 'สามารถ "ไม่สนใจมัน"', type: 9 }, { label: "ให้รางวัลตัวเองด้วยสิ่งที่ชอบ", type: 7 } ] }, { text: "3. เมื่อฉันมีความขัดแย้งกับคนอื่น ฉัน...", options: [ { label: "มักจะถอยออกมา", type: 4 }, { label: "ไม่เคยยอมถอย", type: 8 } ] }, { text: "4. ฉัน...", options: [ { label: "ยอมง่ายเกินไปและปล่อยให้คนอื่นข่มเหง", type: 9 }, { label: "ไม่ยอมประนีประนอมและเรียกร้องจากคนอื่นมากเกินไป", type: 1 } ] } ]; let currentQIndex = 0; $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); currentQIndex = 0; $('#pre-phase').show(); $('#main-scene').hide(); }); // --- ฟังก์ชันเริ่ม --- window.startSakuraScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_sakura"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 8000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 12000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 36000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); showQuestion(); }); }, 46000); }); }; // --- คำถาม --- window.showQuestion = function() { if (currentQIndex >= questions.length) { endQuiz(); return; } const q = questions[currentQIndex]; $('#question-text').text(q.text).hide().fadeIn(300); const optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(opt => { const btn = $(`<button class="quiz-btn">${opt.label}</button>`); btn.on('click', function() { const varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; currentQIndex++; showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; // --- จบคำถาม (แก้ไขการแสดงผล) --- window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { // แสดง Outro โดยใช้คลาส outro-compact ที่จัดระยะห่างใหม่ $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; // --- ไปหน้า 3 --- window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_sakura"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("3"); }, 1500); }; </script> <style> /* --- Layout --- */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; /* เปิด Scroll */ overflow-y: auto; display: flex; flex-direction: column; /* จัดแนวตั้ง */ align-items: center; justify-content: center; /* พยายามให้อยู่กลางถ้าเนื้อหาน้อย */ } /* ปรับให้เนื้อหาสามารถขยายเกินจอได้ถ้าจำเป็น (เพื่อการ Scroll) */ .story-text-center, .dialogue-box { flex-shrink: 0; /* ห้ามหดตัว */ } /* Pre-Phase */ .pre-phase-container { text-align: center; z-index: 50; } .start-scene-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid #f8bbd0; color: #f8bbd0; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #f8bbd0; color: #000; box-shadow: 0 0 15px rgba(248, 187, 208, 0.4); } /* Backgrounds */ .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/cXEIheO.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } /* Sakura Animation */ .sakura-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; } .sakura { position: absolute; background-color: #ffcdd2; border-radius: 100% 0 100% 0; opacity: 0.8; width: 10px; height: 10px; animation: fall linear infinite; } .sakura:nth-child(1) { left: 10%; animation-duration: 10s; animation-delay: 0s; } .sakura:nth-child(2) { left: 20%; animation-duration: 15s; animation-delay: 2s; width: 15px; height: 15px; } .sakura:nth-child(3) { left: 30%; animation-duration: 12s; animation-delay: 4s; } .sakura:nth-child(4) { left: 50%; animation-duration: 18s; animation-delay: 0s; width: 12px; height: 12px;} .sakura:nth-child(5) { left: 60%; animation-duration: 14s; animation-delay: 5s; } .sakura:nth-child(6) { left: 80%; animation-duration: 20s; animation-delay: 1s; width: 8px; height: 8px;} .sakura:nth-child(7) { left: 90%; animation-duration: 11s; animation-delay: 3s; } @keyframes fall { 0% { top: -10%; transform: translateX(0) rotate(0deg); } 100% { top: 110%; transform: translateX(100px) rotate(360deg); } } /* Content Boxes */ .dialogue-box { width: 90%; max-width: 700px; background: rgba(255, 250, 250, 0.85); backdrop-filter: blur(5px); border: 1px solid #f8bbd0; border-radius: 15px; padding: 40px; text-align: center; color: #4a4a4a; box-shadow: 0 5px 20px rgba(0,0,0,0.1); z-index: 5; margin: 20px auto; /* Margin บนล่างเผื่อ Scroll */ } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; /* แก้ไขให้ z-index ทำงาน */ margin: 20px auto; } /* Outro Compact Style (แก้ไขให้ชิดขึ้น) */ .outro-compact { padding-bottom: 50px; /* เผื่อที่ให้ปุ่มด้านล่าง */ } .zen-text { font-family: "Sarabun", serif; letter-spacing: 1px; color: #eee; } .sage-voice { color: #d81b60; font-weight: bold; font-size: 1.1em; line-height: 1.4; } /* Quiz */ .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #880e4f; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: #fff; border: 1px solid #f48fb1; color: #880e4f; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 8px; } .quiz-btn:hover { background: #fce4ec; border-color: #ec407a; transform: translateY(-2px); } .sage-btn { background: transparent; border: 2px solid #f48fb1; color: #f48fb1; padding: 10px 30px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 50px; } .sage-btn:hover { background: #f48fb1; color: #fff; box-shadow: 0 0 15px rgba(244, 143, 177, 0.6); } /* Animation */ .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } /* Custom Scrollbar */ .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #000; } .scene-root::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } </style>

<div id="p3-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px;"> " เธอดูรักสันติจริง ๆ นั่นแหละ... " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="startMagicScene()">ฉันเองก็อยากที่จะ...</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="spotlight-overlay"></div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="theater-text"> <p class="fade-in-text" style="color: #ba68c8;">ม่านกำมะหยี่สีม่วงเข้มขนาดใหญ่ถูกรวบไว้ด้านข้าง<br>เผยให้เห็นเวทีที่สว่างไสวราวกับต้องมนตร์</p> <p class="fade-in-text" style="animation-delay: 4s; color: #ffd54f;">แสงสปอตไลท์นวลตาจับจ้องไปยังจุดกึ่งกลาง</p> <p class="fade-in-text" style="animation-delay: 8s;"> อากาศรอบตัวคุณสั่นไหวด้วยพลังงานแห่งความคาดหวัง<br>และเสียงปรบมือที่ดังก้องอยู่ในจินตนาการ<br> <span style="font-size: 1.2em; font-weight: bold; color: #fff;">ที่นี่คือโรงละครแห่งความฝัน ที่ซึ่งทุกความสำเร็จสามารถเป็นจริงได้</span> </p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p class="fade-in-text" style="font-style: italic; color: #b39ddb; margin-bottom: 20px;"> <span class="highlight-gold">"ผู้ประกาศแห่งความหวัง"</span> ยืนอยู่อย่างสง่างามในชุดคลุมยาวและหมวกทรงแหลมที่ดูโดดเด่น<br>เรือนผมยาวสลวยของเธอพลิ้วไหวแม้ไร้สายลม </p> <p class="magician-voice">"ยินดีต้อนรับสู่เวทีแห่งความเป็นไปได้!"</p> <p class="magician-voice">"ผู้คนมองหาความหวัง แต่ความหวังที่แท้จริง... เราต้องสร้างมันขึ้นมาเอง!"</p> <hr style="border-color: #ffd700; width: 50%; margin: 20px auto; opacity: 0.5;"> <p class="fade-in-text" style="animation-delay: 1s; font-size: 0.95em; color: #ddd;"> (เธอชูดวงดาวในมือขึ้นสูง แสงของมันสาดส่องมาที่คุณ) </p> <p class="magician-voice" style="margin-top: 15px;"> "นี่คือเป้าหมาย ความสำเร็จ และภาพลักษณ์ที่เราต้องการจะเป็น<br> ไม่มีอะไรได้มาโดยไม่พยายาม และไม่มีอะไรมีค่าเท่าการได้เป็น <span class="highlight-gold">'ผู้ชนะ'</span> ในสายตาผู้อื่น" </p> </div> <div id="phase-3-text" class="hidden"> <p class="magician-voice" style="font-size: 1.2em;"> "ข้าอยากรู้ว่าเจ้าพร้อมที่จะส่องแสงเจิดจ้าเหมือนดาวดวงนี้หรือยัง...<br> หรือเจ้าจะพอใจกับการเป็นเพียงผู้ชมอยู่ด้านล่างเวทีนี้?" </p> <p style="margin-top: 25px; font-style: italic; color: #b39ddb;"> (เธอโบกมือเล็กน้อย และม้วนกระดาษสีม่วงอ่อนขอบทองก็ปรากฏขึ้นตรงหน้าคุณ) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden" style="z-index: 20; position: relative;"> <div class="theater-text"> <p class="magician-voice" style="font-size: 1.4em;">"ฮ่าๆ! เป็นคำตอบที่น่าประทับใจมาก!"</p> <p class="magician-voice" style="margin-top: 20px;">"เธอมีความเปล่งประกายในแบบของตัวเอง... จงใช้มันให้ดีล่ะ"</p> <p class="magician-voice" style="margin-top: 20px; color: #ffd740;">"เอาล่ะ! 'การแสดง' ของฉันจบแล้ว เชิญไปที่ 'เวที' ต่อไปได้เลย!"</p> <p style="font-size: 0.9em; color: #aaa; margin-top: 10px;">(แสงสปอตไลท์สาดส่องมาที่ผู้เล่นจนตาพร่า...)</p> </div> <div style="margin-top: 50px;"> <button class="magic-btn" onclick="warpNext()">อื้ม</button> </div> </div> </div> </div> <script> // *** แก้ไขตรงนี้: เปลี่ยนชื่อตัวแปรให้ไม่ซ้ำกับหน้าอื่น และใช้ window *** window.magicQuestions = [ { text: "1. ฉันเป็นคนที่...", options: [ { label: "ให้ความสำคัญกับความสัมพันธ์มากกว่าเป้าหมาย", type: 2 }, { label: "ให้ความสำคัญกับเป้าหมายมากกว่าความสัมพันธ์", type: 3 } ] }, { text: "2. เป็นเรื่องยากสำหรับฉันที่จะ...", options: [ { label: "เลิกคิดถึงทางเลือกอื่นแล้วลงมือทำอะไรที่ชัดเจนสักที", type: 6 }, { label: "ทำตัวสบายๆ และยืดหยุ่นให้มากขึ้น", type: 1 } ] }, { text: "3. โดยปกติแล้ว ฉัน...", options: [ { label: "สามารถเก็บความรู้สึกไว้ข้างๆ เพื่อทำงานให้เสร็จ", type: 3 }, { label: "ต้องจัดการกับความรู้สึกของตัวเองก่อนถึงจะลงมือทำได้", type: 4 } ] }, { text: "4. ฉันมักจะ...", options: [ { label: "เขินอายที่จะแสดงความสามารถของตัวเอง", type: 9 }, { label: "ชอบให้คนอื่นรู้ว่าฉันทำอะไรได้ดี", type: 3 } ] }, { text: "5. ความสำเร็จส่วนใหญ่ของฉัน...", options: [ { label: "เป็นเพราะความสามารถในการสร้างความประทับใจที่ดี", type: 3 }, { label: "สำเร็จได้แม้ว่าจะไม่สนใจพัฒนา \"ทักษะการเข้าสังคม\"", type: 5 } ] } ]; window.magicQIndex = 0; $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.magicQIndex = 0; // รีเซ็ตข้อสอบ $('#pre-phase').show(); $('#main-scene').hide(); }); window.startMagicScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_magic"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // --- TIMELINE --- setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 13000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 17000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 37000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); }); }, 47000); }); }; window.showQuestion = function() { // ใช้ตัวแปรเฉพาะของหน้านี้ if (window.magicQIndex >= window.magicQuestions.length) { endQuiz(); return; } var q = window.magicQuestions[window.magicQIndex]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.magicQIndex++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_magic"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("4"); }, 1500); }; </script> <style> /* --- Layout --- */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.1em; } .start-scene-btn { background: transparent; border: 1px solid #ba68c8; color: #ba68c8; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #ba68c8; color: #fff; box-shadow: 0 0 20px rgba(186, 104, 200, 0.5); } /* Backgrounds */ .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/69TxhYI.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } /* Spotlight Overlay: สร้างแสงส่องลงมาตรงกลาง */ .spotlight-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 10%, rgba(0,0,0,0.6) 80%); z-index: -1; pointer-events: none; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } /* --- Box Style (Magical Theater) --- */ .dialogue-box { width: 90%; max-width: 700px; /* พื้นหลังม่วงเข้ม ไล่เฉด */ background: linear-gradient(180deg, rgba(40, 10, 50, 0.95), rgba(20, 5, 25, 0.95)); border: 2px solid #ffd700; /* ขอบทอง */ border-radius: 8px; padding: 40px; text-align: center; color: #e0e0e0; box-shadow: 0 0 30px rgba(149, 117, 205, 0.3), inset 0 0 20px rgba(0,0,0,0.5); z-index: 5; margin: 20px auto; font-family: "Sarabun", sans-serif; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } /* Typography */ .theater-text { font-family: "Sarabun", serif; letter-spacing: 1px; } .magician-voice { color: #fff; font-weight: bold; font-size: 1.1em; text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .highlight-gold { color: #ffd700; font-weight: bold; text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); } /* Quiz */ .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #ce93d8; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: linear-gradient(90deg, #4a148c, #311b92); border: 1px solid #7e57c2; color: #ede7f6; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 4px; } .quiz-btn:hover { background: #673ab7; border-color: #ffd700; color: #fff; transform: translateX(5px); box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); } /* Button Outro */ .magic-btn { background: transparent; border: 2px solid #ffd700; color: #ffd700; padding: 10px 40px; font-size: 1.2em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 50px; } .magic-btn:hover { background: #ffd700; color: #2a0e42; box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); } /* Animation */ .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } /* Scrollbar */ .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #1a0020; } .scene-root::-webkit-scrollbar-thumb { background: #7b1fa2; border-radius: 3px; } </style>

<<audio "bgm_magic" stop>> <div id="p4-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px; color: #e1bee7;"> " การแสดงของเธอ น่าจดจำ... " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="window.startAdventureScene()">หากฉันเฉิดฉายเหมือนกับ....</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="leaf-container"> <div class="leaf"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div> </div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="nature-text"> <p class="fade-in-text" style="color: #a5d6a7;">คุณพบว่าตัวเองกำลังนั่งพักอยู่ใต้ร่มไม้ที่ให้ความรู้สึกโปร่งสบาย</p> <p class="fade-in-text" style="animation-delay: 3s;">แสงแดดอุ่นๆ ลอดผ่านใบไม้สีเขียวสดลงมาเป็นจุดๆ<br>ท้องฟ้าสีครามกว้างไกลไร้ขอบเขต</p> <p class="fade-in-text" style="animation-delay: 6s; color: #81d4fa;">ลมพัดเอื่อยๆ หอบเอากลิ่นหญ้าและเสียงนกร้องมาด้วย</p> <p class="fade-in-text" style="animation-delay: 9s; font-weight: bold; color: #fff;">ที่นี่คือจุดพักผ่อนชั่วคราวบนเส้นทางที่ไม่มีที่สิ้นสุด</p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p style="margin-bottom: 15px; font-size: 0.95em;"> <span class="highlight-green">"กวีพเนจร"</span> เอนกายนั่งพิงต้นไม้อย่างสบายอารมณ์ ในมือถือพิณคู่ใจ<br> ผมสีแดงสดใสของเธอสะท้อนแสงแดด เธอยิ้มร่าเริงพลางชี้นิ้วขึ้นไปบนฟ้า </p> <p style="font-style: italic; color: #5d4037; margin-bottom: 20px;"> ทักทายนกสหายร่วมทางที่กำลังร่อนลม<br>ทุกท่วงท่าของเธอดูผ่อนคลายและเต็มไปด้วยชีวิตชีวา </p> <p class="bard-voice">"ไง คุณนักเดินทางคนใหม่</p> <p class="bard-voice">"วันนี้ท้องฟ้าสวยดีนะ ผมกำลังคิดอยู่เลยล่ะ ว่าจะไปที่ไหนต่อดี..."</p> <hr style="border: 0; border-top: 1px dashed #8d6e63; width: 60%; margin: 15px auto;"> <p class="bard-voice"> "บางทีอาจจะข้ามภูเขาลูกนั้น หรือล่องเรือไปตามแม่น้ำสายโน้น<br> แต่ช่างเถอะ ปล่อยให้มันเป็นไปตาม จังหวะ ของมันดีกว่า" </p> </div> <div id="phase-3-text" class="hidden"> <p class="bard-voice" style="font-size: 1.1em;"> "การหยุดนิ่งนานๆ มันน่าเบื่อจะตาย... คุณว่าไหม?" </p> <p class="bard-voice" style="margin-top: 15px;"> "ผมอยากรู้จังว่าคุณเป็นนักผจญภัยแบบไหน ลองตอบคำถามเหล่านี้ให้ผมฟังหน่อยสิ" </p> <p style="margin-top: 25px; font-style: italic; color: #795548;"> (เธอยื่นกระดาษแผ่นเล็กที่ดูเหมือนฉีกมาจากสมุดบันทึกการเดินทางให้คุณ) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden" style="z-index: 20; position: relative;"> <div class="nature-text"> <p class="bard-voice" style="font-size: 1.3em; color: #ffcc80;">"โอ้! แบบนี้นี่เอง! คำตอบของเธอน่าสนใจจัง!"</p> <p class="bard-voice" style="margin-top: 15px;">"ดีเลย! จะได้รู้ว่าการผจญภัยแบบไหนที่เหมาะกับเธอ"</p> <p class="bard-voice" style="margin-top: 25px; font-weight: 900; font-size: 1.4em; color: #69f0ae;"> "เอาล่ะ! อย่าช้าอยู่เลย... การผจญภัยครั้งต่อไปรออยู่! ไปเลย!" </p> <p style="font-size: 0.9em; color: #b0bec5; margin-top: 10px;">(เธอดดีดพิณเป็นทำนองที่สนุกสนาน...)</p> </div> <div style="margin-top: 50px;"> <button class="adventure-btn" onclick="window.warpNext()">ฉันต้องผจญภัย</button> </div> </div> </div> </div> <script> // *** แก้ชื่อตัวแปร *** window.q4Questions = [ { text: "1. ฉันเป็นคนที่...", options: [ { label: "ช่างฝันและเต็มไปด้วยจินตนาการ", type: 4 }, { label: "เน้นปฏิบัติและอยู่กับความเป็นจริง/ติดดิน", type: 1 } ] }, { text: "2. ฉันมีแนวโน้มที่จะเป็นคน...", options: [ { label: "มุ่งมั่นและจริงจัง", type: 5 }, { label: "เป็นไปตามธรรมชาติและรักสนุก", type: 7 } ] }, { text: "3. เมื่อเจอกับประสบการณ์ใหม่ๆ ฉันมักจะถามตัวเองว่ามันจะ...", options: [ { label: "มีประโยชน์กับฉัน", type: 3 }, { label: "น่าสนุก", type: 7 } ] }, { text: "4. ฉันมักจะกังวลว่า...", options: [ { label: "ฉันกำลังพลาดอะไรที่ดีกว่าไป", type: 7 }, { label: "ถ้าฉันลดการป้องกันลง จะมีคนมาเอาเปรียบฉัน", type: 8 } ] } ]; window.q4Index = 0; $(document).one(':passagedisplay', function() { $('body, html').css({'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000'}); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.q4Index = 0; $('#pre-phase').show(); $('#main-scene').hide(); }); window.startAdventureScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_adventure"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 13000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 17000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 37000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); }); }, 47000); }); }; window.showQuestion = function() { if (window.q4Index >= window.q4Questions.length) { window.endQuiz(); return; } var q = window.q4Questions[window.q4Index]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.q4Index++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_adventure"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("5"); }, 1500); }; </script> <style> /* CSS เดิม */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.1em; } .start-scene-btn { background: transparent; border: 1px solid #81d4fa; color: #81d4fa; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #81d4fa; color: #000; box-shadow: 0 0 20px rgba(129, 212, 250, 0.5); } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/vMZ5Em7.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } .leaf-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; } .leaf { position: absolute; background-color: #c5e1a5; border-radius: 5px 50px; opacity: 0.7; width: 15px; height: 15px; animation: fall-leaf linear infinite; } .leaf:nth-child(3n) { background-color: #fff59d; } .leaf:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; } .leaf:nth-child(2) { left: 25%; animation-duration: 15s; animation-delay: 2s; width: 10px; height: 10px; } .leaf:nth-child(3) { left: 40%; animation-duration: 10s; animation-delay: 4s; } .leaf:nth-child(4) { left: 55%; animation-duration: 18s; animation-delay: 1s; width: 12px; height: 12px;} .leaf:nth-child(5) { left: 70%; animation-duration: 14s; animation-delay: 3s; } .leaf:nth-child(6) { left: 85%; animation-duration: 16s; animation-delay: 0.5s; width: 8px; height: 8px;} .leaf:nth-child(7) { left: 95%; animation-duration: 11s; animation-delay: 2.5s; } @keyframes fall-leaf { 0% { top: -10%; transform: translateX(0) rotate(0deg); } 50% { transform: translateX(50px) rotate(180deg); } 100% { top: 110%; transform: translateX(-20px) rotate(360deg); } } .dialogue-box { width: 90%; max-width: 700px; background: rgba(255, 252, 240, 0.95); border: 1px solid #8d6e63; border-radius: 5px; padding: 40px; text-align: center; color: #3e2723; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 5; margin: 20px auto; font-family: "Sarabun", sans-serif; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } .nature-text { font-family: "Sarabun", serif; letter-spacing: 0.5px; } .bard-voice { color: #e65100; font-weight: bold; font-size: 1.1em; line-height: 1.5; } .highlight-green { color: #2e7d32; font-weight: bold; } .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #5d4037; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: #fff; border: 1px solid #a1887f; color: #4e342e; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 2px; box-shadow: 2px 2px 0 #d7ccc8; } .quiz-btn:hover { background: #ffe0b2; border-color: #ff9800; transform: translateY(-2px); } .adventure-btn { background: #4caf50; border: none; color: #fff; padding: 10px 40px; font-size: 1.2em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 50px; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); } .adventure-btn:hover { background: #43a047; transform: scale(1.05); box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6); } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #1b5e20; } .scene-root::-webkit-scrollbar-thumb { background: #81c784; border-radius: 3px; } </style>

<<audio "bgm_adventure" stop>> <div id="p5-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px; color: #90a4ae;"> " ท้องฟ้าเมื่อครู่ทำให้ฉันลืมอะไรบางอย่างไปเลย... " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="window.startGuardianScene()">ถ้าตอนนั้น .. ฉันโบยบินได้ล่ะก็ ..</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="wind-container"> <div class="wind-line"></div><div class="wind-line"></div> <div class="wind-line"></div><div class="wind-line"></div> </div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="plain-text"> <p class="fade-in-text">คุณเดินมาถึงทุ่งหญ้ากว้างใหญ่ที่ดูสงบสุขอย่างน่าประหลาด</p> <p class="fade-in-text" style="animation-delay: 3s;"> ท้องฟ้าสีครามสดใสและสายลมพัดเบาๆ ทำให้ใบไม้ปลิวไสว<br> แต่ท่ามกลางความสงบนี้ กลับมี <span style="color:#b0bec5; font-weight:bold;">เสาหินเก่าแก่</span> ตั้งอยู่ประปราย </p> <p class="fade-in-text" style="animation-delay: 7s; color: #ef9a9a;"> คล้ายเป็นแนวเขตแดนที่ถูกลืมเลือน... ทำให้บรรยากาศมีความตึงเครียดซ่อนอยู่ </p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p style="margin-bottom: 15px; font-size: 0.95em; color: #eceff1;"> <span class="highlight-red">"ผู้พิทักษ์ป้อมปราการ"</span> ยืนเฝ้าระวังอยู่เพียงลำพัง ชุดเกราะบางส่วนสะท้อนแสงแดด<br> ตัดกับโบว์สีแดงสดและเรือนผมสีดำขลับ เธอกำโล่ไว้ในมือ </p> <p style="font-style: italic; color: #b0bec5; margin-bottom: 20px; font-size: 0.9em;"> แม้จะดูเหมือนไม่มีภัยคุกคามใดๆ รอบตัว แต่ดวงตาของเธอกลับฉายแวววิตกกังวลอย่างชัดเจน<br> ราวกับกำลังคาดการณ์ถึงอันตรายที่อาจเกิดขึ้นได้ทุกเมื่อ </p> <hr style="border: 0; border-top: 2px solid #546e7a; width: 100%; margin: 20px auto;"> <p class="guardian-voice" style="font-size: 1.3em;">"เดี๋ยวก่อน!"</p> <p class="guardian-voice">"คุณเป็นใคร? เข้ามาในเขตนี้ต้องการอะไร?"</p> <p style="margin-top: 15px; color: #cfd8dc;">(เธอขยับโล่มาป้องกันด้านหน้าเล็กน้อย)</p> <p class="guardian-voice" style="margin-top: 10px;"> "อย่าเพิ่งขยับ... ที่นี่อาจจะดูสงบ แต่คุณไม่มีทางรู้หรอกว่าอะไรจะเกิดขึ้น<br> ฉันต้องระมัดระวังอยู่เสมอเพื่อความปลอดภัย... เพื่อปกป้องสิ่งที่สำคัญ" </p> </div> <div id="phase-3-text" class="hidden"> <p class="guardian-voice" style="font-size: 1.1em; border-left: 3px solid #ef5350; padding-left: 15px;"> "ฉันจะไว้ใจคุณได้ยังไง? ฉันต้องแน่ใจก่อน...<br> ได้โปรด ช่วยบอกฉันทีว่าคุณเป็นคนแบบไหน" </p> <p style="margin-top: 20px; font-style: italic; color: #90a4ae;"> (เธอยื่นแผ่นกระดาษที่พับไว้อย่างเป็นระเบียบให้คุณ) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden" style="z-index: 20; position: relative;"> <div class="plain-text"> <p class="guardian-voice">"อืม... ฉันได้รับคำตอบของเธอแล้ว"</p> <p class="guardian-voice" style="margin-top: 15px;">"ขอบคุณนะ... อย่างน้อยข้อมูลนี้ก็ช่วยให้ฉันเตรียมตัวได้"</p> <div style="margin-top: 25px; padding: 15px; background: rgba(255,255,255,0.05); border-radius: 8px;"> <p class="guardian-voice" style="color: #ffcdd2;">"เธอไปต่อเถอะ... แต่ไม่ว่าจะไปที่ไหน... ก็จงระวังตัวไว้เสมอล่ะ"</p> </div> <p style="font-size: 0.9em; color: #b0bec5; margin-top: 20px;"> (เธอชูโล่ขึ้น และสัญลักษณ์บนโล่ก็ส่องแสงนำทางคุณไป...) </p> </div> <div style="margin-top: 40px;"> <button class="shield-btn" onclick="window.warpNext()">ขอบคุณที่เตือนนะ</button> </div> </div> </div> </div> <script> // *** แก้ชื่อตัวแปร *** window.q5Questions = [ { text: "1. ฉันดูเป็นคนที่...มากเกินไป", options: [ { label: "ไม่มั่นใจในตัวเอง", type: 6 }, { label: "มั่นใจในตัวเอง", type: 3 } ] }, { text: "2. โดยทั่วไปแล้วฉันเป็นคน...", options: [ { label: "เป็นระบบและรอบคอบ", type: 6 }, { label: "ชอบผจญภัยและกล้าเสี่ยง", type: 7 } ] }, { text: "3. ฉัน...", options: [ { label: "พึ่งพาเพื่อนและพวกเขาก็รู้ว่าพึ่งพาฉันได้", type: 6 }, { label: "ไม่พึ่งพาใคร ฉันทำทุกอย่างด้วยตัวเอง", type: 5 } ] }, { text: "4. ...สำคัญกับฉันมากกว่า...", options: [ { label: "การไล่ตามความสนใจส่วนตัวสำคัญกับฉันมากกว่าการมีชีวิตที่สุขสบายและมั่นคง", type: 7 }, { label: "การมีชีวิตที่สุขสบายและมั่นคงสำคัญกับฉันมากกว่าการไล่ตามความสนใจส่วนตัว", type: 6 } ] } ]; window.q5Index = 0; $(document).one(':passagedisplay', function() { $('body, html').css({'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000'}); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.q5Index = 0; $('#pre-phase').show(); $('#main-scene').hide(); }); window.startGuardianScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_guardian"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 13000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 17000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 35000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); }); }, 43000); }); }; window.showQuestion = function() { if (window.q5Index >= window.q5Questions.length) { window.endQuiz(); return; } var q = window.q5Questions[window.q5Index]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.q5Index++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_guardian"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("6"); }, 1500); }; </script> <style> /* CSS เดิม */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.1em; } .start-scene-btn { background: transparent; border: 1px solid #90a4ae; color: #90a4ae; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #90a4ae; color: #000; box-shadow: 0 0 20px rgba(144, 164, 174, 0.5); } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/5WaN94k.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } .wind-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; } .wind-line { position: absolute; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); height: 1px; width: 200px; animation: wind-blow 3s linear infinite; opacity: 0; } .wind-line:nth-child(1) { top: 20%; left: -200px; animation-delay: 0s; } .wind-line:nth-child(2) { top: 40%; left: -200px; animation-delay: 1.5s; width: 300px; } .wind-line:nth-child(3) { top: 60%; left: -200px; animation-delay: 0.5s; } .wind-line:nth-child(4) { top: 80%; left: -200px; animation-delay: 2s; width: 150px; } @keyframes wind-blow { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(120vw); opacity: 0; } } .dialogue-box { width: 90%; max-width: 700px; background: rgba(38, 50, 56, 0.95); border: 1px solid #78909c; border-left: 5px solid #ef5350; border-radius: 2px; padding: 40px; text-align: center; color: #e0e0e0; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 5; margin: 20px auto; font-family: "Sarabun", sans-serif; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } .plain-text { font-family: "Sarabun", serif; letter-spacing: 0.5px; } .guardian-voice { color: #fff; font-weight: bold; font-size: 1.1em; line-height: 1.5; text-shadow: 0 2px 2px rgba(0,0,0,0.5); } .highlight-red { color: #ef5350; font-weight: bold; } .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #b0bec5; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: #37474f; border: 1px solid #546e7a; color: #eceff1; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 0; } .quiz-btn:hover { background: #455a64; border-color: #ef5350; transform: translateX(5px); } .shield-btn { background: transparent; border: 2px solid #ef5350; color: #ef5350; padding: 10px 40px; font-size: 1.2em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 4px; } .shield-btn:hover { background: #ef5350; color: #fff; box-shadow: 0 0 20px rgba(239, 83, 80, 0.6); } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #263238; } .scene-root::-webkit-scrollbar-thumb { background: #78909c; border-radius: 3px; } </style>

<<audio "bgm_guardian" stop>> <div id="p6-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px; color: #e0f2f1;"> " ความกังวลของเธอ ฉันเองก็เคยเผชิญเหมือนกัน... " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="window.startHealerScene()">หากฉันสามารถเอามันออกไปได้..</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="butterfly-container"> <div class="butterfly"></div><div class="butterfly"></div><div class="butterfly"></div><div class="butterfly"></div><div class="butterfly"></div><div class="butterfly"></div> </div> <div class="holy-light"></div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="garden-text"> <p class="fade-in-text">คุณก้าวเข้ามาในสวนหลวงที่อาบไปด้วยแสงสีนวลตา<br>ที่ดูราวกับไม่ใช่แสงตะวันธรรมดา</p> <p class="fade-in-text" style="animation-delay: 3s; color: #b9f6ca;"> ใบไม้สีเขียวอ่อนทอดเงาลงบนพื้นอย่างนุ่มนวล<br>ผีเสื้อสีขาวบินว่อนไปมารอบๆ และในม่านแสงสว่างเบื้องหลัง </p> <p class="fade-in-text" style="animation-delay: 7s; font-weight: bold; color: #fff;"> ที่นี่คือสถานที่แห่งการเยียวยาที่เต็มไปด้วยความสงบและบริสุทธิ์ </p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p style="margin-bottom: 15px; font-size: 0.95em; color: #004d40;"> <span class="highlight-mint">"ผู้เยียวยาแห่งราชสำนัก"</span> ยืนรอคุณอยู่ด้วยท่าทีสง่างามในชุดสีเขียวมินต์และขาวสะอาด<br> เครื่องประดับศีรษะของเธอบ่งบอกถึงตำแหน่งในราชสำนัก </p> <p style="font-style: italic; color: #455a64; margin-bottom: 20px; font-size: 0.9em;"> เธอหันมามองคุณด้วยรอยยิ้มที่อบอุ่นและสายตาที่เปี่ยมไปด้วยความห่วงใย<br> ก่อนจะยื่นมือขวาออกมาหาคุณในท่าทีเชื้อเชิญและพร้อมที่จะช่วยเหลือ </p> <hr style="border: 0; border-top: 1px solid rgba(165, 214, 167, 0.5); width: 70%; margin: 15px auto;"> <p class="healer-voice">"คุณมาถึงแล้ว... บาดเจ็บตรงไหนหรือเปล่าคะ?"</p> <p class="healer-voice">“หน้าที่ของฉันคือการดูแลทุกคนในที่แห่งนี้"</p> <p class="healer-voice" style="margin-top: 10px; color: #69f0ae;">"ไม่ต้องกังวลนะคะ อยู่ที่นี่คุณจะปลอดภัย"</p> </div> <div id="phase-3-text" class="hidden"> <p class="healer-voice" style="font-size: 1.1em;"> "การได้เห็นคนอื่นมีความสุขและมีสุขภาพที่ดี คือความสุขที่สุดของฉันแล้วล่ะค่ะ...<br> แต่ฉันก็อยากจะรู้จักคุณให้มากขึ้น" </p> <p class="healer-voice" style="margin-top: 15px;"> "คุณช่วยบอกฉันเกี่ยวกับตัวคุณหน่อยได้ไหมคะ?<br>ฉันแค่อยาก... เข้าใจ... และรู้ว่าฉันจะช่วยอะไรคุณได้บ้าง" </p> <p style="margin-top: 20px; font-style: italic; color: #546e7a; font-size: 0.9em;"> (เธอยื่นม้วนกระดาษที่ผูกด้วยริบบิ้นสีเขียวอ่อนให้คุณอย่างแผ่วเบา) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden" style="z-index: 20; position: relative;"> <div class="garden-text"> <p style="font-style: italic; color: #b2dfdb; margin-bottom: 20px;">(ยิ้มรับอย่างอบอุ่น)</p> <p style="color: #e0f2f1; font-weight: bold; font-size: 1.2em;">"ขอบคุณนะคะที่แบ่งปันเรื่องราวของคุณ...<br>การได้เข้าใจคุณ ทำให้ฉันรู้สึกยินดีมากค่ะ"</p> <p style="color: #e0f2f1; font-weight: bold; margin-top: 15px;">"ไม่ว่าคุณจะเป็นใคร อย่าลืมดูแลตัวเองให้ดีๆ เหมือนที่คุณดูแลคนอื่นนะคะ"</p> <div style="margin-top: 25px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 50px;"> <p style="color: #fff; font-weight: bold;">"ฉันจะส่งคุณไปยังที่ต่อไป... ขอให้การเดินทางของคุณปลอดภัยค่ะ"</p> </div> <p style="font-size: 0.9em; color: #80cbc4; margin-top: 20px;"> (แสงสว่างสีนวลตาจากร่างของกวางศักดิ์สิทธิ์สาดส่องมาที่คุณ...) </p> </div> <div style="margin-top: 40px;"> <button class="heal-btn" onclick="window.warpNext()">ฉันได้รับการเยียวยา..</button> </div> </div> </div> </div> <script> // *** แก้ชื่อตัวแปร *** window.q6Questions = [ { text: "1. ฉันมีแนวโน้มที่จะให้ความสำคัญกับ...มากเกินไป", options: [ { label: "ตัวเอง", type: 4 }, { label: "คนอื่น", type: 2 } ] }, { text: "2. ...ของฉันทำให้ฉันมีปัญหากับคนอื่น", options: [ { label: "ความลังเลที่จะเข้าไปพัวพันมากเกินไป", type: 5 }, { label: "ความกระตือรือร้นที่อยากให้คนอื่นพึ่งพา", type: 2 } ] }, { text: "3. ฉันเป็นคนที่...เกินไป", options: [ { label: "หัวแข็งและขี้สงสัย", type: 6 }, { label: "ใจอ่อนและอ่อนไหว", type: 4 } ] }, { text: "4. ฉันชอบที่จะ...", options: [ { label: "ท้าทายผู้คนและ \"เขย่า\" พวกเขา", type: 8 }, { label: "ปลอบโยนผู้คนและทำให้พวกเขาสงบลง", type: 9 } ] }, { text: "5. ฉันมักจะได้รับการชื่นชมในเรื่อง...", options: [ { label: "จิตใจที่ไม่เคยยอมแพ้และอารมณ์ขันที่ยอดเยี่ยม", type: 7 }, { label: "ความแข็งแกร่งที่เงียบขรึมและความเอื้อเฟื้อเผื่อแผ่ที่ไม่ธรรมดา", type: 2 } ] } ]; window.q6Index = 0; $(document).one(':passagedisplay', function() { $('body, html').css({'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000'}); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.q6Index = 0; $('#pre-phase').show(); $('#main-scene').hide(); }); window.startHealerScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_healer"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 13000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 17000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 35000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); }); }, 43000); }); }; window.showQuestion = function() { if (window.q6Index >= window.q6Questions.length) { window.endQuiz(); return; } var q = window.q6Questions[window.q6Index]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.q6Index++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_healer"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("7"); }, 1500); }; </script> <style> /* CSS เดิม */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.1em; } .start-scene-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid #a5d6a7; color: #a5d6a7; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #a5d6a7; color: #000; box-shadow: 0 0 15px rgba(165, 214, 167, 0.5); } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/NYCPGDC.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } .holy-light { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%); z-index: -1; pointer-events: none; animation: pulseLight 4s infinite alternate; } .butterfly-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; } .butterfly { position: absolute; background: rgba(255,255,255,0.8); width: 6px; height: 6px; border-radius: 50%; box-shadow: 4px -4px 0 rgba(255,255,255,0.8), -4px -4px 0 rgba(255,255,255,0.8); animation: flutter 10s infinite linear; opacity: 0.6; } .butterfly:nth-child(1) { top: 80%; left: 10%; animation-duration: 12s; animation-delay: 0s; } .butterfly:nth-child(2) { top: 60%; left: 30%; animation-duration: 15s; animation-delay: 2s; } .butterfly:nth-child(3) { top: 70%; left: 70%; animation-duration: 10s; animation-delay: 5s; } .butterfly:nth-child(4) { top: 90%; left: 50%; animation-duration: 18s; animation-delay: 1s; } @keyframes flutter { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translate(100px, -500px) scale(0.5); opacity: 0; } } @keyframes pulseLight { 0% { opacity: 0.5; } 100% { opacity: 1; } } .dialogue-box { width: 90%; max-width: 700px; background: rgba(240, 255, 240, 0.95); border: 1px solid #a5d6a7; border-radius: 20px; padding: 40px; text-align: center; color: #004d40; box-shadow: 0 0 40px rgba(165, 214, 167, 0.3); z-index: 5; margin: 20px auto; font-family: "Sarabun", sans-serif; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } .garden-text { font-family: "Sarabun", serif; letter-spacing: 0.5px; } .healer-voice { color: #006064; font-weight: bold; font-size: 1.1em; line-height: 1.6; } .highlight-mint { color: #00897b; font-weight: bold; } .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #00695c; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: #fff; border: 1px solid #81c784; color: #1b5e20; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 10px; } .quiz-btn:hover { background: #e8f5e9; border-color: #00e676; transform: translateY(-2px); } .heal-btn { background: #66bb6a; border: none; color: #fff; padding: 12px 40px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 50px; box-shadow: 0 4px 15px rgba(102, 187, 106, 0.4); } .heal-btn:hover { background: #81c784; transform: scale(1.05); box-shadow: 0 6px 20px rgba(102, 187, 106, 0.6); } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #1b5e20; } .scene-root::-webkit-scrollbar-thumb { background: #a5d6a7; border-radius: 3px; } </style>

<<audio "bgm_healer" stop>> <div id="p7-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px; color: #b0bec5;"> " ในวันที่บอบช้ำ.. ฉันยังได้รับการเยียวยา... " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="window.startSeekerScene()">ถ้าฉันทำแบบนั้น..</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="firefly-container"> <div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div> </div> <div class="moonlight-overlay"></div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="mystery-text"> <p class="fade-in-text" style="color: #eceff1;">คุณหลงเข้ามาในสวนต้องห้ามยามค่ำคืน ภายใต้แสงจันทร์สลัว</p> <p class="fade-in-text" style="animation-delay: 3s; color: #b3e5fc;"> มีเพียงกุหลาบสีขาวและผีเสื้อเรืองแสงที่ส่องสว่างนำทาง </p> <p class="fade-in-text" style="animation-delay: 6s; color: #90caf9;"> อากาศรอบตัวเงียบสงัดและเย็นเยียบ...<br> ราวกับว่าที่แห่งนี้ได้เก็บงำความลับโบราณไว้มากมาย </p> <p class="fade-in-text" style="animation-delay: 9s; font-style: italic; opacity: 0.8;"> มันเป็นสถานที่ที่ตัดขาดจากโลกภายนอก </p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p style="margin-bottom: 15px; font-size: 0.95em; color: #cfd8dc;"> ท่ามกลางเถาวัลย์กุหลาบ <span class="highlight-silver">"ผู้แสวงหาตำนาน"</span> ปรากฏตัวขึ้น<br> เรือนผมสีเงินยาวสลวยของเธอดูโดดเด่นในความมืด </p> <hr style="border: 0; border-top: 1px solid rgba(176, 190, 197, 0.3); width: 50%; margin: 20px auto;"> <p class="seeker-voice">"เธอมาหาความรู้... หรือแค่หลงทางกันนะ?"</p> <p class="seeker-voice" style="margin-top: 15px;"> "ที่นี่ไม่ใช่ที่สำหรับทุกคนหรอก... <br>มันสำหรับผู้ที่ต้องการ <span style="color:#81d4fa;">ความเข้าใจ</span> เท่านั้น" </p> </div> <div id="phase-3-text" class="hidden"> <p class="seeker-voice" style="font-size: 1.1em;"> "ข้าไม่สนใจเรื่องผิวเผิน... ข้าสนใจสิ่งที่อยู่ข้างในความคิด" </p> <p class="seeker-voice" style="margin-top: 15px;"> "ข้าอยากรู้ว่ากลไกความคิดของเธอเป็นเช่นไร...<br>เอาล่ะ เพื่อรวบรวมข้อมูล <span style="color:#fff; text-shadow: 0 0 10px #fff;">ตอบมาสิ</span>" </p> <p style="margin-top: 25px; font-style: italic; color: #b0bec5; font-size: 0.9em;"> (ผีเสื้อเรืองแสงตัวหนึ่งบินมาเกาะที่มือคุณ ทิ้งม้วนกระดาษเล็กๆ ไว้) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden" style="z-index: 20; position: relative;"> <div class="mystery-text"> <p class="seeker-voice" style="font-size: 1.2em;">"ข้อมูลน่าสนใจมาก... ข้าจะบันทึกคำตอบของเธอไว้ในตำราของข้า"</p> <p class="seeker-voice" style="margin-top: 15px; color: #b0bec5;"> "ดูเหมือนว่าโลกภายนอกยังมีอะไรให้ข้าค้นคว้าอีกมาก" </p> <div style="margin-top: 30px; border-left: 3px solid #90caf9; padding-left: 15px; display: inline-block; text-align: left;"> <p class="seeker-voice" style="font-style: italic;"> "ไปเถอะ... ข้าจะเปิดทางลัดให้<br>แต่จงอย่ารบกวนความเงียบของที่นี่อีก" </p> </div> </div> <div style="margin-top: 50px;"> <button class="knowledge-btn" onclick="window.warpNext()">ฉันเองก็จะออกค้นคว้า บางทีนะ</button> </div> </div> </div> </div> <script> // *** แก้ชื่อตัวแปร *** window.q7Questions = [ { text: "1. ฉันเป็น...", options: [ { label: "คนมีอัธยาศัยดีและชอบต้อนรับเพื่อนใหม่ๆ เข้ามาในชีวิต", type: 2 }, { label: "คนรักสันโดษและไม่ค่อยสุงสิงกับใคร", type: 5 } ] }, { text: "2. ฉัน...", options: [ { label: "ต้องการแสดงความรักต่อผู้คน", type: 2 }, { label: "ชอบรักษาระยะห่างกับผู้คน", type: 5 } ] }, { text: "3. นิสัยที่...ของฉันทำให้คนอื่นรำคาญ", options: [ { label: "ทำตัว \"ห่างเหิน\"", type: 5 }, { label: "บอกคนอื่นว่าต้องทำอะไร", type: 8 } ] }, { text: "4. ฉันมีแนวโน้มที่จะ...", options: [ { label: "ไม่ผูกพันและใจลอย", type: 5 }, { label: "เจ้าอารมณ์และหมกมุ่นกับตัวเอง", type: 4 } ] } ]; window.q7Index = 0; $(document).one(':passagedisplay', function() { $('body, html').css({'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000'}); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.q7Index = 0; $('#pre-phase').show(); $('#main-scene').hide(); }); window.startSeekerScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_seeker"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 13000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 17000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 29000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); }); }, 37000); }); }; window.showQuestion = function() { if (window.q7Index >= window.q7Questions.length) { window.endQuiz(); return; } var q = window.q7Questions[window.q7Index]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.q7Index++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_seeker"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("8"); }, 1500); }; </script> <style> /* CSS เดิม */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.1em; } .start-scene-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid #90caf9; color: #90caf9; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #90caf9; color: #000; box-shadow: 0 0 20px rgba(144, 202, 249, 0.4); } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/BMZtLVZ.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } .moonlight-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(20, 30, 48, 0.6), rgba(0,0,0,0.2)); z-index: -1; pointer-events: none; } .firefly-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; } .firefly { position: absolute; background: #81d4fa; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 10px #4fc3f7, 0 0 20px #03a9f4; animation: float-firefly 8s infinite ease-in-out; opacity: 0; } .firefly:nth-child(1) { top: 80%; left: 20%; animation-duration: 10s; animation-delay: 0s; } .firefly:nth-child(2) { top: 60%; left: 80%; animation-duration: 15s; animation-delay: 2s; } .firefly:nth-child(3) { top: 40%; left: 40%; animation-duration: 12s; animation-delay: 4s; } .firefly:nth-child(4) { top: 20%; left: 70%; animation-duration: 18s; animation-delay: 1s; } .firefly:nth-child(5) { top: 90%; left: 10%; animation-duration: 20s; animation-delay: 3s; } @keyframes float-firefly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translate(50px, -100px); opacity: 0; } } .dialogue-box { width: 90%; max-width: 700px; background: rgba(15, 25, 35, 0.9); backdrop-filter: blur(5px); border: 1px solid #546e7a; border-radius: 8px; padding: 40px; text-align: center; color: #cfd8dc; box-shadow: 0 0 20px rgba(2, 119, 189, 0.2); z-index: 5; margin: 20px auto; font-family: "Sarabun", sans-serif; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } .mystery-text { font-family: "Sarabun", serif; letter-spacing: 0.5px; } .seeker-voice { color: #e1f5fe; font-weight: bold; font-size: 1.1em; line-height: 1.6; text-shadow: 0 0 5px rgba(129, 212, 250, 0.3); } .highlight-silver { color: #b0bec5; font-weight: bold; text-shadow: 0 0 5px rgba(255,255,255,0.4); } .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #90caf9; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: rgba(255,255,255,0.05); border: 1px solid #546e7a; color: #eceff1; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 4px; } .quiz-btn:hover { background: rgba(3, 169, 244, 0.1); border-color: #4fc3f7; transform: translateY(-2px); } .knowledge-btn { background: transparent; border: 2px solid #90caf9; color: #90caf9; padding: 12px 40px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 2px; } .knowledge-btn:hover { background: #90caf9; color: #0d47a1; box-shadow: 0 0 20px rgba(144, 202, 249, 0.6); } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #0d1b2a; } .scene-root::-webkit-scrollbar-thumb { background: #546e7a; border-radius: 3px; } </style>

<<audio "bgm_seeker" stop>> <div id="p8-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px; color: #b0bec5;"> " ฉันไม่แน่ใจว่าฉันจะเข้ากับความเงียบได้ไหม.. " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="window.startKnightScene()">ถ้าฉันไม่พูดอะไรออกไปเลยล่ะก็...</button> </div> </div> <div id="main-scene" class="hidden"> <div id="bg-layer" class="bg-layer"></div> <div class="feather-container"> <div class="feather"></div><div class="feather"></div><div class="feather"></div><div class="feather"></div><div class="feather"></div><div class="feather"></div><div class="feather"></div><div class="feather"></div><div class="feather"></div> </div> <div id="black-curtain" class="black-curtain"></div> <div id="flash-overlay" class="flash-overlay"></div> <div id="phase-1" class="story-text-center hidden"> <div class="sky-text"> <p class="fade-in-text">คุณพบว่าตัวเองมายืนอยู่บนที่โล่งกว้าง<br>ท่ามกลางท้องฟ้าสีครามสดใส</p> <p class="fade-in-text" style="animation-delay: 3s; color: #ffcdd2;"> สายลมที่นี่พัดแรงทำให้ผ้าคลุมสีแดงผืนใหญ่<br>ด้านหลังอัศวินผู้นั้นปลิวไสว </p> <p class="fade-in-text" style="animation-delay: 7s; color: #e1f5fe;"> ขนนกสีขาวลอยล่องผ่านไปมา<br>ราวกับคุณกำลังยืนอยู่บนยอดเขาหรือบนปุยเมฆ </p> </div> </div> <div id="dialogue-container" class="dialogue-box hidden"> <div id="phase-2-text"> <p style="margin-bottom: 15px; font-size: 0.95em; color: #eceff1;"> <span class="highlight-crimson">"อัศวินพเนจร"</span> ยืนตระหง่านในท่าเตรียมพร้อม<br> ผมสีชมพูยาวสลวยของเขาพลิ้วไสวไปตามแรงลม </p> <p style="font-style: italic; color: #b0bec5; margin-bottom: 20px; font-size: 0.9em;"> ชุดเกราะเบาสะท้อนแสงแดด มือข้างหนึ่งถือดาบเรเปียร์ชี้ตรงมาที่คุณ </p> <hr style="border: 0; border-top: 2px solid #fff; width: 100%; margin: 20px auto;"> <p class="knight-voice" style="font-size: 1.3em;">"หยุดอยู่ตรงนั้น"</p> <p class="knight-voice"> "ข้าคืออัศวินผู้แสวงหา <span style="color:#4fc3f7;">'ความถูกต้อง'</span><br> และข้าไม่สามารถปล่อยให้ความไม่สมบูรณ์แบบผ่านไปได้" </p> </div> <div id="phase-3-text" class="hidden"> <p class="knight-voice" style="font-size: 1.1em;"> "โลกนี้เต็มไปด้วยจุดบกพร่อง<br>และมันคือหน้าที่ของเราที่จะแก้ไขมันให้ดีที่สุด" </p> <p class="knight-voice" style="margin-top: 15px; color: #b3e5fc;"> "ก่อนท่านจะไปต่อ ข้าต้องพิสูจน์อุดมการณ์ของท่าน...<br>แสดงให้ข้าเห็นว่าท่านมี <u>มาตรฐานที่คู่ควร</u> หรือไม่" </p> <p style="margin-top: 20px; font-style: italic; color: #90a4ae; font-size: 0.9em;"> (เธอสะบัดดาบเบาๆ และม้วนกระดาษที่ถูกมัดไว้อย่างเป็นระเบียบก็ลอยมาตรงหน้าคุณ) </p> </div> <div id="quiz-area" class="hidden"> <div id="question-text" class="question-header"></div> <div id="options-container" class="options-list"></div> </div> </div> <div id="phase-outro" class="story-text-center hidden" style="z-index: 20; position: relative;"> <div class="sky-text"> <p class="knight-voice">"คำตอบของท่านแสดงให้เห็นถึงหลักการที่ชัดเจน"</p> <p class="knight-voice" style="margin-top: 15px;">"ไม่ว่าจะเลือกเส้นทางไหน จงยึดมั่นในความถูกต้อง...<br>อย่าให้ความไม่สมบูรณ์แบบมาครอบงำ"</p> <div style="margin-top: 30px; padding: 15px; border: 1px solid #fff; display: inline-block;"> <p class="knight-voice" style="font-weight: 900; color: #4fc3f7;">"ไปเถอะ ถึงเวลาของเจ้าแล้ว"</p> </div> <p style="font-size: 0.9em; color: #b0bec5; margin-top: 20px;"> (เธอสะบัดดาบเป็นวง สร้างช่องว่างมิติขึ้นเบื้องหน้า และคุณก็ถูกดึงเข้าไปในนั้น) </p> </div> <div style="margin-top: 40px;"> <button class="wing-btn" onclick="window.warpNext()">เวลาของฉันงั้นเหรอ..?</button> </div> </div> </div> </div> <script> // *** แก้ชื่อตัวแปร *** window.q8Questions = [ { text: "1. โดยปกติแล้วฉันเป็นคน...", options: [ { label: "มีวาทศิลป์ มีเสน่ห์ และทะเยอทะยาน", type: 3 }, { label: "ตรงไปตรงมา เป็นทางการ และยึดมั่นในอุดมการณ์", type: 1 } ] }, { text: "2. ฉันเป็นพวก...", options: [ { label: "ผู้รอดชีวิตที่ \"ฉลาดเอาตัวรอด\"", type: 8 }, { label: "นักอุดมคติที่ \"สูงส่ง\"", type: 1 } ] }, { text: "3. ฉันมีแนวโน้มที่จะเป็น...", options: [ { label: "คนที่คอยสนับสนุน ให้ และชอบอยู่กับคนอื่น", type: 2 }, { label: "คนจริงจัง เก็บตัว และชอบพูดคุยในประเด็นต่างๆ", type: 5 } ] }, { text: "4. ฉันมักจะรู้สึกว่าต้อง...", options: [ { label: "เป็น \"ที่พึ่งที่แข็งแกร่ง\"", type: 8 }, { label: "ทำให้สมบูรณ์แบบ", type: 1 } ] }, { text: "5. โดยทั่วไปแล้วฉันเป็นคน...", options: [ { label: "เปิดเผยและเข้าสังคมเก่ง", type: 7 }, { label: "จริงจังและมีวินัยในตนเอง", type: 1 } ] } ]; window.q8Index = 0; $(document).one(':passagedisplay', function() { $('body, html').css({'overflow':'hidden', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000'}); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); window.q8Index = 0; $('#pre-phase').show(); $('#main-scene').hide(); }); window.startKnightScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_knight"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(500, function() { $('#main-scene').removeClass('hidden').show(); $('#black-curtain').css('opacity', '1'); $('#phase-1').removeClass('hidden').hide().fadeIn(1000); // Timeline setTimeout(function() { $('#phase-1').fadeOut(1000); $('#black-curtain').css('opacity', '0'); }, 13000); setTimeout(function() { $('#dialogue-container').removeClass('hidden').hide().fadeIn(1500); }, 17000); setTimeout(function() { $('#phase-2-text').fadeOut(500, function() { $('#phase-3-text').removeClass('hidden').hide().fadeIn(500); }); }, 29000); setTimeout(function() { $('#phase-3-text').fadeOut(500, function() { $('#quiz-area').removeClass('hidden').hide().fadeIn(500); window.showQuestion(); }); }, 37000); }); }; window.showQuestion = function() { if (window.q8Index >= window.q8Questions.length) { window.endQuiz(); return; } var q = window.q8Questions[window.q8Index]; $('#question-text').text(q.text).hide().fadeIn(300); var optContainer = $('#options-container'); optContainer.empty(); q.options.forEach(function(opt) { var btn = $('<button class="quiz-btn">' + opt.label + '</button>'); btn.on('click', function() { var varName = 'type' + opt.type; if (SugarCube.State.variables[varName] === undefined) SugarCube.State.variables[varName] = 0; SugarCube.State.variables[varName] += 1; window.q8Index++; window.showQuestion(); }); optContainer.append(btn); }); optContainer.hide().fadeIn(300); }; window.endQuiz = function() { $('#dialogue-container').fadeOut(1000); $('#black-curtain').css('opacity', '1'); setTimeout(function() { $('#phase-outro').removeClass('hidden').hide().fadeIn(1500); }, 1500); }; window.warpNext = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_knight"); if (bgm) { bgm.fadeOut(2); } $('#flash-overlay').css('opacity', '1'); setTimeout(function() { SugarCube.Engine.play("หลอมรวม"); }, 1500); }; </script> <style> /* CSS เดิม */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.1em; } .start-scene-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid #e1f5fe; color: #e1f5fe; padding: 10px 25px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-family: "Sarabun", sans-serif; border-radius: 50px; } .start-scene-btn:hover { background: #e1f5fe; color: #000; box-shadow: 0 0 20px rgba(225, 245, 254, 0.5); } .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.imgur.com/HPE9yRN.png'); background-size: cover; background-position: center; z-index: -2; } .black-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 1; pointer-events: none; transition: opacity 2s ease-in-out; z-index: 0; } .flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in; z-index: 100; } .feather-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; } .feather { position: absolute; background: rgba(255,255,255,0.9); width: 15px; height: 5px; border-radius: 50% 0 50% 0; box-shadow: 0 0 5px rgba(255,255,255,0.5); animation: feather-float 8s infinite linear; opacity: 0.8; } .feather:nth-child(1) { top: -10%; left: 20%; animation-duration: 10s; animation-delay: 0s; } .feather:nth-child(2) { top: -10%; left: 80%; animation-duration: 15s; animation-delay: 2s; width: 20px; height: 7px; } .feather:nth-child(3) { top: -10%; left: 50%; animation-duration: 12s; animation-delay: 5s; } .feather:nth-child(4) { top: 20%; left: -10%; animation-duration: 18s; animation-delay: 1s; animation-name: feather-side; } .feather:nth-child(5) { top: 60%; left: -10%; animation-duration: 14s; animation-delay: 3s; animation-name: feather-side; } @keyframes feather-float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(110vh) rotate(360deg); } } @keyframes feather-side { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(110vw) rotate(180deg); } } .dialogue-box { width: 90%; max-width: 700px; background: rgba(13, 71, 161, 0.9); border: 2px solid #b0bec5; border-radius: 0px; padding: 40px; text-align: center; color: #e3f2fd; box-shadow: 0 10px 40px rgba(0,0,0,0.6); z-index: 5; margin: 20px auto; font-family: "Sarabun", sans-serif; } .story-text-center { text-align: center; color: #e0e0e0; z-index: 5; width: 90%; max-width: 700px; line-height: 1.6; font-size: 1.1em; position: relative; margin: 20px auto; } .sky-text { font-family: "Sarabun", serif; letter-spacing: 0.5px; } .knight-voice { color: #fff; font-weight: bold; font-size: 1.1em; line-height: 1.6; text-transform: uppercase; letter-spacing: 1px; } .highlight-crimson { color: #ff5252; font-weight: bold; text-shadow: 0 0 5px rgba(255, 82, 82, 0.5); } .question-header { font-size: 1.2em; font-weight: bold; margin-bottom: 25px; color: #81d4fa; } .options-list { display: flex; flex-direction: column; gap: 15px; } .quiz-btn { background: rgba(255,255,255,0.1); border: 1px solid #90caf9; color: #e3f2fd; padding: 15px; font-size: 1em; cursor: pointer; transition: all 0.2s; font-family: "Sarabun", sans-serif; text-align: left; border-radius: 0; } .quiz-btn:hover { background: #1565c0; border-color: #fff; transform: translateX(5px); } .wing-btn { background: transparent; border: 2px solid #fff; color: #fff; padding: 12px 40px; font-size: 1.1em; cursor: pointer; transition: all 0.3s; font-weight: bold; border-radius: 0; } .wing-btn:hover { background: #fff; color: #0d47a1; box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; margin-bottom: 15px;} @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #0d47a1; } .scene-root::-webkit-scrollbar-thumb { background: #90caf9; border-radius: 0; } </style>

<<audio "bgm_knight" stop>> <div id="fusion-root" class="scene-root"> <div id="pre-phase" class="pre-phase-container"> <p class="fade-in-text internal-thought" style="margin-bottom: 30px; color: #e0f7fa; text-shadow: 0 0 10px #fff;"> " ...ฉันคือใครกันนะ... " </p> <div class="fade-in-text" style="animation-delay: 1.5s;"> <button class="start-scene-btn" onclick="startFusionScene()">ฉันคือใครกันนะ..</button> </div> </div> <div id="main-scene" class="hidden"> <div class="bg-space"></div> <div class="spiral-container"> <div class="spiral-arm arm-1"></div> <div class="spiral-arm arm-2"></div> <div class="spiral-arm arm-3"></div> <div class="spiral-arm arm-4"></div> <div class="spiral-arm arm-5"></div> <div class="spiral-arm arm-6"></div> <div class="spiral-arm arm-7"></div> <div class="spiral-arm arm-8"></div> <div class="spiral-arm arm-9"></div> <div class="core-light"></div> </div> <div class="content-wrapper"> <div id="content-box" class="fusion-text-box hidden"> <div id="phase-1"> <p class="fade-in-text">ในความเวิ้งว้างอันไร้ขอบเขต... คำตอบของคุณไม่ได้หายไปไหน</p> <p class="fade-in-text" style="animation-delay: 3s; color: #b3e5fc;"> มันกลายเป็นสะเก็ดดาว... เป็นละอองแสง...<br>ที่กำลังล่องลอยกลับมาหาเจ้าของ </p> <p class="fade-in-text" style="animation-delay: 7s; font-weight: bold; color: #fff; text-shadow: 0 0 10px #fff;"> จากเศษเสี้ยวความทรงจำ... สู่การก่อกำเนิดใหม่ </p> </div> <div id="phase-2" class="hidden"> <div style="margin-bottom: 15px; line-height: 1.8;"> <span style="color: #ff5252; text-shadow: 0 0 8px red;">สีแดงแห่งพลัง...</span> <span style="color: #69f0ae; text-shadow: 0 0 8px green;">สีเขียวแห่งความสงบ...</span><br> <span style="color: #448aff; text-shadow: 0 0 8px blue;">สีน้ำเงินแห่งปัญญา...</span> <span style="color: #ffd740; text-shadow: 0 0 8px gold;">และสีทองแห่งความหวัง</span> </div> <p class="fade-in-text" style="animation-delay: 1s;"> พลังงานทั้ง 9 สายธาร กำลังเต้นเร่าและหมุนวนรอบจิตวิญญาณของคุณ </p> <p class="fade-in-text" style="animation-delay: 4s; font-size: 1.1em; color: #e0f7fa;"> พวกมันกำลังสอดประสาน และช่วย <span style="font-weight:bold; text-decoration:underline;">เติมเต็ม</span><br>ในส่วนที่ขาดหายของกันและกัน </p> </div> <div id="phase-3" class="hidden"> <p class="fade-in-text">เมื่อทุกมิติของตัวตนซ้อนทับกันจนสมบูรณ์...</p> <p class="fade-in-text" style="animation-delay: 3s; color: #ffcc80; font-weight: bold; font-size: 1.2em;"> เปลือกนอกที่ห่อหุ้มไว้ก็แตกสลายออกไป </p> <hr style="border-color: rgba(255,255,255,0.3); width: 50%; margin: 20px auto;"> <p class="fade-in-text" style="animation-delay: 6s; font-size: 1.1em; color: #fff;"> คุณรู้สึกสงบลง ความรู้สึกที่ .. ไม่ได้พบเจอมานาน </p> <div class="fade-in-text" style="animation-delay: 9s; margin-top: 30px;"> <button class="fusion-btn" onclick="goToResult()">บทบาทของฉัน ..</button> </div> </div> </div> </div> </div> </div> <script> // Reset ค่าหน้าจอ $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#000' }); $('.tw-passage').css('display', 'none'); $('.scene-root').css('display', 'flex'); $('#pre-phase').show(); $('#main-scene').hide(); }); window.startFusionScene = function() { var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.volume(0.7); bgm.loop(true); bgm.play(); } $('#pre-phase').fadeOut(1000, function() { $('#main-scene').removeClass('hidden').fadeIn(2000); setTimeout(function() { $('#content-box').removeClass('hidden').hide().fadeIn(1500); }, 1000); // Timeline Animation setTimeout(function() { $('#phase-1').fadeOut(1000, function() { $('#phase-2').removeClass('hidden').hide().fadeIn(1500); }); }, 10000); setTimeout(function() { $('#phase-2').fadeOut(1000, function() { $('#phase-3').removeClass('hidden').hide().fadeIn(1500); $('.spiral-container').addClass('speed-up'); }); }, 22000); }); }; /* --- แก้ไข: ตัดตัวเช็ก Error ออก สั่งไป MyRole ตรงๆ --- */ window.goToResult = function() { // 1. สร้างแสงขาวบังจอ $('body').append('<div id="white-flash" style="position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:99999; opacity:0; pointer-events:none; transition: opacity 2s;"></div>'); // ค่อยๆ สว่างขึ้น setTimeout(function(){ $('#white-flash').css('opacity', '1'); }, 100); // 2. สั่งล่วงหน้า: ถ้าเปลี่ยนหน้าสำเร็จ ให้เอาแสงขาวออก (Fade out) $(document).one(':passagedisplay', function() { $('#white-flash').fadeOut(2000, function() { $(this).remove(); }); }); // 3. ไปยังหน้าถัดไปชื่อ "MyRole" ทันที (ไม่มีการเช็ก Story.has แล้ว) setTimeout(function() { SugarCube.Engine.play("MyRole"); }, 2500); }; </script> <style> /* --- Style คงเดิม --- */ .scene-root { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pre-phase-container { text-align: center; z-index: 50; } .internal-thought { font-style: italic; font-size: 1.2em; letter-spacing: 1px; } .start-scene-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid #fff; color: #fff; padding: 12px 30px; font-size: 1.1em; cursor: pointer; transition: all 0.5s; font-family: "Sarabun", sans-serif; border-radius: 50px; text-shadow: 0 0 5px #fff; box-shadow: 0 0 10px rgba(255,255,255,0.2); } .start-scene-btn:hover { background: #fff; color: #000; box-shadow: 0 0 30px rgba(255,255,255,0.8); transform: scale(1.05); } .bg-space { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%); z-index: -2; } .spiral-container { position: fixed; top: 50%; left: 50%; width: 0; height: 0; z-index: -1; animation: rotate-center 20s linear infinite; } .spiral-container.speed-up { animation: rotate-center 5s linear infinite; } .spiral-arm { position: absolute; top: 50%; left: 50%; width: 350px; height: 350px; border-radius: 40%; mix-blend-mode: screen; opacity: 0.7; filter: blur(30px); transform-origin: 0 0; } /* 9 Colors */ .arm-1 { background: radial-gradient(circle, #ef5350, transparent 60%); transform: rotate(0deg) translate(80px); } .arm-2 { background: radial-gradient(circle, #ff7043, transparent 60%); transform: rotate(40deg) translate(80px); } .arm-3 { background: radial-gradient(circle, #ffca28, transparent 60%); transform: rotate(80deg) translate(80px); } .arm-4 { background: radial-gradient(circle, #66bb6a, transparent 60%); transform: rotate(120deg) translate(80px); } .arm-5 { background: radial-gradient(circle, #26c6da, transparent 60%); transform: rotate(160deg) translate(80px); } .arm-6 { background: radial-gradient(circle, #42a5f5, transparent 60%); transform: rotate(200deg) translate(80px); } .arm-7 { background: radial-gradient(circle, #7e57c2, transparent 60%); transform: rotate(240deg) translate(80px); } .arm-8 { background: radial-gradient(circle, #ec407a, transparent 60%); transform: rotate(280deg) translate(80px); } .arm-9 { background: radial-gradient(circle, #ffffff, transparent 60%); transform: rotate(320deg) translate(80px); } .core-light { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; background: white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 60px 30px rgba(255,255,255,0.8); animation: pulse-core 4s infinite ease-in-out; } @keyframes rotate-center { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse-core { 0% { box-shadow: 0 0 60px 30px rgba(255,255,255,0.8); } 50% { box-shadow: 0 0 120px 50px rgba(255,255,255,0.9); } 100% { box-shadow: 0 0 60px 30px rgba(255,255,255,0.8); } } .content-wrapper { width: 100%; display: flex; justify-content: center; padding: 20px; box-sizing: border-box; } .fusion-text-box { width: 90%; max-width: 650px; text-align: center; color: #fff; z-index: 10; text-shadow: 0 2px 4px rgba(0,0,0,1); padding: 20px; background: rgba(0, 0, 0, 0.3); border-radius: 15px; backdrop-filter: blur(2px); } .fusion-text-box p { margin: 10px 0; line-height: 1.4; font-size: 1.1em; } .fusion-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid #fff; color: #fff; padding: 10px 35px; font-size: 1.1em; cursor: pointer; transition: all 0.5s; font-weight: bold; border-radius: 50px; box-shadow: 0 0 15px rgba(255,255,255,0.3); } .fusion-btn:hover { background: #fff; color: #000; box-shadow: 0 0 40px rgba(255,255,255,0.9); transform: scale(1.1); } .fade-in-text { opacity: 0; animation: simpleFadeIn 2s forwards; } @keyframes simpleFadeIn { to { opacity: 1; } } .hidden { display: none !important; } .scene-root::-webkit-scrollbar { width: 6px; } .scene-root::-webkit-scrollbar-track { background: #000; } .scene-root::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; } </style>

<div id="result-screen" class="scene-root"> <div class="bg-space-static"></div> <div class="vignette"></div> <div class="result-container"> <<script>> // ดึงคะแนนจริงจากตัวแปร $type1 - $type9 var scores = []; for(var i=1; i<=9; i++) { // ถ้าไม่มีคะแนนให้ถือเป็น 0 var val = State.variables["type" + i] || 0; scores.push({ id: i, score: val }); } // เรียงลำดับจากมากไปน้อย scores.sort(function(a, b) { return b.score - a.score; }); // หาค่าสูงสุด (Max Score) var maxScore = scores[0].score; // คัดเลือกผู้ชนะ (อาจมีคนเดียว หรือหลายคนถ้าคะแนนเท่า) var winners = scores.filter(function(s) { return s.score === maxScore; }); State.variables.finalWinners = winners; // ตั้งค่าตัวแปรสำหรับวนลูปดูรูป (กรณีเสมอ) if (State.variables.tieIndex === undefined) { State.variables.tieIndex = 0; } // คำนวณว่าจะโชว์ ID ไหน var currentIndex = State.variables.tieIndex % winners.length; State.variables.currentShowId = winners[currentIndex].id; // ฟังก์ชันแปลงเลข 1-9 ให้เป็นชื่อพาสเสจ "01"-"09" State.variables.getTargetPassage = function(id) { return (id < 10 ? "0" : "") + id; }; <</script>> <<if $finalWinners.length eq 1>> <<goto $getTargetPassage($finalWinners[0].id)>> <<else>> <div id="tie-content" class="scroll-content"> <div class="tie-header"> <div class="tie-line"></div> <div class="tie-text"> <span class="bracket">[</span> ดูเหมือนว่าจะเกิดการซ้อนทับกันของจิตวิญญาณ .. เลือกสิ <span class="bracket">]</span> </div> <div class="tie-line"></div> </div> <div class="result-card-wrapper"> <img @src="setup.resultImages[$currentShowId]" class="result-card-img"> </div> <div class="button-group"> <button class="switch-btn" onclick="window.nextTie()">ขอดูอีกผลลัพธ์ ↻</button> <<button "ฉันคือสิ่งนี้">> <<goto $getTargetPassage($currentShowId)>> <</button>> </div> </div> <</if>> </div> </div> <script> window.nextTie = function() { SugarCube.State.variables.tieIndex++; SugarCube.Engine.play(SugarCube.State.passage); }; </script> <style> /* Layout หลัก */ .result-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; /* ให้เห็นพื้นหลังข้างล่าง */ z-index: 10; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* พื้นหลัง */ .bg-space-static { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #1a237e 0%, #050505 90%); z-index: 0; pointer-events: none; } .vignette { position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 150px #000; z-index: 1; pointer-events: none; } /* จัดกึ่งกลางแบบ Scroll ได้ */ .scroll-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 20px 10px 80px 10px; /* เว้นล่างเยอะหน่อยเผื่อปุ่ม */ box-sizing: border-box; } /* --- UI Header --- */ .tie-header { width: 100%; max-width: 600px; text-align: center; margin-bottom: 20px; animation: fadeInDown 1s ease-out; } .tie-text { color: #e0f7fa; font-family: "Sarabun", sans-serif; font-size: 1.1em; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); margin: 10px 0; } .bracket { color: #00e5ff; font-size: 1.2em; font-weight: 900; } .tie-line { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent); } /* กรอบรูป */ .result-card-wrapper { width: 100%; display: flex; justify-content: center; margin-bottom: 30px; animation: zoomIn 0.5s ease-out; } /* รูปภาพ (ไม่อ้วน + เต็มจอที่สุด) */ .result-card-img { width: 100%; max-width: 550px; /* ล็อคความกว้างไม่ให้ยืด */ height: auto; border-radius: 8px; box-shadow: 0 0 50px rgba(0, 229, 255, 0.2); } /* ปุ่มกด */ .button-group { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; gap: 15px; justify-content: center; padding: 20px 0 30px 0; background: linear-gradient(to top, rgba(0,0,0,1) 50%, transparent); z-index: 20; } /* สไตล์ปุ่ม */ .switch-btn { background: rgba(0, 0, 0, 0.6); border: 1px solid #00e5ff; color: #00e5ff; padding: 10px 25px; border-radius: 50px; cursor: pointer; font-family: "Sarabun", sans-serif; font-size: 1em; backdrop-filter: blur(5px); transition: 0.3s; } .switch-btn:hover { background: #00e5ff; color: #000; box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); } .result-container button:not(.switch-btn) { background: linear-gradient(135deg, #ffd700, #ffca28); color: #000; border: none; padding: 10px 40px; border-radius: 50px; font-weight: 900; font-size: 1.1em; cursor: pointer; box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4); transition: 0.3s; } .result-container button:not(.switch-btn):hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255, 215, 0, 0.6); } /* Animation */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Scrollbar */ .result-container::-webkit-scrollbar { width: 6px; } .result-container::-webkit-scrollbar-track { background: #000; } .result-container::-webkit-scrollbar-thumb { background: #004d40; border-radius: 3px; } </style>

<div id="result-01" class="result-theme-1"> <div class="bg-layer-1"></div> <div class="holy-glow"></div> <div class="feather-container"> <div class="feather"></div><div class="feather"></div><div class="feather"></div> <div class="feather"></div><div class="feather"></div><div class="feather"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="eng-title">THE PERFECTIONIST</h1> <div class="line-separator"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img" src="https://i.imgur.com/JCHTOWx.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download" onclick="downloadCard()"> <span style="font-size:1.2em">⇩</span> บันทึกภาพ </button> <button class="btn-next" onclick="goToEnding()"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout & BG */ .result-theme-1 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-1 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top, #1a237e 0%, #050505 100%); z-index: -1; } .holy-glow { position: fixed; top: -20%; left: 0; width: 100%; height: 80%; background: radial-gradient(ellipse at top, rgba(255,255,255,0.08) 0%, transparent 70%); pointer-events: none; z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* --- New Header Style --- */ .header-box { text-align: center; margin-bottom: 30px; } .eng-title { color: #ffffff; font-family: 'Cinzel', serif; /* ฟอนต์หรู */ font-size: 3em; font-weight: 400; margin: 0; letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 0 20px rgba(255,255,255,0.3); background: linear-gradient(to bottom, #fff, #cfd8dc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .line-separator { width: 60px; height: 2px; background: #c5a059; margin: 15px auto 0 auto; } /* Card & Buttons */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid rgba(197, 160, 89, 0.3); transition: transform 0.5s ease; } .result-img:hover { transform: translateY(-5px); } .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download { background: transparent; border: none; color: #90a4ae; padding: 8px 15px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-bottom: 1px solid transparent; } .btn-download:hover { color: #fff; border-bottom: 1px solid #fff; } .btn-next { background: rgba(13, 27, 42, 0.8); border: 1px solid #c5a059; color: #e6d5b8; padding: 15px 40px; font-size: 1.1em; cursor: pointer; border-radius: 2px; transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 2px; min-width: 280px; } .btn-next:hover { background: #c5a059; color: #0d1b2a; box-shadow: 0 0 30px rgba(197, 160, 89, 0.3); } /* Animations */ .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Feather */ .feather-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .feather { position: absolute; background: rgba(255,255,255,0.4); width: 8px; height: 3px; border-radius: 50%; animation: float 12s infinite linear; opacity: 0; } .feather:nth-child(1) { top: -10%; left: 10%; animation-delay: 0s; } .feather:nth-child(2) { top: -10%; left: 30%; animation-delay: 2s; } .feather:nth-child(3) { top: -10%; left: 60%; animation-delay: 4s; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 20% { opacity: 0.6; } 90% { opacity: 0; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } .result-theme-1::-webkit-scrollbar { width: 6px; } .result-theme-1::-webkit-scrollbar-track { background: #0d1b2a; } .result-theme-1::-webkit-scrollbar-thumb { background: #455a64; } </style>

<div id="result-09" class="result-theme-9"> <div class="bg-layer-9"></div> <div class="mist-container"> <div class="mist"></div> <div class="mist"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE PEACEMAKER</h1> <div class="line-separator-9"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-9" src="https://i.imgur.com/WZbcNbi.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-9" onclick="downloadCard9()"> <span style="font-size:1.2em">☮</span> บันทึกภาพ </button> <button class="btn-theme-9" onclick="goToEnding(9)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard9 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-9 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } /* Background: เขียวมรกตไล่เฉด */ .bg-layer-9 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #00695c 0%, #00251a 100%); z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #80cbc4; /* เขียวอ่อน */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 400; margin: 0; letter-spacing: 4px; text-shadow: 0 0 20px rgba(128, 203, 196, 0.4); } .line-separator-9 { width: 100px; height: 2px; background: linear-gradient(90deg, transparent, #80cbc4, transparent); margin: 15px auto 0 auto; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); border: 1px solid rgba(128, 203, 196, 0.2); transition: transform 0.3s; } .result-img:hover { transform: scale(1.01); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-9 { background: transparent; border: 1px solid #4db6ac; color: #80cbc4; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 50px; } .btn-download-9:hover { background: rgba(77, 182, 172, 0.1); color: #fff; } .btn-theme-9 { background: linear-gradient(135deg, #26a69a, #00897b); border: none; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: bold; cursor: pointer; border-radius: 50px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 5px 15px rgba(0, 77, 64, 0.3); } .btn-theme-9:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0, 77, 64, 0.5); } /* Mist Animation */ .mist-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; overflow: hidden; } .mist { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent); animation: drift 20s infinite linear; } .mist:nth-child(2) { animation-duration: 15s; top: 20%; opacity: 0.5; } @keyframes drift { from { transform: translateX(-50%); } to { transform: translateX(0%); } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-9::-webkit-scrollbar { width: 6px; } .result-theme-9::-webkit-scrollbar-track { background: #00251a; } .result-theme-9::-webkit-scrollbar-thumb { background: #26a69a; } </style>

<div id="result-03" class="result-theme-3"> <div class="bg-layer-3"></div> <div class="spotlight-beam"></div> <div class="sparkle-container"> <div class="sparkle"></div><div class="sparkle"></div><div class="sparkle"></div> <div class="sparkle"></div><div class="sparkle"></div><div class="sparkle"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE PERFORMER</h1> <div class="line-separator-3"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-3" src="https://i.imgur.com/gpq8JA1.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-3" onclick="downloadCard3()"> <span style="font-size:1.2em">★</span> บันทึกภาพ </button> <button class="btn-theme-3" onclick="goToEnding(3)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard3 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-3 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-3 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #4a148c 0%, #000000 90%); z-index: -1; } .spotlight-beam { position: fixed; top: -50%; left: 50%; width: 100%; height: 150%; transform: translateX(-50%); background: radial-gradient(ellipse at top, rgba(255,215,0,0.15) 0%, transparent 60%); pointer-events: none; z-index: -1; animation: beamSway 5s infinite alternate; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #ffd700; /* ทอง */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 900; margin: 0; letter-spacing: 3px; text-shadow: 0 0 15px rgba(255,215,0,0.5); } .line-separator-3 { width: 80px; height: 3px; background: linear-gradient(90deg, transparent, #ffd700, transparent); margin: 15px auto 0 auto; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 8px; box-shadow: 0 0 30px rgba(255,215,0,0.2); border: 2px solid #ffd700; transition: transform 0.3s; } .result-img:hover { transform: scale(1.01); box-shadow: 0 0 50px rgba(255,215,0,0.4); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-3 { background: transparent; border: 1px solid #ffd700; color: #ffd700; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 2px; } .btn-download-3:hover { background: rgba(255,215,0,0.1); } .btn-theme-3 { background: linear-gradient(45deg, #ffd700, #ffca28); border: none; color: #240046; padding: 15px 40px; font-size: 1.1em; font-weight: 900; cursor: pointer; border-radius: 2px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 0 20px rgba(255,215,0,0.3); } .btn-theme-3:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(255,215,0,0.6); } /* Sparkle */ .sparkle-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .sparkle { position: absolute; background: #fff; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 10px #fff, 0 0 20px #ffd700; animation: twinkle 2s infinite alternate; } .sparkle:nth-child(1) { top: 20%; left: 20%; } .sparkle:nth-child(2) { top: 30%; left: 80%; width: 6px; height: 6px; } @keyframes beamSway { from { transform: translateX(-50%) rotate(-5deg); } to { transform: translateX(-50%) rotate(5deg); } } @keyframes twinkle { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-3::-webkit-scrollbar { width: 6px; } .result-theme-3::-webkit-scrollbar-track { background: #260e36; } .result-theme-3::-webkit-scrollbar-thumb { background: #ffd700; } </style>

<div id="result-04" class="result-theme-4"> <div class="bg-layer-4"></div> <div class="moon-glow"></div> <div class="particle-container-4"> <div class="particle-4"></div><div class="particle-4"></div><div class="particle-4"></div> <div class="particle-4"></div><div class="particle-4"></div><div class="particle-4"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE ROMANTIC</h1> <div class="line-separator-4"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-4" src="https://i.imgur.com/6TtUCRb.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-4" onclick="downloadCard4()"> <span style="font-size:1.2em">☾</span> บันทึกภาพ </button> <button class="btn-theme-4" onclick="goToEnding(4)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard4 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-4 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-4 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #302b63 0%, #0f0c29 100%); z-index: -1; } .moon-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05) 0%, transparent 40%); pointer-events: none; z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #fff; font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 400; margin: 0; letter-spacing: 3px; text-shadow: 0 0 15px rgba(179, 157, 219, 0.5); } .line-separator-4 { width: 50px; height: 2px; background: #9575cd; margin: 15px auto 0 auto; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); filter: contrast(1.1); transition: transform 0.3s; } .result-img:hover { transform: translateY(-5px); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-4 { background: transparent; border: 1px solid #9575cd; color: #d1c4e9; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 30px; } .btn-download-4:hover { background: rgba(149, 117, 205, 0.2); color: #fff; } .btn-theme-4 { background: linear-gradient(135deg, #512da8, #673ab7); border: none; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: bold; cursor: pointer; border-radius: 50px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 5px 20px rgba(81, 45, 168, 0.4); } .btn-theme-4:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(103, 58, 183, 0.6); } /* Particle */ .particle-container-4 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .particle-4 { position: absolute; background: rgba(255,255,255,0.5); width: 3px; height: 3px; border-radius: 50%; animation: floatUp 15s infinite linear; opacity: 0; } .particle-4:nth-child(1) { bottom: -10%; left: 10%; } @keyframes floatUp { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translateY(-110vh); opacity: 0; } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-4::-webkit-scrollbar { width: 6px; } .result-theme-4::-webkit-scrollbar-track { background: #0f0c29; } .result-theme-4::-webkit-scrollbar-thumb { background: #512da8; border-radius: 3px; } </style>

<div id="result-06" class="result-theme-6"> <div class="bg-layer-6"></div> <div class="ember-container"> <div class="ember"></div><div class="ember"></div><div class="ember"></div> <div class="ember"></div><div class="ember"></div><div class="ember"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE LOYALIST</h1> <div class="line-separator-6"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-6" src="https://i.imgur.com/ozXoRlv.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-6" onclick="downloadCard6()"> <span style="font-size:1.2em">⚔</span> บันทึกภาพ </button> <button class="btn-theme-6" onclick="goToEnding(6)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard6 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-6 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-6 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #37474f 0%, #1c2325 100%); z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #eceff1; /* ขาวหม่น */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 700; margin: 0; letter-spacing: 3px; text-shadow: 3px 3px 0px #000; } .line-separator-6 { width: 60px; height: 4px; background: #ef5350; margin: 15px auto 0 auto; border-radius: 0; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); border: 2px solid #546e7a; transition: transform 0.3s; } .result-img:hover { transform: scale(1.01); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-6 { background: transparent; border: 1px solid #ef5350; color: #ef5350; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 0; } .btn-download-6:hover { background: rgba(239, 83, 80, 0.1); color: #fff; } .btn-theme-6 { background: #ef5350; border: 1px solid #b71c1c; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: bold; cursor: pointer; border-radius: 0; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 4px 0 #b71c1c; } .btn-theme-6:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b71c1c; } .btn-theme-6:active { transform: translateY(2px); box-shadow: 0 2px 0 #b71c1c; } /* Embers Animation */ .ember-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .ember { position: absolute; background: #ff5722; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 10px #ff5722; animation: rise 6s infinite linear; opacity: 0; } .ember:nth-child(1) { bottom: -10%; left: 10%; animation-duration: 8s; } .ember:nth-child(2) { bottom: -10%; left: 50%; animation-duration: 5s; width: 6px; height: 6px; } @keyframes rise { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translateY(-100vh); opacity: 0; } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-6::-webkit-scrollbar { width: 6px; } .result-theme-6::-webkit-scrollbar-track { background: #263238; } .result-theme-6::-webkit-scrollbar-thumb { background: #ef5350; } </style>

<div id="result-05" class="result-theme-5"> <div class="bg-layer-5"></div> <div class="data-overlay"></div> <div class="particle-container-5"> <div class="particle-5"></div><div class="particle-5"></div><div class="particle-5"></div> <div class="particle-5"></div><div class="particle-5"></div><div class="particle-5"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE OBSERVER</h1> <div class="line-separator-5"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-5" src="https://i.imgur.com/rkE8lX7.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-5" onclick="downloadCard5()"> <span style="font-size:1.2em">👁</span> บันทึกภาพ </button> <button class="btn-theme-5" onclick="goToEnding(5)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard5 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at bottom, #023e8a 0%, #000814 100%); z-index: -1; } .data-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 255, 255, 0.03) 1px, rgba(0, 255, 255, 0.03) 2px); pointer-events: none; z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #90caf9; /* ฟ้าอ่อน */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 400; margin: 0; letter-spacing: 4px; text-shadow: 0 0 15px rgba(144, 202, 249, 0.5); } .line-separator-5 { width: 60px; height: 1px; background: #00b4d8; margin: 15px auto 0 auto; box-shadow: 0 0 10px #00b4d8; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); border: 1px solid rgba(144, 202, 249, 0.2); transition: transform 0.3s; } .result-img:hover { transform: translateY(-5px); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-5 { background: transparent; border: 1px solid #48cae4; color: #90caf9; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 2px; } .btn-download-5:hover { background: rgba(72, 202, 228, 0.1); color: #fff; } .btn-theme-5 { background: linear-gradient(135deg, #0077b6, #023e8a); border: none; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: bold; cursor: pointer; border-radius: 4px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 0 20px rgba(0, 119, 182, 0.4); } .btn-theme-5:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(0, 180, 216, 0.6); } /* Particle */ .particle-container-5 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .particle-5 { position: absolute; background: rgba(0, 255, 255, 0.4); width: 4px; height: 4px; box-shadow: 0 0 10px #00ffff; animation: floatData 8s infinite linear; opacity: 0; } .particle-5:nth-child(1) { bottom: -10%; left: 20%; animation-delay: 0s; } .particle-5:nth-child(2) { bottom: -10%; left: 80%; animation-delay: 2s; width: 2px; height: 10px; } @keyframes floatData { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translateY(-110vh); opacity: 0; } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-5::-webkit-scrollbar { width: 6px; } .result-theme-5::-webkit-scrollbar-track { background: #000814; } .result-theme-5::-webkit-scrollbar-thumb { background: #0077b6; } </style>

<div id="result-02" class="result-theme-2"> <div class="bg-layer-2"></div> <div class="sun-overlay"></div> <div class="butterfly-container"> <div class="butterfly"></div><div class="butterfly"></div><div class="butterfly"></div> <div class="butterfly"></div><div class="butterfly"></div><div class="butterfly"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE GIVER</h1> <div class="line-separator"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-2" src="https://i.imgur.com/hZR01yj.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-2" onclick="downloadCard2()"> <span style="font-size:1.2em">♥</span> บันทึกภาพ </button> <button class="btn-theme-2" onclick="goToEnding()"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); /* แก้ไข 1: เติมเลข 2 ให้ตรงกับปุ่ม */ window.downloadCard2 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; /* ตั้งชื่อไฟล์เป็น Type2 */ a.download = "FinalAct_Type2.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; window.goToEnding = function() { /* สั่ง Fade เพลง */ var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } /* แก้ไข 2: ตั้งค่าตัวแปรเป็นเลข 2 */ SugarCube.State.variables.finalResult = 2; setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #e8f5e9 0%, #fce4ec 100%); z-index: -1; } .sun-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(255,255,255,0.8) 0%, transparent 60%); pointer-events: none; z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .header-box { text-align: center; margin-bottom: 30px; } .main-title { color: #2e7d32; /* เขียวเข้ม */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 400; margin: 0; letter-spacing: 4px; text-shadow: 2px 2px 0px rgba(255,255,255,0.6); } .line-separator { width: 50px; height: 2px; background: #f48fb1; margin: 15px auto 0 auto; border-radius: 2px; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(165, 214, 167, 0.4); border: 4px solid #fff; transition: transform 0.3s; } .result-img:hover { transform: translateY(-5px); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-2 { background: transparent; border: none; color: #ec407a; padding: 8px 15px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-bottom: 1px solid transparent; } .btn-download-2:hover { color: #ad1457; border-bottom: 1px solid #ad1457; } .btn-theme-2 { background: linear-gradient(135deg, #66bb6a, #81c784); border: none; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: bold; cursor: pointer; border-radius: 50px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 5px 20px rgba(102, 187, 106, 0.3); } .btn-theme-2:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(102, 187, 106, 0.5); } /* Butterfly */ .butterfly-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .butterfly { position: absolute; background: rgba(255, 205, 210, 0.8); width: 8px; height: 8px; border-radius: 50%; box-shadow: 4px -4px 0 rgba(255,205,210,0.8), -4px -4px 0 rgba(255,205,210,0.8); animation: flutter 12s infinite linear; opacity: 0.6; } .butterfly:nth-child(1) { top: 80%; left: 10%; animation-duration: 15s; } .butterfly:nth-child(2) { top: 60%; left: 30%; animation-duration: 18s; } @keyframes flutter { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 100% { transform: translate(100px, -500px) scale(0.5); opacity: 0; } } /* Anim */ .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-2::-webkit-scrollbar { width: 6px; } .result-theme-2::-webkit-scrollbar-track { background: #e8f5e9; } .result-theme-2::-webkit-scrollbar-thumb { background: #81c784; border-radius: 3px; } </style>

<div id="result-07" class="result-theme-7"> <div class="bg-layer-7"></div> <div class="cloud-overlay"></div> <div class="leaf-container-7"> <div class="leaf-7"></div><div class="leaf-7"></div><div class="leaf-7"></div> <div class="leaf-7"></div><div class="leaf-7"></div><div class="leaf-7"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE ENTHUSIAST</h1> <div class="line-separator-7"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-7" src="https://i.imgur.com/tdN4apB.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-7" onclick="downloadCard7()"> <span style="font-size:1.2em">☀</span> บันทึกภาพ </button> <button class="btn-theme-7" onclick="goToEnding(7)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard7 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-7 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } .bg-layer-7 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, #80deea 0%, #ffffff 100%); z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #ff9800; /* ส้มสดใส */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 900; margin: 0; letter-spacing: 2px; text-shadow: 2px 2px 0px #fff; } .line-separator-7 { width: 60px; height: 3px; background: #4caf50; margin: 15px auto 0 auto; border-radius: 50px; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 188, 212, 0.3); border: 5px solid #fff; transition: transform 0.3s; } .result-img:hover { transform: scale(1.02) rotate(1deg); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-7 { background: transparent; border: 2px solid #ff9800; color: #ef6c00; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 30px; font-weight: bold; } .btn-download-7:hover { background: #ff9800; color: #fff; } .btn-theme-7 { background: linear-gradient(45deg, #ff9800, #ffc107); border: none; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: 900; cursor: pointer; border-radius: 50px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4); } .btn-theme-7:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 152, 0, 0.6); } /* Leaf Animation */ .leaf-container-7 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .leaf-7 { position: absolute; background: #81c784; width: 10px; height: 10px; border-radius: 0 50% 0 50%; animation: fall7 8s infinite linear; opacity: 0.7; } .leaf-7:nth-child(1) { top: -10%; left: 20%; animation-delay: 0s; } .leaf-7:nth-child(2) { top: -10%; left: 60%; animation-delay: 2s; background: #aed581; } @keyframes fall7 { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(110vh) rotate(360deg); } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-7::-webkit-scrollbar { width: 6px; } .result-theme-7::-webkit-scrollbar-track { background: #e0f7fa; } .result-theme-7::-webkit-scrollbar-thumb { background: #4dd0e1; border-radius: 3px; } </style>

<div id="result-08" class="result-theme-8"> <div class="bg-layer-8"></div> <div class="fire-overlay"></div> <div class="ember-container-8"> <div class="ember-8"></div><div class="ember-8"></div><div class="ember-8"></div> <div class="ember-8"></div><div class="ember-8"></div><div class="ember-8"></div> <div class="ember-8"></div><div class="ember-8"></div> </div> <div class="content-container"> <div class="header-box fade-in-down"> <h1 class="main-title">THE PROTECTOR</h1> <div class="line-separator-8"></div> </div> <div class="card-box fade-in-up"> <img id="final-card-img-8" src="https://i.imgur.com/oWCUQlG.png" class="result-img" crossorigin="anonymous"> </div> <div class="footer-box fade-in-up" style="animation-delay: 1s;"> <button class="btn-download-8" onclick="downloadCard8()"> <span style="font-size:1.2em">🛡</span> บันทึกภาพ </button> <button class="btn-theme-8" onclick="goToEnding(8)"> ฉันรู้เจตจำนงค์ของตัวเองแล้ว </button> </div> </div> </div> <script> $(document).one(':passagedisplay', function() { $('body, html').css({ 'overflow-y':'auto', 'height':'100%', 'margin':'0', 'padding':'0', 'background-color': '#0d1b2a' }); $('.tw-passage').css('display', 'none'); }); window.downloadCard8 = function() { var imgSrc = $('#final-card-img').attr('src'); fetch(imgSrc).then(r => r.blob()).then(blob => { var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = "FinalAct_Type1.png"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }).catch(() => alert("ไม่สามารถบันทึกภาพได้")); }; /* --- แก้ไขตรงนี้: เพิ่มระบบ Fade Out เพลง --- */ window.goToEnding = function() { // 1. สั่งให้เพลง "bgm_fusion" ค่อยๆ ลดเสียงลงจนเหลือ 0 ในเวลา 2 วินาที var bgm = SugarCube.SimpleAudio.tracks.get("bgm_fusion"); if (bgm) { bgm.fade(2, 0); } // (เผื่อมีเพลงอื่นด้วย สั่ง Master Fade ไปเลยเพื่อความชัวร์) // SugarCube.SimpleAudio.fade(2, 0); // 2. บันทึกตัวแปร (อย่าลืมแก้เลข 1 เป็น 2,3... ตามพาสเสจนะคะ) SugarCube.State.variables.finalResult = 1; // 3. หน่วงเวลา 2 วินาที (ให้เพลงเงียบก่อน) แล้วค่อยไปหน้า "ส่งท้าย" setTimeout(function() { SugarCube.Engine.play("ส่งท้าย"); }, 2000); }; </script> <style> /* Layout */ .result-theme-8 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; font-family: "Sarabun", sans-serif; } /* Background: แดงเลือดนกไล่ไปดำ */ .bg-layer-8 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at bottom, #b71c1c 0%, #000000 90%); z-index: -1; } .fire-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255,87,34,0.1) 0%, transparent 40%); pointer-events: none; z-index: -1; } .content-container { width: 100%; max-width: 900px; padding: 40px 20px 100px 20px; display: flex; flex-direction: column; align-items: center; z-index: 10; } /* Header */ .main-title { color: #ffcdd2; /* ชมพูอมแดงจางๆ */ font-family: 'Cinzel', serif; font-size: 3.5em; font-weight: 900; margin: 0; letter-spacing: 3px; text-shadow: 0 5px 15px rgba(0,0,0,0.8); text-transform: uppercase; } .line-separator-8 { width: 80px; height: 4px; background: #ff5252; margin: 15px auto 0 auto; box-shadow: 0 0 15px #ff1744; } /* Card */ .card-box { width: 100%; display: flex; justify-content: center; margin-bottom: 40px; } .result-img { width: 100%; max-width: 850px; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.9); border: 2px solid #5d1010; transition: transform 0.3s; } .result-img:hover { transform: scale(1.01); } /* Buttons */ .footer-box { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; } .btn-download-8 { background: transparent; border: 1px solid #ef5350; color: #ef5350; padding: 8px 20px; font-size: 0.95em; cursor: pointer; transition: all 0.3s; border-radius: 0; } .btn-download-8:hover { background: rgba(239, 83, 80, 0.2); color: #fff; } .btn-theme-8 { background: linear-gradient(135deg, #d32f2f, #b71c1c); border: 1px solid #ff8a80; color: #fff; padding: 15px 40px; font-size: 1.1em; font-weight: 900; cursor: pointer; border-radius: 2px; transition: all 0.4s ease; letter-spacing: 1px; min-width: 280px; box-shadow: 0 5px 0 #7f0000; } .btn-theme-8:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #7f0000; } .btn-theme-8:active { transform: translateY(2px); box-shadow: 0 2px 0 #7f0000; } /* Ember Animation */ .ember-container-8 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .ember-8 { position: absolute; background: #ff9800; width: 3px; height: 3px; border-radius: 50%; box-shadow: 0 0 5px #ff5722; animation: riseFire 5s infinite linear; opacity: 0; } .ember-8:nth-child(1) { bottom: -10%; left: 10%; animation-delay: 0s; } .ember-8:nth-child(2) { bottom: -10%; left: 30%; animation-delay: 2s; width: 5px; height: 5px; } .ember-8:nth-child(3) { bottom: -10%; left: 70%; animation-delay: 1s; } .ember-8:nth-child(4) { bottom: -10%; left: 50%; animation-delay: 3s; width: 4px; height: 4px; } .ember-8:nth-child(5) { bottom: -10%; left: 90%; animation-delay: 0.5s; } @keyframes riseFire { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-80vh) scale(0); opacity: 0; } } .fade-in-down { animation: fadeInDown 1s ease-out forwards; opacity: 0; } .fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-theme-8::-webkit-scrollbar { width: 6px; } .result-theme-8::-webkit-scrollbar-track { background: #1b0000; } .result-theme-8::-webkit-scrollbar-thumb { background: #d32f2f; } </style>

<<nobr>> /* --- แก้ไข 1: ลบ <<masteraudio stop>> ออกแล้วนะคะ เพื่อให้เพลงเล่นต่อ --- */ <style> @import url('https://fonts.googleapis.com/css2?family=Maitree:wght@300;500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Sarabun:wght@300;400&display=swap'); body { background-color: #000; margin: 0; overflow: hidden; font-family: 'Maitree', serif; color: #fff; } /* เครดิตวิ่ง */ .credit-wrapper { position: absolute; top: 100%; left: 0; width: 100%; /* ความเร็วเครดิต (40วิ) */ animation: creditScroll 40s linear forwards; text-align: center; z-index: 1; } @keyframes creditScroll { 0% { top: 100%; } 100% { top: -350%; } } /* คอนเทนเนอร์ปุ่ม END? */ .end-button-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; opacity: 0; pointer-events: none; /* ปุ่มจะโผล่มาวินาทีที่ 32 */ animation: fadeInButton 2s ease-in-out forwards 32s; text-align: center; } @keyframes fadeInButton { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; } } /* แต่งปุ่ม */ .end-button-container button { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; color: rgba(255, 255, 255, 0.9) !important; padding: 20px 50px !important; cursor: pointer !important; font-family: 'Playfair Display', serif !important; font-size: 2em !important; letter-spacing: 5px !important; font-weight: 600 !important; text-transform: uppercase !important; transition: all 0.4s ease !important; box-shadow: 0 0 20px rgba(0,0,0,0.8) !important; border-radius: 2px !important; } .end-button-container button:hover { border-color: #ff4d4d !important; color: #ff4d4d !important; background: rgba(50, 0, 0, 0.2) !important; box-shadow: 0 0 30px rgba(255, 77, 77, 0.3) !important; letter-spacing: 8px !important; } /* Styles ทั่วไป */ .credit-section-title { font-size: 1.4em; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #888; margin-top: 60px; margin-bottom: 20px; border-bottom: 1px solid #333; display: inline-block; padding-bottom: 5px; } .credit-role { font-size: 0.9em; color: #aaa; margin-bottom: 5px; font-family: 'Sarabun', sans-serif; } .credit-name { font-size: 1.2em; font-weight: 500; margin-bottom: 25px; letter-spacing: 1px; } .song-entry { margin-bottom: 15px; } .song-title { font-style: italic; font-size: 1.1em; } .song-artist { font-size: 0.85em; color: #888; } #ui-bar { display: none; } #story { margin: 0; } </style> <div class="credit-wrapper"> <div style="margin-bottom: 80px;"> <h1 style="font-size: 2.5em; letter-spacing: 5px;">THE EMPTY SHOP</h1> <span style="font-size: 0.9em; color: #666;">(Ending Scenario)</span> </div> <div class="credit-section-title">Drama Club Cast</div> <div class="credit-name">Shinguji Hime</div> <div class="credit-name">Soshida Soshi</div> <div class="credit-name">Mozuki Ayumu</div> <div class="credit-name">Sumeragi Tsubaki</div> <div class="credit-name">Kawakami Suzuran</div> <div class="credit-name">Saionji Eri</div> <div class="credit-name">Hinohara Hanare</div> <div class="credit-name">Amanari Nene</div> <div class="credit-role" style="margin-top: 30px;">Club Advisor</div> <div class="credit-name">Tomoyo Emika</div> <div class="credit-section-title">Development Team</div> <div class="credit-role">Programming & Scenario</div> <div class="credit-name">Fuji S.</div> <div class="credit-role">Character & Scene Art</div> <div class="credit-name">Ciar</div> <div class="credit-name">Ma Meiilon</div> <div class="credit-name">Solei4</div> <div class="credit-role">Typography Design</div> <div class="credit-name">11.23</div> <div class="credit-section-title">Music Scores</div> <div class="song-entry"><div class="song-title">"117 - Painted Clouds"</div><div class="song-artist">composed by Sound Of Incense</div></div> <div class="song-entry"><div class="song-title">"合体ロボットダー！"</div><div class="song-artist">written by ma-kun</div></div> <div class="song-entry"><div class="song-title">"バックヤードで、一人"</div><div class="song-artist">written by 蒲鉾さちこ</div></div> <div class="song-entry"><div class="song-title">"ハンニバル"</div><div class="song-artist">written by 田中芳典</div></div> <div class="song-entry"><div class="song-title">"星空へ浮かぶランタン"</div><div class="song-artist">written by キュス</div></div> <div class="song-entry"><div class="song-title">"キンモクセイ"</div><div class="song-artist">written by ゆうきわたる</div></div> <div class="song-entry"><div class="song-title">"首領"</div><div class="song-artist">written by Heitaro Ashibe</div></div> <div class="song-entry"><div class="song-title">"Paper craft"</div><div class="song-artist">written by Tinymemory</div></div> <div class="song-entry"><div class="song-title">"魔法の館"</div><div class="song-artist">written by ゆうり (Yuli Audio Craft)</div></div> <div class="song-entry"><div class="song-title">"Crystal Fantasia"</div><div class="song-artist">written by えだまめ88</div></div> <div style="margin-top: 100px; margin-bottom: 500px;"> <div class="credit-role">And special thanks to</div> <h2 style="font-size: 2em; margin-top: 10px; color: #4db8ff;">YOU</h2> <div class="credit-role">for playing</div> </div> </div> <div class="end-button-container"> <<button "END?" "Post_Credit_Terminal">> <<masteraudio stop>> <</button>> </div> <</nobr>>

<<nobr>> /* สั่งหยุดเพลงทุกอย่าง */ <<masteraudio stop>> <style> /* นำเข้าฟอนต์ */ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Kanit:wght@300;400&display=swap'); body { background-color: #0d0d0d; margin: 0; overflow: hidden; font-family: 'Fira Code', monospace; color: #33ff00; text-shadow: 0 0 5px rgba(51, 255, 0, 0.7); } .terminal-container { padding: 40px; height: 90vh; overflow-y: auto; font-size: 1em; line-height: 1.4; } .sys-log { color: #008f11; font-size: 0.8em; opacity: 0.7; } .soshida-chat { color: #33ff00; font-family: 'Kanit', sans-serif; font-size: 1.2em; margin-top: 10px; display: block; font-weight: bold; } /* เคอร์เซอร์กระพริบตลอดกาล */ .cursor::after { content: "█"; animation: blink 1s infinite; margin-left: 5px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } #ui-bar { display: none; } #story { margin: 0; } </style> <div class="terminal-container" id="terminal"> /* --- PHASE 1: THE FLEX --- */ <<type 0ms>> <span class="sys-log"> > SOSHIDA_OS v.11.23 booting...<br> > MOUNTING VOLUME: /dev/soshi_drive<br> > CHECKING INTEGRITY... OK.<br> > LOADING MODULE: MANZAI_GENERATOR.exe... FAILED (Error 404: Too Funny)<br> > LOADING MODULE: SCENARIO_MANAGER... SUCCESS.<br> > ACCESSING MEMORY BLOCK: 0x84F3A...<br> > DUMPING CACHE FILES...<br> [====================] 100%<br> > CLEARING ASSETS: <br> > - remove puppet_face.png<br> > - remove spooky_sound.mp3<br> > - remove hope.dat<br> > SYSTEM STABLE.<br> > USER DETECTED.<br> > TARGET: $playerName<br> > INITIATING DELETION PROTOCOL...<br> > ...<br> > ...<br> </span> <</type>> /* --- PHASE 2: THE BREAK --- */ <<timed 2s>> <br> <<type 40ms>> > WAITING FOR USER INPUT...<br> <br> > // เอ๊ะ... เดี๋ยวสิ<br> <</type>> <</timed>> <<timed 4.5s>> <<type 60ms>> <span class="soshida-chat"> > // นี่เธอยังดูอยู่อีกเหรอ? $playerName?<br> > // นึกว่าสติแตก วิ่งหนีกลับบ้านไปฟ้องแม่แล้วซะอีกนะเนี่ย 5555<br> </span> <</type>> <</timed>> /* --- PHASE 3: THE JOKE --- */ <<timed 10s>> <br> <<type 50ms>> <span class="soshida-chat"> > // เป็นไงบ้างล่ะ? 'เกม'นี้ของฉัน...<br> > // หุ่นไม้นั่นน่ะ ฉันเรนเดอร์เองกับมือเลยนะ!<br> > // ตอนแรกกะจะใส่โค้ดให้มันลุกขึ้นมาเต้นแท็ปแดนซ์ส่งท้ายซะหน่อย<br> > // แต่กลัวเธอจะขำจนตายคาเก้าอี้ซะก่อน... เสียดายจังน้า~<br> </span> <</type>> <</timed>> /* --- PHASE 4: THE RESET --- */ <<timed 19s>> <br> <<type 30ms>> > SYSTEM ALERT: NEW PLAYER IN QUEUE.<br> <</type>> <<timed 1s>> <<type 50ms>> <span class="soshida-chat"> > // อุ๊ย ตายล่ะ... หมดเวลาโชว์เดี่ยวแล้วสิ<br> > // ต้องเคลียร์เวทีให้แขกคนต่อไปแล้วล่ะนะ<br> </span> <</type>> <</timed>> <<timed 4s>> <<type 50ms>> <span class="soshida-chat"> > // ส่วนข้อมูลของเธอ... ฉันจะช่วยลบให้แล้วกัน จะได้ไม่มีใครรู้ไงว่าเธอแอบหลงมา<br> > // (ถือว่าเป็นบริการพิเศษจากทางชมรมนะ อิอิ)<br> </span> <</type>> <</timed>> <<timed 9s>> <br> <<type 80ms>> > DELETE DATA: $playerName ... [COMPLETE]<br> > RESETTING WORLD... [COMPLETE]<br> <</type>> <</timed>> <<timed 13s>> <br> <<type 100ms>> <span class="soshida-chat" style="color: #fff; font-size: 1.5em;"> > // ถ้าคิดถึงกัน ก็แวะมาเล่นกันใหม่นะ! <br> > // ほな! (ไปล่ะ!)<br> </span> <</type>> <</timed>> /* --- PHASE 5: THE FINAL REQUEST --- */ <<timed 17s>> <br> <<type 100ms>> <span class="soshida-chat"> > // ...<br> > // ...อ้าว ยังอยู่อีกเหรอ?<br> </span> <</type>> <</timed>> <<timed 20s>> <br> <<type 60ms>> <span class="soshida-chat"> > // ลืมบอกไปอย่าง...<br> > // ถึงฉันจะเขียนโค้ดเทพแค่ไหน แต่ฉันก็สั่งปิด Browser ของเธอไม่ได้หรอกนะ!<br> > // (มันผิดกฏหมายไซเบอร์รู้ไหม!)<br> </span> <</type>> <</timed>> <<timed 26s>> <br> <<type 60ms>> <span class="soshida-chat"> > // เพราะงั้น... ช่วยกดปิดแท็บ (Tab) หรือกดกากบาทออกไปเองละกันนะ<br> > // อย่ามัวแต่นั่งจ้องจอดำๆ แบบนี้... มันเขินนะว้ยยย!<br> </span> <</type>> <</timed>> /* ปรับเวลา: ขยับเป็น 34s (จากเดิม 32s) ให้มีช่องว่างนิดนึง */ <<timed 34s>> <br> <<type 100ms>> <span class="soshida-chat"> > // ไปจริงๆ ละนะ มาต๊าานาา บ้ายบายยย<br> </span> <</type>> <</timed>> /* ปรับเวลา: ขยับเป็น 65s (จากเดิม 42s) ให้ข้อความ LOGOUT ขึ้นช้าลง */ <<timed 48s>> <br><br> > SYSTEM: LOGOUT SUCCESSFUL.<br> > CONNECTION TERMINATED.<br> <span class="cursor">_</span> <</timed>> <</timed>> </div> /* สคริปต์ให้หน้าจอเลื่อนลงตามตัวหนังสืออัตโนมัติ */ <<script>> $(document).on(':typingstart :typingstop', function () { var term = document.getElementById("terminal"); if(term) term.scrollTop = term.scrollHeight; }); <</script>> <</nobr>>