-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·538 lines (489 loc) · 22.2 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
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hoqii System POS Operasional Terpadu">
<meta name="author" content="Meruvian">
<title>Selamat Datang di Website Hoqii</title>
<!-- core CSS -->
<link href="asset/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="asset/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="asset/css/bootstrap/main.css" rel="stylesheet">
<link href="asset/css/bootstrap/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico?v=1.1">
</head><!--/head-->
<body class="homepage" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="scroll-nav" class="navbar navbar-inverse navbar-fixed-top scrollclass">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="scroll-logo" class="navbar-brand" href="index.html">
<img id="top-logo" src="asset/image/logo.png" alt="logo">
<img id="buttom-logo" src="asset/image/white_hexa32.png" alt="logo">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><a class="change" href="index.html">Beranda</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Layanan <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a class="change" href="#.qpos">QPOS</a></li>
<li><a class="change" href="#.qstore">QStore</a></li>
<li><a class="change" href="#.qdelivery">QDelivery</a></li>
<li><a class="change" href="#.qdistribution">QDistribution</a></li>
</ul>
</li>
<li><a class="change" href="tour.html">Langkah Memulai</a></li>
<li><a class="change" href="login.html">Masuk/Daftar</a></li>
<li><a class="change" href="about-us.html">Hubungi Kami</a></li>
</ul>
</div>
</div><!--/.container-->
</div><!--/nav-->
</header><!--/header-->
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" >
<div class="item active" style="background-image: url('asset/image/bg44.jpg')">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content slider-well">
<h1 class="animation animated-item-1"><i class="fa fa-tablet"></i> QPOS</h1>
<h2 class="animation animated-item-2">Sistem POS terpadu menggunakan Android sebagai Point of Sales Anda.</h2>
<a class="btn-slide animation animated-item-3" href="#">Lebih Lanjut</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url('asset/image/bg55.jpg')">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content slider-well">
<h1 class="animation animated-item-1"><i class="fa fa-truck"></i> QDelivery</h1>
<h2 class="animation animated-item-2">Sistem Penjualan dan Pesan Antar terintegrasi.</h2>
<a class="btn-slide animation animated-item-3" href="#">Lebih Lanjut</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url('asset/image/bg33.jpg')">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content slider-well">
<h1 class="animation animated-item-1"><i class="fa fa-bookmark-o"></i> Toko Online</h1>
<h2 class="animation animated-item-2">Otomatis setiap site dapat menjadi toko online terpadu</h2>
<a class="btn-slide animation animated-item-3" href="#">Lebih Lanjut</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section><!--/#main-slider-->
<section id="qpos" class="qpos features-blue">
<div class="container">
<div class="center wow fadeInDown">
<h2>QPOS</h2>
<p class="lead">Sistem Point of Sales (POS) yang memiliki fitur-fitur <br>yang sangat lengkap untuk kebutuhan operasional outlet/toko Anda.</p>
</div>
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-tablet"></i>
<h2>Point of Sales</h2>
<h3>Pelayanan QPOS merupakan pelayanan terintegrasi dan tersentralisasi.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-cubes"></i>
<h2>Stock Management</h2>
<h3>Memudahkan mengakses dan mengatur persediaan di semua cabang toko Anda.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-users"></i>
<h2>Multi Role</h2>
<h3>Memungkinkan untuk menampilkan layanan sistem sesuai dengan hak aksesnya.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-print"></i>
<h2>Printing</h2>
<h3>Cetak dokumen langsung ke printer POS populer (Epson).</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-refresh"></i>
<h2>Syncronization</h2>
<h3>Pengiriman data secara periodik dari setiap toko ke Cloud</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-pie-chart"></i>
<h2>Reporting</h2>
<h3>Cloud reporting terpadu terhadap seluruh kegiatan operasional</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-mobile"></i>
<h2>Booth Mode (QBooth)</h2>
<h3>Standalone POS yang dapat dioperasionalkan secara remote, yang sangat cocok untuk toko kecil, event based atau berpindah-pindah </h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-coffee"></i>
<h2>Cafe Mode (QCafe)</h2>
<h3>Solusi untuk toko berjenis cafe yang membutuhkan beberapa jenis pelayanan, seperti Server, Cashier, dan Chef.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-wifi"></i>
<h2>Wifi untuk QCafe</h2>
<h3>Fitur integrasi dengan WiFi, sehingga yang memesan dan beli yang mendapat akses Internet.</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
<div class="pull-right">
<a href="qpos.html"><b>Informasi Lebih Lanjut >> </b></a>
</div>
</div><!--/.container-->
</section><!--/#feature-->
<section id="qstore" class="qstore ">
<div class="container">
<div class="center wow fadeInDown">
<h2>QStore</h2>
<p class="lead">Toko online untuk menjangkau audience yang tidak dapat berkunjung ke toko fisik.</p>
</div>
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-th-large"></i>
<h2>Product Catalog</h2>
<h3>Produk-produk dengan kategorisasi ditampilkan secara online.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-shopping-cart"></i>
<h2>Shopping Cart</h2>
<h3>Keranjang belanja bagi setiap pengunjung yang membimbingnya untuk transaksi.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-tags"></i>
<h2>Discount and Promotion</h2>
<h3>Diskon produk, kombinasi paket dan promo terbaru.</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-truck"></i>
<h2>Shipping Gateway Integration</h2>
<h3>Terintegrasi dengan perusahaan pengiriman terpercaya</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-credit-card"></i>
<h2>Payment Gateway Integration (VT)</h2>
<h3>Metode pembayaran yang beragam mulai dari Master, VISA maupun menggunakan Kartu Debit.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-globe"></i>
<h2>Dedicated Domain</h2>
<h3>Toko online dengan nama domain tersendiri.</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
<div class="pull-right">
<a href="qstore.html"><b>Informasi Lebih Lanjut >> </b></a>
</div>
</div><!--/.container-->
</section><!--/#feature-->
<section id="qdelivery" class="qdelivery">
<div class="container">
<div class="center wow fadeInDown">
<h2>QDelivery</h2>
<p class="lead">Sistem penjualan pesan antar terintegrasi dengan QPOS.</p>
</div>
<div class="row">
<div class="features">
<div class="col-md-6 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-tablet"></i>
<h2>Delivery Order</h2>
<h3>Penerimaan pesanan pelanggan datang ke toko diinput pada sistem POS yang akan dikirim ke Cloud untuk proses pengiriman.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-6 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-phone"></i>
<h2>Call Center Order</h2>
<h3>Pemesanan menggunakan telepon atau short number</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
<div class="row">
<div class="features">
<div class="col-md-6 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-truck"></i>
<h2>Multi Shipping</h2>
<h3>Pemesanan terpusat dengan tujuan pengiriman terdistribusi mengikuti banyaknya cabang.</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-6 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-file-text-o"></i>
<h2>Reporting</h2>
<h3>Menampilkan laporan pemesanan, pengiriman dan penagihan untuk memonitor semua operasional perusahaan.</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
<div class="pull-right">
<a href="qstore.html"><b>Informasi Lebih Lanjut >> </b></a>
</div>
</div><!--/.container-->
</section><!--/#feature-->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="qdistribution" class="qdistribution ">
<div class="container">
<div class="center wow fadeInDown">
<h2>QDistribution</h2>
<p class="lead">Sistem manajemen distribusi mencakup proses pemesanan, pembelian, penjualan, <br>penagihan dan pembayaran. </p>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-edit fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Pesanan Pembelian</h4>
<p>Proses pemesanan barang yang akan dipesan ke supplier.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-cubes fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Penerimaan Barang</h4>
<p>Proses penerimaan barang dari proses pemesanan.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-exchange fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Retur Pembelian</h4>
<p>Kegiatan mengembalikan produk yang tidak sesuai.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-usd fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Pembayaran Pembelian</h4>
<p>Proses pembayaran terhadap pembelian yang berkaitan dengan proses pemesanan barang.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-files-o fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Pesanan Penjualan</h4>
<p>Proses memesan barang-barang oleh pelanggan.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Pengiriman Barang</h4>
<p>Pengiriman barang dari toko ke pelanggan.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-exchange fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Retur Penjualan</h4>
<p>Retur Penjualan mencatat barang-barang yang dikembalikan oleh pelanggan.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-calculator fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Penagihan</h4>
<p>Penagihan menampilkan informasi surat tagihan yang dikirim ke pelanggan.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-money fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Penerimaan Pembayaran</h4>
<p>Mencatat penerimaan pembayaran dari pelanggan.</p>
</div>
</div>
</div>
<div class="pull-right">
<a href="qdistribution.html"><b>Informasi Lebih Lanjut >> </b></a>
</div>
</section>
<!-- /.row -->
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2014 - 2015, <a target="_blank" href="#" title="Hoqii">Hoqii Systems</a>
</div>
<div id="footer1" class="col-sm-6"></div>
</div>
</div>
</footer><!--/#footer-->
<script>
var footerHttp = new XMLHttpRequest();
var footerUrl = "content/footer.json";
footerHttp.onreadystatechange = function() {
if (footerHttp.readyState == 4 && footerHttp.status == 200) {
var footerArr = JSON.parse(footerHttp.responseText);
myFooter(footerArr);
}
}
footerHttp.open("GET", footerUrl, true);
footerHttp.send();
function myFooter(arr) {
var out = "";
var i;
out += '<ul class="pull-right">';
for(i = 0; i < arr.length; i++) {
out += '<li><a href="' + arr[i].link + '">' + arr[i].name + '</a></li>';
}
out += '</ul>';
document.getElementById("footer1").innerHTML = out;
}
</script>
<script src="asset/js/jquery/jquery-2.1.1.min.js"></script>
<script src="asset/js/bootstrap/bootstrap.js"></script>
<script src="asset/js/jquery/jquery.arbitrary-anchor.js"/></script>
<script src="asset/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
AA_CONFIG.scrollOffset=35;
$( document ).ready(function() {
$('.dropdown-toggle').dropdown()
$("#buttom-logo").hide();
$(window).scroll(function(){
var distanceY = $(window).scrollTop(),
shrinkOn = 650,
header = $("#scroll-nav");
if (distanceY > shrinkOn) {
header.addClass( "navbar-scroll" );
$("#buttom-logo").show();
$("#buttom-logo").css("height","32px");
$("#top-logo").hide();
} else {
$("#buttom-logo").hide();
$("#top-logo").show();
if (header.hasClass( "navbar-scroll" )) {
header.removeClass( "navbar-scroll" );
}
}
})
});
</script>
</body>
</html>