153 lines
6.8 KiB
HTML
153 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh" class="index-page">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link href="../base1/patternfly.css" rel="stylesheet">
|
||
<link href="../base1/patternfly-additions.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="lj360.css">
|
||
<link rel="stylesheet" href="lj360_config.css">
|
||
<script src="../base1/cockpit.js"></script>
|
||
</head>
|
||
<body class="pf-m-redhat-font">
|
||
<div class="cockpit-service-page">
|
||
|
||
<!-- 标签页导航 -->
|
||
<div class="pf-c-tabs" id="main-tabs">
|
||
<ul class="pf-c-tabs__list">
|
||
<li class="pf-c-tabs__item pf-m-current" data-tab="tab-logo">
|
||
<button class="pf-c-tabs__link">
|
||
<i class="fa fa-image"></i> 开机 Logo
|
||
</button>
|
||
</li>
|
||
<li class="pf-c-tabs__item" data-tab="tab-comm">
|
||
<button class="pf-c-tabs__link">
|
||
<i class="fa fa-plug"></i> 通讯参数
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ===== Tab: 开机 Logo ===== -->
|
||
<div class="tab-panel" id="tab-logo">
|
||
<div class="pf-c-card">
|
||
<div class="pf-c-card__header">
|
||
<i class="fa fa-image"></i> 开机 Logo 管理
|
||
</div>
|
||
<div class="pf-c-card__body">
|
||
|
||
<!-- 当前 Logo 预览 -->
|
||
<div class="section-title">
|
||
<i class="fa fa-eye"></i> 当前 Logo 预览
|
||
</div>
|
||
<div class="logo-preview-container">
|
||
<div class="logo-preview-box" id="logo-preview-box">
|
||
<div class="logo-preview-placeholder" id="logo-placeholder">
|
||
<i class="fa fa-picture-o"></i>
|
||
<span>点击"读取当前Logo"加载预览</span>
|
||
</div>
|
||
<img id="logo-preview-img" class="logo-preview-img hidden" alt="当前Logo预览">
|
||
</div>
|
||
<div class="logo-preview-actions">
|
||
<button class="pf-c-button pf-m-secondary" id="btn-read-logo">
|
||
<i class="fa fa-download"></i> 读取当前 Logo
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="separator"></div>
|
||
|
||
<!-- Logo 库 -->
|
||
<div class="section-title">
|
||
<i class="fa fa-folder-open-o"></i> Logo 库
|
||
<span class="section-hint">存储目录：/home/ztl/LJ360/config/logos/</span>
|
||
</div>
|
||
|
||
<!-- 上传新 Logo -->
|
||
<div class="upload-area" id="upload-area">
|
||
<div class="upload-icon">
|
||
<i class="fa fa-cloud-upload"></i>
|
||
</div>
|
||
<div class="upload-text">
|
||
拖拽 BMP 文件到此处，或
|
||
<label class="upload-link" for="logo-file-input">点击选择文件</label>
|
||
</div>
|
||
<div class="upload-hint">仅支持 .bmp 格式，建议分辨率与屏幕一致</div>
|
||
<input type="file" id="logo-file-input" accept=".bmp" class="hidden">
|
||
</div>
|
||
|
||
<!-- 上传状态 -->
|
||
<div id="upload-status" class="upload-status hidden"></div>
|
||
|
||
<!-- Logo 文件列表 -->
|
||
<div class="logo-list-header">
|
||
<span>已保存的 Logo 文件</span>
|
||
<button class="pf-c-button pf-m-secondary btn-sm" id="btn-refresh-list">
|
||
<i class="fa fa-refresh"></i> 刷新列表
|
||
</button>
|
||
</div>
|
||
<div class="logo-list" id="logo-list">
|
||
<div class="logo-list-empty">
|
||
<i class="fa fa-inbox"></i> 暂无 Logo 文件，请上传
|
||
</div>
|
||
</div>
|
||
|
||
<div class="separator"></div>
|
||
|
||
<!-- 烧写操作 -->
|
||
<div class="section-title">
|
||
<i class="fa fa-fire"></i> 烧写到设备
|
||
<span class="section-hint warning-hint">
|
||
<i class="fa fa-warning"></i> 此操作将直接写入 logo 分区，请谨慎操作
|
||
</span>
|
||
</div>
|
||
<div class="flash-area">
|
||
<div class="flash-select-row">
|
||
<div class="flash-label">选择要烧写的 Logo：</div>
|
||
<select class="pf-c-form-control" id="flash-logo-select">
|
||
<option value="">-- 请先选择 Logo 文件 --</option>
|
||
</select>
|
||
<button class="pf-c-button pf-m-danger" id="btn-flash-logo" disabled>
|
||
<i class="fa fa-bolt"></i> 烧写到设备
|
||
</button>
|
||
</div>
|
||
<div class="flash-note">
|
||
<i class="fa fa-info-circle"></i>
|
||
烧写命令说明：将选定的 logo.bmp 与 logo_kernel.bmp 合并写入
|
||
<code>/dev/disk/by-partlabel/logo</code> 分区
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输出信息 -->
|
||
<div class="output-section">
|
||
<div class="output-label">
|
||
<i class="fa fa-terminal"></i> 操作输出
|
||
</div>
|
||
<div class="log-box" id="logo-output">等待操作...</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Tab: 通讯参数 ===== -->
|
||
<div class="tab-panel hidden" id="tab-comm">
|
||
<div class="pf-c-card">
|
||
<div class="pf-c-card__header">
|
||
<i class="fa fa-plug"></i> 通讯参数配置
|
||
</div>
|
||
<div class="pf-c-card__body">
|
||
<div class="empty-placeholder">
|
||
<i class="fa fa-cogs"></i>
|
||
<div class="empty-title">暂未配置</div>
|
||
<div class="empty-desc">通讯参数配置功能正在开发中，敬请期待</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script src="lj360_config.js"></script>
|
||
</body>
|
||
</html>
|