-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
380 lines (364 loc) · 19.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html lang="en">
<head>
<!--// Meta Tags //-->
<meta charset="UTF-8">
<link href="http://io.nainor.com/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">
<meta name="keywords" content="H5,HTML5,javascript,react,nodejs,前端开发,github,开源">
<meta name="author" content="H5-Dooring开发团队">
<!-- <meta name="robots" content="noindex, nofollow"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>H5数据可视化搭建平台-趣谈前端</title>
<!--// FrameWorks //-->
<link rel="stylesheet" href="/h5_visible/css/frameworks.css">
<!--// Theme Main Js //-->
<link rel="stylesheet" href="/h5_visible/css/style.css">
</head>
<body data-spy="scroll" data-target="#fixedNavbar" data-offset="0">
<!--// Page Wrapper Start //-->
<div class="page-wrapper" id="home">
<!-- Header Start -->
<header class="header">
<div class="container">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/h5_visible">
Dooring
</a>
<!--// .logo //-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#fixedNavbar" aria-controls="fixedNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="togler-icon-inner">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</span>
</button>
<div class="collapse navbar-collapse main-menu justify-content-end" id="fixedNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" data-scroll-nav="0">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="1">特点</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="2">介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="4">模板</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="5">视频演示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="6">问题反馈</a>
</li>
</ul>
</div>
</nav>
<!--// .navbar-nav //-->
</div>
<!--// .container //-->
</header>
<!--// Header End //-->
<!--// Hero Section Start //-->
<section class="hero-section" data-scroll-index="0">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-7 col-md-10 col-sm-12">
<h1 class="hero-section-title wow fadeInUp" data-wow-delay="0.2s">
让H5制作，更方便
</h1>
<p class="hero-section-subtitle wow fadeInUp" data-wow-delay="0.3s">
H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
</p>
<a href="http://io.nainor.com/h5_plus/editor?tid=123456" target="_blank" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s" id="downloadBtn">立即使用<i class="fa fa-angle-right ml-2"></i></a>
<a href="https://github.com/MrXujiang/h5-visible-tool" target="_blank" class="default-video-btn wow fadeInUp">Github</a>
</div>
<!--// .col //-->
<div class="col-lg-4 text-right wow fadeInRight" style="border-radius:20px;overflow:hidden;padding:0;margin-left: 30px">
<img src="/h5_visible/img/58.png" alt="Hero image" style="width: 100%">
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
</section>
<!--// Hero Section End //-->
<!--// Services Section Start //-->
<section class="services section-padding" data-scroll-index="1" id="services-area">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="section-heading">
<h2 class="section-title">产品 <span>特点</span></h2>
<p class="section-sub-title">
通过不断打磨和迭代，致力于打造功能更强大，操作更便捷的H5营销工具
</p>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
<div class="services-item item-shadow">
<div class="services-icon services-blue-icon">
1
</div>
<div class="services-body">
<h5>简单方便</h5>
<p>
任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
2
</div>
<div class="services-body">
<h5>插拔式体验</h5>
<p>
产品完全开源，可植入任何系统，并支持二次开发
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
3
</div>
<div class="services-body">
<h5>持续迭代，无限可能</h5>
<p>
目前正在持续迭代中，后续可根具需求开发功能更强大的可视化系统.
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<!--// Services Section End //-->
<!--// About Section Start //-->
<section class="about section-padding" data-scroll-index="2" id="about">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8 col-lg-8 wow fadeInLeft text-left">
<img src="/h5_visible/img/45.png" alt="About image" class="img-fluid img-jump">
</div>
<!--// .col //-->
<div class="col-md-4 col-lg-4 wow fadeInUp">
<div class="about-inner">
<span class="section-badge">场景展示</span>
<h3>拖拽式生成H5页面</h3>
<p>
通过轻松拖拽的方式来快速生成H5页面元素，并提供丰富的页面组件，更方便的为使用者搭建更强大的H5落地页
</p>
</div>
<div class="about-list">
<ul>
<li><i class="fa fa-check">1</i>产品营销页面</li>
<li><i class="fa fa-check">2</i>企业/个人微官网</li>
<li><i class="fa fa-check">3</i>产品原型/H5活动页面</li>
</ul>
</div>
<a href="#0" class="default-btn">立即使用
<i class="ml-2 fa fa-angle-right"></i>
</a>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<!--// About Section End //-->
<!--// Features Section Start //-->
<section id="features" class="features-section section-padding" data-scroll-index="3">
<div class="container">
<div class="features-row">
<div class="row align-items-center justify-content-between">
<div class="col-md-7 col-lg-6 wow fadeInLeft">
<div class="features-inner">
<span class="section-badge">场景展示</span>
<h3>自由缩放视图，多模式预览页面</h3>
<p>
自由拖拽，灵活缩放视图，支持H5长页面，移动端真机预览，PC端模拟预览，最大限度的降低使用成本
</p>
<ul class="features-list">
<li class="d-flex align-items-center">
<i class="mdi">4</i>
<div class="features-box">
<h6>移动端适配</h6>
<span>适配不同移动端机型，实时可调整，预览无压力</span>
</div>
</li>
<li class="d-flex align-items-center">
<i class="mdi">5</i>
<div class="features-box">
<h6>持续升级</h6>
<span>定期根据用户需求进行系统升级，优化，创造更好的体验</span>
</div>
</li>
<li class="d-flex align-items-center">
<i class="mdi">6</i>
<div class="features-box">
<h6>实时下载</h6>
<span>用户不用担心存储问题，可在平台直接下载对应代码或json文件，更灵活的使用</span>
</div>
</li>
</ul>
</div>
</div>
<!--// .col //-->
<div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
<div class="features-circle"></div>
<div class="feature-image-wrap wow zoomIn" data-wow-delay="0.8s">
<img src="http://io.nainor.com/uploads/33_174302982a8.png" alt="About image" class="img-fluid img-jump">
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
</div>
<!--// .container //-->
</section>
<!--// Features Section Start //-->
<!--// Screenshots Section Start //-->
<section class="screenshots-section section-padding" data-scroll-index="4">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="section-heading">
<h2 class="section-title">模版<span>案例</span></h2>
<p class="section-sub-title">
提供了海量H5模板, 并且能自定义模板, 开箱即用, 易于配置
</p>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
<div class="screenshot-slider-wrap">
<div class="screenshots-slider owl-carousel owl-theme">
<div class="item">
<img src="/h5_visible/img/4.png" alt="Screenshoots image" class="img-fluid">
</div>
<!--// .item //-->
<div class="item">
<img src="/h5_visible/img/2.png" alt="Screenshoots image" class="img-fluid">
</div>
<!--// .item //-->
<div class="item">
<img src="/h5_visible/img/1.png" alt="Screenshoots image" class="img-fluid">
</div>
</div>
</div>
<!--// .screenshots-slider-wrap //-->
</div>
<!--// .container //-->
</section>
<!--// Screenshots Section End //-->
<!--// How It Works Section Start //-->
<section id="how-it-works" class="how-it-works-section jarallax bg-gradient-green section-padding" data-jarallax data-speed="0.3s" data-scroll-index="5">
<div class="jarallax-img how-it-works-bg"></div>
<div class="container">
<!--// .row //-->
<div class="row justify-content-center align-items-center how-it-work-wrap">
<div class="col-lg-10 col-md-10 col-sm-12">
<div class="how-it-works-inner text-center">
<h3 class="text-white">视频教程</h3>
<p>
为了方便使用者更好的使用H5-Visible-Tool, 专门录制了操作视频供大家参考
</p>
<div class="how-it-work-video">
<img src="/h5_visible/img/45.png" alt="How it work image" class="img-fluid">
<a href="/h5_visible/video.mp4" class="how-it-works-video-btn popup-youtube">观看</a>
</div>
</div>
</div>
<!--// .col //-->
</div>
</div>
<!--// .container //-->
</section>
<!--// How It Works Section End //-->
<!--// Contact Section Start //-->
<section class="contact-section section-padding" data-scroll-index="6">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title">问题<span>反馈</span></h2>
<p class="section-sub-title">
如果在使用过程中有任何疑问或者需求，可以通过以下方式联系到作者
</p>
<div style="text-align:center;margin-top:20px;width:240px;display:inline-block"><img src="/h5_visible/img/code.png" alt="趣谈前端" style="width:180px"></div>
<div style="text-align:center;margin-top:20px;display:inline-block"><img src="/h5_visible/img/qun.png" alt="趣谈前端" style="width:240px"></div>
</div>
</div>
<!--// .col //-->
</div>
</div>
<!--// .container //-->
</section>
<!--// Contact Section End //-->
<!--// Footer Section Start //-->
<footer class="footer">
<!--// .footer-top //-->
<div class="copyright">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-9">
<p class="text-center">
© Copyright <span id="fullYearCopyright"></span> - H5-Dooring开发团队
<a style="margin-left:20px" href="https://github.com/MrXujiang/h5-Dooring" target="_blank">友情链接</a>
</p>
</div>
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</div>
<!--// .copyright //-->
</footer>
<!--// Footer Section Start //-->
<a href="#0" class="scroll-top-btn" data-scroll-goto="0">
🔝
</a>
<!--// Scroll Top //-->
<div class="preloader-wrap">
<div class="preloader-inner">
<div class="sk-circle"></div>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<!--// Preloader //-->
</div>
<!--// Page Wrapper End //-->
<!--// jQuery v3.4.1 //-->
<script src="/h5_visible/js/jquery.js"></script>
<!--// Plugins Js //-->
<script src="/h5_visible/js/plugins.js"></script>
<!--// Main Js //-->
<script src="/h5_visible/js/main.js"></script>
</body>
</html>