common base template, new logo and lots of cleanup

20 files changed, 526 insertions, 4 deletions

diff --git a/talermerchantdemos/templates/blog-article-frame.html.j2 b/talermerchantdemos/templates/blog-article-frame.html.j2
new file mode 100644
index 0000000..1b51c9d
--- /dev/null
+++ b/talermerchantdemos/templates/blog-article-frame.html.j2
@@ -0,0 +1,20 @@
+{% extends "blog-base.html.j2" %}
+{% block main %}
+
+{{ article_contents | safe }}
+
+<hr>
+
+{% if refundable %}
+<p class="graybox">
+  {{
+    gettext("Taler allows merchants to offer refunds to customers.") +
+    gettext('You can <a href="{url}">request a refund</a> within the first hour after buying this article.').format(url=url_for('confirm_refund', lang='en', order_id=order_id))
+  }}
+</p>
+{% else %}
+{{ gettext("Taler allows merchants to offer refunds to customers.") }}
+{{ gettext("This article can't be refunded anymore.") }}
+{% endif %}
+
+{% endblock main %}
diff --git a/talermerchantdemos/templates/blog-article-refunded.html.j2 b/talermerchantdemos/templates/blog-article-refunded.html.j2
new file mode 100644
index 0000000..6a2e139
--- /dev/null
+++ b/talermerchantdemos/templates/blog-article-refunded.html.j2
@@ -0,0 +1,18 @@
+{% extends "blog-base.html.j2" %}
+{% block main %}
+
+<h2>{{ gettext("Refunded") }}</h2>
+
+<p>
+{{
+  gettext("Your payment (order ID <tt>{order}<tt>) for the article "{article}" has been refunded.").format(order=order_id,article=article_name)
+}}
+</p>
+
+<p>
+{{
+  gettext("You will not be able to read the article until you pay for it again.")
+}}
+</p>
+
+{% endblock main %}
diff --git a/talermerchantdemos/templates/blog-base.html.j2 b/talermerchantdemos/templates/blog-base.html.j2
new file mode 100644
index 0000000..e533bd4
--- /dev/null
+++ b/talermerchantdemos/templates/blog-base.html.j2
@@ -0,0 +1,13 @@
+{% extends "common-base.html.j2" %}
+
+{% block header_content %}
+
+<h1><span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG') }}">{{ gettext("Essay shop") }}</a></span></h1>
+<p>{{
+  gettext("On this page you can buy articles using an imaginary currency.") + "<br>" +
+  gettext("The articles are chapters from Richard Stallman's book &quot;Free Software, Free Society&quot;.") + "<br>" +
+  gettext('The book is <a href="{shop}">published by the FSF</a> and available gratis at <a href="{gnu}">gnu.org</a>.').format(shop="https://shop.fsf.org/product/free-software-free-society-2", gnu="https://www.gnu.org")
+  }}
+</p>
+
+{% endblock %}
diff --git a/talermerchantdemos/templates/blog-confirm-refund.html.j2 b/talermerchantdemos/templates/blog-confirm-refund.html.j2
new file mode 100644
index 0000000..ab5dfcd
--- /dev/null
+++ b/talermerchantdemos/templates/blog-confirm-refund.html.j2
@@ -0,0 +1,23 @@
+{% extends "blog-base.html.j2" %}
+{% block main %}
+  <h1>{{ gettext("Confirm refund request for article") }}</h1>
+
+  <p>
+    {{
+       gettext("Do you want to get a refund for the article <em>{name}</em>?").format(name=article_name) + "<br/>" +
+       gettext("In this demonstration, refunds will be automatically approved by the merchant.") + "<br/>" +
+       gettext("After you have obtained a refund, you will not be able to read the article anymore.")
+    }}
+  </p>
+
+  <p>
+    {{
+      gettext ("You will only be able to receive the refund on the same wallet that you have used to pay for this article originally.")
+    }} 
+  </p>
+
+  <form action="{{ url_for('refund', order_id=order_id) }}" method="POST">
+    <input type="text" name="article_name" value={{ article_name}} hidden>
+    <input type="submit" value="{{ gettext('Request refund') }}">
+  </form>
+{% endblock main %}
diff --git a/talermerchantdemos/templates/blog-error.html.j2 b/talermerchantdemos/templates/blog-error.html.j2
new file mode 100644
index 0000000..5b2a381
--- /dev/null
+++ b/talermerchantdemos/templates/blog-error.html.j2
@@ -0,0 +1,24 @@
+{% extends "blog-base.html.j2" %}
+{% block main %}
+  <h1>{{ gettext("Error encountered") }}</h1>
+
+  <p>{{ message }}</p>
+
+  {% if status_code %}
+  <p>
+    {{ gettext ("The backend returned status code {code}.").format(code=status_code) }}.
+  </p>
+  {% endif %}
+
+  {% if json %}
+  <p>{{gettext("Backend response:")}}</p>
+  <pre>{{ json }}</pre>
+  {% endif %}
+
+  {% if stack %}
+  <p>{{gettext("Stack trace:")}}</p>
+  <pre>
+    {{ stack }}
+  </pre>
+  {% endif %}
+{% endblock main %}
diff --git a/talermerchantdemos/templates/blog-index.html.j2 b/talermerchantdemos/templates/blog-index.html.j2
new file mode 100644
index 0000000..dd1bced
--- /dev/null
+++ b/talermerchantdemos/templates/blog-index.html.j2
@@ -0,0 +1,36 @@
+{% extends "blog-base.html.j2" %}
+{% block main %}
+    <h2>{{ gettext("Essay Shop: Free Software, Free Society") }} </h2>
+    <div style="font-size: smaller;">
+      <p>{{ gettext("This is the latest edition of <cite>Free Software, Free Society: Selected Essays of Richard M. Stallman.</cite>") }} <br>
+      Free Software Foundation<br>
+      51 Franklin Street, Fifth Floor<br>
+      Boston, MA 02110-1335
+      <br>
+      Copyright &copy; 2002, 2010 Free Software Foundation, Inc.
+      </p>
+
+      <p>{{ gettext("Verbatim copying and distribution of this entire book are permitted worldwide, without royalty, in any medium, provided this notice is preserved. Permission is granted to copy and distribute translations of this book from the original English into another language provided the translation has been approved by the Free Software Foundation and the copyright notice and this permission notice are preserved on all copies.") }}
+      </p>
+      <p>ISBN 978-0-9831592-0-9</p>
+    </div>
+
+    <h2>{{ gettext("Chapters") }} </h2>
+    <div>
+      {{
+      gettext("Click on an individual chapter to to purchase it with GNU Taler.") +
+      gettext('You can get free, virtual money to buy articles on this page at the <a href="{}")">bank</a>').format(env('TALER_ENV_URL_BANK'))
+      }}
+    </div>
+
+    <div>
+      {% for article in articles %}
+      <div class="notice">
+      <h3><a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}" class="articleTitle">{{article.title}}</a></h3>
+      <p>{{ article.teaser|safe }} <a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}">({{ gettext('Pay to read more...') }})</a></p>
+      </div>
+      {% else %}
+      <em>({{ gettext("No articles available in this language.") }})</em>
+      {% endfor %}
+    </div>
+{% endblock main %}
diff --git a/talermerchantdemos/templates/common-base.html.j2 b/talermerchantdemos/templates/common-base.html.j2
new file mode 100644
index 0000000..ff8d655
--- /dev/null
+++ b/talermerchantdemos/templates/common-base.html.j2
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+  This file is part of GNU TALER.
+  Copyright (C) 2014, 2015, 2016, 2020 Taler Systems SA
+
+  TALER is free software; you can redistribute it and/or modify it under the
+  terms of the GNU Lesser General Public License as published by the Free Software
+  Foundation; either version 2.1, or (at your option) any later version.
+
+  TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+  A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License along with
+  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+-->
+
+<html>
+<head>
+  <title>{{ gettext("GNU Taler Demo: Introduction") }}</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='demo.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='navbar.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='torsten.css') }}" />
+  {% block styles %}{% endblock %}
+  {% block scripts %}{% endblock %}
+</head>
+
+<body>
+  <header class="demobar" style="display: flex; flex-direction: column;">
+    <p>
+      <img src="{{ url_for('static', filename='logo-white.svg') }}" height="100"><br/>
+    </p>
+
+    <div>
+      {% block header_content %}
+        <p>This is the header content.</p>
+      {% endblock %}
+    </div>
+  </header>
+  {% from 'menu.html.j2' import menu with context %} {{ menu('landing') }}
+
+  <section id="main" class="content">
+    {% block main %}
+      This is the main content of the page.
+    {% endblock %}
+    {% include 'footer.html.j2' %}
+  </section>
+</body>
+</html>
diff --git a/talermerchantdemos/templates/donations-base.html.j2 b/talermerchantdemos/templates/donations-base.html.j2
new file mode 100644
index 0000000..b214eac
--- /dev/null
+++ b/talermerchantdemos/templates/donations-base.html.j2
@@ -0,0 +1,13 @@
+{% extends "common-base.html.j2" %}
+
+{% block header_content %}
+
+<h1>
+<span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS') }}">{{gettext("Donations")}}</a></span></h1>
+<p>{{
+gettext ("This is the donation page.") + "<br>" +
+gettext ("Using this page you can make donations in {currency} to Free Software projects.").format(currency=merchant_currency)
+}}
+</p>
+
+{% endblock %}
diff --git a/talermerchantdemos/templates/donations-checkout.html.j2 b/talermerchantdemos/templates/donations-checkout.html.j2
new file mode 100644
index 0000000..ec63d9f
--- /dev/null
+++ b/talermerchantdemos/templates/donations-checkout.html.j2
@@ -0,0 +1,50 @@
+{% extends "donations-base.html.j2" %}
+
+{% block main %}
+<article>
+  <h1>{{ gettext("Select your payment method") }}</h1>
+
+  <p>
+  {{
+    gettext('This is an example for a "checkout" page of a Web shop.') + "<br\>" +
+    gettext('On the previous page, you have created the shopping cart and decided which product to buy (i.e. which project to donate KUDOS to).') + "<br/>" +
+    gettext('As Taler is not yet universally used, we expect merchants will offer various payment options.') + "<br/>" +
+    gettext('To continue with the demo, select the &quot;Taler&quot; payment option.')
+    }}
+  </p>
+  <p class="graybox">
+  {{
+    gettext('Note that you must select Taler here for the demo to continue, as the other payment options are just placeholders and not really working in the demonstration.') + "<br\>" +
+    gettext('It would be possible to ask the user to make this choice already on the previous page (with the shopping cart); we just separated the two steps to keep each step as simple as possible.')
+  }}
+  </p>
+
+  <form name="tform" action="{{ url_for('donate',lang=lang) }}" method="get">
+    <div id="opt-form" align="left"><br>
+      <input type="hidden" name="donation_receiver" value="{{ donation_receiver }}">
+      <input type="hidden" name="donation_amount" value="{{ donation_amount }}">
+      <input type="hidden" name="donation_donor" value="{{ donation_donor }}">
+
+      <input type="radio" name="payment_system" value="lisa" id="radio-lisa">
+      <label for="radio-lisa">Lisa</input>
+      <br/>
+
+      <input type="radio" name="payment_system" value="ycard" id="radio-ycard">
+      <label for="radio-ycard">You Card</label>
+      <br/>
+
+      <input type="radio" name="payment_system" value="cardme" id="radio-cardme">
+      <label for="radio-cardme">Card Me</label>
+      <br/>
+
+      <input type="radio" name="payment_system" value="taler" checked id="radio-taler">
+      <label for=radio-taler">Taler</label>
+      <br/>
+
+      <input id="select-payment-method" type="submit" value="{{gettext("Confirm selection")}}"></input>
+    </div>
+  </form>
+
+</article>
+
+{% endblock main %}
diff --git a/talermerchantdemos/templates/donations-error.html.j2 b/talermerchantdemos/templates/donations-error.html.j2
new file mode 100644
index 0000000..8c48335
--- /dev/null
+++ b/talermerchantdemos/templates/donations-error.html.j2
@@ -0,0 +1,24 @@
+{% extends "donations-base.html.j2" %}
+{% block main %}
+  <h1>{{ gettext("Error encountered") }}</h1>
+
+  <p>{{ message }}</p>
+
+  {% if status_code %}
+  <p>
+    {{ gettext ("The backend returned status code {code}.").format(code=status_code) }}.
+  </p>
+  {% endif %}
+
+  {% if json %}
+  <p>{{gettext("Backend response:")}}</p>
+  <pre>{{ json }}</pre>
+  {% endif %}
+
+  {% if stack %}
+  <p>{{gettext("Stack trace:")}}</p>
+  <pre>
+    {{ stack }}
+  </pre>
+  {% endif %}
+{% endblock main %}
diff --git a/talermerchantdemos/templates/donations-fulfillment.html.j2 b/talermerchantdemos/templates/donations-fulfillment.html.j2
new file mode 100644
index 0000000..b49b7dc
--- /dev/null
+++ b/talermerchantdemos/templates/donations-fulfillment.html.j2
@@ -0,0 +1,22 @@
+{% extends "donations-base.html.j2" %}
+
+{% block main %}
+<h2>{{ gettext("Donation Receipt") }}</h2>
+<p>
+  {{
+    gettext("Thank you, <strong>{donor}</strong>, for donating <strong>{amount}</strong> to <strong>{receiver}</strong>.").format(donor=donation_donor,amount=donation_amount,receiver=donation_receiver)
+  }}
+</p>
+<p>
+  {{
+    gettext("Please keep the order identifier <strong>{id}</strong> as a receipt for your donation.").format(id=order_id) +
+    gettext('You can show other people that you donated by sharing <a href="{link}">this link</a> with them.').format(link=request.url)
+   }}
+</p>
+
+<p class="graybox">
+  {{
+     gettext('You can always make <a href="{link}">another donation</a>.').format(link=url_for('index'))
+  }}
+</p>
+{% endblock main %}
diff --git a/talermerchantdemos/templates/donations-index.html.j2 b/talermerchantdemos/templates/donations-index.html.j2
new file mode 100644
index 0000000..25a6768
--- /dev/null
+++ b/talermerchantdemos/templates/donations-index.html.j2
@@ -0,0 +1,44 @@
+{% extends "donations-base.html.j2" %}
+
+{% block main %}
+<h2>{{ gettext("Donate to Free Software projects") }}</h2>
+
+<p>
+{{
+  gettext("This donations website shows the user experience for donations with GNU Taler.") + "<br>" +
+  gettext("You can make donations in an toy currency ({currency})").format(currency=merchant_currency)
+}}
+</p>
+
+<div>
+  <p>
+  {{
+  gettext("Please select a project, the amount (*) of {currency} you wish to donate, and enter the donor's name that will appear on your receipt:").format(currency=merchant_currency)
+  }}
+  </p>
+
+  <form name="tform" action="{{ url_for('checkout',lang=lang) }}" method="GET" class="pure-form">
+    <div class="participation" id="fake-shop">
+      <select name="donation_receiver">
+        <option value="GNUnet">GNUnet</option>
+        <option value="Taler">GNU Taler</option>
+        <option value="Tor">Tor</option>
+      </select>
+      <select id="taler-donation" name="donation_amount">
+        <option value="{{ merchant_currency }}:0.1">0.1 {{ merchant_currency }}</option>
+        <option value="{{ merchant_currency }}:1">1 {{ merchant_currency }}</option>
+        <option value="{{ merchant_currency }}:6">5 {{ merchant_currency }}</option>
+        <option value="{{ merchant_currency }}:10">10 {{ merchant_currency }}</option>
+      </select>
+      <input type="text" name="donation_donor" value="{{gettext("Anonymous Donor")}}" />
+      <input type="submit" class="pure-button pure-button-primary" value="{{gettext("Donate!")}}" />
+    </div>
+  </form>
+  <p class="graybox">
+    {{
+    gettext("(*) To make the demo a bit more interesting, the 5 {currency} option is deliberately implemented with a fault: the merchant will try to make you donate 6 {currency} instead of the 5 {currency} shown in the form.  But do not worry, you will be given the opportunity to review the final offer from the merchant in the Taler wallet.  That way, Taler protects you from committing to erroneous payments.").format(currency=merchant_currency)
+    }}
+  </p>
+</div>
+
+{% endblock %}
diff --git a/talermerchantdemos/templates/donations-provider-not-supported.html.j2 b/talermerchantdemos/templates/donations-provider-not-supported.html.j2
new file mode 100644
index 0000000..a92af77
--- /dev/null
+++ b/talermerchantdemos/templates/donations-provider-not-supported.html.j2
@@ -0,0 +1,11 @@
+{% extends "donations-base.html.j2" %}
+
+{% block main %}
+<h2>{{ gettext("Payment Provider Not Supported") }}</h2>
+<p>
+{{
+  gettext("Unfortunately the selected payment provider is not supported in this demo.") + "<br>" +
+  gettext("Please go back and select &quot;Taler&quot;.")
+}}
+</p>
+{% endblock main %}
diff --git a/talermerchantdemos/templates/landing-base.html.j2 b/talermerchantdemos/templates/landing-base.html.j2
new file mode 100644
index 0000000..e279767
--- /dev/null
+++ b/talermerchantdemos/templates/landing-base.html.j2
@@ -0,0 +1,12 @@
+{% extends "common-base.html.j2" %}
+
+{% block header_content %}
+
+<h1><span class="it"><a href="{{ env('TALER_ENV_URL_LANDING') }}">{{ gettext("Introduction") }}</a></span></h1>
+<p>{{
+      gettext("This is the GNU Taler demo.") + "<br>" +
+      gettext("Here you can try out the GNU Taler payment system using a toy currency.")
+    }}
+</p>
+
+{% endblock %}
diff --git a/talermerchantdemos/templates/landing-error.html.j2 b/talermerchantdemos/templates/landing-error.html.j2
new file mode 100644
index 0000000..7909656
--- /dev/null
+++ b/talermerchantdemos/templates/landing-error.html.j2
@@ -0,0 +1,13 @@
+{% extends "landing-base.html.j2" %}
+{% block main %}
+  <h1>{{ gettext("Error encountered") }}</h1>
+
+  <p>{{ message }}</p>
+
+  {% if stack %}
+  <p>{{gettext("Stack trace:")}}</p>
+  <pre>
+    {{ stack }}
+  </pre>
+  {% endif %}
+{% endblock main %}
diff --git a/talermerchantdemos/templates/landing-index.html.j2 b/talermerchantdemos/templates/landing-index.html.j2
new file mode 100644
index 0000000..16145e3
--- /dev/null
+++ b/talermerchantdemos/templates/landing-index.html.j2
@@ -0,0 +1,89 @@
+{% extends "landing-base.html.j2" %}
+{% block main %}
+    <article>
+      <h2>{{ gettext("Step 1: Install the Taler wallet") }}</h2>
+      <p>
+       {{
+           gettext('Install the wallet from the <a href=\"{link}\">installation page</a>.').format(link="https://wallet.taler.net/") + "<br>" +
+           gettext('Installation only takes one click.')
+       }}
+      </p>
+      <p class="graybox">
+        {{ gettext('After installation, you may be asked to grant the browser-based Taler wallet additional optional permissions that allow it to improve your user experience.') }} <br>
+        {{ gettext('These permissions will allow the wallet to automatically open if a page asks for a Taler payment.') }} <br>
+        {{ gettext('Regardless of the permissions you grant, the wallet will never transmit information about you or your browsing history to anyone.') }}
+      </p>
+    </article>
+
+    <article>
+      <h2>{{ gettext("Step 2: Withdraw coins") }}</h2>
+      <p>
+        {{
+          gettext('In this demo you are paying with {currency}, an imaginary currency.').format(currency=merchant_currency) + "<br>" +
+          gettext('To withdraw {currency} coins you must first create an account at our <a href="{bank}">bank</a>.').format(currency=merchant_currency,bank=bank_url) + "<br>" +
+          gettext('Signing up only requires you to pick a username and password.') + "<br>" +
+          gettext('When you create an account at our bank, you will be credited 100 {currency} for signing up.').format(currency=merchant_currency) + "<br>" +
+          gettext("Afterwards, use the bank's Web interface to authorize the transfer of {currency} to your wallet.").format(currency=merchant_currency)
+        }}
+      </p>
+      <p class="graybox">
+        {{ gettext('Once you have completed this step, you can click on the Taler icon in your browser to check your balance.') }}
+      </p>
+    </article>
+
+    <article>
+      <h2>{{ gettext("Step 3: Pay") }}</h2>
+        <p>
+        {{
+           gettext("We have two demo merchants where you can spend your coins:")
+        }}
+        </p>
+        <ul>
+          <li>
+            {{
+              gettext('At the <a href="{blog}">essay store</a> you can pay in {currency} for individual chapters of Richard Stallman&#39;s book &quot;Free Software, Free Society&quot;.').format(blog=merchant_blog_url,currency=merchant_currency) + "<br>" +
+              gettext('The book is also available for free at <a href="{fsf}">the FSF</a>.').format(fsf="http://www.fsf.org/")
+            }}
+          </li>
+          <li>
+            {{
+              gettext('At the project <a href="{donations}">donation website</a> you can show respect to a software project of your choice by donating {currency} to them.').format(donations=merchant_donations_url,currency=merchant_currency)
+            }}
+          </li>
+        </ul>
+    </article>
+    <article>
+      <h2>{{ gettext("Step 4: Check money flow") }}</h2>
+        <p>
+        {{
+          gettext('You can see the wire transfers from the escrow account of the exchange to the merchants on the <a href="{bank}/public-accounts">public accounts page</a> of the bank.').format(bank=bank_url) + "<br>" +
+          gettext('Note that only accounts configured to be publicly viewable are shown on that page.')
+        }}
+        </p>
+      </article>
+    <article>
+      <h2>{{ gettext("Step 5: Survey") }}</h2>
+      <p>
+         {{
+           gettext("Websites can give tips to visitors for completing tasks.") + "<br>" +
+           gettext('You can earn some {currency} coins by filling in our <a href="{url}">survey</a>.').format(url=merchant_survey_url,currency=merchant_currency)
+         }}
+      </p>
+    </article>
+    <!-- article>
+      <h2>Step 6: Are you a merchant? Taler has a build-in back-office!</h2>
+      <p>
+         If you are a merchant, you can check the <a href="{{ backoffice_url }}">back-office</a>
+         website to see how your Taler transactions got payed back by bank wire transfers.
+      </p>
+    </article -->
+    <article>
+      <h2>{{ gettext("Step 6: Reach out to us") }}</h2>
+      <p>
+      {{
+         gettext("We appreciate feedback about Taler and this demonstrator.") + "<br>" +
+         gettext('Let us know what you think by <a href="{link}">contacting us</a>.').format(link="mailto:demo-feedback@taler.net")
+      }}
+      </p>
+    </article>
+{% endblock %}
diff --git a/talermerchantdemos/templates/menu.html.j2 b/talermerchantdemos/templates/menu.html.j2
index c364a2c..937030d 100644
--- a/talermerchantdemos/templates/menu.html.j2
+++ b/talermerchantdemos/templates/menu.html.j2
@@ -16,10 +16,7 @@
     <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') + lang + '/' }}"
              {% if active == 'survey' %} class="active" {% endif %}
             >{{gettext("Tipping/Survey")}}</a>
-    <!-- a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') + lang + '/' }}"
-             {% if active == 'backoffice' %} class="active" {% endif %}
-            >{{gettext("Back-office")}}</a -->
-    {% include 'templates/language-switcher.html.j2' %}
+    {% include 'language-switcher.html.j2' %}
   </nav>
 </div>
 {%- endmacro %}
diff --git a/talermerchantdemos/templates/survey-base.html.j2 b/talermerchantdemos/templates/survey-base.html.j2
new file mode 100644
index 0000000..f35f514
--- /dev/null
+++ b/talermerchantdemos/templates/survey-base.html.j2
@@ -0,0 +1,13 @@
+{% extends "common-base.html.j2" %}
+
+{% block header_content %}
+
+<h1>
+<span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY') }}">{{ gettext("Survey") }}</a></span></h1>
+<p>{{
+gettext("This page demonstrates how to tip visitors for completing small tasks.") + "<br>" +
+gettext("Tipping is a way for offer cash rewards that go directly into a user's wallet.")
+}}
+</p>
+
+{% endblock %}
diff --git a/talermerchantdemos/templates/survey-error.html.j2 b/talermerchantdemos/templates/survey-error.html.j2
new file mode 100644
index 0000000..b2f84f9
--- /dev/null
+++ b/talermerchantdemos/templates/survey-error.html.j2
@@ -0,0 +1,24 @@
+{% extends "survey-base.html.j2" %}
+{% block main %}
+  <h1>{{ gettext("Error encountered") }}</h1>
+
+  <p>{{ message }}</p>
+
+  {% if status_code %}
+  <p>
+    {{ gettext ("The backend returned status code {code}.").format(code=status_code) }}
+  </p>
+  {% endif %}
+
+  {% if json %}
+  <p>{{gettext("Backend response:")}}</p>
+  <pre>{{ json }}</pre>
+  {% endif %}
+
+  {% if stack %}
+  <p>{{gettext("Stack trace:")}}</p>
+  <pre>
+    {{ stack }}
+  </pre>
+  {% endif %}
+{% endblock main %}
diff --git a/talermerchantdemos/templates/survey-index.html.j2 b/talermerchantdemos/templates/survey-index.html.j2
new file mode 100644
index 0000000..e7d323b
--- /dev/null
+++ b/talermerchantdemos/templates/survey-index.html.j2
@@ -0,0 +1,26 @@
+{% extends "survey-base.html.j2" %}
+{% block main %}
+  <div>
+    <p>
+    {{
+    gettext("Please participate in our survey about payment systems and receive a tip in return.")
+    }}
+    </p>
+  </div>
+  <div>
+    <form action="{{ "/" +  lang + "/submit-survey" }}" method="post" class="pure-form pure-form-stacked">
+      <legend>{{ gettext("Which payment system do you prefer?") }}</legend>
+      <fieldset>
+      <label for="option-taler">
+        <input id="option-taler" type="radio" name="paypref" value="taler" checked="checked" />
+        Taler
+      </label>
+      <label for="option-visa">
+        <input id="option-visa" type="radio" name="paypref" value="visa" />
+        Visa
+      </label>
+      </fieldset>
+      <input type="submit" value="{{ gettext("Submit Survey")}}" class="pure-button pure-button-primary" />
+    </form>
+  </div>
+{% endblock %}