<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="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>
<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 ="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">
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 to your profile !</h2>
<span class="header-left-city"> CONNECT YOUR FACEBOOK</span>
<!--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: 0px; padding-bottom: 50px;">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="fa fa-facebook"></i>
Facebook
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="fa fa-twitter"></i>
Twitter
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="fa fa-instagram"></i>
Instagram
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</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>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>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 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-5">
<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-5">
<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="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>
</form>
</div>
</section>
</div>
</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
*/
/*original styling*/
.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;
}
/*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: 25%;
}
.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;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
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%;
}
/* */
$(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();
});
});
