index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>Home</title>
  5. <link rel="stylesheet" href="./libs/semantic/dist/semantic.css" />
  6. <link rel="stylesheet" href="/src/css/store-index.css" />
  7. <script src="/src/js/test.js" defer></script>
  8. </head>
  9. <body>
  10. <div layout:fragment="content" id="app">
  11. <div class="ui active dimmer" id="pageLoader">
  12. <div class="ui text blue elastic loader">Loading</div>
  13. </div>
  14. <br /><br />
  15. <div v-if="assets.showcase && assets.showcase.length > 0" class="main-carousel">
  16. <br /><br />
  17. <carousel-3d :count="assets.showcase.length" :visible="10" :width="720" :height="360" :border="1" :controls-visible="true" :controls-prev-html="'&#10092;'" :controls-next-html="'&#10093;'" :clickable="false" :perspective="20" :space="400">
  18. <slide v-for="(asset, i) in assets.showcase" :index="i">
  19. <img :src="'/image/' + asset.mediaLinks.imageIds.split(',')[0]">
  20. <rating>
  21. <div class="ui large star rating disabled">
  22. <i class="star icon" :class="asset.rating.averageRating >= 1 ? 'yellow' : 'grey'"></i>
  23. <i class="star icon" :class="asset.rating.averageRating >= 2 ? 'yellow' : 'grey'"></i>
  24. <i class="star icon" :class="asset.rating.averageRating >= 3 ? 'yellow' : 'grey'"></i>
  25. <i class="star icon" :class="asset.rating.averageRating >= 4 ? 'yellow' : 'grey'"></i>
  26. <i class="star icon" :class="asset.rating.averageRating >= 5 ? 'yellow' : 'grey'"></i>
  27. </div>
  28. </rating>
  29. <figtitle>
  30. <a :href="'/' + asset.id">
  31. <h1 class="ui header title">{{ asset.details.title }}</h1>
  32. </a>
  33. </figtitle>
  34. <figcaption>
  35. {{ asset.details.shortDescription }}
  36. </figcaption>
  37. </slide>
  38. </carousel-3d>
  39. </div> <!-- END assets showcase -->
  40. <div class="ui container">
  41. <br /><br /><br />
  42. <div class="ui four item stackable menu">
  43. <a class="item" href="#highest_rated"><i class="star icon"></i>Highest Rated</a>
  44. <a class="item" href="#new_additions"><i class="plus icon"></i>New Additions</a>
  45. <a class="item" href="#recently_updated"><i class="pen icon"></i>Recently Updated</a>
  46. <a class="item" href="/search/?author="><i class="list icon"></i>Browse All</a>
  47. </div>
  48. <!-- Highest Rated -->
  49. <div v-if="assets.highest_rated && assets.highest_rated.totalElements > 0">
  50. <br /><br />
  51. <a name="highest_rated"></a>
  52. <br />
  53. <div class="ui segments">
  54. <div class="ui inverted segment">
  55. <h2 class="ui header">
  56. Highest Rated
  57. </h2>
  58. </div>
  59. <div class="ui green segment">
  60. <div class="ui stackable grid">
  61. <div class="row" v-for="(row, index) in 5">
  62. <!-- Left -->
  63. <div class="eight wide column">
  64. <div class="ui green segment">
  65. <div class="ui grid">
  66. <div class="eight wide column">
  67. <div class="ui rounded fluid bordered image">
  68. <img :src="'/image/' + assets.highest_rated.content[index].mediaLinks.imageIds.split(',')[0]">
  69. </div>
  70. </div>
  71. <div class="eight wide column">
  72. <a :href="'/' + assets.highest_rated.content[index].id">
  73. <h3 class="ui header">
  74. {{ assets.highest_rated.content[index].details.title }}
  75. </h3>
  76. </a>
  77. <img class="ui avatar image" :src="'/image/' + assets.highest_rated.content[index].owner.avatarId" />
  78. by
  79. <a :href="'/user/profile/' + assets.highest_rated.content[index].owner.id">
  80. {{ assets.highest_rated.content[index].owner.username }}
  81. </a>
  82. <p>
  83. {{ assets.highest_rated.content[index].details.shortDescription }}
  84. </p>
  85. <div class="ui mini star rating ministar disabled">
  86. <i class="star icon" :class="assets.highest_rated.content[index].rating.averageRating >= 1 ? 'yellow' : 'black'"></i>
  87. <i class="star icon" :class="assets.highest_rated.content[index].rating.averageRating >= 2 ? 'yellow' : 'black'"></i>
  88. <i class="star icon" :class="assets.highest_rated.content[index].rating.averageRating >= 3 ? 'yellow' : 'black'"></i>
  89. <i class="star icon" :class="assets.highest_rated.content[index].rating.averageRating >= 4 ? 'yellow' : 'black'"></i>
  90. <i class="star icon" :class="assets.highest_rated.content[index].rating.averageRating >= 5 ? 'yellow' : 'black'"></i>
  91. </div>
  92. <div>
  93. Rated: {{ assets.highest_rated.content[index].rating.averageRating }} | {{ assets.highest_rated.content[index].rating.ratingCount }} reviews.
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- Right -->
  100. <div class="eight wide column">
  101. <div class="ui green segment">
  102. <div class="ui grid">
  103. <div class="eight wide column">
  104. <div class="ui rounded fluid bordered image">
  105. <img :src="'/image/' + assets.highest_rated.content[index + 5].mediaLinks.imageIds.split(',')[0]">
  106. </div>
  107. </div>
  108. <div class="eight wide column">
  109. <a :href="'/' + assets.highest_rated.content[index + 5].id">
  110. <h3 class="ui header">
  111. {{ assets.highest_rated.content[index + 5].details.title }}
  112. </h3>
  113. </a>
  114. <img class="ui avatar image" :src="'/image/' + assets.highest_rated.content[index + 5].owner.avatarId" />
  115. by
  116. <a :href="'/user/profile/' + assets.highest_rated.content[index + 5].owner.id">
  117. {{ assets.highest_rated.content[index + 5].owner.username }}
  118. </a>
  119. <p>
  120. {{ assets.highest_rated.content[index + 5].details.shortDescription }}
  121. </p>
  122. <div class="ui mini star rating ministar disabled">
  123. <i class="star icon" :class="assets.highest_rated.content[index + 5].rating.averageRating >= 1 ? 'yellow' : 'black'"></i>
  124. <i class="star icon" :class="assets.highest_rated.content[index + 5].rating.averageRating >= 2 ? 'yellow' : 'black'"></i>
  125. <i class="star icon" :class="assets.highest_rated.content[index + 5].rating.averageRating >= 3 ? 'yellow' : 'black'"></i>
  126. <i class="star icon" :class="assets.highest_rated.content[index + 5].rating.averageRating >= 4 ? 'yellow' : 'black'"></i>
  127. <i class="star icon" :class="assets.highest_rated.content[index + 5].rating.averageRating >= 5 ? 'yellow' : 'black'"></i>
  128. </div>
  129. <div>
  130. Rated: {{ assets.highest_rated.content[index + 5].rating.averageRating }} | {{ assets.highest_rated.content[index + 5].rating.ratingCount }} reviews.
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. </div> <!-- END highest rated -->
  141. <!-- New Additions -->
  142. <div v-if="assets.new_additions && assets.new_additions.totalElements > 0">
  143. <br /><br />
  144. <a name="new_additions"></a>
  145. <br />
  146. <div class="ui segments">
  147. <div class="ui inverted segment">
  148. <h2 class="ui header">
  149. New Additions
  150. </h2>
  151. </div>
  152. <div class="ui yellow segment">
  153. <div class="ui stackable grid">
  154. <div class="row" v-for="(row, index) in 5">
  155. <!-- Left -->
  156. <div class="eight wide column">
  157. <div class="ui yellow segment">
  158. <div class="ui grid">
  159. <div class="eight wide column">
  160. <div class="ui rounded fluid bordered image">
  161. <img :src="'/image/' + assets.new_additions.content[index].mediaLinks.imageIds.split(',')[0]">
  162. </div>
  163. </div>
  164. <div class="eight wide column">
  165. <a :href="'/' + assets.new_additions.content[index].id">
  166. <h3 class="ui header">
  167. {{ assets.new_additions.content[index].details.title }}
  168. </h3>
  169. </a>
  170. <img class="ui avatar image" :src="'/image/' + assets.new_additions.content[index].owner.avatarId" />
  171. by
  172. <a :href="'/user/profile/' + assets.new_additions.content[index].owner.id">
  173. {{ assets.new_additions.content[index].owner.username }}
  174. </a>
  175. <p>
  176. {{ assets.new_additions.content[index].details.shortDescription }}
  177. </p>
  178. <div class="ui mini star rating ministar disabled">
  179. <i class="star icon" :class="assets.new_additions.content[index].rating.averageRating >= 1 ? 'yellow' : 'black'"></i>
  180. <i class="star icon" :class="assets.new_additions.content[index].rating.averageRating >= 2 ? 'yellow' : 'black'"></i>
  181. <i class="star icon" :class="assets.new_additions.content[index].rating.averageRating >= 3 ? 'yellow' : 'black'"></i>
  182. <i class="star icon" :class="assets.new_additions.content[index].rating.averageRating >= 4 ? 'yellow' : 'black'"></i>
  183. <i class="star icon" :class="assets.new_additions.content[index].rating.averageRating >= 5 ? 'yellow' : 'black'"></i>
  184. </div>
  185. <div>
  186. Rated: {{ assets.new_additions.content[index].rating.averageRating }} | {{ assets.new_additions.content[index].rating.ratingCount }} reviews.
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. <!-- Right -->
  193. <div class="eight wide column">
  194. <div class="ui yellow segment">
  195. <div class="ui grid">
  196. <div class="eight wide column">
  197. <div class="ui rounded fluid bordered image">
  198. <img :src="'/image/' + assets.new_additions.content[index + 5].mediaLinks.imageIds.split(',')[0]">
  199. </div>
  200. </div>
  201. <div class="eight wide column">
  202. <a :href="'/' + assets.new_additions.content[index + 5].id">
  203. <h3 class="ui header">
  204. {{ assets.new_additions.content[index + 5].details.title }}
  205. </h3>
  206. </a>
  207. <img class="ui avatar image" :src="'/image/' + assets.new_additions.content[index + 5].owner.avatarId" />
  208. by
  209. <a :href="'/user/profile/' + assets.new_additions.content[index + 5].owner.id">
  210. {{ assets.new_additions.content[index + 5].owner.username }}
  211. </a>
  212. <p>
  213. {{ assets.new_additions.content[index + 5].details.shortDescription }}
  214. </p>
  215. <div class="ui mini star rating ministar disabled">
  216. <i class="star icon" :class="assets.new_additions.content[index + 5].rating.averageRating >= 1 ? 'yellow' : 'black'"></i>
  217. <i class="star icon" :class="assets.new_additions.content[index + 5].rating.averageRating >= 2 ? 'yellow' : 'black'"></i>
  218. <i class="star icon" :class="assets.new_additions.content[index + 5].rating.averageRating >= 3 ? 'yellow' : 'black'"></i>
  219. <i class="star icon" :class="assets.new_additions.content[index + 5].rating.averageRating >= 4 ? 'yellow' : 'black'"></i>
  220. <i class="star icon" :class="assets.new_additions.content[index + 5].rating.averageRating >= 5 ? 'yellow' : 'black'"></i>
  221. </div>
  222. <div>
  223. Rated: {{ assets.new_additions.content[index + 5].rating.averageRating }} | {{ assets.new_additions.content[index + 5].rating.ratingCount }} reviews.
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div> <!-- END New Additions -->
  234. <!-- Recently Updated -->
  235. <div v-if="assets.recently_updated && assets.recently_updated.totalElements > 0">
  236. <br /><br />
  237. <a name="recently_updated"></a>
  238. <br />
  239. <div class="ui segments">
  240. <div class="ui inverted segment">
  241. <h2 class="ui header">
  242. Recently Updated
  243. </h2>
  244. </div>
  245. <div class="ui blue segment">
  246. <div class="ui stackable grid">
  247. <div class="row" v-for="(row, index) in 5">
  248. <!-- Left -->
  249. <div class="eight wide column">
  250. <div class="ui blue segment">
  251. <div class="ui grid">
  252. <div class="eight wide column">
  253. <div class="ui rounded fluid bordered image">
  254. <img :src="'/image/' + assets.recently_updated.content[index].mediaLinks.imageIds.split(',')[0]">
  255. </div>
  256. </div>
  257. <div class="eight wide column">
  258. <a :href="'/' + assets.recently_updated.content[index].id">
  259. <h3 class="ui header">
  260. {{ assets.recently_updated.content[index].details.title }}
  261. </h3>
  262. </a>
  263. <img class="ui avatar image" :src="'/image/' + assets.recently_updated.content[index].owner.avatarId" />
  264. by
  265. <a :href="'/user/profile/' + assets.recently_updated.content[index].owner.id">
  266. {{ assets.recently_updated.content[index].owner.username }}
  267. </a>
  268. <p>
  269. {{ assets.recently_updated.content[index].details.shortDescription }}
  270. </p>
  271. <div class="ui mini star rating ministar disabled">
  272. <i class="star icon" :class="assets.recently_updated.content[index].rating.averageRating >= 1 ? 'yellow' : 'black'"></i>
  273. <i class="star icon" :class="assets.recently_updated.content[index].rating.averageRating >= 2 ? 'yellow' : 'black'"></i>
  274. <i class="star icon" :class="assets.recently_updated.content[index].rating.averageRating >= 3 ? 'yellow' : 'black'"></i>
  275. <i class="star icon" :class="assets.recently_updated.content[index].rating.averageRating >= 4 ? 'yellow' : 'black'"></i>
  276. <i class="star icon" :class="assets.recently_updated.content[index].rating.averageRating >= 5 ? 'yellow' : 'black'"></i>
  277. </div>
  278. <div>
  279. Rated: {{ assets.recently_updated.content[index].rating.averageRating }} | {{ assets.recently_updated.content[index].rating.ratingCount }} reviews.
  280. </div>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <!-- Right -->
  286. <div class="eight wide column">
  287. <div class="ui blue segment">
  288. <div class="ui grid">
  289. <div class="eight wide column">
  290. <div class="ui rounded fluid bordered image">
  291. <img :src="'/image/' + assets.recently_updated.content[index + 5].mediaLinks.imageIds.split(',')[0]">
  292. </div>
  293. </div>
  294. <div class="eight wide column">
  295. <a :href="'/' + assets.recently_updated.content[index + 5].id">
  296. <h3 class="ui header">
  297. {{ assets.recently_updated.content[index + 5].details.title }}
  298. </h3>
  299. </a>
  300. <img class="ui avatar image" :src="'/image/' + assets.recently_updated.content[index + 5].owner.avatarId" />
  301. by
  302. <a :href="'/user/profile/' + assets.recently_updated.content[index + 5].owner.id">
  303. {{ assets.recently_updated.content[index + 5].owner.username }}
  304. </a>
  305. <p>
  306. {{ assets.recently_updated.content[index + 5].details.shortDescription }}
  307. </p>
  308. <div class="ui mini star rating ministar disabled">
  309. <i class="star icon" :class="assets.recently_updated.content[index + 5].rating.averageRating >= 1 ? 'yellow' : 'black'"></i>
  310. <i class="star icon" :class="assets.recently_updated.content[index + 5].rating.averageRating >= 2 ? 'yellow' : 'black'"></i>
  311. <i class="star icon" :class="assets.recently_updated.content[index + 5].rating.averageRating >= 3 ? 'yellow' : 'black'"></i>
  312. <i class="star icon" :class="assets.recently_updated.content[index + 5].rating.averageRating >= 4 ? 'yellow' : 'black'"></i>
  313. <i class="star icon" :class="assets.recently_updated.content[index + 5].rating.averageRating >= 5 ? 'yellow' : 'black'"></i>
  314. </div>
  315. <div>
  316. Rated: {{ assets.recently_updated.content[index + 5].rating.averageRating }} | {{ assets.recently_updated.content[index + 5].rating.ratingCount }} reviews.
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. </div>
  326. </div> <!-- END Recently Updated -->
  327. <br /><br />
  328. </div>
  329. </div>
  330. </body>
  331. </html>