صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
github-mirrors
/
mirror-GrabZilla21
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: 3c29f83880
شاخه‌ها تگ‌ها
mirror-GrabZill...
/
index.html

index.html 41 KB
تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778 
  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.                 <!-- Cookie File -->
    101. 

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

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

  103.                     <button id="cookieFileBtn"
    104. 

  104.                         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">
    105. 

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

  106.                         Select File
    107. 

  107.                     </button>
    108. 

  108.                     <span id="cookieFilePath" class="text-[#90a1b9] text-xs italic max-w-[200px] truncate" title=""></span>
    109. 

  109.                 </div>
    110. 

  110.             </div>
    111. 

  111.         </div>
    112. 

  112.     </section>
    113. 

  113. 

  114.     <!-- Video List - Flex grow to fill remaining space -->
    115. 

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

  116.         aria-describedby="main-content-help">
    117. 

  117.         <div id="main-content-help" class="sr-only">
    118. 

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

  119.         </div>
    120. 

  120.         <!-- Table Header -->
    121. 

  121.         <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]"
    122. 

  122.             role="row" aria-label="Video list column headers">
    123. 

  123.             <div role="columnheader" aria-label="Selection checkbox"></div>
    124. 

  124.             <div role="columnheader" aria-label="Drag handle"></div>
    125. 

  125.             <div role="columnheader">Title</div>
    126. 

  126.             <div role="columnheader">Duration</div>
    127. 

  127.             <div role="columnheader">Quality</div>
    128. 

  128.             <div role="columnheader">Conversion</div>
    129. 

  129.             <div role="columnheader">Status</div>
    130. 

  130.         </div>
    131. 

  131. 

  132.         <!-- Video Items Container -->
    133. 

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

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

  135.             <div id="video-list-instructions" class="sr-only">
    136. 

  136.                 Use arrow keys to navigate between videos. Press Enter or Space to select videos. Press Delete to remove
    137. 

  137.                 videos. Press Ctrl+A to select all videos.
    138. 

  138.             </div>
    139. 

  139.             <!-- Sample Video Items - Matching Figma Design -->
    140. 

  140. 

  141.             <!-- Video Item 1 - Ready State -->
    142. 

  142.             <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"
    143. 

  143.                 data-video-id="video-1" role="gridcell" tabindex="0" aria-rowindex="1"
    144. 

  144.                 aria-describedby="video-1-description">
    145. 

  145.                 <!-- Checkbox -->
    146. 

  146.                 <div class="flex items-center justify-center">
    147. 

  147.                     <button
    148. 

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

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

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

  151.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    152. 

  152.                                 fill="none" rx="2" />
    153. 

  153.                         </svg>
    154. 

  154.                     </button>
    155. 

  155.                 </div>
    156. 

  156. 

  157.                 <!-- Drag Handle -->
    158. 

  158.                 <div
    159. 

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

  160.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    161. 

  161.                         <circle cx="4" cy="4" r="1" />
    162. 

  162.                         <circle cx="4" cy="8" r="1" />
    163. 

  163.                         <circle cx="4" cy="12" r="1" />
    164. 

  164.                         <circle cx="8" cy="4" r="1" />
    165. 

  165.                         <circle cx="8" cy="8" r="1" />
    166. 

  166.                         <circle cx="8" cy="12" r="1" />
    167. 

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

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

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

  170.                     </svg>
    171. 

  171.                 </div>
    172. 

  172. 

  173.                 <!-- Video Info -->
    174. 

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

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

  176.                         <div
    177. 

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

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

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

  180.                                     stroke-linejoin="round" />
    181. 

  181.                             </svg>
    182. 

  182.                         </div>
    183. 

  183.                     </div>
    184. 

  184.                     <div class="min-w-0 flex-1">
    185. 

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

  186.                         </div>
    187. 

  187.                     </div>
    188. 

  188.                 </div>
    189. 

  189. 

  190.                 <!-- Duration -->
    191. 

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

  192. 

  193.                 <!-- Quality Dropdown -->
    194. 

  194.                 <div class="flex justify-center">
    195. 

  195.                     <select
    196. 

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

  197.                         aria-label="Quality for Interstellar 2014 Trailer">
    198. 

  198.                         <option value="4K" selected>4K</option>
    199. 

  199.                         <option value="1440p">1440p</option>
    200. 

  200.                         <option value="1080p">1080p</option>
    201. 

  201.                         <option value="720p">720p</option>
    202. 

  202.                     </select>
    203. 

  203.                 </div>
    204. 

  204. 

  205.                 <!-- Format Dropdown -->
    206. 

  206.                 <div class="flex justify-center">
    207. 

  207.                     <select
    208. 

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

  209.                         aria-label="Format for Interstellar 2014 Trailer">
    210. 

  210.                         <option value="None" selected>None</option>
    211. 

  211.                         <option value="H264">H264</option>
    212. 

  212.                         <option value="ProRes">ProRes</option>
    213. 

  213.                         <option value="DNxHR">DNxHR</option>
    214. 

  214.                         <option value="Audio only">Audio only</option>
    215. 

  215.                     </select>
    216. 

  216.                 </div>
    217. 

  217. 

  218.                 <!-- Status Badge -->
    219. 

  219.                 <div class="flex justify-center status-column">
    220. 

  220.                     <span class="status-badge ready" role="status" aria-live="polite"
    221. 

  221.                         aria-label="Video ready for download">
    222. 

  222.                         Ready
    223. 

  223.                     </span>
    224. 

  224.                 </div>
    225. 

  225. 

  226.                 <!-- Video Description for Screen Readers -->
    227. 

  227.                 <div id="video-1-description" class="sr-only">
    228. 

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

  229.                     to select, Delete to remove.
    230. 

  230.                 </div>
    231. 

  231.             </div>
    232. 

  232. 

  233.             <!-- Video Item 2 - Downloading State -->
    234. 

  234.             <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"
    235. 

  235.                 data-video-id="video-2">
    236. 

  236.                 <!-- Checkbox -->
    237. 

  237.                 <div class="flex items-center justify-center">
    238. 

  238.                     <button
    239. 

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

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

  241.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    242. 

  242.                                 fill="none" rx="2" />
    243. 

  243.                         </svg>
    244. 

  244.                     </button>
    245. 

  245.                 </div>
    246. 

  246. 

  247.                 <!-- Drag Handle -->
    248. 

  248.                 <div
    249. 

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

  250.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    251. 

  251.                         <circle cx="4" cy="4" r="1" />
    252. 

  252.                         <circle cx="4" cy="8" r="1" />
    253. 

  253.                         <circle cx="4" cy="12" r="1" />
    254. 

  254.                         <circle cx="8" cy="4" r="1" />
    255. 

  255.                         <circle cx="8" cy="8" r="1" />
    256. 

  256.                         <circle cx="8" cy="12" r="1" />
    257. 

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

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

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

  260.                     </svg>
    261. 

  261.                 </div>
    262. 

  262. 

  263.                 <!-- Video Info -->
    264. 

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

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

  266.                         <div
    267. 

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

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

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

  270.                                     stroke-linejoin="round" />
    271. 

  271.                             </svg>
    272. 

  272.                         </div>
    273. 

  273.                     </div>
    274. 

  274.                     <div class="min-w-0 flex-1">
    275. 

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

  276.                             Trailers</div>
    277. 

  277.                     </div>
    278. 

  278.                 </div>
    279. 

  279. 

  280.                 <!-- Duration -->
    281. 

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

  282. 

  283.                 <!-- Quality Dropdown -->
    284. 

  284.                 <div class="flex justify-center">
    285. 

  285.                     <select
    286. 

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

  287.                         <option value="1080p" selected>1080p</option>
    288. 

  288.                         <option value="4K">4K</option>
    289. 

  289.                         <option value="1440p">1440p</option>
    290. 

  290.                         <option value="720p">720p</option>
    291. 

  291.                     </select>
    292. 

  292.                 </div>
    293. 

  293. 

  294.                 <!-- Format Dropdown -->
    295. 

  295.                 <div class="flex justify-center">
    296. 

  296.                     <select
    297. 

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

  298.                         <option value="ProRes" selected>ProRes</option>
    299. 

  299.                         <option value="None">None</option>
    300. 

  300.                         <option value="H264">H264</option>
    301. 

  301.                         <option value="DNxHR">DNxHR</option>
    302. 

  302.                         <option value="Audio only">Audio only</option>
    303. 

  303.                     </select>
    304. 

  304.                 </div>
    305. 

  305. 

  306.                 <!-- Status Badge with Integrated Progress -->
    307. 

  307.                 <div class="flex justify-center status-column">
    308. 

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

  309.                         data-progress="65">
    310. 

  310.                         Downloading 65%
    311. 

  311.                     </span>
    312. 

  312.                 </div>
    313. 

  313.             </div>
    314. 

  314. 

  315.             <!-- Video Item 3 - Converting State -->
    316. 

  316.             <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"
    317. 

  317.                 data-video-id="video-3">
    318. 

  318.                 <!-- Checkbox -->
    319. 

  319.                 <div class="flex items-center justify-center">
    320. 

  320.                     <button
    321. 

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

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

  323.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    324. 

  324.                                 fill="none" rx="2" />
    325. 

  325.                         </svg>
    326. 

  326.                     </button>
    327. 

  327.                 </div>
    328. 

  328. 

  329.                 <!-- Drag Handle -->
    330. 

  330.                 <div
    331. 

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

  332.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    333. 

  333.                         <circle cx="4" cy="4" r="1" />
    334. 

  334.                         <circle cx="4" cy="8" r="1" />
    335. 

  335.                         <circle cx="4" cy="12" r="1" />
    336. 

  336.                         <circle cx="8" cy="4" r="1" />
    337. 

  337.                         <circle cx="8" cy="8" r="1" />
    338. 

  338.                         <circle cx="8" cy="12" r="1" />
    339. 

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

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

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

  342.                     </svg>
    343. 

  343.                 </div>
    344. 

  344. 

  345.                 <!-- Video Info -->
    346. 

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

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

  348.                         <div
    349. 

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

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

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

  352.                                     stroke-linejoin="round" />
    353. 

  353.                             </svg>
    354. 

  354.                         </div>
    355. 

  355.                     </div>
    356. 

  356.                     <div class="min-w-0 flex-1">
    357. 

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

  358.                         </div>
    359. 

  359.                     </div>
    360. 

  360.                 </div>
    361. 

  361. 

  362.                 <!-- Duration -->
    363. 

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

  364. 

  365.                 <!-- Quality Dropdown -->
    366. 

  366.                 <div class="flex justify-center">
    367. 

  367.                     <select
    368. 

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

  369.                         <option value="1080p" selected>1080p</option>
    370. 

  370.                         <option value="4K">4K</option>
    371. 

  371.                         <option value="1440p">1440p</option>
    372. 

  372.                         <option value="720p">720p</option>
    373. 

  373.                     </select>
    374. 

  374.                 </div>
    375. 

  375. 

  376.                 <!-- Format Dropdown -->
    377. 

  377.                 <div class="flex justify-center">
    378. 

  378.                     <select
    379. 

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

  380.                         <option value="H264" selected>H264</option>
    381. 

  381.                         <option value="None">None</option>
    382. 

  382.                         <option value="ProRes">ProRes</option>
    383. 

  383.                         <option value="DNxHR">DNxHR</option>
    384. 

  384.                         <option value="Audio only">Audio only</option>
    385. 

  385.                     </select>
    386. 

  386.                 </div>
    387. 

  387. 

  388.                 <!-- Status Badge with Integrated Progress -->
    389. 

  389.                 <div class="flex justify-center status-column">
    390. 

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

  391.                         data-progress="42">
    392. 

  392.                         Converting 42%
    393. 

  393.                     </span>
    394. 

  394.                 </div>
    395. 

  395.             </div>
    396. 

  396. 

  397.             <!-- Video Item 4 - Completed State -->
    398. 

  398.             <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"
    399. 

  399.                 data-video-id="video-4">
    400. 

  400.                 <!-- Checkbox -->
    401. 

  401.                 <div class="flex items-center justify-center">
    402. 

  402.                     <button
    403. 

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

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

  405.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    406. 

  406.                                 fill="none" rx="2" />
    407. 

  407.                         </svg>
    408. 

  408.                     </button>
    409. 

  409.                 </div>
    410. 

  410. 

  411.                 <!-- Drag Handle -->
    412. 

  412.                 <div
    413. 

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

  414.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    415. 

  415.                         <circle cx="4" cy="4" r="1" />
    416. 

  416.                         <circle cx="4" cy="8" r="1" />
    417. 

  417.                         <circle cx="4" cy="12" r="1" />
    418. 

  418.                         <circle cx="8" cy="4" r="1" />
    419. 

  419.                         <circle cx="8" cy="8" r="1" />
    420. 

  420.                         <circle cx="8" cy="12" r="1" />
    421. 

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

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

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

  424.                     </svg>
    425. 

  425.                 </div>
    426. 

  426. 

  427.                 <!-- Video Info -->
    428. 

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

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

  430.                         <div
    431. 

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

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

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

  434.                                     stroke-linejoin="round" />
    435. 

  435.                             </svg>
    436. 

  436.                         </div>
    437. 

  437.                     </div>
    438. 

  438.                     <div class="min-w-0 flex-1">
    439. 

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

  440.                             Paramount Pictures</div>
    441. 

  441.                     </div>
    442. 

  442.                 </div>
    443. 

  443. 

  444.                 <!-- Duration -->
    445. 

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

  446. 

  447.                 <!-- Quality Dropdown -->
    448. 

  448.                 <div class="flex justify-center">
    449. 

  449.                     <select
    450. 

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

  451.                         <option value="720p" selected>720p</option>
    452. 

  452.                         <option value="4K">4K</option>
    453. 

  453.                         <option value="1440p">1440p</option>
    454. 

  454.                         <option value="1080p">1080p</option>
    455. 

  455.                     </select>
    456. 

  456.                 </div>
    457. 

  457. 

  458.                 <!-- Format Dropdown -->
    459. 

  459.                 <div class="flex justify-center">
    460. 

  460.                     <select
    461. 

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

  462.                         <option value="Audio only" selected>Audio only</option>
    463. 

  463.                         <option value="None">None</option>
    464. 

  464.                         <option value="H264">H264</option>
    465. 

  465.                         <option value="ProRes">ProRes</option>
    466. 

  466.                         <option value="DNxHR">DNxHR</option>
    467. 

  467.                     </select>
    468. 

  468.                 </div>
    469. 

  469. 

  470.                 <!-- Status Badge -->
    471. 

  471.                 <div class="flex justify-center status-column">
    472. 

  472.                     <span class="status-badge completed" role="status" aria-live="polite"
    473. 

  473.                         aria-label="Video download completed">
    474. 

  474.                         Completed
    475. 

  475.                     </span>
    476. 

  476.                 </div>
    477. 

  477.             </div>
    478. 

  478. 

  479.             <!-- Video Item 5 - Error State -->
    480. 

  480.             <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"
    481. 

  481.                 data-video-id="video-5">
    482. 

  482.                 <!-- Checkbox -->
    483. 

  483.                 <div class="flex items-center justify-center">
    484. 

  484.                     <button
    485. 

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

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

  487.                             <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5"
    488. 

  488.                                 fill="none" rx="2" />
    489. 

  489.                         </svg>
    490. 

  490.                     </button>
    491. 

  491.                 </div>
    492. 

  492. 

  493.                 <!-- Drag Handle -->
    494. 

  494.                 <div
    495. 

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

  496.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    497. 

  497.                         <circle cx="4" cy="4" r="1" />
    498. 

  498.                         <circle cx="4" cy="8" r="1" />
    499. 

  499.                         <circle cx="4" cy="12" r="1" />
    500. 

  500.                         <circle cx="8" cy="4" r="1" />
    501. 

  501.                         <circle cx="8" cy="8" r="1" />
    502. 

  502.                         <circle cx="8" cy="12" r="1" />
    503. 

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

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

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

  506.                     </svg>
    507. 

  507.                 </div>
    508. 

  508. 

  509.                 <!-- Video Info -->
    510. 

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

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

  512.                         <div
    513. 

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

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

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

  516.                                     stroke-linejoin="round" />
    517. 

  517.                             </svg>
    518. 

  518.                         </div>
    519. 

  519.                     </div>
    520. 

  520.                     <div class="min-w-0 flex-1">
    521. 

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

  522.                             Warner Bros. Pictures</div>
    523. 

  523.                     </div>
    524. 

  524.                 </div>
    525. 

  525. 

  526.                 <!-- Duration -->
    527. 

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

  528. 

  529.                 <!-- Quality Dropdown -->
    530. 

  530.                 <div class="flex justify-center">
    531. 

  531.                     <select
    532. 

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

  533.                         <option value="4K" selected>4K</option>
    534. 

  534.                         <option value="1440p">1440p</option>
    535. 

  535.                         <option value="1080p">1080p</option>
    536. 

  536.                         <option value="720p">720p</option>
    537. 

  537.                     </select>
    538. 

  538.                 </div>
    539. 

  539. 

  540.                 <!-- Format Dropdown -->
    541. 

  541.                 <div class="flex justify-center">
    542. 

  542.                     <select
    543. 

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

  544.                         <option value="H264" selected>H264</option>
    545. 

  545.                         <option value="None">None</option>
    546. 

  546.                         <option value="ProRes">ProRes</option>
    547. 

  547.                         <option value="DNxHR">DNxHR</option>
    548. 

  548.                         <option value="Audio only">Audio only</option>
    549. 

  549.                     </select>
    550. 

  550.                 </div>
    551. 

  551. 

  552.                 <!-- Status Badge -->
    553. 

  553.                 <div class="flex justify-center status-column">
    554. 

  554.                     <span class="status-badge error" role="status" aria-live="polite"
    555. 

  555.                         aria-label="Video download failed">
    556. 

  556.                         Error
    557. 

  557.                     </span>
    558. 

  558.                 </div>
    559. 

  559.             </div>
    560. 

  560.         </div>
    561. 

  561.     </main>
    562. 

  562. 

  563.     <!-- Control Panel - Exact Figma: 93px height -->
    564. 

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

  565.         aria-label="Download controls and actions" aria-describedby="control-panel-help">
    566. 

  566.         <div id="control-panel-help" class="sr-only">
    567. 

  567.             Control panel with actions for managing downloads. Use Ctrl+D to start downloads quickly.
    568. 

  568.         </div>
    569. 

  569.         <!-- Button Row -->
    570. 

  570.         <div class="flex items-center justify-between h-9">
    571. 

  571.             <div class="flex items-center gap-2">
    572. 

  572.                 <button id="clearListBtn"
    573. 

  573.                     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]"
    574. 

  574.                     aria-label="Clear all videos from list">
    575. 

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

  576.                     Clear List
    577. 

  577.                 </button>
    578. 

  578.                 <button id="updateDepsBtn"
    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="Check for updates to yt-dlp and ffmpeg">
    581. 

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

  582.                     Check for Updates
    583. 

  583.                 </button>
    584. 

  584.                 <button id="cancelDownloadsBtn"
    585. 

  585.                     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]"
    586. 

  586.                     aria-label="Cancel all active downloads">
    587. 

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

  588.                     Cancel Downloads
    589. 

  589.                 </button>
    590. 

  590.             </div>
    591. 

  591.             <button id="downloadVideosBtn"
    592. 

  592.                 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]">
    593. 

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

  594.                 Download Videos
    595. 

  595.             </button>
    596. 

  596.         </div>
    597. 

  597. 

  598.         <!-- Status Message & Binary Versions -->
    599. 

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

  600.             <!-- Left: Status Message -->
    601. 

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

  602. 

  603.             <!-- Right: Binary Versions -->
    604. 

  604.             <div id="binaryVersions" class="flex items-center gap-4">
    605. 

  605.                 <div id="ytdlpVersion" class="flex items-center gap-2">
    606. 

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

  607.                     <span id="ytdlpVersionNumber">--</span>
    608. 

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

  609.                 </div>
    610. 

  610.                 <div id="ffmpegVersion" class="flex items-center gap-2">
    611. 

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

  612.                     <span id="ffmpegVersionNumber">--</span>
    613. 

  613.                 </div>
    614. 

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

  615.             </div>
    616. 

  616.         </div>
    617. 

  617.     </footer>
    618. 

  618. 

  619.     <!-- Load modular scripts in dependency order -->
    620. 

  620.     <script>
    621. 

  621.         // Track script loading
    622. 

  622.         window.scriptLoadErrors = [];
    623. 

  623. 

  624.         function loadScript(src, callback) {
    625. 

  625.             const script = document.createElement('script');
    626. 

  626.             script.src = src;
    627. 

  627.             script.onload = () => {
    628. 

  628.                 console.log(`✓ Loaded: ${src}`);
    629. 

  629.                 if (callback) callback();
    630. 

  630.             };
    631. 

  631.             script.onerror = () => {
    632. 

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

  633.                 window.scriptLoadErrors.push(src);
    634. 

  634.                 if (callback) callback();
    635. 

  635.             };
    636. 

  636.             document.head.appendChild(script);
    637. 

  637.         }
    638. 

  638. 

  639.         // Load modular scripts in correct dependency order
    640. 

  640.         loadScript('scripts/utils/config.js', () => {
    641. 

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

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

  643.                     loadScript('scripts/models/Video.js', () => {
    644. 

  644.                         loadScript('scripts/models/AppState.js', () => {
    645. 

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

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

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

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

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

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

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

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

  653.                                                             loadScript('scripts/app.js', () => {
    654. 

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

  655.                                                                 console.log('✅ All modular scripts loaded successfully');
    656. 

  656.                                                                 if (window.scriptLoadErrors.length > 0) {
    657. 

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

  658.                                                                 }
    659. 

  659. 

  660.                                                                 // Initialize app after all scripts have loaded
    661. 

  661.                                                                 if (typeof window.initializeGrabZilla === 'function') {
    662. 

  662.                                                                     console.log('🚀 Initializing GrabZilla app...');
    663. 

  663.                                                                     window.initializeGrabZilla();
    664. 

  664.                                                                 } else {
    665. 

  665.                                                                     console.error('❌ initializeGrabZilla function not found');
    666. 

  666.                                                                 }
    667. 

  667.                                                                 });
    668. 

  668.                                                             });
    669. 

  669.                                                         });
    670. 

  670.                                                     });
    671. 

  671.                                                 });
    672. 

  672.                                             });
    673. 

  673.                                         });
    674. 

  674.                                     });
    675. 

  675.                                 });
    676. 

  676.                             });
    677. 

  677.                         });
    678. 

  678.                     });
    679. 

  679.                 });
    680. 

  680.             });
    681. 

  681.         });
    682. 

  682.     </script>
    683. 

  683. 

  684.     <!-- Debug script -->
    685. 

  685.     <script>
    686. 

  686.         // Debug logging
    687. 

  687.         console.log('All scripts loaded');
    688. 

  688. 

  689.         // Check if buttons exist when DOM is ready
    690. 

  690.         document.addEventListener('DOMContentLoaded', () => {
    691. 

  691.             console.log('DOM Content Loaded - checking buttons...');
    692. 

  692. 

  693.             const buttons = ['addVideoBtn', 'importUrlsBtn', 'savePathBtn', 'cookieFileBtn'];
    694. 

  694.             buttons.forEach(id => {
    695. 

  695.                 const btn = document.getElementById(id);
    696. 

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

  697.             });
    698. 

  698. 

  699.             // Check if app was initialized and provide fallback
    700. 

  700.             setTimeout(() => {
    701. 

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

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

  703. 

  704.                 if (window.app) {
    705. 

  705.                     console.log('App state:', window.app.state);
    706. 

  706.                     console.log('App initialized successfully');
    707. 

  707.                 } else {
    708. 

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

  709. 

  710.                     // Create a minimal app-like object for basic functionality
    711. 

  711.                     window.fallbackApp = {
    712. 

  712.                         handleAddVideo: function () {
    713. 

  713.                             const urlInput = document.getElementById('urlInput');
    714. 

  714.                             const inputText = urlInput ? urlInput.value.trim() : '';
    715. 

  715. 

  716.                             if (!inputText) {
    717. 

  717.                                 alert('Please enter a URL');
    718. 

  718.                                 return;
    719. 

  719.                             }
    720. 

  720. 

  721.                             console.log('Processing URLs:', inputText);
    722. 

  722.                             alert(`Would add video(s): ${inputText}`);
    723. 

  723. 

  724.                             if (urlInput) urlInput.value = '';
    725. 

  725.                         },
    726. 

  726. 

  727.                         handleImportUrls: function () {
    728. 

  728.                             alert('Import URLs functionality (requires Electron)');
    729. 

  729.                         },
    730. 

  730. 

  731.                         handleSelectSavePath: function () {
    732. 

  732.                             alert('Save path selection (requires Electron)');
    733. 

  733.                         },
    734. 

  734. 

  735.                         handleSelectCookieFile: function () {
    736. 

  736.                             alert('Cookie file selection (requires Electron)');
    737. 

  737.                         }
    738. 

  738.                     };
    739. 

  739. 

  740.                     // Attach fallback event listeners
    741. 

  741.                     const addVideoBtn = document.getElementById('addVideoBtn');
    742. 

  742.                     if (addVideoBtn) {
    743. 

  743.                         addVideoBtn.addEventListener('click', window.fallbackApp.handleAddVideo);
    744. 

  744.                         console.log('✓ Fallback listener attached to Add Video button');
    745. 

  745.                     }
    746. 

  746. 

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

  748.                     if (importUrlsBtn) {
    749. 

  749.                         importUrlsBtn.addEventListener('click', window.fallbackApp.handleImportUrls);
    750. 

  750.                         console.log('✓ Fallback listener attached to Import URLs button');
    751. 

  751.                     }
    752. 

  752. 

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

  754.                     if (savePathBtn) {
    755. 

  755.                         savePathBtn.addEventListener('click', window.fallbackApp.handleSelectSavePath);
    756. 

  756.                         console.log('✓ Fallback listener attached to Save Path button');
    757. 

  757.                     }
    758. 

  758. 

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

  760.                     if (cookieFileBtn) {
    761. 

  761.                         cookieFileBtn.addEventListener('click', window.fallbackApp.handleSelectCookieFile);
    762. 

  762.                         console.log('✓ Fallback listener attached to Cookie File button');
    763. 

  763.                     }
    764. 

  764. 

  765.                     console.log('Fallback initialization complete');
    766. 

  766.                 }
    767. 

  767.             }, 3000);
    768. 

  768.         });
    769. 

  769. 

  770.         // Catch any errors
    771. 

  771.         window.addEventListener('error', (e) => {
    772. 

  772.             console.error('JavaScript Error:', e.error);
    773. 

  773.             console.error('File:', e.filename, 'Line:', e.lineno);
    774. 

  774.         });
    775. 

  775.     </script>
    776. 

  776. </body>
    777. 

  777. 

  778. </html>
    779.