Cleanup landingpage
Changed to title case Made carousel lazy load Feature specific screenshots
This commit is contained in:
witzig
parent
713e20bc6c
commit
648a6ea57c
5 changed files with 116 additions and 130 deletions
|
|
@ -24,3 +24,10 @@
|
|||
margin-left: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 .glyphicon {
|
||||
font-size: .75em;
|
||||
}
|
||||
h3 .glyphicon {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
|
|
|||
3
public/images/screenshots/README.md
Normal file
3
public/images/screenshots/README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
Screenshots taken with:
|
||||
https://derailer.org/paparazzi/
|
||||
format=png w=1024 h=auto
|
||||
|
|
@ -1,60 +1,39 @@
|
|||
<style>
|
||||
h2 .glyphicon {
|
||||
font-size: .75em;
|
||||
}
|
||||
h3 .glyphicon {
|
||||
font-size: .8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-list-alt"></span> {{#translate}}List management{{/translate}}</h2>
|
||||
<h2><span class="glyphicon glyphicon-list-alt"></span> {{#translate}}List Management{{/translate}}</h2>
|
||||
<p>{{#translate}}Mailtrain allows you to easily manage even very large lists. Million subscribers? Not a problem. You can add subscribers manually, through the API or import from a CSV file. All lists come with support for custom fields and merge tags as well.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-list-management">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='List management'
|
||||
title='List Management'
|
||||
cls='modal-list-management'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img01='/images/screenshots/lists/lists.png'
|
||||
img02='/images/screenshots/lists/view.png'
|
||||
img03='/images/screenshots/lists/subscription/edit.png'
|
||||
img04='/images/screenshots/subscription/create.png'
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-tasks"></span> {{#translate}}Custom fields{{/translate}}</h2>
|
||||
<h2><span class="glyphicon glyphicon-tasks"></span> {{#translate}}Custom Fields{{/translate}}</h2>
|
||||
<p>{{#translate}}Text fields, numbers, drop downs or checkboxes, Mailtrain has them all. Every custom field can be included in the generated newsletters through merge tags.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-custom-fields">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='Custom fields'
|
||||
title='Custom Fields'
|
||||
cls='modal-custom-fields'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
img01='/images/screenshots/fields/edit.png'
|
||||
img02='/images/screenshots/fields/view.png'
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-filter"></span> {{#translate}}List segmentation{{/translate}}</h2>
|
||||
<h2><span class="glyphicon glyphicon-filter"></span> {{#translate}}List Segmentation{{/translate}}</h2>
|
||||
<p>{{#translate}}Send messages only to list subscribers that match predefined segmentation rules. No need to create separate lists with small differences.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-list-segmentation">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='List segmentation'
|
||||
title='List Segmentation'
|
||||
cls='modal-list-segmentation'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
img01='/images/screenshots/segments/create.png'
|
||||
img02='/images/screenshots/segments/rules/create.png'
|
||||
img03='/images/screenshots/segments/rules/configure.png'
|
||||
img04='/images/screenshots/segments/view.png'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,15 +48,9 @@
|
|||
{{> modal_carousel
|
||||
title='RSS Campaigns'
|
||||
cls='modal-rss-campaigns'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
img01='/images/screenshots/campaigns/create-rss.png'
|
||||
img02='/images/screenshots/campaigns/view-rss.png'
|
||||
img03='/images/screenshots/campaigns/campaigns.png'
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
|
|
@ -87,33 +60,20 @@
|
|||
{{> modal_carousel
|
||||
title='GPG Encryption'
|
||||
cls='modal-gpg-encryption'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
img01='/images/screenshots/subscription/create.png'
|
||||
img02='/images/screenshots/settings.png'
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-stats"></span> {{#translate}}Click stats{{/translate}}</h2>
|
||||
<h2><span class="glyphicon glyphicon-stats"></span> {{#translate}}Click Stats{{/translate}}</h2>
|
||||
<p>{{#translate}}After a campaign is sent, check individual click statistics for every link included in the message.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-click-stats">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='Click stats'
|
||||
title='Click Stats'
|
||||
cls='modal-click-stats'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
img01='/images/screenshots/campaigns/view.png'
|
||||
img02='/images/screenshots/campaigns/view-links.png'
|
||||
img03='/images/screenshots/campaigns/clicked/view.png'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,57 +82,43 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-eye-open"></span> {{#translate}}Open source{{/translate}}</h2>
|
||||
<p>{{#translate}}Mailtrain is available under GPLv3 license and completely open source.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-open-source">{{#translate}}Show more{{/translate}}</button>
|
||||
<h2><span class="glyphicon glyphicon-edit"></span> {{#translate}}Template Editors{{/translate}}</h2>
|
||||
<p>{{#translate}}Mailtrain ships with GrapeJS and Mosaico built in, two advanced template editors. Mailtrain also offers a code editor if you prefer to handcraft the HTML yourself.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-editors">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='Open source'
|
||||
cls='modal-open-source'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
title='Template Editors'
|
||||
cls='modal-editors'
|
||||
img01='/images/screenshots/templates/create.png'
|
||||
img02='/images/screenshots/templates/edit/grapejs.png'
|
||||
img03='/images/screenshots/grapejs/editor-1.png'
|
||||
img04='/images/screenshots/grapejs/editor-2.png'
|
||||
img05='/images/screenshots/grapejs/editor-3.png'
|
||||
img06='/images/screenshots/templates/edit/mosaico.png'
|
||||
img07='/images/screenshots/mosaico/editor-1.png'
|
||||
img08='/images/screenshots/mosaico/editor-2.png'
|
||||
img09='/images/screenshots/mosaico/editor-3.png'
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-envelope"></span> {{#translate}}Send via any provider{{/translate}}</h2>
|
||||
<h2><span class="glyphicon glyphicon-send"></span> {{#translate}}Send via Any Provider{{/translate}}</h2>
|
||||
<p>{{#translate}}Mailtrain recommends <a href="https://sendpulse.com/?utm_source=mailtrain&utm_medium=providerlist">SendPulse</a> even though you can use any provider that supports SMTP protocol to send out your newsletters. Bounce and complaints handling via webhooks is supported for SES, SparkPost, SendGrid and Mailgun, also for Postfix and ZoneMTA.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-send-via-any-provider">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='Send via any provider'
|
||||
title='Send via Any Provider'
|
||||
cls='modal-send-via-any-provider'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
img01='/images/screenshots/settings.png'
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2><span class="glyphicon glyphicon-cog"></span> {{#translate}}Trigger based automation{{/translate}}</h2>
|
||||
<h2><span class="glyphicon glyphicon-cog"></span> {{#translate}}Automation{{/translate}}</h2>
|
||||
<p>{{#translate}}Define automation triggers to send specific messages when a user activates the trigger.{{/translate}}</p>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-trigger-based-automation">{{#translate}}Show more{{/translate}}</button>
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target=".modal-automation">{{#translate}}Show more{{/translate}}</button>
|
||||
{{> modal_carousel
|
||||
title='Trigger based automation'
|
||||
cls='modal-trigger-based-automation'
|
||||
img01='/images/img01.png'
|
||||
img02='/images/img02.png'
|
||||
img03='/images/img03.png'
|
||||
img04='/images/img04.png'
|
||||
img05='/images/img05.png'
|
||||
img06='/images/img06.png'
|
||||
img07='/images/img07.png'
|
||||
img08='/images/img08.png'
|
||||
img09='/images/img09.png'
|
||||
title='Automation'
|
||||
cls='modal-automation'
|
||||
img01='/images/screenshots/triggers/create-select.png'
|
||||
img02='/images/screenshots/triggers/create.png'
|
||||
img03='/images/screenshots/users/api.png'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -181,9 +127,10 @@
|
|||
|
||||
<div class="row" style="background: #eee;">
|
||||
<div class="col-md-8">
|
||||
<h3>{{#translate}}Donate to author{{/translate}}</h3>
|
||||
<p>{{#translate}}If you really like Mailtrain or your business benefits from it financially then I would really appreciate a small donation to keep the Mailtrain development engines running. You can either use Bitcoin or PayPal for donations. My Bitcoin wallet is{{/translate}} <code>15Z8ADxhssKUiwP3jbbqJwA21744KMCfTM</code></p>
|
||||
<p style="margin-bottom: 20px;"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DB26KWR2BQX5W" class="btn btn-info">{{#translate}}or donate using PayPal{{/translate}}</a></p>
|
||||
<h3>{{#translate}}Donate to Author{{/translate}}</h3>
|
||||
<p>{{#translate}}Mailtrain is available under GPLv3 license and completely open source.{{/translate}}</p>
|
||||
<p>{{#translate}}If you really like Mailtrain or your business benefits from it financially then I would really appreciate a small donation to keep the Mailtrain development engines running. You can either use Bitcoin or PayPal for donations. My Bitcoin wallet is{{/translate}}: <code>15Z8ADxhssKUiwP3jbbqJwA21744KMCfTM</code></p>
|
||||
<p style="margin-bottom: 20px;"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DB26KWR2BQX5W" class="btn btn-info">{{#translate}}Or Donate Using Paypal{{/translate}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -122,11 +122,11 @@
|
|||
</div>
|
||||
|
||||
<h1><img class="img-responsive" src="/mailtrain-header.png"></h1>
|
||||
<p>{{#translate}}Self hosted newsletter app built on top of Nodemailer{{/translate}}</p>
|
||||
<p>{{#translate}}Self Hosted Newsletter App Built on Top of Nodemailer{{/translate}}</p>
|
||||
<p>
|
||||
<a class="btn btn-info btn-md" href="https://github.com/andris9/mailtrain" role="button"><span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span> {{#translate}}Source on GitHub{{/translate}}</a>
|
||||
|
||||
<a class="btn btn-success btn-md" href="http://mailtrain.org/subscription/EysIv8sAx" role="button"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> {{#translate}}Subscribe to our newsletter{{/translate}}</a>
|
||||
<a class="btn btn-success btn-md" href="http://mailtrain.org/subscription/EysIv8sAx" role="button"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> {{#translate}}Subscribe to Our Newsletter{{/translate}}</a>
|
||||
</p>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
<style>
|
||||
#carousel-{{cls}} > * {
|
||||
z-index: 2;
|
||||
}
|
||||
#carousel-{{cls}}:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
line-height: 500px;
|
||||
text-align: center;
|
||||
content: 'Loading ...';
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade {{cls}}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" style="width: 999px;" role="document">
|
||||
<div class="modal-dialog" style="width: auto; max-width: 1026px !important;" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">{{#translate}}{{title}}{{/translate}}</h4>
|
||||
</div>
|
||||
<div id="carousel-{{cls}}" class="carousel slide" data-ride="carousel">
|
||||
<div id="carousel-{{cls}}" class="carousel slide" data-interval="false" style="min-height: 500px;">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-{{cls}}" data-slide-to="0" class="active"></li>
|
||||
|
|
@ -18,76 +34,89 @@
|
|||
|
||||
{{#if img01}}
|
||||
<div class="item active">
|
||||
<img src="{{img01}}">
|
||||
<img data-src="{{img01}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img02}}
|
||||
<div class="item">
|
||||
<img src="{{img02}}">
|
||||
<img data-src="{{img02}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img03}}
|
||||
<div class="item">
|
||||
<img src="{{img03}}">
|
||||
<img data-src="{{img03}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img04}}
|
||||
<div class="item">
|
||||
<img src="{{img04}}">
|
||||
<img data-src="{{img04}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img05}}
|
||||
<div class="item">
|
||||
<img src="{{img05}}">
|
||||
<img data-src="{{img05}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img06}}
|
||||
<div class="item">
|
||||
<img src="{{img06}}">
|
||||
<img data-src="{{img06}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img07}}
|
||||
<div class="item">
|
||||
<img src="{{img07}}">
|
||||
<img data-src="{{img07}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img08}}
|
||||
<div class="item">
|
||||
<img src="{{img08}}">
|
||||
<img data-src="{{img08}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img09}}
|
||||
<div class="item">
|
||||
<img src="{{img09}}">
|
||||
<img data-src="{{img09}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if img10}}
|
||||
<div class="item">
|
||||
<img src="{{img10}}">
|
||||
<img data-src="{{img10}}">
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<a class="left carousel-control" href="#carousel-{{cls}}" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-{{cls}}" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
{{#if img02}}
|
||||
<!-- Controls -->
|
||||
<a class="left carousel-control" href="#carousel-{{cls}}" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-{{cls}}" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
$('.modal.{{cls}}').on('show.bs.modal', function() {
|
||||
$(this).find('img[data-src]').each(function() {
|
||||
$(this).attr('src', $(this).data('src'));
|
||||
$(this).removeAttr('data-src');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue