<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
<!--All rights reserved LSP
Author: Brian Castaneda
-->
<div class="container" style = "margin-left: 0px; ">
<div class="row">
<div class="col-md-3" style = "background-color: #4363a2; height: 143vh;">
<div class="sidebar-avatar">
<img src="http://34.217.69.61/wp-content/uploads/2019/02/logo-white.png" id ="logo" class="img-responsive center-block" alt="Logo" style ="border-radius:0; height: auto; width: 100%; padding: 30px 30px 0px 30px ;">
</div>
<ul class="nav nav-pills nav-stacked admin-menu">
<li class="active" style = "margin-top: 50px;"><a href="#" data-target-id="home"><i class="fa fa-home fa-fw"></i>MY PROFILE</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="widgets"><i class="fa fa-list-alt fa-fw"></i>AUTOMATION</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="pages"><i class="fa fa-file-o fa-fw"></i>INTEGRATIONS</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="charts"><i class="fa fa-bar-chart-o fa-fw"></i>REQUEST A FLYER</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="table"><i class="fa fa-table fa-fw"></i>BILLING</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="forms"><i class="fa fa-tasks fa-fw"></i>LOGOUT</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="calender"><i class="fa fa-calendar fa-fw"></i>UNIVERSITY</a></li>
</ul>
</div>
<div class="col-md-8 admin-content col-md-offset-1" id="home">
<div class="header">
<div class="header-intro">
<div class="header-left">
<h2 class ="header2"> Welcome, Firstname!</h2>
</div>
</div>
<ul class="header-navigation">
<li class="navigation-item">
<a href="#" class="navigation-item-link">DASHBOARD</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-item-link">MY DETAILS</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-item-link">ACCOUNT LOGINS</a>
</li>
</ul>
<span class="header-left-city">We need some more information to fill our your profile: </span>
</div>
<div class="stepwizard col-md-offset-0">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle" style =" border-radius: 40px;">1</a>
<p>Step 1</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"style ="border-radius: 40px;">2</a>
<p>Step 2</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled" style ="border-radius: 40px;">3</a>
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-9 col-md-offset-0">
<div class="col-md-12" style = " margin-left: -36px;">
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">PHONE NUMBER</label>
<input type="phonenumber" required="required" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="(123) 800-1212" required/>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="city" class ="creditcardtext">CITY </label>
<input type="city" class="form-control" required="required" name="city" id="password" placeholder="Los Angeles" required>
</div> <!-- form-group.// -->
</div>
<!--Scriptin-->
<style class="cp-pen-styles">#app {
text-align: center;
}
img {
width: 40%;
margin: auto;
display: block;
border-radius: 53%;
float: left;
margin-bottom: 10px;
}
button {
}</style>
<div class="col-sm-6">
<div class="form-group">
<script>
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
</script>
<label for="headshot" class ="creditcardtext">UPLOAD HEADSHOT <span class="glyphicon glyphicon-question-sign append text-info tip" data-tip="tip-first" ></span> </label>
<!-- Tips content -->
<div id="tip-first" class="tip-content hidden" style = "width: 800px;">
<div class="container mt-5">
<p style = "color:black !important; font-size: 22px !important; ">This image will be used in your personalized graphics</p>
<p style = "color:black !important;font-size: 22px !important;">For best results please upload a High Quality image where your shoulders are visible.</p>
<div class="row" style = " display: flex;
align-items: center;
justify-content: center;">
<div class="col-sm-3" >
<img src="http://34.217.69.61/wp-content/uploads/2019/03/image-2.png" alt="Rounded Image" class="rounded img-fluid">
</div>
<div class="col-sm-3">
<img src="http://34.217.69.61/wp-content/uploads/2019/03/image-4.png" alt="Rounded Image" class="rounded img-fluid">
</div>
</div>
</div>
</div>
<div id="app">
<div v-if="!image">
<input type="file" @change="onFileChange">
</div>
<div v-else>
<img :src="image" />
<button @click="removeImage" style = "float:left;">Remove image</button>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://rawgit.com/vuejs/vue/master/dist/vue.js'></script>
<script >'use strict';
new Vue({
el: '#app',
data: {
image: ''
},
methods: {
onFileChange: function onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImage(files[0]);
},
createImage: function createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function (e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function removeImage(e) {
this.image = '';
}
}
});
//# sourceURL=pen.js
</script>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="Password" class ="creditcardtext">UPLOAD COMPANY LOGO</label>
<style class="cp-pen-styles">#app {
text-align: center;
}
img {
width: 40%;
margin: auto;
display: block;
border-radius: 53%;
float: left;
margin-bottom: 10px;
}
button {
}</style></head><body>
<div id="app1">
<div v-if="!image">
<input type="file" @change="onFileChange">
</div>
<div v-else>
<img :src="image" />
<button @click="removeImage" style = "float:left;">Remove image</button>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://rawgit.com/vuejs/vue/master/dist/vue.js'></script>
<script >'use strict';
new Vue({
el: '#app1',
data: {
image: ''
},
methods: {
onFileChange: function onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImage(files[0]);
},
createImage: function createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function (e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function removeImage(e) {
this.image = '';
}
}
});
//# sourceURL=pen.js
</script>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-12" style = "padding-top: 40px;">
<div class="col-sm-6" style = "padding-top: 40px;">
<button class="btn btn-primary nextBtn btn-lg pull-left" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #F0843C;
height: 57px;
width: 131px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> NEXT </button>
</div>
<div class="col-sm-6"> </div>
</div>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-0">
<div class="col-sm-12" style = " margin-left: -36px;" >
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">AREA OF EXPERTISE</label>
<input type="text" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="Buyer's Agent">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">AREAS OF SERVICE</label>
<input type="city" class="form-control" name="city" id="password" placeholder="South California">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="phonenumber" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="Seller's Agent">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="city" class="form-control" name="city" id="password" placeholder="Santa Monica">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="phonenumber" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="Luxury Homes">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="city" class="form-control" name="city" id="password" placeholder="Los Angeles">
</div> <!-- form-group.// -->
</div>
<button class="btn btn-primary nextBtn btn-lg pull-left" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #F0843C;
height: 57px;
width: 131px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> NEXT </button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-0">
<div class="col-md-12" style = " margin-left: -36px;">
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">CONFIRM EMAIL</label>
<input type="city" class="form-control" name="city" id="password" placeholder="prepopulated@gmaill.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">WEBSITE</label>
<input type="city" class="form-control" name="city" id="password" placeholder="zillow.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="email" class ="creditcardtext">TAGLINE (optional)</label>
<input type="city" class="form-control" name="city" id="password" placeholder="zillow.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">DRE/CAIBRE(optional)</label>
<input type="city" class="form-control" name="city" id="password" placeholder="LIC: #12345">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-9">
<button class="btn btn-primary nextBtn btn-lg pull-left" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #F0843C;
height: 57px;
width: 191px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> SAVE PROFILE </button>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="widgets">
<div class="header">
<div class="header-intro">
<div class="header-left">
<h2 class ="header2"> Welcome first name!</h2>
<span class="header-left-city"> AUTOMATION</span>
<hr>
<p>Automatic Publishing is on, you get the following by default: </p>
</div>
</div>
</div>
<div class="col-sm-12" >
<div class="col-sm-4" id ="listitems" style="text-align: left; font-size: 14px; margin: 0; padding: 0;">
<ul >
<li> <span class="glyphicon glyphicon-ok" style = "color:#F0843C;"></span> Facebook Design </li>
<li> <span class="glyphicon glyphicon-ok" style = "color:#F0843C;"></span> 20 Posts on Your Social Media</li>
<li> <span class="glyphicon glyphicon-ok" style = "color:#F0843C;"></span> 4 Just-Listed Videos </li>
</ul>
</div>
<div class="col-sm-5" id ="listitems" style="text-align: left; font-size: 14px; margin: 0; padding: 0;">
<ul>
<li> <span class="glyphicon glyphicon-ok" style = "color:#F0843C;"></span> Local and National Articles</li>
<li><span class="glyphicon glyphicon-ok" style = "color:#F0843C;"></span> Beautiful Designed Assets </li>
<li> <span class="glyphicon glyphicon-ok" style = "color:#F0843C;"></span> Unlimited Open House Flyers </li>
</ul>
</div>
<div class="col-sm-3" id ="listitems" style="text-align: left; font-size: 14px; margin: 0; padding: 0;">
</div>
<div class="col-sm-9" id ="listitems" style="text-align: left; font-size: 14px; margin: 0; padding: 0;">
<label class ="creditcardtext">REQUEST AUTOMATION CHANGE</label>
<hr>
</div>
<label class = "creditcardtext"> Explain what would you like to change about the automatic posts? </label>
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8" style = " padding: 0 !important;
margin: 0 !important;">
<div class="panel panel-default">
<div class="panel-body">
<form accept-charset="UTF-8" action="" method="POST">
<textarea class="form-control counted" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
<button class="subscribe btn btn-primary btn-block" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #F0843C;
height: 57px;
width: 191px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 18px;
font-weight: 100; "> REQUEST CHANGE </button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="pages">
<div class="header">
<div class="header-intro">
<div class="header-left">
<h2 class ="header2"> Welcome to your profile !</h2>
<span class="header-left-city"> CONNECT YOUR FACEBOOK</span>
<hr>
<p>To get started we need you to grant us access to your Facebook business page. Please go to your Business Page, click Setting on top right, and go to Page Roles tab. Enter “Danny Alsaffar” and set Role to Admin. Once added click Next </p>
</div>
</div>
</div>
<div class="content">
<div class="card">
<div class="firstinfo"><img src="http://34.217.69.61/wp-content/uploads/2019/03/social-facebook-1489-1488-1494-1500-1497-1491-1505-1493-1499-1504-1493-1514-1508-1512-1505-1493-1501-1491-1497-1490-1497-1496-1500-1497-buzzlead-16424.png" />
<div class="profileinfo">
<p>Add Your Facebook Manager:</p>
<div class="container">
<div class="input-group">
<style>
input{
color:#ff0000;
font: 1em/1.25em Arial, Helvetica, sans-serif;
}
</style>
<input type="text" style="color:#3B5998; font-size: 20px; " id="copyTarget" class="form-control" value="Danny Alsaffar">
<span id="copyButton" class="input-group-addon btn" title="Click to copy"> <strong> <span style = "color: white; ">COPY </span></strong>
</span>
</div>
</div>
</div>
<img style=" border-radius: 50%;
width: 120px;
height: 120px;" src="http://34.217.69.61/wp-content/uploads/2019/03/47258824_10155921801647503_7287465727760531456_n.jpg" />
</div>
</div>
</div>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 100px;" >
<div class="col-sm-6" style = "padding-top: 30px;">
<button class="subscribe btn btn-primary btn-block" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #38BEEF;
height: 57px;
width: 285px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> CONNECT FACEBOOK </button>
</div> <div class="col-sm-6" style = "padding-top: 30px;">
<button class="subscribe btn btn-primary btn-block" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #F0843C;
height: 57px;
width: 131px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> NEXT </button>
</div> <!-- form-group.// -->
</div>
</div>
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="charts">
REQUEST A FLYER
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="table">
BILLING
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="forms">
LOGOUT
</div>
<div class="col-md-9 admin-content" id="calender">
Calender
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="library">
Library
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="applications">
Applications
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="settings">
Settings
</div>
</div>
</div>
/*All rights reserved LSP
Author: Brian Castaneda
*/
.nav {
line-height: 40px; padding-top: 60px; background-color:#4363a2;
}
.admin-content{
padding-top: 40px;
}
/* Styling for the side bar links */
.nav-pills>li>a {
border-radius: 5px;
color: white;
font-family: Open Sans;
}
/* Styling for the side bar links */
.nav-pills>li>a:hover {
border-radius: 5px;
color: black;
font-family: Open Sans;
text-decoration: underline;
}
/*styling for the body text in the user panel*/
/* tooltip link */
.tip {
display: inline-block;
cursor: pointer;
}
/* Styling for the inside on the tool tip, when scrolled over it will bring up a moddle and the moddle has to fit to pictures along with all the text
right now its not working on chrome but it is working on safary
*/
.tooltip-inner {
max-width: 80%;
/* If max-width does not work, try using width instead */
width: 80%;
background-color: white;
}
/* tooltip content */
.tooltip h2 {
white-space: nowrap;
width: 400px;
color: black;
}
/*end tool tip stying*/
.navigation-item-link:hover:after {
width: 100%;
}
/*styling for the mini tabs within the user profile*/
.header-navigation .navigation-item-link:after {
content: '';
display: block;
width: 0;
height: 4px;
background-color: #389AFA;
position: relative;
bottom: -20px;
}
.header-navigation .navigation-item-link:hover {
color: black;
}
/*styling for the links at the top of the user profile page*/
.header-navigation .navigation-item-link {
color: #7e8a9b;
font-weight: bold;
text-transform: uppercase;
font-size: 1rem;
display: inline-block;
}
.header-navigation .navigation-item {
margin-right: 2.85rem;
}
.header-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 20px;
}
/*styling for the hover event within the users profile*/
.header-left-link:hover {
text-decoration: underline;
color: #7e8a9b;
}
.header-left-link {
color: #3da3f9;
margin-left: 0.75rem;
}
.header-left-city:after {
content: '';
display: inline-block;
width: 2px;
height: 2px;
background-color: #C2C8CF;
border-radius: 50%;
position: relative;
left: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.header-left-city {
margin-left: 0.0rem;
color: #F0843C;
}
.header2 {
font-weight: bold;
margin-bottom: 1.43rem;
font-size: 44px;
font-family: Pacifico;
color: #4363a2;
}
.header {
padding: 2.85rem .0rem 0;
border-bottom: none;
}
.header-intro, .header-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header-intro {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 2.85rem;
}
.header-right {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
/*end of the header styling*/
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
/*styling for the step wizard, this makes the buttons horizontal*/
.stepwizard-step {
display: table-cell;
text-align: left;
padding-top: 30px;
position: relative;
}
/*styling for the step wizard, this makes the buttons turn a different color on the next step*/
.stepwizard-row:before {
top: 45px;
bottom: 0;
position: absolute;
content: " ";
width: 69%;
text-align: left;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
/*this draws the table so we can see the line in between the buttons*/
.stepwizard {
display: table;
width: 50%;
position: relative;
}
/* this links the line with the buttons */
.stepwizard-row {
display: table-row;
}
/* this is the space from the circles and the header at the top*/
.stepwizard-step p {
margin-top: 10px;
}
/* This is the blue text for the credit card headers */
.creditcardtext{
color: #3B5998;
font-family: "Open Sans"; font-size: 14px !important; font-style: normal; font-variant: normal; font-weight: 600; line-height: 26.4px;
padding-top: 20px;
}
/* styling for blue line under the links in the mini user navbar */
.navigation-item-link:hover:after {
width: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* styling for the card with dannys picture within the linking of social media in intergrations*/
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";
@import "https://fonts.googleapis.com/css?family=Pacifico:300,400";
.badgescard,
.firstinfo {
display: flex;
justify-content: center;
align-items: center;
}
.input-group {
margin-top: 30px;
position: relative;
}
.input-group {
position: relative;
}
.input-group-addon {
border: none
}
.linkname {
display: none;
}
#copyButton {
cursor: pointer;
background: #38BEEF;
}
#copyTarget {
border-left: none;
}
.copied {
opacity: 1;
position: absolute;
left: 75px;}
@media (min-width: 768px) {
.copied {left: 35px}
.linkname {
display: block;
background: #3B3E45;
color: #fff;
}
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.content {
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 500px;
min-height: 100px;
padding: 20px;
border-radius: 3px;
background-color: white;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
background-color:#F2FAFD;
}
.card:after {
content: '';
display: block;
width: 190px;
height: 300px;
background: #F2FAFD;
position: absolute;
animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}
.badgescard {
padding: 10px 20px;
border-radius: 3px;
background-color: #00bcd4;
color:#fff;
width: 480px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: absolute;
z-index: -1;
left: 10px;
bottom: 10px;
animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
}
.badgescard span {
font-size: 1.6em;
margin: 0px 6px;
opacity: 0.6;
}
.firstinfo {
flex-direction: row;
z-index: 2;
position: relative;
}
.firstinfo img {
border-radius: 0%;
width: 40px;
height: 86px;
}
.firstinfo .profileinfo {
padding: 0px 20px;
}
.firstinfo .profileinfo h1 {
font-size: 1.8em;
}
.firstinfo .profileinfo h3 {
font-size: 1.2em;
color: #00bcd4;
font-style: italic;
}
.firstinfo .profileinfo p.bio {
padding: 10px 0px;
color: #5A5A5A;
line-height: 1.2;
font-style: initial;
}
@keyframes animatop {
0% {
opacity: 0;
bottom: -500px;
}
100% {
opacity: 1;
bottom: 0px;
}
}
@keyframes animainfos {
0% {
bottom: 10px;
}
100% {
bottom: -42px;
}
}
@keyframes rotatemagic {
0% {
opacity: 0;
transform: rotate(0deg);
top: -24px;
left: -253px;
}
100% {
transform: rotate(-30deg);
top: -24px;
left: -78px;
}
}
body{
font-family: 'Open Sans', sans-serif;
}
/* */
/* */
$(document).ready(function()
{
var navItems = $('.admin-menu li > a');
var navListItems = $('.admin-menu li');
var allWells = $('.admin-content');
var allWellsExceptFirst = $('.admin-content:not(:first)');
allWellsExceptFirst.hide();
navItems.click(function(e)
{
e.preventDefault();
navListItems.removeClass('active');
$(this).closest('li').addClass('active');
allWells.hide();
var target = $(this).attr('data-target-id');
$('#' + target).show();
});
});
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
