mirror of
https://github.com/spiral-project/ihatemoney.git
synced 2025-05-02 03:02:23 +02:00
add homepage design
This commit is contained in:
Brice Maron
parent
5b2fa36efa
commit
09d887cde2
3 changed files with 99 additions and 53 deletions
|
|
@ -11,6 +11,9 @@ body {
|
||||||
|
|
||||||
/* Navbar */
|
/* Navbar */
|
||||||
|
|
||||||
|
.navbar-brand span {
|
||||||
|
color: #abe128;
|
||||||
|
}
|
||||||
.navbar h1 {
|
.navbar h1 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -37,11 +40,6 @@ body {
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
padding-bottom: 2em;
|
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 {
|
#header h2 {
|
||||||
|
|
@ -118,11 +116,26 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Home */
|
/* Home */
|
||||||
|
.home-container {
|
||||||
|
background: linear-gradient(150deg, #abe128 0%, #43CA61 100%);
|
||||||
|
}
|
||||||
|
.home {
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 3em;
|
||||||
|
}
|
||||||
#authentication-form legend {
|
#authentication-form legend {
|
||||||
text-align: right;
|
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 */
|
/* Other */
|
||||||
|
|
||||||
#bills {
|
#bills {
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,89 @@
|
||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
|
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<header id="header" class="row">
|
<header id="header" class="row">
|
||||||
<div class="col-xs-12 col-sm-5 offset-md-2">
|
<div class="col-xs-12 col-sm-5 offset-md-2">
|
||||||
<h2>{{ _("Manage your shared <br>expenses, easily") }}</h2>
|
<h2>{{ _("Manage your shared <br />expenses, easily") }}</h2>
|
||||||
{% if is_demo_project_activated %}
|
{% if is_demo_project_activated %}
|
||||||
<a href="{{ url_for(".demo") }}" class="tryout btn">{{ _("Try out the demo") }}</a>
|
<a href="{{ url_for('.demo') }}" class="tryout btn">
|
||||||
{% endif %}
|
{{ _("Try out the demo") }}
|
||||||
</div>
|
</a>
|
||||||
<div class="col-xs-12 col-sm-4">
|
{% endif %}
|
||||||
<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>
|
||||||
</div>
|
<div class="col-xs-12 col-sm-4">
|
||||||
</header>
|
<p class="additional-content">
|
||||||
|
{{ _("You're sharing a house?") }}<br />
|
||||||
<main class="row home">
|
{{ _("Going on holidays with friends?") }}<br />
|
||||||
<div class="col-xs-12 col-sm-5 col-md-4 offset-md-2">
|
{{ _("Simply sharing money with others?") }} <br />
|
||||||
<form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post">
|
<strong>{{ _("We can help!") }}</strong>
|
||||||
<fieldset class="form-group">
|
</p>
|
||||||
<legend>{{ _("Log to an existing project") }}...</legend>
|
</div>
|
||||||
{{ forms.authenticate(auth_form, home=True) }}
|
</header>
|
||||||
</fieldset>
|
<main class="row home">
|
||||||
<div class="controls">
|
<div class="card-deck ml-auto mr-auto">
|
||||||
<button class="btn btn-primary" type="submit">{{ _("log in") }}</button>
|
<div class="card">
|
||||||
<a class="password-reminder btn btn-link" href="{{ url_for(".remind_password") }}">{{ _("can't remember your password?") }}</a>
|
<div class="card-header">
|
||||||
</div>
|
{{ _("Log in to an existing project") }}
|
||||||
</form>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
<div class="col-xs-12 col-sm-5 col-md-3 offset-sm-1">
|
<form
|
||||||
{% if is_public_project_creation_allowed %}
|
id="authentication-form"
|
||||||
<form id="creation-form" class="form-horizontal" action="{{ url_for(".create_project") }}" method="post">
|
class="form-horizontal"
|
||||||
<fieldset class="form-group">
|
action="{{ url_for('.authenticate') }}"
|
||||||
<legend>...{{ _("or create a new one") }}</legend>
|
method="post"
|
||||||
{{ forms.create_project(project_form, home=True) }}
|
>
|
||||||
</fieldset>
|
<fieldset class="form-group">
|
||||||
<div class="controls">
|
<legend></legend>
|
||||||
<button class="btn btn-primary" type="submit">{{ _("let's get started") }}</button>
|
{{ forms.authenticate(auth_form, home=True) }}
|
||||||
</div>
|
</fieldset>
|
||||||
</form>
|
<div class="controls">
|
||||||
{% else %}
|
<button class="btn btn-primary btn-block" type="submit">
|
||||||
<a href="{{ url_for(".create_project") }}">...{{ _("or create a new one") }}</a>
|
{{ _("Log in") }}
|
||||||
{% endif %}
|
</button>
|
||||||
</main>
|
<a
|
||||||
|
class="password-reminder btn btn-link"
|
||||||
|
href="{{ url_for('.remind_password') }}"
|
||||||
|
>{{ _("can't remember your password?") }}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
|
|
||||||
$('#creation-form #password').tooltip({
|
$('#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',
|
trigger: 'focus',
|
||||||
placement: 'right'
|
placement: 'right'
|
||||||
});
|
});
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</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">
|
<div class="collapse navbar-collapse" id="navbarToggler">
|
||||||
<ul class="navbar-nav ml-auto mr-auto">
|
<ul class="navbar-nav ml-auto mr-auto">
|
||||||
|
|
@ -110,7 +110,7 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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 %}
|
{% block body %}
|
||||||
<main class="content offset-1 col-10">
|
<main class="content offset-1 col-10">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue