Главная Обзор Помощь
Вход
github-mirrors
/
mirror-GrabZilla21
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: ad99e81856
Ветки Метки
mirror-GrabZill...
/
index.html

index.html 41 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784 
  1. <!DOCTYPE html>
    2. 

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

  3. 

  4. <head>
    5. 

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

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

  7.     <title>GrabZilla 2.1</title>
    8. 

  8.     <script src="https://cdn.tailwindcss.com"></script>
    9. 

  9.     <link rel="stylesheet" href="styles/main.css">
    10. 

  10.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    11. 

  11. </head>
    12. 

  12. 

  13. <body class="bg-[#1d293d] text-white min-h-screen flex flex-col font-['Inter']">
    14. 

  14.     <!-- Header - macOS Title Bar Style -->
    15. 

  15.     <header class="bg-[#0f172b] h-[41px] flex items-center justify-center border-b border-[#314158] shrink-0 relative"
    16. 

  16.         role="banner" aria-label="GrabZilla application header" style="-webkit-app-region: drag;">
    17. 

  17. 

  18. 

  19.         <!-- Centered Title -->
    20. 

  20.         <div class="flex items-center gap-2" style="-webkit-app-region: no-drag;">
    21. 

  21.             <div class="bg-[#155dfc] w-6 h-6 rounded flex items-center justify-center">
    22. 

  22.                 <img src="assets/icons/logo.svg" alt="GrabZilla Logo" width="16" height="16">
    23. 

  23.             </div>
    24. 

  24.             <h1 class="font-medium text-base text-white tracking-[-0.3125px] leading-6">GrabZilla 2.1</h1>
    25. 

  25.         </div>
    26. 

  26.     </header>
    27. 

  27. 

  28.     <!-- Input Section - Exact Figma: 161px height -->
    29. 

  29.     <section class="h-[161px] border-b border-[#314158] px-4 py-4 shrink-0 flex flex-col gap-4" role="region"
    30. 

  30.         aria-label="Video URL input and configuration" aria-describedby="input-section-help">
    31. 

  31.         <div id="input-section-help" class="sr-only">
    32. 

  32.             Enter YouTube or Vimeo URLs to add videos to the download queue. Configure default quality and format
    33. 

  33.             settings.
    34. 

  34.         </div>
    35. 

  35.         <!-- URL Input Row -->
    36. 

  36.         <div class="flex gap-2 h-20">
    37. 

  37.             <!-- Textarea -->
    38. 

  38.             <textarea id="urlInput"
    39. 

  39.                 class="flex-1 bg-[#314158] border border-[#45556c] rounded-lg p-3 text-sm resize-none text-[#90a1b9] placeholder-[#90a1b9] tracking-[-0.1504px]"
    40. 

  40.                 placeholder="Paste YouTube/Vimeo URLs here (one per line)..." aria-label="YouTube and Vimeo URLs input"
    41. 

  41.                 aria-describedby="url-help"></textarea>
    42. 

  42.             <div id="url-help" class="sr-only">Enter one URL per line. Supports YouTube and Vimeo links.</div>
    43. 

  43. 

  44.             <!-- Action Buttons -->
    45. 

  45.             <div class="flex flex-col gap-2 w-[140px]">
    46. 

  46.                 <button id="addVideoBtn"
    47. 

  47.                     class="bg-[#155dfc] text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 h-9 tracking-[-0.1504px]">
    48. 

  48.                     <img src="assets/icons/add.svg" alt="Add" width="16" height="16">
    49. 

  49.                     Add Video
    50. 

  50.                 </button>
    51. 

  51.                 <button id="importUrlsBtn"
    52. 

  52.                     class="border border-[#45556c] text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 h-9 tracking-[-0.1504px]">
    53. 

  53.                     <img src="assets/icons/import.svg" alt="Import" width="16" height="16">
    54. 

  54.                     Import URLs
    55. 

  55.                 </button>
    56. 

  56.             </div>
    57. 

  57.         </div>
    58. 

  58. 

  59.         <!-- Configuration Row -->
    60. 

  60.         <div class="flex items-center gap-4 h-8">
    61. 

  61.             <!-- Save Path Section -->
    62. 

  62.             <div class="flex items-center gap-2">
    63. 

  63.                 <button id="savePathBtn"
    64. 

  64.                     class="border border-[#45556c] text-white px-3 py-2 rounded-lg font-medium flex items-center gap-2 h-8 text-sm tracking-[-0.1504px]">
    65. 

  65.                     <img src="assets/icons/folder.svg" alt="Folder" width="16" height="16">
    66. 

  66.                     Set Save Path...
    67. 

  67.                 </button>
    68. 

  68.                 <div
    69. 

  69.                     class="bg-[#314158] px-3 py-1.5 rounded h-7 flex items-center text-[#cad5e2] text-sm tracking-[-0.1504px]">
    70. 

  70.                     <span id="savePath">C:\Users\Admin\Desktop\GrabZilla_Videos</span>
    71. 

  71.                 </div>
    72. 

  72.             </div>
    73. 

  73. 

  74.             <!-- Defaults Section -->
    75. 

  75.             <div class="flex items-center gap-2">
    76. 

  76.                 <img src="assets/icons/clock.svg" alt="Clock" width="16" height="16">
    77. 

  77.                 <span class="text-[#90a1b9] text-sm tracking-[-0.1504px]">Defaults:</span>
    78. 

  78. 

  79.                 <!-- Quality Dropdown -->
    80. 

  80.                 <select id="defaultQuality"
    81. 

  81.                     class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-3 py-1 rounded-lg text-xs h-7 font-medium"
    82. 

  82.                     aria-label="Default video quality">
    83. 

  83.                     <option value="1080p">1080p</option>
    84. 

  84.                     <option value="720p">720p</option>
    85. 

  85.                     <option value="4K">4K</option>
    86. 

  86.                     <option value="1440p">1440p</option>
    87. 

  87.                 </select>
    88. 

  88. 

  89.                 <!-- Format Dropdown -->
    90. 

  90.                 <select id="defaultFormat"
    91. 

  91.                     class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-3 py-1 rounded-lg text-xs h-7 font-medium"
    92. 

  92.                     aria-label="Default conversion format">
    93. 

  93.                     <option value="None">None</option>
    94. 

  94.                     <option value="H264">H264</option>
    95. 

  95.                     <option value="ProRes">ProRes</option>
    96. 

  96.                     <option value="DNxHR">DNxHR</option>
    97. 

  97.                     <option value="Audio only">Audio only</option>
    98. 

  98.                 </select>
    99. 

  99. 

  100.                 <!-- Filename Pattern -->
    101. 

  101.                 <div class="flex items-center gap-2">
    102. 

  102.                     <span class="text-[#90a1b9] text-sm tracking-[-0.1504px]">Filename:</span>
    103. 

  103.                     <input id="filenamePattern" type="text" value="%(title)s.%(ext)s"
    104. 

  104.                         class="bg-[#314158] border border-[#45556c] text-[#62748e] px-3 py-1 rounded-lg text-sm h-7 w-48">
    105. 

  105.                 </div>
    106. 

  106. 

  107.                 <!-- Cookie File -->
    108. 

  108.                 <div class="flex items-center gap-2">
    109. 

  109.                     <span class="text-[#90a1b9] text-sm tracking-[-0.1504px]">Cookie:</span>
    110. 

  110.                     <button id="cookieFileBtn"
    111. 

  111.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-2 h-7">
    112. 

  112.                         <img src="assets/icons/folder.svg" alt="File" width="16" height="16">
    113. 

  113.                         Select File
    114. 

  114.                     </button>
    115. 

  115.                 </div>
    116. 

  116.             </div>
    117. 

  117.         </div>
    118. 

  118.     </section>
    119. 

  119. 

  120.     <!-- Video List - Flex grow to fill remaining space -->
    121. 

  121.     <main class="flex-1 overflow-hidden" role="main" aria-label="Video download queue"
    122. 

  122.         aria-describedby="main-content-help">
    123. 

  123.         <div id="main-content-help" class="sr-only">
    124. 

  124.             Video download queue. Use arrow keys to navigate, Enter or Space to select videos, Delete to remove videos.
    125. 

  125.         </div>
    126. 

  126.         <!-- Table Header -->
    127. 

  127.         <div class="grid grid-cols-[40px_40px_1fr_120px_100px_120px_100px] gap-4 px-4 py-4 text-sm font-medium text-[#90a1b9] tracking-[-0.1504px]"
    128. 

  128.             role="row" aria-label="Video list column headers">
    129. 

  129.             <div role="columnheader" aria-label="Selection checkbox"></div>
    130. 

  130.             <div role="columnheader" aria-label="Drag handle"></div>
    131. 

  131.             <div role="columnheader">Title</div>
    132. 

  132.             <div role="columnheader">Duration</div>
    133. 

  133.             <div role="columnheader">Quality</div>
    134. 

  134.             <div role="columnheader">Conversion</div>
    135. 

  135.             <div role="columnheader">Status</div>
    136. 

  136.         </div>
    137. 

  137. 

  138.         <!-- Video Items Container -->
    139. 

  139.         <div id="videoList" class="px-4 pt-2 pb-4 space-y-2 overflow-y-auto h-full" role="grid"
    140. 

  140.             aria-label="Video download queue" aria-describedby="video-list-instructions" tabindex="0">
    141. 

  141.             <div id="video-list-instructions" class="sr-only">
    142. 

  142.                 Use arrow keys to navigate between videos. Press Enter or Space to select videos. Press Delete to remove
    143. 

  143.                 videos. Press Ctrl+A to select all videos.
    144. 

  144.             </div>
    145. 

  145.             <!-- Sample Video Items - Matching Figma Design -->
    146. 

  146. 

  147.             <!-- Video Item 1 - Ready State -->
    148. 

  148.             <div class="video-item grid grid-cols-[40px_40px_1fr_120px_100px_120px_100px] gap-4 items-center p-2 rounded bg-[#314158] hover:bg-[#3a4a68] transition-colors duration-200"
    149. 

  149.                 data-video-id="video-1" role="gridcell" tabindex="0" aria-rowindex="1"
    150. 

  150.                 aria-describedby="video-1-description">
    151. 

  151.                 <!-- Checkbox -->
    152. 

  152.                 <div class="flex items-center justify-center">
    153. 

  153.                     <button
    154. 

  154.                         class="video-checkbox w-6 h-6 rounded flex items-center justify-center hover:bg-[#45556c] transition-colors"
    155. 

  155.                         role="checkbox" aria-checked="false" aria-label="Select Interstellar 2014 Trailer" tabindex="0">
    156. 

  156.                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="text-white">
    157. 

  157.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    158. 

  158.                                 fill="none" rx="2" />
    159. 

  159.                         </svg>
    160. 

  160.                     </button>
    161. 

  161.                 </div>
    162. 

  162. 

  163.                 <!-- Drag Handle -->
    164. 

  164.                 <div
    165. 

  165.                     class="flex items-center justify-center text-[#90a1b9] hover:text-white cursor-grab transition-colors">
    166. 

  166.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    167. 

  167.                         <circle cx="4" cy="4" r="1" />
    168. 

  168.                         <circle cx="4" cy="8" r="1" />
    169. 

  169.                         <circle cx="4" cy="12" r="1" />
    170. 

  170.                         <circle cx="8" cy="4" r="1" />
    171. 

  171.                         <circle cx="8" cy="8" r="1" />
    172. 

  172.                         <circle cx="8" cy="12" r="1" />
    173. 

  173.                         <circle cx="12" cy="4" r="1" />
    174. 

  174.                         <circle cx="12" cy="8" r="1" />
    175. 

  175.                         <circle cx="12" cy="12" r="1" />
    176. 

  176.                     </svg>
    177. 

  177.                 </div>
    178. 

  178. 

  179.                 <!-- Video Info -->
    180. 

  180.                 <div class="flex items-center gap-3 min-w-0">
    181. 

  181.                     <div class="w-16 h-12 bg-[#45556c] rounded overflow-hidden flex-shrink-0">
    182. 

  182.                         <div
    183. 

  183.                             class="w-full h-full bg-gradient-to-br from-[#4a5568] to-[#2d3748] flex items-center justify-center">
    184. 

  184.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-[#90a1b9]">
    185. 

  185.                                 <path d="M8 5V19L19 12L8 5Z" stroke="currentColor" stroke-width="2"
    186. 

  186.                                     stroke-linejoin="round" />
    187. 

  187.                             </svg>
    188. 

  188.                         </div>
    189. 

  189.                     </div>
    190. 

  190.                     <div class="min-w-0 flex-1">
    191. 

  191.                         <div class="text-sm text-white truncate font-medium">Interstellar 2014 Trailer | 4K Ultra HD
    192. 

  192.                         </div>
    193. 

  193.                     </div>
    194. 

  194.                 </div>
    195. 

  195. 

  196.                 <!-- Duration -->
    197. 

  197.                 <div class="text-sm text-[#cad5e2] text-center">2:25</div>
    198. 

  198. 

  199.                 <!-- Quality Dropdown -->
    200. 

  200.                 <div class="flex justify-center">
    201. 

  201.                     <select
    202. 

  202.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center"
    203. 

  203.                         aria-label="Quality for Interstellar 2014 Trailer">
    204. 

  204.                         <option value="4K" selected>4K</option>
    205. 

  205.                         <option value="1440p">1440p</option>
    206. 

  206.                         <option value="1080p">1080p</option>
    207. 

  207.                         <option value="720p">720p</option>
    208. 

  208.                     </select>
    209. 

  209.                 </div>
    210. 

  210. 

  211.                 <!-- Format Dropdown -->
    212. 

  212.                 <div class="flex justify-center">
    213. 

  213.                     <select
    214. 

  214.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center"
    215. 

  215.                         aria-label="Format for Interstellar 2014 Trailer">
    216. 

  216.                         <option value="None" selected>None</option>
    217. 

  217.                         <option value="H264">H264</option>
    218. 

  218.                         <option value="ProRes">ProRes</option>
    219. 

  219.                         <option value="DNxHR">DNxHR</option>
    220. 

  220.                         <option value="Audio only">Audio only</option>
    221. 

  221.                     </select>
    222. 

  222.                 </div>
    223. 

  223. 

  224.                 <!-- Status Badge -->
    225. 

  225.                 <div class="flex justify-center status-column">
    226. 

  226.                     <span class="status-badge ready" role="status" aria-live="polite"
    227. 

  227.                         aria-label="Video ready for download">
    228. 

  228.                         Ready
    229. 

  229.                     </span>
    230. 

  230.                 </div>
    231. 

  231. 

  232.                 <!-- Video Description for Screen Readers -->
    233. 

  233.                 <div id="video-1-description" class="sr-only">
    234. 

  234.                     Video: Interstellar 2014 Trailer | 4K Ultra HD, Duration: 2:25, Status: Ready. Press Enter or Space
    235. 

  235.                     to select, Delete to remove.
    236. 

  236.                 </div>
    237. 

  237.             </div>
    238. 

  238. 

  239.             <!-- Video Item 2 - Downloading State -->
    240. 

  240.             <div class="video-item grid grid-cols-[40px_40px_1fr_120px_100px_120px_100px] gap-4 items-center p-2 rounded bg-[#314158] hover:bg-[#3a4a68] transition-colors duration-200"
    241. 

  241.                 data-video-id="video-2">
    242. 

  242.                 <!-- Checkbox -->
    243. 

  243.                 <div class="flex items-center justify-center">
    244. 

  244.                     <button
    245. 

  245.                         class="w-6 h-6 rounded flex items-center justify-center hover:bg-[#45556c] transition-colors">
    246. 

  246.                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="text-white">
    247. 

  247.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    248. 

  248.                                 fill="none" rx="2" />
    249. 

  249.                         </svg>
    250. 

  250.                     </button>
    251. 

  251.                 </div>
    252. 

  252. 

  253.                 <!-- Drag Handle -->
    254. 

  254.                 <div
    255. 

  255.                     class="flex items-center justify-center text-[#90a1b9] hover:text-white cursor-grab transition-colors">
    256. 

  256.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    257. 

  257.                         <circle cx="4" cy="4" r="1" />
    258. 

  258.                         <circle cx="4" cy="8" r="1" />
    259. 

  259.                         <circle cx="4" cy="12" r="1" />
    260. 

  260.                         <circle cx="8" cy="4" r="1" />
    261. 

  261.                         <circle cx="8" cy="8" r="1" />
    262. 

  262.                         <circle cx="8" cy="12" r="1" />
    263. 

  263.                         <circle cx="12" cy="4" r="1" />
    264. 

  264.                         <circle cx="12" cy="8" r="1" />
    265. 

  265.                         <circle cx="12" cy="12" r="1" />
    266. 

  266.                     </svg>
    267. 

  267.                 </div>
    268. 

  268. 

  269.                 <!-- Video Info -->
    270. 

  270.                 <div class="flex items-center gap-3 min-w-0">
    271. 

  271.                     <div class="w-16 h-12 bg-[#45556c] rounded overflow-hidden flex-shrink-0">
    272. 

  272.                         <div
    273. 

  273.                             class="w-full h-full bg-gradient-to-br from-[#4a5568] to-[#2d3748] flex items-center justify-center">
    274. 

  274.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-[#90a1b9]">
    275. 

  275.                                 <path d="M8 5V19L19 12L8 5Z" stroke="currentColor" stroke-width="2"
    276. 

  276.                                     stroke-linejoin="round" />
    277. 

  277.                             </svg>
    278. 

  278.                         </div>
    279. 

  279.                     </div>
    280. 

  280.                     <div class="min-w-0 flex-1">
    281. 

  281.                         <div class="text-sm text-white truncate font-medium">Greenland (2020) 4K Trailer | Upscaled
    282. 

  282.                             Trailers</div>
    283. 

  283.                     </div>
    284. 

  284.                 </div>
    285. 

  285. 

  286.                 <!-- Duration -->
    287. 

  287.                 <div class="text-sm text-[#cad5e2] text-center">2:30</div>
    288. 

  288. 

  289.                 <!-- Quality Dropdown -->
    290. 

  290.                 <div class="flex justify-center">
    291. 

  291.                     <select
    292. 

  292.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    293. 

  293.                         <option value="1080p" selected>1080p</option>
    294. 

  294.                         <option value="4K">4K</option>
    295. 

  295.                         <option value="1440p">1440p</option>
    296. 

  296.                         <option value="720p">720p</option>
    297. 

  297.                     </select>
    298. 

  298.                 </div>
    299. 

  299. 

  300.                 <!-- Format Dropdown -->
    301. 

  301.                 <div class="flex justify-center">
    302. 

  302.                     <select
    303. 

  303.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    304. 

  304.                         <option value="ProRes" selected>ProRes</option>
    305. 

  305.                         <option value="None">None</option>
    306. 

  306.                         <option value="H264">H264</option>
    307. 

  307.                         <option value="DNxHR">DNxHR</option>
    308. 

  308.                         <option value="Audio only">Audio only</option>
    309. 

  309.                     </select>
    310. 

  310.                 </div>
    311. 

  311. 

  312.                 <!-- Status Badge with Integrated Progress -->
    313. 

  313.                 <div class="flex justify-center status-column">
    314. 

  314.                     <span class="status-badge downloading" role="status" aria-live="polite" aria-label="Downloading 65%"
    315. 

  315.                         data-progress="65">
    316. 

  316.                         Downloading 65%
    317. 

  317.                     </span>
    318. 

  318.                 </div>
    319. 

  319.             </div>
    320. 

  320. 

  321.             <!-- Video Item 3 - Converting State -->
    322. 

  322.             <div class="video-item grid grid-cols-[40px_40px_1fr_120px_100px_120px_100px] gap-4 items-center p-2 rounded bg-[#314158] hover:bg-[#3a4a68] transition-colors duration-200"
    323. 

  323.                 data-video-id="video-3">
    324. 

  324.                 <!-- Checkbox -->
    325. 

  325.                 <div class="flex items-center justify-center">
    326. 

  326.                     <button
    327. 

  327.                         class="w-6 h-6 rounded flex items-center justify-center hover:bg-[#45556c] transition-colors">
    328. 

  328.                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="text-white">
    329. 

  329.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    330. 

  330.                                 fill="none" rx="2" />
    331. 

  331.                         </svg>
    332. 

  332.                     </button>
    333. 

  333.                 </div>
    334. 

  334. 

  335.                 <!-- Drag Handle -->
    336. 

  336.                 <div
    337. 

  337.                     class="flex items-center justify-center text-[#90a1b9] hover:text-white cursor-grab transition-colors">
    338. 

  338.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    339. 

  339.                         <circle cx="4" cy="4" r="1" />
    340. 

  340.                         <circle cx="4" cy="8" r="1" />
    341. 

  341.                         <circle cx="4" cy="12" r="1" />
    342. 

  342.                         <circle cx="8" cy="4" r="1" />
    343. 

  343.                         <circle cx="8" cy="8" r="1" />
    344. 

  344.                         <circle cx="8" cy="12" r="1" />
    345. 

  345.                         <circle cx="12" cy="4" r="1" />
    346. 

  346.                         <circle cx="12" cy="8" r="1" />
    347. 

  347.                         <circle cx="12" cy="12" r="1" />
    348. 

  348.                     </svg>
    349. 

  349.                 </div>
    350. 

  350. 

  351.                 <!-- Video Info -->
    352. 

  352.                 <div class="flex items-center gap-3 min-w-0">
    353. 

  353.                     <div class="w-16 h-12 bg-[#45556c] rounded overflow-hidden flex-shrink-0">
    354. 

  354.                         <div
    355. 

  355.                             class="w-full h-full bg-gradient-to-br from-[#4a5568] to-[#2d3748] flex items-center justify-center">
    356. 

  356.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-[#90a1b9]">
    357. 

  357.                                 <path d="M8 5V19L19 12L8 5Z" stroke="currentColor" stroke-width="2"
    358. 

  358.                                     stroke-linejoin="round" />
    359. 

  359.                             </svg>
    360. 

  360.                         </div>
    361. 

  361.                     </div>
    362. 

  362.                     <div class="min-w-0 flex-1">
    363. 

  363.                         <div class="text-sm text-white truncate font-medium">GREENLAND Trailer German Deutsch (2020)
    364. 

  364.                         </div>
    365. 

  365.                     </div>
    366. 

  366.                 </div>
    367. 

  367. 

  368.                 <!-- Duration -->
    369. 

  369.                 <div class="text-sm text-[#cad5e2] text-center">2:38</div>
    370. 

  370. 

  371.                 <!-- Quality Dropdown -->
    372. 

  372.                 <div class="flex justify-center">
    373. 

  373.                     <select
    374. 

  374.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    375. 

  375.                         <option value="1080p" selected>1080p</option>
    376. 

  376.                         <option value="4K">4K</option>
    377. 

  377.                         <option value="1440p">1440p</option>
    378. 

  378.                         <option value="720p">720p</option>
    379. 

  379.                     </select>
    380. 

  380.                 </div>
    381. 

  381. 

  382.                 <!-- Format Dropdown -->
    383. 

  383.                 <div class="flex justify-center">
    384. 

  384.                     <select
    385. 

  385.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    386. 

  386.                         <option value="H264" selected>H264</option>
    387. 

  387.                         <option value="None">None</option>
    388. 

  388.                         <option value="ProRes">ProRes</option>
    389. 

  389.                         <option value="DNxHR">DNxHR</option>
    390. 

  390.                         <option value="Audio only">Audio only</option>
    391. 

  391.                     </select>
    392. 

  392.                 </div>
    393. 

  393. 

  394.                 <!-- Status Badge with Integrated Progress -->
    395. 

  395.                 <div class="flex justify-center status-column">
    396. 

  396.                     <span class="status-badge converting" role="status" aria-live="polite" aria-label="Converting 42%"
    397. 

  397.                         data-progress="42">
    398. 

  398.                         Converting 42%
    399. 

  399.                     </span>
    400. 

  400.                 </div>
    401. 

  401.             </div>
    402. 

  402. 

  403.             <!-- Video Item 4 - Completed State -->
    404. 

  404.             <div class="video-item grid grid-cols-[40px_40px_1fr_120px_100px_120px_100px] gap-4 items-center p-2 rounded bg-[#314158] hover:bg-[#3a4a68] transition-colors duration-200"
    405. 

  405.                 data-video-id="video-4">
    406. 

  406.                 <!-- Checkbox -->
    407. 

  407.                 <div class="flex items-center justify-center">
    408. 

  408.                     <button
    409. 

  409.                         class="w-6 h-6 rounded flex items-center justify-center hover:bg-[#45556c] transition-colors">
    410. 

  410.                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="text-white">
    411. 

  411.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    412. 

  412.                                 fill="none" rx="2" />
    413. 

  413.                         </svg>
    414. 

  414.                     </button>
    415. 

  415.                 </div>
    416. 

  416. 

  417.                 <!-- Drag Handle -->
    418. 

  418.                 <div
    419. 

  419.                     class="flex items-center justify-center text-[#90a1b9] hover:text-white cursor-grab transition-colors">
    420. 

  420.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    421. 

  421.                         <circle cx="4" cy="4" r="1" />
    422. 

  422.                         <circle cx="4" cy="8" r="1" />
    423. 

  423.                         <circle cx="4" cy="12" r="1" />
    424. 

  424.                         <circle cx="8" cy="4" r="1" />
    425. 

  425.                         <circle cx="8" cy="8" r="1" />
    426. 

  426.                         <circle cx="8" cy="12" r="1" />
    427. 

  427.                         <circle cx="12" cy="4" r="1" />
    428. 

  428.                         <circle cx="12" cy="8" r="1" />
    429. 

  429.                         <circle cx="12" cy="12" r="1" />
    430. 

  430.                     </svg>
    431. 

  431.                 </div>
    432. 

  432. 

  433.                 <!-- Video Info -->
    434. 

  434.                 <div class="flex items-center gap-3 min-w-0">
    435. 

  435.                     <div class="w-16 h-12 bg-[#45556c] rounded overflow-hidden flex-shrink-0">
    436. 

  436.                         <div
    437. 

  437.                             class="w-full h-full bg-gradient-to-br from-[#4a5568] to-[#2d3748] flex items-center justify-center">
    438. 

  438.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-[#90a1b9]">
    439. 

  439.                                 <path d="M8 5V19L19 12L8 5Z" stroke="currentColor" stroke-width="2"
    440. 

  440.                                     stroke-linejoin="round" />
    441. 

  441.                             </svg>
    442. 

  442.                         </div>
    443. 

  443.                     </div>
    444. 

  444.                     <div class="min-w-0 flex-1">
    445. 

  445.                         <div class="text-sm text-white truncate font-medium">A Quiet Place (2018) - Official Trailer -
    446. 

  446.                             Paramount Pictures</div>
    447. 

  447.                     </div>
    448. 

  448.                 </div>
    449. 

  449. 

  450.                 <!-- Duration -->
    451. 

  451.                 <div class="text-sm text-[#cad5e2] text-center">1:56</div>
    452. 

  452. 

  453.                 <!-- Quality Dropdown -->
    454. 

  454.                 <div class="flex justify-center">
    455. 

  455.                     <select
    456. 

  456.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    457. 

  457.                         <option value="720p" selected>720p</option>
    458. 

  458.                         <option value="4K">4K</option>
    459. 

  459.                         <option value="1440p">1440p</option>
    460. 

  460.                         <option value="1080p">1080p</option>
    461. 

  461.                     </select>
    462. 

  462.                 </div>
    463. 

  463. 

  464.                 <!-- Format Dropdown -->
    465. 

  465.                 <div class="flex justify-center">
    466. 

  466.                     <select
    467. 

  467.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    468. 

  468.                         <option value="Audio only" selected>Audio only</option>
    469. 

  469.                         <option value="None">None</option>
    470. 

  470.                         <option value="H264">H264</option>
    471. 

  471.                         <option value="ProRes">ProRes</option>
    472. 

  472.                         <option value="DNxHR">DNxHR</option>
    473. 

  473.                     </select>
    474. 

  474.                 </div>
    475. 

  475. 

  476.                 <!-- Status Badge -->
    477. 

  477.                 <div class="flex justify-center status-column">
    478. 

  478.                     <span class="status-badge completed" role="status" aria-live="polite"
    479. 

  479.                         aria-label="Video download completed">
    480. 

  480.                         Completed
    481. 

  481.                     </span>
    482. 

  482.                 </div>
    483. 

  483.             </div>
    484. 

  484. 

  485.             <!-- Video Item 5 - Error State -->
    486. 

  486.             <div class="video-item grid grid-cols-[40px_40px_1fr_120px_100px_120px_100px] gap-4 items-center p-2 rounded bg-[#314158] hover:bg-[#3a4a68] transition-colors duration-200"
    487. 

  487.                 data-video-id="video-5">
    488. 

  488.                 <!-- Checkbox -->
    489. 

  489.                 <div class="flex items-center justify-center">
    490. 

  490.                     <button
    491. 

  491.                         class="w-6 h-6 rounded flex items-center justify-center hover:bg-[#45556c] transition-colors">
    492. 

  492.                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="text-white">
    493. 

  493.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    494. 

  494.                                 fill="none" rx="2" />
    495. 

  495.                         </svg>
    496. 

  496.                     </button>
    497. 

  497.                 </div>
    498. 

  498. 

  499.                 <!-- Drag Handle -->
    500. 

  500.                 <div
    501. 

  501.                     class="flex items-center justify-center text-[#90a1b9] hover:text-white cursor-grab transition-colors">
    502. 

  502.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    503. 

  503.                         <circle cx="4" cy="4" r="1" />
    504. 

  504.                         <circle cx="4" cy="8" r="1" />
    505. 

  505.                         <circle cx="4" cy="12" r="1" />
    506. 

  506.                         <circle cx="8" cy="4" r="1" />
    507. 

  507.                         <circle cx="8" cy="8" r="1" />
    508. 

  508.                         <circle cx="8" cy="12" r="1" />
    509. 

  509.                         <circle cx="12" cy="4" r="1" />
    510. 

  510.                         <circle cx="12" cy="8" r="1" />
    511. 

  511.                         <circle cx="12" cy="12" r="1" />
    512. 

  512.                     </svg>
    513. 

  513.                 </div>
    514. 

  514. 

  515.                 <!-- Video Info -->
    516. 

  516.                 <div class="flex items-center gap-3 min-w-0">
    517. 

  517.                     <div class="w-16 h-12 bg-[#45556c] rounded overflow-hidden flex-shrink-0">
    518. 

  518.                         <div
    519. 

  519.                             class="w-full h-full bg-gradient-to-br from-[#4a5568] to-[#2d3748] flex items-center justify-center">
    520. 

  520.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-[#90a1b9]">
    521. 

  521.                                 <path d="M8 5V19L19 12L8 5Z" stroke="currentColor" stroke-width="2"
    522. 

  522.                                     stroke-linejoin="round" />
    523. 

  523.                             </svg>
    524. 

  524.                         </div>
    525. 

  525.                     </div>
    526. 

  526.                     <div class="min-w-0 flex-1">
    527. 

  527.                         <div class="text-sm text-white truncate font-medium">Blade Runner 2049 - Official Trailer -
    528. 

  528.                             Warner Bros. Pictures</div>
    529. 

  529.                     </div>
    530. 

  530.                 </div>
    531. 

  531. 

  532.                 <!-- Duration -->
    533. 

  533.                 <div class="text-sm text-[#cad5e2] text-center">3:47</div>
    534. 

  534. 

  535.                 <!-- Quality Dropdown -->
    536. 

  536.                 <div class="flex justify-center">
    537. 

  537.                     <select
    538. 

  538.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    539. 

  539.                         <option value="4K" selected>4K</option>
    540. 

  540.                         <option value="1440p">1440p</option>
    541. 

  541.                         <option value="1080p">1080p</option>
    542. 

  542.                         <option value="720p">720p</option>
    543. 

  543.                     </select>
    544. 

  544.                 </div>
    545. 

  545. 

  546.                 <!-- Format Dropdown -->
    547. 

  547.                 <div class="flex justify-center">
    548. 

  548.                     <select
    549. 

  549.                         class="bg-[#314158] border border-[#45556c] text-[#cad5e2] px-2 py-1 rounded text-xs font-medium min-w-0 w-full text-center">
    550. 

  550.                         <option value="H264" selected>H264</option>
    551. 

  551.                         <option value="None">None</option>
    552. 

  552.                         <option value="ProRes">ProRes</option>
    553. 

  553.                         <option value="DNxHR">DNxHR</option>
    554. 

  554.                         <option value="Audio only">Audio only</option>
    555. 

  555.                     </select>
    556. 

  556.                 </div>
    557. 

  557. 

  558.                 <!-- Status Badge -->
    559. 

  559.                 <div class="flex justify-center status-column">
    560. 

  560.                     <span class="status-badge error" role="status" aria-live="polite"
    561. 

  561.                         aria-label="Video download failed">
    562. 

  562.                         Error
    563. 

  563.                     </span>
    564. 

  564.                 </div>
    565. 

  565.             </div>
    566. 

  566.         </div>
    567. 

  567.     </main>
    568. 

  568. 

  569.     <!-- Control Panel - Exact Figma: 93px height -->
    570. 

  570.     <footer class="h-[93px] border-t border-[#314158] px-4 py-4 shrink-0 flex flex-col gap-2" role="contentinfo"
    571. 

  571.         aria-label="Download controls and actions" aria-describedby="control-panel-help">
    572. 

  572.         <div id="control-panel-help" class="sr-only">
    573. 

  573.             Control panel with actions for managing downloads. Use Ctrl+D to start downloads quickly.
    574. 

  574.         </div>
    575. 

  575.         <!-- Button Row -->
    576. 

  576.         <div class="flex items-center justify-between h-9">
    577. 

  577.             <div class="flex items-center gap-2">
    578. 

  578.                 <button id="clearListBtn"
    579. 

  579.                     class="border border-[#45556c] text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 h-9 tracking-[-0.1504px]"
    580. 

  580.                     aria-label="Clear all videos from list">
    581. 

  581.                     <img src="assets/icons/trash.svg" alt="" width="16" height="16" loading="lazy">
    582. 

  582.                     Clear List
    583. 

  583.                 </button>
    584. 

  584.                 <button id="updateDepsBtn"
    585. 

  585.                     class="border border-[#45556c] text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 h-9 tracking-[-0.1504px]"
    586. 

  586.                     aria-label="Check for updates to yt-dlp and ffmpeg">
    587. 

  587.                     <img src="assets/icons/refresh.svg" alt="" width="16" height="16" loading="lazy">
    588. 

  588.                     Check for Updates
    589. 

  589.                 </button>
    590. 

  590.                 <button id="cancelDownloadsBtn"
    591. 

  591.                     class="bg-[#e7000b] text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 h-9 tracking-[-0.1504px]"
    592. 

  592.                     aria-label="Cancel all active downloads">
    593. 

  593.                     <img src="assets/icons/close.svg" alt="Cancel" width="16" height="16">
    594. 

  594.                     Cancel Downloads
    595. 

  595.                 </button>
    596. 

  596.             </div>
    597. 

  597.             <button id="downloadVideosBtn"
    598. 

  598.                 class="bg-[#00a63e] text-white px-6 py-2.5 rounded-lg text-sm font-medium flex items-center gap-2 h-9 tracking-[-0.1504px]">
    599. 

  599.                 <img src="assets/icons/download.svg" alt="Download" width="16" height="16">
    600. 

  600.                 Download Videos
    601. 

  601.             </button>
    602. 

  602.         </div>
    603. 

  603. 

  604.         <!-- Status Message & Binary Versions -->
    605. 

  605.         <div class="flex items-center justify-between text-xs text-[#90a1b9] h-6 px-4">
    606. 

  606.             <!-- Left: Status Message -->
    607. 

  607.             <span id="statusMessage" role="status" aria-live="polite">Ready to download videos</span>
    608. 

  608. 

  609.             <!-- Right: Binary Versions -->
    610. 

  610.             <div id="binaryVersions" class="flex items-center gap-4">
    611. 

  611.                 <div id="ytdlpVersion" class="flex items-center gap-2">
    612. 

  612.                     <span class="font-medium text-[#cad5e2]">yt-dlp:</span>
    613. 

  613.                     <span id="ytdlpVersionNumber">--</span>
    614. 

  614.                     <span id="ytdlpUpdateBadge" class="hidden update-badge" title="Update available">●</span>
    615. 

  615.                 </div>
    616. 

  616.                 <div id="ffmpegVersion" class="flex items-center gap-2">
    617. 

  617.                     <span class="font-medium text-[#cad5e2]">ffmpeg:</span>
    618. 

  618.                     <span id="ffmpegVersionNumber">--</span>
    619. 

  619.                 </div>
    620. 

  620.                 <span id="lastUpdateCheck" class="text-[#62748e] text-[10px]" title="Last update check">--</span>
    621. 

  621.             </div>
    622. 

  622.         </div>
    623. 

  623.     </footer>
    624. 

  624. 

  625.     <!-- Load modular scripts in dependency order -->
    626. 

  626.     <script>
    627. 

  627.         // Track script loading
    628. 

  628.         window.scriptLoadErrors = [];
    629. 

  629. 

  630.         function loadScript(src, callback) {
    631. 

  631.             const script = document.createElement('script');
    632. 

  632.             script.src = src;
    633. 

  633.             script.onload = () => {
    634. 

  634.                 console.log(`✓ Loaded: ${src}`);
    635. 

  635.                 if (callback) callback();
    636. 

  636.             };
    637. 

  637.             script.onerror = () => {
    638. 

  638.                 console.error(`✗ Failed to load: ${src}`);
    639. 

  639.                 window.scriptLoadErrors.push(src);
    640. 

  640.                 if (callback) callback();
    641. 

  641.             };
    642. 

  642.             document.head.appendChild(script);
    643. 

  643.         }
    644. 

  644. 

  645.         // Load modular scripts in correct dependency order
    646. 

  646.         loadScript('scripts/utils/config.js', () => {
    647. 

  647.             loadScript('scripts/utils/url-validator.js', () => {
    648. 

  648.                 loadScript('scripts/core/event-bus.js', () => {
    649. 

  649.                     loadScript('scripts/models/Video.js', () => {
    650. 

  650.                         loadScript('scripts/models/AppState.js', () => {
    651. 

  651.                             loadScript('scripts/utils/error-handler.js', () => {
    652. 

  652.                                 loadScript('scripts/utils/desktop-notifications.js', () => {
    653. 

  653.                                     loadScript('scripts/utils/live-region-manager.js', () => {
    654. 

  654.                                         loadScript('scripts/utils/accessibility-manager.js', () => {
    655. 

  655.                                             loadScript('scripts/utils/keyboard-navigation.js', () => {
    656. 

  656.                                                 loadScript('scripts/utils/ipc-integration.js', () => {
    657. 

  657.                                                     loadScript('scripts/services/metadata-service.js', () => {
    658. 

  658.                                                         loadScript('scripts/utils/enhanced-download-methods.js', () => {
    659. 

  659.                                                             loadScript('scripts/app.js', () => {
    660. 

  660.                                                                 loadScript('scripts/utils/download-integration-patch.js', () => {
    661. 

  661.                                                                 console.log('✅ All modular scripts loaded successfully');
    662. 

  662.                                                                 if (window.scriptLoadErrors.length > 0) {
    663. 

  663.                                                                     console.warn('⚠️ Some scripts failed to load:', window.scriptLoadErrors);
    664. 

  664.                                                                 }
    665. 

  665. 

  666.                                                                 // Initialize app after all scripts have loaded
    667. 

  667.                                                                 if (typeof window.initializeGrabZilla === 'function') {
    668. 

  668.                                                                     console.log('🚀 Initializing GrabZilla app...');
    669. 

  669.                                                                     window.initializeGrabZilla();
    670. 

  670.                                                                 } else {
    671. 

  671.                                                                     console.error('❌ initializeGrabZilla function not found');
    672. 

  672.                                                                 }
    673. 

  673.                                                                 });
    674. 

  674.                                                             });
    675. 

  675.                                                         });
    676. 

  676.                                                     });
    677. 

  677.                                                 });
    678. 

  678.                                             });
    679. 

  679.                                         });
    680. 

  680.                                     });
    681. 

  681.                                 });
    682. 

  682.                             });
    683. 

  683.                         });
    684. 

  684.                     });
    685. 

  685.                 });
    686. 

  686.             });
    687. 

  687.         });
    688. 

  688.     </script>
    689. 

  689. 

  690.     <!-- Debug script -->
    691. 

  691.     <script>
    692. 

  692.         // Debug logging
    693. 

  693.         console.log('All scripts loaded');
    694. 

  694. 

  695.         // Check if buttons exist when DOM is ready
    696. 

  696.         document.addEventListener('DOMContentLoaded', () => {
    697. 

  697.             console.log('DOM Content Loaded - checking buttons...');
    698. 

  698. 

  699.             const buttons = ['addVideoBtn', 'importUrlsBtn', 'savePathBtn', 'cookieFileBtn'];
    700. 

  700.             buttons.forEach(id => {
    701. 

  701.                 const btn = document.getElementById(id);
    702. 

  702.                 console.log(`Button ${id}:`, btn ? 'FOUND' : 'NOT FOUND');
    703. 

  703.             });
    704. 

  704. 

  705.             // Check if app was initialized and provide fallback
    706. 

  706.             setTimeout(() => {
    707. 

  707.                 console.log('App instance:', window.app ? 'EXISTS' : 'NOT FOUND');
    708. 

  708.                 console.log('Script load errors:', window.scriptLoadErrors || 'none');
    709. 

  709. 

  710.                 if (window.app) {
    711. 

  711.                     console.log('App state:', window.app.state);
    712. 

  712.                     console.log('App initialized successfully');
    713. 

  713.                 } else {
    714. 

  714.                     console.log('App not initialized, setting up fallback button listeners...');
    715. 

  715. 

  716.                     // Create a minimal app-like object for basic functionality
    717. 

  717.                     window.fallbackApp = {
    718. 

  718.                         handleAddVideo: function () {
    719. 

  719.                             const urlInput = document.getElementById('urlInput');
    720. 

  720.                             const inputText = urlInput ? urlInput.value.trim() : '';
    721. 

  721. 

  722.                             if (!inputText) {
    723. 

  723.                                 alert('Please enter a URL');
    724. 

  724.                                 return;
    725. 

  725.                             }
    726. 

  726. 

  727.                             console.log('Processing URLs:', inputText);
    728. 

  728.                             alert(`Would add video(s): ${inputText}`);
    729. 

  729. 

  730.                             if (urlInput) urlInput.value = '';
    731. 

  731.                         },
    732. 

  732. 

  733.                         handleImportUrls: function () {
    734. 

  734.                             alert('Import URLs functionality (requires Electron)');
    735. 

  735.                         },
    736. 

  736. 

  737.                         handleSelectSavePath: function () {
    738. 

  738.                             alert('Save path selection (requires Electron)');
    739. 

  739.                         },
    740. 

  740. 

  741.                         handleSelectCookieFile: function () {
    742. 

  742.                             alert('Cookie file selection (requires Electron)');
    743. 

  743.                         }
    744. 

  744.                     };
    745. 

  745. 

  746.                     // Attach fallback event listeners
    747. 

  747.                     const addVideoBtn = document.getElementById('addVideoBtn');
    748. 

  748.                     if (addVideoBtn) {
    749. 

  749.                         addVideoBtn.addEventListener('click', window.fallbackApp.handleAddVideo);
    750. 

  750.                         console.log('✓ Fallback listener attached to Add Video button');
    751. 

  751.                     }
    752. 

  752. 

  753.                     const importUrlsBtn = document.getElementById('importUrlsBtn');
    754. 

  754.                     if (importUrlsBtn) {
    755. 

  755.                         importUrlsBtn.addEventListener('click', window.fallbackApp.handleImportUrls);
    756. 

  756.                         console.log('✓ Fallback listener attached to Import URLs button');
    757. 

  757.                     }
    758. 

  758. 

  759.                     const savePathBtn = document.getElementById('savePathBtn');
    760. 

  760.                     if (savePathBtn) {
    761. 

  761.                         savePathBtn.addEventListener('click', window.fallbackApp.handleSelectSavePath);
    762. 

  762.                         console.log('✓ Fallback listener attached to Save Path button');
    763. 

  763.                     }
    764. 

  764. 

  765.                     const cookieFileBtn = document.getElementById('cookieFileBtn');
    766. 

  766.                     if (cookieFileBtn) {
    767. 

  767.                         cookieFileBtn.addEventListener('click', window.fallbackApp.handleSelectCookieFile);
    768. 

  768.                         console.log('✓ Fallback listener attached to Cookie File button');
    769. 

  769.                     }
    770. 

  770. 

  771.                     console.log('Fallback initialization complete');
    772. 

  772.                 }
    773. 

  773.             }, 3000);
    774. 

  774.         });
    775. 

  775. 

  776.         // Catch any errors
    777. 

  777.         window.addEventListener('error', (e) => {
    778. 

  778.             console.error('JavaScript Error:', e.error);
    779. 

  779.             console.error('File:', e.filename, 'Line:', e.lineno);
    780. 

  780.         });
    781. 

  781.     </script>
    782. 

  782. </body>
    783. 

  783. 

  784. </html>
    785.