You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
21 KiB
434 lines
21 KiB
<!DOCTYPE html>
|
|
<html ng-app="NomitWisp">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Dashboard</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>
|
|
|
|
<!-- #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'>
|
|
<div id='mainContent row'>
|
|
<div class="row content-title mT-60">
|
|
<div class="col-8 ml-1 mb-3">
|
|
Dashboard
|
|
</div>
|
|
</div>
|
|
<div class=" gap-20 masonry pos-r">
|
|
<!-- #content container ===== -->
|
|
<div class="masonry-sizer col-md-6"></div>
|
|
<!-- #NOMIT & REFEREE ===== -->
|
|
<div class="masonry-item w-100 visible-nomit visible-referee" ng-show="user.role=='nomit' || user.role == 'referee'"><!-- #First line ========= -->
|
|
|
|
<div class="row gap-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 Applications</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">24K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash2"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">127</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash3"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">79</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-12 visible-nomit visible-referee" ng-show="user.role=='nomit' || user.role == 'referee'"> <!-- #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>
|
|
</div>
|
|
<div class="layer w-100 p-20">
|
|
<canvas id="line-chart" height="220"></canvas>
|
|
</div>
|
|
<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-purple-800">COMPANIES </span>
|
|
</div>
|
|
<div class="peer fw-600">
|
|
<span class="fsz-def fw-600 mR-10 c-cyan-400">USERS </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item w-100 visible-nomit visible-referee" ng-show="user.role=='nomit' || user.role == 'referee'"><!-- #Successful Mathches & #Nationality ==================== -->
|
|
<div class="row gap-20">
|
|
<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>
|
|
</div>
|
|
<!-- Pie Charts -->
|
|
<div class="peers pT-50 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 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">
|
|
<div class="layer w-100 mB-10">
|
|
<h6 class="lh-1">Nationality</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div id="world-map-marker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
|
|
<div class="layers">
|
|
<div class="layer w-100">
|
|
<!-- Progress Bars -->
|
|
<div class="layers">
|
|
<div class="layer w-100">
|
|
<h5 class="mB-5">100k</h5>
|
|
<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 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>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">1M</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From Europe</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">80%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50"
|
|
aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80%
|
|
Complete</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">450k</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From Australia</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">40%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50"
|
|
aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40%
|
|
Complete</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">1B</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From India</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">90%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50"
|
|
aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90%
|
|
Complete</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- #COMPANY / REFEREE / NOMIT ===== -->
|
|
<div class="masonry-item content-title w-100 visible-company visible-nomit visible-referee" ng-show="user.role=='company' || user.role == 'referee' || user.role == 'nomit'">
|
|
<div class="col-8 ml-1 mb-3">
|
|
Your Adds
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-12 visible-company visible-nomit visible-referee" ng-show="user.role=='company' || user.role == 'referee' || user.role == 'nomit'"> <!-- #suggested ads ==================== -->
|
|
<div class="row gap-30">
|
|
|
|
<!-- # ad n 1 ==================== -->
|
|
<div class='col-md-4'>
|
|
<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 d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
|
|
<div>Adv title </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>
|
|
</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 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 d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
|
|
<div>Adv title </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>
|
|
</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 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 d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
|
|
<div>Adv title </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>
|
|
</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 class="masonry-item w-100">
|
|
<button type="button" class="btn btn-gradient "><i class="fa fa-plus pdd-right-5"></i>CREATE NEW ADD</button>
|
|
</div>
|
|
|
|
|
|
<!-- #USERS ===== -->
|
|
<div class="masonry-item col-12 visible-user" ng-show="user.role=='user'"> <!-- #suggested ads ==================== -->
|
|
<div class="row gap-30">
|
|
|
|
<!-- # ad n 1 ==================== -->
|
|
<div class='col-md-4'>
|
|
<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 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" style="color:#EE38A4"><i class="fa fa-heart" ></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>
|
|
</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 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 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" style="color:#EE38A4"><i class="fa fa-heart" ></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>
|
|
</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 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 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" style="color:#EE38A4"><i class="fa fa-heart" ></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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<!-- ### $App Screen Footer ### -->
|
|
${require('html-loader!./_footer.html')}
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|