⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.124
Server IP:
50.28.103.30
Server:
Linux host.jcukjv-lwsites.com 4.18.0-553.22.1.el8_10.x86_64 #1 SMP Tue Sep 24 05:16:59 EDT 2024 x86_64
Server Software:
nginx/1.28.0
PHP Version:
8.3.12
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
www
/
wwwroot
/
ef.electronharmony.com
/
1
/
T13
/
View File Name :
index.php
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>命令进入 + 图片弹窗（同页）</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> <style> body{background:#f4f6fb} /* 进入卡片 */ .gate-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; } .gate-card{ width:min(90vw,520px); border:0; box-shadow:0 10px 30px rgba(18,38,63,.08); border-radius:18px; } /* 主应用外观 */ .app-wrap{ display:none; } /* 通过后显示 */ .card{border:0; box-shadow:0 2px 12px rgba(18,38,63,.06)} .table td,.table th{padding:1.1rem} .row-hover:hover{background:#f2f7ff} .avatar{ width:44px;height:44px;border-radius:50%;object-fit:cover;cursor:pointer; box-shadow:0 0 0 2px #fff, 0 0 0 3px #e9eef5; } .badge-soft{background:rgba(25,135,84,.1);color:#198754} .badge-soft-warn{background:rgba(255,193,7,.15);color:#d39e00} .badge-soft-info{background:rgba(13,202,240,.15);color:#0aa2c0} .badge-soft-danger{background:rgba(220,53,69,.12);color:#dc3545} .badge-soft-primary{background:rgba(13,110,253,.12);color:#0d6efd} /* 轻微抖动动画（输错时） */ .shake{animation:shake .28s linear 1} @keyframes shake{ 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} } </style> </head> <body> <!-- ======= 进入门禁（同页） ======= --> <section id="gate" class="gate-wrap"> <div class="card gate-card"> <div class="card-body p-4 p-md-5"> <h4 class="fw-bold mb-3 text-center">输入命令</h4> <form id="gateForm" novalidate> <div class="mb-3"> <input id="cmdInput" type="password" class="form-control form-control-lg" placeholder="例如：simmer888" autocomplete="off" required> <div class="invalid-feedback">命令不正确，请重试。</div> </div> <button class="btn btn-primary btn-lg w-100" type="submit">进入</button> <div class="form-text mt-2 text-center">提示：区分大小写可在脚本中设置；当前示例大小写不敏感。</div> </form> </div> </div> </section> <!-- ======= 主应用：你的图片弹窗表格 ======= --> <section id="app" class="app-wrap container py-4"> <div class="card"> <div class="card-body"> <h5 class="mb-3">Sales（点击头像看大图）</h5> <div class="table-responsive"> <table class="table align-middle"> <thead class="text-secondary"> <tr> <th style="width:110px;">#</th> <th>Sale Rep.</th> <th style="width:140px;">Status</th> <th style="width:220px;">Dates</th> <th style="width:90px;" class="text-end">Action</th> </tr> </thead> <tbody class="bg-white"> <tr class="row-hover"> <td class="fw-semibold text-secondary">#741258</td> <td> <div class="d-flex align-items-center gap-3"> <img class="avatar" src="https://picsum.photos/id/64/200/200" data-bs-toggle="modal" data-bs-target="#imgModal" data-img="https://picsum.photos/id/64/900/900" data-title="Archie Tones" data-status="Completed" alt=""> <div> <div class="fw-semibold">Archie Tones</div> <div class="text-secondary small">archie.ones@email.com</div> </div> </div> </td> <td><span class="badge rounded-pill badge-soft">Completed</span></td> <td>15/06/2023, 12:15PM</td> <td class="text-end"><button class="btn btn-sm text-secondary"><i class="bi bi-three-dots-vertical"></i></button></td> </tr> <tr class="row-hover"> <td class="fw-semibold text-secondary">#789654</td> <td> <div class="d-flex align-items-center gap-3"> <img class="avatar" src="https://picsum.photos/id/1027/200/200" data-bs-toggle="modal" data-bs-target="#imgModal" data-img="https://picsum.photos/id/1027/1000/1000" data-title="Holmes Cherry" data-status="Pending" alt=""> <div> <div class="fw-semibold">Holmes Cherry</div> <div class="text-secondary small">holmes.herry@email.com</div> </div> </div> </td> <td><span class="badge rounded-pill badge-soft-warn">Pending</span></td> <td>20/06/2023, 12:15PM</td> <td class="text-end"><button class="btn btn-sm text-secondary"><i class="bi bi-three-dots-vertical"></i></button></td> </tr> <tr class="row-hover"> <td class="fw-semibold text-secondary">#951236</td> <td> <div class="d-flex align-items-center gap-3"> <img class="avatar" src="https://picsum.photos/id/1005/200/200" data-bs-toggle="modal" data-bs-target="#imgModal" data-img="https://picsum.photos/id/1005/1100/1100" data-title="Kenneth Hune" data-status="Scheduled" alt=""> <div> <div class="fw-semibold">Kenneth Hune</div> <div class="text-secondary small">kenneth.une@email.com</div> </div> </div> </td> <td><span class="badge rounded-pill badge-soft-info">Scheduled</span></td> <td>18/06/2023, 12:15PM</td> <td class="text-end"><button class="btn btn-sm text-secondary"><i class="bi bi-three-dots-vertical"></i></button></td> </tr> </tbody> </table> </div> </div> </div> </section> <!-- 图片预览弹窗 --> <div class="modal fade" id="imgModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content border-0"> <div class="modal-header"> <div> <div class="fw-semibold" id="imgTitle">预览</div> <div class="small"> <span class="badge rounded-pill me-2" id="imgStatus">Status</span> <span class="text-secondary">点击外侧或 ESC 关闭</span> </div> </div> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button> </div> <div class="modal-body p-0"> <img id="imgPreview" src="" alt="" class="img-fluid w-100"> </div> </div> </div> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script> /* ===== 门禁逻辑（同页） ===== */ // 在这里设置允许的命令（不区分大小写） const VALID_COMMANDS = ['simmer888', '8888', 'guest']; const gate = document.getElementById('gate'); const app = document.getElementById('app'); const form = document.getElementById('gateForm'); const input = document.getElementById('cmdInput'); // 已经通过则直接进入（同一浏览器会话） if (sessionStorage.getItem('gate_ok') === '1') { gate.style.display='none'; app.style.display='block'; } form.addEventListener('submit', e=>{ e.preventDefault(); const v = (input.value || '').trim().toLowerCase(); const ok = VALID_COMMANDS.map(s=>s.toLowerCase()).includes(v); if(ok){ sessionStorage.setItem('gate_ok','1'); gate.classList.remove('shake'); gate.style.display='none'; app.style.display='block'; }else{ input.classList.add('is-invalid'); gate.classList.remove('shake'); // 触发抖动动画 void gate.offsetWidth; gate.classList.add('shake'); setTimeout(()=>input.classList.remove('is-invalid'), 1200); } }); /* ===== 图片弹窗逻辑 ===== */ const statusColor = { 'Completed':'badge-soft','Pending':'badge-soft-warn', 'Scheduled':'badge-soft-info','Cancelled':'badge-soft-danger', 'Progress':'badge-soft-primary' }; document.querySelectorAll('img.avatar[data-bs-target="#imgModal"]').forEach(img=>{ img.addEventListener('click', ()=>{ const big = img.dataset.img || img.src; const title = img.dataset.title || '预览'; const status = img.dataset.status || ''; document.getElementById('imgPreview').src = big; document.getElementById('imgTitle').textContent = title; const s = document.getElementById('imgStatus'); s.textContent = status || '—'; s.className = 'badge rounded-pill ' + (statusColor[status] || 'text-bg-secondary'); }); }); </script> </body> </html>