Skip to content

Commit 6ecb21e

Browse files
pofiderpofider
committed
update introduction video
1 parent 5f92a5f commit 6ecb21e

File tree

2 files changed

+125
-109
lines changed

2 files changed

+125
-109
lines changed

‎views/home.html

Lines changed: 59 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<div class="home-title">
66
<h1 class="fg-white">javascript reporting server</h1>
77

8-
<p class="fg-white subtitle">innovative and unlimited reporting based on javascript templating engines
8+
<p class="fg-white subtitle">innovative and unlimited reporting based on javascript templating
9+
engines
910
</p>
1011

1112
<div class="margin5 coll">
@@ -60,34 +61,43 @@ <h1 class="fg-white">javascript reporting server</h1>
6061
<div class="text-center title">
6162
<h3>FEATURES</h3>
6263
</div>
63-
<div class="coll2">
64+
<div class="coll2">
6465
<h4>
65-
<i class="fg-green icon-file-pdf feature-icon"></i>pdf, excel, docx, html, csv</h4>
66+
<i class="fg-green icon-file-pdf feature-icon"></i>pdf, excel, docx, html, csv
67+
</h4>
6668

6769
<p>Various output formats can be produced just from the html and javascript</p>
6870

6971
<h4>
70-
<i class="fg-green icon-unlocked feature-icon"></i>open source, cross-platform</h4>
72+
<i class="fg-green icon-unlocked feature-icon"></i>open source, cross-platform
73+
</h4>
7174

72-
<p>Templating engines for powerful dynamic layouts, custom javasript hooks for data fetching, full support for the latest css and javascript</p>
75+
<p>Templating engines for powerful dynamic layouts, custom javasript hooks for data fetching, full support
76+
for the latest css and javascript</p>
7377

7478
<h4>
75-
<i class="fg-green icon-monitor feature-icon"></i>html designer</h4>
76-
77-
<p>jsreport includes web based designer, just connect with a modern browser and you're ready to design reports
78-
</p>
79+
<i class="fg-green icon-monitor feature-icon"></i>html designer
80+
</h4>
81+
82+
<p>jsreport includes web based designer, just connect with a modern browser and you're ready to design
83+
reports
84+
</p>
7985

8086
<h4>
81-
<i class="fg-green icon-briefcase feature-icon"></i>complete set of extensions</h4>
87+
<i class="fg-green icon-briefcase feature-icon"></i>complete set of extensions
88+
</h4>
8289

8390
<p>scheduling, templates versioning, import export and backup, sub reports, users management</p>
8491

8592
<h4>
86-
<i class="fg-green icon-link feature-icon"></i>API</h4>
93+
<i class="fg-green icon-link feature-icon"></i>API
94+
</h4>
8795

8896
<p>Use simple REST API, CLI or SDKs to render a report from everywhere</p>
8997
</div>
90-
<div class="coll2 video youtubeModal button-box" data-youtube="https://youtube.com/embed/mf8-SdGjsdo" data-title="jsreport introduction">
98+
<div class="coll2 video youtubeModal button-box"
99+
data-youtube="https://www.youtube.com/embed/nz1SKdOKAhM?si=QBw2PQz9VZofPpqH"
100+
data-title="jsreport introduction">
91101
<img alt="studio" src="/screenshots/studio.png?v=1">
92102
</div>
93103
</div>
@@ -108,7 +118,7 @@ <h3>pdf dashboard</h3>
108118

109119
<div class="text-center top20 coll3-image">
110120
<a href="/showcases">
111-
<img src="/showcases/tasks-report-small.png" />
121+
<img src="/showcases/tasks-report-small.png" />
112122
</a>
113123
</div>
114124
</div>
@@ -121,7 +131,7 @@ <h3>pdf e-ticket</h3>
121131

122132
<div class="text-center top20 coll3-image">
123133
<a href="/showcases">
124-
<img src="/showcases/e-ticket-small.png" />
134+
<img src="/showcases/e-ticket-small.png" />
125135
</a>
126136
</div>
127137
</div>
@@ -134,10 +144,10 @@ <h3>excel dashboard</h3>
134144

135145
<div class="text-center top20 coll3-image">
136146
<a href="/showcases">
137-
<img src="/showcases/excel-dashboard-small.png" />
147+
<img src="/showcases/excel-dashboard-small.png" />
138148
</a>
139149
</div>
140-
</div>
150+
</div>
141151
</div>
142152
</div>
143153
</div>
@@ -151,7 +161,8 @@ <h3>DOWNLOAD AND RUN ANYWHERE</h3>
151161
<i class="fg-orange icon-tux download-icon"></i>
152162
<i class="fg-blue icon-windows download-icon"></i>
153163

154-
<p>Download jsreport and use it inside your network. It runs well almost everywhere. Linux, Windows, AWS, Azure,
164+
<p>Download jsreport and use it inside your network. It runs well almost everywhere. Linux, Windows, AWS,
165+
Azure,
155166
OpenShift... you name it!</p>
156167
</div>
157168

@@ -177,7 +188,8 @@ <h3>REPORTING AS A SERVICE</h3>
177188
<div class="coll2">
178189
<i class="fg-blue icon-cloud online-icon"></i>
179190

180-
<p>Start making reports online in a second without any installation required. jsreportonline is cloud hosted reporting
191+
<p>Start making reports online in a second without any installation required. jsreportonline is cloud hosted
192+
reporting
181193
service ready to be used. </p>
182194
</div>
183195

@@ -194,34 +206,34 @@ <h3 class="fg-white">Sign Up / Sign In</h3>
194206
</div>
195207

196208
<div class="bg-grayLighter section">
197-
<div class="container grid3">
198-
<div class="text-center fg-gray">
199-
<h3>TRUSTED</h3>
200-
<p>
201-
200 000 server installations,
202-
600 subscribed enterprise customers including...
203-
</p>
209+
<div class="container grid3">
210+
<div class="text-center fg-gray">
211+
<h3>TRUSTED</h3>
212+
<p>
213+
200 000 server installations,
214+
600 subscribed enterprise customers including...
215+
</p>
216+
</div>
217+
<div>
218+
<div class="coll5" style='vertical-align: middle'>
219+
<img width='150px' src='/img/references/premiercrop.png' />
204220
</div>
205-
<div>
206-
<div class="coll5" style='vertical-align: middle'>
207-
<img width='150px' src='/img/references/premiercrop.png' />
208-
</div>
209-
<div class="coll5" style='vertical-align: middle'>
210-
<img width='150px' src='/img/references/terradex.png' />
211-
</div>
212-
<div class="coll5" style='vertical-align: middle'>
213-
<img width='150px' src='/img/references/iterpro.png' />
214-
</div>
215-
<div class="coll5" style='vertical-align: middle'>
216-
<img width='150px' src='/img/references/uqam.png' />
217-
</div>
218-
<div class="coll5" style='vertical-align: middle'>
219-
<img width='150px' src='/img/references/dataprofit.svg' />
220-
</div>
221-
221+
<div class="coll5" style='vertical-align: middle'>
222+
<img width='150px' src='/img/references/terradex.png' />
223+
</div>
224+
<div class="coll5" style='vertical-align: middle'>
225+
<img width='150px' src='/img/references/iterpro.png' />
226+
</div>
227+
<div class="coll5" style='vertical-align: middle'>
228+
<img width='150px' src='/img/references/uqam.png' />
222229
</div>
230+
<div class="coll5" style='vertical-align: middle'>
231+
<img width='150px' src='/img/references/dataprofit.svg' />
232+
</div>
233+
223234
</div>
224235
</div>
236+
</div>
225237

226238
<div class="section bg-grayLightest">
227239
<div class="container grid3">
@@ -233,7 +245,8 @@ <h3> EXPLORE AND LEARN</h3>
233245
<h3>Learn section</h3>
234246

235247
<p>Visit
236-
<a href="/learn">learn section</a> and check out the tutorials and official documentation.</p>
248+
<a href="/learn">learn section</a> and check out the tutorials and official documentation.
249+
</p>
237250

238251
<div class="text-center coll3-image">
239252
<a href="/learn">
@@ -248,7 +261,8 @@ <h3>Deep dive youtube screencast</h3>
248261
<p>The author of jsreport shows the main features live in this screencast. </p>
249262

250263
<div class="text-center coll3-image">
251-
<a class="youtubeModal" data-youtube="https://youtube.com/embed/fhOQ0HPjK6s" data-title="Deep dive into jsreport">
264+
<a class="youtubeModal" data-youtube="https://youtube.com/embed/fhOQ0HPjK6s"
265+
data-title="Deep dive into jsreport">
252266
<i class="fg-blue fg-hover-red icon-camera-2 learn-icon"></i>
253267
</a>
254268
</div>
@@ -302,5 +316,4 @@ <h3>MEET US</h3>
302316
</div>
303317
</div>
304318
</div>
305-
</div>
306-
319+
</div>

‎views/playground.html

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,66 @@
1-
<div class="section bg-gray product-box playground">
2-
<div class="text-center product">
3-
<h1 class="fg-white">
4-
jsreport playground<br/>
5-
<small>free report fiddling</small>
6-
</h1>
7-
8-
<div class="text-center">
9-
<div class="margin5 coll">
10-
<a href="https://playground.jsreport.net">
11-
<div class="bg-green home-splash-button">
12-
<div class="padding10 text-center">
13-
<span class="fg-white">Open</span>
14-
</div>
15-
</div>
16-
</a>
17-
</div>
18-
<div class="margin5 coll">
19-
<a href="https://www.youtube.com/watch?v=mf8-SdGjsdo">
20-
<div class="bg-amber home-splash-button">
21-
<div class="padding10 text-center">
22-
<span class="fg-white">Quick start video</span>
23-
</div>
24-
</div>
25-
</a>
26-
</div>
27-
</div>
28-
</div>
29-
</div>
30-
31-
<div class="bg-white section">
32-
<div class="text-center title">
33-
<h3>GET STARTED</h3>
34-
</div>
35-
<div class="container articles grid">
36-
<div class="row">
37-
<div class="span6">
38-
<h3>Quick start <i class="fg-green icon-alarm-clock"></i></h3>
39-
40-
<p class="padding-top5">
41-
No installation, no registration, just open playground and play with jsreport.
42-
</p>
43-
44-
<h3>Quick demos <i class="fg-green icon-bars"></i></h3>
45-
46-
<p class="padding-top5">
47-
Playground includes set of demos showing the basics of jsreport.
48-
</p>
49-
50-
<h3>Share templates <i class="fg-green icon-share-2"></i></h3>
51-
52-
<p class="padding-top5">
53-
You can easily share the workspace link with others and attach it to a <a href="http://stackoverflow.com/questions/tagged/jsreport">stackoverflow question</a> for example.
54-
</p>
55-
</div>
56-
<div class="span6 offset2">
57-
<iframe width="560" height="315" class="span6" src="//www.youtube.com/embed/mf8-SdGjsdo?rel=0"
58-
frameborder="0" allowfullscreen></iframe>
59-
60-
</div>
61-
</div>
62-
</div>
63-
</div>
1+
<div class="section bg-gray product-box playground">
2+
<div class="text-center product">
3+
<h1 class="fg-white">
4+
jsreport playground<br />
5+
<small>free report fiddling</small>
6+
</h1>
7+
8+
<div class="text-center">
9+
<div class="margin5 coll">
10+
<a href="https://playground.jsreport.net">
11+
<div class="bg-green home-splash-button">
12+
<div class="padding10 text-center">
13+
<span class="fg-white">Open</span>
14+
</div>
15+
</div>
16+
</a>
17+
</div>
18+
<div class="margin5 coll">
19+
<a href="https://www.youtube.com/watch?v=nz1SKdOKAhM&ab_channel=jsreport">
20+
<div class="bg-amber home-splash-button">
21+
<div class="padding10 text-center">
22+
<span class="fg-white">Quick start video</span>
23+
</div>
24+
</div>
25+
</a>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<div class="bg-white section">
32+
<div class="text-center title">
33+
<h3>GET STARTED</h3>
34+
</div>
35+
<div class="container articles grid">
36+
<div class="row">
37+
<div class="span6">
38+
<h3>Quick start <i class="fg-green icon-alarm-clock"></i></h3>
39+
40+
<p class="padding-top5">
41+
No installation, no registration, just open playground and play with jsreport.
42+
</p>
43+
44+
<h3>Quick demos <i class="fg-green icon-bars"></i></h3>
45+
46+
<p class="padding-top5">
47+
Playground includes set of demos showing the basics of jsreport.
48+
</p>
49+
50+
<h3>Share templates <i class="fg-green icon-share-2"></i></h3>
51+
52+
<p class="padding-top5">
53+
You can easily share the workspace link with others and attach it to a <a
54+
href="http://stackoverflow.com/questions/tagged/jsreport">stackoverflow question</a> for
55+
example.
56+
</p>
57+
</div>
58+
<div class="span6 offset2">
59+
<iframe width="560" height="315" src="https://www.youtube.com/embed/nz1SKdOKAhM?si=QBw2PQz9VZofPpqH"
60+
title="YouTube video player" frameborder="0"
61+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
62+
allowfullscreen></iframe>
63+
</div>
64+
</div>
65+
</div>
66+
</div>

0 commit comments

Comments
 (0)