diff options
-rw-r--r-- | configure.ac | 9 | ||||
-rw-r--r-- | demo/index.html.j2 | 201 | ||||
-rwxr-xr-x | demo/template.py | 1 |
3 files changed, 83 insertions, 128 deletions
diff --git a/configure.ac b/configure.ac index fffd9e1..dbae4ba 100644 --- a/configure.ac +++ b/configure.ac @@ -3,5 +3,12 @@ AM_INIT_AUTOMAKE # check for typescript compiler AC_CHECK_PROG([tsc],[tsc],[yes],[no]) AM_CONDITIONAL(HAVE_TSC, [ test "$tsc" = "yes"]) -AC_CONFIG_FILES(Makefile demo/Makefile demo/static/Makefile demo/static/web-common/Makefile) +AC_CONFIG_FILES([ + Makefile + demo/Makefile + demo/static/Makefile + demo/static/web-common/Makefile + demo/static/web-common/css/Makefile + demo/static/web-common/js/Makefile +]) AC_OUTPUT diff --git a/demo/index.html.j2 b/demo/index.html.j2 index 2e1da37..cfb7a9d 100644 --- a/demo/index.html.j2 +++ b/demo/index.html.j2 @@ -1,131 +1,78 @@ -<!DOCTYPE html> -<html lang="en" data-taler-nojs="true"> -<head profile="http://www.w3.org/2005/10/profile"> - <meta charset="utf-8"/> - <title>Taler Demo</title> - <link rel="stylesheet" type="text/css" href="{{ url('static/web-common/pure.css') }}" /> - <link rel="stylesheet" type="text/css" href="{{ url('static/web-common/demo.css') }}" /> - <link rel="stylesheet" type="text/css" href="{{ url('static/web-common/taler-fallback.css') }}" id="taler-presence-stylesheet" /> - <link rel="icon" type="image/png" href="{{ url('static/web-common/favicon-taler.ico') }}" /> +{% extends "static/web-common/templates/base.html" %} - <style type="text/css"> - a[disabled="true"] { - pointer-events: none; - color: grey; - } +{% block page_content %} + <article> + <h2>Step 1: Install the Taler wallet</h2> + <p class="alert alert-primary taler-installed-hide" role="alert"> + You do not have the Taler wallet installed yet.<br> + Install the wallet from the <a class="alert-link" href="https://taler.net/wallet-installation.html">installation page</a>. + It only takes one click. + </p> + <p class="alert alert-success taler-installed-show" role="alert"> + Congratulations, you have installed the Taler wallet correctly. + You can now proceed with the next steps. + </p> + </article> - .bluebox { - background-color: #C2C6FF; - border: solid; - border-radius: 5px; - padding: 0.5em; - } - .greenbox { - background-color: #5EFF64; - border: solid; - border-radius: 5px; - padding: 0.5em; - } - .graybox { - background-color: #DDDDDD; - border: solid; - border-radius: 5px; - padding: 0.5em; - } - </style> -</head> + <article> + <h2>Step 2: Withdraw coins</h2> + <p> + Now you can withdraw coins into your wallet by going to our <a href="{{ bank_url }}">bank</a>. -<body> - <div class="demobar"> - <h1><span class="tt adorn-brackets">Taler Demo</span></h1> - <h1><span class="it"><a href="#">Introduction</a></span></h1> - <p>This is the entry point of the Taler demo. Follow the instructions and try Taler with the other pages linked below!</p> - <ul> - <li><a href="{{ intro_url }}">Introduction</a></li> - <li><a href="{{ bank_url }}">Bank</a></li> - <li><a href="{{ merchant_blog_url }}">Essay Shop</a></li> - <li><a href="{{ merchant_donations_url }}">Donations</a></li> - <li><a href="{{ merchant_survey_url }}">Tipping/Survey</a></li> - <li><a href="{{ backoffice_url }}">Back-office</a></li> - </ul> - <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p> - </div> - <section id="main" class="content"> - <article> - <h2>Step 1: Install the Taler wallet</h2> - Install the wallet from the <a href="https://taler.net/wallet-installation.html">installation page</a>. - It only takes one click. - <p class="bluebox taler-installed-hide"> - You don't have a wallet installed yet. - </p> - <p class="greenbox taler-installed-show"> - Congratulations, you have installed the Taler wallet correctly. - You can now proceed with the next steps. - </p> - </article> - - <article> - <h2>Step 2: Withdraw coins</h2> - <p> - - Now you can withdraw coins into your wallet by going to our <a href="{{ bank_url }}">bank</a>. + In this demo you're paying with KUDOS, an imaginary currency. When you + create an account at our bank, you'll get 100 KUDOS for free. + </p> + <p class="alert alert-secondary" role="alert"> + We can't check if you were able to complete this step, since websites + can't see the balance in your wallet. Please click on the Taler icon + in your browser to check your balance. + </p> + </article> - In this demo you're paying with KUDOS, an imaginary currency. When you - create an account at our bank, you'll get 100 KUDOS for free. - </p> - <p class="graybox"> - We can't check if you were able to complete this step, since websites - can't see the balance in your wallet. Please click on the Taler icon - in your browser to check your balance. - </p> - </article> - - <article> - <h2>Step 3: Pay</sup></h2> - We have two demo merchants where you can spend your coins: - <ul> - <li> - The <a href="{{ merchant_blog_url }}">essay store</a>, where you can pay KUDOS for - individual chapters of Richard Stallman's book "Free Software, Free - Society", which is also available for free at <a href="http://www.fsf.org/">the FSF</a>. - </li> - <li> - The <a href="{{ merchant_donations_url }}">project donation Web site</a>, where - you can show respect to a software project of your choice - by giving them KUDOS. - </li> - </ul> - </article> - <article> - <h2>Step 4: Check money flow</sup></h2> - <ul> - <li> - Check if people who received your Taler payment got eventually - paid by the exchange via a wire transfer; visit the: - <a href="{{ bank_url }}/public-accounts">public accounts page</a> at the bank. - Note that only those account whose owners gave permission are showed - on that page. - </li> - </ul> - </article> - <article> - <h2>Step 5: Merchant? Consult back-office</sup></h2> - <ul> - <li> - If you are a merchant, you can check the <a href="{{ backoffice_url }}">back-office</a> - Web-site to see how your Taler transactions got payed back by bank wire transfers. - </li> - </ul> - </article> - <article> - <h2>Step 6: Reach out to us</sup></h2> - Let us know what you think by <a href="mailto:demo-feedback@taler.net">contacting us</a>. - </article> - <hr /> - <div class="copyright"> - <p>Copyright © 2014—2017 INRIA</p> - <a href="javascript.html" data-jslicense="1" class="jslicenseinfo">JavaScript license information</a> - </div> - </section> -</body> -</html> + <article> + <h2>Step 3: Pay</h2> + We have two demo merchants where you can spend your coins: + <ul> + <li> + The <a href="{{ merchant_blog_url }}">essay store</a>, where you can pay KUDOS for + individual chapters of Richard Stallman's book "Free Software, Free + Society", which is also available for free at <a href="http://www.fsf.org/">the FSF</a>. + </li> + <li> + The <a href="{{ merchant_donations_url }}">project donation Web site</a>, where + you can show respect to a software project of your choice + by giving them KUDOS. + </li> + </ul> + </article> + <article> + <h2>Step 4: Check money flow</h2> + <ul> + <li> + Check if people who received your Taler payment got eventually + paid by the exchange via a wire transfer; visit the: + <a href="{{ bank_url }}/public-accounts">public accounts page</a> at the bank. + Note that only those account whose owners gave permission are showed + on that page. + </li> + </ul> + </article> + <article> + <h2>Step 5: Merchant? Consult back-office</h2> + <ul> + <li> + If you are a merchant, you can check the <a href="{{ backoffice_url }}">back-office</a> + Web-site to see how your Taler transactions got payed back by bank wire transfers. + </li> + </ul> + </article> + <article> + <h2>Step 6: Reach out to us</h2> + Let us know what you think by <a href="mailto:demo-feedback@taler.net">contacting us</a>. + </article> + <hr /> + <div class="copyright"> + <p>Copyright © 2014—2017 INRIA</p> + <a href="javascript.html" data-jslicense="1" class="jslicenseinfo">JavaScript license information</a> + </div> +{% endblock page_content %} diff --git a/demo/template.py b/demo/template.py index 05599e4..7e42565 100755 --- a/demo/template.py +++ b/demo/template.py @@ -34,6 +34,7 @@ default_ctx["intro_url"] = os.environ.get("TALER_ENV_URL_INTRO", "#") default_ctx["bank_url"] = os.environ.get("TALER_ENV_URL_BANK", "#") default_ctx["auditor_url"] = os.environ.get("TALER_ENV_URL_AUDITOR", "#") default_ctx["backoffice_url"] = os.environ.get("TALER_ENV_URL_BACKOFFICE", "#") +default_ctx["page_title"] = "Taler Demo" #TODO: Translate! for in_file in glob.glob("*.j2"): |