diff --git a/assets/css/login.css b/assets/css/login.css new file mode 100644 index 0000000..83f8f38 --- /dev/null +++ b/assets/css/login.css @@ -0,0 +1,117 @@ +.appinfodiv{ + background-color: #DDDDDD; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.formdiv{ + background-color: #AAAAAA; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +@import url(http://fonts.googleapis.com/css?family=Roboto); + +/****** LOGIN MODAL ******/ +.loginmodal-container { + padding: 30px; + max-width: 350px; + width: 100% !important; + background-color: #F7F7F7; + margin: 0 auto; + border-radius: 2px; + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); + overflow: hidden; + font-family: roboto; +} + +.loginmodal-container h1 { + text-align: center; + font-size: 1.8em; + font-family: roboto; +} + +.loginmodal-container input[type=submit] { + width: 100%; + display: block; + margin-bottom: 10px; + position: relative; +} + +.loginmodal-container input[type=text], input[type=password] { + height: 44px; + font-size: 16px; + width: 100%; + margin-bottom: 10px; + -webkit-appearance: none; + background: #fff; + border: 1px solid #d9d9d9; + border-top: 1px solid #c0c0c0; + padding: 0 8px; + box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.loginmodal-container input[type=text]:hover, input[type=password]:hover { + border: 1px solid #b9b9b9; + border-top: 1px solid #a0a0a0; + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); +} + +.loginmodal { + text-align: center; + font-size: 14px; + font-family: 'Arial', sans-serif; + font-weight: 700; + height: 36px; + padding: 0 8px; +} + +.loginmodal-submit { + border: 0px; + color: #fff; + text-shadow: 0 1px rgba(0,0,0,0.1); + background-color: #4d90fe; + padding: 17px 0px; + font-family: roboto; + font-size: 14px; +} + +.loginmodal-submit:hover { + border: 0px; + text-shadow: 0 1px rgba(0,0,0,0.3); + background-color: #357ae8; +} + +.loginmodal-container a { + text-decoration: none; + color: #666; + font-weight: 400; + text-align: center; + display: inline-block; + opacity: 0.6; + transition: opacity ease 0.5s; +} + +body{ + color: #ff6000; +} + +html, body{ + height: 100%; +} + +.logo{ + display: block; +} + +.full{ + width: 100%; + height: 100%; +} diff --git a/src/Application/Login.php b/src/Application/Login.php index 5fd620a..b2eadbe 100644 --- a/src/Application/Login.php +++ b/src/Application/Login.php @@ -16,14 +16,21 @@ namespace Inforbank\Application; use \Slim\App; use Inforbank\Application\Helper\Redirect; +use Inforbank\Proxy; class Login { public function __construct(App $app) { $app->get('/login', function ($request, $response, $args) { + $query = $request->getQueryParams(); + $error = isset($query['error']); + // Render index view - return $this->renderer->render($response, 'login.phtml', $args); + return $this->renderer->render($response, 'login.phtml', array( + 'base' => Proxy::$route->getBaseUrl() . "/", + 'error' => $error + )); }); $app->post('/login', function ($request, $response, $args) { diff --git a/templates/login.phtml b/templates/login.phtml index 6b87226..34ee8c0 100644 --- a/templates/login.phtml +++ b/templates/login.phtml @@ -2,73 +2,38 @@ - InforBank - Inloggen - + Inforbank + - +
-
- -

Welkom bij de InforBank

- Bij InforBank krijg je zelfs 10% rente op betaalrekeningen.

- Je kunt bij InforBank ook online betalen.

- BIC: INFONL2N -
-
- +
+
+ +

Welkom bij de InforBank

+ Bij InforBank krijg je zelfs 10% rente op betaalrekeningen.

+ Je kunt bij InforBank ook online betalen.

+ BIC: INFONL2N +
+
+
+

Inloggen bij de Inforbank


+ +
+ +
+ + + +
+
- -