index.php 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  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. }
  77. .collect_title {
  78. font-size: 20px;
  79. font-weight: 700;
  80. width: calc(100% - 30px);
  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. .article_title {
  129. text-overflow: ellipsis;
  130. display: -webkit-box;
  131. -webkit-box-orient: vertical;
  132. overflow: hidden;
  133. -webkit-line-clamp: 2;
  134. }
  135. </style>
  136. <style media="screen and (min-width:800px)">
  137. .collect_section .section_inner {
  138. display: grid;
  139. grid-template-columns: auto 360px;
  140. }
  141. </style>
  142. <!--
  143. <style media="screen and (max-width:800px)">
  144. #right_pannal{
  145. display:none;
  146. }
  147. .when_right_fixed{
  148. padding-right:0;
  149. }
  150. .index_toolbar{
  151. position:unset;
  152. }
  153. #pali_pedia{
  154. font-size: 200%;
  155. margin-top: auto;
  156. margin-bottom: auto;
  157. padding-left: 0.5em;
  158. }
  159. .index_inner{
  160. display:block;
  161. }
  162. .card{
  163. display: flex;
  164. justify-content: space-between;
  165. padding-right: 5em !important;
  166. }
  167. .card_info{
  168. flex:5;
  169. }
  170. .article_title_link{
  171. flex:5;
  172. }
  173. #book_list>div{
  174. width:100% !important;
  175. }
  176. </style>-->
  177. <?php
  178. //
  179. require_once "../config.php";
  180. require_once "../public/_pdo.php";
  181. require_once '../media/function.php';
  182. require_once '../public/function.php';
  183. ?>
  184. <div id='course_head_bar' class='collect_head_bar'>
  185. <div class='section_inner'>
  186. <h1><?php echo $_local->gui->composition; ?></h1>
  187. <div style='max-width:30em'><?php echo $_local->gui->composition_intro; ?></div>
  188. <!--
  189. <div id="main_tag">
  190. <span tag="vinaya">sīla</span>
  191. <span tag="sutta">samadhi</span>
  192. <span tag="abhidhamma">paññā</span>
  193. <span tag="mūla">vatthu</span>
  194. </div>
  195. <div id="tag_selected" class="" style="padding-bottom:5px;margin:0.5em 0;"></div>-->
  196. </div>
  197. </div>
  198. <div class="search_section">
  199. <div style='font-size:140%;'>
  200. <span style="display:inline-block;max-width:20em;"><input class="disable" 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>
  201. <button class="icon_btn disable">
  202. <svg class="icon">
  203. <use xlink:href="../studio/svg/icon.svg#ic_search"></use>
  204. </svg>
  205. </button>
  206. </div>
  207. </div>
  208. <div class="collect_section">
  209. <div class="section_inner">
  210. <div class="left_content">
  211. <div style="display:flex;">
  212. <h2 style="margin-right:auto">
  213. <?php echo $_local->gui->composition; ?>
  214. </h2>
  215. <div level="7" class="tag_others" style="padding-bottom:5px; margin-right:5px;">
  216. <select>
  217. <option><?php echo $_local->gui->all; ?></option>
  218. <option><?php echo $_local->gui->ongoing; ?></option>
  219. <option><?php echo $_local->gui->completed; ?></option>
  220. </select>
  221. </div>
  222. <div level="8" class="tag_others" style="padding-bottom:5px;">
  223. <select>
  224. <option><?php echo $_local->gui->popular; ?></option>
  225. <option><?php echo $_local->gui->recommendation; ?></option>
  226. <option><?php echo $_local->gui->collection; ?></option>
  227. <option><?php echo $_local->gui->rates; ?></option>
  228. <option><?php echo $_local->gui->updated; ?></option>
  229. </select>
  230. </div>
  231. </div>
  232. <div id="book_list">
  233. </div>
  234. </div>
  235. <div class="right_content">
  236. <h2><?php echo $_local->gui->hot_topic; ?></h2>
  237. <div class="disable" style="display:flex; margin:1em 0; flex-wrap:wrap;">
  238. <div class="tag">sīla</div>
  239. <div class="tag">smādhi</div>
  240. <div class="tag">paññā</div>
  241. <div class="tag">jātaka</div>
  242. <div class="tag">visuddhimagga</div>
  243. <div class="tag">ānāpānassati</div>
  244. </div>
  245. <h2><?php echo $_local->gui->author; ?></h2>
  246. <div class="disable" style="margin:1em 0;">
  247. <div class="list_with_head noselect">
  248. <div class="head"><span class="head_img">Ko</span></div>
  249. <div class="channal_list">Visuddhinanda Bhikkhu</div>
  250. </div>
  251. <div class="list_with_head noselect">
  252. <div class="head"><span class="head_img">Ko</span></div>
  253. <div class="channal_list">Kosalla Bhikkhu</div>
  254. </div>
  255. <div class="list_with_head noselect">
  256. <div class="head"><span class="head_img">Ko</span></div>
  257. <div class="channal_list">Paññābhinanda</div>
  258. </div>
  259. </div>
  260. <h2><?php echo $_local->gui->language; ?></h2>
  261. </div>
  262. </div>
  263. </div>
  264. <div id="page_bottom" style="height:10em;">
  265. <?php echo $_local->gui->loading; ?>
  266. </div>
  267. <script>
  268. $(document).ready(function() {
  269. collect_load();
  270. });
  271. </script>
  272. <?php
  273. include "../pcdl/html_foot.php";
  274. ?>