brand bootstrap html

ConcealNetwork · Oct 11, 2022 · f16c241 · f16c241
1 parent cb03896
commit f16c241
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 63 deletions.
diff --git a/www/css/index.css b/www/css/index.css
@@ -6,71 +6,73 @@ body {
     -webkit-touch-callout: none;
     -webkit-text-size-adjust: none;
     -webkit-user-select: none;
-	background-color:#E4E4E4;
-    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
-    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
-    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
-    background-image:-webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #A7A7A7),
-        color-stop(0.51, #E4E4E4)
-    );
-    background-attachment:fixed;
+		background-color:#333;
+    /* background-image: url(../images/background.webp);
+    background-attachment:fixed; */
     font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
-    font-size:12px;
     height:100%;
     margin:0px;
     padding:0px;
     text-transform:uppercase;
     width:100%;
-
-    background-color:#32383d;
-    font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
-    font-size:12px;
+		color: #fff;
 }
 
 .app {
-    background: url(../images/cordova.png) no-repeat center top; 
-    position: absolute;             
-    left: 50%;
-    top: 50%;
-    height: 50px;                  
-    width: 225px;                   
-    text-align: center;
-    padding: 180px 0px 0px 0px;     
-    margin: -115px 0px 0px -112px;
-}
-
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;
-        margin:-90px 0px 0px -198px;
-    }
+    position: absolute;
+		/* center vertically and horizontally */
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		max-width: 80vw;
+		min-width: 260px;
 }
 
 h1 {
-    font-size:24px;
+    font-size:26px;
     font-weight:normal;
-    margin:0px;
+    margin-bottom:10px;
     overflow:visible;
     padding:0px;
     text-align:center;
 }
 
+.logo {
+		/* center image */
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		width: 100%;
+		max-width: 240px;
+		background-color: #3f3f3f;
+		border-radius: 45px;
+}
+
+.connectivity {
+	margin: 10px;
+	font-size: 12px;
+	color: #ccc;
+	text-align: center;
+}
+
+a {
+	color:orange;
+	text-decoration: underline;
+}
+
 .event {
-    border-radius:4px;
-    -webkit-border-radius:4px;
+    border-radius:5px;
     color:#FFFFFF;
     font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
+		padding: 2px;
+		text-align: center;
 }
 
 .event.listening {
-    background-color:#333333;
+		color: #999;
+		font-size: 14px;
+    border: 1px solid #555;
+		padding: 4px;
     display:block;
 }
 
@@ -84,13 +86,13 @@ h1 {
     50% { opacity: 0.4; }
     to { opacity: 1.0; }
 }
- 
+
 @-webkit-keyframes fade {
     from { opacity: 1.0; }
     50% { opacity: 0.4; }
     to { opacity: 1.0; }
 }
- 
+
 .blink {
     animation:fade 3000ms infinite;
     -webkit-animation:fade 3000ms infinite;

diff --git a/www/images/background.webp b/www/images/background.webp
diff --git a/www/images/cordova.png b/www/images/cordova.png
diff --git a/www/images/logo.png b/www/images/logo.png
diff --git a/www/index.html b/www/index.html
@@ -2,27 +2,28 @@
 <html>
     <head>
     <!-- Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript. -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://wallet.conceal.network 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
-
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <meta name="format-detection" content="telephone=no">
-        <meta name="msapplication-tap-highlight" content="no">
-        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-        <link rel="stylesheet" type="text/css" href="css/index.css">
-        <title>CordovaHostedApp</title>
+		<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://wallet.conceal.network 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
+		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+		<meta name="format-detection" content="telephone=no">
+		<meta name="msapplication-tap-highlight" content="no">
+		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+		<link rel="stylesheet" type="text/css" href="css/index.css">
+		<title>Conceal Mobile Wallet</title>
     </head>
     <body>
-        Verifying connectivity..
-        <a id="bkpLink" href="https://wallet.conceal.network">wallet.conceal.network</a>
-
-        <div class="app">
-            <h1>Apache Cordova</h1>
-            <div id="deviceready" class="blink">
-                <p class="event listening">Connecting to Device</p>
-                <p class="event received">Device is Ready</p>
-            </div>
-        </div>
-        <script type="text/javascript" src="cordova.js"></script>
-        <script type="text/javascript" src="scripts/index.js"></script>
+			<div class="app">
+				<img src="images/logo.png" alt="Conceal Mobile Wallet" class="logo">
+				<h1>Conceal Wallet</h1>
+				<div id="deviceready" class="blink">
+					<p class="event listening">Connecting to Device...</p>
+					<p class="event received">Device is Ready</p>
+				</div>
+			</div>
+			<div class="connectivity">
+				Verifying connectivity to:
+				<a id="bkpLink" href="https://wallet.conceal.network">Conceal Web Wallet</a>
+			</div>
+			<script type="text/javascript" src="cordova.js"></script>
+			<script type="text/javascript" src="scripts/index.js"></script>
     </body>
 </html>