/9-final-no-server/public/index.html

https://bitbucket.org/edwardstlouis/backbonepeep1 · HTML · 130 lines · 117 code · 9 blank · 4 comment · 0 complexity · 9ad1f9071bbfee71b0d672308b876ff6 MD5 · raw file 

    

  1. <!doctype html>
    2. 

  2. 

  3. <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
    4. 

  4. <!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
    5. 

  5. <!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
    6. 

  6. <!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
    7. 

  7. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    8. 

  8.   <head>
    9. 

  9.     <meta charset="utf-8">
    10. 

  10. 

  11.     <title>Backbone Tunes</title>
    12. 

  12.     <meta name="author" content="David Goodlad <david@goodlad.ca>">
    13. 

  13. 

  14.     <link rel="stylesheet" href="style/screen.css" media="screen, projection">
    15. 

  15.     <link rel="stylesheet" href="style/fancypants.css" media="screen, projection">
    16. 

  16. 

  17.     <script src="js/vendor/modernizr-1.6.min.js"></script>
    18. 

  18.     <script src="js/vendor/jquery-1.5.1.min.js"></script>
    19. 

  19.     <script src="js/vendor/underscore.js"></script>
    20. 

  20.     <script src="js/vendor/backbone.js"></script>
    21. 

  21.     <script src="js/Tunes.js"></script>
    22. 

  22. 

  23.     <script type="text/template" id="library-template">
    24. 

  24.       <h1>Music Library</h1>
    25. 

  25.       <ul class="albums"></ul>
    26. 

  26.     </script>
    27. 

  27. 

  28.     <script type="text/template" id="playlist-template">
    29. 

  29.       <h1>Playlist</h1>
    30. 

  30.       <nav>
    31. 

  31.         <button class="control play">Play</button>
    32. 

  32.         <button class="control pause">Pause</button>
    33. 

  33.         <button class="control prev">Prev</button>
    34. 

  34.         <button class="control next">Next</button>
    35. 

  35.       </nav>
    36. 

  36.       <ul class="albums">
    37. 

  37.       </ul>
    38. 

  38.     </script>
    39. 

  39. 

  40.     <script type="text/template" id="album-template">
    41. 

  41.       <button class="queue add"><img src="images/add.png"></button>
    42. 

  42.       <button class="queue remove"><img src="images/remove.png"></button>
    43. 

  43.       <span class="album-title"><%= title %></span>&nbsp;&nbsp;
    44. 

  44.       <span class="artist-name"><%= artist %></span>
    45. 

  45.       <ol class="tracks">
    46. 

  46.         <% _.each(tracks, function(track) { %>
    47. 

  47.           <li><%= track.title %></li>
    48. 

  48.         <% }); %>
    49. 

  49.       </ol>
    50. 

  50.     </script>
    51. 

  51. 

  52.     <script type="application/javascript">
    53. 

  53.       jQuery(function() {
    54. 

  54.         window.library.reset([{
    55. 

  55.             "title": "Bound - Zen Bound Ingame Music",
    56. 

  56.             "artist": "Ghost Monkey",
    57. 

  57.             "tracks": [{
    58. 

  58.                 "title": "Care",
    59. 

  59.                 "url": "music/blue.mp3"
    60. 

  60.             },
    61. 

  61.             {
    62. 

  62.                 "title": "Rope and Wood",
    63. 

  63.                 "url": "music/jazz.mp3"
    64. 

  64.             },
    65. 

  65.             {
    66. 

  66.                 "title": "Problem Solvent",
    67. 

  67.                 "url": "music/minimalish.mp3"
    68. 

  68.             },
    69. 

  69.             {
    70. 

  70.                 "title": "Unpaint My Skin",
    71. 

  71.                 "url": "music/slower.mp3"
    72. 

  72.             },
    73. 

  73.             {
    74. 

  74.                 "title": "Nostalgia",
    75. 

  75.                 "url": "music/blue.mp3"
    76. 

  76.             },
    77. 

  77.             {
    78. 

  78.                 "title": "Interludum",
    79. 

  79.                 "url": "music/jazz.mp3"
    80. 

  80.             },
    81. 

  81.             {
    82. 

  82.                 "title": "Grind",
    83. 

  83.                 "url": "music/minimalish.mp3"
    84. 

  84.             },
    85. 

  85.             {
    86. 

  86.                 "title": "Diagrams",
    87. 

  87.                 "url": "music/slower.mp3"
    88. 

  88.             },
    89. 

  89.             {
    90. 

  90.                 "title": "Hare",
    91. 

  91.                 "url": "music/blue.mp3"
    92. 

  92.             },
    93. 

  93.             {
    94. 

  94.                 "title": "Carefree",
    95. 

  95.                 "url": "music/jazz.mp3"
    96. 

  96.             },
    97. 

  97.             {
    98. 

  98.                 "title": "Tunnel At The End Of Light",
    99. 

  99.                 "url": "music/minimalish.mp3"
    100. 

  100.             }]
    101. 

  101.         },
    102. 

  102.         {
    103. 

  103.             "title": "Where the Earth Meets the Sky",
    104. 

  104.             "artist": "Tom Heasley",
    105. 

  105.             "tracks": [{
    106. 

  106.                 "title": "Ground Zero",
    107. 

  107.                 "url": "music/blue.mp3"
    108. 

  108.             },
    109. 

  109.             {
    110. 

  110.                 "title": "Western Sky",
    111. 

  111.                 "url": "music/jazz.mp3"
    112. 

  112.             },
    113. 

  113.             {
    114. 

  114.                 "title": "Monterey Bay",
    115. 

  115.                 "url": "music/minimalish.mp3"
    116. 

  116.             },
    117. 

  117.             {
    118. 

  118.                 "title": "Where the Earth Meets the Sky",
    119. 

  119.                 "url": "music/slower.mp3"
    120. 

  120.             }]
    121. 

  121.         }]);
    122. 

  122.       });
    123. 

  123.     </script>
    124. 

  124.   </head>
    125. 

  125. 

  126.   <body>
    127. 

  127.     <div id="container">
    128. 

  128.     </div>
    129. 

  129.   </body>
    130. 

  130. </html>
    131.