(HomeTV App) add dummy payment page

[Issue] #1347 [Problem] Add paymant page on submit your order [Solution] - new page has been added images: https://commons.wikimedia.org/wiki/File:Font_Awesome_5_brands_cc-visa.svg https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/300px-MasterCard_Logo.svg.png Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
Samsung · Jul 28, 2020 · 75b5fcc · 75b5fcc
1 parent ae66ffc
commit 75b5fcc
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 2 deletions.
diff --git a/examples/mobile/HomeApp/breakfast-menu.html b/examples/mobile/HomeApp/breakfast-menu.html
@@ -23,7 +23,7 @@ <h1>Choose your breakfast</h1>
 				<li class="ui-li-divider ui-li-has-checkbox">
 					<input name="asian" type="checkbox" />
 					<div class="ui-li-text">Asian Style</div>
-					
+
 				</li>
 				<li class="ui-li-divider ui-li-has-checkbox">
 					<input name="us" type="checkbox" />
@@ -52,7 +52,7 @@ <h1>Choose your breakfast</h1>
 			</ul>
 		</div>
 		<footer class="ui-bottom-button">
-			<a href="#main" class="ui-btn ui-btn-flat">Submit your order</a>
+			<a href="payment.html" class="ui-btn ui-btn-flat">Submit your order</a>
 		</footer>
 	</div>
 </body>

diff --git a/examples/mobile/HomeApp/css/style.css b/examples/mobile/HomeApp/css/style.css
@@ -150,6 +150,42 @@
     align-self: center;
 }
 
+.app-dummy-payment input {
+    display: block;
+    font-size: 18px;
+    padding: 8px;
+    margin: 4px 0;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    width: 100%;
+}
+.app-dummy-payment input.ui-inline {
+    width: auto;
+    display: inline;
+}
+.app-cards {
+    margin-left: 30px;
+}
+.app-cards .app-visa {
+    width: 36px;
+    -webkit-mask-image: url(../images/270px-Font_Awesome_5_brands_cc-visa.svg.png);
+    background-color: blue;
+    height: 30px;
+    -webkit-mask-size: 100%;
+    display: inline-block;
+}
+.app-cards .app-mc {
+    background-image: url(../images/MasterCard_Logo.svg.png);
+    width: 36px;
+    height: 30px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-position: center;
+    margin: 0 5px;
+}
+
 body {
     /*disable-pull-to-refresh-effect*/
     overscroll-behavior: contain;

diff --git a/examples/mobile/HomeApp/images/270px-Font_Awesome_5_brands_cc-visa.svg.png b/examples/mobile/HomeApp/images/270px-Font_Awesome_5_brands_cc-visa.svg.png
diff --git a/examples/mobile/HomeApp/images/MasterCard_Logo.svg.png b/examples/mobile/HomeApp/images/MasterCard_Logo.svg.png
diff --git a/examples/mobile/HomeApp/payment.html b/examples/mobile/HomeApp/payment.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<title>Payment</title>
+	<link href="lib/tau/mobile/theme/default/tau.css" rel="stylesheet" />
+	<link rel="stylesheet" href="css/style.css" />
+	<script data-build-remove="false" src="lib/tau/mobile/js/tau.js"></script>
+</head>
+<body>
+	<div class="ui-page">
+		<header>
+			<h1>SECURE CREDIT CARD PAYMENT</h1>
+		</header>
+		<div class="ui-content">
+			<ul class="ui-listview ui-content-area app-dummy-payment">
+				<li class="ui-li-has-text-input">
+					<label>Card Number
+						<input data-role="none" placeholder="Card Number"
+							pattern="[0-9-]+" data-error-message-string="Wrong card number" type="text"/>
+					</label>
+				</li>
+				<li>
+					<div class="app-cards">
+						<div class="app-visa"></div><div class="app-mc"></div>
+					</div>
+				</li>
+				<li class="ui-li-has-text-input">
+					<label>Expiry (mm / yy) <br>
+						<input class="ui-inline" data-role="none" placeholder="MM" pattern="[0-9]{1,2}" maxlenght="2" size="2"
+							data-error-message-string="Invalid month" data-inline="true" type="text"/> /
+						<input class="ui-inline" data-role="none" class="input-hint" placeholder="YY" pattern="[0-9]{1,2}"
+							data-error-message-string="Invalid year" data-inline="true" type="text" size="2"/>
+					</label>
+					<label>Security Code (CVV)<br>
+						<input class="ui-inline" data-role="none" placeholder="Security Code" type="text"/>
+					</label>
+				</li>
+				<li class="ui-li-has-text-input">
+					<label>Cardholder Name<br>
+						<input data-role="none" placeholder="Cardholder Name" type="text"/>
+					</label>
+				</li>
+			</ul>
+		</div>
+		<footer class="ui-bottom-button">
+			<a href="#main" class="ui-btn">Pay Now</a>
+		</footer>
+	</div>
+</body>
+</html>