Skip to content

Commit

Permalink
Merge pull request #15 from ocornel/develop
Browse files Browse the repository at this point in the history
Login page styling
  • Loading branch information
ocornel authored Feb 7, 2021
2 parents 25ec5c3 + 442b42d commit 8b39823
Show file tree
Hide file tree
Showing 11 changed files with 97 additions and 270 deletions.
1 change: 1 addition & 0 deletions public/css/login-3.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions public/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@
font-size: var(--theme-default-font-size);
}
.navbar-default .navbar-header {
background-color: var(--theme-green);
background-color: var(--theme-light-blue);
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: var(--theme-green);
border-color: var(--theme-light-blue);
}
.layout-header {
background-color: var(--theme-green);
}
.navbar-default {
background-color: var(--theme-green);
border-color: var(--theme-green);
background-color: var(--theme-light-blue);
border-color: var(--theme-light-blue);
}
.navbar-default .navbar-search {
background-color: var(--theme-green);
background-color: var(--theme-light-blue);
color: #fff;
}
.navbar-default .sidenav-toggler.collapsed {
Expand Down
127 changes: 62 additions & 65 deletions resources/views/auth/login.blade.php
Original file line number Diff line number Diff line change
@@ -1,73 +1,70 @@
@extends('layouts.app')

@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>

<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf

<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

@error('email')
<span class="invalid-feedback" role="alert">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name', 'Ponacare') }} @yield('page_title')</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="description" content="{{ config('app.name', 'Ponacare') }} | By consult mCornel">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700">
<link href="{{ asset('css/vendor.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/elephant.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/login-3.min.css') }}" rel="stylesheet">
<style>
body {
color: #384243;
background-color: #2e96b9;
}
</style>
</head>
<body>
<div class="login">
<div class="login-body">
<a class="login-brand" href="{{ route('landing') }}">
<img class="img-responsive" src="{{ asset('img/logo_blue_white.png') }}" alt="Ponacare">
</a>
<h3 class="login-heading">{{ __('Login') }}</h3>
<div class="login-form">
<form data-toggle="md-validator" method="POST" action="{{ route('login') }}">
@csrf
<div class="md-form-group md-label-floating">
<input id="email" type="email" class="md-form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
<label class="md-control-label">{{ __('E-Mail Address') }}
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

@error('password')
<span class="invalid-feedback" role="alert">
@enderror
</label>
</div>
<div class="md-form-group md-label-floating">
<input id="password" type="password" class="md-form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" data-msg-required="Please enter your password." >
<label class="md-control-label">Password @error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>

<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>

@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
</form>
@enderror
</label>
</div>
<div class="md-form-group md-custom-controls">
<label class="custom-control custom-control-primary custom-checkbox">
<input class="custom-control-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<span class="custom-control-indicator"></span>
<span class="custom-control-label">{{ __('Remember Me') }}</span>
</label>
<br>
<span aria-hidden="true"> * Forgot password? <a href="mailto:{{env('ADMIN_EMAIL', '[email protected]')}}?subject=Forgot Password for {{env('APP_NAME', 'Ponacare')}}">Seek Admin assistance.</a></span>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>
<div class="login-footer">
Don't have an account? <a style="color: #444444; text-decoration: underline" href="mailto:{{env('ADMIN_EMAIL', '[email protected]')}}?subject=Need Account on {{env('APP_NAME', 'Ponacare')}}">Seek assistance from a system admin.</a>
</div>
</div>
@endsection
<script src="{{ asset('js/vendor.min.js') }}"></script>
<script src="{{ asset('js/elephant.min.js') }}"></script>
</body>
</html>
44 changes: 27 additions & 17 deletions resources/views/landing_page.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,6 @@
<title>{{ config('app.name', 'Ponacare') }} @yield('page_title')</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="description" content="{{ config('app.name', 'Ponacare') }} | By consult mCornel">
{{-- <meta property="og:url" content="http://demo.madebytilde.com/elephant">--}}
{{-- <meta property="og:type" content="website">--}}
{{-- <meta property="og:title" content="The fastest way to build Modern Admin APPS for any platform, browser, or device.">--}}
{{-- <meta property="og:description" content="Elephant is an admin template that helps you build modern Admin Applications, professionally fast! Built on top of Bootstrap, it includes a large collection of HTML, CSS and JS components that are simple to use and easy to customize.">--}}
{{-- <meta property="og:image" content="http://demo.madebytilde.com/elephant.jpg">--}}
{{-- <meta name="twitter:card" content="summary_large_image">--}}
{{-- <meta name="twitter:site" content="@madebytilde">--}}
{{-- <meta name="twitter:creator" content="@madebytilde">--}}
{{-- <meta name="twitter:title" content="The fastest way to build Modern Admin APPS for any platform, browser, or device.">--}}
{{-- <meta name="twitter:description" content="Elephant is an admin template that helps you build modern Admin Applications, professionally fast! Built on top of Bootstrap, it includes a large collection of HTML, CSS and JS components that are simple to use and easy to customize.">--}}
{{-- <meta name="twitter:image" content="http://demo.madebytilde.com/elephant.jpg">--}}
{{-- <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">--}}
{{-- <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">--}}
{{-- <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">--}}
{{-- <link rel="manifest" href="manifest.json">--}}
{{-- <link rel="mask-icon" href="safari-pinned-tab.svg" color="#27ae60">--}}
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700">
Expand Down Expand Up @@ -58,7 +42,7 @@
<p class="masthead-lead">Visit our main office at...</p>
</div>
<div class="col-sm-12 col-sm-offset-0">
<img class="masthead-img" src="{{ asset('img/logo_blue_white.png') }}" alt="Ponacare">
<img class="masthead-img" data-src="{{ asset('img/logo_blue_white.png') }}" alt="Ponacare">
</div>
<div class="col-md-12">
<hr>
Expand Down Expand Up @@ -125,5 +109,31 @@
<script src="{{ asset('js/elephant.min.js') }}"></script>
<script src="{{ asset('js/landing-page.min.js') }}"></script>

<script>
// lazy load images
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
let observer = new IntersectionObserver(function (entries, self) {
entries.forEach(entry => {
if (entry.isIntersecting) {
preloadImage(entry.target);
self.unobserve(entry.target)
}
});
}, config);
function preloadImage(target) {
const lazyImage = target;
lazyImage.src = lazyImage.dataset.src;
}
const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
observer.observe(img);
});
</script>
</body>
</html>
19 changes: 0 additions & 19 deletions resources/views/layouts/backend.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,6 @@

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

{{-- <meta name="description" content="Elephant is an admin template that helps you build modern Admin Applications, professionally fast! Built on top of Bootstrap, it includes a large collection of HTML, CSS and JS components that are simple to use and easy to customize.">--}}
{{-- <meta property="og:url" content="http://demo.madebytilde.com/elephant">--}}
{{-- <meta property="og:type" content="website">--}}
{{-- <meta property="og:title" content="The fastest way to build Modern Admin APPS for any platform, browser, or device.">--}}
{{-- <meta property="og:description" content="Elephant is an admin template that helps you build modern Admin Applications, professionally fast! Built on top of Bootstrap, it includes a large collection of HTML, CSS and JS components that are simple to use and easy to customize.">--}}
{{-- <meta property="og:image" content="http://demo.madebytilde.com/elephant.jpg">--}}
{{-- <meta name="twitter:card" content="summary_large_image">--}}
{{-- <meta name="twitter:site" content="@madebytilde">--}}
{{-- <meta name="twitter:creator" content="@madebytilde">--}}
{{-- <meta name="twitter:title" content="The fastest way to build Modern Admin APPS for any platform, browser, or device.">--}}
{{-- <meta name="twitter:description" content="Elephant is an admin template that helps you build modern Admin Applications, professionally fast! Built on top of Bootstrap, it includes a large collection of HTML, CSS and JS components that are simple to use and easy to customize.">--}}
{{-- <meta name="twitter:image" content="http://demo.madebytilde.com/elephant.jpg">--}}
{{-- <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">--}}
{{-- <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">--}}
{{-- <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">--}}
{{-- <link rel="manifest" href="manifest.json">--}}
{{-- <link rel="mask-icon" href="safari-pinned-tab.svg" color="#27ae60">--}}
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700">
Expand Down Expand Up @@ -70,6 +52,5 @@
<script src="{{ asset('js/demo.min.js') }}"></script>
<script src="{{ asset('js/scripts.js') }}"></script>
@yield('additional_scripts')

</body>
</html>
13 changes: 0 additions & 13 deletions resources/views/layouts/backend_old.blade.php

This file was deleted.

7 changes: 0 additions & 7 deletions resources/views/layouts/sidenav_old.blade.php

This file was deleted.

2 changes: 1 addition & 1 deletion resources/views/layouts/topnav.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a href="mailto:[email protected]?subject={{ $auth_user->name }} Need Help for {{env('APP_NAME', 'Ponacare')}}">
<a href="mailto:{{env('ADMIN_EMAIL', '[email protected]')}}?subject={{ $auth_user->name }} Need Help for {{env('APP_NAME', 'Ponacare')}}">
<h5 class="navbar-upgrade-heading">
Need Help?
<small class="navbar-upgrade-notification">Contact the system developer</small>
Expand Down
44 changes: 0 additions & 44 deletions resources/views/layouts/topnav_old.blade.php

This file was deleted.

Loading

0 comments on commit 8b39823

Please sign in to comment.