Sample Profile Screen

Developer
David Lee
Size
5,375 Kb
Views
32,384
  1. Sample Profile Screen Previews
  2. Sample Profile Screen HTML Codes
  3. Sample Profile Screen CSS Codes
  4. Sample Profile Screen JS Codes

How do I make an sample profile screen?

What is a sample profile screen? How do you make a sample profile screen? This script and codes were developed by David Lee on 31 July 2022, Sunday.

Sample Profile Screen Previews
IQ Test

Sample Profile Screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sample Profile Screen</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Nav bar -->
<ul class="navbar"> <li class="logo"> <a href="#"> <div class="circle-border">?</div> </a> </li> <li class="name-organization"> <a href="#"> <div class="name">Your Name</div> <div class="organization">Organization</div> </a> </li> <li class="setting"> <a href="#"> <span class="glyphicon glyphicon-cog cog-style"></span> </a> </li> <li class="globe"> <a href="#"> <span class="glyphicon glyphicon-globe globe-style"></span> </a> </li>
</ul>
<div class="container edit-profile-page"> <div class="row"> <div class="col-sm-12 profile-panel"> <div class="linkedin-container"><div class="btn-linkedin">CONNECT TO LinkedIn</div></div> <div class="profile-header">PROFILE</div> <div class="edit-container"><div class="btn-edit" onclick="editProfile()">Edit</div></div> <div class="first-name-label">FIRST NAME</div> <div class="first-name">Malcolm</div> <hr class="hr-custom"></hr> <div class="last-name-label">LAST NAME</div> <div class="last-name">Gladwell</div> <hr class="hr-custom"></hr> <div class="profile-organization-label">&lt; ORGANIZATION</div> <div class="profile-organization">U.S. Census Bureau</div> <hr class="hr-custom"></hr> <div class="email-label">&lt; EMAIL</div> <div class="email">[email protected]</div> <hr class="hr-custom"></hr> <div class="supervisor-email-label">&lt; SUPERVISOR EMAIL <i class="fa fa-users supervisor-email-icon-custom" data-toggle="popover"></i></div> <div class="supervisor-email">[email protected]</div> <hr class="hr-custom"></hr> <div class="profile-title-label">&lt; TITLE</div> <div class="profile-title">User Experience Specialist</div> <hr class="hr-custom"></hr> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://www.parsecdn.com/js/parse-1.6.7.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sample Profile Screen - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
body { font-family: 'Open Sans', sans-serif; min-width: 360px; background-color: lightgrey;
}
.navbar { list-style-type: none; margin: 0; padding: 0; background-color: white; border-bottom: 1px solid silver; height: 40px; width: 100%;
}
.navbar li { display: inline-block; vertical-align: top; height: 100%;
}
.navbar li a { display: inline-block; text-decoration: none; height: 100%;
}
.navbar li:hover { background-color: LightGrey;
}
.navbar li.logo a { width: 50px; height: 100%;
}
.navbar li.logo a:active { background-color: silver;
}
.navbar .circle-border { width: 35px; height: 35px; border: 3px solid SteelBlue; border-radius: 20px; text-align: center; font-size: 18px; font-weight: 700; position: relative; left: calc(25px - 18px); top: calc(20px - 15px);
}
.navbar li.name-organization { width: calc(100% - 50px - 50px - 50px);
}
.navbar li.name-organization a { width: 100%; height: 100%; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 2px;
}
.navbar li.setting { position: absolute; right: 50px;
}
.navbar li.setting a { width: 50px; height: 100%;
}
.navbar li.setting a:active { background-color: silver;
}
.navbar .cog-style { poition: absolute; top: 4px; text-align: center; font-size: 20px; position: relative; left: 15px; top: 12px;
}
.navbar li.globe { position: absolute; right: 0px;
}
.navbar li.globe a { width: 50px; height: 100%;
}
.navbar .globe-style { poition: absolute; top: 4px; text-align: center; font-size: 20px; position: relative; left: 15px; top: 12px;
}
.navbar li.globe a:active { background-color: silver;
}
.edit-picture-container { width: 240px; height: 100%; padding-left: 5px; padding-top: 9px;
}
.edit-picture-container:active { background-color: DimGrey
}
.edit-picture { font-size: 20px; font-weight: 700; color: MediumSeaGreen;
}
.edit-picture-save { color: salmon;
}
.edit-picture-input-container { width: 100%; background-color: white;
}
#edit-picture-input { width: 100%; color: DimGrey; font-size: 16px; padding-left: 10px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; background-color: white; border: 0; margin-bottom: 1px;
}
.clip-circle { -webkit-clip-path: circle(25px at 25px 25px); clip-path: circle(25px at 25px 25px);
}
.picture { position: fixed; backgroud-image: url('https://www.dropbox.com/s/wibkijixrkarw9v/File%20Dec%2010%2C%209%2003%2000%20AM.jpeg?dl=1'); background-size: 50px auto; background-repeat: no-repeat; left: 0px; top: 0px; width: 50px; height: 49px; z-index: 5;
}
.edit-profile-page { position: relative;
}
.profile-panel { background-color: LightGrey;
}
.linkedin-container { width: 100%; padding-top: 10px; padding-bottom: 10px;
}
.btn-linkedin { margin: auto; width: 345px; padding-top: 10px; padding-bottom: 5px; text-align: center; color: white; font-size: 14px; font-weight: 300; background-color: #358BD4; border: 1px solid silver; border-radius: 4px;
}
.btn-linkedin:active { background-color: SteelBlue;
}
.profile-header { color: DimGray; font-size: 24px; font-weight: 900; padding-bottom: 5px;
}
.edit-container { position: absolute; right: 20px; top: 60px; display: inline-block;
}
.btn-edit { width: 60px; height: 30px; color: white; font-size: 15px; text-align: center; padding-top: 3px; background-color: MediumSeaGreen; border: 1px solid LightGrey; border-radius: 4px;
}
.btn-edit:active { background-color: grey;
}
.btn-save { background-color: salmon;
}
.first-name-label { color: DimGray; font-size: 14px; font-weight: 900; padding-top: 3px;
}
.first-name { color: DimGray; font-size: 16px; font-weight: 900; padding-left: 20px; padding-top: 10px; padding-bottom: 7px;
}
.hr-custom { border-top: 1px solid DarkGrey; margin: 0; padding: 0;
}
.first-name-input-container { padding-top: 5px; padding-bottom: 4px;
}
#first-name-input { width: 80%; font-size: 16px; color: DimGrey; padding-left: 19px; padding-top: 3px; padding-bottom: 3px; border: 1px solid DimGrey; border-radius: 4px; background-color: silver;
}
.last-name-label { color: DimGray; font-size: 14px; font-weight: 900; padding-top: 3px;
}
.last-name { color: DimGray; font-size: 16px; font-weight: 900; padding-left: 20px; padding-top: 10px; padding-bottom: 7px;
}
.last-name-input-container { padding-top: 5px; padding-bottom: 4px;
}
#last-name-input { width: 80%; font-size: 16px; color: DimGrey; padding-left: 19px; padding-top: 3px; padding-bottom: 3px; border: 1px solid DimGrey; border-radius: 4px; background-color: silver;
}
.profile-organization-label { color: MediumSeaGreen; font-size: 14px; font-weight: 900; padding-top: 3px;
}
.profile-organization { color: DimGray; font-size: 16px; font-weight: 900; padding-left: 20px; padding-top: 10px; padding-bottom: 7px;
}
.profile-organization-input-container { padding-top: 5px; padding-bottom: 4px;
}
#profile-organization-input { width: 80%; font-size: 16px; color: DimGrey; padding-left: 19px; padding-top: 3px; padding-bottom: 3px; border: 1px solid DimGrey; border-radius: 4px; background-color: silver;
}
.email-label { color: MediumSeaGreen; font-size: 14px; font-weight: 900; padding-top: 3px;
}
.email { color: DimGray; font-size: 16px; font-weight: 900; padding-left: 20px; padding-top: 10px; padding-bottom: 7px;
}
.email-input-container { padding-top: 5px; padding-bottom: 4px;
}
#email-input { width: 80%; font-size: 16px; color: DimGrey; padding-left: 19px; padding-top: 3px; padding-bottom: 3px; border: 1px solid DimGrey; border-radius: 4px; background-color: silver;
}
.supervisor-email-label { color: MediumSeaGreen; font-size: 14px; font-weight: 900; padding-top: 3px;
}
.supervisor-email { color: DimGray; font-size: 16px; font-weight: 900; padding-left: 20px; padding-top: 10px; padding-bottom: 7px;
}
.supervisor-email-input-container { padding-top: 5px; padding-bottom: 4px;
}
#supervisor-email-input { width: 80%; font-size: 16px; color: DimGrey; padding-left: 19px; padding-top: 3px; padding-bottom: 3px; border: 1px solid DimGrey; border-radius: 4px; background-color: silver;
}
.supervisor-email-icon-custom { color: DimGrey; padding-left: 5px;
}
.supervisor-email-icon-popover-close { position: absolute; top: 5px; right: 15px; color: LightGrey;
}
.supervisor-email-icon-popover-close:active { color: DimGrey;
}
.popover { width: 160px;
}
.profile-title-label { color: MediumSeaGreen; font-size: 14px; font-weight: 900; padding-top: 3px;
}
.profile-title { color: DimGray; font-size: 16px; font-weight: 900; padding-left: 20px; padding-top: 10px; padding-bottom: 7px;
}
.profile-title-input-container { padding-top: 5px; padding-bottom: 4px;
}
#profile-title-input { width: 80%; font-size: 16px; color: DimGrey; padding-left: 19px; padding-top: 3px; padding-bottom: 3px; border: 1px solid DimGrey; border-radius: 4px; background-color: silver;
}
.profile-panel::-webkit-input-placeholder { color: grey; font-weight: 700;
}
profile-panel:-moz-placeholder { color: grey; font-weight: 700;
}
profile-panel::-moz-placeholder { color: grey; font-weight: 700;
}
profile-panel:-ms-input-placeholder { color: grey; font-weight: 700;
}

Sample Profile Screen - Script Codes JS Codes

var profileData = {};
$(document).ready(function() { // Parse is cloud based database https://www.parse.com/docs/js/guide Parse.initialize("RxdTfd9zwVyIEqjFapfjGZkbdQMPaN7CD0lzSGSf", "DoxsJlrkD5fn6BFfin1KMIebkSXBEqYr2zS61UDh");
Parse.User.enableRevocableSession(); $('.supervisor-email-icon-custom').popover({ content: 'FOR TEAMMATE VERIFICATION ONLY' + '<div class="supervisor-email-icon-popover-close" onclick="closeSupervisorPopover()">x</div>', html: true, animation: true, trigger: 'click hover', template: '<div class="popover"><div class="arrow"></div><div class="popover-content"></div></div>' }); showEditPicture();
})
function showEditPicture() { var nameOrganizationHeader = $('.name-organization').html(); // circle clipping concept from https://css-tricks.com/clipping-masking-css/ var picture = $('<div>') .addClass('picture clip-circle'); picture.appendTo('.logo'); $('.picture').bind('error', function (event) { $('.picture').remove(); }); var editPictureContainer = $('<div>') .addClass('edit-picture-container') .attr('onclick', 'showEditPictureURL()'); var editPicture = $('<div>') .addClass('edit-picture') .text('Edit Picture'); editPicture.appendTo(editPictureContainer); $('.name-organization').html(editPictureContainer); var editPictureInputContainer = $('<div>') .addClass('edit-picture-input-container'); var editPictureInput = $('<input>') .attr({ type: 'text', id: 'edit-picture-input', onchange: 'updatePicture()', placeholder: 'Enter URL of your picture' }) .val(profileData.picture); editPictureInput.appendTo(editPictureInputContainer); editPictureInputContainer.insertAfter('.navbar'); $('.edit-picture-input-container').hide();
}
function updatePicture() { $('.picture').css('background-image','url("' + $('#edit-picture-input').val() + '")');
}
function showEditPictureURL() { if ($('.edit-picture-input-container').is(":visible")) { $('.edit-picture').removeClass('edit-picture-save'); $('.edit-picture-input-container').slideUp(500); $('.edit-picture').text('Edit Picture'); updatePicture(); savePicture(); } else { $('.edit-picture').addClass('edit-picture-save'); $('.edit-picture-input-container').slideDown(500); $('.edit-picture').text('Save Picture'); }
}
function closeSupervisorPopover() { $('.supervisor-email-icon-custom').popover('hide');
}
function editProfile() { if ($('.btn-edit').hasClass('btn-save')) { $('.btn-edit') .removeClass('btn-save') .text('Edit'); //$('.name').html($('#first-name-input').val() + // ' ' + $('#last-name-input').val()); //$('.organization').html( // $('#profile-organization-input').val() ); var firstName = $('<div>') .addClass('first-name') .html($('#first-name-input').val()) .insertAfter('.first-name-label'); var hr = $('<hr>') .addClass('hr-custom') .insertAfter('.first-name'); var lastName = $('<div>') .addClass('last-name') .html($('#last-name-input').val()) .insertAfter('.last-name-label'); var hr = $('<hr>') .addClass('hr-custom') .insertAfter('.last-name'); var organization = $('<div>') .addClass('profile-organization') .html($('#profile-organization-input').val()) .insertAfter('.profile-organization-label'); var hr = $('<hr>') .addClass('hr-custom') .insertAfter('.profile-organization'); var email = $('<div>') .addClass('email') .html($('#email-input').val()) .insertAfter('.email-label'); var hr = $('<hr>') .addClass('hr-custom') .insertAfter('.email'); var supervisorEmail = $('<div>') .addClass('supervisor-email') .html($('#supervisor-email-input').val()) .insertAfter('.supervisor-email-label'); var hr = $('<hr>') .addClass('hr-custom') .insertAfter('.supervisor-email'); var title = $('<div>') .addClass('profile-title') .html($('#profile-title-input').val()) .insertAfter('.profile-title-label'); var hr = $('<hr>') .addClass('hr-custom') .insertAfter('.profile-title'); $('.first-name-input-container').remove(); $('.last-name-input-container').remove(); $('.profile-organization-input-container').remove(); $('.email-input-container').remove(); $('.supervisor-email-input-container').remove(); $('.profile-title-input-container').remove(); saveProfile(); return; } else { $('.btn-edit') .addClass('btn-save') .text('Save'); } var firstNameContainer = $('<div>') .addClass('first-name-input-container'); var firstName = $('<input>') .attr({ type: 'text', id: 'first-name-input' }) .val($('.first-name').html()) .appendTo(firstNameContainer); firstNameContainer.appendTo('.first-name-label'); var lastNameContainer = $('<div>') .addClass('last-name-input-container'); var lastName = $('<input>') .attr({ type: 'text', id: 'last-name-input' }) .val($('.last-name').html()) .appendTo(lastNameContainer); lastNameContainer.appendTo('.last-name-label'); var organizationContainer = $('<div>') .addClass('profile-organization-input-container'); var organization = $('<input>') .attr({ type: 'text', id: 'profile-organization-input' }) .val($('.profile-organization').html()) .appendTo(organizationContainer); organizationContainer.appendTo('.profile-organization-label'); var emailContainer = $('<div>') .addClass('email-input-container'); var email = $('<input>') .attr({ type: 'text', id: 'email-input' }) .val($('.email').html()) .appendTo(emailContainer); emailContainer.appendTo('.email-label'); var supervisorEmailContainer = $('<div>') .addClass('supervisor-email-input-container'); var email = $('<input>') .attr({ type: 'text', id: 'supervisor-email-input' }) .val($('.supervisor-email').html()) .appendTo(supervisorEmailContainer); supervisorEmailContainer.appendTo('.supervisor-email-label'); var titleContainer = $('<div>') .addClass('profile-title-input-container'); var email = $('<input>') .attr({ type: 'text', id: 'profile-title-input' }) .val($('.profile-title').html()) .appendTo(titleContainer); titleContainer.appendTo('.profile-title-label'); $('.first-name').remove(); $('.last-name').remove(); $('.profile-organization').remove(); $('.email').remove(); $('.supervisor-email').remove(); $('.profile-title').remove(); $('.profile-panel hr').remove();
}
function savePicture() { profileData.picture = $('#edit-picture-input').val(); saveProfileToParse();
}
function saveProfile() { profileData.firstname = $('.first-name').html(); profileData.lastname = $('.last-name').html(); profileData.lastname = $('.first-name').html(); profileData.organization = $('.profile-organization').html(); profileData.email = $('.email').html(); profileData.supervisoremail = $('.supervisor-email').html(); profileData.title = $('.profile-title').html(); saveProfileToParse();
}
function saveProfileToParse() { var currentUser = Parse.User.current(); if (!currentUser) { alert('Not logged in'); //showLogin(); return; } Parse.Cloud.run('saveProfile', { profileData: JSON.stringify(profileData) }, { success: function(saveLocation) { console.log(saveLocation) alert("Data saved to Parse cloud"); }, error: function(error) { console.log(error) alert('Parse database save error code: ' + error.code + ' message: ' + error.message); } });
}
Sample Profile Screen - Script Codes
Sample Profile Screen - Script Codes
Home Page Home
Developer David Lee
Username OurDailyBread
Uploaded July 31, 2022
Rating 3
Size 5,375 Kb
Views 32,384
Do you need developer help for Sample Profile Screen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Lee (OurDailyBread) Script Codes
Name
Usability Test v2
Fed360 Reset Password
Start Bootstrap Admin Panel
Save Div with SVG to PNG Example
Periodic Table
Usability Test
IT Road Map Navigation
Sharepoint RouteMaker JS
Google 45 Degree Map
Route Maker v0.3
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!