Commit dd3285ef authored by Nameer AS's avatar Nameer AS

ne pages integrated

parent 4daf7d35
......@@ -10,10 +10,11 @@
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"dependencies": {
"@fortawesome/fontawesome": "^1.1.4",
"foundation-sites": "~6.4.1",
"jquery": ">=3.0.0",
"what-input": "^4.1.3",
"motion-ui": "~1.2.2"
"motion-ui": "~1.2.2",
"what-input": "^4.1.3"
},
"devDependencies": {
"babel-core": "^6.24.1",
......
......@@ -6,9 +6,11 @@ window.jQuery = window.$ = require("jquery");
import Foundation from 'foundation-sites';
require('./jquery.waypoints.min.js');
require('./jquery.counterup.js');
require('./jquery.hoverdir.js');
require('./SmoothScroll.js');
require('./owl.carousel.js');
require('@fortawesome/fontawesome')
require('./main.js');
\ No newline at end of file
......@@ -143,18 +143,11 @@ $(document).ready(function() {
parentItem.addClass('hide-to-top');
parentItem.siblings('.item').addClass('show-from-bottom');
});
$('.select-plan ul li').click(function() {
$(this).siblings().addBack().children().remove();
$(this).siblings().toggle();
var curTab = $(this).attr('data-plan');
$('#' + curTab).hide();
$(this).siblings().slideToggle();
$(this).parent().prepend(this);
$(this).parent().toggleClass('nnn');
});
$('.select-plan > ul> li:not(:first-child)').click(function() {
var _curr_tab = $(this).attr('data-plan');
console.log(_curr_tab)
$('#' + curTab).show();
});
});
\ No newline at end of file
......@@ -90,6 +90,9 @@ h1 {
h2 {
margin: 0;
&.padd-adj {
padding-bottom: 30px;
}
}
h6 {
......@@ -200,6 +203,64 @@ header {
background: #fff;
z-index: 9999;
padding: 10px 0 18px;
box-shadow: 0px 2px 19px -4px rgba(0, 0, 0, 0.36);
&.type-2 {
&.small {
.user-welcome {
top: -5px;
}
}
.language-bar {
flex: 1 0 50%;
}
.user-welcome {
position: relative;
top: -15px;
transition: all ease 0.5s;
font-size: 14px;
font-weight: bold;
span {
color: #cd202f;
}
a {
color: #000;
}
}
nav {
margin-top: 0 !important;
position: static;
background: transparent;
min-width: inherit;
height: auto;
padding: 0;
ul.vertical.menu {
height: auto !important;
flex-direction: row;
li {
padding: 0 19px;
&.active {
a {
color: #cd202f;
background: transparent;
}
}
a {
color: #000000;
padding: 0;
&:hover {
color: #cd202f;
&:before {
display: none;
}
}
}
}
}
&:before {
display: none;
}
}
}
.logo {
align-self: flex-end;
img {
......@@ -208,7 +269,6 @@ header {
}
}
&.small {
box-shadow: 0px 2px 19px -4px rgba(0, 0, 0, 0.36);
.logo {
img {
max-width: 120px;
......@@ -339,6 +399,7 @@ header {
font-size: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 0.3);
margin: 0 0 15px;
}
padding-top: 15px;
padding-bottom: 15px;
......@@ -346,7 +407,9 @@ header {
position: relative;
}
input,
textarea {
textarea,
select {
font-family: "Roboto", sans-serif;
background: transparent;
color: #fff;
border: none;
......@@ -364,6 +427,50 @@ header {
@extend input;
}
}
input {
&[type="radio"] {
position: absolute;
left: 0;
top: 0;
height: auto;
margin: 0;
outline: 0;
opacity: 0;
&:checked {
&+.checkmark:after {
display: block;
}
}
}
}
select {
background: url(../img/dropdown.png) no-repeat center right 12px !important;
color: rgba(255, 255, 255, 0.3) !important;
option {
color: #000 !important;
}
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 14px;
width: 14px;
background-color: #eee;
border: solid 1px #d8d8d8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&:after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #9e2323;
display: none;
}
}
label {
transform: translate3d(0, 5px, 0);
position: absolute;
......@@ -424,6 +531,46 @@ header {
position: static;
}
}
.panel {
font-size: 16px;
display: inline-block;
width: 100%;
margin: 0 0 25px;
border: solid 1px #d7d7d7;
.panel-head {
background: #9e2323;
color: #fff;
padding: 7px 15px;
font-size: 16px;
}
.panel-body {
float: left;
width: 100%;
padding: 0 15px;
.plan-type {
border-bottom: solid 1px #d7d7d7;
display: block;
padding: 15px 15px 10px;
margin: 0 -15px;
}
.plan-price {
display: inline-block;
width: 100%;
padding: 15px 0 10px;
}
.payment-type {
display: flex;
padding: 12px 0;
justify-content: space-between;
.radio-wrap {
position: relative;
display: flex;
align-items: center;
padding: 0 0 0 25px;
}
}
}
}
}
.hamburger-menu {
......@@ -1440,11 +1587,21 @@ footer {
margin: 0;
}
.register {
.unf-padding {
padding: 35px 0;
}
.full-height {
min-height: 100%;
padding: 70px 0;
}
.dark-bg {
background: #261b1b;
color: #fff;
}
.register {
padding: 70px 0;
.price {
color: #fff;
background: #cb022c;
......@@ -1458,6 +1615,92 @@ footer {
background: #261b1b;
color: #fff;
}
.plan-detail {
display: none;
}
}
&.settings {
background: transparent;
color: #000;
h2 {
padding-bottom: 40px;
}
.form-wrap {
.info {
color: #000;
}
label {
color: #000;
opacity: 1;
}
select {
color: #000 !important;
}
}
}
}
.search-result {
padding: 70px 0;
.sr-result {
display: flex;
flex-wrap: wrap;
.item-block {
flex: 1 1 50%;
}
}
h5 {
color: #cb022c;
font-size: 20px;
font-weight: normal;
margin: 0 0 20px;
}
p {
line-height: 25px;
font-size: 18px;
color: rgba(255, 255, 255, 0.3);
}
.item-block {
padding-bottom: 65px;
&:nth-child(2n+1) {
padding-right: 100px;
border-right: solid 1px #514949;
}
&:nth-child(2n+2) {
padding-left: 100px;
}
&:nth-child(n+3) {
padding-top: 65px;
border-top: solid 1px #514949;
}
}
}
.vx-table {
border-bottom: none;
border-color: transparent;
&.text-center {
th {
text-align: center;
}
}
thead,
tbody {
border: none;
}
tr,
th,
td {
border: solid 1px #d7d7d7;
padding: 10px 25px;
}
tr {
&:last-child {
border: solid 1px #d7d7d7;
}
i {
color: #cd202f;
}
}
}
......
......@@ -48,5 +48,6 @@
@include motion-ui-transitions;
@include motion-ui-animations;
@import 'owl.carousel';
@import 'fontawesome';
@import 'main';
@import 'responsive';
\ No newline at end of file
This diff is collapsed.
......@@ -15,9 +15,7 @@
</head>
<body>
{{> header}} {{> body}}
{{#ifpage 'dashboard' 'orders' 'account-settings' 'make-payment'}} {{> header-type-2}}{{> body}} {{/ifpage}} {{#unlesspage 'dashboard' 'orders' 'account-settings' 'make-payment' }} {{> header}} {{> body}} {{/unlesspage}}
<script src="{{root}}assets/js/app.js"></script>
</body>
......
<section class="register settings unf-padding full-height">
<div class="grid-container">
<h2>Account Settings </h2>
<div class="grid-x grid-padding-x">
<div class="large-12 medium-6 cell">
<div class="grid-x grid-padding-x form-wrap">
<div class="large-6 medium-6 cell">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Account Name *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Email *</label>
</div>
<div class=" cell">
<input type="password" placeholder="" required="">
<label for="">Password *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Address Line 1*</label>
</div>
<div class="cell">
<select>
<option value="" disabled selected>Country*</option>
<option value="">India</option>
<option value="">UAE</option>
</select>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Zip Code*</label>
</div>
<div class="cell">
<select>
<option value="" disabled selected>Phone Code*</option>
<option value="">+91</option>
<option value="">+97</option>
</select>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Exam Portal *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Username *</label>
</div>
<div class=" cell">
<input type="password" placeholder="" required="">
<label for="">Password Confirmation *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Address Line 1*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">City*</label>
</div>
<div class="cell">
<select>
<option value="" disabled selected>Time Zone*</option>
<option value="">UTC +11</option>
<option value="">UTC +10</option>
</select>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Phone Number*</label>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">I accept terms and conditions</label>
</div>
</div>
<div class="large-6 medium-6 cell ">
<span class="text-right info"><span class="red">*</span>Mandatory Fields</span>
</div>
<div class="large-12 medium-12 cell">
<a href="" class="button float-right dark-hover">Submit</a>
</div>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="unf-padding">
<div class="grid-container">
<h2 class="padd-adj">Dashboard </h2>
<div class="grid-x grid-padding-x ">
<div class="large-4 medium-6 cell">
<table class="unstriped vx-table text-center">
<thead>
<tr>
<th class="red">Credit Point</th>
<th>Balance Credit Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<div class="large-8 medium-6 cell">
<table class="unstriped vx-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Timezone</th>
<th>Country</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alimon</td>
<td>alimon.kr@pitsolutions.com</td>
<td>Kolkata</td>
<td>India</td>
<td>+91 999857587</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="unf-padding">
<form action="" class="form-wrap">
<div class="grid-container">
<h2 class="padd-adj">Make Payment </h2>
<div class="grid-x grid-padding-x">
<div class="large-5 medium-6 cell">
<div class="grid-x grid-padding-x">
<div class="large-12 medium-6 cell">
<div class="panel">
<div class="panel-head">Package</div>
<div class="panel-body">
<div class="plan-type">Basic</div>
<div class="plan-price">
<div class="cr-point float-left">800</div>
<div class="plan-value float-right"> $199.96</div>
</div>
</div>
</div>
</div>
<div class="large-12 medium-6 cell">
<div class="panel">
<div class="panel-head">Select Payment Mode</div>
<div class="panel-body">
<div class="payment-type">
<div class="radio-wrap">
<input type="radio" name="payment_method" checked>
<span class="checkmark"></span>
<img src="assets/img/card-pay.png" alt="">
</div>
<div class="radio-wrap">
<input type="radio" name="payment_method">
<span class="checkmark"></span>
<img src="assets/img/paypal.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="large-7 medium-6 cell"></div>
</div>
</div>
</form>
</section>
\ No newline at end of file
<section class="unf-padding">
<div class="grid-container">
<h2 class="padd-adj">Orders </h2>
<div class="grid-x grid-padding-x ">
<div class="large-12 medium-6 cell">
<table class="unstriped vx-table">
<thead>
<tr>
<th>#</th>
<th>Package</th>
<th>Quantity</th>
<th>Total Price</th>
<th>Credit Points</th>
<th>Renewal</th>
<th>Status</th>
<th>Created at</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="red">
Basic
</td>
<td>4</td>
<td> $199.96</td>
<td>800</td>
<td>No</td>
<td>Pending</td>
<td>March 05, 2018 at 12:08 PM</td>
<td><i class="fas fa-sync-alt"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="register">
<section class="register dark-bg unf-padding full-height">
<div class="grid-container">
<h2 class="text-center">Register </h2>
<span class="sub-text text-center">Choose the most suitable tariff plan for your requirements</span>
......@@ -31,6 +31,38 @@
<a href="register.html" class="button">Sign Up</a>
</div>
</div>
<div class="plan-detail" id="basic-plus">
<div class="card-price">
<sup>$</sup>49.99
</div>
<div class="card-section">
<ul>
<li>100 Credit Points*</li>
<li>Unlimited Exams</li>
<li>Unlimited Questions</li>
<li>Various Question Types</li>
<li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li>
</ul>
<a href="register.html" class="button">Sign Up</a>
</div>
</div>
<div class="plan-detail" id="premium">
<div class="card-price">
<sup>$</sup>49.99
</div>
<div class="card-section">
<ul>
<li>100 Credit Points*</li>
<li>Unlimited Exams</li>
<li>Unlimited Questions</li>
<li>Various Question Types</li>
<li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li>
</ul>
<a href="register.html" class="button">Sign Up</a>
</div>
</div>
</div>
</div>
<div class="large-9 medium-6 cell">
......@@ -52,17 +84,24 @@
<input type="text" placeholder="" required="">
<label for="">Address Line 1*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Name*</label>
<div class="cell">
<select>
<option value="" disabled selected>Country*</option>
<option value="">India</option>
<option value="">UAE</option>
</select>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Zip Code*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Name*</label>
<div class="cell">
<select>
<option value="" disabled selected>Phone Code*</option>
<option value="">+91</option>
<option value="">+97</option>
</select>
</div>
</div>
<div class="large-6 medium-6 cell">
......@@ -86,9 +125,12 @@
<input type="text" placeholder="" required="">
<label for="">City*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Name*</label>
<div class="cell">
<select>
<option value="" disabled selected>Time Zone*</option>
<option value="">UTC +11</option>
<option value="">UTC +10</option>
</select>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
......
<section class="dark-bg full-height search-result">
<div class="grid-container">
<h2><span class="red">Search </span>Result </h2>
<span class="sub-text">Suitable results for your searching</span>
<div class="sr-result">
<div class="item-block">
<h5>Home</h5>
<p>Demo VirtualX is a fully automated exam management system which can significantly help your organization to improve the efficiency when conducting online examinations. Support We are there to help. Our committed VirtualX team will be always
there to provide all assistance and support...</p>
</div>
<div class="item-block">
<h5>Features</h5>
<p>It‘s passion, not only work! We have worked diligently to bring you our online examination product that we are proud of. VirtualX was developed keeping in mind all the needs of an online examination system. The VirtualX team throughout
the development process ensured that the VirtualX delivers high performance yet remains simple...</p>
</div>
<div class="item-block">
<h5>Services</h5>
<p>It‘s passion, not only work! We have worked diligently to bring you our online examination product that we are proud of. VirtualX was developed keeping in mind all the needs of an online examination system. The VirtualX team throughout
the development process ensured that the VirtualX delivers high performance yet remains simple...</p>
</div>
<div class="item-block">
<h5>Pricing</h5>
<p>Demo VirtualX is a fully automated exam management system which can significantly help your organization to improve the efficiency when conducting online examinations. Support We are there to help. Our committed VirtualX team will be always
there to provide all assistance and support...</p>
</div>
</div>
</div>
</section>
\ No newline at end of file
<header class="type-2">
<div class="grid-container fluid">
<div class="top-block">
<div class="logo">
<a href="">
<img src="assets/img/logo.png" alt="">
</a>
</div>
<div class="navigation-wrap">
<div class="language-bar">
<ul>
<li class="active"><a href="">English</a></li>
<li class="ar"><a href="">العربية</a></li>
</ul>
</div>
<div class="user-welcome">
<span>Welcome</span>
<a href="">Alimonkhader</a>
</div>
<nav class="navigation">
<ul class="vertical menu">
<li>
<a href=""> Dashboard </a>
</li>
<li>
<a href=""> Orders </a>
</li>
<li>
<a href=""> Settings </a>
</li>
<li class="active">
<a href=""><b> Log Out</b> </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment