<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>UKI replica of Wave</title>
<script src='/src/uki-theamless.cjs'></script>
</head>
<body style='overflow:hidden;margin:0;padding:0;background:#D9DDE0;background-repeat:repeat-x;min-height:400px'>
<div id='message' style='display:none'>
<h2>Wave layout in <a href="http://github.com/voloko/ukijs.org/blob/master/examples/core-examples/wave/wave.js" target="_blank">100 lines</a> of js code with <a href="http://ukijs.org">ukijs</a></h2>
<p><b>Disclamer</b>. Author of this page has no connection to Google. No code from original Wave is used here.</p>
<p>The purpose of this page is to prove that you don't have to use complex frameworks to build layout as complex as this. The only library used here is 21Kb <a href="http://ukijs.org"><strong>ukijs</strong></a>.</p>
<p>And yes, it's written (images excluded) in 100 lines of code. It took several hours to build. Hours, not months.</p>
<h3>Try it:</h3>
<ul>
<li>Resize the panels</li>
<li>Use tab to focus on search fields and lists</li>
<li>Use arrows to navigate through lists</li>
<li>Most text is made unselectable (buttons, lists).</li>
</ul>
<p>PS: and it works in IE and Opera</p>
</div>
<script>
var contacts = [["Ryder Mccarty", "mattis.Cras@Donec.ca"], ["Curran Bender", "feugiat@convallisante.org"], ["Malik Roberts", "amet.lorem@acrisusMorbi.ca"], ["Lester Love", "Nam@Nullamscelerisque.org"], ["Jackson Dillon", "mus.Proin.vel@tinciduntaliquamarcu.ca"], ["Vaughan Dalton", "eu.eleifend.nec@arcu.com"], ["Rudyard Cole", "semper@nectempusmauris.org"], ["Mason Brown", "eu.arcu@dolorFusce.edu"], ["Benjamin Graves", "orci.quis.lectus@eleifendCras.ca"], ["Hamilton Kemp", "ullamcorper.viverra.Maecenas@etrutrumeu.org"], ["Zane Decker", "eget@tacitisociosqu.com"], ["Gareth Alvarez", "sed@odio.com"], ["Porter Wells", "volutpat.Nulla@egestas.com"], ["Tucker Larsen", "consectetuer.rhoncus@Sed.org"], ["Norman Peterson", "turpis@orcitinciduntadipiscing.org"], ["Fritz Lucas", "nunc.nulla.vulputate@Aliquamerat.ca"], ["Merrill Garrison", "odio@ligula.com"], ["Lamar Morrow", "parturient.montes.nascetur@Mauris.ca"], ["Cedric Hess", "Vestibulum.accumsan@mauris.org"], ["Basil Bray", "elementum@ategestas.edu"], ["Christopher Valencia", "Quisque@elit.com"], ["Joel Perry", "dictum.sapien.Aenean@molestietortor.org"], ["Jonah Norton", "Nam.ac@Nam.org"], ["Colt Terry", "ligula@arcuCurabiturut.ca"], ["Louis Jones", "non.quam.Pellentesque@adipiscinglacus.org"], ["Logan Colon", "consequat@ipsumSuspendissesagittis.com"], ["Demetrius Delaney", "fringilla.purus.mauris@Utsagittislobortis.org"], ["Aaron Martin", "posuere@Phasellusdolor.org"], ["Hilel Solis", "ipsum.non@sedpede.ca"], ["Odysseus Gay", "Vivamus.nisi.Mauris@egetipsum.org"], ["Harlan Kramer", "semper.pretium.neque@lacusQuisqueimperdiet.org"], ["Magee Fields", "bibendum@intempuseu.ca"], ["Dylan Mills", "facilisis.lorem@odioEtiam.ca"], ["Rooney Brewer", "malesuada.malesuada.Integer@ametorci.ca"], ["Wang Deleon", "Nam.porttitor@Duismienim.edu"], ["Ivor Burch", "ut.cursus@vestibulumlorem.ca"], ["Dalton Stokes", "et.ipsum.cursus@dictumsapien.com"], ["Zane Turner", "eu@purus.com"], ["Hashim Jensen", "turpis@Etiamligulatortor.ca"], ["Hilel Boyd", "non.lobortis.quis@felis.edu"], ["Lance Charles", "scelerisque.neque.sed@tincidunt.com"], ["Justin Pitts", "iaculis.nec.eleifend@Suspendissenon.com"], ["Lyle Walter", "Aenean.eget.metus@ascelerisque.com"], ["Brendan Saunders", "id@enimSuspendissealiquet.org"], ["Bradley Morin", "condimentum.Donec@Etiamgravidamolestie.org"], ["Shad Burton", "urna@nuncnullavulputate.ca"], ["Jack Owen", "id@sedsapien.edu"], ["Amir Bowen", "aliquet.vel.vulputate@tellusimperdietnon.ca"], ["Richard Bush", "justo@Vestibulumaccumsanneque.org"], ["Kennan Hopkins", "orci@Fuscemollis.ca"], ["Hakeem Woodard", "accumsan.neque.et@nonummyipsumnon.edu"], ["Eaton Campos", "Sed@dui.org"], ["Brett Winters", "ac@Nam.ca"], ["Stone Kane", "eu.augue@interdumfeugiatSed.ca"], ["Jack Abbott", "nunc.Quisque.ornare@idblanditat.ca"], ["Marshall Mcmillan", "euismod.in.dolor@Maurisblanditenim.com"], ["Xanthus Chapman", "nunc.est.mollis@augue.edu"], ["Dale Ratliff", "Donec.fringilla.Donec@quis.org"], ["Camden Davidson", "tempus.lorem@tempor.org"], ["Clayton Pate", "a.ultricies@Mauris.ca"], ["Armand Huff", "metus@Donecegestas.edu"], ["Phelan Ewing", "at@Donec.edu"], ["Davis Mcclure", "arcu.Curabitur.ut@cursusNuncmauris.edu"], ["Ali Gutierrez", "lorem.luctus.ut@non.edu"], ["Gavin Hahn", "Sed.auctor.odio@euismodmauriseu.com"], ["Henry Frederick", "facilisi.Sed@variusultrices.edu"], ["Len Watson", "eget.mollis@ultricesiaculis.com"], ["Ethan Edwards", "volutpat.Nulla@egestasa.org"], ["Nero Conrad", "est.mollis.non@vitaediam.org"], ["Giacomo Wiley", "et@tortor.edu"], ["Steven Kramer", "egestas@anteblandit.com"], ["Zeph Quinn", "Quisque.ac.libero@Donec.org"], ["Lucius Delaney", "urna.Nullam@noncursus.com"], ["Zeus Stafford", "augue@IntegermollisInteger.edu"], ["Brady Richard", "sit@lobortis.com"], ["Oren Ellison", "tincidunt.Donec.vitae@iaculis.edu"], ["Aidan Nguyen", "Donec.tempus.lorem@massaIntegervitae.edu"], ["Elvis Dominguez", "et.magnis@enim.org"], ["Wade Mcdaniel", "netus.et.malesuada@orcitincidunt.edu"], ["Lewis Sykes", "nisi.Mauris@Mauris.edu"], ["Calvin Valencia", "interdum@maurisut.ca"], ["Ignatius Browning", "ultricies.ornare.elit@quama.edu"], ["Honorato Stark", "sem.eget.massa@elementumlorem.com"], ["Reese Burris", "felis.orci@orci.ca"], ["Camden Holden", "tristique.pharetra.Quisque@Nuncut.org"], ["Ulysses Black", "semper.egestas@luctus.edu"], ["John Mcmillan", "laoreet.posuere@molestiein.com"], ["Vance Barry", "elit.sed.consequat@Suspendisse.edu"], ["Carter James", "velit@necanteMaecenas.org"], ["Cyrus Banks", "a@hendrerit.org"], ["Dexter Sharpe", "eu.sem.Pellentesque@tempordiam.ca"], ["Tyrone Gilliam", "sed@Vivamussit.org"], ["Kadeem Knight", "ultrices.posuere.cubilia@fermentumrisusat.edu"], ["Talon Prince", "ante.Vivamus.non@risusodioauctor.com"], ["Tanek Malone", "est.congue.a@Donectempus.ca"], ["Ryder Roth", "Proin.dolor.Nulla@non.org"], ["Jerry Burch", "odio@magnaCras.ca"], ["Lamar Sharp", "Aenean.egestas.hendrerit@Aeneaneget.org"], ["Ferdinand Michael", "mollis.Duis.sit@et.com"], ["Kelly Huber", "aliquet.libero@vel.edu"]];
var waves = [["lacinia. Sed","pede. Suspendisse dui. Fusce diam nunc, ullamcorper eu, euismod ac, fermentum","Aug 12","17"],["nonummy","purus, in molestie tortor nibh sit","Feb 26","2"],["Quisque fringilla","auctor, nunc nulla vulputate dui, nec tempus mauris erat eget ipsum. Suspendisse sagittis. Nullam vitae diam. Proin dolor. Nulla semper","Jun 3","14"],["luctus sit amet,","laoreet posuere, enim nisl elementum purus, accumsan interdum libero dui","Dec 29","14"],["mi eleifend","et, rutrum non, hendrerit id, ante. Nunc","Dec 13","2"],["tellus","congue, elit sed consequat auctor, nunc nulla vulputate dui, nec tempus mauris","Feb 6","4"],["Cras sed leo.","ac risus. Morbi metus. Vivamus euismod urna. Nullam lobortis quam a felis ullamcorper viverra. Maecenas iaculis aliquet diam.","Jul 13","12"],["Cum sociis","nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium","Jun 8","5"],["penatibus et","enim. Etiam imperdiet dictum magna. Ut tincidunt orci quis lectus. Nullam suscipit, est ac","May 27","3"],["malesuada.","consectetuer, cursus et, magna. Praesent interdum ligula eu enim. Etiam imperdiet","Sep 18","17"],["adipiscing lacus. Ut","Morbi vehicula. Pellentesque tincidunt tempus risus. Donec egestas.","Jan 6","18"],["eu enim.","sollicitudin a, malesuada id, erat. Etiam vestibulum","Mar 10","11"],["malesuada vel,","ultricies dignissim lacus. Aliquam rutrum lorem ac risus. Morbi metus. Vivamus euismod urna. Nullam lobortis quam","Aug 21","7"],["tortor,","Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamtortor,","Jul 12","28"],["ut aliquam iaculis,","sed, est. Nunc laoreet lectus quis massa. Mauris vestibulum, neque","May 11","13"],["malesuada","Nulla tincidunt, neque vitae semper egestas, urna justo faucibus","Dec 25","21"],["iaculis,","nisi. Mauris nulla. Integer urna.iaculis","Feb 19","19",""],["sodales. Mauris","vel, convallis in, cursus et, eros. Proin ultrices. Duis","Jan 19","18"],["libero lacus, varius","Morbi slibero lacus, varius","Feb 5","14"],["risus. Donec nibh","amet ultricies sem magna","Dec 29","15"],["x = %q(lacinia. Sed","pede. Suspendisse dui. Fusce diam nunc, ullamcorper eu, euismod ac, fermentum","Aug 12","17"],["nonummy","purus, in molestie tortor nibh sit","Feb 26","2"],["Quisque fringilla","auctor, nunc nulla vulputate dui, nec tempus mauris erat eget ipsum. Suspendisse sagittis. Nullam vitae diam. Proin dolor. Nulla semper","Jun 3","14"],["luctus sit amet,","laoreet posuere, enim nisl elementum purus, accumsan interdum libero dui","Dec 29","14"],["mi eleifend","et, rutrum non, hendrerit id, ante. Nunc","Dec 13","2"],["tellus","congue, elit sed consequat auctor, nunc nulla vulputate dui, nec tempus mauris","Feb 6","4"],["Cras sed leo.","ac risus. Morbi metus. Vivamus euismod urna. Nullam lobortis quam a felis ullamcorper viverra. Maecenas iaculis aliquet diam.","Jul 13","12"],["Cum sociis","nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium","Jun 8","5"],["penatibus et","enim. Etiam imperdiet dictum magna. Ut tincidunt orci quis lectus. Nullam suscipit, est ac","May 27","3"],["malesuada.","consectetuer, cursus et, magna. Praesent interdum ligula eu enim. Etiam imperdiet","Sep 18","17"],["adipiscing lacus. Ut","Morbi vehicula. Pellentesque tincidunt tempus risus. Donec egestas.","Jan 6","18"],["eu enim.","sollicitudin a, malesuada id, erat. Etiam vestibulum","Mar 10","11"],["malesuada vel,","ultricies dignissim lacus. Aliquam rutrum lorem ac risus. Morbi metus. Vivamus euismod urna. Nullam lobortis quam","Aug 21","7"],["tortor,","Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamtortor,","Jun 3","7"],["Suspendisse aliquet molestie","pharetra, felis eget varius ultrices, maurisSuspendisse aliquet molestie","Feb 19","19"],["sodales. Mauris","vel, convallis in, cursus et, eros. Proin ultrices. Duis","Jan 19","18"],["libero lacus, varius","Morbi slibero lacus, varius","Aug 30","24"],["at pretium","enim. Mauris quis turpis vitae purus gravida","Feb 14","10"],["in","malesuada. Integer id magna et ipsum cursus vestibulum. Mauris magna. Duis dignissim tempor arcu. Vestibulum ut eros non enim commodo","Feb 16","20"],["eget odio.","nonummy ultricies ornare, elit elit fermentum risus, at fringilla purus mauris a nunc. In at pede. Cras","Nov 28","5"],["eget,","erat, in consectetuer ipsum nunc id enim. Curabitur massa. Vestibulum accumsan neque","Dec 2","6"],["ante. Vivamus non","non, egestas a, dui. Cras pellentesque. Sed dictum. Proin eget","Feb 25","10"],["in","non, lobortis quis, pede.","May 19","7"],["Cras eget nisi","at auctor ullamcorper, nisl arcu iaculis enim, sit amet ornare lectus justo eu arcu. Morbi sit amet","Jan 22","22"],["mattis","cursus a, enim. Suspendisse aliquet, sem ut cursus luctus, ipsum leo elementum sem,","Jan 7","2"],["lectus.","odio semper cursus. Integer","Jul 21","13"],["aliquet","ut dolor dapibus gravida.","Jul 8","9"],["ultrices, mauris","metus. In lorem. Donec elementum, lorem ut aliquam","Dec 18","29"],["nulla. Integer vulputate,","ut dolor dapibus gravida. Aliquam tincidunt, nunc ac mattis ornare, lectus","Apr 25","25"],["erat, in consectetuer","Duis cursus, diam at pretium aliquet, metus urna","Oct 25","6"],["tristique","euismod est arcu ac orci. Ut semper pretium neque. Morbi quis urna. Nunc quis","Jan 3","5"],["sed dolor. Fusce","a neque. Nullam ut nisi a odio semper sed dolor. Fusce","Jul 19","12"],["penatibus","suscipit nonummy. Fusce fermentum","Apr 21","30"],["molestie in, tempus","placerat velit. Quisque varius. Nam porttitor scelerisque neque. Nullam nisl. Maecenas malesuada fringilla","Mar 12","18"],["eget","Sed pharetra, felis eget varius ultrices, mauris ipsum porta elit, a feugiat tellus lorem eu metus. In lorem.","Aug 19","18"],["quam vel sapien","nunc ac mattis ornare, lectus ante dictum mi,","Apr 15","28"],["dolor quam, elementum","amet","Nov 23","10"],["tincidunt. Donec vitae","tempus scelerisque, lorem ipsum sodales purus, in molestie tortor nibh sit amet orci. Ut sagittis lobortis mauris. Suspendisse aliquet molestie","Nov 14","9"],["lacus. Etiam","nec, diam. Duis mi enim, condimentum eget, volutpat","Aug 2","20"],["dictum eu, eleifend","ligula. Nullam feugiat placerat velit. Quisque varius. Nam porttitor scelerisque neque. Nullam nisl. Maecenas malesuada fringilla est. Mauris","Apr 22","18"],["magnis dis parturient","a","Jan 15","27"],["ipsum primis in","id magna et ipsum cursus ipsum primis in","Sep 11","24"],["est","posuere, enim nisl","Apr 26","8"],["cursus purus. Nullam","velit justo nec ante. Maecenas cursus purus. Nullam","Sep 1","4"],["Fusce","amet orci. Ut sagittis lobortis mauris. Suspendisse aliquet molestie tellus. Aenean","Feb 5","14"],["risus. Donec nibh","amet ultricies sem magna","Dec 29","15"]];
</script>
<script src='wave-theme.js'></script>
<script src='wave.js'></script>
</body>
</html>