Metrolink's app redesign - ticket screen with timer
Created
November 19, 2018 17:00
-
-
Save ann-dev/31cb78b1fe232cf0f498bdc2eae01400 to your computer and use it in GitHub Desktop.
Metrolink Ticket Screen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<p class="header">MCR Metrolink App</p> | |
<div class="phone-outer"> | |
<div class="phone-inner"> | |
<div class="screen"> | |
<div class="notch"></div> | |
<p class="hour">12:05</p> | |
<i class="wifi fas fa-wifi"></i> | |
<i class="battery fas fa-battery-three-quarters"></i> | |
<div class="top-banner"> | |
<i class="back fas fa-angle-left"></i> | |
<i class="home fas fa-home"></i> | |
<p>My Purchase</p> | |
</div> | |
<div class="ticket-code"> | |
<p class="ticket-code-text">CITE</p> | |
</div> | |
<p class="timer">07 : 05 : 56 : <span class="sec">22</span></p> | |
<p class="timer-text ttxt1">DAYS</p> | |
<p class="timer-text ttxt2">HOURS</p> | |
<p class="timer-text ttxt3">MIN</p> | |
<p class="timer-text ttxt4">SEC</p> | |
<div class="ticket-mini"> | |
<div class="ticket-mini-head"> | |
<p>Adult / 28-day</p> | |
<span>Rochdale Town Centre to City Zone</span> | |
</div> | |
<div class="ticket-mini-body"> | |
<p class="service srv1">SERVICE PROVIDER</p> | |
<p class="service srv2">get me there</p> | |
<p class="service srv1">CUSTOMER'S NAME</p> | |
<p class="service srv2">Merkund</p> | |
<p class="service srv1">DATE OF PURCHASE</p> | |
<p class="service srv2">Mon 29.10.2018 at 06:37</p> | |
</div> | |
<div class="ticket-mini-footer"> | |
<p>Activated on: <span class="foo-txt">Mon 29.10.18 at 06:37</span></p> | |
</div> | |
</div> | |
<p class="terms">When using your ticket or travelcard you must be able to display it on your phone if requested. If for any reason you are unable to do so, such as a broken screen or a dead battery, you will be travelling without a visible valid ticket and risk | |
receiving a standard fare penalty up to £100.</p> | |
<div class="gesture"></div> | |
</div> | |
</div> | |
</div> | |
<p>@Merkund</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Not now, I guess ¯\_(ツ)_/¯ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Colours | |
$cherry: #c51162 | |
$dark-grey: #1e1e1c | |
$grey: #857a66 | |
$yellow: #ffdc42 | |
$white: #fff | |
//Fonts | |
@import url('https://fonts.googleapis.com/css?family=Karla:400,700') | |
$title-text: 'Karla', sans-serif, | |
//CSS Resets | |
html, | |
body | |
align-items: center | |
display: flex | |
height: 100vh | |
justify-content: center | |
margin: auto | |
//MAIN | |
html | |
min-height: 100vh | |
body | |
font-family: $title-text | |
background: $yellow | |
color: $dark-grey | |
.header | |
font-size: 2em | |
padding-top: 30px | |
.wrapper | |
width: 120vmin | |
.wrapper > p | |
text-align: center | |
.phone-outer | |
margin: 0 auto | |
display: flex | |
position: relative | |
height: 765.8px | |
width: 406.25px | |
border-radius: 56px | |
background: $grey | |
box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.4) | |
.phone-inner | |
margin: auto | |
display: flex | |
position: relative | |
height: 755.8px | |
width: 396.25px | |
border-radius: 53px | |
background: $dark-grey | |
.screen | |
margin: auto | |
position: relative | |
display: flex | |
flex-direction: column | |
height: 730.8px | |
width: 371.25px | |
color: $dark-grey | |
background: $white | |
overflow: hidden | |
border-radius: 45px | |
.notch | |
margin: 0 auto | |
position: relative | |
height: 30px | |
width: 200px | |
background: $dark-grey | |
border-radius: 0 0 20px 20px | |
.hour, | |
.wifi, | |
.battery, | |
.back, | |
.home | |
position: absolute | |
margin: 0 | |
.hour | |
left: 30px | |
top: 10px | |
.wifi | |
left: 295px | |
top: 10px | |
.battery | |
left: 325px | |
top: 9px | |
font-size: 1.2em | |
.back | |
left: 20px | |
top: 60px | |
font-size: 1.5em | |
color: $grey | |
.home | |
left: 38px | |
top: 58px | |
font-size: 1.5em | |
color: $grey | |
.top-banner | |
margin-top: 10px | |
width: 100% | |
height: 60px | |
box-shadow: 0 4px 30px -6px #bbb | |
text-align: center | |
background: $yellow | |
.top-banner > p | |
font-size: 1.2em | |
font-weight: 700 | |
color: $grey | |
.ticket-code | |
margin: 0 auto | |
margin-top: 30px | |
width: 320px | |
height: 90px | |
background: #6284FF linear-gradient(64deg, #6284FF 0%, #ff005b 50%, #ffe5f2 100%) | |
text-align: center | |
.ticket-code-text | |
margin: auto | |
color: $white | |
font-size: 5em | |
font-weight: 700 | |
.timer | |
margin: 0 | |
margin-top: 10px | |
font-size: 2.75em | |
text-align: center | |
top: 250px | |
.timer-text | |
margin: 0 | |
position: absolute | |
top: 277px | |
font-size: 0.85em | |
font-weight: 700 | |
.sec | |
color: $grey | |
.ttxt1 | |
left: 45px | |
.ttxt2 | |
left: 120px | |
.ttxt3 | |
left: 210px | |
.ttxt4 | |
left: 293px | |
color: $grey | |
hr | |
width: 85% | |
.ticket-mini | |
position: absolute | |
display: flex | |
flex-direction: column | |
border-radius: 20px | |
top: 320px | |
left: 25px | |
width: 320px | |
box-shadow: 0 4px 35px -6px #bbb | |
.ticket-mini-head | |
background: $yellow | |
position: absolute | |
width: 320px | |
border-radius: 20px 20px 0px 0px | |
padding-bottom: 10px | |
.ticket-mini-head > p, | |
.ticket-mini-footer > p | |
font-size: 1.1em | |
font-weight: 700 | |
color: $grey | |
margin: auto | |
padding: 10px | |
padding-bottom: 0 | |
padding-left: 15px | |
.ticket-mini-head > span | |
font-size: 0.9em | |
color: $grey | |
margin: auto | |
padding: 10px | |
padding-left: 15px | |
.ticket-mini-body | |
position: relative | |
margin: 0 auto | |
margin-top: 70px | |
padding-left: 15px | |
width: 100% | |
.service | |
margin: 0 | |
text-align: left | |
padding-bottom: 2.5px | |
.srv1 | |
font-weight: 700 | |
font-size: 0.92em | |
.srv2 | |
font-size: 0.9em | |
padding-bottom: 10px | |
.ticket-mini-footer | |
background: $yellow | |
width: 320px | |
border-radius: 0px 0px 20px 20px | |
padding-bottom: 15px | |
.foo-txt | |
font-size: 0.95em | |
color: $dark-grey | |
.terms | |
position: absolute | |
bottom: 10px | |
font-size: 0.78em | |
padding: 25px | |
.gesture | |
position: absolute | |
top: 705px | |
left: 60px | |
width: 250px | |
height: 10px | |
border-radius: 10px | |
background: #ddd | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment