1010 < link href ="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap " rel ="stylesheet ">
1111 < script src ="https://cdn.jsdelivr.net/npm/sweetalert2@11 "> </ script >
1212 < link rel ="stylesheet " href ="css/style.css ">
13+ < script src ="js/locales.js "> </ script >
14+ < script src ="js/i18n.js "> </ script >
1315 < script src ="js/config.js "> </ script >
1416 </ head >
1517
1921 < div class ="lg:col-span-5 space-y-6 ">
2022 < div class ="glass-panel rounded-2xl p-6 shadow-2xl relative overflow-hidden ">
2123 < div class ="flex items-center justify-between mb-4 ">
22- < h2 class ="text-sm font-bold text-blue-400 uppercase tracking-wider "> 1. Ingestion</ h2 >
23- < span class ="text-xs text-gray-500 "> Drag & Drop Enabled</ span >
24+ < h2 class ="text-sm font-bold text-blue-400 uppercase tracking-wider " data-i18n =" dashboard.ingestion.title " > 1. Ingestion</ h2 >
25+ < span class ="text-xs text-gray-500 " data-i18n =" dashboard.ingestion.subtitle " > Drag & Drop Enabled</ span >
2426 </ div >
2527 < div class ="space-y-3 relative z-10 ">
2628 < label id ="dropExcel " class ="drop-zone block border border-dashed border-gray-600 rounded-xl p-4 cursor-pointer group bg-black/20 hover:bg-black/40 ">
2729 < input type ="file " id ="fileExcel " class ="hidden " accept =".xlsx " onchange ="updateUI(this) ">
2830 < div class ="flex items-center gap-3 ">
2931 < div class ="p-2 bg-green-500/20 text-green-400 rounded-lg "> 📊</ div >
3032 < div class ="flex-1 ">
31- < div class ="text-sm font-medium text-gray-200 "> Data Source (.xlsx)</ div >
32- < div id ="lblExcel " class ="text-xs text-gray-500 "> Required</ div >
33+ < div class ="text-sm font-medium text-gray-200 " data-i18n =" dashboard.ingestion.drop_excel.main " > Data Source (.xlsx)</ div >
34+ < div id ="lblExcel " class ="text-xs text-gray-500 " data-i18n =" dashboard.ingestion.drop_excel.sub " > Required</ div >
3335 </ div >
3436 </ div >
3537 </ label >
@@ -38,8 +40,8 @@ <h2 class="text-sm font-bold text-blue-400 uppercase tracking-wider">1. Ingestio
3840 < div class ="flex items-center gap-3 ">
3941 < div class ="p-2 bg-blue-500/20 text-blue-400 rounded-lg "> 📄</ div >
4042 < div class ="flex-1 ">
41- < div class ="text-sm font-medium text-gray-200 "> Templates</ div >
42- < div id ="lblTemplates " class ="text-xs text-gray-500 "> Word or PowerPoint</ div >
43+ < div class ="text-sm font-medium text-gray-200 " data-i18n =" dashboard.ingestion.drop_templates.main " > Templates</ div >
44+ < div id ="lblTemplates " class ="text-xs text-gray-500 " data-i18n =" dashboard.ingestion.drop_templates.sub " > Word or PowerPoint</ div >
4345 </ div >
4446 </ div >
4547 </ label >
@@ -48,38 +50,38 @@ <h2 class="text-sm font-bold text-blue-400 uppercase tracking-wider">1. Ingestio
4850 < div class ="flex items-center gap-3 ">
4951 < div class ="p-2 bg-purple-500/20 text-purple-400 rounded-lg "> 📦</ div >
5052 < div class ="flex-1 ">
51- < div class ="text-sm font-medium text-gray-200 "> Assets Library</ div >
52- < div id ="lblAssets " class ="text-xs text-gray-500 "> Optional (.zip)</ div >
53+ < div class ="text-sm font-medium text-gray-200 " data-i18n =" dashboard.ingestion.drop_assets.main " > Assets Library</ div >
54+ < div id ="lblAssets " class ="text-xs text-gray-500 " data-i18n =" dashboard.ingestion.drop_assets.sub " > Optional (.zip)</ div >
5355 </ div >
5456 </ div >
5557 </ label >
5658 </ div >
5759 < div class ="mt-6 ">
5860 < button onclick ="performAnalysisSequence() " id ="btnValidate " class ="w-full py-3 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-xl text-xs font-bold uppercase tracking-widest transition hover:text-white text-gray-400 shadow-lg group ">
59- < span class ="group-hover:text-purple-400 transition "> Check Compatibility</ span >
61+ < span class ="group-hover:text-purple-400 transition " data-i18n =" dashboard.ingestion.btn_validate " > Check Compatibility</ span >
6062 </ button >
6163 </ div >
6264 </ div >
6365 < div id ="configPanel " class ="glass-panel rounded-2xl p-6 shadow-2xl opacity-50 pointer-events-none transition-all duration-500 ">
64- < h2 class ="text-sm font-bold text-blue-400 uppercase tracking-wider mb-4 "> 2. Configuration</ h2 >
66+ < h2 class ="text-sm font-bold text-blue-400 uppercase tracking-wider mb-4 " data-i18n =" dashboard.config.title " > 2. Configuration</ h2 >
6567 < div class ="space-y-4 ">
6668 < div >
67- < label class ="block text-[10px] font-mono text-gray-400 mb-1 "> FILENAME IDENTIFIER</ label >
69+ < label class ="block text-[10px] font-mono text-gray-400 mb-1 " data-i18n =" dashboard.config.lbl_filename " > FILENAME IDENTIFIER</ label >
6870 < select id ="colSelect " class ="w-full bg-black/40 border border-gray-600 rounded-lg p-3 text-sm text-white focus:border-blue-500 outline-none transition appearance-none cursor-pointer hover:bg-black/60 ">
69- < option > Awaiting Excel file...</ option >
71+ < option data-i18n =" dashboard.config.placeholder_excel " > Awaiting Excel file...</ option >
7072 </ select >
7173 </ div >
7274 < div class ="flex items-center justify-between bg-black/20 p-3 rounded-lg border border-white/5 ">
73- < span class ="text-sm "> Convert Output to PDF</ span >
75+ < span class ="text-sm " data-i18n =" dashboard.config.lbl_pdf " > Convert Output to PDF</ span >
7476 < label class ="relative inline-flex items-center cursor-pointer ">
7577 < input type ="checkbox " id ="checkPDF " class ="sr-only peer ">
7678 < div class ="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 "> </ div >
7779 </ label >
7880 </ div >
7981 < div class ="flex items-center justify-between bg-black/20 p-3 rounded-lg border border-white/5 ">
8082 < div class ="flex flex-col ">
81- < span class ="text-sm "> Group Files in Folders</ span >
82- < span class ="text-[10px] text-gray-500 "> Create folder for each row?</ span >
83+ < span class ="text-sm " data-i18n =" dashboard.config.lbl_folders " > Group Files in Folders</ span >
84+ < span class ="text-[10px] text-gray-500 " data-i18n =" dashboard.config.lbl_folders_sub " > Create folder for each row?</ span >
8385 </ div >
8486 < label class ="relative inline-flex items-center cursor-pointer ">
8587 < input type ="checkbox " id ="checkFolders " class ="sr-only peer " checked >
@@ -88,40 +90,40 @@ <h2 class="text-sm font-bold text-blue-400 uppercase tracking-wider mb-4">2. Con
8890 </ div >
8991 < div id ="actionPanel " class ="grid grid-cols-2 gap-4 mt-6 ">
9092 < button onclick ="generateSample() " id ="btnSample " class ="py-4 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-xl font-bold text-white transition flex items-center justify-center gap-2 group ">
91- < span class ="text-lg group-hover:scale-110 transition "> 🧪 Test (First Row)</ span >
93+ < span class ="text-lg group-hover:scale-110 transition " data-i18n =" dashboard.config.btn_sample " > 🧪 Test (First Row)</ span >
9294 </ button >
9395 < button onclick ="startProcessing() " id ="btnProcess " class ="py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 rounded-xl font-bold text-white shadow-lg shadow-blue-900/40 transform hover:scale-[1.02] transition-all flex items-center justify-center gap-2 ">
94- < span class ="text-lg group-hover:scale-110 transition "> 🚀 Start Processing</ span >
96+ < span class ="text-lg group-hover:scale-110 transition " data-i18n =" dashboard.config.btn_process " > 🚀 Start Processing</ span >
9597 </ button >
9698 </ div >
9799 < div id ="resultPanel " class ="hidden mt-6 animate-in fade-in zoom-in duration-300 ">
98100 < div class ="bg-black/40 border border-green-500/30 rounded-xl p-5 flex flex-col items-center text-center gap-5 relative overflow-hidden ">
99101 < div >
100102 < div class ="text-green-400 font-bold text-lg flex items-center justify-center gap-2 ">
101- < span class ="bg-green-500/20 p-1 rounded-full "> ✔</ span > Batch Complete
103+ < span class ="bg-green-500/20 p-1 rounded-full "> ✔</ span > < span data-i18n =" dashboard.result.title " > Batch Complete</ span >
102104 </ div >
103- < p class ="text-[10px] text-gray-400 mt-1 uppercase tracking-widest "> Processing finished successfully</ p >
105+ < p class ="text-[10px] text-gray-400 mt-1 uppercase tracking-widest " data-i18n =" dashboard.result.subtitle " > Processing finished successfully</ p >
104106 </ div >
105107 < a id ="mainDownloadBtn " href ="# " class ="group relative w-full py-4 bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-500 hover:to-green-500 text-white rounded-xl font-bold shadow-lg shadow-green-900/40 transition-all transform hover:scale-[1.02] flex items-center justify-center gap-3 overflow-hidden ">
106108 < div class ="absolute inset-0 -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent z-10 "> </ div >
107109 < span class ="text-2xl "> 📥</ span >
108110 < div class ="flex flex-col items-start leading-none ">
109- < span class ="text-xs font-normal opacity-80 "> CLICK TO SAVE</ span >
110- < span class ="text-sm tracking-wide "> DOWNLOAD ZIP ARCHIVE</ span >
111+ < span class ="text-xs font-normal opacity-80 " data-i18n =" dashboard.result.click_save " > CLICK TO SAVE</ span >
112+ < span class ="text-sm tracking-wide " data-i18n =" dashboard.result.download_zip " > DOWNLOAD ZIP ARCHIVE</ span >
111113 </ div >
112114 </ a >
113115 < div class ="w-full grid grid-cols-2 gap-3 pt-4 border-t border-white/10 ">
114116 < button onclick ="resetStateOnInput('reset') " class ="group py-3 px-4 bg-white/5 hover:bg-blue-500/10 border border-white/10 hover:border-blue-500/50 rounded-xl text-xs font-semibold text-gray-400 hover:text-blue-400 transition-all flex items-center justify-center gap-2 ">
115117 < svg xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " class ="w-4 h-4 transition-transform group-hover:rotate-90 ">
116118 < path stroke-linecap ="round " stroke-linejoin ="round " d ="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75 " />
117119 </ svg >
118- < span > Modify Settings</ span >
120+ < span data-i18n =" dashboard.result.btn_modify " > Modify Settings</ span >
119121 </ button >
120122 < button onclick ="performFullReset() " class ="group py-3 px-4 bg-white/5 hover:bg-red-500/10 border border-white/10 hover:border-red-500/50 rounded-xl text-xs font-semibold text-gray-400 hover:text-red-400 transition-all flex items-center justify-center gap-2 ">
121123 < svg xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " class ="w-4 h-4 transition-transform group-hover:scale-110 ">
122124 < path stroke-linecap ="round " stroke-linejoin ="round " d ="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0 " />
123125 </ svg >
124- < span > Start Fresh</ span >
126+ < span data-i18n =" dashboard.result.btn_reset " > Start Fresh</ span >
125127 </ button >
126128 </ div >
127129 </ div >
@@ -132,27 +134,27 @@ <h2 class="text-sm font-bold text-blue-400 uppercase tracking-wider mb-4">2. Con
132134 < div class ="lg:col-span-7 flex flex-col gap-6 ">
133135 < div class ="glass-panel rounded-2xl p-1 flex-1 min-h-[200px] flex flex-col ">
134136 < div class ="bg-black/40 px-4 py-2 rounded-t-xl border-b border-white/5 flex justify-between items-center ">
135- < span class ="text-xs font-mono text-gray-400 "> DATA_SOURCE_PREVIEW.JSON</ span >
136- < span class ="text-[10px] bg-gray-800 px-2 py-0.5 rounded text-gray-300 "> READ-ONLY</ span >
137+ < span class ="text-xs font-mono text-gray-400 " data-i18n =" dashboard.preview.title " > DATA_SOURCE_PREVIEW.JSON</ span >
138+ < span class ="text-[10px] bg-gray-800 px-2 py-0.5 rounded text-gray-300 " data-i18n =" dashboard.preview.badge " > READ-ONLY</ span >
137139 </ div >
138140 < div class ="relative flex-1 bg-black/20 overflow-hidden rounded-b-xl ">
139- < pre id ="jsonPreview " class ="absolute inset-0 p-4 text-xs font-mono text-green-400 overflow-auto scrollbar-thin select-text "> Awaiting Excel file...</ pre >
141+ < pre id ="jsonPreview " class ="absolute inset-0 p-4 text-xs font-mono text-green-400 overflow-auto scrollbar-thin select-text " data-i18n =" dashboard.preview.waiting " > Awaiting Excel file...</ pre >
140142 </ div >
141143 </ div >
142144 < div class ="glass-panel rounded-2xl p-1 h-[400px] flex flex-col relative overflow-hidden shadow-2xl ">
143145 < div class ="bg-black/80 px-4 py-2 rounded-t-xl border-b border-white/10 flex justify-between items-center z-10 ">
144146 < span class ="text-xs font-mono text-blue-400 flex items-center gap-2 ">
145147 < svg class ="w-3 h-3 " fill ="none " stroke ="currentColor " viewBox ="0 0 24 24 ">
146148 < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z "> </ path >
147- </ svg > EXECUTION_LOGS </ span >
149+ </ svg > < span data-i18n =" dashboard.logs.title " > EXECUTION_LOGS</ span > </ span >
148150 < div class ="flex gap-1.5 ">
149151 < div class ="w-2.5 h-2.5 rounded-full bg-red-500/50 "> </ div >
150152 < div class ="w-2.5 h-2.5 rounded-full bg-yellow-500/50 "> </ div >
151153 < div class ="w-2.5 h-2.5 rounded-full bg-green-500 "> </ div >
152154 </ div >
153155 </ div >
154156 < div id ="terminal " class ="flex-1 bg-black/90 p-4 font-mono text-xs text-gray-300 overflow-y-auto z-10 scrollbar-thin select-text ">
155- < div class ="text-gray-600 italic "> System ready. Waiting for command...</ div >
157+ < div class ="text-gray-600 italic " data-i18n =" dashboard.logs.ready " > System ready. Waiting for command...</ div >
156158 </ div >
157159 </ div >
158160 </ div >
0 commit comments