mobile_digest_template.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  6. <title>RobotDaily {{date}}</title>
  7. <style>
  8. :root {
  9. color-scheme: light;
  10. --bg: #f4f6fb;
  11. --card: #ffffff;
  12. --text: #142033;
  13. --muted: #5e6c84;
  14. --line: #d7ddea;
  15. --brand: #4f46e5;
  16. --brand-soft: #eef0ff;
  17. --accent: #0f766e;
  18. --accent-soft: #ecfdf5;
  19. --warn: #b45309;
  20. --warn-soft: #fff7ed;
  21. --shadow: 0 10px 28px rgba(20, 32, 51, 0.08);
  22. --radius: 18px;
  23. }
  24. * { box-sizing: border-box; }
  25. html, body { margin: 0; padding: 0; }
  26. body {
  27. font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  28. background:
  29. radial-gradient(circle at top right, rgba(79, 70, 229, 0.10), transparent 30%),
  30. radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 28%),
  31. var(--bg);
  32. color: var(--text);
  33. }
  34. a { color: inherit; }
  35. .page {
  36. max-width: 980px;
  37. margin: 0 auto;
  38. padding: 18px 14px 40px;
  39. }
  40. .hero {
  41. background: linear-gradient(135deg, #312e81 0%, #4f46e5 44%, #0f766e 100%);
  42. color: #fff;
  43. border-radius: 24px;
  44. padding: 20px 18px;
  45. box-shadow: 0 16px 36px rgba(49, 46, 129, 0.22);
  46. }
  47. .hero h1 {
  48. margin: 0 0 8px;
  49. font-size: 24px;
  50. line-height: 1.2;
  51. }
  52. .hero p {
  53. margin: 0;
  54. color: rgba(255,255,255,0.9);
  55. line-height: 1.55;
  56. font-size: 14px;
  57. }
  58. .nav {
  59. display: flex;
  60. gap: 10px;
  61. flex-wrap: wrap;
  62. margin-top: 14px;
  63. }
  64. .nav a {
  65. text-decoration: none;
  66. color: #fff;
  67. background: rgba(255,255,255,0.15);
  68. padding: 8px 12px;
  69. border-radius: 999px;
  70. font-size: 13px;
  71. backdrop-filter: blur(6px);
  72. }
  73. .section {
  74. margin-top: 18px;
  75. }
  76. .section-header {
  77. display: flex;
  78. align-items: center;
  79. justify-content: space-between;
  80. gap: 12px;
  81. margin: 0 0 10px;
  82. }
  83. .section-header h2 {
  84. margin: 0;
  85. font-size: 18px;
  86. }
  87. .section-header .count {
  88. color: var(--muted);
  89. font-size: 13px;
  90. }
  91. .cards {
  92. display: grid;
  93. gap: 12px;
  94. }
  95. .paper-card {
  96. background: var(--card);
  97. border-radius: var(--radius);
  98. border: 1px solid rgba(215, 221, 234, 0.9);
  99. box-shadow: var(--shadow);
  100. overflow: hidden;
  101. }
  102. .paper-card summary {
  103. list-style: none;
  104. cursor: pointer;
  105. padding: 16px;
  106. display: block;
  107. }
  108. .paper-card summary::-webkit-details-marker { display: none; }
  109. .paper-card[open] summary {
  110. border-bottom: 1px solid var(--line);
  111. background: #fbfcff;
  112. }
  113. .meta-row {
  114. display: flex;
  115. flex-wrap: wrap;
  116. gap: 8px;
  117. align-items: center;
  118. margin-bottom: 10px;
  119. }
  120. .pill {
  121. display: inline-flex;
  122. align-items: center;
  123. gap: 6px;
  124. border-radius: 999px;
  125. padding: 5px 10px;
  126. font-size: 12px;
  127. line-height: 1;
  128. white-space: nowrap;
  129. }
  130. .pill.domain {
  131. color: var(--brand);
  132. background: var(--brand-soft);
  133. font-weight: 700;
  134. }
  135. .pill.score {
  136. color: var(--accent);
  137. background: var(--accent-soft);
  138. }
  139. .pill.date {
  140. color: var(--warn);
  141. background: var(--warn-soft);
  142. }
  143. .paper-title {
  144. margin: 0;
  145. font-size: 17px;
  146. line-height: 1.4;
  147. word-break: break-word;
  148. }
  149. .teaser {
  150. margin: 10px 0 0;
  151. font-size: 14px;
  152. line-height: 1.7;
  153. color: #23304a;
  154. }
  155. .tag-row {
  156. display: flex;
  157. flex-wrap: wrap;
  158. gap: 8px;
  159. margin-top: 12px;
  160. }
  161. .tag {
  162. border-radius: 999px;
  163. padding: 6px 10px;
  164. font-size: 12px;
  165. color: #334155;
  166. background: #f1f5f9;
  167. border: 1px solid #e2e8f0;
  168. }
  169. .paper-body {
  170. padding: 16px;
  171. display: grid;
  172. gap: 12px;
  173. }
  174. .info {
  175. font-size: 13px;
  176. color: var(--muted);
  177. line-height: 1.6;
  178. }
  179. .block {
  180. background: #f8fafc;
  181. border-radius: 14px;
  182. padding: 13px 14px;
  183. }
  184. .block h3 {
  185. margin: 0 0 8px;
  186. font-size: 14px;
  187. }
  188. .block p {
  189. margin: 0;
  190. font-size: 14px;
  191. line-height: 1.72;
  192. color: #1f2937;
  193. white-space: pre-wrap;
  194. word-break: break-word;
  195. }
  196. .links {
  197. display: flex;
  198. flex-wrap: wrap;
  199. gap: 10px;
  200. }
  201. .link-btn {
  202. text-decoration: none;
  203. color: var(--brand);
  204. border: 1px solid rgba(79, 70, 229, 0.22);
  205. background: rgba(79, 70, 229, 0.06);
  206. border-radius: 12px;
  207. padding: 10px 12px;
  208. font-size: 13px;
  209. font-weight: 600;
  210. }
  211. .footer {
  212. margin-top: 22px;
  213. color: var(--muted);
  214. font-size: 13px;
  215. text-align: center;
  216. }
  217. @media (min-width: 860px) {
  218. .cards {
  219. grid-template-columns: repeat(2, minmax(0, 1fr));
  220. }
  221. .hero h1 { font-size: 28px; }
  222. }
  223. </style>
  224. </head>
  225. <body>
  226. <main class="page">
  227. <section class="hero">
  228. <h1>RobotDaily 晨读</h1>
  229. <p>{{intro}}</p>
  230. <div class="nav">{{nav}}</div>
  231. </section>
  232. {{sections}}
  233. <p class="footer">生成时间:{{generated_at}} · DOI 默认优先展示官方 DOI;若原文未提供,则回退为 arXiv 的 DataCite DOI。</p>
  234. </main>
  235. </body>
  236. </html>