Version 3.0.0

- Updated the look and feel of the merchant button and the pop-up. - Added more about pop-up. - Added logic for browser information. - Removed hover over pop-up.
vocalinkzapp · Jun 13, 2019 · 6a91827 · 6a91827
1 parent ab92ee7
commit 6a91827
Show file tree

Hide file tree

Showing 59 changed files with 6,824 additions and 12 deletions.
diff --git a/zapp_default/3.0.0/css/brn.css b/zapp_default/3.0.0/css/brn.css
@@ -0,0 +1,330 @@
+/* Copyright 2016 IPCO 2012 Limited
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+/******* GENERAL ******/
+html, body {
+	overflow: hidden;
+	-webkit-font-smoothing: subpixel-antialiased;
+}
+
+h1, h2 {
+	font-size: 20px;
+	line-height: 20px;
+}
+
+h1, h2, strong, a {
+	font-weight: bold;
+}
+
+a {
+	text-decoration: none;
+	color: black;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	display: none;
+	background-color: black;
+	color: white;
+	padding: 15px;
+}
+
+h2 {
+	color: black;
+	font-size: 30px;
+	margin: 25px 0 0;
+	font-family: 'Mark Office for MC', sans-serif !important;
+}
+
+hr {
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
+	margin: 7px 0;
+	border-style: none;
+	border-top: 1px solid gray;
+	opacity: 0.2;
+}
+
+h3 {
+	border: 2px solid black;
+	line-height: 14px;
+	width: 14px;
+	border-radius: 20px;
+	display: inline-block;
+	text-align: center;
+	position: absolute;
+	font-size: 10px;
+	left: 0px;
+	top: 0px;
+	color: #4b0000;
+}
+
+h4 {
+	display: inline-block;
+	padding-left: 28px;
+	line-height: 30px;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.clrimg {
+	clear: both;
+}
+
+/* Start - styles for Confirm popup   */
+.confirmWindow {
+	text-align: center;
+	position: fixed;
+	padding: 0px;
+	height: 198px;
+	width: 406px;
+	background-color: rgba(251, 251, 251, 1);
+	border: 1px solid #FF6E00;
+	border-radius: 2px;
+	box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.24);
+	top: 50%;
+	left: 50%;
+	margin: -106px 0 0 -196px;
+}
+
+#blanket {
+	background-color: #505050;
+	filter: alpha(opacity = 50); /* IE */
+	opacity: 0.5; /* Safari, Opera */
+	-moz-opacity: 0.50; /* FireFox */
+	z-index: 9002;
+	background-repeat: no-repeat;
+	background-position: center;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+#wrapperDiv {
+	height: 100%;
+	width: 100%;
+	position: fixed;
+	z-index: 9999;
+	left: 0px;
+	display: none;
+}
+
+.confirmDiv {
+	text-align: center;
+	height: 100%;
+}
+
+#confirmDiv>div {
+	margin: 12% 0;
+	width: 80%;
+	display: inline-block;
+}
+
+.confirmDiv h4 {
+	font-family: 'Mark Office for MC';
+	font-size: 20px;
+	color: rgba(48, 48, 48, 1);
+	text-align: center;
+	padding-left: 0px;
+}
+
+.confirmDivCloseBtn, .confirmDivCancelBtn {
+	color: rgba(255, 110, 0, 1);
+	background-color: rgba(251, 251, 251, 1);
+	border: 1px solid rgba(255, 110, 0, 1);
+	border-radius: 4px;
+	margin: 0 6px;
+	cursor: pointer;
+}
+
+.confirmBtn {
+	font-family: 'Mark Office for MC';
+	font-size: 20px;
+	font-weight: 600;
+	text-align: center;
+	top: 50%;
+	bottom:50%;
+	position: relative;
+}
+
+.confirmDivCloseBtn:hover, .confirmDivCancelBtn:hover {
+	text-decoration: none;
+	background-color: rgba(255, 110, 0, 1);
+}
+
+.confirmDivCloseBtn:active, .confirmDivCancelBtn:active {
+	position: relative;
+	background-color: rgba(255, 110, 0, 1);
+	top: 1px;
+}
+
+.orangeButton {
+	padding: 5px 30px;
+}
+
+.orangeButton:hover {
+	background-color: rgba(255, 110, 0, 1);
+	color: #fff;
+}
+
+.orangeButton:active {
+	color: #fff;
+}
+
+/* End - styles for Confirm popup   */
+@media only screen and (min-device-width : 320px) and (max-device-width
+	: 568px) and (orientation: portrait) {
+	hr {
+		margin: 10px 0;
+	}
+	.getCodeImg {
+		vertical-align: middle;
+		margin-left: 0px;
+		width: 14px;
+	}
+	/* Start - styles for Confirm popup   */
+	.confirmWindow {
+		width: 264px !important;
+		height: 180px !important;
+		margin: -140px 0 0 -137px;
+		left: 51%;
+	}
+	#confirmDiv>div {
+		width: 94%;
+		/* padding: 15px 2px 0 2px; */
+		margin: 16% 0;
+	}
+	.confirmDiv h4 {
+		font-size: 16px;
+	}
+	.confirmDivCloseBtn, .confirmDivCancelBtn {
+		font-size: 18px;
+		padding: 2px 30px;
+	}
+	.confirmBtn {
+		font-size: 18px;
+		top: 50%;
+		bottom:50%;
+	}
+
+	/* End - styles for Confirm popup   */
+}
+
+@media only screen and (min-device-width : 768px) and (max-device-width
+	: 1024px) and (orientation : landscape) and
+	(-webkit-min-device-pixel-ratio: 2) {
+	hr {
+		margin: 10px 0;
+	}
+	.getCodeImg {
+		vertical-align: middle;
+		margin-left: 0px;
+		width: 14px;
+	}
+	.text-left a {
+		text-align: center;
+	}
+
+	/* Start - styles for Confirm popup   */
+	.confirmWindow {
+		top: 43% !important;
+		left: 45% !important;
+		width: 380px !important;
+		margin: -88px 0 0 -150px !important;
+	}
+
+	/* End - styles for Confirm popup   */
+}
+
+@media ( min-device-width : 768px) and (max-device-width : 1024px) and
+	not (-webkit-min-device-pixel-ratio: 2) {
+	hr {
+		margin: 10px 0;
+	}
+	.getCodeImg {
+		vertical-align: middle;
+		margin-left: 0px;
+		width: auto;
+	}
+	.text-left a {
+		text-align: center;
+	}
+	.confirmWindow {
+		top: 43% !important;
+		left: 45% !important;
+		width: 380px !important;
+		margin: -120px 0 0 -158px !important;
+	}
+}
+
+/* Samsung Galaxy Tab 3 */
+@media only screen and (min-device-width: 800px) and (max-device-height:
+	1280px) and (orientation:landscape) {
+}
+
+/* 1280 X 800 resolution */
+@media ( min-device-width : 800px) and (max-device-width: 1280px) {
+	.getCodeImg {
+		vertical-align: middle;
+		margin-left: 0px;
+		width: auto;
+	}
+	.text-left a {
+		text-align: center;
+	}
+
+	/* Start - styles for Confirm popup   */
+	.confirmWindow {
+		top: 35%;
+		left: 47%;
+		margin: -92px 0 0 -174px;
+	}
+
+	/* End - styles for Confirm popup   */
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width
+	: 568px) and (orientation: landscape) {
+	hr {
+		margin: 10px 0;
+	}
+	.getCodeImg {
+		vertical-align: middle;
+		margin-left: 0px;
+		width: 14px;
+	}
+}
+
+/* Ipad potrait*/
+@media only screen and (min-device-height: 1024px) and
+	(min-device-width: 768px) and (orientation: portrait) {
+	.confirmWindow {
+		margin: -146px 0 0 -196px;
+	}
+	#confirmDiv>div {
+		margin: 12% 0;
+	}
+}
+
+/* IE specific CSS */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+	.confirmBtn {
+	top:2px;
+	}
+}