aboutsummaryrefslogtreecommitdiff
path: root/ihatemoney
diff options
context:
space:
mode:
Diffstat (limited to 'ihatemoney')
-rw-r--r--ihatemoney/static/css/main.css25
-rw-r--r--ihatemoney/templates/home.html121
-rw-r--r--ihatemoney/templates/layout.html4
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 %}