<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="//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 ---------->
<!--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-9 well admin-content" id="widgets">
Widgets
</div>
<div class="col-md-9 well admin-content" id="pages">
Pages
</div>
<div class="col-md-9 well admin-content" id="charts">
Charts
</div>
<div class="col-md-9 well admin-content" id="table">
Table
</div>
<div class="col-md-9 well admin-content" id="forms">
Forms
</div>
<div class="col-md-9 well admin-content" id="calender">
Calender
</div>
<div class="col-md-9 well admin-content" id="library">
Library
</div>
<div class="col-md-9 well admin-content" id="applications">
Applications
</div>
<div class="col-md-9 well 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: 'Open Sans', Bold;
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 has the key frames within each button */
@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;
}
}
/* 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;
}
/* */
/* */
/* */
$(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');
});
