diff options
| author | tg(x) <*@tg-x.net> | 2015-12-19 02:40:30 +0100 |
|---|---|---|
| committer | tg(x) <*@tg-x.net> | 2015-12-19 02:40:30 +0100 |
| commit | 9f8ce6f8cdd4ad1c8f997315c55fbe4756a24391 (patch) | |
| tree | 2a329af3f8f59ca665de0800ee8343f1c2092c4d | |
| parent | a105bd7a0ebbaa190e1131b1b9dec1a22309a716 (diff) | |
| download | merchant-9f8ce6f8cdd4ad1c8f997315c55fbe4756a24391.tar.gz merchant-9f8ce6f8cdd4ad1c8f997315c55fbe4756a24391.tar.bz2 merchant-9f8ce6f8cdd4ad1c8f997315c55fbe4756a24391.zip | |
checkout styling
| -rw-r--r-- | src/frontend/checkout.php | 104 | ||||
| -rw-r--r-- | src/frontend/index.html | 2 |
2 files changed, 66 insertions, 40 deletions
diff --git a/src/frontend/checkout.php b/src/frontend/checkout.php index a2031636..c002f52a 100644 --- a/src/frontend/checkout.php +++ b/src/frontend/checkout.php @@ -1,7 +1,8 @@ <!DOCTYPE html> <html> <head> -<title>Taler's "Demo" Shop: Choose payment method</title> + <title>Toy Store - Payment method - Taler Demo</title> + <link rel="stylesheet" type="text/css" href="style.css"> <script> /* @licstart The following is the entire license notice for the @@ -31,7 +32,7 @@ </head> <body onload="signal_taler_wallet_onload()"> <!-- - This page's main aim is to show to the customer all the accepted + This main goal of this page is to show to the customer all the accepted payments methods and actually implementing just Taler; technically the steps are: @@ -59,43 +60,68 @@ $_SESSION['amount_fraction'] = (int) ($donation_fraction * 1000000); $_SESSION['currency'] = $donation_currency; ?> -<h2>Select your payment option</h2> -<div> -This is an example for a "checkout" page of a Web shop. -On the previous page, you have created the shopping cart -and decided which product to buy (i.e. which project to -donate KUDOS to). Now in this page, you are asked to -select a payment option. As Taler is not yet universally -used, we expect merchants will offer various payment options. -<p> -The page also demonstrates how to only enable (or show) the Taler -option if Taler is actually supported by the browser. For example, -if you disable the Taler extension now, the Taler payment option -will be disabled in the page. Naturally, you could also trivially -hide the Taler option entirely by changing the visibility instead. -<p> -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. Also, it is of course -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. -</div> -<form name="tform" action="" method="POST"> - <div id="opt-form" align="left"><br> - <input type="radio" name="payment_system" value="lisa" - id="lisa-radio-button-id">Lisa</input> - <br> - <input type="radio" name="payment_system" value="ycard">You Card</input> - <br> - <input type="radio" name="payment_system" value="cardme">Card Me</input> - <br> - <input type="radio" name="payment_system" value="taler" - id="taler-radio-button-id" disabled="true">Taler</input> - <br> - <input type="button" onclick="pay(this.form)" value="Ok"> - </div> -</form> + + <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 - Select payment method</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + <article> + + <h1>Select your payment method</h1> + + <p> + This is an example for a "checkout" page of a Web shop. + On the previous page, you have created the shopping cart + and decided which product to buy (i.e. which project to + donate KUDOS to). Now in this page, you are asked to + select a payment option. As Taler is not yet universally + used, we expect merchants will offer various payment options. + </p> + <p> + The page also demonstrates how to only enable (or show) the Taler + option if Taler is actually supported by the browser. For example, + if you disable the Taler extension now, the Taler payment option + will be disabled in the page. Naturally, you could also trivially + hide the Taler option entirely by changing the visibility instead. + </p> + <p> + 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. Also, it is of course + 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="" method="POST"> + <div id="opt-form" align="left"><br> + <input type="radio" name="payment_system" value="lisa" + id="lisa-radio-button-id">Lisa</input> + <br/> + <input type="radio" name="payment_system" value="ycard">You Card</input> + <br/> + <input type="radio" name="payment_system" value="cardme">Card Me</input> + <br/> + <input type="radio" name="payment_system" value="taler" + id="taler-radio-button-id" disabled="true">Taler</input> + <br/> + <input type="button" onclick="pay(this.form)" value="Ok"> + </div> + </form> + + </article> + </section> <script type="text/javascript"> diff --git a/src/frontend/index.html b/src/frontend/index.html index 1e528d43..9477e258 100644 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -45,7 +45,7 @@ <section id="main"> <article> - <h1>Welcome to the Taler "Demo" Shop</h1> + <h1>Welcome to the Taler Demo Shop</h1> <p>This "toy" website provides you with the ability to experience using the |