index.php 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <?PHP
  2. include "../pcdl/html_head.php";
  3. ?>
  4. <body>
  5. <?php
  6. require_once("../pcdl/head_bar.php");
  7. ?>
  8. <script language="javascript" src="../collect/index.js"></script>
  9. <style>
  10. h1 {
  11. font-size: 42px;
  12. font-weight: 700;
  13. margin: 0.3em 0;
  14. }
  15. h2 {
  16. font-size: 18px;
  17. font-weight: 700;
  18. margin: 0;
  19. }
  20. .disable {
  21. opacity: 0.4;
  22. cursor: not-allowed;
  23. }
  24. #main_tag span {
  25. margin: 2px;
  26. padding: 2px 12px;
  27. font-weight: 500;
  28. transition-duration: 0.2s;
  29. cursor: pointer;
  30. display: inline-flex;
  31. align-items: center;
  32. flex-wrap: nowrap;
  33. justify-content: center;
  34. font-size: 110%;
  35. border: unset;
  36. border-radius: 0;
  37. border-bottom: 2px solid var(--nocolor);
  38. }
  39. #main_tag span:hover {
  40. background-color: unset;
  41. color: unset;
  42. border-color: var(--link-hover-color);
  43. }
  44. #main_tag .select {
  45. border-bottom: 2px solid var(--link-color);
  46. }
  47. tag {
  48. background-color: var(--btn-color);
  49. margin: 0 0.5em;
  50. padding: 3px 5px;
  51. border-radius: 6px;
  52. display: inline-flex;
  53. border: 1.5px solid;
  54. border-color: #70707036;
  55. }
  56. tag .icon:hover {
  57. background-color: silver;
  58. }
  59. #footer_nav {
  60. display: none;
  61. }
  62. .index_inner .icon_btn .icon {
  63. fill: var(--btn-hover-bg-color);
  64. }
  65. .index_inner .icon_btn:hover .icon {
  66. fill: var(--btn-bg-color);
  67. }
  68. .article_title_list {
  69. margin-top: 18px;
  70. display: grid;
  71. grid-template-columns: 80px auto;
  72. }
  73. .collect_card {
  74. display: block;
  75. padding: 1rem 1.5rem;
  76. box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
  77. }
  78. .collect_title {
  79. font-size: 20px;
  80. font-weight: 700;
  81. width: calc(100% - 30px);
  82. }
  83. .subtitle {
  84. color: gray;
  85. text-overflow: ellipsis;
  86. margin-bottom: 10px;
  87. }
  88. .summary {
  89. display: -webkit-box;
  90. -webkit-box-orient: vertical;
  91. overflow: hidden;
  92. text-overflow: ellipsis;
  93. width: 100%;
  94. -webkit-line-clamp: 2;
  95. }
  96. .collect_head_bar {
  97. background-color: #212121;
  98. height: 280px;
  99. padding: 30px;
  100. color: white;
  101. }
  102. .collect_section {
  103. background-color: #f5f5f5;
  104. }
  105. .section_inner {
  106. max-width: 960px;
  107. margin: 0 auto;
  108. }
  109. .right_content,
  110. .left_content {
  111. width: 100%;
  112. padding: 1rem;
  113. }
  114. .search_section {
  115. background-color: #3a3a3a;
  116. text-align: center;
  117. line-height: 3.5rem;
  118. position: sticky;
  119. top: 50px;
  120. z-index: 80;
  121. }
  122. .tag {
  123. background-color: #6374EF;
  124. border-radius: 4px;
  125. color: white;
  126. padding: 3px 6px;
  127. margin: 0 5px 5px 0;
  128. }
  129. .article_title {
  130. text-overflow: ellipsis;
  131. display: -webkit-box;
  132. -webkit-box-orient: vertical;
  133. overflow: hidden;
  134. -webkit-line-clamp: 2;
  135. }
  136. </style>
  137. <style media="screen and (min-width:800px)">
  138. .collect_section .section_inner {
  139. display: grid;
  140. grid-template-columns: auto 360px;
  141. }
  142. </style>
  143. <!--
  144. <style media="screen and (max-width:800px)">
  145. #right_pannal{
  146. display:none;
  147. }
  148. .when_right_fixed{
  149. padding-right:0;
  150. }
  151. .index_toolbar{
  152. position:unset;
  153. }
  154. #pali_pedia{
  155. font-size: 200%;
  156. margin-top: auto;
  157. margin-bottom: auto;
  158. padding-left: 0.5em;
  159. }
  160. .index_inner{
  161. display:block;
  162. }
  163. .card{
  164. display: flex;
  165. justify-content: space-between;
  166. padding-right: 5em !important;
  167. }
  168. .card_info{
  169. flex:5;
  170. }
  171. .article_title_link{
  172. flex:5;
  173. }
  174. #book_list>div{
  175. width:100% !important;
  176. }
  177. </style>-->
  178. <?php
  179. //
  180. require_once "../path.php";
  181. require_once "../public/_pdo.php";
  182. require_once '../media/function.php';
  183. require_once '../public/function.php';
  184. ?>
  185. <div id='course_head_bar' class='collect_head_bar'>
  186. <div class='section_inner'>
  187. <h1><?php echo $_local->gui->composition; ?></h1>
  188. <div style='max-width:30em'><?php echo $_local->gui->composition_intro; ?></div>
  189. <!--
  190. <div id="main_tag">
  191. <span tag="vinaya">sīla</span>
  192. <span tag="sutta">samadhi</span>
  193. <span tag="abhidhamma">paññā</span>
  194. <span tag="mūla">vatthu</span>
  195. </div>
  196. <div id="tag_selected" class="" style="padding-bottom:5px;margin:0.5em 0;"></div>-->
  197. </div>
  198. </div>
  199. <div class="search_section">
  200. <div style='font-size:140%;'>
  201. <span style="display:inline-block;max-width:20em;"><input type="input" placeholder=<?php echo $_local->gui->search . ':' . $_local->gui->title . '&nbsp;OR&nbsp;' . $_local->gui->author; ?> style="background-color:var(--new-tool-input-text-bg); border:solid 1px var(--new-tool-btn-border)" /></span>
  202. <button class="icon_btn">
  203. <svg class="icon">
  204. <use xlink:href="../studio/svg/icon.svg#ic_search"></use>
  205. </svg>
  206. </button>
  207. </div>
  208. </div>
  209. <div class="collect_section">
  210. <div class="section_inner">
  211. <div class="left_content">
  212. <div style="display:flex;">
  213. <h2 style="margin-right:auto">
  214. <?php echo $_local->gui->composition; ?>
  215. </h2>
  216. <div level="7" class="tag_others" style="padding-bottom:5px; margin-right:5px;">
  217. <select>
  218. <option><?php echo $_local->gui->all; ?></option>
  219. <option><?php echo $_local->gui->ongoing; ?></option>
  220. <option><?php echo $_local->gui->completed; ?></option>
  221. </select>
  222. </div>
  223. <div level="8" class="tag_others" style="padding-bottom:5px;">
  224. <select>
  225. <option><?php echo $_local->gui->popular; ?></option>
  226. <option><?php echo $_local->gui->recommendation; ?></option>
  227. <option><?php echo $_local->gui->collection; ?></option>
  228. <option><?php echo $_local->gui->rates; ?></option>
  229. <option><?php echo $_local->gui->updated; ?></option>
  230. </select>
  231. </div>
  232. </div>
  233. <div id="book_list">
  234. </div>
  235. </div>
  236. <div class="right_content">
  237. <h2><?php echo $_local->gui->hot_topic; ?></h2>
  238. <div class="disable" style="display:flex; margin:1em 0; flex-wrap:wrap;">
  239. <div class="tag">sīla</div>
  240. <div class="tag">smādhi</div>
  241. <div class="tag">paññā</div>
  242. <div class="tag">jātaka</div>
  243. <div class="tag">visuddhimagga</div>
  244. <div class="tag">ānāpānassati</div>
  245. </div>
  246. <h2><?php echo $_local->gui->author; ?></h2>
  247. <div class="disable" style="margin:1em 0;">
  248. <div class="list_with_head noselect">
  249. <div class="head"><span class="head_img">Ko</span></div>
  250. <div class="channal_list">Visuddhinanda Bhikkhu</div>
  251. </div>
  252. <div class="list_with_head noselect">
  253. <div class="head"><span class="head_img">Ko</span></div>
  254. <div class="channal_list">Kosalla Bhikkhu</div>
  255. </div>
  256. <div class="list_with_head noselect">
  257. <div class="head"><span class="head_img">Ko</span></div>
  258. <div class="channal_list">Paññābhinanda</div>
  259. </div>
  260. </div>
  261. <h2><?php echo $_local->gui->language; ?></h2>
  262. </div>
  263. </div>
  264. </div>
  265. <div id="page_bottom" style="height:10em;">
  266. <?php echo $_local->gui->loading; ?>
  267. </div>
  268. <script>
  269. $(document).ready(function() {
  270. collect_load();
  271. });
  272. </script>
  273. <?php
  274. include "../pcdl/html_foot.php";
  275. ?>