diff options
| author | Florian Dold <florian.dold@gmail.com> | 2017-03-06 13:46:31 +0100 |
|---|---|---|
| committer | Florian Dold <florian.dold@gmail.com> | 2017-03-06 13:46:31 +0100 |
| commit | 4cf286b15781eb737c687265e62e146282d0bcce (patch) | |
| tree | 084b9013cd0177761f43ddf56998b8f4b0bfc9d6 | |
| parent | 8611eddf5fa59d2ac2a56206dd8b1634a8430d6b (diff) | |
menu structure and markup fixes
| -rw-r--r-- | citizens.html.j2 | 229 | ||||
| -rw-r--r-- | common/footer.j2.inc | 31 | ||||
| -rw-r--r-- | common/navigation.j2.inc | 11 | ||||
| -rw-r--r-- | styles.css | 12 |
4 files changed, 155 insertions, 128 deletions
diff --git a/citizens.html.j2 b/citizens.html.j2 index 4c1e7fb2..b464d1ee 100644 --- a/citizens.html.j2 +++ b/citizens.html.j2 @@ -1,132 +1,123 @@ -<!DOCTYPE html> -<html lang="{{ _('en') }}"> - <head> - <meta charset="UTF-8"/> - <title>{{ _("GNU Taler") }} - {{ _("Citizens") }}</title> - <meta name="description" content=""/> - {% include "common/header.j2.inc" %} - </head> - <body> - <div class="container"> - {% include "common/navigation.j2.inc" %} - <!-- Jumbotron --> - <div class="jumbotron"> - <h1>{{ _("Advantages for Citizens") }}</h1> - <!-- p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p --> - <div class="col-lg-12"> +{% extends "common/base.j2" %} +{% block body_content %} +<div class="jumbotron"> + <div class="container text-center"> + <h1>{{ _("Advantages for Citizens") }}</h1> + <!-- p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p --> + <div class="col-lg-12"> + <p> + {% trans %} + Taler largely functions like digital cash. You + withdraw money from your bank account into your + electronic wallet, and can henceforth spend digital + cash. The electronic wallet can carry multiple + currencies. + {% endtrans %} + </p> + </div> + </div> +</div> - <p>{{ _("Taler largely functions like digital cash. You - withdraw money from your bank account into your - electronic wallet, and can henceforth spend digital - cash. The electronic wallet can carry multiple - currencies.") }}</p> +<div class="container"> + <!-- Example row of columns --> + <div class="row"> + <div class="col-lg-6"> + <h2>{{ _("Security") }}</h2> - </div> - </div> + <p>{{ _("Taler uses modern cryptography, ensuring that there + is no counterfeit. Your digital wallet is safer + than your physical wallet. At most, you can lose + its contents because your computer or mobile is + irreparably damaged or compromised. Unlike a + physical wallet, you can make backups to secure + against data loss.") }}</p> - <!-- Example row of columns --> - <div class="row"> - <div class="col-lg-6"> - <h2>{{ _("Security") }}</h2> + </div> + <div class="col-lg-6"> + <h2>{{ _("Privacy") }}</h2> - <p>{{ _("Taler uses modern cryptography, ensuring that there - is no counterfeit. Your digital wallet is safer - than your physical wallet. At most, you can lose - its contents because your computer or mobile is - irreparably damaged or compromised. Unlike a - physical wallet, you can make backups to secure - against data loss.") }}</p> + <p>{{ _("Your transactions are private, neither the exchange + nor merchant needs to learn your identity. There is + no need to give out credit card numbers or other + sensitive information. The merchant will only be + able to do exactly the transaction you agreed to.") + }}</p> - </div> - <div class="col-lg-6"> - <h2>{{ _("Privacy") }}</h2> + </div> + </div> + <div class="row"> + <div class="col-lg-6"> + <h2>{{ _("Convenience") }}</h2> - <p>{{ _("Your transactions are private, neither the exchange - nor merchant needs to learn your identity. There is - no need to give out credit card numbers or other - sensitive information. The merchant will only be - able to do exactly the transaction you agreed to.") - }}</p> + <p>{{ _("You will be able to withdraw money to replenish the + digital coins in your wallet using your credit card + or wire transfers. Afterwards you can pay with + one-click using the Taler wallet, which optionally + keeps your transaction history on your computer.") + }}</p> - </div> - </div> - <div class="row"> - <div class="col-lg-6"> - <h2>{{ _("Convenience") }}</h2> + </div> + <div class="col-lg-6"> + <h2>{{ _("Stability") }}</h2> - <p>{{ _("You will be able to withdraw money to replenish the - digital coins in your wallet using your credit card - or wire transfers. Afterwards you can pay with - one-click using the Taler wallet, which optionally - keeps your transaction history on your computer.") - }}</p> + <p>{{ _("Coins in your digital wallet will be of the same + denomination as the cash in your physical wallet. + Taler is not a crypto-currency, so you do not have + to worry about cryto-currency related value + fluctuations. Banking with Taler is subject to the + usual government protections for finanical + services.") }}</p> - </div> - <div class="col-lg-6"> - <h2>{{ _("Stability") }}</h2> + </div> + </div> + <div class="col-lg-12"> + <h2 id="overview">{{ _("Taler as seen by customers") }}</h2> - <p>{{ _("Coins in your digital wallet will be of the same - denomination as the cash in your physical wallet. - Taler is not a crypto-currency, so you do not have - to worry about cryto-currency related value - fluctuations. Banking with Taler is subject to the - usual government protections for finanical - services.") }}</p> + <p>{{ _("Customers interact with the Taler system mostly using + a free wallet implementation, which may be an + extension or plugin to their browser or a custom + application on their computer(s). Typical steps + performed by customers are: ") }}</p> + <p> + </p> + <img src="{{ url('images/customer.svg') }}" alt="customer perspective" style="float: right; margin: 50px 5px 5px 5px;" width="50%"> + <ol> + <li>{{ _("The customer selects an exchange (i.e. by + visiting the respective website or selecting + from a list of exchanges in the application) and + asks the wallet to create bank transfer + instructions to withdraw a certain amount of + electronic cash. The bank transfer instructions + will contain an access code that must be + included in the subject of the transaction, as + well as the wire details for the exchange (i.e. + a SEPA account number).") }}</li> - </div> - </div> - <div class="col-lg-12"> - <h2 id="overview">{{ _("Taler as seen by customers") }}</h2> + <li>{{ _("The customer then instructs his <b>bank</b> to + transfer funds from his account to the Taler + exchange using these instructions provided by + the wallet (top left).") }}</li> - <p>{{ _("Customers interact with the Taler system mostly using - a free wallet implementation, which may be an - extension or plugin to their browser or a custom - application on their computer(s). Typical steps - performed by customers are: ") }}</p> - - <p> - </p> - <img src="{{ url('images/customer.svg') }}" alt="customer perspective" style="float: right; margin: 50px 5px 5px 5px;" width="50%"> - <ol> - - <li>{{ _("The customer selects an exchange (i.e. by - visiting the respective website or selecting - from a list of exchanges in the application) and - asks the wallet to create bank transfer - instructions to withdraw a certain amount of - electronic cash. The bank transfer instructions - will contain an access code that must be - included in the subject of the transaction, as - well as the wire details for the exchange (i.e. - a SEPA account number).") }}</li> + <li>{{ _("Once the funds have arrived, the wallet will + automatically withdraw the electronic coins. + The customer can use the wallet to review his + remaining balance at any time. He can also make + backups to secure his digital coins against + hardware failures.") }}</li> - <li>{{ _("The customer then instructs his <b>bank</b> to - transfer funds from his account to the Taler - exchange using these instructions provided by - the wallet (top left).") }}</li> - - <li>{{ _("Once the funds have arrived, the wallet will - automatically withdraw the electronic coins. - The customer can use the wallet to review his - remaining balance at any time. He can also make - backups to secure his digital coins against - hardware failures.") }}</li> - - <li>{{ _("When visiting a merchant that supports Taler, - an additional payment option for Taler is - enabled in the checkout system. If the - customer selects payments via Taler, the wallet - displays the secured contract from the merchant - and asks for confirmation. Taler does not - require the customer to provide any identity - information to the merchant. Transaction - histories and digitally signed contracts can be - preserved in the wallet for future review by - the customer, or even use in court.") }}</li> - </ol> - <p></p> - </div> - {% include "common/footer.j2.inc" %} - </div> <!-- /container --> - </body> -</html> + <li>{{ _("When visiting a merchant that supports Taler, + an additional payment option for Taler is + enabled in the checkout system. If the + customer selects payments via Taler, the wallet + displays the secured contract from the merchant + and asks for confirmation. Taler does not + require the customer to provide any identity + information to the merchant. Transaction + histories and digitally signed contracts can be + preserved in the wallet for future review by + the customer, or even use in court.") }}</li> + </ol> + <p></p> + </div> +</div> <!-- /container --> +{% endblock body_content %} diff --git a/common/footer.j2.inc b/common/footer.j2.inc index 04685c64..527b0abd 100644 --- a/common/footer.j2.inc +++ b/common/footer.j2.inc @@ -1,6 +1,31 @@ <footer> - <div class="container"> - <p>© <a href="https://gnunet.org/ev">GNUnet e.V.</a> and Inria 2015, 2016, 2017</p> - <p>{{ _("This page was created using <a href='https://www.gnu.org/'>Free Software</a> only.") }}</p> + <div class="container-fluid cushion-below"> + <div class="container"> + <div class="row"> + <div class="col-xs-12 col-sm-4"> + <ul class="footer-list"> + <li><p><a href="about.html">About</a></p></li> + <li><p><a href="investors.html">For Investors</a></p></li> + </ul> + </div> + <div class="col-xs-12 col-sm-4"> + <ul class="footer-list"> + <li><p><a href="governments.html">Governments</a></p></li> + <li><p><a href="merchants.html">Merchants</a></p></li> + <li><p><a href="citizens.html">Citizens</a></p></li> + </ul> + </div> + <div class="col-xs-12 col-sm-4"> + <ul class="footer-list"> + <li><p><a href="developers.html">Developer Resources</a></p></li> + <li><p><a href="faq.html">FAQ</a></p></li> + </ul> + </div> + </div> + </div> + </div> + <div class="container text-center"> + <p>© <a href="https://gnunet.org/ev">GNUnet e.V.</a> and Inria 2015, 2016, 2017</p> + <p>{{ _("This page was created using <a href='https://www.gnu.org/'>Free Software</a> only.") }}</p> </div> </footer> diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc index c9019167..762eab69 100644 --- a/common/navigation.j2.inc +++ b/common/navigation.j2.inc @@ -1,19 +1,18 @@ <nav class="navbar navbar-inverse"> <div class="container-fluid"> <ul class="nav navbar-nav"> - <li class="{{ 'active' if filename == 'index.html' else '' }}"><a class="taler_home" href="index.html">taler</a></li> - <li class="{{ 'active' if filename == 'investors.html' else '' }}"><a href="investors.html">Investors</a></li> + <li class="{{ 'active' if filename == 'index.html' else '' }}"><a class="taler_home" href="index.html">Taler</a></li> + <li class="{{ 'active' if filename == 'citizens.html' else '' }}"><a href="citizens.html">Citizens</a></li> + <li class="{{ 'active' if filename == 'merchants.html' else '' }}"><a href="merchants.html">Merchants</a></li> + <li class="{{ 'active' if filename == 'governments.html' else '' }}"><a href="governments.html">Governments</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resources <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="architecture.html">System Architecture</a></li> <li><a href="faq.html">FAQ</a></li> - <li><a href="governments.html">Taler for Governments</a></li> - <li><a href="developers.html">Taler for Developers</a></li> - <li><a href="merchants.html">Taler for Merchants</a></li> + <li><a href="developers.html">Developer Introduction</a></li> </ul> </li> - <li class="{{ 'active' if filename == 'about.html' else '' }}"><a href="about.html">Team</a></li> </ul> <ul class="nav navbar-right navbar-form"> <li> @@ -113,3 +113,15 @@ footer { .taler_home { font-family: 'Lucida Console', Monaco, monospace; } + +.footer-list { + list-style: none; +} + +.cushion-above { + padding-top: 2em; +} + +.cushion-below { + padding-bottom: 2em; +} |