You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

173 lines
7.2 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Standard Meta -->
  5. <meta charset="utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  8. <!-- Site Properities -->
  9. <title>Feed Example - Semantic</title>
  10. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
  11. <link rel="stylesheet" type="text/css" href="../packaged/definitions/css/semantic.css">
  12. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  13. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.js"></script>
  14. <script src="../packaged/definitions/javascript/semantic.js"></script>
  15. <link rel="stylesheet" type="text/css" href="feed.css">
  16. <script src="feed.js"></script>
  17. </head>
  18. <body id="feed">
  19. <div class="ui large inverted vertical sidebar menu">
  20. <a class="active item">
  21. Dogs Weekly <span class="ui label">213</span>
  22. </a>
  23. <a class="item">
  24. Joystiq <span class="ui label">113</span>
  25. </a>
  26. <div class="item">
  27. <b>Archived Feeds</b>
  28. <div class="menu">
  29. <a class="item">
  30. Engadget <span class="ui label">11</span>
  31. </a>
  32. <a class="item">
  33. NY Times Tech Blog <span class="ui label">21</span>
  34. </a>
  35. </div>
  36. </div>
  37. <a class="item">
  38. <i class="bookmark icon"></i> Favorites
  39. </a>
  40. <div class="ui dropdown item">
  41. <i class="add icon"></i> New
  42. <div class="menu">
  43. <a class="item"><i class="rss icon"></i> Feed</a>
  44. <a class="item"><i class="tag icon"></i> Tag</a>
  45. <a class="item"><i class="folder icon"></i> Group</a>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="ui divided grid">
  50. <div class="seven wide middle column">
  51. <div class="ui right floated black launch button">
  52. <i class="list layout icon"></i> Menu
  53. </div>
  54. <h2 class="ui header">
  55. <i class="inbox icon"></i>
  56. Inbox
  57. </h2>
  58. <div class="ui tabular filter menu">
  59. <a class="active item" data-tab="unread">Unread</a>
  60. <a class="item" data-tab="saved">Saved</a>
  61. <a class="item" data-tab="all">All</a>
  62. </div>
  63. <div class="ui divided inbox selection list active tab" data-tab="unread">
  64. <a class="active item">
  65. <div class="left floated ui star rating">
  66. <i class="icon"></i>
  67. </div>
  68. <div class="right floated date">Sep 14, 2013</div>
  69. <div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
  70. </a>
  71. <a class="item">
  72. <div class="left floated ui star rating">
  73. <i class="icon"></i>
  74. </div>
  75. <div class="right floated date">Sep 14, 2013</div>
  76. <div class="description">Scientists discover new breed of dog</div>
  77. </a>
  78. <a class="item">
  79. <div class="left floated ui star rating">
  80. <i class="icon"></i>
  81. </div>
  82. <div class="right floated date">Sep 10, 2013</div>
  83. <div class="description">Dogs colony in Antarctica</div>
  84. </a>
  85. <a class="item">
  86. <div class="left floated ui star rating">
  87. <i class="icon"></i>
  88. </div>
  89. <div class="right floated date">Sep 09, 2013</div>
  90. <div class="description">Famous dog whisperer Chakotay dies today at 104</div>
  91. </a>
  92. <a class="item">
  93. <div class="left floated ui star rating">
  94. <i class="icon"></i>
  95. </div>
  96. <div class="right floated date">Sep 07, 2013</div>
  97. <div class="description">Top 10 Things to Know about Labradoodles</div>
  98. </a>
  99. <a class="item">
  100. <div class="left floated ui star rating">
  101. <i class="icon"></i>
  102. </div>
  103. <div class="right floated date">Sep 05, 2013</div>
  104. <div class="description">Study shows children enjoy the company of animals</div>
  105. </a>
  106. </div>
  107. <div class="ui divided inbox selection list tab" data-tab="saved">
  108. <a class="item">
  109. <div class="left floated ui star rating">
  110. <i class="icon"></i>
  111. </div>
  112. <div class="right floated date">Sep 14, 2013</div>
  113. <div class="description">Your favorite saved article</div>
  114. </a>
  115. <a class="item">
  116. <div class="left floated ui star rating">
  117. <i class="icon"></i>
  118. </div>
  119. <div class="right floated date">Sep 14, 2013</div>
  120. <div class="description">Your favorite saved article</div>
  121. </a>
  122. <a class="item">
  123. <div class="left floated ui star rating">
  124. <i class="icon"></i>
  125. </div>
  126. <div class="right floated date">Sep 14, 2013</div>
  127. <div class="description">Your favorite saved article</div>
  128. </a>
  129. </div>
  130. <div class="ui divided inbox selection list tab" data-tab="all">
  131. <a class="item">
  132. <div class="left floated ui star rating">
  133. <i class="link icon"></i>
  134. </div>
  135. <div class="right floated date">Sep 14, 2013</div>
  136. <div class="description">There turns out there is only one article under all.</div>
  137. </a>
  138. </div>
  139. <div class="ui divider"></div>
  140. <div class="current">Showing <b>6</b> of 213</div>
  141. <div class="ui pagination menu">
  142. <a class="icon item"><i class="icon left arrow"></i></a>
  143. <a class="active item">1</a>
  144. <div class="disabled item">...</div>
  145. <a class="item">10</a>
  146. <a class="item">11</a>
  147. <a class="item">12</a>
  148. <a class="icon item"><i class="icon right arrow"></i></a>
  149. </div>
  150. </div>
  151. <div class="nine wide right column">
  152. <h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
  153. <a class="ui label">Unread</a>
  154. <a class="ui label">Comics</a>
  155. <div class="ui divider"></div>
  156. <p>So there's this video game coming out Tuesday called Grand Theft Auto 5. Don't know if you've heard of it. Anyways, it's all about crime and gangs and some roughneck ne'er-do-wells, so I thought this would be the perfect time to talk about times when we've been... well, less than perfect.</p>
  157. <p>When I was a young'un, I was a frequent visitor to the local swimming pool. I was also a frequent lover of AirHeads candy, which the pool happened to sell. Waiting, watching, stalking the counter like a big cat in the savannah, I waited for the perfect opportunity to strike. While the lifeguards were busy, I snuck through the gate, reached up and took both cherry and "mystery white" AirHeads. I quickly ran out to the sidewalk and reveled in my sweet, delicious victory... for all of ten seconds, before I felt guilty enough to sneak back in and return the .20 worth of candy I had stolen.</p>
  158. <p>While you confess your crimes - hopefully minor, and nothing you can be persecuted for - take a moment to enjoy this week's webcomics, and vote for your favorite after the jump.</p>
  159. <div class="ui divider"></div>
  160. <div class="ui basic button">Save</div>
  161. <div class="ui basic button">Delete</div>
  162. </div>
  163. </div>
  164. </body>
  165. </html>