Commit efbdb91f authored by tchou's avatar tchou
Browse files

Overview factorised

- I tried to use the show and hidden per scenario classes.
- I think it will be easier to review and maintain looking only at the install/inc/overview.html file
- I keept all the clone overviews to have a back button
- Some timing might be wrong, I must check it (espacialy for mac onces)
- Maybe for the steps implementation off the big steps (with green background) we could inline and share the strings (needs and steps)

The previous commit where WIP work. If I need next ones, I will try to do atomic ones.
parent a3d10559
......@@ -4,10 +4,13 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/clone" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/debian]]
[[!inline pages="install/inc/overview/clone" raw="yes"]]
<h1 class="text-center">Install from <strong>an other Tails</strong>: overview</h1>
[[!inline pages="install/inc/overview" raw="yes"]]
[[
<div class="panel panel-primary">
......
......@@ -4,115 +4,13 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/debian-usb" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/win]]
<h1 class="text-center">Install from <strong>Debian</strong></h1>
<div id="needs">
<h3>You need:</h3>
<div class="row you_need">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/clock.png link="no"]]
<div class="caption">
<h4>1 hour<br>
<small>[[!inline pages="inc/stable_i386_iso_size_mib" raw="yes"]] to download</small><br>
<small>25 minutes to install</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/1-usb.png link="no"]]
<div class="caption">
<h4>1 USB Stick <br>
<small>4 GB minimum</small> <br>
<small>All data will be lost!</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/pc.png link="no"]]
<div class="caption">
<h4>a computer</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/screens.png link="no"]]
<div class="caption">
<h4>a smartphone <br>
<small>
another computer <br>
or a printer
</small>
</h4>
</div>
</div>
</div>
</div>
</div>
<div id="steps">
<h3>Your steps:</h3>
<ol>
<li>
<h4>First you will install a Tails on your USB stick.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1 ">
<div class="thumbnail step">
[[!img install/inc/infography/download-and-verify.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Download</h5>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="thumbnail step">
[[!img install/inc/infography/install-tails.png link="no"]]
<div class="caption">
<h5>Install</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</div>
</li>
<li>
<h4>Then you will configure it.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="thumbnail step">
[[!img install/inc/infography/create-persistence.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Configure</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</li>
</ol>
</div>
</div>
[[!inline pages="install/inc/overview" raw="yes"]]
[[
<div class="panel panel-primary">
......
......@@ -4,115 +4,13 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/expert" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/win]]
<h1 class="text-center"><small>Install from Debian using</small><br>command line <small> and </small> GnuPG</h1>
<div id="needs">
<h3>You need:</h3>
<div class="row you_need">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/clock.png link="no"]]
<div class="caption">
<h4>1 hour<br>
<small>[[!inline pages="inc/stable_i386_iso_size_mib" raw="yes"]] to download</small><br>
<small>25 minutes to install</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/1-usb.png link="no"]]
<div class="caption">
<h4>1 USB Stick <br>
<small>4 GB minimum</small> <br>
<small>All data will be lost!</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/pc.png link="no"]]
<div class="caption">
<h4>a computer</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/screens.png link="no"]]
<div class="caption">
<h4>a smartphone <br>
<small>
another computer <br>
or a printer
</small>
</h4>
</div>
</div>
</div>
</div>
</div>
<div id="steps">
<h3>Your steps:</h3>
<ol>
<li>
<h4>First you will install a Tails on your USB stick.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1 ">
<div class="thumbnail step">
[[!img install/inc/infography/download-and-verify.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Download</h5>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="thumbnail step">
[[!img install/inc/infography/install-tails.png link="no"]]
<div class="caption">
<h5>Install</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</div>
</li>
<li>
<h4>Then you will configure it.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="thumbnail step">
[[!img install/inc/infography/create-persistence.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Configure</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</li>
</ol>
</div>
</div>
[[!inline pages="install/inc/overview" raw="yes"]]
[[
<div class="panel panel-primary">
......
......@@ -7,23 +7,23 @@
<div class="caption">
<h4>
<span class="win-usb linux-usb mac-usb mac-dvd">1 or 2 hours</span>
<span class="windows-usb linux-usb mac-usb mac-dvd">1 or 2 hours</span>
<span class="debian expert">1 hour</span>
<span class="clone">15 minutes</span>
<br>
<span class="win-usb linux-usb mac-usb mac-dvd debian expert">
<span class="windows-usb linux-usb mac-usb mac-dvd debian expert">
<small>[[!inline pages="inc/stable_i386_iso_size_mib" raw="yes"]] to download</small><br>
<span>
<span class="win-usb linux-usb mac-usb mac-dvd"><small>45 minutes to install</small></span>
<span class="windows-usb linux-usb mac-usb mac-dvd"><small>45 minutes to install</small></span>
<span class="debian expert"><small>25 minutes to install</small></span>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 win-usb linux-usb mac-usb">
<div class="col-sm-6 col-md-3 windows-usb linux-usb mac-usb">
<div class="thumbnail">
[[!img install/inc/icons/2-usb.png link="no"]]
<div class="caption">
......@@ -87,13 +87,13 @@
<li>
<h4>
First you will
<span class="win-usb linux-usb mac-usb">install a temporary Tails on the first USB stick</span>
<span class="mac-dvd">install a temporary Tails on a DVD</span>
<span class="debian expert">install a Tails on your USB stick</span>
<span class="clone">restart on the other Tails.</span>.
<span class="windows-usb linux-usb mac-usb">install a temporary Tails on the first USB stick.</span>
<span class="mac-dvd">install a temporary Tails on a DVD.</span>
<span class="debian expert">install a Tails on your USB stick.</span>
<span class="clone">restart on the other Tails.</span>
</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1 win-usb linux-usb mac-usb mac-dvd debian expert">
<div class="col-md-3 col-md-offset-1 windows-usb linux-usb mac-usb mac-dvd debian expert">
<div class="thumbnail step">
[[!img install/inc/infography/download-and-verify.png link="no"]]
<div class="caption">
......@@ -109,7 +109,7 @@
</div>
</div>
</div>
<div class="col-md-3 linux-usb mac-usb debian expert">
<div class="col-md-3 windows-usb linux-usb mac-usb debian expert">
<div class="thumbnail step">
[[!img install/inc/infography/install-temporary-tails.png link="no"]]
<div class="caption">
......@@ -125,7 +125,7 @@
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="col-md-2 windows-usb linux-usb mac-usb mac-dvd debian expert">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
......@@ -138,13 +138,13 @@
<li>
<h4>
Then you will
<span class="win-usb linux-usb mac-usb">install the final Tails on the second USB stick</span>
<span class="mac-dvd">install the final Tails on your USB stick</span>
<span class="clone">install Tails on your USB stick</span>
<span class="debian expert">configure it</span>.
<span class="windows-usb linux-usb mac-usb">install the final Tails on the second USB stick.</span>
<span class="mac-dvd">install the final Tails on your USB stick.</span>
<span class="clone">install Tails on your USB stick.</span>
<span class="debian expert">configure it.</span>
</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="col-md-3 col-md-offset-1 windows-usb linux-usb mac-usb clone">
<div class="thumbnail step">
[[!img install/inc/infography/clone-temporary-tails.png link="no"]]
<div class="caption">
......@@ -160,7 +160,7 @@
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="col-md-2 windows-usb linux-usb mac-usb mac-dvd clone">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
......@@ -168,6 +168,8 @@
</div>
</div>
</div>
<div class="col-md-1 debian expert">
</div>
<div class="col-md-3">
<div class="thumbnail step">
[[!img install/inc/infography/create-persistence.png link="no"]]
......
......@@ -4,6 +4,7 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/clone" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/linux]]
......
......@@ -4,10 +4,13 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/clone" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/mac]]
[[!inline pages="install/inc/overview/clone" raw="yes"]]
<h1 class="text-center">Install from <strong>an other Tails</strong>: overview</h1>
[[!inline pages="install/inc/overview" raw="yes"]]
[[
<div class="panel panel-primary">
......
......@@ -4,134 +4,14 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/mac-dvd" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/mac]]
<h1 class="text-center">Mac: <strong>burn a DVD</strong> and then install</h1>
<div id="needs">
<h3>You need:</h3>
<div class="row you_need">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/clock.png link="no"]]
<div class="caption">
<h4>1 hour<br>
<small>[[!inline pages="inc/stable_i386_iso_size_mib" raw="yes"]] to download</small><br>
<small>25 minutes to install</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/1-usb.png link="no"]]
<div class="caption">
<h4>1 USB Stick <br>
<small>4 GB minimum</small> <br>
<small>All data will be lost!</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/1-dvd.png link="no"]]
<div class="caption">
<h4>1 DVD<br>
<small>All data will be lost!</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/screens.png link="no"]]
<div class="caption">
<h4>a smartphone <br>
<small>
another computer <br>
or a printer
</small>
</h4>
</div>
</div>
</div>
</div>
</div>
<div id="steps">
<h3>Your steps:</h3>
<ol>
<li>
<h4>First you will install a <strong>temporary Tails</strong> on a DVD.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1 ">
<div class="thumbnail step">
[[!img install/inc/infography/download-and-verify.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Download</h5>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="thumbnail step">
[[!img install/inc/infography/insert-dvd.png link="no"]]
<div class="caption">
<h5>Install</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</div>
</li>
<li>
<h4>Then you will install the <strong> final Tails</strong> on your USB stick.</h4>
<div class="row">
[[!inline pages="install/inc/overview" raw="yes"]]
<div class="col-md-3 col-md-offset-1">
<div class="thumbnail step">
[[!img install/inc/infography/clone-dvd.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Install</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail step">
[[!img install/inc/infography/create-persistence.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Configure</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</li>
</ol>
</div>
</div>
[[
<div class="panel panel-primary">
......
......@@ -4,132 +4,13 @@
[[!meta stylesheet="inc/stylesheets/assistant" rel="stylesheet" title=""]]
[[!meta stylesheet="inc/stylesheets/overview" rel="stylesheet" title=""]]
[[!inline pages="install/inc/tails-installation-assistant.inline" raw="yes"]]
[[!meta stylesheet="inc/stylesheets/mac-usb" rel="stylesheet" title=""]]
[[<span class="back">Back</span>|install/mac]]
<h1 class="text-center">Install from <strong>Mac</strong> using using the <strong>command line</strong></h1>
<div id="needs">
<h3>You need:</h3>
<div class="row you_need">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/clock.png link="no"]]
<div class="caption">
<h4>1 or 2 hours <br>
<small>[[!inline pages="inc/stable_i386_iso_size_mib" raw="yes"]] to download</small><br>
<small>45 minutes to install</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/2-usb.png link="no"]]
<div class="caption">
<h4>2 USB Sticks <br>
<small>4 GB minimum</small> <br>
<small>All data will be lost!</small>
</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/pc.png link="no"]]
<div class="caption">
<h4>a computer</h4>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
[[!img install/inc/icons/screens.png link="no"]]
<div class="caption">
<h4>a smartphone <br>
<small>
another computer <br>
or a printer
</small>
</h4>
</div>
</div>
</div>
</div>
</div>
<div id="steps">
<h3>Your steps:</h3>
<ol>
<li>
<h4>First you will install a <b>temporary Tails</b> on the first USB stick.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1 ">
<div class="thumbnail step">
[[!img install/inc/infography/download-and-verify.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Download</h5>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="thumbnail step">
[[!img install/inc/infography/install-temporary-tails.png link="no"]]
<div class="caption">
<h5>Install</h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>
</div>
</div>
</div>
</div>
</li>
<li>
<h4>Then you will install the <b>final Tails</b> on the second USB stick.</h4>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="thumbnail step">
[[!img install/inc/infography/clone-temporary-tails.png link="no"]]
<div class="caption">
<h5><span class="step-number"></span>Install </h5>
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="thumbnail">
[[!img install/inc/icons/restart.png link="no"]]
<div class="caption">
<h5>Restart</h5>