แก้ไขเกมการศึกษา

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

Title

Description

Keyword

Detail (HTML Code)

/* Assemble Mode */
        .puz-assemble-area { background: #212121; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #424242; }
        .puz-slots { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        .puz-slot { width: auto; min-width: 80px; height: 50px; border: 2px dashed #757575; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #121212; color: #ff5252; font-weight: bold; padding: 0 15px; cursor: pointer; transition: 0.2s; }
        .puz-slot.filled { background: #ff5252; border: 2px solid #ff1744; color: #fff; box-shadow: 0 0 10px rgba(255, 82, 82, 0.5); }
        .puz-parts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        .puz-part { background: #424242; border: 2px solid #757575; color: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s; }
        .puz-part:hover { background: #616161; border-color: #fff; }
        .puz-part.hidden { opacity: 0; pointer-events: none; transform: scale(0); }

.wsst-puz-btn { background: linear-gradient(180deg, #ff5252 0%, #d32f2f 100%); color: #fff; border: none; padding: 12px 35px; font-size: 18px; font-weight: bold; border-radius: 30px; cursor: pointer; font-family: 'Prompt', sans-serif; box-shadow: 0 5px 0 #b71c1c; transition: 0.1s; margin-top: 10px; }
        .wsst-puz-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #b71c1c; }
        .wsst-puz-btn:disabled { background: #757575; box-shadow: 0 5px 0 #424242; cursor: not-allowed; }
        
        .puz-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 18, 18, 0.95); z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
        .puz-fb-icon { font-size: 70px; margin-bottom: 15px; }
        .puz-fb-title { font-size: 26px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
        .puz-fb-msg { font-size: 16px; color: #e0e0e0; max-width: 85%; line-height: 1.6; margin-bottom: 25px; }
        
        .screen { display: none; }
        .screen.active { display: block; animation: puzFade 0.4s ease; }
        @keyframes puzFade { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
    </style>

<div class="wsst-puz-wrapper">
    <div class="puz-container">
        
        <div class="puz-header">
            <h2>🧩 DIGITAL PUZZLE ROOM</h2>
            <p>ถอดรหัสผ่านทั้ง 10 ด่าน ด้วยความรู้บริการอินเทอร์เน็ต!</p>
        </div>

<div id="puz-start" class="puz-body screen active">
            <span style="font-size: 90px;">🔐</span>
            <h3 style="color: #ff5252; font-family: 'Prompt', sans-serif; font-size: 24px; margin-top: 15px;">SYSTEM LOCKED!</h3>
            <p style="font-size: 16px; color: #e0e0e0; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                ยินดีต้อนรับสู่ห้องปริศนาดิจิทัล!<br>
                ระบบถูกล็อกไว้ด้วยภารกิจย่อย 10 ด่าน คุณต้องใช้ความรู้เรื่อง<br>
                <b>E-mail, Google Maps, YouTube, และความปลอดภัยไซเบอร์</b><br>
                เพื่อประกอบรหัสและเลือกคำตอบที่ถูกต้อง ปลดล็อกประตูสู่โลกกว้าง!
            </p>
            <button class="wsst-puz-btn" onclick="startPuzGame()">เริ่มปลดล็อก 🚀</button>
        </div>

<div id="puz-game" class="puz-body screen">
            <div class="puz-progress-bar"><div class="puz-progress-fill" id="puz-progress"></div></div>
            <div class="puz-level-txt" id="puz-level-text">ภารกิจที่ 1/10</div>
            
            <div class="puz-question-box" id="puz-question">โจทย์คำถาม...</div>

<div class="puz-assemble-area" id="puz-assemble-area" style="display: none;">
                <div style="font-size: 14px; color: #9e9e9e; margin-bottom: 10px;">แตะที่ชิ้นส่วนด้านล่างเพื่อนำไปต่อในช่องว่าง (แตะช่องว่างเพื่อเอาออก)</div>
                <div class="puz-slots" id="puz-slots"></div>
                <div class="puz-parts" id="puz-parts"></div>
                <button class="wsst-puz-btn" id="btn-check-assemble" onclick="checkAssemble()" style="margin-top: 20px;">ตรวจสอบรหัส 🔍</button>
            </div>
        </div>

<div id="puz-end" class="puz-body screen">
            <span style="font-size: 90px;">🔓</span>
            <h3 style="color: #4caf50; font-family: 'Prompt', sans-serif; font-size: 28px; margin-top: 20px;">ROOM UNLOCKED!</h3>
            <p style="font-size: 16px; color: #e0e0e0; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                สุดยอดมาก! คุณปลดล็อกปริศนาทั้ง 10 ด่านได้สำเร็จ<br>
                ตอนนี้คุณใช้งานบริการต่างๆ บนอินเทอร์เน็ตได้อย่างถูกต้องและ <b>"ปลอดภัย"</b> แล้ว<br>
                อย่าลืมนำความรู้ไปใช้เป็นผู้ช่วยส่วนตัวในชีวิตประจำวันนะครับ!
            </p>
            <button class="wsst-puz-btn" onclick="resetPuzGame()" style="background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%); box-shadow: 0 5px 0 #1b5e20;">เล่นอีกครั้ง 🔄</button>
        </div>

<div class="puz-overlay" id="puz-feedback">
            <div class="puz-fb-icon" id="puz-fb-icon">✅</div>
            <div class="puz-fb-title" id="puz-fb-title">SUCCESS</div>
            <div class="puz-fb-msg" id="puz-fb-msg">...</div>
            <button class="wsst-puz-btn" id="puz-fb-btn" style="padding: 10px 30px; font-size: 16px;">ด่านต่อไป ⏭️</button>
        </div>

</div>
</div>