 | |  |  | 赛博朋克任务控制中心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">[00:00:00]</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[taskType];
- 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[status];
- }
-
- // 工具函数
- 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();
| |  | |  |
|
|( 京ICP备09078825号 )
发表于 
收藏