Metrolink Ticket Screen

index.html

<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>

metrolink-ticket-screen.markdown

Metrolink Ticket Screen

Metrolink's app redesign - ticket screen with timer

A Pen by Anno H. on CodePen.

License.

script.js

// Not now, I guess ¯\_(ツ)_/¯ 

style.sass

//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