From 96e98ad35a54975d84b0eafe2ec9c98857485d32 Mon Sep 17 00:00:00 2001
From: Lucas Legname <lucas.legname@gmail.com>
Date: Thu, 3 Apr 2014 21:02:23 +0200
Subject: [PATCH] First page style update.

---
 src/index.html    | 33 +++++++++++++++++++++++++++++++++
 src/main.css      | 19 ++++++++++++++++---
 src/ninja.misc.js |  2 ++
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 1efd4a8..7989c74 100644
--- a/src/index.html
+++ b/src/index.html
@@ -149,10 +149,43 @@
 		</div>
 		
 		<div id="generate">
+
+
 			<span id="generatelabelbitcoinaddress">Generating new Address...</span><br />
 			<span id="generatelabelmovemouse">MOVE your mouse around to add some extra randomness... </span><span id="mousemovelimit"></span><br />
 			<span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br />
 			<div id="seedpooldisplay"></div>
+
+			<hr class="halfHR" />
+
+			<div class="frontPageText">
+
+				<div class="firstHalfSingleSafety">
+
+					<h3>Step 0. Follow the security checklist recommendation</h3>
+		            <p>
+		              First step is to <strong>download</strong> this website from <a href="https://github.com/MichaelMure/PaperWallet/archive/master.zip">Github</a> and open the index.html file directly from your computer. It's just too easy to sneak some evil code in the 6000+ lines of javascript to leak your private key, and you don't want to see your fund stolen. Code version control make it much easier to cross-check what actually run. For extra security, <strong>unplug your Internet access</strong> while generating your wallet.
+		            </p>
+
+		            <div class="securityChecklist">
+							<b>Security Checklist :</b>
+
+							<ul>
+							<li id="seedEnvSecurityCheck"></li>
+
+							<li id="seedBrowserSecurityCheck"></li>
+
+							<li>
+								Are you using a secure operating system guaranteed to be free of spyware and viruses, for example, an Ubuntu LiveCD? 
+							</li>
+							</ul>
+						</div>
+	              
+	            </div>
+	            <div class="secondHalfSingleSafety">
+	            	<img class="seedFrontPageImage" src="images/overview.png" />
+				</div>
+			</div>
 		</div>
 
 		<div id="wallets">
diff --git a/src/main.css b/src/main.css
index 71d173b..49d9843 100644
--- a/src/main.css
+++ b/src/main.css
@@ -28,9 +28,19 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
 #seedpoolarea { display: none; }
 #seedpooldisplay {  font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; }
 .seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; }
-#generate { font-family: monospace; font-size: 1.25em; height: 305px; text-align: left; position: relative; padding: 5px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
+#generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
 #generate span { padding: 5px 5px 0 5px; }
 #generatekeyinput { position: relative; z-index: 20; }
+
+#generatelabelbitcoinaddress, #generatelabelmovemouse, #generatelabelkeypress {
+	font-size: 16px; font-family: monospace;
+}
+#mousemovelimit {
+	font-size: : 18px; font-family: monospace;
+}
+.frontPageText { position: relative; }
+.halfHR { width: 640px; }
+
 #keyarea { height: 250px; }
 #keyarea .pubaddress { float: none; display: block; padding: 0; height: auto; }
 #keyarea .label { text-decoration: none; }
@@ -68,14 +78,16 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
     right: 0px;
     width: 50%;
     padding: 20px;
+    text-align: center;
  }
 
-.frontPageImage {
-	width: 100%;
+.frontPageImage, .seedFrontPageImage {
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	border-radius: 10px;
 }
+.frontPageImage { width: 100%; }
+.seedFrontPageImage { max-height: 340px; }
 
 .securityChecklist {
 	background-color: #FFE6C9;
@@ -84,6 +96,7 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
     -webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	border-radius: 10px;
+	text-align: left;
 }
 
 .securityChecklist ul { padding: 5px 0 0 20px; }
diff --git a/src/ninja.misc.js b/src/ninja.misc.js
index 6b66bb9..5ddc685 100644
--- a/src/ninja.misc.js
+++ b/src/ninja.misc.js
@@ -211,6 +211,7 @@ ninja.envSecurityCheck = function() {
 		default:
 	} 
 	document.getElementById('envSecurityCheck').innerHTML = innerHTML;
+	document.getElementById('seedEnvSecurityCheck').innerHTML = innerHTML;
 };
 
 ninja.browserSecurityCheck = function() {
@@ -221,6 +222,7 @@ ninja.browserSecurityCheck = function() {
 		innerHTML = '<span style="color: #990000;">Your browser does NOT support window.crypto.getRandomValues(), which is important for generating the most secure random numbers possible. Please use a more modern browser.</span>';
 	} 
 	document.getElementById('browserSecurityCheck').innerHTML = innerHTML;
+	document.getElementById('seedBrowserSecurityCheck').innerHTML = innerHTML;
 }
 
 ninja.getQueryString = function () {