From ae87affcbe9f2753d68e4e9826eedec102d633d2 Mon Sep 17 00:00:00 2001
From: Aldo Cortesi <aldo@nullcube.com>
Date: Tue, 28 Jan 2014 09:44:33 +1300
Subject: [PATCH] Nicer layout for cert install options.

---
 libmproxy/static/mitmproxy.css |  5 +++++
 libmproxy/templates/index.html | 31 +++++++++++++++++++------------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/libmproxy/static/mitmproxy.css b/libmproxy/static/mitmproxy.css
index 09bcb5f78..b390976a1 100644
--- a/libmproxy/static/mitmproxy.css
+++ b/libmproxy/static/mitmproxy.css
@@ -1,4 +1,9 @@
 
+#certbank div {
+    text-align: center;
+
+
+}
 
 .fronttable {
 }
diff --git a/libmproxy/templates/index.html b/libmproxy/templates/index.html
index d46d98549..50cfd5dbd 100644
--- a/libmproxy/templates/index.html
+++ b/libmproxy/templates/index.html
@@ -1,19 +1,26 @@
 {% extends "frame.html" %}
 {% block body %}  
 
-<div class="masthead">
-    <div class="container">
-
-        <p>
-            <a href="/cert/pem"><i class="fa fa-apple fa-5x"></i></a>
-        </p>
-        
-        <p><a href="/cert/p12"><i class="fa fa-windows fa-5x"></i></a></p>
-
-        <p><a href="/cert/pem"><i class="fa fa-android fa-5x"></i></a></p>
-
+<center>
+<h2> Click to install the mitmproxy certificate: </h2>
+</center>
+<div id="certbank" class="row">
+    <div class="col-md-3">
+        <a href="/cert/pem"><i class="fa fa-apple fa-5x"></i></a>
+        <p>Apple</p>
+    </div>
+    <div class="col-md-3">
+        <a href="/cert/p12"><i class="fa fa-windows fa-5x"></i></a>
+        <p>Windows</p>
+    </div>
+    <div class="col-md-3">
+        <a href="/cert/pem"><i class="fa fa-android fa-5x"></i></a>
+        <p>Android</p>
+    </div>
+    <div class="col-md-3">
+        <a href="/cert/pem"><i class="fa fa-asterisk fa-5x"></i></a>
+        <p>Other</p>
     </div>
 </div>
 
-
 {% endblock %}