苹果脚本赛博朋克任务控制中心H5示例
苹果脚本赛博朋克任务控制中心H5示例
// ============================================
// 赛博朋克任务控制中心 - AIWROK H5 示例
// 风格：科技感、霓虹灯、极简交互
// ============================================
async function createCyberpunkTaskCenter() {
return new Promise((resolve, reject) => {
try {
var web = new WebView();
web.show();
web.loadHtml(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>⚡ 赛博任务控制中心</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--neon-blue: #00f3ff;
--neon-pink: #ff00ff;
--neon-purple: #9d00ff;
--dark-bg: #0a0a0f;
--panel-bg: rgba(20, 20, 30, 0.9);
}
body {
font-family: '微软雅黑', 'Microsoft YaHei', 'PingFang SC', monospace;
background: var(--dark-bg);
color: var(--neon-blue);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* 网格背景 */
.grid-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
z-index: 0;
animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.container {
position: relative;
z-index: 10;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
/* 标题栏 */
.header {
text-align: center;
padding: 30px 20px;
margin-bottom: 30px;
background: var(--panel-bg);
border: 2px solid var(--neon-blue);
border-radius: 10px;
box-shadow:
0 0 20px rgba(0, 243, 255, 0.3),
inset 0 0 20px rgba(0, 243, 255, 0.1);
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
animation: scanLine 3s linear infinite;
}
@keyframes scanLine {
0% { left: -100%; }
100% { left: 100%; }
}
.header h1 {
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow:
0 0 10px var(--neon-blue),
0 0 20px var(--neon-blue),
0 0 40px var(--neon-blue);
margin-bottom: 10px;
}
.status-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(0, 243, 255, 0.1);
border: 1px solid var(--neon-blue);
border-radius: 20px;
font-size: 12px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--neon-blue);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--neon-blue); }
50% { opacity: 0.5; box-shadow: 0 0 5px var(--neon-blue); }
}
/* 控制面板 */
.control-panel {
background: var(--panel-bg);
border: 2px solid var(--neon-purple);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba(157, 0, 255, 0.2);
}
.panel-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
color: var(--neon-pink);
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 1px solid var(--neon-purple);
padding-bottom: 10px;
}
.button-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.cyber-btn {
padding: 15px;
border: 2px solid var(--neon-blue);
background: rgba(0, 243, 255, 0.05);
color: var(--neon-blue);
border-radius: 8px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.cyber-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 243, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.cyber-btn:hover::before {
width: 300px;
height: 300px;
}
.cyber-btn:hover {
background: rgba(0, 243, 255, 0.15);
box-shadow:
0 0 20px rgba(0, 243, 255, 0.4),
inset 0 0 20px rgba(0, 243, 255, 0.2);
transform: translateY(-2px);
}
.cyber-btn:active {
transform: translateY(0);
}
.cyber-btn.active {
background: rgba(0, 243, 255, 0.2);
border-color: var(--neon-pink);
color: var(--neon-pink);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}
/* 任务列表 */
.task-list {
background: var(--panel-bg);
border: 2px solid var(--neon-pink);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
}
.task-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
margin-bottom: 10px;
background: rgba(255, 0, 255, 0.05);
border: 1px solid rgba(255, 0, 255, 0.3);
border-radius: 6px;
transition: all 0.3s ease;
}
.task-item:hover {
background: rgba(255, 0, 255, 0.1);
border-color: var(--neon-pink);
transform: translateX(5px);
}
.task-name {
font-size: 14px;
font-weight: bold;
}
.task-status {
padding: 4px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.task-status.pending {
background: rgba(255, 165, 0, 0.2);
color: #ffa500;
border: 1px solid #ffa500;
}
.task-status.running {
background: rgba(0, 243, 255, 0.2);
color: var(--neon-blue);
border: 1px solid var(--neon-blue);
animation: blink 1s ease-in-out infinite;
}
.task-status.completed {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
border: 1px solid #00ff00;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* 日志终端 */
.terminal {
background: rgba(0, 0, 0, 0.8);
border: 2px solid var(--neon-blue);
border-radius: 10px;
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 12px;
line-height: 1.6;
max-height: 250px;
overflow-y: auto;
box-shadow:
0 0 20px rgba(0, 243, 255, 0.2),
inset 0 0 30px rgba(0, 0, 0, 0.5);
}
.terminal-line {
margin-bottom: 5px;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.terminal-time {
color: #666;
}
.terminal-info { color: var(--neon-blue); }
.terminal-success { color: #00ff00; }
.terminal-warning { color: #ffa500; }
.terminal-error { color: #ff0000; }
/* Toast 提示 */
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--panel-bg);
border: 2px solid var(--neon-blue);
color: var(--neon-blue);
padding: 15px 30px;
border-radius: 8px;
font-weight: bold;
opacity: 0;
transition: all 0.3s ease;
z-index: 9999;
box-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 退出按钮 - 悬浮在右下角 */
.exit-float-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ff0000, #ff4444);
border: 2px solid #ff0000;
border-radius: 50%;
color: white;
font-size: 24px;
font-weight: bold;
cursor: pointer;
z-index: 9998;
box-shadow:
0 0 20px rgba(255, 0, 0, 0.5),
0 4px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.exit-float-btn:hover {
transform: scale(1.1) rotate(90deg);
box-shadow:
0 0 30px rgba(255, 0, 0, 0.8),
0 6px 20px rgba(0, 0, 0, 0.4);
}
.exit-float-btn::before {
content: '✕';
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
background: var(--neon-blue);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--neon-pink);
}
</style>
</head>
<body>
<!-- 网格背景 -->
<div class="grid-bg"></div>
<div class="container">
<!-- 标题栏 -->
<div class="header">
<h1>⚡ 赛博控制中枢</h1>
<div class="status-indicator">
<span class="status-dot"></span>
<span id="systemStatus">系统就绪</span>
</div>
</div>
<!-- 控制面板 -->
<div class="control-panel">
<div class="panel-title">◈ 控制指令</div>
<div class="button-grid">
<button class="cyber-btn" onclick="executeTask('scan')">🔍 扫描系统</button>
<button class="cyber-btn" onclick="executeTask('optimize')">⚙️ 优化性能</button>
<button class="cyber-btn" onclick="executeTask('backup')">💾 数据备份</button>
<button class="cyber-btn" onclick="executeTask('clean')">🗑️ 清理缓存</button>
</div>
</div>
<!-- 任务列表 -->
<div class="task-list">
<div class="panel-title">◈ 任务队列</div>
<div id="taskContainer">
<div class="task-item">
<span class="task-name">系统初始化</span>
<span class="task-status completed">已完成</span>
</div>
</div>
</div>
<!-- 日志终端 -->
<div class="terminal" id="terminal">
<div class="terminal-line">
<span class="terminal-time"></span>
<span class="terminal-success"> 系统启动成功...</span>
</div>
</div>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<!-- 退出按钮 -->
<button class="exit-float-btn" onclick="exitApp()" title="退出应用"></button>
<script>
// 任务状态管理
const tasks = {
scan: { name: '系统扫描', status: 'pending' },
optimize: { name: '性能优化', status: 'pending' },
backup: { name: '数据备份', status: 'pending' },
clean: { name: '缓存清理', status: 'pending' }
};
let taskIdCounter = 1;
// 添加日志
function addLog(message, type = 'info') {
const terminal = document.getElementById('terminal');
const time = new Date().toLocaleTimeString('zh-CN', { hour12: false });
const typeClass = 'terminal-' + type;
const line = document.createElement('div');
line.className = 'terminal-line';
line.innerHTML = \`<span class="terminal-time">[\${time}]</span><span class="\${typeClass}"> \${message}</span>\`;
terminal.appendChild(line);
terminal.scrollTop = terminal.scrollHeight;
// 限制日志数量
while (terminal.children.length > 50) {
terminal.removeChild(terminal.firstChild);
}
}
// 显示 Toast
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2500);
}
// 更新系统状态
function updateSystemStatus(status) {
document.getElementById('systemStatus').textContent = status;
}
// 执行任务
async function executeTask(taskType) {
const task = tasks;
if (!task) return;
// 检查是否已在运行
if (task.status === 'running') {
showToast('⚠️ 任务正在执行中');
return;
}
// 创建新任务项
const taskId = 'task-' + taskIdCounter++;
addTaskToUI(taskId, task.name);
// 更新任务状态
task.status = 'running';
updateTaskStatus(taskId, 'running');
updateSystemStatus('执行中...');
addLog(\`▶ 开始执行: \${task.name}\`, 'info');
showToast(\`🚀 启动: \${task.name}\`);
// 模拟任务执行
await sleep(1500);
addLog(\`✓ \${task.name} 进度 50%\`, 'info');
await sleep(1500);
addLog(\`✓ \${task.name} 进度 100%\`, 'success');
// 完成任务
task.status = 'completed';
updateTaskStatus(taskId, 'completed');
updateSystemStatus('系统就绪');
addLog(\`✅ \${task.name} 完成\`, 'success');
showToast(\`✅ 完成: \${task.name}\`);
}
// 添加任务到 UI
function addTaskToUI(taskId, taskName) {
const container = document.getElementById('taskContainer');
const taskItem = document.createElement('div');
taskItem.className = 'task-item';
taskItem.id = taskId;
taskItem.innerHTML = \`
<span class="task-name">\${taskName}</span>
<span class="task-status pending">等待中</span>
\`;
container.insertBefore(taskItem, container.firstChild);
}
// 更新任务状态
function updateTaskStatus(taskId, status) {
const taskItem = document.getElementById(taskId);
if (!taskItem) return;
const statusEl = taskItem.querySelector('.task-status');
const statusText = {
pending: '等待中',
running: '执行中',
completed: '已完成'
};
statusEl.className = 'task-status ' + status;
statusEl.textContent = statusText;
}
// 工具函数
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
addLog('🌐 赛博任务控制中心已激活', 'success');
addLog('⚡ 等待指令输入...', 'info');
});
// 退出应用
function exitApp() {
addLog(' 正在返回桌面...', 'warning');
showToast('正在返回桌面...');
setTimeout(() => {
if (typeof hid !== 'undefined' && hid.home) {
// 使用 AIWROK 框架的 hid.home() 返回桌面
hid.home();
} else if (typeof window.at !== 'undefined' && window.at.callFun) {
// 备用方案：调用原生方法关闭 WebView
window.at.callFun('dismissWebView');
} else {
// H5 环境下提示
showToast('请手动返回桌面');
}
}, 500);
}
</script>
</body>
</html>
`);
resolve(web);
} catch (error) {
print.err('创建失败: ' + error.message);
reject(error);
}
});
}
// 启动赛博朋克任务控制中心
async function launchCyberpunkCenter() {
printl('⚡ 启动赛博朋克任务控制中心...');
var webView = await createCyberpunkTaskCenter();
printl('✅ 控制中心已就绪');
}
launchCyberpunkCenter();
页:
[1]