diff options
Diffstat (limited to 'demo')
-rw-r--r-- | demo/Makefile.am | 7 | ||||
-rw-r--r-- | demo/README | 15 | ||||
-rw-r--r-- | demo/common/base.j2 | 122 | ||||
-rw-r--r-- | demo/index.html.j2 | 124 | ||||
-rw-r--r-- | demo/javascript.html | 28 | ||||
-rw-r--r-- | demo/static/Makefile.am | 1 | ||||
m--------- | demo/static/web-common | 0 | ||||
-rwxr-xr-x | demo/template.py | 80 |
8 files changed, 377 insertions, 0 deletions
diff --git a/demo/Makefile.am b/demo/Makefile.am new file mode 100644 index 0000000..e016510 --- /dev/null +++ b/demo/Makefile.am @@ -0,0 +1,7 @@ +pkgdata_DATA = index.html.j2 +SUBDIRS = static + +.PHONY: all + +all: + ./template.py diff --git a/demo/README b/demo/README new file mode 100644 index 0000000..30bf51e --- /dev/null +++ b/demo/README @@ -0,0 +1,15 @@ +Directory hosting the "starting" Website for the whole Taler demo experience. +Through it, it is possible to download the extension and get links to the demo +bank and shop. + + +Building +----------- + +For building run:: + + git submodule init + git submodule update --remote + AUTOMAKE="automake --foreign" autoreconf -fiv + ./configure + make diff --git a/demo/common/base.j2 b/demo/common/base.j2 new file mode 100644 index 0000000..9a54048 --- /dev/null +++ b/demo/common/base.j2 @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html lang="en" data-taler-nojs="true"> +<head profile="http://www.w3.org/2005/10/profile"> + <meta charset="utf-8"/> + <title>Taler Demonstration Framework</title> + <link rel="stylesheet" type="text/css" href="static/web-common/style.css" /> + <link rel="stylesheet" type="text/css" href="static/web-common/taler-fallback.css" id="taler-presence-stylesheet" /> + <link rel="icon" type="image/png" href="static/web-common/favicon-taler.ico" /> + + <style type="text/css"> + a[disabled="true"] { + pointer-events: none; + color: grey; + } + + .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> + +<body> + + <header> + <a href="." id="logo"> + <img src="static/web-common/logo-2015-medium.png" width="100" height="100" alt="Logo"> + </a> + <!--#include virtual="static/web-common/dropdown-navbar.html"--> + <h1 class="nav">Taler Demo</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + <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">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="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="shop">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="donations">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: Back office</sup></h2> + Finally, you can take the perspective of the merchant, who just + sold articles using taler. + <ul> + <li> + The <a href="block/track">back office Web site</a> + allows you to track the transactions of the merchant. + </li> + <li> + The <a href="bank/public-accounts">public accounts page</a> at the bank + allow you to observe transactions of certain bank accounts, including + those of the shops, from the perspective of the bank. + </li> + </ul> + </article> + <article> + <h2>Step 5: Reach out to us</sup></h2> + Let us know what you think by <a href="mailto:demo-feedback@taler.net">contacting us</a>. + </article> + </section> + <div class="copyright"> + <p>Copyright © 2014—2016 INRIA</p> + <a href="/javascript" data-jslicense="1" class="jslicenseinfo">JavaScript license information</a> + </div> +</body> +</html> diff --git a/demo/index.html.j2 b/demo/index.html.j2 new file mode 100644 index 0000000..d18ba27 --- /dev/null +++ b/demo/index.html.j2 @@ -0,0 +1,124 @@ +<!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') }}" /> + + <style type="text/css"> + a[disabled="true"] { + pointer-events: none; + color: grey; + } + + .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> + +<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> + </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="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: Back office</sup></h2> + Finally, you can take the perspective of the merchant, who just + sold articles using taler. + <ul> + <li> + The <a href="{{ merchant_blog_url }}/backoffice">back office Web site</a> + allows you to track the transactions of the merchant. + </li> + <li> + The <a href="{{ bank_url }}/public-accounts">public accounts page</a> at the bank + allow you to observe transactions of certain bank accounts, including + those of the shops, from the perspective of the bank. + </li> + </ul> + </article> + <article> + <h2>Step 5: 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> diff --git a/demo/javascript.html b/demo/javascript.html new file mode 100644 index 0000000..71c814f --- /dev/null +++ b/demo/javascript.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- This file is in the public domain --> +<html lang="en"> +<head profile="http://www.w3.org/2005/10/profile"> + <title>JavaScript License Information</title> +</head> +<body> +<table id="jslicense-labels1"> + <thead> + <tr> + <th>Script</th> + <th>License</th> + <th>Source</th> + </tr> + </thead> +<tr> + <td><a href="/static/web-common/taler-wallet-lib.js">taler-wallet-lib.js</a></td> + <td><a href="https://www.gnu.org/licenses/lgpl-2.1.html">LGPL</a></td> + <td><a href="/static/web-common/taler-wallet-lib.js.tar.gz">taler-wallet-lib.js.tar.gz</a></td> +</tr> +<tr> + <td><a href="/static/web-common/dropdown-navbar_script.js">dropdown-navbar_script.js</a></td> + <td><a href="https://www.gnu.org/licenses/lgpl-2.1.html">LGPL</a></td> + <td><a href="/static/web-common/dropdown-navbar_script.js">dropdown-navbar_script.js</a></td> +</tr> +</table> +</body> +</html> diff --git a/demo/static/Makefile.am b/demo/static/Makefile.am new file mode 100644 index 0000000..a0d2051 --- /dev/null +++ b/demo/static/Makefile.am @@ -0,0 +1 @@ +SUBDIRS = web-common diff --git a/demo/static/web-common b/demo/static/web-common new file mode 160000 +Subproject 6dd8ca1675817cc0ca65f0819489234eeafaa2e diff --git a/demo/template.py b/demo/template.py new file mode 100755 index 0000000..0bb4092 --- /dev/null +++ b/demo/template.py @@ -0,0 +1,80 @@ +#!/usr/bin/env python3 +# This file is in the public domain. +# +# This script runs the jinga2 templating engine on an input template-file +# using the specified locale for gettext translations, and outputs +# the resulting (HTML) ouptut-file. +# +# Note that the gettext files need to be prepared first. This script +# is thus to be invoked via the Makefile. +import os +import os.path +import sys +import re +import gettext +import jinja2 +import glob +import codecs +import os +import os.path + +env = jinja2.Environment(loader=jinja2.FileSystemLoader(os.path.dirname(__file__)), + extensions=["jinja2.ext.i18n"], + lstrip_blocks=True, + trim_blocks=True, + + undefined=jinja2.StrictUndefined, + autoescape=False) + +default_ctx = {} +default_ctx["merchant_blog_url"] = os.environ.get("TALER_ENV_URL_MERCHANT_BLOG", "#") +default_ctx["merchant_donations_url"] = os.environ.get("TALER_ENV_URL_MERCHANT_DONATIONS", "#") +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", "#") + + +for in_file in glob.glob("*.j2"): + name, ext = re.match(r"(.*)\.([^.]+)$", in_file.rstrip(".j2")).groups() + tmpl = env.get_template(in_file) + + def self_localized(other_locale): + """ + Return URL for the current page in another locale. + """ + return "../" + other_locale + "/" + in_file.rstrip(".j2") + + def url_localized(filename): + return "../" + locale + "/" + filename + + def url(x): + # TODO: look at the app root environment variable + # TODO: check if file exists + return "../" + x + + for l in ("en", "de", "it", "es"): + locale = os.path.basename(l) + + if os.path.isdir(os.path.join("./locale/", locale)): + tr = gettext.translation("messages", + localedir="locale", + languages=[locale]) + + env.install_gettext_translations(tr, newstyle=True) + else: + print("warning: locale {} not found".format(locale)) + + ctx = dict( + lang=locale, + url=url, + self_localized=self_localized, + url_localized=url_localized, + filename=name + "." + ext) + ctx.update(default_ctx) + + content = tmpl.render(**ctx) + out_name = "./" + locale + "/" + in_file.rstrip(".j2") + os.makedirs("./" + locale, exist_ok=True) + + with codecs.open(out_name, "w", "utf-8") as f: + f.write(content) |