Skip to content

Instantly share code, notes, and snippets.

@carsonfarmer

carsonfarmer/index.html

Last active November 26, 2018 06:03
Show Gist options
  • Save carsonfarmer/aab2f86bfecdd942d9ff53a72a70fa0d to your computer and use it in GitHub Desktop.
Save carsonfarmer/aab2f86bfecdd942d9ff53a72a70fa0d to your computer and use it in GitHub Desktop.
Download ZIP
Profile view with editing
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>IPNS Profile App</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6"
crossorigin="anonymous">
</head>
<body>
<div id="loader" data-bind="visible: state.loading"></div>
<div id="main" style="display: none;" data-bind="visible: !state.loading()">
<div id="image" data-bind="style: { 'backgroundImage': `url(${pic.url()})` }"></div>
<div id="profile">
<h1 id="name">
<span id="first" data-bind="lazy: name.first, editable: state.editing"></span>
<span id="last" data-bind="lazy: name.last, editable: state.editing"></span>
</h1>
<div id="work" >
<ul data-bind="foreach: work">
<li>
<h2 class="job">
<span class="title" data-bind="lazy: title, editable: $root.state.editing"></span> at
<span class="employer" data-bind="lazy: employer, editable: $root.state.editing"></span>
</h2>
</li>
</ul>
</div>
<div id="bio" data-bind="lazy: bio, editable: state.editing"></div>
<div id="social">
<ul data-bind="foreach: social">
<li>
<a data-bind="attr: { href: url() }">
<i data-bind="attr: { class: `fab fa-${service()}` }"></i>
</a>
</li>
</ul>
</div>
<button id="edit" title="Edit and save profile data" data-bind="click: handleEdit">
<i class="fas" data-bind="css: {'fa-pencil-alt': !state.editing(), 'fa-save': state.editing()}"></i>
</button>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment