无废话，附上预览图以及单页html代码，有兴趣的可以另存本地调试看看：
附件HTML代码：
下载附件或是复制下方代码都一样:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>希米3D图册系统</title>
<style>
:root {
/* 🪐 全面平移前台暗色背景参数，绝对不发白，烘托极致极客感 */
--bg-dark: #030712; /* 极深暗夜黑 */
--bg-light: #0a1324; /* 深沉钴蓝核心层 */
/* 🎛️ 中间容器：打造高透全息毛玻璃 */
--panel-bg: rgba(28, 49, 88, 0.65);
--border-neon: rgba(0, 242, 254, 0.55); /* 强化激光边缘线的亮度和存在感 */
/* 🎨 核心霓虹点缀色 */
--neon-blue: #00f2fe; /* 冰川锐利蓝 */
--neon-green: #05f3a0; /* 碧绿全息光 */
--text-light: #ffffff;
--text-muted: #a3c3f5;
--accent-red: #ff4a6b;
}
body {
background-color: var(--bg-dark);
background-image: linear-gradient(rgba(0, 242, 254, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 254, 0.02) 1px, transparent 1px);
background-size: 40px 40px;
color: var(--text-light);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0;
padding: 40px 20px;
min-height: 100vh;
box-sizing: border-box; }
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
background: var(--panel-bg);
clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
border: 1px solid var(--border-neon);
padding: 40px;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), inset 0 0 35px rgba(0, 242, 254, 0.25), 0 0 40px rgba(0, 242, 254, 0.1);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
position: relative;
}
h1 {
font-size: 24px; font-weight: 700; letter-spacing: 2px; margin-top: 0; padding-bottom: 16px;
color: #fff; text-shadow: 0 0 10px rgba(0,242,254,0.4); border-bottom: 1px solid rgba(0, 242, 254, 0.3);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
}
h2 {
font-size: 16px; color: var(--neon-blue); font-weight: 600; margin-top: 0; margin-bottom: 20px;
text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px;
}
/*h2::before { content: '//'; color: var(--neon-green); font-weight: bold; }*/
.form-section {
background: rgba(13, 25, 48, 0.7);
border: 1px solid rgba(0, 242, 254, 0.25);
padding: 25px;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.1);margin-bottom: 25px;
}
.file-upload-wrapper { position: relative; width: 100%; margin: 15px 0; }
.file-upload-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 20px;
background: var(--bg-input);
border: 2px dashed rgb(0 242 254 / 81%);
border-radius: 0px;
/* clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); */
box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.1);
cursor: pointer;
transition: all 0.25s ease;
color: var(--neon-blue);
font-weight: 500;
}
.file-upload-label:hover {
background: rgba(0, 242, 254, 0.05); border-color: var(--neon-green); color: var(--neon-green);
box-shadow: 0 0 15px rgba(5, 243, 160, 0.1);
}
.file-upload-wrapper input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.progress-container {
margin: 20px 0; display: none; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.progress-bar-bg { width: 100%; height: 6px; background: #0d1326; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.progress-bar-fill {
width: 0%; height: 100%; background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
transition: width 0.1s linear; box-shadow: 0 0 8px var(--neon-blue);
}
.upload-status-text { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted); font-family: monospace; }
.upload-log-box {
max-height: 150px; overflow-y: auto; background: #070a14; border-radius: 6px;
padding: 10px; font-family: monospace; font-size: 11px; color: #8ba2d4; margin-top: 10px; border: 1px solid rgba(0,0,0,0.5);
}
.log-line { margin: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }
.log-success { color: var(--neon-green); }
.log-error { color: var(--neon-red); }
button, input[type="submit"], .btn-link {
background: linear-gradient(135deg, #00c6ff, #0072ff);
color: #fff;
padding: 11px 24px;
border: none;
/* border-radius: 6px; */
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0, 114, 255, 0.3);
display: inline-block;
text-decoration: none;
text-align: center;
margin-top: 8px;
margin-right: 6px;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
border: 1px solid rgba(5, 243, 160, 0.5) ;
border-radius: 0px !important;
background: linear-gradient(135deg, rgba(5, 243, 160, 0.25) 0%, rgba(0, 120, 80, 0.4) 100%);
}
button:hover, input[type="submit"]:hover, .btn-link:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,242,254,0.4);
/* clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 100%, 8px 100%);*/
background: linear-gradient(135deg, rgba(5, 243, 160, 0.45) 0%, rgba(5, 243, 160, 0.15) 100%);
box-shadow: 0 0 25px rgba(5, 243, 160, 0.5);
text-shadow: 0 0 12px #fff;
transform: scale(1.02);}
.btn-action-green { box-shadow: 0 2px 8px rgba(5,243,160,0.2); }
.btn-action-grey { background: rgba(255,255,255,0.08); color: var(--color-text); border: 1px solid rgba(255,255,255,0.1); box-shadow: none; }
.btn-action-grey:hover { background: rgba(255,255,255,0.15); color: #fff; box-shadow: none; }
.btn-action-red {
background: linear-gradient(135deg, #ff3860a1, #b51733c2);
box-shadow: 0 2px 8px rgba(255, 56, 96, 0.2);
}
.btn-preview-nav {
text-decoration: none !important; border-bottom: none !important; background: transparent; color: var(--neon-blue);
border: 1px solid var(--neon-blue); padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 500;
box-shadow: inset 0 0 4px rgba(0,242,254,0.2);
}
.btn-preview-nav:hover { background: var(--neon-blue); color: var(--bg-base); text-decoration: none !important; box-shadow: 0 0 12px var(--neon-blue); }
.tips-panel { background: rgba(245, 158, 11, 0.06); border-left: 3px solid #f59e0b; padding: 14px; border-radius: 0 8px 8px 0; font-size: 13px; color: #e0a94b; margin: 12px 0; }
.message.error { background: rgba(255,56,96,0.1); border: 1px solid var(--neon-red); color: #fb0000ba;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
box-shadow: inset 0 0 20px rgb(0 242 254 / 81%); }
.message.success {
background: rgba(5, 243, 160, 0.1);
/* border: 1px solid var(--neon-green); */
color: #05ba1d;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
box-shadow: inset 0 0 20px rgb(0 242 254 / 81%);
}
.message {
padding: 12px;
margin-bottom: 20px;
/* border-radius: 6px; */
font-size: 14px;
font-weight: 600;
text-align: center;
}
.recommend-box {
background: rgba(5, 243, 160, 0.04);
border: .5px dashed rgba(5, 243, 160, 0.25);
/* border-radius: 8px; */
padding: 12px 16px;
margin-bottom: 20px;
font-size: 13px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.1);
}
.gallery-toolbar { padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; }
.image-gallery { display: flex; flex-wrap: wrap; gap: 14px; }
.gallery-item { display: flex; flex-direction: column; width: 105px; }
.image-container { position: relative; width: 105px; height: 105px; background: #090d1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; transition: all 0.25s ease; }
.image-container img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* 1. 强制定义删除按钮的默认状态（严格锁定尺寸与外观） */
.image-container button.delete-button {
position: absolute !important;
top: 4px !important;
right: 4px !important;
background: rgba(239, 68, 68, 0.9) !important;
color: white !important;
border: none !important;
font-size: 10px !important;
font-weight: bold !important;
cursor: pointer !important;
padding: 2px 6px !important;
border-radius: 4px !important;
z-index: 10 !important;
transition: background 0.2s !important;
/* 强力防御重置：防止被其他地方的赛博朋克特殊裁切、阴影破坏 */
width: auto !important;
height: auto !important;
box-shadow: none !important;
clip-path: none !important;
transform: none !important;
text-shadow: none !important;
}
/* 2. 强力隔离悬停状态：仅允许略微变亮，彻底阻断流光、变形、放大的污染 */
.image-container button.delete-button:hover {
filter: brightness(1.2) !important;
background: rgba(239, 68, 68, 1) !important;
/* 强力防御重置：彻底消除 scale(1.02) 和 clip-path 变形 */
transform: none !important;
box-shadow: none !important;
clip-path: none !important;
text-shadow: none !important;
}
.image-container:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #cbd5e1;
}
.image-container .select-box { position: absolute; bottom: 4px; left: 4px; width: 15px; height: 15px; accent-color: var(--neon-blue); z-index: 5; cursor: pointer; }
.image-filename { font-size: 11px; text-align: center; margin-top: 5px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input[type="text"], textarea {
width: 100%;
margin-top: 6px;
transition: all 0.2s;
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 242, 254, 0.3);
padding: 10px 14px;
color: #fff;
font-family: monospace;
font-size: 13px; }
input[type="text"]:focus, textarea:focus { border-color: var(--neon-blue); box-shadow: 0 0 8px rgba(0,242,254,0.2); outline: none; }
.preview-modal {
display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;
background: rgba(5,7,14,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease;
}
.preview-modal.show { display: flex; opacity: 1; }
.preview-content { max-width: 90%; max-height: 90%; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.8); }
.preview-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 35px; cursor: pointer; }
.btn-action-red:hover {
transform: scale(1.02);
background: linear-gradient(135deg, #ff3860a1, #b51733c2);
box-shadow: 0 2px 8px rgba(255, 56, 96, 0.2);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="container">
<h1>
<span>希米3D图册系统 <span style="font-size:12px; color:var(--neon-green); vertical-align:middle; margin-left:8px;">● CORE_CONNECTED</span></span>
<span style="font-size:14px; font-weight:normal;">
<a href="../" target="_blank" class="cyber-btn" style="
padding: 3px 10px;
background: #00c6ffa1;
">👁️ 预览相册</a>
<a href="?logout" class="cyber-btn" style="
padding: 3px 10px;
background: linear-gradient(135deg, #ff3860, #b51733);
box-shadow: 0 2px 8px rgba(255, 56, 96, 0.2); min-width: 76px;">⚙️ 退出系统 </a>
</span>
</h1>
<div class="recommend-box">
<div>
<strong style="color:var(--neon-green)">⚡ 工具推荐：</strong>
图册的长宽比例如果不一致，前台展示可能产生变形。建议使用轻量批量处理软件 <span style="color:#fff; font-weight:600">PicSizer</span> 预先一键裁剪/统一尺寸。
</div>
<a href="https://www.ximi.me/down.php?url=PicSizer%20v4.9.3.7z" class="cyber-btn" style="margin:0; padding:6px 14px; font-size:12px;" target="_blank">📥 获取工具组件 (PicSizer v4.9.3)</a>
</div>
<div class="form-section">
<h2>📤 量子图像资产流式注入</h2>
<div class="tips-panel">
<strong>⚠️ 上传协议：</strong>所有上传图片单张请勿超过 <strong>5MB</strong>；单次并发吞吐请勿超过 <strong>50张</strong>。多图请分批次压入。上传前请<b>先统一长宽比例尺寸</b>，避免前台书页显示变形、产生空白边缘。
</div>
<div class="file-upload-wrapper">
<div class="file-upload-label" id="drop_zone">
<span style="font-size: 24px; margin-bottom: 5px;">🚀</span>
<span id="upload_select_text">点击此块级区域或拖拽多枚 JPG 图片至此开始挂载</span>
<span style="font-size: 11px; opacity:0.6; margin-top:5px;">(仅限标准扩展名为 .jpg 的图像)</span>
</div>
<input type="file" id="ajax_file_input" multiple accept=".jpg,image/jpeg">
</div>
<div style="margin: 15px 0;">
<label style="display:inline-flex; align-items:center; cursor:pointer; margin-right:25px;">
<input type="checkbox" id="ajax_autorename" checked style="accent-color:var(--neon-blue); margin-right:6px;"> 上传时自动递增数字命名 (推荐)
</label>
<label style="display:inline-flex; align-items:center; cursor:pointer;">
<input type="checkbox" id="ajax_overwrite" style="accent-color:var(--neon-blue); margin-right:6px;"> 覆盖同名纯数字文件 (需源文件为数字.jpg)
</label>
</div>
<button type="button" class="btn-action-green" id="start_upload_btn" style="width:100%; padding:12px; font-size:14px;">⚡ 开始异步极速并发上传</button>
<div class="progress-container" id="upload_monitor">
<div class="upload-status-text">
<span id="monitor_title">正在接通链路...</span>
<span id="monitor_percentage">0%</span>
</div>
<div class="progress-bar-bg">
<div class="progress-bar-fill" id="monitor_progress_fill"></div>
</div>
<div class="upload-log-box" id="monitor_log"></div>
</div>
</div>
<div class="form-section">
<h2>⚙️ 控制台综合指令块 </h2>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<form method="POST" style="margin: 0;" id="console_cmd_form">
<input type="hidden" name="action_cmd" id="action_cmd" value="">
<button type="button" id="btn_reindex" class="btn-action-green">
⚙️ 修复重排物理序号并同步
</button>
<button type="button" id="btn_rebuild" class="btn-link btn-action-grey">
🖼️ 重构全图层缩略图
</button>
<button type="submit" name="pack_album" class="btn-link" style="background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow:0 2px 8px rgba(139,92,246,0.3)">
📦 一键打包并下载本相册
</button>
</form>
</div>
</div>
<div class="form-section">
<h2>🖼️ 全息图元矩阵资产台面 (当前并网数: 18 枚)</h2>
<form method="POST" id="gallery_form">
<input type="hidden" name="delete_action" value="1">
<input type="hidden" name="single_delete_file" id="single_delete_file" value="">
<div class="batch-action-bar">
<label style="display: inline-flex;align-items: center;cursor: pointer;user-select: none;font-size: 14px;padding: 18px 9px 8px 5px;">
<input type="checkbox" id="select_all" onclick="toggleSelectAll(this)" style="margin-right: 8px; transform: scale(1.1); cursor:pointer;">
<span>锁定并连选全部量子图元</span>
</label>
<button type="submit" class="cyber-btn cyber-btn-danger"
onclick="return confirm('🚨 警告：此举将降维打击摧毁全部勾选的图像资产，确认执行物理抹除吗？');">
🗑️ EXECUTE BATCH NUKE · 批量执行清除
</button>
</div>
<div class="photo-gallery-deck">
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="1.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/1.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/1.jpg" alt="1.jpg">
</div>
<div class="photo-meta-info">
<span title="1.jpg">#0 (435.5k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('1.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="2.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/2.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/2.jpg" alt="2.jpg">
</div>
<div class="photo-meta-info">
<span title="2.jpg">#1 (377.2k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('2.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="3.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/3.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/3.jpg" alt="3.jpg">
</div>
<div class="photo-meta-info">
<span title="3.jpg">#2 (350.1k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('3.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="4.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/4.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/4.jpg" alt="4.jpg">
</div>
<div class="photo-meta-info">
<span title="4.jpg">#3 (466.9k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('4.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="5.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/5.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/5.jpg" alt="5.jpg">
</div>
<div class="photo-meta-info">
<span title="5.jpg">#4 (361k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('5.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="6.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/6.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/6.jpg" alt="6.jpg">
</div>
<div class="photo-meta-info">
<span title="6.jpg">#5 (291.2k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('6.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="7.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/7.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/7.jpg" alt="7.jpg">
</div>
<div class="photo-meta-info">
<span title="7.jpg">#6 (278.8k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('7.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="8.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/8.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/8.jpg" alt="8.jpg">
</div>
<div class="photo-meta-info">
<span title="8.jpg">#7 (318.8k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('8.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="9.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/9.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/9.jpg" alt="9.jpg">
</div>
<div class="photo-meta-info">
<span title="9.jpg">#8 (349.5k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('9.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="10.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/10.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/10.jpg" alt="10.jpg">
</div>
<div class="photo-meta-info">
<span title="10.jpg">#9 (345.8k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('10.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="11.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/11.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/11.jpg" alt="11.jpg">
</div>
<div class="photo-meta-info">
<span title="11.jpg">#10 (336.9k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('11.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="12.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/12.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/12.jpg" alt="12.jpg">
</div>
<div class="photo-meta-info">
<span title="12.jpg">#11 (308.4k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('12.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="13.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/13.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/13.jpg" alt="13.jpg">
</div>
<div class="photo-meta-info">
<span title="13.jpg">#12 (326.2k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('13.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="14.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/14.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/14.jpg" alt="14.jpg">
</div>
<div class="photo-meta-info">
<span title="14.jpg">#13 (424.1k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('14.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="15.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/15.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/15.jpg" alt="15.jpg">
</div>
<div class="photo-meta-info">
<span title="15.jpg">#14 (414.5k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('15.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="16.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/16.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/16.jpg" alt="16.jpg">
</div>
<div class="photo-meta-info">
<span title="16.jpg">#15 (310.3k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('16.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="17.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/17.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/17.jpg" alt="17.jpg">
</div>
<div class="photo-meta-info">
<span title="17.jpg">#16 (279.4k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('17.jpg')">
抹除
</button>
</div>
</div>
<div class="photo-card-node">
<input type="checkbox" name="delete_files[]" value="18.jpg" class="select-box-mask select-box">
<div class="photo-wrapper" onclick="openPreview('https://pic.ximi.me/1/files/mobile/18.jpg')">
<img src="https://pic.ximi.me/1/files/thumb/18.jpg" alt="18.jpg">
</div>
<div class="photo-meta-info">
<span title="18.jpg">#17 (376.1k)</span>
<button type="button" class="trash-node-btn" onclick="deleteSingle('18.jpg')">
抹除
</button>
</div>
</div>
</div>
</form>
</div>
<div class="form-section">
<details style="width: 100%;" id="config_details_panel">
<summary style="display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; outline: none; user-select: none;">
<h2 style="margin: 0;">⚙️ 全息三维常数参数变量控制</h2>
<span class="fold-indicator" style="font-size: 13px;font-family: monospace;color: var(--neon-blue);border: 2px solid rgba(0, 242, 254, 0.3);padding: 10px 10px;background: rgba(0, 242, 254, 0.05);">Expand ︾
</span>
</summary>
<div style="padding-top: 15px;">
<div class="tips-panel" style="background: rgba(59, 130, 246, 0.06); border-left-color: var(--neon-blue); color: #93c5fd; margin-bottom: 15px;">
<strong>💡 配置指南：</strong>如需隐藏关于按钮，可将 show 改为 hide；logo图片为空或是改为 appLogoIcon2.png 则自动隐藏，其它默认即可。
</div>
<style>
.trash-node-btn:hover {
background: var(--accent-red);
color: #fff;
box-shadow: 0 0 8px var(--accent-red);
}
.trash-node-btn {
background: rgba(255, 74, 107, 0.2);
border: 1px solid var(--accent-red);
color: var(--accent-red);
padding: 3px 6px;
font-size: 10px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
/* 资产展台网格流 */
.photo-gallery-deck {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; margin-top: 20px;
}
.photo-card-node {
background: rgba(5, 12, 26, 0.6); border: 1px solid rgba(0, 242, 254, 0.25);
position: relative; overflow: hidden; transition: all 0.3s;
clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.photo-card-node:hover {
border-color: var(--neon-blue); box-shadow: 0 0 15px rgba(0, 242, 254, 0.3); transform: translateY(-2px);
}
.photo-wrapper { width: 100%; height: 115px; position: relative; cursor: pointer; background: #000; }
.photo-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.photo-card-node:hover .photo-wrapper img { transform: scale(1.05); }
.photo-meta-info {
padding: 8px; font-size: 11px; font-family: monospace; color: var(--text-muted);
display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.3);
}
.select-box-mask { position: absolute; top: 8px; left: 8px; z-index: 5; transform: scale(1.2); cursor: pointer; }
.batch-action-bar {
display: flex;
justify-content: space-between;
background: rgba(0, 0, 0, 0.3);
padding: 4px 20px 13px 17px;
margin-bottom: 15px;
border-left: 3px solid var(--neon-blue);
font-size: 13px;
color: var(--text-muted);
align-items: center;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.form-group label {
width: 200px;
font-size: 13px;
color: var(--text-muted);
font-weight: 700;
padding-right: 15px;
}
.form-control {
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 242, 254, 0.3);
padding: 10px 14px;
color: #fff;
font-family: monospace;
font-size: 13px;
transition: all 0.3s;
}
.form-control:focus {
outline: none; border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}
.delete-button {
position: absolute;
top: 4px;
right: 4px;
background: rgba(239, 68, 68, 0.9);
color: white;
border: none;
font-size: 10px;
font-weight: bold;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
z-index: 10;
transition: background 0.2s;
}
/* 隐藏浏览器原生自带的反人类三角小箭头 */
summary::-webkit-details-marker { display: none; }
summary::marker { display: none; }
</style>
<form method="POST" action="">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px;">
<div class="form-group"><label title="backGroundImgURL">背景 地址 ：</label><input type='text' name='backGroundImgURL' value='./files/mobile-ext/backGroundImgURL.jpg' class='form-control'></div><div class="form-group"><label title="appLogoIcon">Logo 地址 ：</label><input type='text' name='appLogoIcon' value='./files/mobile-ext/appLogoIcon.png' class='form-control'></div><div class="form-group"><label title="appLogoLinkURL">Logo链接 ：</label><input type='text' name='appLogoLinkURL' value='https://pic.ximi.me' class='form-control'></div><div class="form-group"><label title="LargeLogoTarget">logo链接打开方式 ：</label><input type='text' name='LargeLogoTarget' value='Blank' class='form-control'></div><div class="form-group"><label title="totalPageCount">总页数 ：</label><input type='text' name='totalPageCount' value='18' class='form-control'></div><div class="form-group"><label title="largePageWidth">相册宽 ：</label><input type='text' name='largePageWidth' value='853' class='form-control'></div><div class="form-group"><label title="largePageHeight">相册高 ：</label><input type='text' name='largePageHeight' value='1280' class='form-control'></div><div class="form-group"><label title="RightToLeft">从右往左翻 ：</label><input type='text' name='RightToLeft' value='No' class='form-control'></div><div class="form-group"><label title="thicknessWidthType">书页厚度 ：</label><input type='text' name='thicknessWidthType' value='Thinner' class='form-control'></div><div class="form-group"><label title="BindingType">书脊样式 ：</label><input type='text' name='BindingType' value='side' class='form-control'></div><div class="form-group"><label title="HardPageEnable">硬纸板封面 ：</label><input type='text' name='HardPageEnable' value='yes' class='form-control'></div><div class="form-group"><label title="hardCoverBorderWidth">边框宽度 ：</label><input type='text' name='hardCoverBorderWidth' value='8' class='form-control'></div><div class="form-group"><label title="borderColor">边框颜色 ：</label><input type='text' name='borderColor' value='#ff6a6a' class='form-control'></div><div class="form-group"><label title="cornerRound">边框圆角 ：</label><input type='text' name='cornerRound' value='8' class='form-control'></div><div class="form-group"><label title="aboutButtonVisible">显示关于按钮 ：</label><input type='text' name='aboutButtonVisible' value='show' class='form-control'></div><div class="form-group"><label title="AboutAuthor">作者 ：</label><input type='text' name='AboutAuthor' value='ximi' class='form-control'></div><div class="form-group"><label title="AboutEmail">邮件 ：</label><input type='text' name='AboutEmail' value='[email protected]' class='form-control'></div><div class="form-group"><label title="AboutAddress">地址 ：</label><input type='text' name='AboutAddress' value='china' class='form-control'></div><div class="form-group"><label title="AboutMobile">手机 ：</label><input type='text' name='AboutMobile' value='+86 138-8888-8888' class='form-control'></div><div class="form-group"><label title="AboutWebsite">网站 ：</label><input type='text' name='AboutWebsite' value='https://img.ximi.me' class='form-control'></div><div class="form-group"><label title="AboutDescription">描述 ：</label><textarea name='AboutDescription' rows='3' class='form-control'>[[[本页面所含图片均来源于网络收集，旨在提供视觉欣赏与信息共享之目的。我们尊重并保护原作者的版权及知识产权，所有图片仅供个人学习、研究及非商业性欣赏使用。未经原作者明确授权，严禁将本页面中的图片用于任何形式的商业用途，包括但不限于广告、销售、出版等。如涉及版权问题，请及时联系我们，我们将积极响应并尽快采取适当措施处理，以确保版权合规性。感谢您的理解与配合！]]]</textarea></div> </div>
<div style="margin-top: 15px; text-align: right; border-top: 1px solid rgba(0, 242, 254, 0.15); padding-top: 20px;">
<button type="submit" name="save_manual_config" class="cyber-btn" style="min-width: 240px; width: auto; cursor: pointer;">
💾 UPDATE CONSTANTS · 固化写入全局常数
</button>
</div>
</form>
</div>
</details>
</div>
<style>
.section-title {
font-size: 16px;
font-weight: 800;
color: var(--neon-blue);
margin-top: 0;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
letter-spacing: 1px;
border-bottom: 1px solid rgba(0, 242, 254, 0.15);
padding-bottom: 10px;
}
.panel-section {
background: rgba(13, 25, 48, 0.7);
border: 1px solid rgba(0, 242, 254, 0.25);
padding: 25px;
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.1);
}
/* 🚀 绿光全息切角按钮样式统合（前台最满意配色） */
.cyber-btn {
padding: 12px 24px; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #fff;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
border: 1px solid rgba(5, 243, 160, 0.5) !important;
border-radius: 0px !important;
background: linear-gradient(135deg, rgba(5, 243, 160, 0.25) 0%, rgba(0, 120, 80, 0.4) 100%);
cursor: pointer; outline: none; display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 15px rgba(5, 243, 160, 0.15); text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
backdrop-filter: blur(5px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); text-decoration: none;
}
.cyber-btn:hover {
clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 100%, 8px 100%);
background: linear-gradient(135deg, rgba(5, 243, 160, 0.45) 0%, rgba(5, 243, 160, 0.15) 100%);
box-shadow: 0 0 25px rgba(5, 243, 160, 0.5); text-shadow: 0 0 12px #fff;
transform: scale(1.02);
}
.cyber-btn:active { transform: scale(0.98); background: rgba(5, 243, 160, 0.55); }
/* 红色危险警告按钮：同步切角，改用红光配色 */
.cyber-btn-danger {
background: linear-gradient(135deg, rgba(255, 74, 107, 0.25) 0%, rgba(150, 20, 50, 0.4) 100%);
border: 1px solid rgba(255, 74, 107, 0.5) !important;
box-shadow: 0 0 15px rgba(255, 74, 107, 0.15);
}
.cyber-btn-danger:hover {
background: linear-gradient(135deg, rgba(255, 74, 107, 0.45) 0%, rgba(255, 74, 107, 0.15) 100%);
box-shadow: 0 0 25px rgba(255, 74, 107, 0.5);
}
.cyber-btn-danger:active { background: rgba(255, 74, 107, 0.55); }
.btn-block { width: 100%; box-sizing: border-box; }
</style>
<div class="panel-section full-width" style="border-color: rgba(255, 74, 107, 0.4); background: rgba(30, 10, 20, 0.5);">
<h2 class="section-title" style="color: var(--accent-red); border-color: rgba(255, 74, 107, 0.3);">
<span>☣️ SYSTEM AUTO-DESTRUCT · 终极自毁安全断路器</span>
</h2>
<p style="font-size: 12px; color: #ff9ebb; line-height: 1.6; margin-top: 0; margin-bottom: 20px;">
<strong>【绝对不可逆协议】</strong> 触发此核心断路器，系统将立刻释放物理擦除脉冲：无痕擦除包含前台 <code>index.html</code>、<code>index.php</code>、全部图像资产、核心 JS 以及当前后台控制台自身在内的所有核心物理文件。此举用于紧急规避安全审查，一旦执行，没有任何手段能够恢复。
</p>
<form method="POST" action="" id="nuke_form">
<input type="hidden" name="nuke_system" value="1">
<button type="button" class="cyber-btn cyber-btn-danger btn-block" style="padding: 18px;" onclick="triggerNukeSystem()">
⚠️ ACTIVATE PROTOCOL · 立即下达并激活最高级别全盘物理自毁协议
</button>
</form>
</div>
<!--accent
<div class="form-section">
<form method="POST" style="margin: 0;" id="nuke_form">
<input type="hidden" name="nuke_album" value="1">
<button type="button" class="btn-link btn-action-red" onclick="triggerNukeSystem()" style="
/* min-width: 250px; */
">☣️ 擦除并销毁本相册</button>
</form>
</div>
-->
</div>
<div id="imagePreviewModal" class="preview-modal" onclick="closePreview()">
<span class="preview-close">×</span>
<img class="preview-content" id="modalTargetImage" alt="映像图层" onclick="event.stopPropagation();">
</div>
<script>
const fileInput = document.getElementById('ajax_file_input');
const startBtn = document.getElementById('start_upload_btn');
const monitor = document.getElementById('upload_monitor');
const progressFill = document.getElementById('monitor_progress_fill');
const percentText = document.getElementById('monitor_percentage');
const titleText = document.getElementById('monitor_title');
const logBox = document.getElementById('monitor_log');
const selectText = document.getElementById('upload_select_text');
fileInput.addEventListener('change', () => {
if(fileInput.files.length > 0) {
selectText.innerText = `已成功挂载 ${fileInput.files.length} 个文件就绪，请启动控制塔总线。`;
selectText.style.color = "var(--neon-green)";
}
});
startBtn.addEventListener('click', async () => {
const files = fileInput.files;
if (files.length === 0) {
Swal.fire({ icon: 'warning', title: '缺少数据源', text: '请先选定或拖拽需要解构的图片。', background: '#13192e', color: '#fff', confirmButtonColor: '#00f2fe' });
return;
}
if (files.length > 50) {
Swal.fire({ icon: 'error', title: '超载拒绝', text: '检测到单次超出了50张最高负载红线，请拆分或分批次压入！', background: '#13192e', color: '#fff', confirmButtonColor: '#ff3860' });
return;
}
monitor.style.display = 'block';
logBox.innerHTML = '';
startBtn.disabled = true;
startBtn.innerText = '传输中...总线锁定';
let successCount = 0;
let failCount = 0;
const total = files.length;
addLog(`⚡ 正在唤醒多线程管道... 开启极速并发吞吐模式 (${total} 文件)。`, 'info');
// 利用 Promise.all 进行真·多线程异步文件上传写入
const uploadPromises = Array.from(files).map(async (currentFile, index) => {
if(currentFile.size > 5 * 1024 * 1024) {
addLog(`❌ 节点 [${currentFile.name}] 体积过大(＞5MB)，熔断拦截。`, 'error');
failCount++;
updateOverallProgress(successCount + failCount, total);
return;
}
const formData = new FormData();
formData.append('file', currentFile);
formData.append('autorename', document.getElementById('ajax_autorename').checked);
formData.append('overwrite', document.getElementById('ajax_overwrite').checked);
try {
const response = await fetch('admin.php?action=ajax_upload', {
method: 'POST',
body: formData
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const resData = await response.json();
if (resData.status === 'success') {
addLog(`✔ ${resData.message}`, 'success');
successCount++;
} else {
addLog(`❌ 传输破裂 [${currentFile.name}]: ${resData.message}`, 'error');
failCount++;
}
} catch (err) {
addLog(`❌ 网络中断 [${currentFile.name}]: ${err.message}`, 'error');
failCount++;
}
updateOverallProgress(successCount + failCount, total);
});
// 等待所有的物理大流传送完
await Promise.all(uploadPromises);
// 🚀【核心加固机制】：加入 1500毫秒 极速稳妥落盘保护
titleText.innerText = `正在等待磁盘流完全固化归档...`;
addLog(`⏳ 数据流已传输完。正在执行 1.5s 物理层落盘缓冲防御，防止缓存漏图...`, 'info');
await new Promise(resolve => setTimeout(resolve, 1500));
titleText.innerText = `正在重算全谱矩阵序列...`;
addLog(`🔄 磁盘缓冲通过！正在向服务器请求重构自然数序列排序...`, 'info');
try {
const syncResponse = await fetch('admin.php?action=ajax_sort_sync');
if (!syncResponse.ok) throw new Error("服务端重构序列命令离线。");
const syncData = await syncResponse.json();
if (syncData.status === 'success') {
addLog(`🎉 系统闭环完成：${syncData.message}`, 'success');
titleText.innerText = `传输重组圆满成功！`;
} else {
addLog(`⚠️ 排序调用有小冲突: ${syncData.message}`, 'error');
}
} catch (syncErr) {
addLog(`❌ 最终序列校准阶段发生网络故障: ${syncErr.message}`, 'error');
}
addLog(`⚙ 完成总量：成功 ${successCount}，失败 ${failCount}。数据已闭环更新。`, 'info');
setTimeout(() => {
window.location.reload();
}, 1800);
});
function updateOverallProgress(current, total) {
const pct = Math.round((current / total) * 100);
progressFill.style.width = pct + '%';
percentText.innerText = pct + '%';
titleText.innerText = `数据同步进度: ${current} / ${total}`;
}
function addLog(text, type = '') {
const div = document.createElement('div');
div.className = 'log-line';
if (type === 'success') div.classList.add('log-success');
if (type === 'error') div.classList.add('log-error');
div.innerText = `[${new Date().toLocaleTimeString()}] ${text}`;
logBox.appendChild(div);
logBox.scrollTop = logBox.scrollHeight;
}
function triggerNukeSystem() {
Swal.fire({
title: '☢ 激活极度自毁协议吗？',
text: "这将永久性擦除前台目录及 index.html 文件！操作物理层面不可逆！",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ff3860',
cancelButtonColor: '#6b7cac',
confirmButtonText: '极其确定，全面摧毁',
cancelButtonText: '终止协议',
background: '#0d1117',
color: '#fff'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: '最后终极防御认证',
text: "请再次核对，后台 admin 自身会被安全隔离保留。确认下达物理抹除指令？",
icon: 'error',
showCancelButton: true,
confirmButtonColor: '#ff3860',
confirmButtonText: '执行灭除',
background: '#0d1117',
color: '#fff'
}).then((finalVerify) => {
if (finalVerify.isConfirmed) {
document.getElementById('nuke_form').submit();
}
});
}
});
}
function toggleSelectAll(master) {
document.querySelectorAll('.select-box').forEach(cb => cb.checked = master.checked);
}
function deleteSingle(filename) {
// 使用 SweetAlert2 替换原生传统 confirm
Swal.fire({
title: '⚠️ 物理图元擦除确权',
text: "检测到准备切断节点 [ " + filename + " ]，该操作将直接同步深度抹除本地冷存储映像，是否下达物理摧毁指令？",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ff3860', // 科技红
cancelButtonColor: '#30363d', // 适配网格的暗灰
confirmButtonText: '确定 · 物理抹除',
cancelButtonText: '取消挂载',
background: '#0d1117', // 深色控制台背景
color: '#fff' // 纯白文字
}).then((result) => {
// 如果用户在高级弹窗中确认
if (result.isConfirmed) {
// 严格执行原有功能：将文件名塞入隐藏域，然后提交图片管理表单
document.getElementById('single_delete_file').value = filename;
document.getElementById('gallery_form').submit();
}
});
}
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById('console_cmd_form');
const cmdInput = document.getElementById('action_cmd');
// 1. 拦截“修复重排”按钮
document.getElementById('btn_reindex').addEventListener('click', function () {
Swal.fire({
title: '⚙️ 序列重构确权',
text: '确定要对物理存储区的全部图像文件，重新进行自然数重排列及冷重命名吗？',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#00f2fe', // 极客蓝
cancelButtonColor: '#30363d',
confirmButtonText: '下达指令',
cancelButtonText: '放弃调整',
background: '#0d1117',
color: '#fff'
}).then((result) => {
if (result.isConfirmed) {
// 模拟原本的 input name 提交，动态注入对应的键值
cmdInput.name = "update_config";
cmdInput.value = "1";
form.submit();
}
});
});
// 2. 拦截“重构全图层”按钮
document.getElementById('btn_rebuild').addEventListener('click', function () {
Swal.fire({
title: '🖼️ 缓冲映像重构',
text: '该操作将强制物理销毁现有的全部缩略图，并一键重新构建全新的图层。确认执行？',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ff3860', // 警告红
cancelButtonColor: '#30363d',
confirmButtonText: '开始重构',
cancelButtonText: '放弃执行',
background: '#0d1117',
color: '#fff'
}).then((result) => {
if (result.isConfirmed) {
// 模拟原本的 input name 提交，动态注入对应的键值
cmdInput.name = "regenerate_thumbs";
cmdInput.value = "1";
form.submit();
}
});
});
});
function openPreview(src) {
const modal = document.getElementById('imagePreviewModal');
const modalImg = document.getElementById('modalTargetImage');
modalImg.src = src; modal.style.display = "flex";
setTimeout(() => { modal.classList.add('show'); }, 10);
}
function closePreview() {
const modal = document.getElementById('imagePreviewModal');
modal.classList.remove('show');
setTimeout(() => { modal.style.display = "none"; }, 250);
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') closePreview(); });
</script>
</body>
</html>
域名市场
域名载入中...
