diff options
-rw-r--r-- | contrib/merchant.conf | 14 | ||||
-rw-r--r-- | src/frontend/checkout.php | 135 | ||||
-rw-r--r-- | src/frontend/fullfillment.php | 31 | ||||
-rw-r--r-- | src/frontend/generate_taler_contract.php | 29 | ||||
-rw-r--r-- | src/frontend/index.html | 226 | ||||
-rw-r--r-- | src/frontend/pay.php | 64 | ||||
-rw-r--r-- | src/frontend/style.css | 65 |
7 files changed, 343 insertions, 221 deletions
diff --git a/contrib/merchant.conf b/contrib/merchant.conf deleted file mode 100644 index e1727b4f..00000000 --- a/contrib/merchant.conf +++ /dev/null @@ -1,14 +0,0 @@ -[merchant] -PORT = 4251 - -# List of mints the merchant trusts delimited by a single space -TRUSTED_MINTS = taler - -[mint-taler] -HOSTNAME = taler.org -PORT = 4241 -# The public key of this mint -PUBKEY = ... - -[merchant-db] -CONFIG = postgres:///taler
\ No newline at end of file diff --git a/src/frontend/checkout.php b/src/frontend/checkout.php index 157bd25f..7947481b 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: @@ -50,7 +51,7 @@ $donation_currency = $_POST['donation_currency']; // get frational part - list ($donation_value, $donation_fraction) = split ("\.", $donation_amount, 2); + list ($donation_value, $donation_fraction) = explode (".", $donation_amount, 2); // create PHP session and store donation information in session $donation_fraction = (float) ("0." . $donation_fraction); session_start(); @@ -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"></input> + </div> + </form> + + </article> + </section> <script type="text/javascript"> @@ -106,7 +132,7 @@ function handle_contract(json_contract) { var cEvent = new CustomEvent('taler-contract', { detail: json_contract }); - document.body.dispatchEvent(cEvent); + document.dispatchEvent(cEvent); }; @@ -121,7 +147,7 @@ function taler_pay(form) have its own way of generating and transmitting the contract, there just must be a way to get the contract and to pass it to the wallet when the user selects 'Pay'. */ - contract_request.open("GET", "/generate_taler_contract.php", true); + contract_request.open("GET", "generate_taler_contract.php", true); contract_request.onload = function (e) { if (contract_request.readyState == 4) @@ -129,9 +155,9 @@ function taler_pay(form) if (contract_request.status == 200) { /* display contract_requestificate (i.e. it sends the JSON string - to the extension) alert (contract_request.responseText); */ + to the extension) alert (contract_request.responseText); */ + console.log("response text:", contract_request.responseText); handle_contract(contract_request.responseText); - } else { @@ -211,7 +237,7 @@ function taler_wallet_unload_cb(aEvent) function signal_taler_wallet_onload() { var eve = new Event('taler-checkout-probe'); - document.body.dispatchEvent(eve); + document.dispatchEvent(eve); }; @@ -228,21 +254,20 @@ function test_without_wallet(){ // Register event to be triggered by the wallet as a response to our // first event -document.body.addEventListener("taler-wallet-present", - has_taler_wallet_cb, - false); +document.addEventListener("taler-wallet-present", + has_taler_wallet_cb, + false); // Register event to be triggered by the wallet when it gets enabled while // the user is on the payment page -document.body.addEventListener("taler-load", - signal_taler_wallet_onload, - false); +document.addEventListener("taler-load", + signal_taler_wallet_onload, + false); // Register event to be triggered by the wallet when it is unloaded -document.body.addEventListener("taler-unload", - taler_wallet_unload_cb, - false); - +document.addEventListener("taler-unload", + taler_wallet_unload_cb, + false); </script> </body> </html> diff --git a/src/frontend/fullfillment.php b/src/frontend/fullfillment.php index 40762b19..f22fd1d8 100644 --- a/src/frontend/fullfillment.php +++ b/src/frontend/fullfillment.php @@ -6,7 +6,23 @@ </head> <body> -<?php + <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 - Payment succeeded</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + <article> +<?php /* This file is part of GNU TALER. Copyright (C) 2014, 2015 GNUnet e.V. @@ -28,9 +44,9 @@ $cli_debug = false; $backend_test = true; function generate_msg ($link){ - $msg = "Thanks for donating to " . $_SESSION['receiver'] . "."; + $msg = "<p>Thanks for donating to " . $_SESSION['receiver'] . ".</p>"; if (false != $link) - $msg .= " Check our latest <a href=\"" . $link . "\">news!</a>"; + $msg .= "<p>Check our latest <a href=\"" . $link . "\">news!</a></p>"; return $msg; } @@ -46,12 +62,12 @@ if ($_GET['backend_test'] == 'no') session_start(); if (! isset ($_SESSION['payment_ok'])) - echo "Please land here after a successful payment!"; + echo "<p>Please land here after a successful payment!</p>"; else{ $news = false; switch ($_SESSION['receiver']){ case "Taler": - $news = "https://taler.net/about"; + $news = "https://taler.net/news"; break; case "GNUnet": $news = "https://gnunet.org/"; @@ -60,10 +76,11 @@ else{ $news = "https://www.torproject.org/press/press.html.en"; break; } - echo generate_msg ($news); + echo generate_msg ($news); } ?> - + </article> + </section> </body> </html> diff --git a/src/frontend/generate_taler_contract.php b/src/frontend/generate_taler_contract.php index c71542c8..7216badb 100644 --- a/src/frontend/generate_taler_contract.php +++ b/src/frontend/generate_taler_contract.php @@ -30,15 +30,26 @@ if the whole "journey" to the backend is begin tested - $ curl http://merchant_url/generate_taler_contract.php?backend_test=no if just the frontend job is being tested -*/ + */ + + +register_shutdown_function(function() { + $lastError = error_get_last(); + + if (!empty($lastError) && $lastError['type'] == E_ERROR) { + header('Status: 500 Internal Server Error'); + header('HTTP/1.0 500 Internal Server Error'); + } +}); + $cli_debug = false; $backend_test = true; -if ($_GET['cli_debug'] == 'yes') +if (isset($_GET['cli_debug']) && $_GET['cli_debug'] == 'yes') $cli_debug = true; -if ($_GET['backend_test'] == 'no') +if (isset($_GET['backend_test']) && $_GET['backend_test'] == 'no') { $cli_debug = true; $backend_test = false; @@ -50,7 +61,6 @@ if (!$cli_debug && (! isset($_SESSION['receiver']))) { http_response_code (404); echo "Please select a contract before getting to this page..."; - echo "attempted : " . $_SESSION['receiver']; exit (0); } @@ -145,11 +155,14 @@ if ($cli_debug && !$backend_test) exit; } -// Craft the HTTP request, note that the backend -// could be on an entirely different machine if -// desired. + + +// Backend is relative to the shop site. +$url = (new http\URL("http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]")) + ->mod(array ("path" => "backend/contract"), http\Url::JOIN_PATH); + $req = new http\Client\Request ("POST", - "http://" . $_SERVER["SERVER_NAME"] . "/backend/contract", + $url, array ("Content-Type" => "application/json")); $req->getBody()->append ($json); diff --git a/src/frontend/index.html b/src/frontend/index.html index 8111735f..11753f2d 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"> - <h1>Welcome to the Taler "Demo" Shop</h1> + +<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 <sup>(once)</sup></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 <sup>(done!)</sup></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 <sup>(occasionally)</sup></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! <sup>(as long as you have KUDOS left)</sup></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 @@ -168,7 +192,7 @@ function signal_me() { var eve = new Event('taler-checkout-probe'); - document.body.dispatchEvent(eve); + document.dispatchEvent(eve); //alert("signaling"); }; @@ -176,21 +200,21 @@ wallet_installed_cb(); } - document.body.addEventListener("taler-unload", - wallet_uninstalled_cb, - false, false); + document.addEventListener("taler-unload", + wallet_uninstalled_cb, + false, false); /* Set up a listener to be called whenever a Wallet gets installed so that the user is led towards the demo's steps progressively */ - document.body.addEventListener("taler-wallet-present", - wallet_installed_cb, - false, false); + document.addEventListener("taler-wallet-present", + wallet_installed_cb, + false, false); /* Setup callback to be called whenever the wallet is loaded/enabled while the browser is already on this page */ - document.body.addEventListener("taler-load", - signal_me, - false); + document.addEventListener("taler-load", + signal_me, + false); </script> </body> </html> diff --git a/src/frontend/pay.php b/src/frontend/pay.php index 97ee5290..bd8a5b6d 100644 --- a/src/frontend/pay.php +++ b/src/frontend/pay.php @@ -28,35 +28,25 @@ $cli_debug = false; $backend_test = true; -if ($_GET['cli_debug'] == 'yes') +if (isset($_GET['cli_debug']) && $_GET['cli_debug'] == 'yes') +{ $cli_debug = true; +} -if ($_GET['backend_test'] == 'no') +if (isset($_GET['backend_test']) && $_GET['backend_test'] == 'no') { $cli_debug = true; $backend_test = false; } -session_start(); - -if (!$cli_debug && (! isset($_SESSION['receiver']))) +if (!isset($_SESSION['receiver'])) { - http_response_code(400); - echo "Please, donate to someone before landing here!"; - exit(); + echo "No session active."; + http_response_code (301); + return; } -$cli_debug = false; -$backend_test = true; - -if ($_GET['cli_debug'] == 'yes') - $cli_debug = true; - -if ($_GET['backend_test'] == 'no') -{ - $cli_debug = true; - $backend_test = false; -} +session_start(); $post_body = file_get_contents('php://input'); @@ -66,15 +56,15 @@ $edate = array ('edate' => $deposit_permission = json_decode ($post_body, true); -$to_add = array ('max_fee' => array ('value' => 3, - 'fraction' => 8, - 'currency' => $_SESSION['currency']), - 'amount' => array ('value' => $_SESSION['amount_value'], - 'fraction' => $_SESSION['amount_fraction'], - 'currency' => $_SESSION['currency'])); +$to_add = array('max_fee' => array('value' => 3, + 'fraction' => 8, + 'currency' => $_SESSION['currency']), + 'amount' => array('value' => $_SESSION['amount_value'], + 'fraction' => $_SESSION['amount_fraction'], + 'currency' => $_SESSION['currency'])); -$new_deposit_permission = array_merge ($deposit_permission, $to_add); -$new_deposit_permission_edate = array_merge ($new_deposit_permission, $edate); +$new_deposit_permission = array_merge($deposit_permission, $to_add); +$new_deposit_permission_edate = array_merge($new_deposit_permission, $edate); /* Craft the HTTP request, note that the backend could be on an entirely different machine if @@ -85,14 +75,14 @@ if ($cli_debug && !$backend_test) /* DO NOTE the newline at the end of 'echo's argument */ //echo json_encode ($new_deposit_permission_edate, JSON_PRETTY_PRINT) - echo json_encode ($new_deposit_permission, JSON_PRETTY_PRINT) + echo json_encode($new_deposit_permission, JSON_PRETTY_PRINT) . "\n"; exit; } -$req = new http\Client\Request ("POST", - "http://" . $_SERVER["SERVER_NAME"] . "/backend/pay", - array ("Content-Type" => "application/json")); +$req = new http\Client\Request("POST", + "http://" . $_SERVER["SERVER_NAME"] . "/backend/pay", + array ("Content-Type" => "application/json")); $req->getBody()->append (json_encode ($new_deposit_permission)); // Execute the HTTP request @@ -112,15 +102,17 @@ if ($status_code != 200) /* error: just forwarding to the wallet what gotten from the backend (which is forwarding 'as is' the error gotten from the mint) */ + echo json_encode ($new_deposit_permission); + echo "Error came from the backend, status $status_code\n"; + echo "\n"; echo $resp->body->toString (); - } else { -$_SESSION['payment_ok'] = true; -http_response_code (301); -header("Location: http://" . $_SERVER["SERVER_NAME"] . "/fullfillment"); -die(); + $_SESSION['payment_ok'] = true; + http_response_code (301); + header("Location: http://" . $_SERVER["SERVER_NAME"] . "/fullfillment"); + die(); } ?> 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%; +} |