diff options
| -rw-r--r-- | ihatemoney/static/css/main.css | 25 | ||||
| -rw-r--r-- | ihatemoney/templates/home.html | 121 | ||||
| -rw-r--r-- | ihatemoney/templates/layout.html | 4 |
3 files changed, 98 insertions, 52 deletions
diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css index e98b70a..ec8c841 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 4e32995..bac8abe 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> +<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") }}">...{{ _("or create a new one") }}</a> - {% endif %} - </main> + {% 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 90bd032..c00105b 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 %} |