Skip to content

Commit

Permalink
update introduction video
Browse files Browse the repository at this point in the history
  • Loading branch information
@pofider
pofider committed Jan 1, 2024
1 parent 5f92a5f commit 6ecb21e
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 109 deletions.
105 changes: 59 additions & 46 deletions views/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<div class="home-title">
<h1 class="fg-white">javascript reporting server</h1>

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

<div class="margin5 coll">
Expand Down Expand Up @@ -60,34 +61,43 @@ <h1 class="fg-white">javascript reporting server</h1>
<div class="text-center title">
<h3>FEATURES</h3>
</div>
<div class="coll2">
<div class="coll2">
<h4>
<i class="fg-green icon-file-pdf feature-icon"></i>pdf, excel, docx, html, csv</h4>
<i class="fg-green icon-file-pdf feature-icon"></i>pdf, excel, docx, html, csv
</h4>

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

<h4>
<i class="fg-green icon-unlocked feature-icon"></i>open source, cross-platform</h4>
<i class="fg-green icon-unlocked feature-icon"></i>open source, cross-platform
</h4>

<p>Templating engines for powerful dynamic layouts, custom javasript hooks for data fetching, full support for the latest css and javascript</p>
<p>Templating engines for powerful dynamic layouts, custom javasript hooks for data fetching, full support
for the latest css and javascript</p>

<h4>
<i class="fg-green icon-monitor feature-icon"></i>html designer</h4>

<p>jsreport includes web based designer, just connect with a modern browser and you're ready to design reports
</p>
<i class="fg-green icon-monitor feature-icon"></i>html designer
</h4>

<p>jsreport includes web based designer, just connect with a modern browser and you're ready to design
reports
</p>

<h4>
<i class="fg-green icon-briefcase feature-icon"></i>complete set of extensions</h4>
<i class="fg-green icon-briefcase feature-icon"></i>complete set of extensions
</h4>

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

<h4>
<i class="fg-green icon-link feature-icon"></i>API</h4>
<i class="fg-green icon-link feature-icon"></i>API
</h4>

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

<div class="text-center top20 coll3-image">
<a href="/showcases">
<img src="/showcases/tasks-report-small.png" />
<img src="/showcases/tasks-report-small.png" />
</a>
</div>
</div>
Expand All @@ -121,7 +131,7 @@ <h3>pdf e-ticket</h3>

<div class="text-center top20 coll3-image">
<a href="/showcases">
<img src="/showcases/e-ticket-small.png" />
<img src="/showcases/e-ticket-small.png" />
</a>
</div>
</div>
Expand All @@ -134,10 +144,10 @@ <h3>excel dashboard</h3>

<div class="text-center top20 coll3-image">
<a href="/showcases">
<img src="/showcases/excel-dashboard-small.png" />
<img src="/showcases/excel-dashboard-small.png" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -151,7 +161,8 @@ <h3>DOWNLOAD AND RUN ANYWHERE</h3>
<i class="fg-orange icon-tux download-icon"></i>
<i class="fg-blue icon-windows download-icon"></i>

<p>Download jsreport and use it inside your network. It runs well almost everywhere. Linux, Windows, AWS, Azure,
<p>Download jsreport and use it inside your network. It runs well almost everywhere. Linux, Windows, AWS,
Azure,
OpenShift... you name it!</p>
</div>

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

<p>Start making reports online in a second without any installation required. jsreportonline is cloud hosted reporting
<p>Start making reports online in a second without any installation required. jsreportonline is cloud hosted
reporting
service ready to be used. </p>
</div>

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

<div class="bg-grayLighter section">
<div class="container grid3">
<div class="text-center fg-gray">
<h3>TRUSTED</h3>
<p>
200 000 server installations,
600 subscribed enterprise customers including...
</p>
<div class="container grid3">
<div class="text-center fg-gray">
<h3>TRUSTED</h3>
<p>
200 000 server installations,
600 subscribed enterprise customers including...
</p>
</div>
<div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/premiercrop.png' />
</div>
<div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/premiercrop.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/terradex.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/iterpro.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/uqam.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/dataprofit.svg' />
</div>

<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/terradex.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/iterpro.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/uqam.png' />
</div>
<div class="coll5" style='vertical-align: middle'>
<img width='150px' src='/img/references/dataprofit.svg' />
</div>

</div>
</div>
</div>

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

<p>Visit
<a href="/learn">learn section</a> and check out the tutorials and official documentation.</p>
<a href="/learn">learn section</a> and check out the tutorials and official documentation.
</p>

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

<div class="text-center coll3-image">
<a class="youtubeModal" data-youtube="https://youtube.com/embed/fhOQ0HPjK6s" data-title="Deep dive into jsreport">
<a class="youtubeModal" data-youtube="https://youtube.com/embed/fhOQ0HPjK6s"
data-title="Deep dive into jsreport">
<i class="fg-blue fg-hover-red icon-camera-2 learn-icon"></i>
</a>
</div>
Expand Down Expand Up @@ -302,5 +316,4 @@ <h3>MEET US</h3>
</div>
</div>
</div>
</div>

</div>
129 changes: 66 additions & 63 deletions views/playground.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,66 @@
<div class="section bg-gray product-box playground">
<div class="text-center product">
<h1 class="fg-white">
jsreport playground<br/>
<small>free report fiddling</small>
</h1>

<div class="text-center">
<div class="margin5 coll">
<a href="https://playground.jsreport.net">
<div class="bg-green home-splash-button">
<div class="padding10 text-center">
<span class="fg-white">Open</span>
</div>
</div>
</a>
</div>
<div class="margin5 coll">
<a href="https://www.youtube.com/watch?v=mf8-SdGjsdo">
<div class="bg-amber home-splash-button">
<div class="padding10 text-center">
<span class="fg-white">Quick start video</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="bg-white section">
<div class="text-center title">
<h3>GET STARTED</h3>
</div>
<div class="container articles grid">
<div class="row">
<div class="span6">
<h3>Quick start <i class="fg-green icon-alarm-clock"></i></h3>

<p class="padding-top5">
No installation, no registration, just open playground and play with jsreport.
</p>

<h3>Quick demos <i class="fg-green icon-bars"></i></h3>

<p class="padding-top5">
Playground includes set of demos showing the basics of jsreport.
</p>

<h3>Share templates <i class="fg-green icon-share-2"></i></h3>

<p class="padding-top5">
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.
</p>
</div>
<div class="span6 offset2">
<iframe width="560" height="315" class="span6" src="//www.youtube.com/embed/mf8-SdGjsdo?rel=0"
frameborder="0" allowfullscreen></iframe>

</div>
</div>
</div>
</div>
<div class="section bg-gray product-box playground">
<div class="text-center product">
<h1 class="fg-white">
jsreport playground<br />
<small>free report fiddling</small>
</h1>

<div class="text-center">
<div class="margin5 coll">
<a href="https://playground.jsreport.net">
<div class="bg-green home-splash-button">
<div class="padding10 text-center">
<span class="fg-white">Open</span>
</div>
</div>
</a>
</div>
<div class="margin5 coll">
<a href="https://www.youtube.com/watch?v=nz1SKdOKAhM&ab_channel=jsreport">
<div class="bg-amber home-splash-button">
<div class="padding10 text-center">
<span class="fg-white">Quick start video</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="bg-white section">
<div class="text-center title">
<h3>GET STARTED</h3>
</div>
<div class="container articles grid">
<div class="row">
<div class="span6">
<h3>Quick start <i class="fg-green icon-alarm-clock"></i></h3>

<p class="padding-top5">
No installation, no registration, just open playground and play with jsreport.
</p>

<h3>Quick demos <i class="fg-green icon-bars"></i></h3>

<p class="padding-top5">
Playground includes set of demos showing the basics of jsreport.
</p>

<h3>Share templates <i class="fg-green icon-share-2"></i></h3>

<p class="padding-top5">
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.
</p>
</div>
<div class="span6 offset2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/nz1SKdOKAhM?si=QBw2PQz9VZofPpqH"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>

0 comments on commit 6ecb21e

Please sign in to comment.