profile.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Wizdwarfs</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/profile.css">
<!-- <script src="https://js.pusher.com/7.0/pusher.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/fortmatic@latest/dist/fortmatic.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.min.js"></script>
</head>
<body>
<div class='main-dashboard-div'>
<nav class="navbar navbar-expand-md navbar-light custom-navbar" style=" background-color: #ededed;display: flex;">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" alt="Logo" class="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown" style="position: absolute;left: 37pc;">
<ul class="navbar-nav">
<li class="nav-item active pl-3">
<a class="nav-link" href="/dashboard">
<i class="fa fa-home icon-light" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item dropdown pl-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item active" href="/messages" title="Private. These message will dispear after few seconds."><i class="fa fa-envelope-o" aria-hidden="true"></i> Private </a>
<a class="dropdown-item" href="/messages" title="Gossips"> <i class="fa fa-comments-o" aria-hidden="true"></i> Public </a>
</div>
</li>
<li class="nav-item dropdown pl-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item active" href="/dashboard/profile" title="User will edit any information in the profile"><i class="fa fa-sliders" aria-hidden="true"></i>
Edit Your Profile
</a>
<a class="dropdown-item" href="/dashbaord/setting" title="User Preferences "><i class="fa fa-cogs" aria-hidden="true"></i>
Preferences
</a>
<a class="dropdown-item" href="/logout" title="Lock the account"><i class="fa fa-sign-out icon icon-light"
aria-hidden="true"></i>Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="profile-image-form" style="position: relative; top:-90pc;">
<form class="profile-form" action="/dashboard/profile" enctype="multipart/form-data" method="post">
<div class="avatar" name="avato-pic" id="avato-pics">
<img src="{{ .Avatar}}" alt="Avatar" style="display:unset;transform-style: preserve-3d;transform: scale(1.0);position: relative;top: 1pc;left: 21px;z-index: 2;">
</div>
<div class="photoBtn" style=" position: absolute;top: 31pc;left: 45pc;transform: scale(1.7);">
<p>
<button class="btn btn-light" type="button" data-toggle="collapse" data-target="#collapsePhoto" aria-expanded="false" aria-controls="collapsePhoto" title="upload your profile picture" style="position: absolute;top: -41px;left: -27px;">
<i class="fa fa-picture-o" aria-hidden="true"> Upload your Picture </i>
</button>
</p>
<div class="collapse" id="collapsePhoto">
<div class="card card-body" style="position: absolute; top: 40px; left: -207px; border-radius:35px; box-shadow: 5px 5px whitesmoke; height:325px; overflow: auto; width: 38rem; display: flex;">
<h5 class="card-title"></h5>
<div class="float-card">
<input type="file" class="myphotos" name="profile-input" accept="images/*">
<div class="line"></div>
<div class="photo-preview"></div>
<button type="button" class="btn btn-light btns-links" title="Avatar Filters">
<i class="fa fa-filter" aria-hidden="true" style="color: slategray;"></i>
</button>
<button type="submit" class="btn btn-light uploads" title="avatar">
<i class="fa fa-check-square" aria-hidden="true" style="color: slategray;"></i>
</button>
<button class="btn btn-light zoomin" type="button" title="Zoom in" style="position: relative;top: -215px;left: 241px;transform: scale(0.6);">
<i class="fa fa-plus" aria-hidden="true" style="color: slategray;"></i>
</button>
<button class="btn btn-light zoomout" type="button" title="Zoom out" style="position: relative;top: -215px;left: 295px;transform: scale(0.6);">
<i class="fa fa-minus" aria-hidden="true" style="color: slategray;"></i>
</button>
<input type="number" placeholder="0000" class="aspect-ratio" name="aspect-ratio" value="0" id="aspect-ratio" readOnly="true" style="position: relative;top: -210px;left: 189px;transform: scale(0.6);width: 5pc;color: silver;border-radius: 10px;border: none;font-size: x-large;">
<input class="date-picker" name="date" type="date" style="visibility: visible;">
<img name="profile-avatar" class="avatars"/>
<!-- <div class="hyerlink">
<i class="fa fa-link" aria-hidden="true"> </i> <input class="cdr" type="checkbox" name="cdrlink"/> View CDR_LINK
</div> -->
</div>
</div>
</div>
</div>
</form>
</div>
<section class="editor" style="position: relative;top: -13pc;left: -50px;">
<div class="container">
<ul class="nav flex-column">
<li class="nav-item">
<i class="fa fa-user" aria-hidden="true" style="color: slategray;"> Biography </i>
<span class="badge badge-success" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-users" aria-hidden="true" style="color: slategray;"> Family </i>
<span class="badge badge-danger" style="display:none;"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-home" aria-hidden="true" style="color: slategray;"> Address </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-graduation-cap" aria-hidden="true" style="color: slategray;"> Education </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-university" aria-hidden="true" style="color: slategray;"> Research </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-heart" aria-hidden="true" style="color: slategray;"> Relationship </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-building" aria-hidden="true" style="color: slategray;"> Work </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-at" aria-hidden="true" style="color: slategray;"> Contact </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
<li class="nav-item">
<i class="fa fa-trophy" aria-hidden="true" style="color: slategray;"> Achievements </i>
<span class="badge badge-danger" style="display:none"> 0 </span>
</li>
</ul>
<form class="edit-form" action="/dashboard/profile/edit" method="post">
<div class="name" style="position: relative;top: -17pc;left: 20pc;">
<input type="text" class="name" placeholder="First Name" id="name" name="name" style="width: 26pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: large;">
<input type="text" class="sufix" placeholder="Mr" id="sufix" name="sufix" style="width: 9pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="family" style="position: relative;top: -15pc;left: 20pc;">
<input type="text" class="family" placeholder="Family Name" id="family" name="family" style="width: 26pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="text" class="relationship" placeholder="Relationship Status" name="status" id="relationship" style="width: 9pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="address" style="position: relative;top: -13pc;left: 20pc;">
<input type="text" class="address" placeholder="Home Address" id="home" name="home" style="width: 26pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="zip" class="zip" placeholder="Zip-Code" id="zip" name="zip" style="width: 9pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="text" class="city" placeholder="LA,USA" id="city" name="city" style="width: 9pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="education" style="position: relative;top: -11pc;left: 20pc;">
<input type="text" class="education" placeholder="Alumni" id="alumni" name="alumni" style="width: 26pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="text" class="programme" placeholder="Computer Science" id="programme" name="programme" style="width: 10pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="research" style="position: relative;top: -9pc;left: 20pc;">
<input type="number" class="research" placeholder="Research Already Published" id="research" name="research" min="0" max="1"style="width: 15pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="url" class="research-profile" placeholder="Citation / Researcher Profile Link" id="citation" name="citation" style="width: 18pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="work" style="position: relative;top: -7pc;left: 20pc;">
<input type="text" class="work" placeholder="Company name" id="work" name="work" style="width: 26pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="date" class="joined" placeholder="Joined Date" id="joined" name="joined" style="width: 10pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="contact" style="position: relative;top: -5pc;left: 20pc;">
<input type="email" class="email" placeholder=" Email Address" id="email" name="email" style="width: 26pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
<input type="tel" class="phone" placeholder="Phone Number" id="phone" name="phone" style="width: 10pc;border-radius: 10px;height: 4pc;cursor: text;color: slategray;font-size: medium;">
</div>
<div class="achievement" style="position: relative;top: -3pc;left: 20pc;">
<input type="text" class="achievement" name="achievement" placeholder=" Your Achievements" id="achievement" style="width: 50pc;border-radius: 10px;height: 10pc;cursor: text;color: slategray;font-size: medium;">
<span style="width: 50pc;border-radius: 10px;height: 10pc;cursor: text;color: slategray;font-size: medium; position:absolute; top: 7pc; left: 45pc;">0/300</span>
</div>
<div class="complete" style="position: absolute;left: 47pc;">
<button type="submit" class="btn btn-success" style="width:10pc;">
<i class="fa fa-edit" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<!-- <script src="/js/profile.js"></script> -->
<script>
// dom Elements attribues
const _b01 = document.getElementsByClassName('zoomin')[0];
const _b02 = document.getElementsByClassName('zoomout')[0];
const _b03 = document.getElementsByClassName('uploads')[0];
// const _b04 = document.getElementsByClassName('btns-links')[0];
const _b05 = document.getElementsByClassName('photoBtn')[0];
const _d01 = document.getElementsByClassName('float-card')[0];
const _d02 = document.getElementsByClassName('line')[0];
const _d03 = document.getElementsByClassName('avatar')[0];
const _d04 = document.getElementsByClassName('main-dashboard-div')[0];
const _d05 = document.getElementsByClassName('editor')[0];
// const _d05 = document.getElementsByClassName('hyerlink')[0];
const _pp01 = document.getElementsByClassName('photo-preview')[0];
const _n01 = document.getElementsByClassName('flex-column')[0];
const _i01 = document.getElementsByClassName('aspect-ratio')[0];
const _i02 = document.getElementsByClassName('myphotos')[0];
const _i03 = document.getElementsByClassName('name')[0];
const _i04 = document.getElementsByClassName('family')[0];
const _i05 = document.getElementsByClassName('address')[0];
const _i06 = document.getElementsByClassName('education')[0];
const _i07 = document.getElementsByClassName('research')[0];
const _i08 = document.getElementsByClassName('sufix')[0];
const _i09 = document.getElementsByClassName('work')[0];
const _i10 = document.getElementsByClassName('contact')[0];
const _i11 = document.getElementsByClassName('achievement')[0];
const _bx00 = document.getElementsByClassName('date-picker')[0];
// global parameters
let counter = 0; // counter return zoom level
let preview = null; // preview return upload image as preview object
let waveform = null; // waveform return sine & cosine waveform equation
let pi_wave = 1; // pi wave animation starting value
let end = 360; // end return animation terminate value
let _count = 0;
let _standard_invoice = 1.00;
let _mostly_invoice = 10.00;
let _prenium_invoice = 50.00;
// const attributes
const API_KEY = "pk_test_1089727802E62684";
const Production_API_KEY = "pk_live_59E7F894747B33ED";
// local attributes
let valid_price = 1.00;
// clear the interval for waveforms animation
clearInterval(waveform);
// image will be upload
_i02.addEventListener('change', (event)=>{
// if image dimensions is quite large then discard the image
if (event.target.files[0].size >= 45327){
alert('Image size is quite large'); return
}
// start waveform animation for 20 sec;
waveform = setInterval(animateLineEffect, 20);
// get uplaoded image and translate into web url
preview = document.createElement('img');
preview.src = URL.createObjectURL(event.target.files[0]);
preview.width = 200;
preview.height = 200;
preview.style.position = 'absolute';
preview.style.top = '20px';
preview.style.left = '19px';
preview.style.borderRadius = '48px';
// _d04.style.width = '190vh';
// _d04.style.height = '10vh';
_d01.children[2].appendChild(preview);
});
// Zoom Level postive
_b01.addEventListener('click', ()=>{
if (counter !== 20){
counter+=2;
_i01.value = String(counter);
}else{
alert('Zoom in value should be less than 20');
}
});
// Zoom Level Negative
_b02.addEventListener('click', () => {
if (counter !== 0){
counter-= 1;
_i01.value = String(counter);
}else{
alert('Zoom out value should be greater than 0');
}
});
// Animate Line Effect
function animateLineEffect(){
// if waveform at sine peek or cosine low frequency
if (Math.sin(pi_wave) > 0.5){
_d02.style.background = 'slategray';
}else if (Math.cos(pi_wave) < 0.5){
_d02.style.background = 'transparent';
}
// check whether conditions are satisfied then clear the animation and return control
if (pi_wave === end){
_d03.children[0].style.display = 'none;'
// adjust few design tweeks after user will shared picture
_d03.append(preview);
_pp01.style.visibility = 'hidden';
_d01.style.top = '16pc';
_d01.style.left = '-3pc';
_b05.style.visibility = 'hidden';
_bx00.style.top = '77px';
_bx00.style.left = '4px';
_bx00.style.width = '23pc';
_d05.style.top = '-45pc';
// _d05.style.position = 'absolute';
// _d05.style.top = '5pc';
// _d05.style.left = '29pc';
// _d05.style.color = 'slategray';
_d03.append(_d01);
clearInterval(waveform);
}
// create animate timeline for animation
pi_wave ++;
}
var complete_ratio = 0;
var epoch = 1;
// Family
_i04.children[0].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[1].children[1].style.display = 'unset';
_n01.children[1].children[1].innerHTML = epoch.toString();
// alert(" Family Name required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Relationship
_i04.children[1].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[5].children[1].style.display = 'unset';
_n01.children[5].children[1].innerHTML = epoch.toString();
// alert(" Family Name required!");
return;
}else if (event.target.value.length.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Address
_i05.children[0].addEventListener('change', (event)=>{
if (event.target.value.length.length <= 0){
_n01.children[2].children[1].style.display = 'unset';
_n01.children[2].children[1].innerHTML = epoch.toString();
// alert(" Address Field required!");
return;
}else if (event.target.value.length.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Zip
_i05.children[1].addEventListener('change', (event)=>{
if (event.target.value.length.length <= 0){
_n01.children[2].children[1].style.display = 'unset';
_n01.children[2].children[1].innerHTML = epoch.toString();
// alert("Zip code has not provided!");
return;
}else if (event.target.value.length.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// State
_i05.children[2].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[2].children[1].style.display = 'unset';
_n01.children[2].children[1].innerHTML = epoch.String();
// alert("Country name has not updated!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Education
_i06.children[0].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[3].children[1].style.display = 'unset';
_n01.children[3].children[1].innerHTML = epoch.toString();
// alert("University Field required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Programme
_i06.children[1].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[3].children[1].style.display = 'unset';
_n01.children[3].children[1].innerHTML = epoch.toString();
// alert("University Field required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Research
_i07.children[0].addEventListener('change', (event)=>{
if (event.target.value.length.length <= 0){
_n01.children[4].children[1].style.display = 'unset';
_n01.children[4].children[1].innerHTML = epoch.toString();
// alert(" Num of Publishication required!");
return;
}else if (event.target.value.length.length > 0){
complete_ratio = complete_ratio + 1;
}
if (_i07.children[0].value < _i07.children[0].min){
alert('Citation number will be `1`...');
return;
}
if(_i07.children[0].value > _i07.children[0].max ){
alert('Citation number will be `1`...');
return;
}
});
// Citation
_i07.children[1].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[4].children[1].style.display = 'unset';
_n01.children[4].children[1].innerHTML = epoch.toString();
// alert(" Num of Publishication required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Company
_i09.children[0].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[6].children[1].style.display = 'unset';
_n01.children[6].children[1].innerHTML = epoch.toString();
// alert(" Company Name required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Joined
_i09.children[1].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[6].children[1].style.display = 'unset';
_n01.children[6].children[1].innerHTML = epoch.toString();
// alert(" Company Name required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Email
_i10.children[0].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[7].children[1].style.display = 'unset';
_n01.children[7].children[1].innerHTML = epoch.toString();
// alert(" Email required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Phone
_i10.children[1].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[7].children[1].style.display = 'unset';
_n01.children[7].children[1].innerHTML = epoch.toString();
// alert(" Email required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Achievements
_i11.children[0].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[8].children[1].style.display = 'unset';
_n01.children[8].children[1].innerHTML = epoch.toString();
// alert(" Achievements required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
_i11.children[1].innerHTML = _i11.children[0].value.length.toString()+"/300";
});
// Status
_i03.children[1].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[0].children[1].className = 'badge badge-danger';
_n01.children[0].children[1].style.display = 'unset';
_n01.children[0].children[1].innerHTML = epoch.toString();
// alert(" Señor Field required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
});
// Name
_i03.children[0].addEventListener('change', (event)=>{
if (event.target.value.length <= 0){
_n01.children[0].children[1].className = 'badge badge-danger';
_n01.children[0].children[1].style.display = 'unset';
_n01.children[0].children[1].innerHTML = epoch.toString();
// alert(" Señor Field required!");
return;
}else if (event.target.value.length > 0){
complete_ratio = complete_ratio + 1;
}
if (complete_ratio < 7){
_n01.children[0].children[1].style.display = 'unset';
_n01.children[0].children[1].innerHTML = (11 - complete_ratio).toString();
alert("Sorry, Your biography is incomplete");
return;
}else{
_n01.children[0].children[1].className = 'badge badge-success';
_n01.children[0].children[1].style.display = 'unset';
_n01.children[0].children[1].innerHTML = (11 - complete_ratio).toString();
return;
}
complete_ratio = 0;
});
</script>
</body>
</html>