Add footer to index.

Paystation · May 3, 2018 · 93a744a · 93a744a
1 parent 3b5a63b
commit 93a744a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 24 deletions.
diff --git a/web/css/monokai-sublime.min.css b/web/css/monokai-sublime.min.css
diff --git a/web/css/paystation.css b/web/css/paystation.css
@@ -44,8 +44,9 @@ button {
 	background-color: var(--primary-color);
 	border: solid 1px var(--primary-color);
 	border-radius: 3px;
-	padding: 0.33rem 0.5rem;
+	padding: 0.33rem 1rem;
 	margin: 0.33rem 0;
+	font-size: 1rem;
 }
 
 button:hover {
@@ -65,9 +66,10 @@ button.secondary:hover {
 
 input {
 	margin: 0.33rem 0;
-	padding: 0.33rem;
+	padding: 0.33rem 0.5rem;
 	border: solid 1px #777;
 	border-radius: 3px;
+	font-size: 1rem;
 }
 
 input.invalid {
@@ -86,21 +88,38 @@ pre {
 	margin: 1rem 0;
 }
 
+.page {
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
 .paystation-fold {
 	height: 10px;
 	background: #a2a91b;
 	background: linear-gradient(30deg, #a2a91b 0%, #b2ba27 33%, #ccd234 33%, #b2ba27 100%);
 }
 
 .header {
-	padding: 1rem 0.5rem 0.5rem;
 	min-height: 60px;
+}
+
+.header, .footer {
+	padding: 1rem 0.5rem 0.5rem;
 	text-align: center;
-	box-shadow: 1px 1px 10px 0 #ddd;
+	box-shadow: 0 1px 10px 0 #ddd;
 	background: #fff;
 	color: #333;
 }
 
+.footer {
+	min-height: 45px;
+}
+
+.flex {
+	flex: 1;
+}
+
 .content {
 	display: flex;
 	flex-direction: row;

diff --git a/web/index.html b/web/index.html
@@ -3,28 +3,32 @@
 <head>
 	<title>Hosted Payment Demo</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" type="text/css" href="css/paystation.css?1">
-	<link rel="stylesheet" href="css/monokai-sublime.min.css">
+	<link rel="stylesheet" type="text/css" href="css/paystation.css">
 </head>
 <body>
-<div class="paystation-fold"></div>
-<h2 class="header">Hosted Payment Demo</h2>
-
-<div class="content">
-	<div class="box center">
-		<p>Create a test transaction to see the payment form. <a href="//www2.paystation.co.nz/for-developers/test-cards/" target="_blank" rel="nofollow">Test cards can be found here</a>.</p>
-
-		<form method="post" action="checkout.php">
-			<label>$&nbsp;<input type="tel" name="amount" id="payment_amount" placeholder="Amount" value="10"/></label>
-			<button type="submit" id="payment_button">Pay Here</button>
-			<button type="submit" id="checkout_button" class="secondary">Pay at Checkout</button>
-		</form>
+<div class="page">
+	<div class="paystation-fold"></div>
+	<h2 class="header">Hosted Payment Demo</h2>
+	<div class="content">
+		<div class="box center">
+			<p>Create a test transaction to see the payment form. <a href="https://www2.paystation.co.nz/for-developers/test-cards/" target="_blank" rel="nofollow">Test cards can be found here</a>.</p>
+
+			<form method="post" action="checkout.php">
+				<label>$&nbsp;<input type="tel" name="amount" id="payment_amount" placeholder="Amount" value="10"/></label>
+				<button type="submit" id="payment_button">Pay Here</button>
+				<button type="submit" id="checkout_button" class="secondary">Pay at Checkout</button>
+			</form>
+		</div>
+		<div class="box">
+			<div id="payment_wrapper" class="payment-wrapper"></div>
+		</div>
+		<div class="box center" id="payment-page-qr-code" style="display: none;">
+			Or use your phone.<br><br>
+		</div>
 	</div>
-	<div class="box">
-		<div id="payment_wrapper" class="payment-wrapper"></div>
-	</div>
-	<div class="box center" id="payment-page-qr-code" style="display: none;">
-		Or use your phone.<br><br>
+	<div class="flex"></div>
+	<div class="footer">
+		<a href="https://docs.paystation.co.nz/#payment-page" target="_blank" rel="nofollow">docs</a> - <a href="https://github.com/paystation/php-3party" target="_blank" rel="nofollow">github</a>
 	</div>
 </div>