Permalink
Browse files

Initial Upload

  • Loading branch information...
0 parents commit aee61c54f1139eed403112ab3aa2a278f8548188 erik klimczak committed Jul 26, 2011
@@ -0,0 +1,229 @@
+/* reset styles
+--------------------------------------------- */
+html,body,div,span,applet,object,iframe,button,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
+ margin:0;
+ padding:0;
+ font-size:100%;
+ vertical-align:baseline;
+ border:0;
+ outline:0
+}
+
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+ display:block
+}
+
+ol,ul {
+ list-style:none
+}
+
+blockquote,q {
+ quotes:none
+}
+
+table {
+ border-collapse:collapse;
+ border-spacing:0
+}
+
+a:hover,a:active {
+ outline:none
+}
+
+/* end reset
+ ------------------------------------------------------------------------------*/
+body {
+ overflow:hidden;
+ background-color:#000;
+ font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
+ font-weight:300;
+ font-size:14px;
+ color:#fff
+}
+
+#progressBar {
+ position:absolute;
+ top:50%;
+ left:0;
+ height:4px;
+ width:0;
+ background-color:#49a1cb;
+ z-index:10
+}
+
+#progressNumber {
+ position:absolute;
+ left:50%;
+ top:50%;
+ font-size:21px;
+ font-style:italic;
+ font-weight:700;
+ color:#fff;
+ z-index:10;
+ margin-top:15px
+}
+
+#container {
+ position:relative
+}
+
+#logo {
+ position:absolute;
+ top:25px;
+ left:25px;
+ background:url(../images/logo.png);
+ background-repeat:no-repeat;
+ width:170px;
+ height:49px;
+ z-index:2
+}
+
+#parallaxBg {
+ position:absolute;
+ top:0;
+ left:-50px;
+ background-color:#000
+}
+
+#dataList {
+ position:absolute
+}
+
+.vCenter {
+ top:50%
+}
+
+.hCenter {
+ left:50%
+}
+
+.listItem {
+ margin-right:5px;
+ padding:0;
+ position:relative
+}
+
+.closeBtn {
+ position:absolute;
+ top:15px;
+ right:15px;
+ width:32px;
+ height:32px;
+ background:url(../images/closeBtn.png);
+ background-repeat:no-repeat
+}
+
+.listDisplayItem {
+ -webkit-transition-property:-webkit-transform;
+ -webkit-transition-duration:450ms;
+ -webkit-transform-origin:5% 100%;
+ transform-origin:5% 100%;
+ -ms-transform-origin:5% 100%;
+ -moz-transform-origin:5% 100%;
+ -o-transform-origin:5% 100%
+}
+
+footer:before {
+ content:"";
+ position:absolute;
+ top:-10px;
+ left:0;
+ width:100%;
+ height:10px;
+ z-index:2;
+ background-image:url(../images/shadow.png);
+ background-repeat:repeat-x
+}
+
+footer {
+ position:absolute;
+ width:100%;
+ height:50px;
+ top:0;
+ background-color:#1e1e1e;
+ left:0;
+ z-index:3;
+ border-top:1px solid #000;
+ opacity:0;
+ -webkit-transition-property:-webkit-transform;
+ -webkit-transition-duration:350ms
+}
+
+footer ul {
+ font-family:"Myriad Pro","Gill Sans",Arial,sans-serif;
+ font-weight:700;
+ font-size:12px;
+ color:#ccc;
+ margin-left:30px;
+ float:left
+}
+
+footer li {
+ float:left;
+ margin:20px 25px 0 10px
+}
+
+button {
+ padding:0;
+ border:none;
+ width:48px;
+ height:48px;
+ cursor:pointer;
+ overflow:visible
+}
+
+button.expander {
+ float:right;
+ margin:0 15px 0 0;
+ background:url(../images/chevron.png) center no-repeat;
+ z-index:3;
+ -webkit-transition-property:-webkit-transform;
+ -webkit-transition-duration:350ms
+}
+
+button.expander:active {
+ margin-top:1px;
+ margin-left:1px;
+ opacity:.33
+}
+
+#info {
+ position:absolute;
+ background-color:#222;
+ border-top:1px solid #000;
+ width:100%;
+ height:150px;
+ margin-top:50px
+}
+
+.infoText {
+ float:left;
+ width:600px;
+ font-family:Verdana,Helvetica,Arial,sans-serif;
+ font-size:11px;
+ line-height:165%;
+ margin:20px 0 0 40px
+}
+
+
+#clarityLogo {
+ float:right;
+ background:url(../images/clarityLogo.png);
+ background-repeat:no-repeat;
+ width:196px;
+ height:68px;
+ margin:25px 30px 0 0
+}
+
+.black_overlay {
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ background-color:rgba(0,0,0,.33);
+ display:none;
+ opacity:0;
+ -webkit-transition-property:opacity;
+ -webkit-transition-duration:350ms
+}
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>
+<dirinfo>
+<files>
+<item key='1.jpg20110606150410' />
+<item key='loader.gif20110606145221' />
+</files>
+</dirinfo>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Touch Friendly HTML5 Website</title>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
+ <meta name="viewport" content="height=device-height,width=device-width, initial-scale=1,maximum-scale=1.0">
+ <link rel="stylesheet" href="css/style.css" type="text/css">
+ <script src='js/modernizr2.js' type="text/javascript"></script>
+</head>
+
+<body ontouchmove="BlockMove(event);">
+ <div id="container">
+ <div id="loader">
+ <div id="progressBar"></div><span id="progressNumber"></span>
+ </div>
+
+ <div id="logo"></div>
+
+ <div id="parallaxBg"><img src='images/back.jpg'></div>
+
+ <div id="dataList"></div>
+
+ <footer id="footer">
+ <ul>
+ <li>MENU 1</li>
+
+ <li>MENU 2</li>
+
+ <li>MENU 3</li>
+ </ul>
+
+ <button id="btnExpand" class="expander" type="button"></button>
+
+ <div id="info">
+ <p class="infoText">
+ This is a HTML5 experiment exploring how to create an 'app-like' website. The code showcases the following:
+ <span style="color:#999;">1)</span> Avoiding the use of jQuery for optimal perf on mobile devices.
+ <span style="color:#999;">2)</span> Implementing touch support.
+ <span style="color:#999;">3)</span> Providing a workaround for scrolling in fixed layouts on iOS.
+ <span style="color:#999;">4)</span> Using Hardware accelerated animations.
+ </p>
+ <div id="clarityLogo"></div>
+ </div>
+ </footer>
+
+ <div id="modal" class="black_overlay">
+ <div class="closeBtn"></div>
+ </div>
+ </div>
+
+<script src="js/util.js" type="text/javascript">
+</script><script src="js/loader.js" type="text/javascript">
+</script><script src="js/scroller.js" type="text/javascript">
+</script><script src="js/script.js" type="text/javascript">
+</script>
+</body>
+</html>
@@ -0,0 +1,94 @@
+// A simpler image loader implementation inspired by http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
+
+ var imgLoader = function(urls) {
+ this.urls = urls || {};
+ this.imgs = [];
+ this.number_total_assets_to_load = 0;
+ this.current_number_loaded = 0;
+ this.progress_number = 0;
+ };
+
+ imgLoader.prototype = {
+ load: function() {
+
+ var deets = [];
+ for(var u in this.urls) {
+ this.number_total_assets_to_load++;
+ if(!this.urls.hasOwnProperty(u)) { continue; }
+ deets.push(u);
+ }
+
+
+ for(var i = 0; i < deets.length; i++) {
+ var imgDeet = deets[i],
+ self = this;
+ // Wrapped in a closure to isolate each iterations load.
+ (function(name, url, s) {
+ setTimeout(function() {
+ s.loadImg(name, url);
+ }, 100);
+ })(imgDeet, this.urls[imgDeet], self);
+
+ }
+ },
+ loadImg: function(name, url) {
+ var img = new Image(),
+ self = this;
+
+ img.src = url;
+ img.alt = name;
+
+ img.onerror = function() {
+ console.log('Error Loading Image', name, url, img);
+ };
+
+ img.onload = function() {
+
+ var o = {
+ img: img,
+ name: name,
+ url: url
+ };
+
+ self.current_number_loaded ++;
+ self.progress_number = Math.round((self.current_number_loaded / self.number_total_assets_to_load)*100);
+ self.onImgLoaded(self.progress_number);
+
+ if(self.progress_number == 100)
+ self.onComplete();
+ };
+
+ this.imgs.push(img);
+ },
+ onImgLoaded: function(){
+ },
+ onComplete: function(){
+
+ }
+ };
+
+ // List of our images.
+ var imgs = {
+
+ img1: 'images/1.jpg',
+ img2: 'images/2.jpg',
+ img3: 'images/3.jpg',
+ img4: 'images/4.jpg',
+ img5: 'images/5.jpg',
+ img6: 'images/6.jpg',
+ img7: 'images/7.jpg',
+ img8: 'images/8.jpg',
+ img9: 'images/9.jpg',
+ img10: 'images/10.jpg',
+ img11: 'images/11.jpg',
+ img12: 'images/12.jpg',
+ img13: 'images/13.jpg',
+ img14: 'images/14.jpg',
+ img15: 'images/15.jpg',
+ img16: 'images/16.jpg',
+ img17: 'images/17.jpg',
+ img18: 'images/18.jpg',
+ img19: 'images/19.jpg',
+ img20: 'images/20.jpg'
+ }
+

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit aee61c5

Please sign in to comment.