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
Lisp for The Modern Web:
<!DOCTYPE html>
<!-- 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=""></script>
function refreshPeople(){
console.log('People who said hello to Lisp: ', people);
$('.cards').find('.card').not('.template').remove();, index, arr){
var template = $('.template').clone();
var name = $('input[name="name"]').val();
$.post('/you',{name: name},function(people){
console.log('Created: ', people);
* Some of these is based on Sematic UI,
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;
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;
font-size: 1.5em;
font-weight: bold;
text-align: right;
color: rgba(0, 0, 0, 0.4);
display: none;
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;
background-color: #1A69A4;
color: #FFF;
text-shadow: none;
background-color: #0D71BB;
color: #FFF;
text-shadow: none;
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);
<title>Hello Lisp</title>
<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 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>