Skip to content

Commit cbbbcd4

Browse files
HiCodeHCHiCodeHC
committed
upload ide/index.html
1 parent 2d30ead commit cbbbcd4

1 file changed

Lines changed: 134 additions & 0 deletions

File tree

‎ide/ide/index.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>HiCode · 在线开发环境 v0.01</title>
7+
<link rel="icon" href="../assets/hicode-logo.jpg" type="image/jpeg" />
8+
<link rel="stylesheet" href="css/style.css" />
9+
</head>
10+
<body>
11+
<!-- ===== 顶部导航 ===== -->
12+
<header class="topbar">
13+
<div class="brand" id="btnHome" title="返回首页">
14+
<span class="logo-dot"></span>
15+
<span class="brand-name">HiCode</span>
16+
<span class="ver">v0.01 · 网页端</span>
17+
</div>
18+
<div class="crumb" id="crumb" title="当前文件">—</div>
19+
<div class="actions">
20+
<button id="btnLive" class="btn ghost live" title="观看实时转译：立即把当前页面 HIC 代码转译为 HTML">✓ 实时转译</button>
21+
<div class="menu-wrap">
22+
<button id="btnExport" class="btn solid">导出 ▾</button>
23+
<div class="menu" id="exportMenu">
24+
<div class="menu-title">导出当前项目</div>
25+
<button data-act="hc">导出 .hc（可导入继续开发）</button>
26+
<button data-act="single">导出单个 .html</button>
27+
<button data-act="zip">导出全部页面 · 打包 .zip</button>
28+
<button data-act="merge">导出全部页面 · 合并成 1 个 .html</button>
29+
</div>
30+
</div>
31+
</div>
32+
</header>
33+
34+
<div class="layout">
35+
<!-- ===== 左侧：项目 + 页面 ===== -->
36+
<aside class="tree" id="tree">
37+
<div class="tree-sec">
38+
<div class="tree-head">
39+
<span>项目</span>
40+
<button class="mini" id="addProject" title="新建项目">+</button>
41+
</div>
42+
<ul class="tree-list" id="projList"></ul>
43+
</div>
44+
<div class="tree-sec" id="pageSec" hidden>
45+
<div class="tree-head">
46+
<span>页面</span>
47+
<button class="mini" id="addPage" title="新建页面">+</button>
48+
</div>
49+
<ul class="tree-list" id="pageList"></ul>
50+
</div>
51+
<div class="tree-empty" id="treeHint">创建或导入一个项目后开始开发</div>
52+
</aside>
53+
54+
<!-- ===== 右侧：工作区 ===== -->
55+
<main class="workspace">
56+
<div class="tabs" id="workTabs">
57+
<button class="tab on" data-tab="editor">代码</button>
58+
<button class="tab" data-tab="preview">转译预览</button>
59+
<button class="tab" data-tab="vars">变量</button>
60+
</div>
61+
62+
<section class="pane on" id="pane-editor">
63+
<div class="editor-head">
64+
<span class="hint">页面自带 HTML 骨架，无需编写 <code>&lt;html&gt;</code> 等标签</span>
65+
<span class="shortcut">支持：it 变量 · in t 文字 / in p 图片 · if/orif/noif 判断 · to/fr 导向</span>
66+
</div>
67+
<textarea id="code" class="codearea" spellcheck="false"
68+
placeholder="在这里编写 HIC 代码…&#10;&#10;it 标题 t Hello HiCode&#10;标题 in t"
69+
></textarea>
70+
<div class="statusbar" id="statusbar">未打开页面</div>
71+
</section>
72+
73+
<section class="pane" id="pane-preview">
74+
<div class="preview-bar">
75+
<span>实时转译结果（HIC → HTML）</span>
76+
<button class="mini" id="openPreview" title="在独立标签页打开预览">↗ 新标签打开</button>
77+
</div>
78+
<iframe id="previewFrame" class="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
79+
<textarea id="previewSrc" class="codearea src" spellcheck="false" hidden></textarea>
80+
</section>
81+
82+
<section class="pane" id="pane-vars">
83+
<div class="var-help">
84+
<p><b>it 变量</b>：默认普通变量（前端不显示）。<code>t</code> 显示文字、<code>p</code> 存放图片。</p>
85+
<p>用 <code>变量名 in t</code> 居中显示文字；<code>变量名 in p</code> 显示图片（本版坐标居中）。</p>
86+
<p>点击下方图片条目即可上传 / 更换 / 删除图片。</p>
87+
</div>
88+
<div id="varList" class="var-list"></div>
89+
<div class="var-empty" id="varEmpty">当前页面没有声明变量</div>
90+
</section>
91+
</main>
92+
93+
<!-- 空窗口占位 -->
94+
</div>
95+
96+
<!-- ===== 首页引导 ===== -->
97+
<div id="home" class="home hidden">
98+
<div class="home-card">
99+
<div class="home-logo"><span class="logo-dot lg"></span></div>
100+
<h1>HiCode <span class="dim">· HIC 语言在线开发</span></h1>
101+
<p class="home-sub">自研 HIC 语言一键转译为 HTML，零基础也能搭建网页项目。</p>
102+
<p class="home-sub small">v0.01 为代码开发版本，支持项目 / 页面管理、条件、导向、实时转译与导出。</p>
103+
<div class="home-actions">
104+
<button id="homeNew" class="btn solid big">新建项目</button>
105+
<button id="homeImport" class="btn ghost big">导入项目 .hc</button>
106+
</div>
107+
<div class="home-recent" id="homeRecent" hidden>
108+
<div class="recent-title">继续上次开发</div>
109+
<button id="homeResume" class="btn soft big">恢复最近项目 →</button>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<!-- ===== 通用弹窗 ===== -->
115+
<div id="modal" class="modal hidden">
116+
<div class="modal-card">
117+
<div class="modal-title" id="modalTitle">标题</div>
118+
<div class="modal-body" id="modalBody"></div>
119+
<div class="modal-actions">
120+
<button id="modalCancel" class="btn ghost">取消</button>
121+
<button id="modalOk" class="btn solid">确定</button>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<!-- 图片导入用隐藏 input -->
127+
<input type="file" id="fileImg" accept="image/*" hidden />
128+
<input type="file" id="fileHc" accept=".hc,application/json" hidden />
129+
130+
<script src="js/store.js"></script>
131+
<script src="js/hic.js"></script>
132+
<script src="js/app.js"></script>
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)