styling

author: tg(x) <*@tg-x.net> 2015-12-18 22:42:47 +0100
committer: tg(x) <*@tg-x.net> 2015-12-18 22:42:47 +0100
commit: a105bd7a0ebbaa190e1131b1b9dec1a22309a716 (patch)
tree: 44865b20a614a7f4ac6e7c31c0a958fb7bb4af0a
parent: 670071e758f238fc9ed3196df1cbffc112a7bda7 (diff)
download: merchant-a105bd7a0ebbaa190e1131b1b9dec1a22309a716.tar.gz
merchant-a105bd7a0ebbaa190e1131b1b9dec1a22309a716.tar.bz2
merchant-a105bd7a0ebbaa190e1131b1b9dec1a22309a716.zip
2 files changed, 179 insertions, 90 deletions
diff --git a/src/frontend/index.html b/src/frontend/index.html
index edeaf4f2..1e528d43 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Taler's "Demo" Shop</title>
+  <title>Toy Store - Taler Demo</title>
   <link rel="stylesheet" type="text/css" href="style.css">
     <script> /* @licstart  The following is the entire license notice for the
         JavaScript code in this page.
@@ -27,10 +27,26 @@
         */
     </script>
 </head>
-<body id="css-zen-garden" onload="signal_me()">
-  <div class="supporting" id="welcome" role="main">
-    <div class="explanation" id="zen-explanation" role="article">
+
+<body onload="signal_me()">
+  <header>
+    <div id="logo">
+      <svg height="100" width="100">
+        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="white" />
+        <text x="19" y="82" font-family="Verdana" font-size="90" fill="black">S</text>
+      </svg>
+    </div>
+
+    <h1>Toy Store - Taler Demo</h1>
+  </header>
+
+  <aside class="sidebar" id="left">
+  </aside>
+
+  <section id="main">
+    <article>
       <h1>Welcome to the Taler "Demo" Shop</h1>
+
       <p>This "toy" website provides you with the ability to
         experience using the
         <a href="https://www.taler.net/">GNU Taler</a>
@@ -48,95 +64,103 @@
         <!-- TODO: maybe offer the wallet at 'taler.net/extension' in the
              future, instead of at 'demo.taler.net/'? -->
       </p>
-    </div>
-  </div>
-  <div class="supporting" id="instructions" role="main">
-    <div class="explanation" id="installation" role="article">
-      <h2>Step 1: Installing the Taler wallet (once)</h2>
-      <p>First, you need to install the Taler wallet browser extension.
-         It is currently only available for Firefox.  If you run
-         Firefox, simply click <a href="http://demo.taler.net/extension">here</a>
-         to download and install the extension.  You will then have to
-         click on "allow" and "install" dialogs shown by Firefox.
-         After that, the Taler logo should appear on the right side
-         of your navigation bar.
-        <!-- TODO: insert screenshot highlighting the icon? -->
-      </p>
-    </div>
-    <div class="explanation" id="installation-done" role="article" style="display:none;">
-      <h2>Step 1: Installing the Taler wallet (done!)</h2>
-      <p>Congratulations, you have installed the Taler wallet correctly.
-         You can now proceed with the next steps.
-      </p>
-    </div>
-    <div class="explanation" id="wire" role="article" style="display:none;">
-      <h2>Step 2: Withdraw coins (occasionally)</h2>
-      <p>The next step is to withdraw coins, after all you cannot
-         pay with an empty wallet.  To be allowed to withdraw
-         coins from a mint, you first need to transfer currency to the mint
-         using the normal banking system, for example by using a
-         wire transfer.  If the bank offers a tight integration with Taler, it
-         may also support this directly over the home banking online interface.
-         <br>
-         For the demonstration, we have created a "bank" that
-         allows you to "wire" funds (in KUDOS) to the mint simply by
-         filling in the desired amount into a form.  Naturally, when
-         using a real bank with real money, you would have to authenticate
-         and authorize the transfer.
-         <br>
-         Note that you would not do this step for each purchase or each shop.
-         Payment with Taler is like paying
-         with cash: you withdraw currency at the bank (or an ATM) and then
-         pay at many merchants without having to authenticate each time.
-         <br>
-         So, unless you have already done so, please go ahead and withdraw
-         KUDOS at the
-         <a href="http://bank.demo.taler.net/" target="_blank">Demo bank</a>
-	 (opens in a new tab).</p>
-      </p>
-    </div>
-    <div class="explanation" id="payment" role="article" style="display:none;">
-      <h2>Step 3: Shop! (as long as you have KUDOS left in the wallet)</h2>
-      <p>Now it is time to spend your hard earned KUDOS.
-         Note that we cannot really tell if you got any yet,
-         as your Taler wallet balance is visible to you, but
-         of course is hidden entirely from the shop.</p>
-      <p>The form that follows corresponds to the shopping
-         cart of a real Web shop; however, we kept it
-         very simple for the demonstration.</p>
-      <p>So, please choose a project and the amount of KUDOS you
-         wish to donate:</p>
-      <form name="tform" action="/checkout.php" method="POST">
-        <div class="participation" id="fake-shop">
-          <br>
-          <input type="radio" name="donation_receiver" value="Taler" checked="true">GNU Taler</input>
-          <br>
-          <input type="radio" name="donation_receiver" value="Tor">Tor</input>
-          <br>
-          <input type="radio" name="donation_receiver" value="GNUnet">GNUnet</input>
+    </article>
+
+    <section id="instructions">
+
+      <article id="installation">
+        <h2>Step 1: Installing the Taler wallet (once)</h2>
+        <p>First, you need to install the Taler wallet browser extension.
+          It is currently only available for Firefox.  If you run
+          Firefox, simply click <a href="http://demo.taler.net/extension">here</a>
+          to download and install the extension.  You will then have to
+          click on "allow" and "install" dialogs shown by Firefox.
+          After that, the Taler logo should appear on the right side
+          of your navigation bar.
+          <!-- TODO: insert screenshot highlighting the icon? -->
+        </p>
+      </article>
+
+      <article id="installation-done" style="display:none;">
+        <h2>Step 1: Installing the Taler wallet (done!)</h2>
+
+        <p>Congratulations, you have installed the Taler wallet correctly.
+          You can now proceed with the next steps.
+        </p>
+      </article>
+
+      <article id="wire" style="display:none;">
+        <h2>Step 2: Withdraw coins (occasionally)</h2>
+
+        <p>The next step is to withdraw coins, after all you cannot
+          pay with an empty wallet.  To be allowed to withdraw
+          coins from a mint, you first need to transfer currency to the mint
+          using the normal banking system, for example by using a
+          wire transfer.  If the bank offers a tight integration with Taler, it
+          may also support this directly over the home banking online interface.
           <br>
-          <select id="taler-donation" name="donation_amount">
-            <option value="0.1">0.1 KUDOS</option>
-            <option value="1.0">1 KUDOS</option>
-            <option value="6.0">5 KUDOS (*)</option>
-            <option value="10.0">10 KUDOS</option>
-          </select>
-          <input type="hidden" name="donation_currency" value="KUDOS"/>
-          <input type="submit" name="keyName" value="Donate!"/>
+          For the demonstration, we have created a "bank" that
+          allows you to "wire" funds (in KUDOS) to the mint simply by
+          filling in the desired amount into a form.  Naturally, when
+          using a real bank with real money, you would have to authenticate
+          and authorize the transfer.
           <br>
+          Note that you would not do this step for each purchase or each shop.
+          Payment with Taler is like paying
+          with cash: you withdraw currency at the bank (or an ATM) and then
+          pay at many merchants without having to authenticate each time.
           <br>
-        </div>
-      </form>
-      <p>(*) To make it a bit more fun, the 5 KUDOS option
-         is deliberately implemented with a fault: the merchant will try to
-         make you donate 6 KUDOS instead of the 5 KUDOS you got to see.  But do
-         not worry, you will be given the opportunity to review the
-         final offer from the merchant in a window secured
-         by the Taler extension.  That way, you can spot the
-         error before committing to an incorrect contract.</p>
-      </p>
-    </div>
-  </div>
+          So, unless you have already done so, please go ahead and withdraw
+          KUDOS at the
+          <a href="http://bank.demo.taler.net/" target="_blank">Demo bank</a>
+	  (opens in a new tab).</p>
+      </article>
+
+      <article id="payment" style="display:none;">
+        <h2>Step 3: Shop! (as long as you have KUDOS left in the wallet)</h2>
+
+        <p>Now it is time to spend your hard earned KUDOS.
+          Note that we cannot really tell if you got any yet,
+          as your Taler wallet balance is visible to you, but
+          of course is hidden entirely from the shop.</p>
+        <p>The form that follows corresponds to the shopping
+          cart of a real Web shop; however, we kept it
+          very simple for the demonstration.</p>
+        <p>So, please choose a project and the amount of KUDOS you
+          wish to donate:</p>
+
+        <form name="tform" action="/checkout.php" method="POST">
+          <div class="participation" id="fake-shop">
+            <br>
+            <input type="radio" name="donation_receiver" value="Taler" checked="true">GNU Taler</input>
+            <br>
+            <input type="radio" name="donation_receiver" value="Tor">Tor</input>
+            <br>
+            <input type="radio" name="donation_receiver" value="GNUnet">GNUnet</input>
+            <br>
+            <select id="taler-donation" name="donation_amount">
+              <option value="0.1">0.1 KUDOS</option>
+              <option value="1.0">1 KUDOS</option>
+              <option value="6.0">5 KUDOS (*)</option>
+              <option value="10.0">10 KUDOS</option>
+            </select>
+            <input type="hidden" name="donation_currency" value="KUDOS"/>
+            <input type="submit" name="keyName" value="Donate!"/>
+            <br>
+            <br>
+          </div>
+        </form>
+        <p>(*) To make it a bit more fun, the 5 KUDOS option
+          is deliberately implemented with a fault: the merchant will try to
+          make you donate 6 KUDOS instead of the 5 KUDOS you got to see.  But do
+          not worry, you will be given the opportunity to review the
+          final offer from the merchant in a window secured
+          by the Taler extension.  That way, you can spot the
+          error before committing to an incorrect contract.</p>
+      </article>
+    </section>
+  </section>
+
   <script type="text/javascript">
     /* This function is called if/when a Wallet is installed.
        It should enable the parts of the page that only make
diff --git a/src/frontend/style.css b/src/frontend/style.css
index e69de29b..4346b0d0 100644
--- a/src/frontend/style.css
+++ b/src/frontend/style.css
@@ -0,0 +1,65 @@
+body {
+    background-color: white;
+    margin: 0;
+    padding: 0;
+    font-family: Verdana, sans;
+}
+
+header {
+    width: 100%;
+    height: 100px;
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid black;
+}
+
+header h1 {
+    font-size: 200%;
+    margin: 0;
+    padding: 0 0 0 120px;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+header #logo {
+    float: left;
+    width: 100px;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    border-right: 1px solid black;
+}
+
+aside {
+    width: 100px;
+    float: left;
+}
+
+section#main {
+    margin: 0 0 0 100px;
+    padding: 20px;
+    border-left: 1px solid black;
+    height: 100%;
+    max-width: 40em;
+}
+
+section#main h1:first-child {
+    margin-top: 0;
+}
+
+h1 {
+    font-size: 160%;
+}
+
+h2 {
+    font-size: 140%;
+}
+
+h3 {
+    font-size: 120%;
+}
+
+h4, h5, h6 {
+    font-size: 100%;
+}
author	tg(x) <*@tg-x.net>	2015-12-18 22:42:47 +0100
committer	tg(x) <*@tg-x.net>	2015-12-18 22:42:47 +0100
commit	a105bd7a0ebbaa190e1131b1b9dec1a22309a716 (patch)
tree	44865b20a614a7f4ac6e7c31c0a958fb7bb4af0a
parent	670071e758f238fc9ed3196df1cbffc112a7bda7 (diff)
download	merchant-a105bd7a0ebbaa190e1131b1b9dec1a22309a716.tar.gz merchant-a105bd7a0ebbaa190e1131b1b9dec1a22309a716.tar.bz2 merchant-a105bd7a0ebbaa190e1131b1b9dec1a22309a716.zip