diff --git a/static/css/stylesheet.css b/static/css/stylesheet.css index 93f0686c52c567e9efc4c4e89420483919bf76a5..e2cb5de509bb76987f548b35e461f359d56033dc 100644 --- a/static/css/stylesheet.css +++ b/static/css/stylesheet.css @@ -253,9 +253,10 @@ body { .foli-card { border: 1px solid #FF9900; } -.foli-card .card-header { - background-color: #FF9900; -} + .foli-card .card-header { + background-color: #FF9900; + } + th .text-muted { font-size: 14px; font-style: normal; @@ -270,6 +271,19 @@ th .text-muted { margin-bottom: 30px; } +/* F�li application page*/ +.app-card { + border: 1px solid #FF9900; +} + .app-card .card-header { + background-color: #FF9900; + } + +.app-image { + margin-bottom: 25px; + width: 100%; +} + /* larger screen layout */ @media (min-width: 768px) { .header { min-height: 33.63rem; /* 33.63rem = 538.5px, font-size 16 (half of the current image height) */ } diff --git a/static/img/application_placeholder.png b/static/img/application_placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..0445f3d662671522ce0d7ef8242fefa5373619a3 Binary files /dev/null and b/static/img/application_placeholder.png differ diff --git a/static/img/mobiililippu_1.png b/static/img/mobiililippu_1.png new file mode 100644 index 0000000000000000000000000000000000000000..e07d28464be406c6d00bf075b176458e72bf65a2 Binary files /dev/null and b/static/img/mobiililippu_1.png differ diff --git a/static/img/mobiililippu_2.png b/static/img/mobiililippu_2.png new file mode 100644 index 0000000000000000000000000000000000000000..d7ca148a90eee26af9e4c9834ec4d8c2c5a1ef0c Binary files /dev/null and b/static/img/mobiililippu_2.png differ diff --git a/static/img/mobiililippu_3.png b/static/img/mobiililippu_3.png new file mode 100644 index 0000000000000000000000000000000000000000..3904ff1a15f2b39890a081a63ce466d0b06408a1 Binary files /dev/null and b/static/img/mobiililippu_3.png differ diff --git a/static/img/mobiililippu_4.png b/static/img/mobiililippu_4.png new file mode 100644 index 0000000000000000000000000000000000000000..9c7883b645e5518d34723e1249269fc6b0e5c039 Binary files /dev/null and b/static/img/mobiililippu_4.png differ diff --git a/templates/foliApp.html b/templates/foliApp.html new file mode 100644 index 0000000000000000000000000000000000000000..e30829f2f26fa07c29dcbc93994127a04e910842 --- /dev/null +++ b/templates/foliApp.html @@ -0,0 +1,33 @@ +{% extends 'internal/base.html' %} + +{% set title = 'Foli-sovellus' %} +{% set sticky_banners = true %} +{% set localized = false %} +{% set content_lang = 'fi' %} + +{% block content %} + +<div class="container"> + <h1>Foli - Turun seudun joukkoliikenne</h1> + <h2>Mobiilisovellus</h2> + <div class="card app-card"> + <div class="card-header"> + <h3 class="card-title">Bussilippu kannykalla</h3> + </div> + <div class="row" style="margin-top: 25px;"> + <div class="col-sm-5"> + <img class="app-image" src="{{ util.static_url('img/mobiililippu_1.png') }}"> + </div> + <div class="col-sm-7"> + <img class="app-image" src="{{ util.static_url('img/mobiililippu_2.png') }}"> + <img class="app-image" src="{{ util.static_url('img/mobiililippu_3.png') }}"> + <img class="app-image" src="{{ util.static_url('img/mobiililippu_4.png') }}"> + </div> + </div> + <div class="card-footer"> + <p>Mobiililippusovelluksen voi ladata uusimpiin Windows, Apple ja Android -puhelimiin.</p> + </div> + </div> +</div> + +{% endblock content %} diff --git a/templates/index.html b/templates/index.html index bed79aad41575a63b0bff5550fe5b3f5de0d57d1..e80a8e295da6b1b301fdd1ec45350567cbe79177 100644 --- a/templates/index.html +++ b/templates/index.html @@ -34,7 +34,7 @@ </div> </div> </div> - <div class="row"> + <div class="row mb-4"> <div class="col-md-5 offset-md-1 mb-4 mb-md-0"> <!-- this particular button variation has some responsiveness issues --> <div class="card menu-card text-center bg-white border-foli text-foli box-shadow"> @@ -57,4 +57,17 @@ </div> </div> </div> + <div class="row mb-4"> + <div class="col-md-5 offset-md-1 mb-4 mb-md-0"> + <div class="card menu-card bg-foli text-center box-shadow"> + <img class="card-img-top" src="{{ util.static_url('img/application_placeholder.png') }}" alt="{{ _("Card Image") }}"> + <div class="card-body"> + <a role="button" href="{{ util.view_url('foliApp') }}" class="btn btn-lg btn-primary">{{ _("Föli application") }}</a> + </div> + </div> + </div> + <div class="col-md-5"> + <!--Empty spot for next menu card--> + </div> + </div> {% endblock content %}