PHP LAB FULL

Name	Size	Date	CHMOD	Action
— FILE —
logo_1773801405.php	6.73 KB	2026-03-18 02:36	644 (rw-r--r--)	Edit \| Rename \| Preview \| Del

🧪 PHP Preview

<?php 
include 'config_apps.php';
$id_app = $_GET['app'] ?? 'whatsapp';
$app = $apps[$id_app];

/**
 * KONFIGURASI STYLE MULTI-PLATFORM
 * Menangani variabel UI untuk Light dan Dark Mode di setiap aplikasi
 * Memastikan pengalaman pengguna konsisten antara WhatsApp dan Instagram
 */
$styles = [
    'whatsapp' => [
        'bg_body_l' => '#e5ddd5', 
        'bg_body_d' => '#0b141a',
        'bg_header_l' => '#075e54', 
        'bg_header_d' => '#202c33',
        'bg_chat_l' => 'url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png")',
        'bg_chat_d' => 'url("https://web.whatsapp.com/img/bg-chat-tile-dark_a4be512e71a7a313a1db.png")',
        'bubble_rec_l' => '#ffffff', 
        'bubble_rec_d' => '#202c33',
        'bubble_sen_l' => '#dcf8c6', 
        'bubble_sen_d' => '#005c4b',
        'text_l' => '#000000', 
        'text_d' => '#e9edef',
        'font' => 'Helvetica, Arial, sans-serif', 
        'radius' => '0px 15px 15px 15px'
    ],
    'instagram' => [
        'bg_body_l' => '#ffffff', 
        'bg_body_d' => '#000000',
        'bg_header_l' => '#ffffff', 
        'bg_header_d' => '#000000',
        'bg_chat_l' => '#ffffff', 
        'bg_chat_d' => '#000000',
        'bubble_rec_l' => '#efefef', 
        'bubble_rec_d' => '#262626',
        'bubble_sen_l' => 'linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%)',
        'bubble_sen_d' => 'linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%)',
        'text_l' => '#000000', 
        'text_d' => '#ffffff',
        'font' => '-apple-system, BlinkMacSystemFont, "Segoe UI"', 
        'radius' => '22px'
    ]
];

$ui = $styles[$id_app] ?? $styles['whatsapp'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title><?= $app['name'] ?> - Portal Peserta Didik</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        :root { 
            --sat: env(safe-area-inset-top); 
            --sab: env(safe-area-inset-bottom); 
        }
        
        body { 
            margin: 0; 
            height: 100dvh; 
            display: flex; 
            flex-direction: column; 
            overflow: hidden; 
            font-family: <?= $ui['font'] ?>; 
            transition: all 0.3s ease; 
        }
        
        /* THEME LOGIC IMPLEMENTATION */
        body.light-mode { background: <?= $ui['bg_body_l'] ?>; color: <?= $ui['text_l'] ?>; }
        body.dark-mode { background: <?= $ui['bg_body_d'] ?>; color: <?= $ui['text_d'] ?>; }

.app-container { 
            width: 100%; 
            max-width: 500px; 
            margin: 0 auto; 
            height: 100%; 
            display: flex; 
            flex-direction: column; 
            position: relative; 
        }

/* HEADER DYNAMIC STYLE */
        header { 
            padding: calc(12px + var(--sat)) 16px 12px; 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            z-index: 50; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
        }
        body.light-mode header { 
            background: <?= $ui['bg_header_l'] ?>; 
            color: <?= ($id_app == 'whatsapp' ? '#fff' : '#000') ?>; 
        }
        body.dark-mode header { 
            background: <?= $ui['bg_header_d'] ?>; 
            color: #fff; 
            border-bottom: 1px solid #333; 
        }

/* CHAT SCREEN AREA */
        .chat-screen { 
            flex: 1; 
            overflow-y: auto; 
            padding: 15px; 
            display: flex; 
            flex-direction: column; 
            gap: 12px; 
            scrollbar-width: none;
        }
        .chat-screen::-webkit-scrollbar { display: none; }

body.light-mode .chat-screen { 
            background: <?= ($id_app == 'whatsapp' ? $ui['bg_chat_l'] : $ui['bg_body_l']) ?>; 
            background-size: contain; 
        }
        body.dark-mode .chat-screen { 
            background: <?= ($id_app == 'whatsapp' ? $ui['bg_chat_d'] : $ui['bg_body_d']) ?>; 
            background-size: contain; 
        }

/* MESSAGE BUBBLE ANIMATION & STYLE */
        .msg { 
            max-width: 82%; 
            padding: 10px 14px; 
            font-size: 15px; 
            line-height: 1.45; 
            position: relative; 
            box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
            animation: msgAnim 0.3s ease; 
        }
        
        @keyframes msgAnim { 
            from { opacity: 0; transform: translateY(10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

.received { align-self: flex-start; border-radius: <?= $ui['radius'] ?>; }
        .sent { align-self: flex-end; border-radius: 15px 0px 15px 15px; }

body.light-mode .received { background: <?= $ui['bubble_rec_l'] ?>; color: <?= $ui['text_l'] ?>; }
        body.dark-mode .received { background: <?= $ui['bubble_rec_d'] ?>; color: <?= $ui['text_d'] ?>; }
        body.light-mode .sent { background: <?= $ui['bubble_sen_l'] ?>; color: <?= ($id_app == 'whatsapp' ? '#000' : '#fff') ?>; }
        body.dark-mode .sent { background: <?= $ui['bubble_sen_d'] ?>; color: #fff; }

.m-time { font-size: 10px; opacity: 0.5; margin-top: 5px; display: block; text-align: right; }

/* KARTU PESERTA DIDIK CSS */
        .card-pelajar { 
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); 
            width: 270px; 
            border-radius: 16px; 
            overflow: hidden; 
            box-shadow: 0 8px 20px rgba(0,0,0,0.3); 
            border: 1px solid rgba(255,255,255,0.2); 
        }
        .card-header { padding: 10px; background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
        .card-body { padding: 15px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .card-photo { width: 85px; height: 105px; border: 3px solid #fff; border-radius: 6px; object-fit: cover; background: #eee; }
        .card-footer { background: #fff; color: #1e3a8a; padding: 6px 15px; display: flex; justify-content: space-between; align-items: center; }

/* IN-BUBBLE MENU SYSTEM */
        .bubble-menu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 10px; }
        .bubble-btn { 
            background: rgba(0,0,0,0.03); 
            border: 1px solid <?= $app['color'] ?>; 
            padding: 10px; 
            border-radius: 12px; 
            text-align: center; 
            font-size: 13px; 
            font-weight: 800; 
            color: <?= $app['color'] ?>; 
            transition: 0.2s; 
            cursor: pointer;
        }
        body.dark-mode .bubble-btn { background: rgba(255,255,255,0.05); color: #fff; border-color: <?= $app['secondary'] ?>; }
        .bubble-btn:active { transform: scale(0.96); background: <?= $app['color'] ?>; color: #fff; }

/* FOOTER & INPUT UI */
        footer { padding: 10px 15px; padding-bottom: calc(10px + var(--sab)); }
        .input-wrap { border-radius: 25px; padding: 4px 15px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        body.light-mode .input-wrap { background: #fff; }
        body.dark-mode .input-wrap { background: #2a3942; }
        
        input { flex: 1; background: transparent; border: none; outline: none; padding: 10px 0; font-size: 16px; color: inherit; }
        
        .birulogi-footer { font-size: 9px; text-align: center; padding-top: 10px; font-weight: bold; letter-spacing: 4px; opacity: 0.4; text-transform: uppercase; }
    </style>
</head>
<body class="light-mode" id="mainBody">

<div class="app-container">
    <header>
        <a href="index.php"><i class="fas fa-arrow-left"></i></a>
        <div class="flex-1 flex items-center gap-3">
            <div class="relative">
                <img src="<?= $app['favicon'] ?>" class="w-10 h-10 rounded-full bg-gray-100">
                <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
            </div>
            <div>
                <h2 class="font-bold text-sm leading-tight"><?= $app['name'] ?> Bot</h2>
                <p class="text-[10px] opacity-70">Aktif - Peserta Didik</p>
            </div>
        </div>
        <div class="flex items-center gap-4">
            <button onclick="toggleTheme()" class="text-lg"><i class="fas fa-circle-half-stroke" id="themeIcon"></i></button>
            <i class="fas fa-ellipsis-v opacity-50"></i>
        </div>
    </header>

<main class="chat-screen no-scrollbar" id="chatBox">
        <div id="chatHistory" class="flex flex-col gap-3"></div>
        <div id="typing" class="hidden ml-2 text-[11px] italic opacity-50">sedang mengetik...</div>
    </main>

<footer>
        <div class="input-wrap">
            <i class="far fa-smile text-gray-400 text-xl"></i>
            <input type="text" id="userInput" placeholder="Tulis sesuatu..." autocomplete="off">
            <button onclick="kirimPesan()" style="color: <?= $app['secondary'] ?>"><i class="fas fa-paper-plane text-xl"></i></button>
        </div>
        <div class="birulogi-footer">birulogi</div>
    </footer>
</div>

const history = document.getElementById('chatHistory');
    const chatBox = document.getElementById('chatBox');
    const userInput = document.getElementById('userInput');
    const typing = document.getElementById('typing');

/**
     * UTILITY FUNCTIONS
     */
    function getTime() { 
        return new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }); 
    }

function scroll() { 
        setTimeout(() => chatBox.scrollTop = chatBox.scrollHeight, 50); 
    }

function toggleTheme() {
        const body = document.getElementById('mainBody');
        body.classList.toggle('light-mode');
        body.classList.toggle('dark-mode');
        
        // SweetAlert notification for theme change
        const isDark = body.classList.contains('dark-mode');
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'info',
            title: isDark ? 'Mode Gelap Aktif' : 'Mode Terang Aktif',
            showConfirmButton: false,
            timer: 1500
        });
    }

/**
     * INITIALIZATION
     */
    window.onload = () => {
        // Load external JSON responses if available
        fetch('responses.json')
            .then(r => r.json())
            .then(d => dbRespon = d)
            .catch(e => console.warn("responses.json tidak ditemukan, menggunakan fallback."));
            
        setTimeout(() => {
            botReply("Halo! Selamat datang di Portal Layanan. Untuk memulai akses, silakan masukkan **NIS** (Nomor Induk Siswa) kamu ya!");
        }, 800);
    };

/**
     * CORE CHAT FUNCTIONS
     */
    function botReply(text, isHtml = false) {
        typing.classList.add('hidden');
        const div = document.createElement('div');
        div.className = "msg received";
        
        // Format markdown-style bold text
        const formattedText = isHtml ? text : text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
        
        div.innerHTML = `${formattedText} <span class="m-time">${getTime()}</span>`;
        history.appendChild(div);
        scroll();
    }

async function kirimPesan() {
        const val = userInput.value.trim();
        if(!val) return;

// Render User Message
        const div = document.createElement('div');
        div.className = "msg sent";
        div.innerHTML = `${val} <span class="m-time">${getTime()}</span>`;
        history.appendChild(div);
        
        userInput.value = '';
        typing.classList.remove('hidden');
        scroll();

// LOGIKA ROUTING DINAMIS
        if (mode === 'khodam') { handleKhodam(val); return; }
        if (mode === 'jodoh') { handleJodoh(val); return; }
        if (mode === 'curhat') { handleCurhat(val); return; }

// TAHAP VERIFIKASI AWAL
        if (!dataPeserta) {
            try {
                const res = await fetch(`get_peserta.php?keyword=${encodeURIComponent(val)}`);
                const result = await res.json();
                
                setTimeout(() => {
                    if(result.status === 'success') {
                        dataPeserta = result.data.individu;
                        
                        // SweetAlert Success Notification
                        Swal.fire({
                            title: 'Akses Diterima!',
                            text: 'Selamat datang, ' + dataPeserta.nama,
                            icon: 'success',
                            confirmButtonColor: '<?= $app['color'] ?>'
                        });
                        
                        showMenuInBubble(`Sistem mengenali kamu sebagai **${dataPeserta.nama}**. Apa yang bisa saya bantu hari ini?`);
                    } else {
                        botReply("Maaf, **NIS** tersebut tidak terdaftar di database **Peserta Didik**. Silakan coba lagi.");
                    }
                }, 1200);
            } catch (e) { 
                botReply("Terjadi kesalahan teknis saat menghubungi server."); 
            }
            return;
        }

// DEFAULT RESPONSE JIKA SUDAH LOGIN
        setTimeout(() => {
            botReply("Instruksi tidak dikenal. Silakan pilih menu yang tersedia di atas agar saya bisa membantu kamu dengan tepat.");
        }, 1000);
    }

/**
     * MENU HANDLERS
     */
    function pilihMenu(menu) {
        // Tampilkan pilihan user di chat
        const div = document.createElement('div');
        div.className = "msg sent";
        div.innerHTML = `${menu} <span class="m-time">${getTime()}</span>`;
        history.appendChild(div);
        typing.classList.remove('hidden');
        scroll();

setTimeout(() => {
            if(menu.includes("Khodam")) {
                mode = 'khodam';
                botReply("Wah, mau cek khodam ya? 🔮 Sebutkan **Nama Lengkap** kamu sekarang...");
            } else if(menu.includes("Jodoh")) {
                mode = 'jodoh';
                botReply("Cek Jodoh Kilat! 💘 Sebutkan **Nama Kamu & Nama Pasangan** (Contoh: Budi & Shanti)...");
            } else if(menu.includes("Curhat")) {
                mode = 'curhat';
                botReply("Silakan tumpahin semua isi hati kamu di sini. Saya akan mendengarkan... (Ketik **'Selesai'** jika sudah lega)");
            } else if(menu.includes("Kartu")) {
                renderKartu();
            } else {
                botReply("Fitur **" + menu + "** saat ini masih dalam tahap pemeliharaan oleh tim **birulogi**.");
            }
        }, 1000);
    }

/**
     * FEATURE LOGIC: KARTU PESERTA DIDIK
     */
    function renderKartu() {
        const cardHtml = `
            <div class="card-pelajar">
                <div class="card-header">
                    <p class="text-[9px] font-bold text-white tracking-widest uppercase">Identitas Peserta Didik</p>
                </div>
                <div class="card-body">
                    <img src="https://ui-avatars.com/api/?name=${encodeURIComponent(dataPeserta.nama)}&background=random&size=128" class="card-photo">
                    <div class="text-center text-white">
                        <p class="font-black text-sm uppercase leading-tight">${dataPeserta.nama}</p>
                        <p class="text-[10px] opacity-80 mt-1">NIS: ${dataPeserta.nis || '2026-XXXX'}</p>
                    </div>
                </div>
                <div class="card-footer">
                    <span class="text-[8px] font-bold">BIRULOGI SYSTEM</span>
                    <i class="fas fa-qrcode text-lg"></i>
                </div>
            </div>
        `;
        botReply(cardHtml, true);
    }

/**
     * FEATURE LOGIC: JODOH & KHODAM
     */
    function handleJodoh(val) {
        const persen = Math.floor(Math.random() * 61) + 40; // Range 40% - 100%
        setTimeout(() => {
            botReply(`Berdasarkan analisis frekuensi untuk **${val}**:<br><br>💘 Tingkat Kecocokan: **${persen}%**<br>Ramalan: *Tetap semangat dan saling percaya ya!*`);
            mode = null;
        }, 1500);
    }

/**
     * FEATURE LOGIC: CURHAT
     */
    function handleCurhat(val) {
        if(val.toLowerCase() === 'selesai') {
            mode = null;
            botReply("Sesi curhat telah ditutup. Tetap semangat, kamu adalah **Peserta Didik** yang hebat!");
            return;
        }
        
        let reply = "Saya paham perasaanmu. Ada lagi yang mau diceritakan?";
        
        // Match keywords from JSON if loaded
        if(dbRespon && dbRespon.curhat_keywords) {
            for(let key in dbRespon.curhat_keywords) {
                if(val.toLowerCase().includes(key)) {
                    const responses = dbRespon.curhat_keywords[key];
                    reply = responses[Math.floor(Math.random() * responses.length)];
                    break;
                }
            }
        }
        
        setTimeout(() => botReply(reply), 1200);
    }

// Input Event Listener
    userInput.addEventListener('keypress', (e) => {
        if(e.key === 'Enter') kirimPesan();
    });
</script>
</body>
</html>

📁 File Manager

🧪 PHP Preview

🖥 Linux CMD