/index.html

https://github.com/DjebbZ/Zepto-mobile · HTML · 82 lines · 72 code · 8 blank · 2 comment · 0 complexity · 3b7060485997ed7ee9476b0275a7b068 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.   	<title>ZEPTO MOBILE</title>
    5. 

  5.   	
    6. 

  6.    	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    7. 

  7. 

  8. 		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
    9. 

  9. 		<link href="css/swipeslide.css" media="screen" rel="stylesheet" type="text/css" />
    10. 

  10. 		
    11. 

  11. 		<script type="text/javascript" src="js/iscroll.js"></script>
    12. 

  12. 		<script type="text/javascript" src="js/zepto.js"></script>
    13. 

  13. 		<script type="text/javascript" src="js/underscore.js"></script>
    14. 

  14. 		<script type="text/javascript" src="js/backbone.js"></script>
    15. 

  15. 		<script type="text/javascript" src="js/swipeslide.js"></script>
    16. 

  16. 		<script type="text/javascript" src="js/ICanHaz.js"></script>
    17. 

  17. 		<script type="text/javascript" src="js/script.js"></script>
    18. 

  18. 		
    19. 

  19. 		<!-- Template for Index Page -->
    20. 

  20. 		<script type="text/html" id="indexView">
    21. 

  21. 		  <h2>SwipeSlide gallery</h2>
    22. 

  22. 	    <div id="slider">
    23. 

  23.         <div id="slider-content">
    24. 

  24.           <figure>
    25. 

  25.             <a href="#page2"><img src="img/amsterdam.jpg" />
    26. 

  26.             <figcaption>Amsterdam</figcaption></a>
    27. 

  27.           </figure>
    28. 

  28.           <figure>
    29. 

  29.             <img src="img/barpark.jpg" />
    30. 

  30.             <figcaption>Bar Park</figcaption>
    31. 

  31.           </figure>
    32. 

  32.           <figure>
    33. 

  33.             <img src="img/clody.jpg" />
    34. 

  34.             <figcaption>Clody</figcaption>
    35. 

  35.           </figure>
    36. 

  36.           <figure>
    37. 

  37.             <img src="img/gate.jpg" />
    38. 

  38.             <figcaption>Gate</figcaption>
    39. 

  39.           </figure>
    40. 

  40.         </div> <!-- end #slider-content -->
    41. 

  41.       </div> <!-- end #slider -->
    42. 

  42.       <h2>List view</h2>
    43. 

  43. 	    <div class="fieldset">
    44. 

  44. 	      <div class="field">
    45. 

  45. 	        <img src="img/icon.png" />
    46. 

  46. 	        <div class="left"><h3>Item title</h3><small>Item description</small></div>
    47. 

  47. 	        <div class="right"><span class="bubble-gray">5</span><br />Info</div>
    48. 

  48. 	      </div>
    49. 

  49. 	      <div class="field">
    50. 

  50. 	        <img src="img/icon.png" />
    51. 

  51. 	        <div class="left"><h3>Item title</h3><small>Item description</small></div>
    52. 

  52. 	        <div class="right"><span class="bubble-gray">2</span><br />Info</div>
    53. 

  53. 	      </div>
    54. 

  54. 	      <div class="field">
    55. 

  55. 	        <img src="img/icon.png" />
    56. 

  56. 	        <div class="left"><h3>Item title</h3><small>Item description</small></div>
    57. 

  57. 	        <div class="right"><span class="bubble-gray">3</span><br />Info</div>
    58. 

  58. 	      </div>
    59. 

  59. 	    </div> <!-- end .fieldset -->
    60. 

  60. 		</script>
    61. 

  61. 		
    62. 

  62. 		<!-- Template for a dummy Page 2 -->
    63. 

  63. 		<script type="text/html" id="page2View">
    64. 

  64. 		  <h2>Page 2</h2>
    65. 

  65. 		  <p>Fake content just for filling this page.</p>
    66. 

  66. 		  <p>Nor are the most conscientious compilations of Natural History for the benefit of the young and tender, free from the same heinousness of mistake. Look at that popular work "Goldsmith's Animated Nature." In the abridged London edition of 1807, there are plates of an alleged "whale" and a "narwhale." I do not wish to seem inelegant, but this unsightly whale looks much like an amputated sow; and, as for the narwhale, one glimpse at it is enough to amaze one, that in this nineteenth century such a hippogriff could be palmed for genuine upon any intelligent public of schoolboys.</p>
    67. 

  67.       <p>Then, again, in 1825, Bernard Germain, Count de Lacepede, a great naturalist, published a scientific systemized whale book, wherein are several pictures of the different species of the Leviathan. All these are not only incorrect, but the picture of the Mysticetus or Greenland whale (that is to say, the Right whale), even Scoresby, a long experienced man as touching that species, declares not to have its counterpart in nature.</p>
    68. 

  68. 		</script>
    69. 

  69. 		
    70. 

  70. 	</head>
    71. 

  71. 	
    72. 

  72. 	<body>
    73. 

  73. 		<div id="header">
    74. 

  74. 			<h1>ZEPTO MOBILE</h1>
    75. 

  75. 		</div>
    76. 

  76. 		<div id="wrapper">
    77. 

  77. 		  <div id="scroller">
    78. 

  78. 		    
    79. 

  79.       </div> <!-- end #scroller -->
    80. 

  80. 		</div> <!-- end #wrapper -->
    81. 

  81. 	</body>
    82. 

  82. </html>
    83.