Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
164 lines (163 sloc) 4.93 KB
<!--
lispweb3-client.htm
Lisp for The Modern Web: http://vitovan.com/lispweb3.html
-->
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function refreshPeople(){
$.get('/people',function(people){
console.log('People who said hello to Lisp: ', people);
$('.cards').find('.card').not('.template').remove();
people.map(function(obj, index, arr){
var template = $('.template').clone();
template.removeClass('template');
template.find('.name').text(obj.name);
template.find('.language').text(obj.language);
template.find('.bio').text(obj.bio);
$('.cards').append(template);
});
});
}
$(document).ready(function(){
$('#hello').click(function(){
var name = $('input[name="name"]').val();
$.post('/you',{name: name},function(people){
console.log('Created: ', people);
refreshPeople();
});
});
$('#refresh').click(function(){
refreshPeople();
});
});
</script>
<style>
/*
* Some of these is based on Sematic UI, http://semantic-ui.com/
*/
body{
font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei","微软雅黑",sans-serif;
color: #000;
background: #FFF none repeat scroll 0% 0%;
font-size: 10pt;
clear: both;
padding: 2em;
margin: 0;
line-height: 2.5em;
}
.card{
max-width: 100%;
min-height: 11em;
position: relative;
display: flex;
flex-direction: column;
width: 20em;
padding: 1em;
border: medium none;
border-radius: 0.285714rem;
box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
transition: box-shadow 0.1s ease 0s, transform 0.1s ease 0s;
float: left;
margin: 1em 1em 1em 0px;
}
.card>.name{
font-size: 1.5em;
font-weight: bold;
}
.card>.language{
text-align: right;
}
.card>.bio{
color: rgba(0, 0, 0, 0.4);
}
.template{
display: none;
}
.button{
background-color: #2185D0;
color: #FFF;
text-shadow: none;
background-image: none;
cursor: pointer;
display: inline-block;
min-height: 1em;
outline: 0px none;
border: medium none;
vertical-align: baseline;
font-family: Lato,"Helvetica Neue",Arial,Helvetica,sans-serif;
margin: 0px 0.25em 0px 0px;
padding: 0.785714em 1.5em;
text-transform: none;
font-weight: 700;
line-height: 1em;
font-style: normal;
text-align: center;
text-decoration: none;
border-radius: 0.285714rem;
box-shadow: 0px 0px 0px 1px transparent inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
-moz-user-select: none;
transition: opacity 0.1s ease 0s, background-color 0.1s ease 0s, color 0.1s ease 0s, box-shadow 0.1s ease 0s, #EAE8E3 0.1s ease 0s;
}
.button:active{
background-color: #1A69A4;
color: #FFF;
text-shadow: none;
}
.button:focus{
background-color: #0D71BB;
color: #FFF;
text-shadow: none;
}
.button:hover{
background-color: #1678C2;
color: #FFF;
text-shadow: none;
}
input[type="text"] {
-moz-appearance: none;
background: #FFF none repeat scroll 0% 0%;
margin: 10px 0;
max-width: 100%;
flex: 1 0 auto;
outline: 0px none;
text-align: left;
line-height: 1.2142em;
padding: 0.678614em 1em;
border: 1px solid rgba(34, 36, 38, 0.15);
color: rgba(0, 0, 0, 0.87);
border-radius: 0.285714rem;
transition: background-color 0.1s ease 0s, box-shadow 0.1s ease 0s, border-color 0.1s ease 0s;
box-shadow: 0px 1px 2px 0px rgba(34, 36, 38, 0.15);
}
</style>
<title>Hello Lisp</title>
</head>
<body>
<div class="container">
<div class="hello">
<h1>Who are you? </h1>
<input type="text" name="name" placeholder="Your Name">
<a class="button" id="hello">Say Hello to Lisp</a>
</div>
<hr>
<div class="people">
<h2>People who said hello to lisp:</h2>
<a class="button" id="refresh">Refresh</a>
<div class="cards">
<div class="template card">
<div class="name">Jack</div>
<div class="language">English</div>
<div class="bio">Bkajsdlk alskdjklw alksdj</div>
</div>
</div>
</div>
</div>
</body>
</html>