<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!--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">MY PROFILE</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="widgets">AUTOMATION</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="pages">INTEGRATIONS</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="charts">REQUEST A FLYER</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="table">BILLING</a></li>
<li><a href="http://www.jquery2dotnet.com" data-target-id="calender"><i class="fa fa-graduation-cap "></i> UNIVERSITY</a></li>
<br><br><br><br>
<li><a href="http://www.jquery2dotnet.com" data-target-id="forms"></i>LOGOUT</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>
</div>
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist" style = "background-color: white !important; margin-top: 0px; padding-top: 10px; padding-bottom: 0px;">
<li role="presentation" class="active">
<span class = "navlinks"> <a href = "#dashboard" data-toggle = "tab"> FIRST TIME </a></span>
</li>
<li role="presentation" class="active">
<span class = "navlinks"> <a href = "#mydashboard" data-toggle = "tab"> MY DASHBOARD </a></span>
</li>
<li role="presentation" class="disabled">
<span class = "navlinks"> <a href = "#mydetails" data-toggle = "tab">MY DETAILS</a></span>
</li>
<li role="presentation" class="disabled">
<span class = "navlinks"> <a href = "#accountlogins" data-toggle = "tab">ACCOUNT LOGINS</a></span>
</li>
</ul>
</div>
<!--the beginning of form-->
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="dashboard">
<div class="content2">
<span class="header-left-city">We need some more information to fill our your profile: </span>
<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="phone" 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>
<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-9 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-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">CONFIRM EMAIL</label>
<input type="email" class="form-control" name="confirmemail" 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="text" class="form-control" name="website" 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>
<div class="tab-pane" role="tabpanel" id="mydashboard">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<br><br>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
<div class="media">
<a class="avatar img-circle1 pull-left" href="#">
<img class="img-circle1" src="http://34.217.69.61/wp-content/uploads/2019/02/18622522_10154410876632064_3225012751583686224_n.jpg" style = " width: 80px !important;
margin: auto !important;
display: block !important;
height: 80px !important;
border-radius: 53%;
float: left !important;
margin-bottom: 10px !important;">
</a>
<a class=" pull-right" href="#">
<img class="media-object" src="http://34.217.69.61/wp-content/uploads/2019/03/profile-4.png" style = "border-radius: 0;
width: 80%;" >
</a>
<div class="media-body">
<h4 class="media-heading">Danny Lastname</h4>
<p><span>email@gmail.com </span></p>
<p><span> 1-800-123-1212 </span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- alert that you generate flyers from here-->
<style>
.alert-info{
color: #31708f !important;
background-color: #ffffff !important;
border-color: #CCCCCC !important;
}
</style>
<br>
<div class="col-md-9">
<div class="alert alert-info">
<a href="#" class="btn btn-xs btn-primary pull-right">REQUEST A FLYER</a>
Did you know you can request unlimited new listing, open house and sold flyers?
</div>
</div>
<!-- end alert that you generate flyers from here-->
<div class="col-md-9">
<p class ="creditcardtext"> UPCOMING POST</p>
<hr>
</div>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="mydetails">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<div class="col-xs-9 col-md-offset-0">
<div class="col-md-12" style = " margin-left: -36px;">
<!--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>
<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> <!-- group within profile to be updated -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="phone" class ="creditcardtext">EMAIL</label>
<input type="email" required="required" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="email@gmail.com" required/>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="city" class ="creditcardtext"> WEBSITE</label>
<input type="city" class="form-control" required="required" name="city" id="password" placeholder="www.website.com" required>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="phone" 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>
<div class="col-sm-12" style = "padding-top: 40px;">
<hr>
</div>
<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>
<div class="col-sm-12">
<hr>
<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-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: 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>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="accountlogins">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<div class="col-sm-6">
<div class="form-group">
<label for="phone" class ="creditcardtext">EMAIL</label>
<input type="email" required="required" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="email@gmail.com" required/>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="city" class ="creditcardtext"> CONFRIM EMAIL</label>
<input type="city" class="form-control" required="required" name="city" id="password" placeholder="email@gmaill.com" required>
</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: 191px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> CHANGE EMAIL</button>
</div>
<div class="col-sm-12">
<hr>
</div>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<div class="col-sm-6">
<div class="form-group">
<label for="phone" class ="creditcardtext">CHANGE PASSWORD</label>
<input type="email" required="required" class="form-control" id="phonenumber" aria-describedby="phonenumber" placeholder="*************" required/>
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="city" class ="creditcardtext"> CONFIRM NEW PASSWORD</label>
<input type="city" class="form-control" required="required" name="city" id="password" placeholder="*************" required>
</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: 200px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> CHANGE PASSWORD</button>
</div>
</div>
</div>
<!--the end of the 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, Firstname!</h2>
<span class ="creditcardtext"> 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="container">
<div class="row">
<section>
<div class="wizard">
<div class="header">
<div class="header-intro">
<div class="header-left">
<h2 class ="header2"> Welcome, Firstname!</h2>
<!--we will have the anchor points at the top of this page-->
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist" style = "background-color: white !important; margin-top: 0px; padding-top: 10px; padding-bottom: 0px;">
<li role="presentation" class="active">
<span class = "navlinks"> <a href = "#step1" data-toggle = "tab"> Facebook </a></span>
</li>
<li role="presentation" class="disabled">
<span class = "navlinks"> <a href = "#step2" data-toggle = "tab">Twitter </a></span>
</li>
<li role="presentation" class="disabled">
<span class = "navlinks"> <a href = "#step3" data-toggle = "tab">Instagram </a></span>
</li>
</ul>
</div>
<!--end of the form cycling -->
</div>
</div>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<p style = "width: 60%; padding-bottom: 30px;">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 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 class="bio">Add Your Facebook Manager:</p>
<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 class = "firstinfo2">
<img src="http://34.217.69.61/wp-content/uploads/2019/03/47258824_10155921801647503_7287465727760531456_n.jpg"/ style =" border-radius: 50% !important;
width: 120px;
height: 120px;">
</div>
</div>
</div>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 15px;" >
<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 YOUR 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; "> SKIP </button>
</div> <!-- form-group.// -->
</div>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<style>
.twitter{
border-radius: 0px !important;
height: 5% !important;
width: 5% !important;
padding-right: 10px;
}
</style>
<p> <img class = "twitter" src="http://34.217.69.61/wp-content/uploads/2019/03/twitter_logo_bird_transparent_png.png" />
If you want to connect your Twitter - it’s included! Just provide us with your logins and we’ll start posting there. </p>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 10px;" >
<div class="col-sm-3">
<div class="form-group">
<label for="email" class ="creditcardtext">TWITTER USERNAME</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@address.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Password" class ="creditcardtext">TWITTER PASSWORD</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div> <!-- form-group.// -->
</div>
</div>
</div>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 10px;" >
<div class="col-sm-4" 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 TWITTER </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; "> SKIP </button>
</div> <!-- form-group.// -->
</div>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<style>
.twitter{
border-radius: 0px !important;
height: 5% !important;
width: 5% !important;
padding-right: 10px;
}
</style>
<p> <img class = "twitter" src="http://34.217.69.61/wp-content/uploads/2019/03/insta.png" />
If you want to connect your Instagram - it’s included! Just provide us with your logins and we’ll start posting there. </p>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 10px;" >
<div class="col-sm-3">
<div class="form-group">
<label for="email" class ="creditcardtext">INSTAGRAM USERNAME</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@address.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Password" class ="creditcardtext">INSTAGRAM PASSWORD</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div> <!-- form-group.// -->
</div>
</div>
</div>
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 10px;" >
<div class="col-sm-4" 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 INSTAGRAM </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; "> SKIP </button>
</div> <!-- form-group.// -->
</div>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="charts">
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="header">
<div class="header-intro">
<div class="header-left">
<h2 class ="header2"> Welcome, Firstname!</h2>
<!--we will have the anchor points at the top of this page-->
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist" style = "background-color: white !important; margin-top: 0px; padding-top: 10px; padding-bottom: 0px;">
<li role="presentation" class="active">
<span class = "navlinks"> <a href = "#step11" data-toggle = "tab"> REQUEST A FLYER </a></span>
</li>
<li role="presentation" class="disabled" style ="width: 50%;">
<span class = "navlinks"> <a href = "#step22" data-toggle = "tab">VIEW PREVIOUS FLYERS </a></span>
</li>
</ul>
</div>
<!--end of the form cycling -->
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step11">
</div>
<div class="tab-pane" role="tabpanel" id="step22">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<p> Flyers generated previously </p>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<style>
.twitter{
border-radius: 0px !important;
height: 5% !important;
width: 5% !important;
padding-right: 10px;
}
</style>
<p> <img class = "twitter" src="http://34.217.69.61/wp-content/uploads/2019/03/insta.png" />
If you want to connect your Instagram - it’s included! Just provide us with your logins and we’ll start posting there. </p>
<div class="col-sm-5">
<div class="form-group">
<label for="email" class ="creditcardtext">INSTAGRAM USERNAME</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@address.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Password" class ="creditcardtext">INSTAGRAM PASSWORD</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div> <!-- form-group.// -->
</div>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="col-md-8 admin-content col-md-offset-1 admin-content" id="table">
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="header">
<div class="header-intro">
<div class="header-left">
<h2 class ="header2"> Welcome, Firstname!</h2>
<!--we will have the anchor points at the top of this page-->
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist" style = "background-color: white !important; margin-top: 0px; padding-top: 10px; padding-bottom: 0px;">
<li role="presentation" class="active">
<span class = "navlinks"> <a href = "#step111" data-toggle = "tab"> SAVED CARDS</a></span>
</li>
<li role="presentation" class="disabled">
<span class = "navlinks"> <a href = "#step222" data-toggle = "tab">BILLING HISTORY </a></span>
</li>
<li role="presentation" class="disabled">
<span class = "navlinks"> <a href = "#step33" data-toggle = "tab"> MY PLAN </a></span>
</li>
</ul>
</div>
<!--end of the form cycling -->
</div>
</div>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step111">
<h3> Manage your credit cards</h3>
<p> Choose a card to be used for Local Social Pro membership charges and purchases.Note: Any changes made here will also be made in your LSP account</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive table-hover table-bordered ">
<thead>
<tr class="noBorder">
<th>Default</th>
<th>Credit Card Number</th>
<th>Cardholder Name</th>
<th>Exp. Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="success"> <input type="checkbox" value=""></td>
<td> Mastercard ending in 5100</td>
<td> John Doe</td>
<td>11/2020</td>
<td><div class="btn-group">
<button type="button" class="btn btn-primary btn-sm">Options</button>
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Deactivate</a></li>
</ul>
</div> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="step222">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<div class="container">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>INVOICE ID</th>
<th>INVOICE DATE</th>
<th>DUE DATE </th>
<th>AMOUNT </th>
<th>STATUS</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>INV009797</td>
<td>06/29/2012</td>
<td>06/29/2012</td>
<td>$99.99</td>
<td>Paid</td>
<td><a> Download Invoice</a></td>
</tr>
<tr>
<td>INV009797</td>
<td>06/29/2012</td>
<td>06/29/2012</td>
<td>$99.99</td>
<td>Paid</td>
<td><a> Download Invoice</a></td>
</tr>
<tr>
<td>INV009797</td>
<td>06/29/2012</td>
<td>06/29/2012</td>
<td>$99.99</td>
<td>Paid</td>
<td><a> Download Invoice</a></td>
</tr>
<tr>
<td>INV009797</td>
<td>06/29/2012</td>
<td>06/29/2012</td>
<td>$99.99</td>
<td>Paid</td>
<td><a> Download Invoice</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<style>
.plan:before{
content: '✓';
color: #F0843C;
}
</style>
<div class="tab-pane" role="tabpanel" id="step33">
<div class="col-sm-12" style ="padding-left: 0; padding-right: 0; padding-top: 0px;" >
<div class="col-sm-12" style = "padding: 0 !important;
margin: 0 !important; border-bottom: 1px solid #dedede; padding-top: 40px !important;" >
<div id="accordion" class="panel-group" style = "background-color: #ffffff !important;
border-color: #fff !important; ">
<div class="panel panel-default">
<div class="panel-heading col-sm-6" style = "background-color: #ffffff !important;
border-color: #fff !important; padding: 0 !important;
margin: 0 !important;">
<h4 class="panel-title" >
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" style = "text-decoration: none;"> <h3 class = "maintext2" style = " margin-top: 0px;"> Elite Plan <span class="glyphicon glyphicon-chevron-down"></span> </h3><i> <small> <span style = "color:#38BEEF; ">Saving $80 off Regular Price </span> </small> </i> </a>
</h4>
</div>
<div class="panel-heading col-sm-6" style = "background-color: #ffffff !important;
border-color: #fff !important;">
<h1 id="price3" class="x-price" style="float: right; text-align: right; font-family:Open Sans, Regular; font-size: 30px; font-weight: 400; margin-top: 0px; " >$289<small><span style = " color:#3B5998;">/mo <span></small></h1>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-12" >
<div class="col-sm-5" id ="listitems" style="text-align: left; font-size: 10px; margin: 0; padding: 0;">
<ul>
<li class = "plan"> Facebook Design </li>
<li class = "plan">20 Posts on Your Social Media</li>
<li class = "plan"> 4 Just-Listed Videos </li>
</ul>
</div>
<div class="col-sm-4" id ="listitems" style="text-align: left; font-size: 10px; margin: 0; padding: 0;">
<ul>
<li class = "plan"> Local and National Articles</li>
<li class = "plan"> Beautiful Designed Assets </li>
<li class = "plan"> Unlimited Open House Flyers </li>
</ul>
</div>
<div class="col-sm-3" id ="listitems" style="text-align: left; margin: 0; padding: 0;">
<h3 class="subtext2" >CHANGE PLAN:</h3>
<select id="enterprise" style=" color:#3B5998;text-align:right; font-family Open Sans, Bold; width: 100%;
" onchange="document.getElementById('price3').innerHTML='$'+this.value">
<option value="49<small>/mo <small>" >Pro Plan</option>
<option value="99<small>/mo<small>">Ultimate Plan </option>
<option value="199<small>/mo<small>"> Platinum plan </option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
</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
*/
/*original styling*/
body{
padding:0px;
margin:0px;
font-family: 'Open Sans', sans-serif;
background-color: #F4F9FF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav {
line-height: 40px; padding-top: 60px; background-color:#4363a2;
}
.admin-content{
padding-top: 0px;
}
/*styling for the navigation tabs*/
.navlinks a{
color: #4363a2;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
display: inline-block;
padding-right: 60px;
font-family: 'Open Sans', sans-serif;
}
/*end of the navigation tabs*/
/* 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;
}
.content2 {
position: relative;
}
.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;
}
/*this is the styling for the form in the automation */
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 0px auto;
margin-bottom: 0;
}
.wizard > div.wizard-inner {
position: relative;
}
.wizard-inner {
background: white;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 16px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 33%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.navlinks{
font-family: Open Sans;
color: #3B5998;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
/*styling for the text in the upgradedable plan section */
.maintext2 {
color: #3B5998;
text-align: left;
font-weight: 700;
font-size: 25px;
padding-bottom: 1px;
font-family: Open Sans, Bold;
}
/*this handles the color pricing on the billing section*/
.x-price {
float: right;
font-family: Open Sans, Regular;
font-size: 30px;
font-weight: 300;
color: #3B5998;
}
/* this handles the text inside the dropdown tab in the billing section */
.subtext2 {
color: #3B5998;
font-size: 14px;
text-align: left;
padding-top: 9px;
font-family: Open Sans, Semibold;
}
.wizard .nav-tabs > li a {
width: 100%;
height: auto;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 0px;
}
.wizard h3 {
margin-top: 0;
}
@media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
/*styling for my plan in the billing section */
.noBorder td {
border: 0;
}
/*styling for the picture of credit card*/
.mastercard{
height: 30px !important;
width: 30px !important;
}
/*styling for the flyer generator */
$(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');
});
/*this this the movement from one form to one button to another button*/
$(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');
});
/*js for the cycling form in the integrations tab */
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
/* copy function in the facebook section */
$(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();
});
});
