RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

Merge branch 'master' into ads_2

pull/146/head
Charlie Chiu 7 years ago
parent
3bc67f4969 de965a8b0a
commit
f9626c7218
18 changed files with 1805 additions and 165 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      src/_footer.html
  2. +9
    -9
      src/_sidebar.html
  3. +2
    -2
      src/_topbar.html
  4. +48
    -28
      src/ads.html
  5. +228
    -0
      src/ads_1.html
  6. BIN
      src/assets/static/images/user-update.png
  7. +1
    -1
      src/assets/styles/index.scss
  8. +245
    -0
      src/assets/styles/nomit.scss
  9. +1
    -1
      src/assets/styles/spec/components/sidebar.scss
  10. +1
    -12
      src/assets/styles/spec/components/topbar.scss
  11. +179
    -0
      src/companies.html
  12. +232
    -10
      src/forms.html
  13. +28
    -102
      src/index.html
  14. +227
    -0
      src/login.html
  15. +239
    -0
      src/profile.html
  16. +178
    -0
      src/referees.html
  17. +178
    -0
      src/users.html
  18. +6
    -0
      webpack/plugins/htmlPlugin.js

+ 3
- 0
src/_footer.html View File

@ -0,0 +1,3 @@
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 the princesses, all rights reserved.</span>
</footer>

+ 9
- 9
src/_sidebar.html View File

@ -10,7 +10,7 @@
<div class="peer">
<div class="logo">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 105.6869278 99.4877319" style="enable-background:new 0 0 105.6869278 99.4877319;" xml:space="preserve">
<style type="text/css">
.logost0{fill:url(#LOGOSVGID_1_);}
@ -164,7 +164,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="ads.html">
<a class='sidebar-link' href="profile.html">
<span class="icon-holder">
<i class="c-white-500 ti-home"></i>
</span>
@ -172,7 +172,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="ads.html">
<a class='sidebar-link' href="users.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-users"></i>
</span>
@ -180,7 +180,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="ads.html">
<a class='sidebar-link' href="companies.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-building"></i>
</span>
@ -188,7 +188,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="ads.html">
<a class='sidebar-link' href="referees.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-crosshairs"></i>
</span>
@ -196,7 +196,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="forms.html">
<a class='sidebar-link' href="#">
<span class="icon-holder">
<i class="c-white-500 ti-comments"></i>
</span>
@ -204,7 +204,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="ads.html">
<a class='sidebar-link' href="#">
<span class="icon-holder">
<i class="c-white-500 ti-calendar"></i>
</span>
@ -212,7 +212,7 @@
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="calendar.html">
<a class='sidebar-link' href="#">
<span class="icon-holder">
<i class="c-white-500 fa fa-history"></i>
</span>
@ -220,7 +220,7 @@
</a>
</li>
<li class="nav-item">
<a class="sidebar-link" href="ui.html">
<a class="sidebar-link" href="#">
<span class="icon-holder">
<i class="c-white-500 fa fa-cogs"></i>
</span>


+ 2
- 2
src/_topbar.html View File

@ -1,5 +1,5 @@
<!-- ### $Topbar ### -->
<div class="header navbar">
<div class="header navbar topbar">
<div class="header-container">
<!-- #LEFT ============================ -->
<ul class="nav-left">
@ -20,7 +20,7 @@
<li class="">
<button type="button" class="btn btn-gradient ">
<i class="fa fa-plus pdd-right-5"></i>
Add new user
ADD NEW USER
</button>
</li>
</ul>


+ 48
- 28
src/ads.html View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dashboard</title>
<title>Ads</title>
<style>
#loader {
@ -102,7 +102,7 @@
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="row content-title mT-60">
<div class="col-8 ml-1 mb-3">
@ -113,64 +113,84 @@
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-100"> <!-- #First line ========= -->
<div class="row gap-20">
<div class="row gap-30">
<!-- # ad n 1 ==================== -->
<div class='col-md-4'>
<div class="card" >
<div class="card item-box" >
<img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Adv title</h5>
<h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
<div>Adv title </div>
<div>
<a class='' href="" > <span class="icon-holder"><i class=" ti-heart" style="color:#EE38A4"></i></span></a>
</div>
</h5>
<h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<a href="ads_1.html">
<div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4; font-weight: bolder; text-align: center; margin: 0px">
VIEW MORE <i class=" ti-angle-right" style="color:#fff; font-weight: bolder;"></i>
</div>
</a>
</div>
</div>
<!-- # ad n 2 ==================== -->
<div class='col-md-4'>
<div class="card" >
<div class="card item-box" >
<img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
<div>Adv title </div>
<div>
<a class='' href="" > <span class="icon-holder"><i class=" ti-heart" style="color:#EE38A4"></i></span></a>
</div>
</h5>
<h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<a href="ads_1.html">
<div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4; font-weight: bolder; text-align: center; margin: 0px">
VIEW MORE <i class=" ti-angle-right" style="color:#fff; font-weight: bolder;"></i>
</div>
</a>
</div>
</div>
<!-- # ad n 3 ==================== -->
<div class='col-md-4'>
<div class="card" >
<div class="card item-box" >
<img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
<div>Adv title </div>
<div>
<a class='' href="" > <span class="icon-holder"><i class=" ti-heart" style="color:#EE38A4"></i></span></a>
</div>
</h5>
<h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<a href="ads_1.html">
<div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4; font-weight: bolder; text-align: center; margin: 0px">
VIEW MORE <i class=" ti-angle-right" style="color:#fff; font-weight: bolder;"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div><!--content container-->
</div><!--page container-->
</div><!--content container -->
</div><!--maincontent row -->
</main>
</div><!-- page-container -->
</div> <!-- App Content -->
<!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer>
${require('html-loader!./_footer.html')}
</div><!-- page-container -->
</div> <!-- App Content -->
</body>
</html>

+ 228
- 0
src/ads_1.html View File

@ -0,0 +1,228 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ad_1</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="content-title mT-60">
<div class="ml-1 mb-3">
</div>
</div>
<div class=" gap-30 masonry pos-r "> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6 "></div>
<div class="masonry-item w-50"> <!-- #first user ========= -->
<div class="card item-box" >
<div class="">
<img class="companies-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">Graphic Designer Internship</h5>
<div class=" text-size-20">Great Southern Press</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="companies-update-title">
<h5 class="font-weight-bold ">About the business:</h5>
<p>Southern Press is leading ... bla bla bla bla.</p>
<br>
<h5 class="font-weight-bold ">About the role:</h5>
<p>This part time role will ... bla bla bla bla.</p>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second user ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second user ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second user ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50 m-auto btn-centered-container "> <!-- #second user ========= -->
<button type="button" class="btn btn-gradient btn-centered">APPLY NOW</button>
<button type="button" class="btn btn-cancel btn-centered">SAVE</button>
</div>
</div>
</div><!--content row-->
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div><!-- page-container -->
</div> <!-- App Content -->
</body>
</html>

BIN
src/assets/static/images/user-update.png View File

Before After
Width: 148  |  Height: 144  |  Size: 12 KiB

+ 1
- 1
src/assets/styles/index.scss View File

@ -3,4 +3,4 @@
@import "~bootstrap/scss/bootstrap";
@import 'spec/index';
@import 'vendor/index';
@import 'nomit';

+ 245
- 0
src/assets/styles/nomit.scss View File

@ -0,0 +1,245 @@
//generic
.sidebar{
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.btn-gradient {
box-shadow: 0 8px 7px 0 rgba(192, 192, 192, 0.521), 0 6px 20px 0 rgba(0,0,0,0.19);
color: #fff;
background-image: linear-gradient(to right,#ee38a4, #501db9);
border-radius: 50px;
border: none;
height: 40px;
width: 180px;
margin-top: calc((#{$header-height} - 40px)/2);
margin-left: 15px;
outline: none;
padding: 5px;
}
.btn-gradient:hover {
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.btn-cancel {
box-shadow: 0 8px 7px 0 rgba(192, 192, 192, 0.521), 0 6px 20px 0 rgba(0,0,0,0.19);
color: #501db9;
background-color: transparent;
border: 1px solid #501db9;
border-radius: 50px;
height: 40px;
width: 180px;
margin-top: calc((#{$header-height} - 40px)/2);
margin-left: 15px;
outline: none;
padding: 5px;
}
.btn-cancel:hover {
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.item-box{
box-shadow: 0 0 15px rgba(192, 192, 192, 0.521);
}
.main-content{
padding-left: 80px;
padding-right: 80px;
}
.text-black-bold{
font-weight: bolder;
color: rgb(49, 48, 48);
}
.text-size-11{
font-size:11px;
}
.text-size-20{
font-size:20px;
}
//index
.succ-match-perc{
height: 400px;
}
.nationality-item{
height: 400px;
}
.nationality-item-progress-bar{
width:50%;
}
//ads
.card-img-top{
border-radius: 0% !important;
}
//profile
.card-body-profile{
background-color: #e6eaf08f;
}
.user-update-img{
width: 80px;
float: left;
margin-left: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
.testo{
vertical-align:middle;
margin-top: 30px;
margin-left: 150px;
}
.profile-forms{
padding: 50px;
padding-bottom: 30px
}
.profile-form-row{
font-weight: bold;
margin-top: 20px;
}
//users
.card{
border-radius: 0% !important;
}
.card-body-users{
border-top: 1px solid #9c9fa0;
margin: 0;
}
.users-icons{
margin-left: 150px;
padding: 5px;
padding-left: 0;
}
.users-icons i{
font-size: 20px;
margin-right: 15px;
color: #9c9fa0;
}
//login
.modal-dialog {
max-width: 800px;
margin: 200px auto;
}
.modal-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: rgb(148, 61, 129);
color: #fff;
font-size: 12px;
background-clip: padding-box;
border: none;
border-radius: 10px;
outline: 0;
margin-bottom: 20px;
height: 350px;
position:absolute;
visibility:visible;
}
.mo-title{
font-size: 40px;
font-weight: bolder;
}
.subtitle-modal{
font-size: 20px;
}
.modal-right {
background-color: #fff;
height: 400px;
color: #000;
width: 350px;
position: absolute;
visibility: visible;
top: -20px;
right: -50px;
border: 2px solid transparent;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: auto;
padding: 100px;
text-align: center;
}
.logo-wisp-right{
width: 174px;
}
.modal-username{
margin-top: 10px;;
border-radius: 50px;
border-color: #501db9;
width: 180px;
}
.btn-signup{
color: #fff;
background-color: transparent;
border: 1px solid #fff;
border-radius: 50px;
height: 40px;
width: 180px;
margin-top: calc((#{$header-height} - 40px)/2);
margin-left: 15px;
outline: none;
padding: 5px;
}
.mo-title{
text-align: -webkit-center;
margin-top: 20px;
}
//companies
.card-body-companies{
border-top: 1px solid #9c9fa0;
margin: 0;
}
.companies-icons{
margin-left: 150px;
padding: 5px;
padding-left: 0;
}
.companies-icons i{
font-size: 20px;
margin-right: 15px;
color: #9c9fa0;
}
.companies-update-img{
width: 80px;
float: left;
margin-left: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
//referees
.card-body-referee{
border-top: 1px solid #9c9fa0;
margin: 0;
}
.referee-icons{
margin-left: 150px;
padding: 5px;
padding-left: 0;
}
.referee-icons i{
font-size: 20px;
margin-right: 15px;
color: #9c9fa0;
}
.referee-update-img{
width: 80px;
float: left;
margin-left: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
//ads_1
.companies-update-title{
margin-left: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
.btn-centered{
margin-top: 0;
margin-left: 0;
}
.btn-centered-container{
text-align:center;
}

+ 1
- 1
src/assets/styles/spec/components/sidebar.scss View File

@ -14,7 +14,7 @@
.sidebar {
//background-color: $default-white;
background-image: linear-gradient(#fe4cb8, #793fcc);
background-image: linear-gradient(#fe4cb8, #8B00B1, #793fcc);
bottom: 0;
overflow: hidden;
position: fixed;


+ 1
- 12
src/assets/styles/spec/components/topbar.scss View File

@ -198,18 +198,7 @@
}
}
}
.btn-gradient {
color: #fff;
background-image: linear-gradient(to right,#ee38a4, #501db9);
border-radius: 50px;
border: none;
height: 40px;
width: 180px;
margin-top: calc((#{$header-height} - 40px)/2);
margin-left: 15px;
outline: none;
padding: 5px;
}
.nomit-logo-top{
width: 60px ;


+ 179
- 0
src/companies.html View File

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Companies</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="content-title mT-60">
<div class="ml-1 mb-3">
Companies
</div>
</div>
<div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-50"> <!-- #first company ========= -->
<div class="card item-box" >
<div class="companies-data-title">
<img class="companies-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-companies row">
<div class="companies-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second company ========= -->
<div class="card item-box" >
<div class="companies-data-title">
<img class="companies-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-companies row">
<div class="companies-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--content container-->
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div><!-- page-container -->
</div> <!-- App Content -->
</body>
</html>

+ 232
- 10
src/forms.html View File

@ -15,14 +15,10 @@
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
@ -34,7 +30,6 @@
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
@ -42,7 +37,6 @@
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
@ -64,7 +58,6 @@
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
@ -519,10 +512,239 @@
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">User Form</h6>
<h6 class="c-grey-900">Basic Form</h6>
<div class="mT-30">
<form id="user-form">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Complex Form Layout</h6>
<div class="mT-30">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon form-group">
<div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<i class="ti-calendar"></i>
</div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Horizontal Form</h6>
<div class="mT-30">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Disabled Forms</h6>
<div class="mT-30">
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Validation</h6>
<div class="mT-30">
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
</div>
</div>
</div>
@ -537,4 +759,4 @@
</div>
</div>
</body>
</html>
</html>

+ 28
- 102
src/index.html View File

@ -57,22 +57,7 @@
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
@ -90,15 +75,16 @@
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<!-- #sidebar ============================ -->
${require('html-loader!./_sidebar.html')}
<!-- #Main ============================ -->
<div class="page-container">
<!-- #topbar ============================ -->
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="row content-title mT-60">
<div class="col-8 ml-1 mb-3">
@ -111,11 +97,11 @@
<div class="masonry-item w-100">
<!-- #First line ========= -->
<div class="row gap-20">
<!-- #Total Ads Views ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class='col-md-4 '><!-- #Total Ads Views ==================== -->
<div class="layers bd bgc-white p-20 item-box">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Total Ads Views</h6>
<h6 class="lh-1">Total Applications</h6>
</div>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
@ -130,9 +116,9 @@
</div>
</div>
<!-- #Successful Matches ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class='col-md-4 '><!-- #Successful Matches ==================== -->
<div class="layers bd bgc-white p-20 item-box">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Matches</h6>
</div>
@ -149,9 +135,9 @@
</div>
</div>
<!-- #New Ads ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class='col-md-4 '><!-- #New Ads ==================== -->
<div class="layers bd bgc-white p-20 item-box">
<div class="layer w-100 mB-10">
<h6 class="lh-1">New Ads (last month)</h6>
</div>
@ -169,9 +155,8 @@
</div>
</div>
</div>
<div class="masonry-item col-12">
<!-- #New Registered Users ==================== -->
<div class="bd bgc-white">
<div class="masonry-item col-12"> <!-- #New Registered Users ==================== -->
<div class="bd bgc-white item-box">
<div class="layers">
<div class="layer w-100 pX-20 pT-20">
<h6 class="lh-1">New Registered Users</h6>
@ -182,21 +167,11 @@
<div class="layer bdT p-20 w-100">
<div class="peers ai-c jc-c gapX-20">
<div class="peer">
<span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">APPL</small>
<span class="fsz-def fw-600 mR-10 c-purple-800">COMPANIES </span>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Average</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">Sales</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Profit</small>
</div>
<span class="fsz-def fw-600 mR-10 c-cyan-400">USERS </span>
</div>
</div>
</div>
</div>
@ -205,12 +180,11 @@
<div class="masonry-item w-100">
<div class="row gap-20">
<div class="col-3">
<!-- #Successful Mathches ==================== -->
<div class="bd bgc-white p-20 peer peer-greed" style="height: 400px">
<div class="col-3 "><!-- #Successful Mathches %==================== -->
<div class="bd bgc-white p-20 peer peer-greed succ-match-perc item-box">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Mathches</h6>
<h6 class="lh-1">Successful Mathches %</h6>
</div>
<!-- Pie Charts -->
<div class="peers pT-50 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
@ -224,9 +198,8 @@
</div>
</div>
</div>
<div class="col-9">
<!-- #Nationality ==================== -->
<div class="bd bgc-white" style="height: 400px">
<div class="col-9 "> <!-- #Nationality ==================== -->
<div class="bd bgc-white item-box nationality-item">
<div class="peers fxw-nw@lg+ ai-s">
<div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
<div class="layers">
@ -248,8 +221,8 @@
<small class="fw-600 c-grey-700">Visitors From USA</small>
<span class="pull-right c-grey-600 fsz-sm">50%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50%
<div class="progress-bar bgc-deep-purple-500 nationality-item-progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">50%
Complete</span></div>
</div>
</div>
@ -293,40 +266,6 @@
</div>
</div>
<div class="masonry-item w-100">
<div class="row gap-20">
<!-- #Visitors ==================== -->
<div class="col-9">
<div class="bgc-white p-20 bd" style="height: 350px">
<h6 class="c-grey-900">Visitors</h6>
<div class="mT-30">
<canvas id="bar-chart" height="90"></canvas>
</div>
</div>
</div>
<div class="col-3">
<!-- #Visa Types ==================== -->
<div class="bd bgc-white p-20 peer peer-greed" style="height: 350px">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Visa Types</h6>
</div>
<!-- Pie Chart -->
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -338,22 +277,9 @@
</main>
<!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>.
All rights reserved.</span>
</footer>
${require('html-loader!./_footer.html')}
</div>
</div>
</body>


+ 227
- 0
src/login.html View File

@ -0,0 +1,227 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>WISP</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body d-flex">
<div class="modal-left" >
<p class="mo-title">Let's start with getting connected.</p>
<div class="subtitle-modal">Sign up and join the WISP. </div>
<button type="button" class="btn btn-signup ">SIGNUP</button>
</div>
<div class="modal-right ">
<div class="logo-wisp-right">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 138.8360748 39.8824463" style="enable-background:new 0 0 138.8360748 39.8824463;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:url(#SVGID_6_);}
.st6{fill:url(#SVGID_7_);}
.st7{fill:url(#SVGID_8_);}
.st8{fill:url(#SVGID_9_);}
.st9{fill:url(#SVGID_10_);}
.st10{fill:url(#SVGID_11_);}
.st11{fill:#FFFFFF;}
.st12{fill:url(#SVGID_12_);}
.st13{fill:url(#SVGID_13_);}
.st14{fill:url(#SVGID_14_);}
.st15{fill:url(#SVGID_15_);}
.st16{fill:url(#SVGID_16_);}
.st17{fill:url(#SVGID_17_);}
.st18{fill:url(#SVGID_18_);}
.st19{fill:url(#SVGID_19_);}
</style>
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.806386" y1="30.5149899" x2="13.806386" y2="0.0000301">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.0866544" style="stop-color:#C832A9"/>
<stop offset="0.1996946" style="stop-color:#9D2AAF"/>
<stop offset="0.3094908" style="stop-color:#7C24B3"/>
<stop offset="0.4136127" style="stop-color:#6420B6"/>
<stop offset="0.5097673" style="stop-color:#551EB8"/>
<stop offset="0.5903056" style="stop-color:#501DB9"/>
<stop offset="0.6045721" style="stop-color:#501DB9"/>
<stop offset="0.7748037" style="stop-color:#501DB9"/>
<stop offset="0.8825542" style="stop-color:#7311B4"/>
<stop offset="1" style="stop-color:#9506B0"/>
<stop offset="1" style="stop-color:#9103B0"/>
</linearGradient>
<path class="st0" d="M18.4649811,27.823019l-0.0005131,0.0005131c0.0724716-0.0724716,0.1342678-0.1448421,0.204174-0.2173138
l-3.4111109-3.4110069l-0.558629-0.55863L6.319869,15.2575493l2.234416-2.234416l6.7032461-6.7032471l2.234416,2.234416
l5.6520958,5.6520948l3.0811882-3.0812902l-3.0811882,3.0812902l0,0l4.2584972-4.2586002L27.612772,9.737566l-7.8864098-7.8864594
c-2.468153-2.4681017-6.4696112-2.4681017-8.9376621,0l-8.9376621,8.9376106c-2.4680505,2.468051-2.4680505,6.4695606,0,8.9376621
l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z
"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3865204" y1="27.2705288" x2="37.6677437" y2="6.9730129">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.5092942" style="stop-color:#9103B0"/>
<stop offset="1" style="stop-color:#501DB9"/>
<stop offset="1" style="stop-color:#9506B0"/>
</linearGradient>
<path class="st1" d="M55.4768066,10.7887173l-8.9376602-8.9376106l-4.4687309,4.4687796l6.7032471,6.7032471l2.234314,2.234416
l-6.7031441,6.7032471l-2.234417,2.2344151l-7.7302742-7.7302761l-0.2102318,0.2102318l-4.2584972,4.2586002l7.7301731,7.7301731
v0.0000515c2.4680519,2.4679985,6.4696121,2.4679985,8.937561,0l8.9376602-8.9376125
C57.9449615,17.2582779,57.9449615,13.2567682,55.4768066,10.7887173z"/>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="10.7887001" y1="15.2575035" x2="46.5391464" y2="15.2575035">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.1175187" style="stop-color:#D634A7"/>
<stop offset="0.4183493" style="stop-color:#9D2AAF"/>
<stop offset="0.6763742" style="stop-color:#7323B4"/>
<stop offset="0.8785662" style="stop-color:#591FB8"/>
<stop offset="1" style="stop-color:#501DB9"/>
</linearGradient>
<path class="st2" d="M37.6015854,1.8511064l-8.9376621,8.9376106l-4.468729,4.468832l-0.55863,0.558629l-8.3790331,8.3790331
l-4.4688311,4.468832c2.467948,2.4677925,6.4688931,2.4678955,8.937149,0.0004101l0.0005131-0.0005131l13.4063931-13.4063911
l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z"
/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.1951942" y1="13.6117887" x2="27.4866123" y2="13.6117887">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.1175187" style="stop-color:#D634A7"/>
<stop offset="0.4183493" style="stop-color:#9D2AAF"/>
<stop offset="0.6763742" style="stop-color:#7323B4"/>
<stop offset="0.8785662" style="stop-color:#591FB8"/>
<stop offset="1" style="stop-color:#501DB9"/>
</linearGradient>
<polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282 "/>
</g>
</g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.3990173" y1="-7.8904157" x2="122.914917" y2="37.6254807">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.0727272" style="stop-color:#D634A7"/>
<stop offset="0.2166433" style="stop-color:#AD2DAD"/>
<stop offset="0.3643613" style="stop-color:#8C27B1"/>
<stop offset="0.5144968" style="stop-color:#7123B5"/>
<stop offset="0.6680248" style="stop-color:#5F20B7"/>
<stop offset="0.8269761" style="stop-color:#541EB9"/>
<stop offset="1" style="stop-color:#501DB9"/>
</linearGradient>
<path class="st4" d="M73.7269974,4.3174438v5.8997192v11.3051758v5.3615112
c-0.4117432,2.0700073-1.6452637,3.1047974-3.7012939,3.1047974c-1.9445801,0-3.1610107-0.9794312-3.6466064-2.94104v-5.3562012
V10.0534058V4.1483765c0.4855957-2.0239868,1.7020264-3.036438,3.6466064-3.036438
C72.0817337,1.1119385,73.3152542,2.180603,73.7269974,4.3174438z M106.2809982,19.8569603
c0-1.8695717-0.9047928-3.7108078-2.7115402-5.5251274c-1.8067474-1.8133755-3.6427689-2.7205353-5.5052414-2.7205353h-6.3165283
c-1.0814056-0.3452024-1.6216354-1.055913-1.6216354-2.1316605c0-1.1130533,0.5383453-1.8237638,1.6159668-2.1311879h3.5096054
c1.9682465-0.5189838,2.9523697-1.7250671,2.9523697-3.6182499c0-2.0782979-1.0483475-3.3216877-3.1412582-3.7301693h-3.8703918
c-1.9077988,0-3.7872696,0.9000763-5.6374664,2.7002289c-1.8511353,1.8001525-2.7767029,3.6574452-2.7767029,5.5699892v2.4192505
c0,1.8752375,0.9038467,3.7230854,2.7105942,5.5416546c1.8067474,1.8195152,3.6427689,2.7285633,5.5061874,2.7285633h6.3165283
c1.0804596,0.3367023,1.6216354,1.0474129,1.6216354,2.1316605c0,1.0474129-0.5392838,1.7387619-1.6150208,2.0754642h-3.3981628
c-2.0060272,0.5605412-3.0090408,1.7765408-3.0090408,3.6461124c0,1.9446564,1.0105743,3.1776562,3.0298233,3.7018356h4.0951614
c1.8690872,0,3.7098312-0.8972435,5.5250778-2.6922016c1.8133621-1.7949581,2.7200394-3.6267509,2.7200394-5.4972649V19.8569603z
M138.8360748,10.5393066v2.6487427c0,2.5925903-1.1069336,4.9976807-3.3208008,7.2142944
c-2.2138672,2.2171631-4.6164551,3.3250122-7.2062988,3.3250122h-2.5329514c-0.7498779,0-1.7822266-0.2800293-3.0959473-0.8410645
v13.7991333c-0.4117432,2.1312256-1.6452637,3.1970215-3.7012939,3.1970215c-1.9447021,0-3.1610107-1.0115356-3.6466064-3.0331421
V3.0893555c0-0.262085,0.1303711-0.6176758,0.3929443-1.0672607C116.5467758,0.6738892,117.6329575,0,118.9787827,0
c0.9718018,0,1.8690186,0.4118042,2.692627,1.2339478C123.354393,0.4118042,124.7372055,0,125.821434,0h2.525383
c2.5803223,0,4.9726562,1.1088257,7.1798096,3.3250122C137.7328033,5.5426025,138.8360748,7.9467773,138.8360748,10.5393066z
M131.4881744,10.4920654c0-0.6478882-0.3929443-1.3340454-1.1787109-2.0579834
c-0.7858887-0.723938-1.4960938-1.0856323-2.1315918-1.0856323h-2.1874924c-0.6364746,0-1.3458252,0.3711548-2.1315918,1.1144409
s-1.1787109,1.4384155-1.1787109,2.0863647v2.6293945c0,0.5713501,0.3835449,1.2481079,1.1503906,2.0286865
c0.7668457,0.7820435,1.4309082,1.1720581,1.9909668,1.1720581h2.525383c0.5610352,0,1.2241211-0.3900146,1.9909668-1.1720581
c0.7658691-0.7805786,1.1503906-1.4573364,1.1503906-2.0286865V10.4920654z"/>
</g>
</svg>
</div> <!--logo-->
<h4 class=""><strong>Sign In </strong></p>
<input class="modal-username" type="text" placeholder="Username">
<input class="modal-username" type="password" placeholder="Password">
<button type="button" class="btn btn-gradient btn-centered mt-20">SIGN IN</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

+ 239
- 0
src/profile.html View File

@ -0,0 +1,239 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Profile</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="content-title mT-60">
<div class="ml-1 mb-3">
Profile
</div>
</div>
<div class="ml-1 mb-3 text-black-bold">
Sign up with WISP now to get yourself connected.
</div>
<div class="ml-1 mb-3 text-size-11">
Please, tell us more about your information so we could find the perfect oportunities for you.
</div>
<div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-100"> <!-- #your profile ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/user-update.png" alt="">
<div class="testo"> <h5>Francesca Sperati</h5> Bla Bla, this is your bio or whatever!</div>
</div>
<div class="card-body-profile">
<div class="profile-forms">
<h5 class="card-title d-flex text-black-bold"> Your Profile</h5>
<div class="row ">
<div class="col-4 profile-form-row">
<h9 class="">First Name</h9>
<input type="text" class="form-control" id="" placeholder="First name" value="Francesca" required>
</div>
<div class="col-4 profile-form-row">
<h9 class="">Last Name</h9>
<input type="text" class="form-control" id="" placeholder="Last name" value="Sperati" required>
</div>
<div class="col-4 profile-form-row"></div>
</div>
<div class="row ">
<div class="col-4 profile-form-row">
<h9 class="">Email Address</h9>
<input type="text" class="form-control" id="" placeholder="Email" value="test@test.au" required>
</div>
<div class="col-4 profile-form-row">
<h9 class="">Phone Number</h9>
<input type="text" class="form-control" id="" placeholder="Phone" value="0414098765" required>
</div>
<div class="col-4 profile-form-row">
<h9 class="">State</h9>
<select id="inputState" class="form-control">
<option selected>VIC</option>
<option>...</option>
</select>
</div>
</div>
<div class="row ">
<div class="col-4 profile-form-row">
<h9 class="">Nationality</h9>
<select id="inputState" class="form-control">
<option selected>Italian</option>
<option>...</option>
</select>
</div>
<div class="col-4 profile-form-row">
<h9 class="">Visa Type</h9>
<select id="inputState" class="form-control">
<option selected>Student</option>
<option>...</option>
</select>
</div>
<div class="col-4 profile-form-row">
<h9 class="">Language (Select one or more)</h9>
<select id="inputState" class="form-control">
<option selected>English</option>
<option>...</option>
</select>
</div>
</div>
<div class="row ">
<div class="col-4 profile-form-row">
<h9 class="">Expertiece / Fields (Select one or more)</h9>
<select id="inputState" class="form-control">
<option selected>Software Engineering</option>
<option>...</option>
</select>
</div>
<div class="col-4 profile-form-row">
<h9 class="">Expertiece / Fields (Select one or more)</h9>
<select id="inputState" class="form-control">
<option selected>Project Management</option>
<option>...</option>
</select>
</div>
<div class="col-4 profile-form-row"> </div>
</div>
<button type="button" class="btn btn-gradient ">UPDATE</button>
<button type="button" class="btn btn-cancel ">CANCEL</button>
</div>
</div>
</div>
</div>
<div class="masonry-item w-100"> <!-- #change password ========= -->
<div class="card item-box" >
<div class="card-body-profile">
<div class="profile-forms">
<h5 class="card-title d-flex text-black-bold"> Change Password</h5>
<div class="row ">
<div class="col-4 profile-form-row">
<h9 class="">Current Password</h9>
<input type="password" class="form-control" id="" placeholder="Password" required>
</div>
<div class="col-4 profile-form-row">
<h9 class="">New Password</h9>
<input type="password" class="form-control" id="" placeholder="New Password" required>
</div>
<div class="col-4 profile-form-row">
<h9 class="">Confirm New urrent Password</h9>
<input type="password" class="form-control" id="" placeholder="New Password" required>
</div>
</div>
<button type="button" class="btn btn-gradient ">UPDATE</button>
<button type="button" class="btn btn-cancel ">CANCEL</button>
</div>
</div>
</div>
</div>
</div><!--content container-->
</div><!--page container-->
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div><!-- page-container -->
</div> <!-- App Content -->
</body>
</html>

+ 178
- 0
src/referees.html View File

@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Referees</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="content-title mT-60">
<div class="ml-1 mb-3">
Referees
</div>
</div>
<div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-50"> <!-- #first referee ========= -->
<div class="card item-box" >
<div class="referee-data-title">
<img class="referee-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-referee row">
<div class="referee-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second company ========= -->
<div class="card item-box" >
<div class="referee-data-title">
<img class="referee-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-referee row">
<div class="referee-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--content container-->
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div><!-- page-container -->
</div> <!-- App Content -->
</body>
</html>

+ 178
- 0
src/users.html View File

@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Users</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="content-title mT-60">
<div class="ml-1 mb-3">
Users
</div>
</div>
<div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-50"> <!-- #first user ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second user ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="testo"><h5 class=" text-black-bold">David James</h5>
<div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--content container-->
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div><!-- page-container -->
</div> <!-- App Content -->
</body>
</html>

+ 6
- 0
webpack/plugins/htmlPlugin.js View File

@ -10,11 +10,17 @@ const titles = {
'calendar': 'Calendar',
'charts': 'Charts',
'ads': 'ads',
'ads_1':'ads_1',
'chat': 'Chat',
'compose': 'Compose',
'datatable': 'Datatable',
'email': 'Email',
'forms': 'Forms',
'profile': 'profile',
'users': 'users',
'companies': 'companies',
'referees': 'referees',
'login': 'login',
'google-maps': 'Google Maps',
'signin': 'Signin',
'signup': 'Signup',


Write Preview
Loading…
Cancel
Save