Home Explore Help
Sign In
TC
/
arozos-mirror
mirror of https://github.com/tobychui/arozos
1
0
Fork 0
Files Issues 0 Wiki
Tree: c91b127b67
Branches Tags
arozos-mirror
/
src
/
web
/
Productivity
/
embedded.html

embedded.html 44 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6.     <title>Productivity</title>
    7. 

  7.     <script src="../script/jquery.min.js"></script>
    8. 

  8.     <script src="../script/ao_module.js"></script>
    9. 

  9.     <style>
    10. 

  10.         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    11. 

  11. 

  12.         html, body {
    13. 

  13.             width: 100%; height: 100%;
    14. 

  14.             overflow: hidden;
    15. 

  15.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    16. 

  16.             background: #F2F2F7;
    17. 

  17.             color: #1C1C1E;
    18. 

  18.         }
    19. 

  19. 

  20.         /* ── TOOLBAR ─────────────────────────────────────────── */
    21. 

  21.         #toolbar {
    22. 

  22.             position: fixed;
    23. 

  23.             top: 0; left: 0; right: 0;
    24. 

  24.             height: 44px;
    25. 

  25.             display: flex;
    26. 

  26.             align-items: center;
    27. 

  27.             padding: 0 8px;
    28. 

  28.             gap: 4px;
    29. 

  29.             background: rgba(242,242,247,0.94);
    30. 

  30.             backdrop-filter: blur(20px) saturate(1.8);
    31. 

  31.             -webkit-backdrop-filter: blur(20px) saturate(1.8);
    32. 

  32.             border-bottom: 1px solid rgba(0,0,0,0.1);
    33. 

  33.             z-index: 500;
    34. 

  34.             user-select: none;
    35. 

  35.             -webkit-user-select: none;
    36. 

  36.         }
    37. 

  37. 

  38.         .tb-group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
    39. 

  39. 

  40.         .tb-btn {
    41. 

  41.             width: 30px; height: 30px;
    42. 

  42.             border: none; background: none;
    43. 

  43.             border-radius: 7px;
    44. 

  44.             cursor: pointer;
    45. 

  45.             display: flex; align-items: center; justify-content: center;
    46. 

  46.             color: #3C3C43;
    47. 

  47.             transition: background 0.1s;
    48. 

  48.             flex-shrink: 0;
    49. 

  49.         }
    50. 

  50.         .tb-btn:hover  { background: rgba(0,0,0,0.07); }
    51. 

  51.         .tb-btn:active { background: rgba(0,0,0,0.13); }
    52. 

  52.         .tb-btn.active { background: rgba(0,122,255,0.12); color: #007AFF; }
    53. 

  53.         .tb-btn:disabled { opacity: 0.3; cursor: default; }
    54. 

  54.         .tb-btn:disabled:hover { background: none; }
    55. 

  55. 

  56.         .tb-sep {
    57. 

  57.             width: 1px; height: 18px;
    58. 

  58.             background: rgba(0,0,0,0.14);
    59. 

  59.             flex-shrink: 0; margin: 0 5px;
    60. 

  60.         }
    61. 

  61. 

  62.         #tbCenter {
    63. 

  63.             flex: 1;
    64. 

  64.             display: flex; align-items: center; justify-content: center;
    65. 

  65.             gap: 7px; min-width: 0;
    66. 

  66.         }
    67. 

  67. 

  68.         #tbFileIcon { flex-shrink: 0; }
    69. 

  69. 

  70.         #tbFileName {
    71. 

  71.             font-size: 13px; font-weight: 590;
    72. 

  72.             color: #1C1C1E;
    73. 

  73.             overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    74. 

  74.         }
    75. 

  75. 

  76.         #tbZoomLabel {
    77. 

  77.             font-size: 11.5px; font-weight: 500;
    78. 

  78.             color: #6C6C70;
    79. 

  79.             min-width: 38px; text-align: center;
    80. 

  80.             font-variant-numeric: tabular-nums;
    81. 

  81.         }
    82. 

  82. 

  83.         /* ── CONTENT ─────────────────────────────────────────── */
    84. 

  84.         #contentWrap {
    85. 

  85.             position: fixed;
    86. 

  86.             top: 44px; left: 0; right: 0; bottom: 0;
    87. 

  87.         }
    88. 

  88. 

  89.         /* Empty state */
    90. 

  90.         #emptyState {
    91. 

  91.             width: 100%; height: 100%;
    92. 

  92.             display: flex; flex-direction: column;
    93. 

  93.             align-items: center; justify-content: center;
    94. 

  94.             gap: 12px; color: #8E8E93;
    95. 

  95.         }
    96. 

  96.         #emptyState svg { opacity: 0.45; }
    97. 

  97.         #emptyState p  { font-size: 14px; font-weight: 500; }
    98. 

  98. 

  99.         /* ── iframe viewer (HTML + PDF) ──────────────────────── */
    100. 

  100.         #iframeViewer {
    101. 

  101.             display: none;
    102. 

  102.             width: 100%; height: 100%;
    103. 

  103.             border: none;
    104. 

  104.             transform-origin: top left;
    105. 

  105.         }
    106. 

  106. 

  107.         /* ── Image viewer ────────────────────────────────────── */
    108. 

  108.         #imageViewer {
    109. 

  109.             display: none;
    110. 

  110.             width: 100%; height: 100%;
    111. 

  111.             overflow: hidden;
    112. 

  112.             background: #1C1C1E;
    113. 

  113.             position: relative;
    114. 

  114.         }
    115. 

  115. 

  116.         #imgStage {
    117. 

  117.             position: absolute;
    118. 

  118.             top: 0; left: 0;
    119. 

  119.             width: 100%; height: 100%;
    120. 

  120.             display: flex;
    121. 

  121.             align-items: center;
    122. 

  122.             justify-content: center;
    123. 

  123.             cursor: grab;
    124. 

  124.         }
    125. 

  125.         #imgStage.grabbing { cursor: grabbing; }
    126. 

  126. 

  127.         #imgEl {
    128. 

  128.             display: block;
    129. 

  129.             max-width: 100%; max-height: 100%;
    130. 

  130.             object-fit: contain;
    131. 

  131.             transform-origin: center center;
    132. 

  132.             pointer-events: none;
    133. 

  133.             user-select: none;
    134. 

  134.             -webkit-user-drag: none;
    135. 

  135.             box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    136. 

  136.         }
    137. 

  137. 

  138.         #imgHint {
    139. 

  139.             position: absolute;
    140. 

  140.             bottom: 14px; left: 50%;
    141. 

  141.             transform: translateX(-50%);
    142. 

  142.             background: rgba(0,0,0,0.6);
    143. 

  143.             color: white; font-size: 12px;
    144. 

  144.             padding: 5px 14px; border-radius: 20px;
    145. 

  145.             backdrop-filter: blur(8px);
    146. 

  146.             pointer-events: none;
    147. 

  147.             opacity: 0;
    148. 

  148.             transition: opacity 0.35s;
    149. 

  149.             white-space: nowrap;
    150. 

  150.         }
    151. 

  151. 

  152.         /* ── Code/text viewer ────────────────────────────────── */
    153. 

  153.         #codeViewer {
    154. 

  154.             display: none;
    155. 

  155.             width: 100%; height: 100%;
    156. 

  156.             overflow: auto;
    157. 

  157.             background: #FAFAFA;
    158. 

  158.         }
    159. 

  159. 

  160.         #codeTable {
    161. 

  161.             border-collapse: collapse;
    162. 

  162.             min-width: 100%;
    163. 

  163.             font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;
    164. 

  164.             font-size: 12.5px;
    165. 

  165.             line-height: 1.65;
    166. 

  166.         }
    167. 

  167. 

  168.         .cl-num {
    169. 

  169.             padding: 0 12px 0 16px;
    170. 

  170.             text-align: right;
    171. 

  171.             color: #B0B0B0;
    172. 

  172.             border-right: 1px solid #E5E5EA;
    173. 

  173.             user-select: none;
    174. 

  174.             white-space: nowrap;
    175. 

  175.             vertical-align: top;
    176. 

  176.             background: #F5F5F7;
    177. 

  177.             min-width: 52px;
    178. 

  178.         }
    179. 

  179. 

  180.         .cl-code {
    181. 

  181.             padding: 0 20px 0 14px;
    182. 

  182.             white-space: pre;
    183. 

  183.             vertical-align: top;
    184. 

  184.             color: #1C1C1E;
    185. 

  185.         }
    186. 

  186. 

  187.         #codeTable tr:first-child .cl-num,
    188. 

  188.         #codeTable tr:first-child .cl-code { padding-top: 16px; }
    189. 

  189. 

  190.         #codeTable tr:last-child .cl-num,
    191. 

  191.         #codeTable tr:last-child .cl-code  { padding-bottom: 16px; }
    192. 

  192. 

  193.         /* ── Markdown viewer ─────────────────────────────────── */
    194. 

  194.         #mdViewer {
    195. 

  195.             display: none;
    196. 

  196.             width: 100%; height: 100%;
    197. 

  197.             overflow: auto;
    198. 

  198.             background: white;
    199. 

  199.         }
    200. 

  200. 

  201.         #mdBody {
    202. 

  202.             max-width: 820px;
    203. 

  203.             margin: 0 auto;
    204. 

  204.             padding: 44px 36px 72px;
    205. 

  205.             font-size: 15px;
    206. 

  206.             line-height: 1.78;
    207. 

  207.             color: #24292E;
    208. 

  208.         }
    209. 

  209. 

  210.         #mdBody h1,#mdBody h2,#mdBody h3,#mdBody h4,#mdBody h5,#mdBody h6 {
    211. 

  211.             margin-top: 1.6em; margin-bottom: 0.55em;
    212. 

  212.             line-height: 1.3; font-weight: 600;
    213. 

  213.         }
    214. 

  214.         #mdBody h1 { font-size: 2em;   padding-bottom: 0.3em;  border-bottom: 1.5px solid #E5E7EB; }
    215. 

  215.         #mdBody h2 { font-size: 1.5em; padding-bottom: 0.2em;  border-bottom: 1px solid #E5E7EB; }
    216. 

  216.         #mdBody h3 { font-size: 1.25em; }
    217. 

  217.         #mdBody h4 { font-size: 1em; }
    218. 

  218.         #mdBody p  { margin: 0.75em 0; }
    219. 

  219.         #mdBody a  { color: #0366D6; text-decoration: none; }
    220. 

  220.         #mdBody a:hover { text-decoration: underline; }
    221. 

  221.         #mdBody strong { font-weight: 600; }
    222. 

  222.         #mdBody em     { font-style: italic; }
    223. 

  223.         #mdBody del    { color: #6A737D; }
    224. 

  224.         #mdBody code {
    225. 

  225.             font-family: 'SF Mono','Cascadia Code','Fira Code',Consolas,monospace;
    226. 

  226.             font-size: 0.875em;
    227. 

  227.             background: #F6F8FA; border: 1px solid #E1E4E8;
    228. 

  228.             border-radius: 4px; padding: 0.1em 0.4em;
    229. 

  229.         }
    230. 

  230.         #mdBody pre {
    231. 

  231.             background: #F6F8FA; border: 1px solid #E1E4E8;
    232. 

  232.             border-radius: 8px; padding: 16px;
    233. 

  233.             overflow-x: auto; margin: 1.1em 0;
    234. 

  234.         }
    235. 

  235.         #mdBody pre code { background: none; border: none; padding: 0; font-size: 0.875em; }
    236. 

  236.         #mdBody blockquote {
    237. 

  237.             border-left: 4px solid #DFE2E5;
    238. 

  238.             padding: 0.35em 0 0.35em 1em;
    239. 

  239.             color: #6A737D; margin: 1em 0;
    240. 

  240.         }
    241. 

  241.         #mdBody ul, #mdBody ol { padding-left: 2em; margin: 0.55em 0; }
    242. 

  242.         #mdBody li { margin: 0.25em 0; }
    243. 

  243.         #mdBody li > ul, #mdBody li > ol { margin: 0.15em 0; }
    244. 

  244.         #mdBody hr { border: none; border-top: 1.5px solid #E5E7EB; margin: 1.6em 0; }
    245. 

  245.         #mdBody img { max-width: 100%; border-radius: 6px; margin: 0.5em 0; }
    246. 

  246.         #mdBody table { border-collapse: collapse; width: 100%; margin: 1.1em 0; }
    247. 

  247.         #mdBody th, #mdBody td { border: 1px solid #DFE2E5; padding: 7px 14px; text-align: left; }
    248. 

  248.         #mdBody th { background: #F6F8FA; font-weight: 600; }
    249. 

  249.         #mdBody tr:nth-child(even) td { background: #FAFBFC; }
    250. 

  250. 

  251.         /* ── Info sidebar ────────────────────────────────────── */
    252. 

  252.         #infoSidebar {
    253. 

  253.             position: fixed;
    254. 

  254.             top: 44px; right: 0;
    255. 

  255.             width: 260px; height: calc(100% - 44px);
    256. 

  256.             background: rgba(242,242,247,0.97);
    257. 

  257.             backdrop-filter: blur(20px);
    258. 

  258.             -webkit-backdrop-filter: blur(20px);
    259. 

  259.             border-left: 1px solid rgba(0,0,0,0.1);
    260. 

  260.             transform: translateX(100%);
    261. 

  261.             transition: transform 0.22s cubic-bezier(0.25,0.1,0.25,1);
    262. 

  262.             overflow-y: auto; padding: 16px; z-index: 400;
    263. 

  263.         }
    264. 

  264.         #infoSidebar.open { transform: translateX(0); }
    265. 

  265. 

  266.         .info-hdr {
    267. 

  267.             display: flex; align-items: center;
    268. 

  268.             justify-content: space-between;
    269. 

  269.             margin-bottom: 18px;
    270. 

  270.         }
    271. 

  271.         .info-hdr strong { font-size: 14px; font-weight: 600; }
    272. 

  272. 

  273.         .info-group { margin-bottom: 18px; }
    274. 

  274.         .info-group-title {
    275. 

  275.             font-size: 10.5px; font-weight: 700;
    276. 

  276.             letter-spacing: 0.7px; text-transform: uppercase;
    277. 

  277.             color: #8E8E93; margin-bottom: 8px;
    278. 

  278.         }
    279. 

  279.         .info-row { margin-bottom: 9px; }
    280. 

  280.         .info-key { font-size: 11px; color: #8E8E93; margin-bottom: 2px; }
    281. 

  281.         .info-val { font-size: 12.5px; color: #1C1C1E; word-break: break-all; line-height: 1.45; }
    282. 

  282. 

  283.         /* ── Dark mode ───────────────────────────────────────── */
    284. 

  284.         @media (prefers-color-scheme: dark) {
    285. 

  285.             html, body { background: #1C1C1E; color: #F2F2F7; }
    286. 

  286. 

  287.             #toolbar { background: rgba(28,28,30,0.94); border-bottom-color: rgba(255,255,255,0.1); }
    288. 

  288.             #tbFileName { color: #F2F2F7; }
    289. 

  289.             .tb-btn { color: #EBEBF5; }
    290. 

  290.             .tb-btn:hover  { background: rgba(255,255,255,0.1); }
    291. 

  291.             .tb-btn:active { background: rgba(255,255,255,0.17); }
    292. 

  292.             .tb-btn.active { background: rgba(10,132,255,0.2); color: #0A84FF; }
    293. 

  293.             .tb-sep { background: rgba(255,255,255,0.14); }
    294. 

  294.             #tbZoomLabel { color: #8E8E93; }
    295. 

  295. 

  296.             #emptyState { color: #48484A; }
    297. 

  297. 

  298.             #codeViewer { background: #1C1C1E; }
    299. 

  299.             .cl-num  { background: #2C2C2E; border-right-color: #3A3A3C; color: #48484A; }
    300. 

  300.             .cl-code { color: #E5E5EA; }
    301. 

  301. 

  302.             #mdViewer { background: #1C1C1E; }
    303. 

  303.             #mdBody { color: #E5E5EA; }
    304. 

  304.             #mdBody h1,#mdBody h2 { border-bottom-color: #38383A; }
    305. 

  305.             #mdBody a { color: #4EA1F3; }
    306. 

  306.             #mdBody code { background: #2C2C2E; border-color: #38383A; }
    307. 

  307.             #mdBody pre { background: #2C2C2E; border-color: #38383A; }
    308. 

  308.             #mdBody blockquote { border-left-color: #38383A; color: #8E8E93; }
    309. 

  309.             #mdBody th, #mdBody td { border-color: #38383A; }
    310. 

  310.             #mdBody th { background: #2C2C2E; }
    311. 

  311.             #mdBody tr:nth-child(even) td { background: #252527; }
    312. 

  312.             #mdBody hr { border-top-color: #38383A; }
    313. 

  313. 

  314.             #infoSidebar { background: rgba(28,28,30,0.97); border-left-color: rgba(255,255,255,0.1); }
    315. 

  315.             .info-val { color: #E5E5EA; }
    316. 

  316.         }
    317. 

  317. 

  318.         /* ArozOS theme override — applied by ao_module_onThemeChanged via data-theme attribute.
    319. 

  319.            These rules win over the media query because the attribute selector adds specificity. */
    320. 

  320.         html[data-theme="dark"] body { background: #1C1C1E; color: #F2F2F7; }
    321. 

  321.         html[data-theme="dark"] #toolbar { background: rgba(28,28,30,0.94); border-bottom-color: rgba(255,255,255,0.1); }
    322. 

  322.         html[data-theme="dark"] #tbFileName { color: #F2F2F7; }
    323. 

  323.         html[data-theme="dark"] .tb-btn { color: #EBEBF5; }
    324. 

  324.         html[data-theme="dark"] .tb-btn:hover  { background: rgba(255,255,255,0.1); }
    325. 

  325.         html[data-theme="dark"] .tb-btn:active { background: rgba(255,255,255,0.17); }
    326. 

  326.         html[data-theme="dark"] .tb-btn.active { background: rgba(10,132,255,0.2); color: #0A84FF; }
    327. 

  327.         html[data-theme="dark"] .tb-sep { background: rgba(255,255,255,0.14); }
    328. 

  328.         html[data-theme="dark"] #tbZoomLabel { color: #8E8E93; }
    329. 

  329.         html[data-theme="dark"] #emptyState { color: #48484A; }
    330. 

  330.         html[data-theme="dark"] #codeViewer { background: #1C1C1E; }
    331. 

  331.         html[data-theme="dark"] .cl-num  { background: #2C2C2E; border-right-color: #3A3A3C; color: #48484A; }
    332. 

  332.         html[data-theme="dark"] .cl-code { color: #E5E5EA; }
    333. 

  333.         html[data-theme="dark"] #mdViewer { background: #1C1C1E; }
    334. 

  334.         html[data-theme="dark"] #mdBody { color: #E5E5EA; }
    335. 

  335.         html[data-theme="dark"] #mdBody h1, html[data-theme="dark"] #mdBody h2 { border-bottom-color: #38383A; }
    336. 

  336.         html[data-theme="dark"] #mdBody a { color: #4EA1F3; }
    337. 

  337.         html[data-theme="dark"] #mdBody code { background: #2C2C2E; border-color: #38383A; }
    338. 

  338.         html[data-theme="dark"] #mdBody pre  { background: #2C2C2E; border-color: #38383A; }
    339. 

  339.         html[data-theme="dark"] #mdBody blockquote { border-left-color: #38383A; color: #8E8E93; }
    340. 

  340.         html[data-theme="dark"] #mdBody th, html[data-theme="dark"] #mdBody td { border-color: #38383A; }
    341. 

  341.         html[data-theme="dark"] #mdBody th { background: #2C2C2E; }
    342. 

  342.         html[data-theme="dark"] #mdBody tr:nth-child(even) td { background: #252527; }
    343. 

  343.         html[data-theme="dark"] #mdBody hr { border-top-color: #38383A; }
    344. 

  344.         html[data-theme="dark"] #infoSidebar { background: rgba(28,28,30,0.97); border-left-color: rgba(255,255,255,0.1); }
    345. 

  345.         html[data-theme="dark"] .info-val { color: #E5E5EA; }
    346. 

  346. 

  347.         /* Force light mode even when the OS prefers dark */
    348. 

  348.         html[data-theme="light"] body { background: #F2F2F7; color: #1C1C1E; }
    349. 

  349.         html[data-theme="light"] #toolbar { background: rgba(242,242,247,0.94); border-bottom-color: rgba(0,0,0,0.1); }
    350. 

  350.         html[data-theme="light"] #tbFileName { color: #1C1C1E; }
    351. 

  351.         html[data-theme="light"] .tb-btn { color: #3C3C43; }
    352. 

  352.         html[data-theme="light"] .tb-btn:hover  { background: rgba(0,0,0,0.07); }
    353. 

  353.         html[data-theme="light"] .tb-btn:active { background: rgba(0,0,0,0.13); }
    354. 

  354.         html[data-theme="light"] .tb-btn.active { background: rgba(0,122,255,0.12); color: #007AFF; }
    355. 

  355.         html[data-theme="light"] .tb-sep { background: rgba(0,0,0,0.14); }
    356. 

  356.         html[data-theme="light"] #tbZoomLabel { color: #6C6C70; }
    357. 

  357.         html[data-theme="light"] #emptyState { color: #8E8E93; }
    358. 

  358.         html[data-theme="light"] #codeViewer { background: #FFFFFF; }
    359. 

  359.         html[data-theme="light"] .cl-num  { background: #F2F2F7; border-right-color: #D1D1D6; color: #8E8E93; }
    360. 

  360.         html[data-theme="light"] .cl-code { color: #1C1C1E; }
    361. 

  361.         html[data-theme="light"] #mdViewer { background: #FFFFFF; }
    362. 

  362.         html[data-theme="light"] #mdBody { color: #1C1C1E; }
    363. 

  363.         html[data-theme="light"] #infoSidebar { background: rgba(242,242,247,0.97); border-left-color: rgba(0,0,0,0.1); }
    364. 

  364.         html[data-theme="light"] .info-val { color: #1C1C1E; }
    365. 

  365.     </style>
    366. 

  366. </head>
    367. 

  367. <body>
    368. 

  368. 

  369. <!-- ═══════════════════════════════════════════════════════════
    370. 

  370.      TOOLBAR
    371. 

  371. ══════════════════════════════════════════════════════════════ -->
    372. 

  372. <div id="toolbar">
    373. 

  373. 

  374.     <!-- Left: file type badge -->
    375. 

  375.     <div class="tb-group">
    376. 

  376.         <div id="tbFileIcon" style="width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:0.3px;color:white;background:#8E8E93;flex-shrink:0;">
    377. 

  377.             FILE
    378. 

  378.         </div>
    379. 

  379.     </div>
    380. 

  380. 

  381.     <!-- Center: file name -->
    382. 

  382.     <div id="tbCenter">
    383. 

  383.         <span id="tbFileName">Preview</span>
    384. 

  384.     </div>
    385. 

  385. 

  386.     <!-- Right: zoom + info -->
    387. 

  387.     <div class="tb-group">
    388. 

  388.         <div class="tb-sep"></div>
    389. 

  389. 

  390.         <!-- Zoom out -->
    391. 

  391.         <button class="tb-btn" id="btnZoomOut" onclick="adjustZoom(-0.15)" title="Zoom Out (Ctrl –)" disabled>
    392. 

  392.             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
    393. 

  393.                 <circle cx="6.5" cy="6.5" r="4.5"/>
    394. 

  394.                 <line x1="4" y1="6.5" x2="9" y2="6.5"/>
    395. 

  395.                 <line x1="10.2" y1="10.2" x2="14" y2="14"/>
    396. 

  396.             </svg>
    397. 

  397.         </button>
    398. 

  398. 

  399.         <span id="tbZoomLabel">—</span>
    400. 

  400. 

  401.         <!-- Zoom in -->
    402. 

  402.         <button class="tb-btn" id="btnZoomIn" onclick="adjustZoom(0.15)" title="Zoom In (Ctrl +)" disabled>
    403. 

  403.             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
    404. 

  404.                 <circle cx="6.5" cy="6.5" r="4.5"/>
    405. 

  405.                 <line x1="4" y1="6.5" x2="9" y2="6.5"/>
    406. 

  406.                 <line x1="6.5" y1="4" x2="6.5" y2="9"/>
    407. 

  407.                 <line x1="10.2" y1="10.2" x2="14" y2="14"/>
    408. 

  408.             </svg>
    409. 

  409.         </button>
    410. 

  410. 

  411.         <!-- Reset zoom -->
    412. 

  412.         <button class="tb-btn" id="btnZoomReset" onclick="resetZoom()" title="Reset Zoom (Ctrl 0)" disabled>
    413. 

  413.             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
    414. 

  414.                 <path d="M2.5 8 A5.5 5.5 0 1 1 8 13.5"/>
    415. 

  415.                 <polyline points="2.5,5.5 2.5,8 5,8"/>
    416. 

  416.             </svg>
    417. 

  417.         </button>
    418. 

  418. 

  419.         <!-- Open in Web Builder (HTML files only) -->
    420. 

  420.         <button class="tb-btn" id="btnWebBuilder" onclick="openInWebBuilder()" title="Open in Web Builder" style="display:none">
    421. 

  421.             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
    422. 

  422.                 <rect x="1" y="2" width="14" height="10" rx="1.3"/>
    423. 

  423.                 <line x1="1" y1="5.5" x2="15" y2="5.5"/>
    424. 

  424.                 <circle cx="3" cy="3.8" r="0.6" fill="currentColor" stroke="none"/>
    425. 

  425.                 <circle cx="5" cy="3.8" r="0.6" fill="currentColor" stroke="none"/>
    426. 

  426.                 <path d="M5.5 8.5 L4 10 L5.5 11.5"/>
    427. 

  427.                 <path d="M9.5 8.5 L11 10 L9.5 11.5"/>
    428. 

  428.             </svg>
    429. 

  429.         </button>
    430. 

  430.         <div class="tb-sep" id="sepWebBuilder" style="display:none"></div>
    431. 

  431. 

  432.         <div class="tb-sep"></div>
    433. 

  433. 

  434.         <!-- Info toggle -->
    435. 

  435.         <button class="tb-btn" id="btnInfo" onclick="toggleInfo()" title="File Info (Ctrl I)">
    436. 

  436.             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
    437. 

  437.                 <circle cx="8" cy="8" r="6.5"/>
    438. 

  438.                 <line x1="8" y1="7.5" x2="8" y2="11.5"/>
    439. 

  439.                 <circle cx="8" cy="5" r="0.8" fill="currentColor" stroke="none"/>
    440. 

  440.             </svg>
    441. 

  441.         </button>
    442. 

  442.     </div>
    443. 

  443. </div>
    444. 

  444. 

  445. <!-- ═══════════════════════════════════════════════════════════
    446. 

  446.      CONTENT
    447. 

  447. ══════════════════════════════════════════════════════════════ -->
    448. 

  448. <div id="contentWrap">
    449. 

  449. 

  450.     <!-- Empty / error state -->
    451. 

  451.     <div id="emptyState">
    452. 

  452.         <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
    453. 

  453.             <rect x="10" y="5" width="36" height="46" rx="5" fill="currentColor" opacity="0.2"/>
    454. 

  454.             <path d="M36 5 L46 15 L36 15 Z" fill="currentColor" opacity="0.25"/>
    455. 

  455.             <rect x="15" y="24" width="26" height="3" rx="1.5" fill="currentColor" opacity="0.4"/>
    456. 

  456.             <rect x="15" y="30" width="20" height="3" rx="1.5" fill="currentColor" opacity="0.3"/>
    457. 

  457.             <rect x="15" y="36" width="23" height="3" rx="1.5" fill="currentColor" opacity="0.3"/>
    458. 

  458.             <circle cx="44" cy="44" r="14" stroke="currentColor" stroke-width="3" opacity="0.35"/>
    459. 

  459.             <line x1="53.5" y1="53.5" x2="61" y2="61" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
    460. 

  460.         </svg>
    461. 

  461.         <p id="emptyMsg">No file to preview</p>
    462. 

  462.     </div>
    463. 

  463. 

  464.     <!-- iframe viewer: HTML and PDF -->
    465. 

  465.     <iframe id="iframeViewer" title="File Preview" allowfullscreen></iframe>
    466. 

  466. 

  467.     <!-- Image viewer -->
    468. 

  468.     <div id="imageViewer">
    469. 

  469.         <div id="imgStage">
    470. 

  470.             <img id="imgEl" alt="Preview image">
    471. 

  471.         </div>
    472. 

  472.         <div id="imgHint"></div>
    473. 

  473.     </div>
    474. 

  474. 

  475.     <!-- Code / text viewer -->
    476. 

  476.     <div id="codeViewer">
    477. 

  477.         <table id="codeTable"><tbody id="codeTbody"></tbody></table>
    478. 

  478.     </div>
    479. 

  479. 

  480.     <!-- Markdown viewer -->
    481. 

  481.     <div id="mdViewer">
    482. 

  482.         <div id="mdBody"></div>
    483. 

  483.     </div>
    484. 

  484. 

  485. </div>
    486. 

  486. 

  487. <!-- ═══════════════════════════════════════════════════════════
    488. 

  488.      INFO SIDEBAR
    489. 

  489. ══════════════════════════════════════════════════════════════ -->
    490. 

  490. <div id="infoSidebar">
    491. 

  491.     <div class="info-hdr">
    492. 

  492.         <strong>File Info</strong>
    493. 

  493.         <button class="tb-btn" onclick="toggleInfo()" style="color:#8E8E93">
    494. 

  494.             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
    495. 

  495.                 <line x1="1" y1="1" x2="13" y2="13"/>
    496. 

  496.                 <line x1="13" y1="1" x2="1" y2="13"/>
    497. 

  497.             </svg>
    498. 

  498.         </button>
    499. 

  499.     </div>
    500. 

  500.     <div class="info-group">
    501. 

  501.         <div class="info-group-title">General</div>
    502. 

  502.         <div class="info-row"><div class="info-key">Name</div><div class="info-val" id="infoName">—</div></div>
    503. 

  503.         <div class="info-row"><div class="info-key">Type</div><div class="info-val" id="infoType">—</div></div>
    504. 

  504.         <div class="info-row"><div class="info-key">Extension</div><div class="info-val" id="infoExt">—</div></div>
    505. 

  505.     </div>
    506. 

  506.     <div class="info-group">
    507. 

  507.         <div class="info-group-title">Location</div>
    508. 

  508.         <div class="info-row"><div class="info-key">Path</div><div class="info-val" id="infoPath">—</div></div>
    509. 

  509.     </div>
    510. 

  510. </div>
    511. 

  511. 

  512. <script>
    513. 

  513. /* ═══════════════════════════════════════════════════════════════
    514. 

  514.    FILE TYPE REGISTRY
    515. 

  515. ═══════════════════════════════════════════════════════════════ */
    516. 

  516. var TYPE_MAP = {
    517. 

  517.     html: ['html','htm'],
    518. 

  518.     pdf:  ['pdf'],
    519. 

  519.     image:['jpg','jpeg','png','gif','webp','svg','bmp','ico'],
    520. 

  520.     markdown: ['md','markdown'],
    521. 

  521.     code: [
    522. 

  522.         'js','mjs','cjs','jsx','ts','tsx',
    523. 

  523.         'py','rb','pl','r','go','rs','swift','kt','scala',
    524. 

  524.         'java','c','h','cpp','hpp','cs','php',
    525. 

  525.         'sh','bash','zsh','bat','cmd','ps1',
    526. 

  526.         'json','yaml','yml','xml','css','scss','less',
    527. 

  527.         'sql','lua','agi','dockerfile','makefile',
    528. 

  528.         'gitignore','editorconfig','env',
    529. 

  529.         'toml','ini','conf','cfg','log','txt'
    530. 

  530.     ]
    531. 

  531. };
    532. 

  532. 

  533. var TYPE_LABELS = {
    534. 

  534.     html:'HTML', pdf:'PDF', image:'IMG',
    535. 

  535.     markdown:'MD', code:'CODE'
    536. 

  536. };
    537. 

  537. 

  538. var TYPE_COLORS = {
    539. 

  539.     html: '#E44D26',
    540. 

  540.     pdf:  '#FF3B30',
    541. 

  541.     image:'#30B06E',
    542. 

  542.     markdown: '#8B5CF6',
    543. 

  543.     code: '#007AFF'
    544. 

  544. };
    545. 

  545. 

  546. var TYPE_NAMES = {
    547. 

  547.     html:'HTML Document', pdf:'PDF Document', image:'Image',
    548. 

  548.     markdown:'Markdown Document', code:'Source File'
    549. 

  549. };
    550. 

  550. 

  551. function getFileType(ext) {
    552. 

  552.     ext = ext.toLowerCase().replace(/^\./, '');
    553. 

  553.     for (var t in TYPE_MAP) {
    554. 

  554.         if (TYPE_MAP[t].indexOf(ext) !== -1) return t;
    555. 

  555.     }
    556. 

  556.     return 'code';
    557. 

  557. }
    558. 

  558. 

  559. /* ═══════════════════════════════════════════════════════════════
    560. 

  560.    STATE
    561. 

  561. ═══════════════════════════════════════════════════════════════ */
    562. 

  562. var currentFile = null;
    563. 

  563. var currentType = null;
    564. 

  564. var zoom = 1.0;
    565. 

  565. 

  566. // Image pan state
    567. 

  567. var imgPan = { dragging: false, startX: 0, startY: 0, tx: 0, ty: 0, baseTx: 0, baseTy: 0 };
    568. 

  568. 

  569. /* ═══════════════════════════════════════════════════════════════
    570. 

  570.    HELPERS
    571. 

  571. ═══════════════════════════════════════════════════════════════ */
    572. 

  572. function escHtml(s) {
    573. 

  573.     return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    574. 

  574. }
    575. 

  575. 

  576. function showHint(msg) {
    577. 

  577.     var h = document.getElementById('imgHint');
    578. 

  578.     h.textContent = msg;
    579. 

  579.     h.style.opacity = '1';
    580. 

  580.     clearTimeout(h._tid);
    581. 

  581.     h._tid = setTimeout(function(){ h.style.opacity = '0'; }, 1600);
    582. 

  582. }
    583. 

  583. 

  584. function setZoomEnabled(on) {
    585. 

  585.     document.getElementById('btnZoomOut').disabled   = !on;
    586. 

  586.     document.getElementById('btnZoomIn').disabled    = !on;
    587. 

  587.     document.getElementById('btnZoomReset').disabled = !on;
    588. 

  588. }
    589. 

  589. 

  590. /* ═══════════════════════════════════════════════════════════════
    591. 

  591.    VIEWER SWITCHING
    592. 

  592. ═══════════════════════════════════════════════════════════════ */
    593. 

  593. function showViewer(type) {
    594. 

  594.     document.getElementById('emptyState').style.display    = 'none';
    595. 

  595.     document.getElementById('iframeViewer').style.display  = 'none';
    596. 

  596.     document.getElementById('imageViewer').style.display   = 'none';
    597. 

  597.     document.getElementById('codeViewer').style.display    = 'none';
    598. 

  598.     document.getElementById('mdViewer').style.display      = 'none';
    599. 

  599. 

  600.     if      (type === 'html' || type === 'pdf') document.getElementById('iframeViewer').style.display = 'block';
    601. 

  601.     else if (type === 'image')                  document.getElementById('imageViewer').style.display  = 'block';
    602. 

  602.     else if (type === 'code')                   document.getElementById('codeViewer').style.display   = 'block';
    603. 

  603.     else if (type === 'markdown')               document.getElementById('mdViewer').style.display     = 'block';
    604. 

  604. }
    605. 

  605. 

  606. /* ═══════════════════════════════════════════════════════════════
    607. 

  607.    ZOOM
    608. 

  608. ═══════════════════════════════════════════════════════════════ */
    609. 

  609. function adjustZoom(delta) {
    610. 

  610.     if (!currentType) return;
    611. 

  611.     zoom = Math.round(Math.max(0.1, Math.min(8.0, zoom + delta)) * 100) / 100;
    612. 

  612.     applyZoom();
    613. 

  613.     updateZoomLabel();
    614. 

  614. }
    615. 

  615. 

  616. function resetZoom() {
    617. 

  617.     zoom = 1.0;
    618. 

  618.     if (currentType === 'image') {
    619. 

  619.         imgPan.tx = 0; imgPan.ty = 0;
    620. 

  620.         imgPan.baseTx = 0; imgPan.baseTy = 0;
    621. 

  621.     }
    622. 

  622.     applyZoom();
    623. 

  623.     updateZoomLabel();
    624. 

  624. }
    625. 

  625. 

  626. function applyZoom() {
    627. 

  627.     if (currentType === 'image') {
    628. 

  628.         document.getElementById('imgEl').style.transform =
    629. 

  629.             'translate(' + imgPan.tx + 'px,' + imgPan.ty + 'px) scale(' + zoom + ')';
    630. 

  630.     } else if (currentType === 'code') {
    631. 

  631.         document.getElementById('codeTable').style.fontSize = (12.5 * zoom) + 'px';
    632. 

  632.     } else if (currentType === 'markdown') {
    633. 

  633.         document.getElementById('mdBody').style.fontSize = (15 * zoom) + 'px';
    634. 

  634.     } else if (currentType === 'html') {
    635. 

  635.         /* CSS zoom works in Chromium/WebKit; harmless elsewhere */
    636. 

  636.         document.getElementById('iframeViewer').style.zoom = zoom;
    637. 

  637.     }
    638. 

  638. }
    639. 

  639. 

  640. function updateZoomLabel() {
    641. 

  641.     document.getElementById('tbZoomLabel').textContent = Math.round(zoom * 100) + '%';
    642. 

  642. }
    643. 

  643. 

  644. /* ═══════════════════════════════════════════════════════════════
    645. 

  645.    IMAGE PAN
    646. 

  646. ═══════════════════════════════════════════════════════════════ */
    647. 

  647. function initImagePan() {
    648. 

  648.     var stage = document.getElementById('imgStage');
    649. 

  649. 

  650.     stage.addEventListener('mousedown', function(e) {
    651. 

  651.         if (zoom <= 1.0) return;
    652. 

  652.         e.preventDefault();
    653. 

  653.         imgPan.dragging = true;
    654. 

  654.         imgPan.startX = e.clientX;
    655. 

  655.         imgPan.startY = e.clientY;
    656. 

  656.         imgPan.baseTx = imgPan.tx;
    657. 

  657.         imgPan.baseTy = imgPan.ty;
    658. 

  658.         stage.classList.add('grabbing');
    659. 

  659.     });
    660. 

  660. 

  661.     window.addEventListener('mousemove', function(e) {
    662. 

  662.         if (!imgPan.dragging) return;
    663. 

  663.         imgPan.tx = imgPan.baseTx + (e.clientX - imgPan.startX);
    664. 

  664.         imgPan.ty = imgPan.baseTy + (e.clientY - imgPan.startY);
    665. 

  665.         applyZoom();
    666. 

  666.     });
    667. 

  667. 

  668.     window.addEventListener('mouseup', function() {
    669. 

  669.         if (!imgPan.dragging) return;
    670. 

  670.         imgPan.dragging = false;
    671. 

  671.         stage.classList.remove('grabbing');
    672. 

  672.     });
    673. 

  673. 

  674.     /* touch pan */
    675. 

  675.     stage.addEventListener('touchstart', function(e) {
    676. 

  676.         if (e.touches.length === 1 && zoom > 1.0) {
    677. 

  677.             imgPan.dragging = true;
    678. 

  678.             imgPan.startX = e.touches[0].clientX;
    679. 

  679.             imgPan.startY = e.touches[0].clientY;
    680. 

  680.             imgPan.baseTx = imgPan.tx;
    681. 

  681.             imgPan.baseTy = imgPan.ty;
    682. 

  682.         }
    683. 

  683.     }, {passive: true});
    684. 

  684. 

  685.     stage.addEventListener('touchmove', function(e) {
    686. 

  686.         if (!imgPan.dragging || e.touches.length !== 1) return;
    687. 

  687.         imgPan.tx = imgPan.baseTx + (e.touches[0].clientX - imgPan.startX);
    688. 

  688.         imgPan.ty = imgPan.baseTy + (e.touches[0].clientY - imgPan.startY);
    689. 

  689.         applyZoom();
    690. 

  690.     }, {passive: true});
    691. 

  691. 

  692.     stage.addEventListener('touchend', function() { imgPan.dragging = false; });
    693. 

  693. }
    694. 

  694. 

  695. /* ═══════════════════════════════════════════════════════════════
    696. 

  696.    MARKDOWN RENDERER
    697. 

  697. ═══════════════════════════════════════════════════════════════ */
    698. 

  698. function renderMarkdown(raw) {
    699. 

  699.     var codeBlocks = [];
    700. 

  700.     var inlineCodes = [];
    701. 

  701. 

  702.     /* 1. Extract fenced code blocks */
    703. 

  703.     raw = raw.replace(/```([^\n]*)\n([\s\S]*?)```/gm, function(_, lang, code) {
    704. 

  704.         var i = codeBlocks.length;
    705. 

  705.         codeBlocks.push('<pre><code>' + escHtml(code.replace(/\n$/, '')) + '</code></pre>');
    706. 

  706.         return '\x01CB' + i + '\x01';
    707. 

  707.     });
    708. 

  708. 

  709.     /* 2. Extract inline code */
    710. 

  710.     raw = raw.replace(/`([^`]+)`/g, function(_, code) {
    711. 

  711.         var i = inlineCodes.length;
    712. 

  712.         inlineCodes.push('<code>' + escHtml(code) + '</code>');
    713. 

  713.         return '\x01IC' + i + '\x01';
    714. 

  714.     });
    715. 

  715. 

  716.     /* 3. Escape remaining HTML */
    717. 

  717.     raw = raw.replace(/&(?![a-zA-Z#]\w*;)/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    718. 

  718. 

  719.     /* 4. Block-level elements */
    720. 

  720.     var lines = raw.split('\n');
    721. 

  721.     var out = [];
    722. 

  722.     var i = 0;
    723. 

  723. 

  724.     while (i < lines.length) {
    725. 

  725.         var line = lines[i];
    726. 

  726. 

  727.         /* Headings */
    728. 

  728.         var hm = line.match(/^(#{1,6})\s+(.*)/);
    729. 

  729.         if (hm) {
    730. 

  730.             var lvl = hm[1].length;
    731. 

  731.             out.push('<h' + lvl + '>' + inlineMarkdown(hm[2]) + '</h' + lvl + '>');
    732. 

  732.             i++; continue;
    733. 

  733.         }
    734. 

  734. 

  735.         /* Horizontal rule */
    736. 

  736.         if (/^(\*{3,}|-{3,}|_{3,})\s*$/.test(line)) {
    737. 

  737.             out.push('<hr>'); i++; continue;
    738. 

  738.         }
    739. 

  739. 

  740.         /* Blockquote */
    741. 

  741.         if (line.startsWith('&gt;')) {
    742. 

  742.             var qlines = [];
    743. 

  743.             while (i < lines.length && lines[i].startsWith('&gt;')) {
    744. 

  744.                 qlines.push(lines[i].replace(/^&gt;\s?/, ''));
    745. 

  745.                 i++;
    746. 

  746.             }
    747. 

  747.             out.push('<blockquote>' + inlineMarkdown(qlines.join('\n')) + '</blockquote>');
    748. 

  748.             continue;
    749. 

  749.         }
    750. 

  750. 

  751.         /* Unordered list */
    752. 

  752.         if (/^[\*\-]\s/.test(line)) {
    753. 

  753.             var items = [];
    754. 

  754.             while (i < lines.length && /^[\*\-]\s/.test(lines[i])) {
    755. 

  755.                 items.push('<li>' + inlineMarkdown(lines[i].replace(/^[\*\-]\s/, '')) + '</li>');
    756. 

  756.                 i++;
    757. 

  757.             }
    758. 

  758.             out.push('<ul>' + items.join('') + '</ul>');
    759. 

  759.             continue;
    760. 

  760.         }
    761. 

  761. 

  762.         /* Ordered list */
    763. 

  763.         if (/^\d+\.\s/.test(line)) {
    764. 

  764.             var oitems = [];
    765. 

  765.             while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
    766. 

  766.                 oitems.push('<li>' + inlineMarkdown(lines[i].replace(/^\d+\.\s/, '')) + '</li>');
    767. 

  767.                 i++;
    768. 

  768.             }
    769. 

  769.             out.push('<ol>' + oitems.join('') + '</ol>');
    770. 

  770.             continue;
    771. 

  771.         }
    772. 

  772. 

  773.         /* Table (pipe-separated) */
    774. 

  774.         if (line.includes('|') && i + 1 < lines.length && /^\|?[\s\-:|]+\|/.test(lines[i+1])) {
    775. 

  775.             var trows = [];
    776. 

  776.             var headers = line.split('|').filter(function(c,idx,arr){ return idx > 0 || c.trim(); }).map(function(c){ return c.trim(); }).filter(Boolean);
    777. 

  777.             trows.push('<thead><tr>' + headers.map(function(h){ return '<th>' + inlineMarkdown(h) + '</th>'; }).join('') + '</tr></thead>');
    778. 

  778.             i += 2; /* skip separator */
    779. 

  779.             var tbody = [];
    780. 

  780.             while (i < lines.length && lines[i].includes('|')) {
    781. 

  781.                 var cells = lines[i].split('|').filter(function(c,idx,arr){ return idx > 0 || c.trim(); }).map(function(c){ return c.trim(); }).filter(Boolean);
    782. 

  782.                 tbody.push('<tr>' + cells.map(function(c){ return '<td>' + inlineMarkdown(c) + '</td>'; }).join('') + '</tr>');
    783. 

  783.                 i++;
    784. 

  784.             }
    785. 

  785.             out.push('<table><' + trows[0] + '<tbody>' + tbody.join('') + '</tbody></table>');
    786. 

  786.             continue;
    787. 

  787.         }
    788. 

  788. 

  789.         /* Blank line */
    790. 

  790.         if (line.trim() === '') { out.push(''); i++; continue; }
    791. 

  791. 

  792.         /* Paragraph / inline text */
    793. 

  793.         var para = [];
    794. 

  794.         while (i < lines.length && lines[i].trim() !== '' &&
    795. 

  795.                !/^(#{1,6}\s|[\*\-]\s|\d+\.\s|&gt;|(\*{3,}|-{3,}|_{3,})\s*$)/.test(lines[i]) &&
    796. 

  796.                !lines[i].includes('\x01CB')) {
    797. 

  797.             para.push(lines[i]);
    798. 

  798.             i++;
    799. 

  799.         }
    800. 

  800.         if (para.length) out.push('<p>' + inlineMarkdown(para.join(' ')) + '</p>');
    801. 

  801.     }
    802. 

  802. 

  803.     var html = out.join('\n');
    804. 

  804. 

  805.     /* Restore inline codes and code blocks */
    806. 

  806.     inlineCodes.forEach(function(c, idx) { html = html.split('\x01IC' + idx + '\x01').join(c); });
    807. 

  807.     codeBlocks.forEach(function(b, idx) { html = html.split('\x01CB' + idx + '\x01').join(b); });
    808. 

  808. 

  809.     return html;
    810. 

  810. }
    811. 

  811. 

  812. function inlineMarkdown(s) {
    813. 

  813.     /* images before links */
    814. 

  814.     s = s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2">');
    815. 

  815.     s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g,  '<a href="$2" target="_blank" rel="noopener">$1</a>');
    816. 

  816.     s = s.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
    817. 

  817.     s = s.replace(/\*\*(.+?)\*\*/g,     '<strong>$1</strong>');
    818. 

  818.     s = s.replace(/__(.+?)__/g,         '<strong>$1</strong>');
    819. 

  819.     s = s.replace(/\*(.+?)\*/g,         '<em>$1</em>');
    820. 

  820.     s = s.replace(/_(.+?)_/g,           '<em>$1</em>');
    821. 

  821.     s = s.replace(/~~(.+?)~~/g,         '<del>$1</del>');
    822. 

  822.     /* restore inline code placeholders pass-through */
    823. 

  823.     return s;
    824. 

  824. }
    825. 

  825. 

  826. /* ═══════════════════════════════════════════════════════════════
    827. 

  827.    LOAD FILE
    828. 

  828. ═══════════════════════════════════════════════════════════════ */
    829. 

  829. function loadFile(file) {
    830. 

  830.     currentFile = file;
    831. 

  831.     var ext = file.filename.split('.').pop().toLowerCase();
    832. 

  832.     currentType = getFileType(ext);
    833. 

  833. 

  834.     /* Toolbar badge */
    835. 

  835.     var badge = document.getElementById('tbFileIcon');
    836. 

  836.     badge.textContent  = TYPE_LABELS[currentType] || 'FILE';
    837. 

  837.     badge.style.background = TYPE_COLORS[currentType] || '#8E8E93';
    838. 

  838.     badge.style.fontSize   = currentType === 'markdown' ? '10px' : '11px';
    839. 

  839. 

  840.     document.getElementById('tbFileName').textContent = file.filename;
    841. 

  841.     ao_module_setWindowTitle('Preview — ' + file.filename);
    842. 

  842. 

  843.     /* Info sidebar */
    844. 

  844.     document.getElementById('infoName').textContent = file.filename;
    845. 

  845.     document.getElementById('infoPath').textContent = file.filepath;
    846. 

  846.     document.getElementById('infoExt').textContent  = '.' + ext.toUpperCase();
    847. 

  847.     document.getElementById('infoType').textContent = TYPE_NAMES[currentType] || 'File';
    848. 

  848. 

  849.     /* Reset zoom */
    850. 

  850.     zoom = 1.0;
    851. 

  851.     imgPan.tx = 0; imgPan.ty = 0; imgPan.baseTx = 0; imgPan.baseTy = 0;
    852. 

  852.     updateZoomLabel();
    853. 

  853. 

  854.     showViewer(currentType);
    855. 

  855. 

  856.     /* Web Builder button — only available for HTML files */
    857. 

  857.     var _wbVisible = currentType === 'html';
    858. 

  858.     document.getElementById('btnWebBuilder').style.display = _wbVisible ? '' : 'none';
    859. 

  859.     document.getElementById('sepWebBuilder').style.display = _wbVisible ? '' : 'none';
    860. 

  860. 

  861.     /* Support data URLs for files dragged in from the OS desktop */
    862. 

  862.     var fileUrl = file.dataUrl
    863. 

  863.         ? file.dataUrl
    864. 

  864.         : '../media?file=' + encodeURIComponent(file.filepath);
    865. 

  865. 

  866.     if (currentType === 'html') {
    867. 

  867.         setZoomEnabled(true);
    868. 

  868.         var fr = document.getElementById('iframeViewer');
    869. 

  869.         fr.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
    870. 

  870.         if (file.dataUrl) {
    871. 

  871.             /* Use srcdoc so the sandboxed iframe renders the HTML directly */
    872. 

  872.             fetch(file.dataUrl).then(function(r){ return r.text(); }).then(function(html){
    873. 

  873.                 fr.removeAttribute('src');
    874. 

  874.                 fr.srcdoc = html;
    875. 

  875.             });
    876. 

  876.         } else {
    877. 

  877.             fr.removeAttribute('srcdoc');
    878. 

  878.             fr.src = fileUrl;
    879. 

  879.         }
    880. 

  880.     } else if (currentType === 'pdf') {
    881. 

  881.         setZoomEnabled(false);
    882. 

  882.         var fr = document.getElementById('iframeViewer');
    883. 

  883.         fr.removeAttribute('sandbox');
    884. 

  884.         fr.removeAttribute('srcdoc');
    885. 

  885.         fr.src = fileUrl;
    886. 

  886.     } else if (currentType === 'image') {
    887. 

  887.         setZoomEnabled(true);
    888. 

  888.         document.getElementById('imgEl').src = fileUrl;
    889. 

  889.     } else if (currentType === 'code') {
    890. 

  890.         setZoomEnabled(true);
    891. 

  891.         fetchAndRenderCode(fileUrl);
    892. 

  892.     } else if (currentType === 'markdown') {
    893. 

  893.         setZoomEnabled(true);
    894. 

  894.         fetchAndRenderMarkdown(fileUrl);
    895. 

  895.     }
    896. 

  896. }
    897. 

  897. 

  898. function fetchAndRenderCode(url) {
    899. 

  899.     var tbody = document.getElementById('codeTbody');
    900. 

  900.     tbody.innerHTML = '<tr><td class="cl-num">…</td><td class="cl-code" style="color:#8E8E93">Loading…</td></tr>';
    901. 

  901. 

  902.     fetch(url)
    903. 

  903.         .then(function(r) {
    904. 

  904.             if (!r.ok) throw new Error('HTTP ' + r.status);
    905. 

  905.             return r.text();
    906. 

  906.         })
    907. 

  907.         .then(function(text) {
    908. 

  908.             var lines = text.split('\n');
    909. 

  909.             /* Remove trailing empty line that split() adds */
    910. 

  910.             if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop();
    911. 

  911.             var rows = '';
    912. 

  912.             for (var i = 0; i < lines.length; i++) {
    913. 

  913.                 rows += '<tr><td class="cl-num">' + (i + 1) + '</td>'
    914. 

  914.                       + '<td class="cl-code">' + escHtml(lines[i]) + '</td></tr>';
    915. 

  915.             }
    916. 

  916.             tbody.innerHTML = rows;
    917. 

  917.         })
    918. 

  918.         .catch(function(e) {
    919. 

  919.             tbody.innerHTML = '<tr><td class="cl-num">!</td><td class="cl-code" style="color:#FF3B30">Failed to load file: ' + escHtml(e.message) + '</td></tr>';
    920. 

  920.         });
    921. 

  921. }
    922. 

  922. 

  923. function fetchAndRenderMarkdown(url) {
    924. 

  924.     var body = document.getElementById('mdBody');
    925. 

  925.     body.innerHTML = '<p style="color:#8E8E93">Loading…</p>';
    926. 

  926. 

  927.     fetch(url)
    928. 

  928.         .then(function(r) {
    929. 

  929.             if (!r.ok) throw new Error('HTTP ' + r.status);
    930. 

  930.             return r.text();
    931. 

  931.         })
    932. 

  932.         .then(function(text) {
    933. 

  933.             body.innerHTML = renderMarkdown(text);
    934. 

  934.         })
    935. 

  935.         .catch(function(e) {
    936. 

  936.             body.innerHTML = '<p style="color:#FF3B30">Failed to load file: ' + escHtml(e.message) + '</p>';
    937. 

  937.         });
    938. 

  938. }
    939. 

  939. 

  940. /* ═══════════════════════════════════════════════════════════════
    941. 

  941.    INFO SIDEBAR
    942. 

  942. ═══════════════════════════════════════════════════════════════ */
    943. 

  943. function toggleInfo() {
    944. 

  944.     var sb = document.getElementById('infoSidebar');
    945. 

  945.     sb.classList.toggle('open');
    946. 

  946.     document.getElementById('btnInfo').classList.toggle('active', sb.classList.contains('open'));
    947. 

  947. }
    948. 

  948. 

  949. function openInWebBuilder() {
    950. 

  950.     if (!currentFile) return;
    951. 

  951.     var hashData = {
    952. 

  952.         tool: 'webbuilder',
    953. 

  953.         file: { filename: currentFile.filename, filepath: currentFile.filepath }
    954. 

  954.     };
    955. 

  955.     ao_module_newfw({
    956. 

  956.         url: 'Productivity/index.html#' + encodeURIComponent(JSON.stringify(hashData)),
    957. 

  957.         width: 1080,
    958. 

  958.         height: 580,
    959. 

  959.         title: currentFile.filename + ' - Web Builder',
    960. 

  960.         appicon: 'Productivity/img/module_icon.svg'
    961. 

  961.     });
    962. 

  962. }
    963. 

  963. 

  964. /* ═══════════════════════════════════════════════════════════════
    965. 

  965.    EVENT WIRING
    966. 

  966. ═══════════════════════════════════════════════════════════════ */
    967. 

  967. 

  968. /* Ctrl/Cmd +/- zoom */
    969. 

  969. document.addEventListener('keydown', function(e) {
    970. 

  970.     var ctrl = e.ctrlKey || e.metaKey;
    971. 

  971.     if (!ctrl) return;
    972. 

  972.     if (e.key === '=' || e.key === '+') { e.preventDefault(); adjustZoom(0.15); }
    973. 

  973.     else if (e.key === '-')             { e.preventDefault(); adjustZoom(-0.15); }
    974. 

  974.     else if (e.key === '0')             { e.preventDefault(); resetZoom(); }
    975. 

  975.     else if (e.key === 'i' || e.key === 'I') { e.preventDefault(); toggleInfo(); }
    976. 

  976. });
    977. 

  977. 

  978. /* Scroll-wheel zoom on image viewer */
    979. 

  979. document.getElementById('imageViewer').addEventListener('wheel', function(e) {
    980. 

  980.     e.preventDefault();
    981. 

  981.     var delta = e.deltaY < 0 ? 0.12 : -0.12;
    982. 

  982.     adjustZoom(delta);
    983. 

  983.     showHint(Math.round(zoom * 100) + '%');
    984. 

  984. }, { passive: false });
    985. 

  985. 

  986. /* Ctrl+scroll zoom on code viewer */
    987. 

  987. document.getElementById('codeViewer').addEventListener('wheel', function(e) {
    988. 

  988.     if (!(e.ctrlKey || e.metaKey)) return;
    989. 

  989.     e.preventDefault();
    990. 

  990.     adjustZoom(e.deltaY < 0 ? 0.12 : -0.12);
    991. 

  991. }, { passive: false });
    992. 

  992. 

  993. /* Ctrl+scroll zoom on markdown viewer */
    994. 

  994. document.getElementById('mdViewer').addEventListener('wheel', function(e) {
    995. 

  995.     if (!(e.ctrlKey || e.metaKey)) return;
    996. 

  996.     e.preventDefault();
    997. 

  997.     adjustZoom(e.deltaY < 0 ? 0.12 : -0.12);
    998. 

  998. }, { passive: false });
    999. 

  999. 

  1000. /* ═══════════════════════════════════════════════════════════════
    1001. 

  1001.    INIT
    1002. 

  1002. ═══════════════════════════════════════════════════════════════ */
    1003. 

  1003. initImagePan();
    1004. 

  1004. 

  1005. var inputFiles = ao_module_loadInputFiles();
    1006. 

  1006. if (inputFiles && inputFiles.length > 0) {
    1007. 

  1007.     loadFile(inputFiles[0]);
    1008. 

  1008. } else {
    1009. 

  1009.     document.getElementById('emptyMsg').textContent = 'No file was passed to Preview';
    1010. 

  1010.     document.getElementById('emptyState').style.display = 'flex';
    1011. 

  1011. }
    1012. 

  1012. 

  1013. /* ── ArozOS system theme binding ── */
    1014. 

  1014. function applyAozTheme(theme) {
    1015. 

  1015.     document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : 'light');
    1016. 

  1016. }
    1017. 

  1017. 

  1018. ao_module_onThemeChanged(applyAozTheme);
    1019. 

  1019. 

  1020. $.get(ao_root + 'system/file_system/preference?key=file_explorer/theme', function(data) {
    1021. 

  1021.     applyAozTheme(data === 'darkTheme' ? 'dark' : 'light');
    1022. 

  1022. });
    1023. 

  1023. </script>
    1024. 

  1024. </body>
    1025. 

  1025. </html>
    1026.