55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IoT 可视化编辑器</title>
|
||
<link rel="stylesheet" href="css/editor.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- 顶部工具栏 -->
|
||
<header class="toolbar">
|
||
<div class="toolbar-title">IoT 可视化编辑器</div>
|
||
<div class="toolbar-actions">
|
||
<button id="btn-save" class="btn btn-primary">保存 JSONB</button>
|
||
<button id="btn-load" class="btn">加载 JSONB</button>
|
||
<button id="btn-export" class="btn">导出 HTML</button>
|
||
<button id="btn-clear" class="btn btn-danger">清空</button>
|
||
</div>
|
||
<div class="toolbar-info">
|
||
<span>画布尺寸: 375 × 812 (手机比例)</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 编辑器容器 -->
|
||
<div id="editor" class="editor-container"></div>
|
||
</div>
|
||
|
||
<!-- 隐藏的文件输入 -->
|
||
<input type="file" id="file-input" accept=".json" style="display: none;">
|
||
|
||
<!-- 预览弹窗 -->
|
||
<div id="preview-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span>HTML 预览</span>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre id="preview-code"></pre>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="btn-copy" class="btn btn-primary">复制代码</button>
|
||
<button id="btn-download" class="btn">下载文件</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引入 webbuilder -->
|
||
<script src="js/lib/webbuilder/webbuilder.js"></script>
|
||
|
||
<!-- 编辑器初始化 -->
|
||
<script src="js/editor/editor.js"></script>
|
||
</body>
|
||
</html> |