From 09d887cde2c2b845b2e4ccbdb64a9044c015a795 Mon Sep 17 00:00:00 2001
From: Brice Maron <brice@bmaron.net>
Date: Tue, 13 Aug 2019 23:34:04 +0200
Subject: [PATCH] add homepage design

---
 ihatemoney/static/css/main.css   |  25 +++++--
 ihatemoney/templates/home.html   | 123 ++++++++++++++++++++-----------
 ihatemoney/templates/layout.html |   4 +-
 3 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index e98b70a6..ec8c8413 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -11,6 +11,9 @@ body {
 
 /* Navbar */
 
+.navbar-brand span {
+  color: #abe128;
+}
 .navbar h1 {
   font-size: 1rem;
   margin: 0;
@@ -37,11 +40,6 @@ body {
 
 #header {
   padding-bottom: 2em;
-  margin-bottom: 1em;
-  background-color: #abe128;
-  background-image: url("../images/gradient.png");
-  background-position: center top;
-  background-repeat: no-repeat;
 }
 
 #header h2 {
@@ -118,11 +116,26 @@ body {
 }
 
 /* Home */
-
+.home-container {
+  background: linear-gradient(150deg, #abe128 0%, #43CA61 100%);
+}
+.home {
+  padding-top: 1em;
+  padding-bottom: 3em;
+}
 #authentication-form legend {
   text-align: right;
 }
 
+.home .card {
+  min-width: 25em;
+  border: 0;
+  border-radius: 0;
+  box-shadow: 0px 0px 10px rgba(83, 88, 93, .40);
+  margin-right: 25px;
+  margin-bottom: 20px;
+  margin-left: 25px;
+}
 /* Other */
 
 #bills {
diff --git a/ihatemoney/templates/home.html b/ihatemoney/templates/home.html
index 4e32995c..bac8abe1 100644
--- a/ihatemoney/templates/home.html
+++ b/ihatemoney/templates/home.html
@@ -1,56 +1,89 @@
 {% extends "layout.html" %}
 
-
 {% block body %}
-    <header id="header" class="row">
-      <div class="col-xs-12 col-sm-5 offset-md-2">
-            <h2>{{ _("Manage your shared <br>expenses, easily") }}</h2>
-            {% if is_demo_project_activated %}
-            <a href="{{ url_for(".demo") }}" class="tryout btn">{{ _("Try out the demo")  }}</a>
-            {% endif %}
-        </div>
-        <div class="col-xs-12 col-sm-4">
-            <p class="additional-content">{{ _("You're sharing a house?") }}<br /> {{ _("Going on holidays with friends?") }}<br /> {{ _("Simply sharing money with others?") }} <br /><strong>{{ _("We can help!") }}</strong></p>
-        </div>
-    </header>
-
-    <main class="row home">
-        <div class="col-xs-12 col-sm-5 col-md-4 offset-md-2">
-            <form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post">
-                <fieldset class="form-group">
-                    <legend>{{ _("Log to an existing project") }}...</legend>
-                    {{ forms.authenticate(auth_form, home=True) }}
-                </fieldset>
-                <div class="controls">
-                    <button class="btn btn-primary" type="submit">{{ _("log in") }}</button>
-                    <a class="password-reminder btn btn-link" href="{{ url_for(".remind_password") }}">{{ _("can't remember your password?") }}</a>
-                </div>
-            </form>
-        </div>
-        <div class="col-xs-12 col-sm-5 col-md-3 offset-sm-1">
-            {% if is_public_project_creation_allowed %}
-            <form id="creation-form" class="form-horizontal" action="{{ url_for(".create_project") }}" method="post">
-                <fieldset class="form-group">
-                    <legend>...{{ _("or create a new one") }}</legend>
-                    {{ forms.create_project(project_form, home=True) }}
-                </fieldset>
-                <div class="controls">
-                    <button class="btn btn-primary" type="submit">{{ _("let's get started") }}</button>
-                </div>
-            </form>
-            {% else %}
-            <a href="{{ url_for(".create_project") }}">...{{ _("or create a new one") }}</a>
-            {% endif %}
-        </main>
+<header id="header" class="row">
+  <div class="col-xs-12 col-sm-5 offset-md-2">
+    <h2>{{ _("Manage your shared <br />expenses, easily") }}</h2>
+    {% if is_demo_project_activated %}
+        <a href="{{ url_for('.demo') }}" class="tryout btn">
+            {{ _("Try out the demo") }}
+        </a>
+    {% endif %}
+  </div>
+  <div class="col-xs-12 col-sm-4">
+    <p class="additional-content">
+      {{ _("You're sharing a house?") }}<br />
+      {{ _("Going on holidays with friends?") }}<br />
+      {{ _("Simply sharing money with others?") }} <br />
+      <strong>{{ _("We can help!") }}</strong>
+    </p>
+  </div>
+</header>
+<main class="row home">
+  <div class="card-deck ml-auto mr-auto">
+    <div class="card">
+      <div class="card-header">
+        {{ _("Log in to an existing project") }}
+      </div>
+      <div class="card-body">
+        <form
+          id="authentication-form"
+          class="form-horizontal"
+          action="{{ url_for('.authenticate') }}"
+          method="post"
+        >
+          <fieldset class="form-group">
+            <legend></legend>
+            {{ forms.authenticate(auth_form, home=True) }}
+          </fieldset>
+          <div class="controls">
+            <button class="btn btn-primary btn-block" type="submit">
+              {{ _("Log in") }}
+            </button>
+            <a
+              class="password-reminder btn btn-link"
+              href="{{ url_for('.remind_password') }}"
+              >{{ _("can't remember your password?") }}</a
+            >
+          </div>
+        </form>
+      </div>
     </div>
+    <div class="card">
+      <div class="card-header">
+        {{ _("Create a new project") }}
+      </div>
+      <div class="card-body">
+        {% if is_public_project_creation_allowed %}
+            <form
+            id="creation-form"
+            class="form-horizontal"
+            action="{{ url_for('.create_project') }}"
+            method="post"
+            >
+            <fieldset class="form-group">
+                {{ forms.create_project(project_form, home=True) }}
+            </fieldset>
+            <div class="controls">
+                <button class="btn btn-primary btn-block" type="submit">
+                {{ _("Create") }}
+                </button>
+            </div>
+            </form>
+        {% else %}
+            <a href="{{ url_for('.create_project') }}">
+                {{ _("Create a new project") }}
+            </a>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</main>
 {% endblock %}
-
 {% block js %}
-
 $('#creation-form #password').tooltip({
-    title: '{{ _("This access code will be sent to your friends. It is stored as-is by the server, so don\\'t reuse a personal password!") }}',
+    title: '{{ _("This access code will be sent to your friends. It is stored as-is by the server, so don\\'t reuse a personal password!")}}',
     trigger: 'focus',
     placement: 'right'
 });
-
 {% endblock %}
diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index 90bd0324..c00105ba 100644
--- a/ihatemoney/templates/layout.html
+++ b/ihatemoney/templates/layout.html
@@ -31,7 +31,7 @@
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <h1><a class="navbar-brand" href="{{ url_for("main.home") }}">#! money?</a></h1>
+    <h1><a class="navbar-brand" href="{{ url_for("main.home") }}"><span>#!</span> money?</a></h1>
 
     <div class="collapse navbar-collapse" id="navbarToggler">
       <ul class="navbar-nav ml-auto mr-auto">
@@ -110,7 +110,7 @@
     </div>
   </nav>
 
-  <div class="container-fluid flex-shrink-0">
+  <div class="container-fluid flex-shrink-0 {% if request.url_rule.endpoint == 'main.home' %} home-container {% endif %}">
   {% block body %}
       <main class="content offset-1 col-10">
       {% block content %}{% endblock %}