Last active
May 19, 2017 19:04
-
-
Save jonathan-nwosu/06090b1bd54b4e95bbf87ed6c7e637ab to your computer and use it in GitHub Desktop.
Monzo Bank challenge - API implementation PHP/JSON
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> | |
| <title>Monzo Dashboard</title> | |
| <!-- Add to homescreen for Chrome on Android --> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <link rel="icon" sizes="192x192" href="images/monzo_logo.png"> | |
| <!-- Add to homescreen for Safari on iOS --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <meta name="apple-mobile-web-app-title" content="Material Design Lite"> | |
| <link rel="apple-touch-icon-precomposed" href="images/monzo_logo.png"> | |
| <!-- Tile icon for Win8 (144x144 + tile color) --> | |
| <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> | |
| <meta name="msapplication-TileColor" content="#3372DF"> | |
| <link rel="shortcut icon" href="images/monzo_logo.png"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> | |
| <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600"> | |
| <div class="mdl-layout__header-row"> | |
| <span class="mdl-layout-title">Monzo Dashboard</span> | |
| <div class="mdl-layout-spacer"></div> | |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> | |
| <label class="mdl-button mdl-js-button mdl-button--icon" for="search"> | |
| <i class="material-icons">search</i> | |
| </label> | |
| <div class="mdl-textfield__expandable-holder"> | |
| <input class="mdl-textfield__input" type="text" id="search"> | |
| <label class="mdl-textfield__label" for="search">Enter your query...</label> | |
| </div> | |
| </div> | |
| <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn"> | |
| <i class="material-icons">more_vert</i> | |
| </button> | |
| <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn"> | |
| <li class="mdl-menu__item">About</li> | |
| <li class="mdl-menu__item">Contact</li> | |
| <li class="mdl-menu__item">Legal information</li> | |
| </ul> | |
| </div> | |
| </header> | |
| <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50"> | |
| <header class="demo-drawer-header"> | |
| <img src="images/monzo_logo.png" class="demo-avatar"> | |
| <div class="demo-avatar-dropdown"> | |
| <span>example@emonzo.com</span> | |
| <div class="mdl-layout-spacer"></div> | |
| <button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> | |
| <i class="material-icons" role="presentation">arrow_drop_down</i> | |
| <span class="visuallyhidden">Accounts</span> | |
| </button> | |
| <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn"> | |
| <li class="mdl-menu__item">agent@monzo.com</li> | |
| <li class="mdl-menu__item">info@monzo.com</li> | |
| <li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li> | |
| </ul> | |
| </div> | |
| </header> | |
| <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800"> | |
| <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">people</i>User Data</a> | |
| <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">shopping_cart</i>Transactions</a> | |
| <div class="mdl-layout-spacer"></div> | |
| <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span></a> | |
| </nav> | |
| </div> | |
| <main class="mdl-layout__content mdl-color--grey-100"> | |
| <?php | |
| //error_reporting(0); | |
| //getting json data and decoding it | |
| $api_link = file_get_contents("https://api.s101.nonprod-ffs.io/ops-engineer/profile"); | |
| $encode_api_link = json_decode($api_link); | |
| $user_area = $encode_api_link->address->administrative_area; | |
| $user_country = $encode_api_link->address->country; | |
| $user_address = $encode_api_link->address->formatted_address; | |
| $user_dob = $encode_api_link->date_of_birth; | |
| $user_email = $encode_api_link->email; | |
| $user_name = $encode_api_link->name; | |
| $user_phone = $encode_api_link->phone_number; | |
| $user_id = $encode_api_link->user_id; | |
| $user_number = $encode_api_link->user_number; | |
| //printing out all relevant results from data | |
| echo "<div class='demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid'>"; | |
| echo "<div class='mdl-card__supporting-text mdl-color-text--grey-650'><h6>"; | |
| echo 'User area: '.$user_area.'<br>'; | |
| echo 'User Country: '.$user_country.'<br>'; | |
| echo 'User Adress: '.$user_address.'<br>'; | |
| echo 'User DOB:'.$user_dob.'<br>'; | |
| echo 'User Email: '. $user_email.'<br>'; | |
| echo 'User Name: '.$user_name.'<br>'; | |
| echo 'User phone:'.$user_phone.'<br>'; | |
| echo 'user id: ' .$user_id.'<br>'; | |
| echo 'User number:'.$user_number.'<br>'; | |
| echo "</h6></div></div>"; | |
| ?> | |
| </main> | |
| </div> | |
| <script src="https://code.getmdl.io/1.2.1/material.min.js"></script> | |
| </body> | |
| </html> |
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
| html, body { | |
| font-family: 'Roboto', 'Helvetica', sans-serif; | |
| } | |
| .demo-avatar { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 24px; | |
| } | |
| .demo-layout .mdl-layout__header .mdl-layout__drawer-button { | |
| color: rgba(0, 0, 0, 0.54); | |
| } | |
| .mdl-layout__drawer .avatar { | |
| margin-bottom: 16px; | |
| } | |
| .demo-drawer { | |
| border: none; | |
| } | |
| /* iOS Safari specific workaround */ | |
| .demo-drawer .mdl-menu__container { | |
| z-index: -1; | |
| } | |
| .demo-drawer .demo-navigation { | |
| z-index: -2; | |
| } | |
| /* END iOS Safari specific workaround */ | |
| .demo-drawer .mdl-menu .mdl-menu__item { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .demo-drawer-header { | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| padding: 16px; | |
| height: 151px; | |
| } | |
| .demo-avatar-dropdown { | |
| display: flex; | |
| position: relative; | |
| flex-direction: row; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .demo-navigation { | |
| flex-grow: 1; | |
| } | |
| .demo-layout .demo-navigation .mdl-navigation__link { | |
| display: flex !important; | |
| flex-direction: row; | |
| align-items: center; | |
| color: rgba(255, 255, 255, 0.56); | |
| font-weight: 500; | |
| } | |
| .demo-layout .demo-navigation .mdl-navigation__link:hover { | |
| background-color: #00BCD4; | |
| color: #37474F; | |
| } | |
| .demo-navigation .mdl-navigation__link .material-icons { | |
| font-size: 24px; | |
| color: rgba(255, 255, 255, 0.56); | |
| margin-right: 32px; | |
| } | |
| .demo-content { | |
| max-width: 1080px; | |
| } | |
| .demo-charts { | |
| align-items: center; | |
| } | |
| .demo-chart:nth-child(1) { | |
| color: #ACEC00; | |
| } | |
| .demo-chart:nth-child(2) { | |
| color: #00BBD6; | |
| } | |
| .demo-chart:nth-child(3) { | |
| color: #BA65C9; | |
| } | |
| .demo-chart:nth-child(4) { | |
| color: #EF3C79; | |
| } | |
| .demo-graphs { | |
| padding: 16px 32px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| /* TODO: Find a proper solution to have the graphs | |
| * not float around outside their container in IE10/11. | |
| * Using a browserhacks.com solution for now. | |
| */ | |
| _:-ms-input-placeholder, :root .demo-graphs { | |
| min-height: 664px; | |
| } | |
| _:-ms-input-placeholder, :root .demo-graph { | |
| max-height: 300px; | |
| } | |
| /* TODO end */ | |
| .demo-graph:nth-child(1) { | |
| color: #00b9d8; | |
| } | |
| .demo-graph:nth-child(2) { | |
| color: #d9006e; | |
| } | |
| .demo-cards { | |
| align-items: flex-start; | |
| align-content: flex-start; | |
| } | |
| .demo-cards .demo-separator { | |
| height: 32px; | |
| } | |
| .demo-cards .mdl-card__title.mdl-card__title { | |
| color: white; | |
| font-size: 24px; | |
| font-weight: 400; | |
| } | |
| .demo-cards ul { | |
| padding: 0; | |
| } | |
| .demo-cards h3 { | |
| font-size: 1em; | |
| } | |
| .demo-updates .mdl-card__title { | |
| min-height: 200px; | |
| background-image: url('images/dog.png'); | |
| background-position: 90% 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .demo-cards .mdl-card__actions a { | |
| color: #00BCD4; | |
| text-decoration: none; | |
| } | |
| .demo-options h3 { | |
| margin: 0; | |
| } | |
| .demo-options .mdl-checkbox__box-outline { | |
| border-color: rgba(255, 255, 255, 0.89); | |
| } | |
| .demo-options ul { | |
| margin: 0; | |
| list-style-type: none; | |
| } | |
| .demo-options li { | |
| margin: 4px 0; | |
| } | |
| .demo-options .material-icons { | |
| color: rgba(255, 255, 255, 0.89); | |
| } | |
| .demo-options .mdl-card__actions { | |
| height: 64px; | |
| display: flex; | |
| box-sizing: border-box; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment