Changing Login form to look like F1.

7 files changed, 126 insertions, 14 deletions

diff --git a/src/templates/pages/login.html.ftl b/src/templates/pages/login.html.ftl
index f15080d..b88ea74 100644
--- a/src/templates/pages/login.html.ftl
+++ b/src/templates/pages/login.html.ftl
@@ -11,19 +11,31 @@
         </@noticebox>
     </#if>
 
-    <@content>
-        <p>Welcome! You will need to login with your Foursquare Church InFellowship login.</p>
-        <p>
-            If you do not already have an account,
-            <a href="https://pfseawa.infellowship.com/UserLogin/New">create one here</a>.
-            After you receive your confirmation email, come back to this site to begin the
-            assessment.
-        </p>
-        <form action="${dynamicRoot}/account/authenticate?redirect=${redirect!""}" method="post">
-        <p><label for="emailField">Email:</label> <input id="emailField" type="text" name="email" /></p>
-        <p><label for="passwordField">Password:</label> <input id="passwordField" type="password" name="password" /></p>
-        <p><input type="submit" value="Login" /></p>
-        </form>
-    </@content>
+    <div id="content">
+        <div id="foursquarelogin">
+            <div><img src="${staticRoot}/images/foursquarechurchlogin.png" alt="Puyallup Foursquare" /></div>
+            <div class="inside">
+                <div class="left">
+                    <form action="${dynamicRoot}/account/authenticate?redirect=${redirect!""}" method="post">
+                        <p>Login using your Foursquare Community Groups / Online Giving login.</p>
+                        <p>
+                            <div><label for="emailField">Login</label></div>
+                            <div><input id="emailField" type="text" name="email" tabindex="1" /></div>
+                        </p>
+                        <p>
+                            <div><label for="passwordField">Password &mdash; <a href="https://pfseawa.infellowship.com/UserLogin/ForgotPassword" target="_blank">forgot?</a></label></div>
+                            <div><input id="passwordField" type="password" name="password" tabindex="2" /></div>
+                        </p>
+                        <p class="submit"><input type="submit" value="Sign in" tabindex="3" /></p>
+                        <p id="noaccount">Don't have an account? <a href="https://pfseawa.infellowship.com/UserLogin/New">Sign up!</a></p>
+                    </form>
+                </div>
+                <div class="right">
+                    <div><img src="${staticRoot}/images/acts242.png" alt="Acts 2:42" /></div>
+                    <div><img src="${staticRoot}/images/leadershipdev.png" alt="Leadership Development" /></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </@commonpage>
 
diff --git a/web/images/acts242.png b/web/images/acts242.png
new file mode 100644
index 0000000..358f3f7
--- /dev/null
+++ b/web/images/acts242.png
diff --git a/web/images/faux_right_column.png b/web/images/faux_right_column.png
new file mode 100644
index 0000000..d87e901
--- /dev/null
+++ b/web/images/faux_right_column.png
diff --git a/web/images/foursquarechurchlogin.png b/web/images/foursquarechurchlogin.png
new file mode 100644
index 0000000..0d5f861
--- /dev/null
+++ b/web/images/foursquarechurchlogin.png
diff --git a/web/images/leadershipdev.png b/web/images/leadershipdev.png
new file mode 100644
index 0000000..d08a29a
--- /dev/null
+++ b/web/images/leadershipdev.png
diff --git a/web/images/loginbg.png b/web/images/loginbg.png
new file mode 100644
index 0000000..79a791f
--- /dev/null
+++ b/web/images/loginbg.png
diff --git a/web/style.css b/web/style.css
index a55377a..83bdee7 100644
--- a/web/style.css
+++ b/web/style.css
@@ -542,3 +542,103 @@ footer a:hover {
     left: 126px;
     cursor: pointer;
 }
+
+#foursquarelogin {
+    background: url('/images/loginbg.png') repeat #666;
+    padding: 1em;
+    color: black;
+    font: 12px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
+    text-align: left;
+    min-height: 380px;
+    width: 760px;
+    margin: 0 auto 0 auto;
+}
+
+#foursquarelogin .inside {
+    background: url('/images/faux_right_column.png') repeat-y 470px 0 white;
+    width: 750px;
+    min-height: 350px;
+    margin: 0 auto 0 auto;
+    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
+}
+
+#foursquarelogin .left {
+    margin: 20px;
+    padding: 20px;
+    background: #f3f3f3;
+    float: left;
+    width: 400px;
+    height: 270px;
+    -moz-box-shadow: 0 -1px 1px #fff;
+    -webkit-box-shadow: 0 -1px 1px #fff;
+    box-shadow: 0 -1px 1px #fff;
+    border: 1px solid;
+    border-color: #eee #ddd #ccc;
+}
+
+#foursquarelogin label a {
+    color: #888;
+}
+
+#foursquarelogin .right {
+    float: left;
+    width: 260px;
+    margin-top: 20px;
+}
+
+#foursquarelogin .submit {
+    float: left;
+}
+
+#foursquarelogin #noaccount {
+    text-align: right;
+}
+
+#foursquarelogin label {
+    width: 100%;
+    display: block;
+    text-align: left;
+    font-size: 20px;
+}
+
+#foursquarelogin input {
+    -webkit-appearance: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: #fff;
+    border: 1px solid;
+    border-color: #848484 #c1c1c1 #e1e1e1;
+    color: #000;
+    outline: 0;
+    padding: 2px 3px;
+    font-size: 20px;
+    font-family: Arial, sans-serif;
+    height: 1.8em;
+    width: 100%;
+}
+
+#foursquarelogin input[type="submit"] {
+    -webkit-appearance: none;
+    -moz-border-radius: 25px;
+    -webkit-border-radius: 25px;
+    border-radius: 25px;
+    background: #ddd url(../images/button.png) repeat-x;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
+    background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
+    border: 1px solid;
+    border-color: #ddd #bbb #999;
+    cursor: pointer;
+    color: #333;
+    font: bold 20px/1.2 Arial, sans-serif;
+    outline: 0;
+    overflow: visible;
+    padding: 3px 10px 4px;
+    text-shadow: #fff 0 1px 1px;
+    text-decoration: none;
+}