index.php 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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_link {
  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. }
  82. .subtitle {
  83. color: gray;
  84. text-overflow: ellipsis;
  85. margin-bottom: 10px;
  86. }
  87. .summary {
  88. display: -webkit-box;
  89. -webkit-box-orient: vertical;
  90. overflow: hidden;
  91. text-overflow: ellipsis;
  92. width: 100%;
  93. -webkit-line-clamp: 2;
  94. }
  95. .collect_head_bar {
  96. background-color: #212121;
  97. height: 280px;
  98. padding: 30px;
  99. color: white;
  100. }
  101. .collect_section {
  102. background-color: #f5f5f5;
  103. }
  104. .section_inner {
  105. max-width: 960px;
  106. margin: 0 auto;
  107. }
  108. .right_content,
  109. .left_content {
  110. width: 100%;
  111. padding: 1rem;
  112. }
  113. .search_section {
  114. background-color: #3a3a3a;
  115. text-align: center;
  116. line-height: 3.5rem;
  117. position: sticky;
  118. top: 50px;
  119. z-index: 80;
  120. }
  121. .tag {
  122. background-color: #6374EF;
  123. border-radius: 4px;
  124. color: white;
  125. padding: 3px 6px;
  126. margin: 0 5px 5px 0;
  127. }
  128. </style>
  129. <style media="screen and (min-width:800px)">
  130. .collect_section .section_inner {
  131. display: grid;
  132. grid-template-columns: auto 360px;
  133. }
  134. </style>
  135. <!--
  136. <style media="screen and (max-width:800px)">
  137. #right_pannal{
  138. display:none;
  139. }
  140. .when_right_fixed{
  141. padding-right:0;
  142. }
  143. .index_toolbar{
  144. position:unset;
  145. }
  146. #pali_pedia{
  147. font-size: 200%;
  148. margin-top: auto;
  149. margin-bottom: auto;
  150. padding-left: 0.5em;
  151. }
  152. .index_inner{
  153. display:block;
  154. }
  155. .card{
  156. display: flex;
  157. justify-content: space-between;
  158. padding-right: 5em !important;
  159. }
  160. .card_info{
  161. flex:5;
  162. }
  163. .article_title_link{
  164. flex:5;
  165. }
  166. #book_list>div{
  167. width:100% !important;
  168. }
  169. </style>-->
  170. <?php
  171. //
  172. require_once "../path.php";
  173. require_once "../public/_pdo.php";
  174. require_once '../media/function.php';
  175. require_once '../public/function.php';
  176. ?>
  177. <div id='course_head_bar' class='collect_head_bar'>
  178. <div class='section_inner'>
  179. <h1>著作</h1>
  180. <div style='width:30em'>各種從經典中擷取的文章,所彙集成的文,其中有多人翻譯的篇章等等的各種。</div>
  181. <!--
  182. <div id="main_tag">
  183. <span tag="vinaya">sīla</span>
  184. <span tag="sutta">samadhi</span>
  185. <span tag="abhidhamma">paññā</span>
  186. <span tag="mūla">vatthu</span>
  187. </div>
  188. <div id="tag_selected" class="" style="padding-bottom:5px;margin:0.5em 0;"></div>-->
  189. </div>
  190. </div>
  191. <div class="search_section">
  192. <div style='font-size:140%;'>
  193. <span style="display:inline-block;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>
  194. <button class="icon_btn">
  195. <svg class="icon">
  196. <use xlink:href="../studio/svg/icon.svg#ic_search"></use>
  197. </svg>
  198. </button>
  199. </div>
  200. </div>
  201. <div class="collect_section">
  202. <div class="section_inner">
  203. <div class="left_content">
  204. <div style="display:flex;">
  205. <h2 style="margin-right:auto;">文集</h2>
  206. <div level="7" class="tag_others" style="padding-bottom:5px; margin-right:5px;">
  207. <select>
  208. <option><?php echo $_local->gui->all; ?></option>
  209. <option><?php echo $_local->gui->ongoing; ?></option>
  210. <option><?php echo $_local->gui->completed; ?></option>
  211. </select>
  212. </div>
  213. <div level="8" class="tag_others" style="padding-bottom:5px;">
  214. <select>
  215. <option><?php echo $_local->gui->popular; ?></option>
  216. <option><?php echo $_local->gui->recommendation; ?></option>
  217. <option><?php echo $_local->gui->collection; ?></option>
  218. <option><?php echo $_local->gui->rates; ?></option>
  219. <option><?php echo $_local->gui->updated; ?></option>
  220. </select>
  221. </div>
  222. </div>
  223. <div id="book_list">
  224. </div>
  225. </div>
  226. <div class="right_content">
  227. <h2>熱門主題</h2>
  228. <div class="disable" style="display:flex; margin:1em 0; flex-wrap:wrap;">
  229. <div class="tag">sīla</div>
  230. <div class="tag">smādhi</div>
  231. <div class="tag">paññā</div>
  232. <div class="tag">本生</div>
  233. <div class="tag">visuddhimaga</div>
  234. <div class="tag">入出息</div>
  235. </div>
  236. <h2><?php echo $_local->gui->author; ?></h2>
  237. <div class="disable" style="margin:1em 0;">
  238. <div class="list_with_head noselect">
  239. <div class="head"><span class="head_img">Ko</span></div>
  240. <div class="channal_list">Visuddhinanda Bhikkhu</div>
  241. </div>
  242. <div class="list_with_head noselect">
  243. <div class="head"><span class="head_img">Ko</span></div>
  244. <div class="channal_list">Kosalla Bhikkhu</div>
  245. </div>
  246. <div class="list_with_head noselect">
  247. <div class="head"><span class="head_img">Ko</span></div>
  248. <div class="channal_list">Paññābhinanda</div>
  249. </div>
  250. </div>
  251. <h2><?php echo $_local->gui->language; ?></h2>
  252. </div>
  253. </div>
  254. </div>
  255. <div id="page_bottom" style="height:10em;">
  256. <?php echo $_local->gui->loading; ?>
  257. </div>
  258. <script>
  259. $(document).ready(function() {
  260. collect_load();
  261. });
  262. </script>
  263. <?php
  264. include "../pcdl/html_foot.php";
  265. ?>