Created
November 14, 2011 05:32
-
-
Save pheuter/1363319 to your computer and use it in GitHub Desktop.
Search through students by name, school, and interests. Leveraged by ThriftDB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE !html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>MIT Class of 2015 | Search</title> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> | |
| <script type="text/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script> | |
| <style type="text/css" media="screen"> | |
| html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}body{font:13px/1.231 sans-serif;font-size:small;}select,input,textarea,button{font:99% sans-serif;}pre,code,kbd,samp{font-family:monospace, sans-serif;}html{overflow-y:scroll;}a:hover,a:active{outline:none;}ul,ol{margin-left:2em;}ol{list-style-type:decimal;}nav ul,nav li{list-style:none;list-style-image:none;margin:0;}small{font-size:85%;}td{vertical-align:top;}sub,sup{font-size:75%;line-height:0;position:relative;}sup{top:-.5em;}sub{bottom:-.25em;}pre{white-space:pre-wrap;word-wrap:break-word;padding:15px;}textarea{overflow:auto;}.ie6 legend,.ie7 legend{margin-left:-7px;}input[type=checkbox]{vertical-align:bottom;}.ie7 input[type=checkbox]{vertical-align:baseline;}label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer;}button,input,select,textarea{margin:0;}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;box-shadow:0 0 5px red;}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd;}a:link{-webkit-tap-highlight-color:#FF5E99;}button{width:auto;overflow:visible;}.ie7 img{-ms-interpolation-mode:bicubic;}body,select,input,textarea{color:#444;}a,a:active,a:visited{color:#607890;}a:hover{color:#036;}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}.hidden{display:none;visibility:hidden;}.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0;}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0;}.invisible{visibility:hidden;}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}.clearfix:after{clear:both;}.clearfix{zoom:1;}strong,th,h1,h2,h3,h4,h5,h6{font-weight:700;}input[type=radio],.ie6 input{vertical-align:text-bottom;}::-moz-selection,::selection{background:#FF5E99;color:#fff;text-shadow:none;}@media print{*{background:transparent!important;color:#000!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important;}a,a:visited{color:#444!important;text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}abbr[title]:after{content:" (" attr(title) ")";}.ir a:after,a[href^=javascript:]:after,a[href^=#]:after{content:"";}pre,blockquote{border:1px solid #999;page-break-inside:avoid;}thead{display:table-header-group;}tr,img{page-break-inside:avoid;}@page{margin:.5cm;}p,h2,h3{orphans:3;widows:3;}h2,h3{page-break-after:avoid;}} | |
| </style> | |
| <style type="text/css" media="screen"> | |
| input:focus { outline: none; } | |
| strong { background-color: yellow; } | |
| footer { position: fixed; bottom: 20px; right: 20px;} | |
| #results { | |
| width: 40em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 50px; | |
| } | |
| .result { | |
| border: 1px solid #DDD; | |
| background-color: whiteSmoke; | |
| padding: 10px; | |
| margin-top: 10px; | |
| border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| } | |
| .result h2 { | |
| font-size: 32px; | |
| padding-bottom: 5px; | |
| border-bottom: 1px dotted; | |
| color: #297A29; | |
| } | |
| .result h3 { | |
| margin-top: 5px; | |
| font-size: 20px; | |
| color: #996133; | |
| } | |
| .result h4 { | |
| font-size: 14px; | |
| color: #1F5C5C; | |
| } | |
| </style> | |
| <script type="text/coffeescript"> | |
| $('input').focus().keypress (e) -> | |
| if e.which == 13 && $('input').val().match(/[^\s]/) | |
| $("#results").fadeOut -> | |
| $(this).empty() | |
| $.getJSON "http://api.thriftdb.com/mit-class-of-2015/students/_search?callback=?", q: $('input').val(), limit: 1000, 'highlight[markup_items]': true, (data) -> | |
| $("#hits").text '' if data.results.length == 0 | |
| $.each data.results, (k,v) -> | |
| result = $("<div class='result'></div>") | |
| result.append $("<h2></h2>").html(v.item.name) | |
| result.append $("<h3></h3>").html(v.item.school) | |
| result.append $("<h4></h4>").html(v.item.interests) | |
| $("#hits").text("#{data.hits} results in #{data.time} seconds") | |
| $("#results").append(result).fadeIn() | |
| </script> | |
| </head> | |
| <body> | |
| <h1 style="margin-top:1em;font-size:65px;width:13em;margin-left:auto;margin-right:auto;border-bottom:1px dashed;padding-bottom:10px;"><img src="http://web.mit.edu/graphicidentity/logo/logolab/img/interface/mit-redgrey-large3.gif"/> Class of 2015 Search</h1> | |
| <div style="width:60em;margin-left:auto;margin-right:auto;margin-top:5em;"> | |
| <input type="text" style="font-size:60px;border:1px solid #DDD;background-color:aliceBlue;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;" /> | |
| </div> | |
| <h1 id="hits" style="margin-top:1em;font-size:30px;width:22em;margin-left:auto;margin-right:auto;padding-bottom:10px;color:#FF7400;"></h1> | |
| <div id="results"> | |
| </div> | |
| <footer> | |
| A project by <a href="http://markfayngersh.com">Mark Fayngersh</a> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment