public/index.html
<head>
<meta charset='utf-8'>
<title>Custom Links</title>
<link rel='stylesheet' type='text/css' href='css/vendor/raleway-fonts.css'>
<link rel='stylesheet' href='css/vendor/normalize.css'>
<link rel='stylesheet' href='css/vendor/skeleton-2.0.4.min.css'>
<script src='app.js'></script>
<style type="text/css" media="all">
body{margin-top:30px;}
.markup{z-index:1;}
.templates{display:none;}
.nav{text-align:right;}
.dropdown{display:none;list-style:none;border:1px solid black;position:absolute;background:white;}
.dropdown li{padding:0px;margin:0px;}
.dropdown li:focus,li:hover {background:black;color:white;}
.result{padding:5px;border-radius:5px;}
.result.success{background-color:whitesmoke;width:100%;text-align:center;}
.result.failure{background-color:lavenderblush;width:100%;text-align:center;}
.links-view .total{font-size:x-large;padding-bottom:1em;}
.links-row{display:flex;justify-content:space-between}
.links-header{font-weight:bold;background-color:whitesmoke;border-radius:5px;}
.links-data{border-bottom:2px solid whitesmoke}
.links .cell{padding:2px}
.link-target{overflow:hidden;}
.link-target .cell{word-break:break-all;}
.links .result{border-radius:0px;}
.clicks-action{text-align:right;}
.clicks-action button{width:100%;}
.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.3);z-index:2;}
.dialog {width:350px;position:relative;background:whitesmoke;border-radius:5px;margin:20% auto;padding:10px;text-align:center;font-weight:bold;border:medium solid black;z-index:3;}
.edit-view .info{margin-bottom:1em;}
.edit-view .info .row{display:flex;justify-content:flex-start;}
.edit-view .label{font-weight:bold;width:110px;}
@media (max-width:849px){
.clicks-action{flex:0 0;}
}
@media (min-width:850px){
.timestamp.cell{width:100px;word-break:normal;}
.link-target{display:flex;flex:1;}
.links-row .clicks-action{width:215px;}
.links .cell{flex:0 0 100px;}
.links button{margin:2px;}
.links-data .action{display:flex;flex:0 0 215px;}
.links-row .target{flex:1 1 auto;}
}
</style>
</head>
<body>
<div class='markup'>
<div class='header container'>
<div class='nav'>
<span id='userid'></span> |
<a href='/#'>My links</a> |
<a href='/#create'>New link</a> |
<a href='/#search'>Search</a> |
<a href='/logout'>Log out</a>
</div>
<h3>Custom Links</h3>
</div>
<div class='view-container container'>
</div>
<div class='templates'>
<form class='create-view' action='/api/create'>
<label>Custom link:</label>
<input class='u-full-width' data-name='link'/>
<ul tabindex='-1' class='dropdown'></ul>
<label>Target URL:</label>
<input class='u-full-width' data-name='target'/>
<button class='button-primary' type='submit'>Create link</button>
<div class='result'></div>
</form>
<div class='edit-view'>
<div class='info'>
<div class='row'>
<div class='label cell'>Editing link:</div>
<div class='cell' data-name='link'>[link]</div>
</div>
<div class='row'>
<div class='label cell'>Clicks:</div>
<div class='cell' data-name='clicks'>[clicks]</div>
</div>
<div class='row'>
<div class='label cell'>Created:</div>
<div class='cell' data-name='created'>[stamp]</div>
</div>
<div class='row'>
<div class='label cell'>Last updated:</div>
<div class='cell' data-name='updated'>[stamp]</div>
</div>
</div>
<form action='/api/target'>
<label>Target URL:</label>
<input class='u-full-width' data-name='target'/>
<button class='button-primary' type='submit'>Update target</button>
<div class='result'></div>
</form>
<form action='/api/owner'>
<label>Owner:</label>
<input class='u-full-width' data-name='owner'/>
<button class='button-primary' type='submit'>Change owner</button>
<div class='result'></div>
</form>
</div>
<div class='result success'>
</div>
<div class='result failure'>
</div>
<div class='links-view'>
<div class='total' data-name='num-links'></div>
</div>
<div class='links'>
<div class='links-row links-header'>
<div class='wrapper link-target'>
<div class='label cell'>Link</div>
<div class='label cell target'>Target</div>
<div class='label cell timestamp created'>Created</div>
<div class='label cell timestamp updated'>Updated</div>
</div>
<div class='wrapper clicks-action'>
<div class='label cell clicks'>Clicks</div>
<div class='label cell action'>Action</div>
</div>
</div>
</div>
<div class='link links-row links-data'>
<div class='wrapper link-target'>
<div class='cell'></div>
<div class='cell target'></div>
<div class='cell timestamp created'></div>
<div class='cell timestamp updated'></div>
</div>
<div class='wrapper clicks-action'>
<div class='cell clicks'></div>
<div class='cell action'>
<button class='button-primary'>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
<div class='no-links'>
<p>You do not own any custom links.</p>
<p><a href='/#create'>Create a new custom link</a> now.</p>
</div>
<div class='dialog-overlay'>
</div>
<div class='confirm-delete dialog'>
<h3 class='title'>Confirm delete</h3>
<p class='description'>
Are you sure you wish to delete <span data-name='link'>[link]</span>?
</p>
<button class='confirm'>Yes</button>
<button class='focused cancel button-primary'>No</button>
</div>
<div class='confirm-transfer dialog'>
<h3 class='title'>Confirm ownership transfer</h3>
<p class='description'>
Are you sure you wish to transfer ownership of
<span data-name='link'>[link]</span> to
<span data-name='owner'>[owner]</span>?
</p>
<button class='confirm'>Yes</button>
<button class='focused cancel button-primary'>No</button>
</div>
<form class='search-view' action='/api/search'>
<input class='u-full-width' type='search' data-name='query'/>
<button class='button-primary' type='submit'>Search links</button>
<button class='button-primary' type='submit'>Search targets</button>
<div class='results'></div>
</form>
<div class='search-results links'>
<div class='links-row links-header'>
<div class='wrapper link-target'>
<div class='label cell link'>Link</div>
<div class='label cell target'>Target</div>
<div class='label cell timestamp created'>Created</div>
<div class='label cell timestamp updated'>Updated</div>
</div>
<div class='wrapper clicks-action'>
<div class='label cell owner'>Owner</div>
<div class='label cell clicks'>Clicks</div>
</div>
</div>
</div>
<div class='search-result link links-row links-data'>
<div class='wrapper link-target'>
<div class='cell link'></div>
<div class='cell target'></div>
<div class='cell timestamp created'></div>
<div class='cell timestamp updated'></div>
</div>
<div class='wrapper clicks-action'>
<div class='cell owner'></div>
<div class='cell clicks'></div>
</div>
</div>
<div class='search-no-results result success'>
<p>No matching links found.</p>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', cl.loadApp)
</script>
</body>