{"id":54,"date":"2026-07-08T16:07:34","date_gmt":"2026-07-08T12:37:34","guid":{"rendered":"http:\/\/localhost\/wordpress_imageconverter\/?page_id=54"},"modified":"2026-07-08T17:26:17","modified_gmt":"2026-07-08T13:56:17","slug":"main","status":"publish","type":"page","link":"https:\/\/imageconverter.ir\/","title":{"rendered":"main"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\n \n \n \ud83c\udfa8 Image Converter Pro <\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');\n\n :root {\n --bg: #1a1a2e;\n --surface: #16213e;\n --surface2: #0f3460;\n --primary: #e94560;\n --primary2: #533483;\n --accent: #00b4d8;\n --success: #06d6a0;\n --warning: #ffd166;\n --danger: #ef476f;\n --text: #e0e0e0;\n --text2: #a0a0b0;\n --border: #2a2a4a;\n --shadow: 0 8px 32px rgba(0,0,0,0.3);\n --radius: 16px;\n --radius-sm: 10px;\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .light-mode {\n --bg: #f0f2f5;\n --surface: #ffffff;\n --surface2: #f8f9fa;\n --primary: #e94560;\n --primary2: #7c3aed;\n --accent: #0891b2;\n --success: #059669;\n --warning: #d97706;\n --danger: #dc2626;\n --text: #1e293b;\n --text2: #64748b;\n --border: #e2e8f0;\n --shadow: 0 8px 32px rgba(0,0,0,0.08);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Vazirmatn', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n min-height: -webkit-fill-available;\n transition: var(--transition);\n overflow-x: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .app-container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 12px;\n }\n\n \/* \u0647\u062f\u0631 \u062c\u062f\u06cc\u062f *\/\n .header {\n background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(83, 52, 131, 0.15));\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 24px;\n padding: 24px 20px;\n margin-bottom: 20px;\n position: relative;\n overflow: hidden;\n box-shadow: \n 0 8px 32px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n }\n\n .header::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);\n animation: rotate 20s linear infinite;\n }\n\n @keyframes rotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n .header-content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n position: relative;\n z-index: 1;\n flex-wrap: wrap;\n }\n\n .logo-wrapper {\n display: flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--primary), var(--primary2));\n padding: 14px 24px;\n border-radius: 20px;\n box-shadow: \n 0 8px 32px rgba(233, 69, 96, 0.4),\n 0 0 0 4px rgba(233, 69, 96, 0.1);\n animation: float 3s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-8px); }\n }\n\n .logo-icon {\n font-size: 2.4rem;\n filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n .logo-text-wrapper {\n display: flex;\n flex-direction: column;\n }\n\n .logo-title {\n color: white;\n font-size: 1.5rem;\n font-weight: 900;\n letter-spacing: -0.5px;\n line-height: 1.2;\n text-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n .logo-subtitle {\n color: rgba(255, 255, 255, 0.85);\n font-size: 0.7rem;\n font-weight: 500;\n letter-spacing: 0.5px;\n }\n\n .header-features {\n display: flex;\n gap: 16px;\n margin-top: 16px;\n justify-content: center;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n }\n\n .feature-badge {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--surface);\n border: 2px solid var(--border);\n padding: 8px 14px;\n border-radius: 30px;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--text);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n background: rgba(22, 33, 62, 0.7);\n transition: all 0.3s ease;\n }\n\n .feature-badge:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n border-color: var(--primary);\n }\n\n .light-mode .header {\n background: linear-gradient(135deg, rgba(233, 69, 96, 0.08), rgba(124, 58, 237, 0.08));\n border: 2px solid rgba(0, 0, 0, 0.05);\n }\n\n .light-mode .feature-badge {\n background: rgba(255, 255, 255, 0.8);\n border-color: rgba(0, 0, 0, 0.1);\n }\n\n .theme-toggle {\n position: fixed; top: 200px; left: 40px; z-index: 100;\n background: var(--surface); border: 2px solid var(--border);\n border-radius: 50%; width: 44px; height: 44px; cursor: pointer;\n font-size: 1.2rem; display: flex; align-items: center; justify-content: center;\n box-shadow: var(--shadow); transition: var(--transition);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n }\n\n .theme-toggle:hover { transform: rotate(30deg) scale(1.1); box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3); }\n\n .mode-tabs { display: flex; gap: 8px; justify-content: center; margin: 8px 0 14px; flex-wrap: wrap; }\n\n .mode-tab {\n padding: 10px 14px; border-radius: 25px; border: 2px solid var(--border);\n background: var(--surface); color: var(--text); font-family: 'Vazirmatn', sans-serif;\n font-weight: 700; font-size: 0.75rem; cursor: pointer; transition: var(--transition);\n white-space: nowrap; flex: 1 1 auto; min-width: 140px; text-align: center;\n }\n\n .mode-tab.active { background: linear-gradient(135deg, var(--primary), #c0392b); color: white; border-color: transparent; box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3); }\n .mode-tab.size-active { background: linear-gradient(135deg, var(--accent), #0077b6); box-shadow: 0 6px 20px rgba(0, 180, 216, 0.3); }\n\n .card { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 12px; transition: var(--transition); }\n\n .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--border); font-weight: 800; font-size: 0.95rem; }\n .card-header .icon { font-size: 1.3rem; }\n\n .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px 14px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--surface2); position: relative; overflow: hidden; }\n .drop-zone:hover, .drop-zone.drag-over { border-color: var(--primary); background: rgba(233, 69, 96, 0.05); transform: scale(1.01); }\n .drop-zone-icon { font-size: 3rem; display: block; margin-bottom: 8px; }\n .drop-zone-text { font-size: 0.9rem; font-weight: 700; color: var(--text); }\n .drop-zone-hint { font-size: 0.7rem; color: var(--text2); margin-top: 4px; }\n #fileInput { display: none; }\n\n .file-list { max-height: 180px; overflow-y: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }\n\n .file-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--surface2); border-radius: var(--radius-sm); margin-bottom: 5px; font-size: 0.75rem; transition: var(--transition); flex-wrap: wrap; }\n\n .file-item .remove-btn { margin-right: auto; background: var(--danger); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 0.75rem; transition: var(--transition); flex-shrink: 0; }\n .file-item .remove-btn:hover { transform: scale(1.2); }\n\n .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n .setting-group { display: flex; flex-direction: column; gap: 4px; }\n .setting-group.full-width { grid-column: 1 \/ -1; }\n .setting-label { font-size: 0.7rem; font-weight: 700; color: var(--text2); }\n\n select, input[type=\"number\"], input[type=\"text\"] { padding: 8px 10px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Vazirmatn', sans-serif; font-size: 0.8rem; transition: var(--transition); width: 100%; }\n\n select { background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0b0' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: left 10px center; padding-left: 28px; }\n select:focus, input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1); }\n\n .range-container { display: flex; align-items: center; gap: 6px; }\n input[type=\"range\"] { flex: 1; height: 6px; border-radius: 3px; background: var(--border); outline: none; }\n input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }\n\n .preview-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n .preview-card { text-align: center; background: var(--surface2); border-radius: var(--radius); padding: 10px; }\n .preview-card img { max-width: 100%; max-height: 200px; border-radius: var(--radius-sm); object-fit: contain; }\n .preview-label { font-weight: 700; margin-bottom: 6px; color: var(--text2); font-size: 0.75rem; }\n .preview-size { font-size: 0.7rem; color: var(--accent); margin-top: 4px; }\n .size-reduced { color: var(--success) !important; font-weight: 700; }\n\n .btn { padding: 10px 16px; border-radius: 25px; border: none; font-family: 'Vazirmatn', sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; -webkit-tap-highlight-color: transparent; }\n .btn:active { transform: scale(0.95); }\n .btn-primary { background: linear-gradient(135deg, var(--primary), #c0392b); color: white; box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3); }\n .btn-primary:hover { box-shadow: 0 10px 30px rgba(233, 69, 96, 0.4); transform: translateY(-2px); }\n .btn-success { background: linear-gradient(135deg, var(--success), #059669); color: white; box-shadow: 0 6px 20px rgba(6, 214, 160, 0.3); }\n .btn-outline { background: transparent; border: 2px solid var(--border); color: var(--text); }\n .btn-sm { padding: 6px 12px; font-size: 0.7rem; border-radius: 15px; }\n .btn-block { width: 100%; justify-content: center; }\n .btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n .progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 8px 0; }\n .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 3px; transition: width 0.3s; width: 0%; }\n\n .toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--text); padding: 10px 18px; border-radius: 25px; box-shadow: var(--shadow); z-index: 1000; font-weight: 700; font-size: 0.8rem; animation: slideDown 0.4s ease; border: 2px solid var(--border); max-width: 90vw; text-align: center; }\n @keyframes slideDown { from { transform: translateX(-50%) translateY(-100px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }\n\n .btn-group { display: flex; gap: 8px; flex-wrap: wrap; }\n .btn-group .btn { flex: 1 1 auto; min-width: 100px; justify-content: center; }\n\n .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }\n .stat-card { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px; text-align: center; }\n .stat-value { font-size: 1.3rem; font-weight: 900; color: var(--primary); }\n .stat-label { font-size: 0.65rem; color: var(--text2); margin-top: 2px; }\n\n \/* Modal for download *\/\n .modal-overlay {\n position: fixed; top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(0,0,0,0.7); z-index: 999;\n display: flex; align-items: center; justify-content: center;\n animation: fadeIn 0.2s ease;\n }\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n .modal {\n background: var(--surface); border-radius: var(--radius);\n padding: 20px; max-width: 400px; width: 90%;\n box-shadow: var(--shadow); border: 2px solid var(--border);\n text-align: center;\n }\n .modal h3 { margin-bottom: 15px; color: var(--text); }\n .modal .preview-img {\n max-width: 100%; max-height: 200px; border-radius: var(--radius-sm);\n margin: 10px 0; border: 2px solid var(--border);\n }\n .modal-actions { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }\n .modal-actions .btn { flex: 1; min-width: 100px; justify-content: center; }\n\n \/* History *\/\n .history-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: var(--surface2);\n border-radius: var(--radius-sm);\n margin-bottom: 6px;\n font-size: 0.75rem;\n flex-wrap: wrap;\n transition: var(--transition);\n }\n .history-item:hover { background: var(--surface); }\n .history-thumb {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n object-fit: cover;\n background: var(--border);\n flex-shrink: 0;\n }\n .history-info { flex: 1; min-width: 120px; }\n .history-name { font-weight: 700; font-size: 0.8rem; }\n .history-details { font-size: 0.65rem; color: var(--text2); margin-top: 2px; }\n .history-actions { display: flex; gap: 4px; flex-shrink: 0; }\n\n .empty-history {\n text-align: center;\n padding: 30px 20px;\n color: var(--text2);\n }\n .empty-history .icon { font-size: 3rem; display: block; margin-bottom: 8px; opacity: 0.5; }\n\n @media (max-width: 480px) {\n .app-container { padding: 8px; }\n .header { padding: 20px 14px; }\n .logo-wrapper { padding: 12px 18px; gap: 8px; }\n .logo-icon { font-size: 2rem; }\n .logo-title { font-size: 1.2rem; }\n .header-features { gap: 10px; }\n .feature-badge { font-size: 0.7rem; padding: 6px 10px; }\n .card { padding: 12px; border-radius: 14px; }\n .settings-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .preview-container { grid-template-columns: 1fr; gap: 8px; }\n .preview-card img { max-height: 150px; }\n .btn { padding: 12px 14px; font-size: 0.8rem; }\n .mode-tab { font-size: 0.7rem; padding: 10px 10px; }\n .file-item { font-size: 0.7rem; padding: 6px 8px; }\n .drop-zone { padding: 20px 10px; }\n .drop-zone-icon { font-size: 2.5rem; }\n .stat-value { font-size: 1.1rem; }\n }\n\n @media (min-width: 481px) and (max-width: 768px) {\n .app-container { padding: 14px; }\n .settings-grid { grid-template-columns: 1fr 1fr 1fr; }\n .preview-container { grid-template-columns: 1fr 1fr; }\n }\n\n @media (min-width: 769px) {\n .app-container { padding: 20px; }\n .settings-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }\n .stats-grid { grid-template-columns: repeat(4, 1fr); }\n .btn { padding: 12px 24px; font-size: 0.95rem; }\n }\n <\/style>\n<\/head>\n<body>\n <button class=\"theme-toggle\" onclick=\"toggleTheme()\" title=\"\u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645\">\ud83c\udf13<\/button>\n\n <div class=\"app-container\">\n <div class=\"header\">\n <div class=\"header-content\">\n <div class=\"logo-wrapper\">\n <span class=\"logo-icon\">\ud83c\udfa8<\/span>\n <div class=\"logo-text-wrapper\">\n <div class=\"logo-title\">Image Converter Pro<\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"header-features\">\n <div class=\"feature-badge\">\n <span>\ud83d\uddbc\ufe0f<\/span> \u062a\u0628\u062f\u06cc\u0644 \u0641\u0631\u0645\u062a\n <\/div>\n <div class=\"feature-badge\">\n <span>\ud83d\udcbe<\/span> \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0647\u0648\u0634\u0645\u0646\u062f\n <\/div>\n <div class=\"feature-badge\">\n <span>\ud83d\udcd0<\/span> \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mode-tabs\">\n <button class=\"mode-tab active\" onclick=\"setMode('quality')\">\ud83c\udf9a\ufe0f \u062a\u0628\u062f\u06cc\u0644 \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u062f\u0644\u062e\u0648\u0627\u0647<\/button>\n <button class=\"mode-tab\" id=\"sizeModeBtn\" onclick=\"setMode('size')\">\ud83d\udcbe \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0647\u062f\u0641<\/button>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"icon\">\ud83d\udcc2<\/span> \u0627\u0646\u062a\u062e\u0627\u0628 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627<\/div>\n <div class=\"drop-zone\" id=\"dropZone\" onclick=\"document.getElementById('fileInput').click()\">\n <span class=\"drop-zone-icon\">\ud83d\udcc1<\/span>\n <div class=\"drop-zone-text\">\u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0631\u0647\u0627 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/div>\n <div class=\"drop-zone-hint\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632: PNG, JPEG, WebP, BMP, GIF, SVG, ICO, TIFF<\/div>\n <\/div>\n <input type=\"file\" id=\"fileInput\" multiple accept=\"image\/*\" onchange=\"handleFiles(this.files)\">\n <div class=\"file-list\" id=\"fileList\"><\/div>\n <div id=\"fileCount\" style=\"text-align:center; margin-top:8px; color:var(--text2); font-weight:700;\">\u06f0 \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647<\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"icon\">\u2699\ufe0f<\/span> \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062a\u0628\u062f\u06cc\u0644<\/div>\n <div class=\"settings-grid\">\n <div class=\"setting-group\"><label class=\"setting-label\">\ud83c\udfaf \u0641\u0631\u0645\u062a \u062e\u0631\u0648\u062c\u06cc<\/label><select id=\"targetFormat\" onchange=\"onFormatChange()\"><option value=\"JPEG\">\ud83d\udcf8 JPEG<\/option><option value=\"PNG\">\ud83d\uddbc\ufe0f PNG<\/option><option value=\"WebP\">\ud83c\udf10 WebP<\/option><option value=\"BMP\">\ud83d\udd8c\ufe0f BMP<\/option><option value=\"ICO\">\ud83d\udd37 ICO<\/option><\/select><\/div>\n <div class=\"setting-group\"><label class=\"setting-label\">\ud83d\udcd0 \u0639\u0631\u0636 (px)<\/label><input type=\"number\" id=\"targetWidth\" placeholder=\"auto\"><\/div>\n <div class=\"setting-group\"><label class=\"setting-label\">\ud83d\udcd0 \u0627\u0631\u062a\u0641\u0627\u0639 (px)<\/label><input type=\"number\" id=\"targetHeight\" placeholder=\"auto\"><\/div>\n <div class=\"setting-group\" style=\"justify-content:flex-end;\"><label style=\"display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;font-size:0.75rem;\"><input type=\"checkbox\" id=\"keepAspect\" checked style=\"width:18px;height:18px;cursor:pointer;\"> \u062d\u0641\u0638 \u0646\u0633\u0628\u062a<\/label><\/div>\n <div class=\"setting-group full-width\" id=\"qualityGroup\"><label class=\"setting-label\">\ud83c\udf9a\ufe0f \u06a9\u06cc\u0641\u06cc\u062a: <span id=\"qualityValue\">80%<\/span><\/label><div class=\"range-container\"><span style=\"font-size:0.7rem;\">1%<\/span><input type=\"range\" id=\"qualitySlider\" min=\"1\" max=\"100\" value=\"80\" oninput=\"updateQuality(this.value)\"><span style=\"font-size:0.7rem;\">100%<\/span><\/div><\/div>\n <div class=\"setting-group full-width\" id=\"sizeGroup\" style=\"display:none;\"><label class=\"setting-label\">\ud83d\udcbe \u062d\u062c\u0645 \u0647\u062f\u0641 (\u06a9\u06cc\u0644\u0648\u0628\u0627\u06cc\u062a)<\/label><input type=\"number\" id=\"targetSize\" value=\"200\" min=\"1\"><\/div>\n <div class=\"setting-group\" id=\"iconGroup\" style=\"display:none;\"><label class=\"setting-label\">\ud83d\udd37 \u0633\u0627\u06cc\u0632 \u0622\u06cc\u06a9\u0648\u0646<\/label><select id=\"iconSize\"><option value=\"16\">16\u00d716<\/option><option value=\"24\">24\u00d724<\/option><option value=\"32\">32\u00d732<\/option><option value=\"48\">48\u00d748<\/option><option value=\"64\">64\u00d764<\/option><option value=\"96\">96\u00d796<\/option><option value=\"128\">128\u00d7128<\/option><option value=\"256\" selected>256\u00d7256<\/option><\/select><\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\" id=\"previewCard\" style=\"display:none;\">\n <div class=\"card-header\"><span class=\"icon\">\ud83d\udd0d<\/span> \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634<\/div>\n <div class=\"preview-container\">\n <div class=\"preview-card\"><div class=\"preview-label\">\ud83d\udce5 \u0642\u0628\u0644 \u0627\u0632 \u062a\u0628\u062f\u06cc\u0644<\/div><img id=\"previewBefore\" alt=\"\u0642\u0628\u0644\"><div class=\"preview-size\" id=\"previewBeforeSize\"><\/div><\/div>\n <div class=\"preview-card\"><div class=\"preview-label\">\ud83d\udce4 \u0628\u0639\u062f \u0627\u0632 \u062a\u0628\u062f\u06cc\u0644<\/div><img id=\"previewAfter\" alt=\"\u0628\u0639\u062f\"><div class=\"preview-size size-reduced\" id=\"previewAfterSize\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"btn-group\" style=\"margin-bottom:12px;\">\n <button class=\"btn btn-primary btn-block\" id=\"convertBtn\" onclick=\"convertAll()\" disabled>\ud83d\ude80 \u0634\u0631\u0648\u0639 \u062a\u0628\u062f\u06cc\u0644<\/button>\n <button class=\"btn btn-success\" id=\"downloadAllBtn\" onclick=\"downloadAll()\" style=\"display:none;\">\ud83d\udce5 \u062f\u0627\u0646\u0644\u0648\u062f \u0647\u0645\u0647<\/button>\n <button class=\"btn btn-outline\" onclick=\"clearAll()\">\ud83d\uddd1\ufe0f \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646<\/button>\n <\/div>\n\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n <div id=\"progressText\" style=\"text-align:center; color:var(--text2); font-size:0.75rem;\"><\/div>\n\n <div class=\"stats-grid\" id=\"statsGrid\" style=\"display:none;\">\n <div class=\"stat-card\"><div class=\"stat-value\" id=\"statTotal\">0<\/div><div class=\"stat-label\">\u0641\u0627\u06cc\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647<\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-value\" id=\"statBefore\">0 KB<\/div><div class=\"stat-label\">\u062d\u062c\u0645 \u0642\u0628\u0644<\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-value\" id=\"statAfter\">0 KB<\/div><div class=\"stat-label\">\u062d\u062c\u0645 \u0628\u0639\u062f<\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-value\" id=\"statReduction\" style=\"color:var(--success);\">0%<\/div><div class=\"stat-label\">\u06a9\u0627\u0647\u0634 \u062d\u062c\u0645<\/div><\/div>\n <\/div>\n\n <!-- \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 -->\n <div class=\"card\" id=\"historyCard\">\n <div class=\"card-header\" style=\"justify-content:space-between; flex-wrap:wrap; gap:8px;\">\n <div style=\"display:flex;align-items:center;gap:8px;\">\n <span class=\"icon\">\ud83d\udccb<\/span> \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u062a\u0628\u062f\u06cc\u0644\u200c\u0647\u0627\n <\/div>\n <button class=\"btn btn-outline btn-sm\" onclick=\"clearHistory()\" id=\"clearHistoryBtn\" style=\"display:none;\">\ud83d\uddd1\ufe0f \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u0647\u0645\u0647<\/button>\n <\/div>\n <div class=\"file-list\" id=\"historyList\" style=\"max-height:300px;\">\n <div class=\"empty-history\"><span class=\"icon\">\ud83d\udced<\/span>\u0647\u0646\u0648\u0632 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u062f\u0647<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Modal for download preview -->\n <div class=\"modal-overlay\" id=\"downloadModal\" style=\"display:none;\" onclick=\"closeDownloadModal(event)\">\n <div class=\"modal\" onclick=\"event.stopPropagation()\">\n <h3 id=\"modalTitle\">\ud83d\udce5 \u0630\u062e\u06cc\u0631\u0647 \u062a\u0635\u0648\u06cc\u0631<\/h3>\n <img id=\"modalImage\" class=\"preview-img\" alt=\"Preview\">\n <p id=\"modalInfo\" style=\"color:var(--text2); font-size:0.8rem; margin:8px 0;\"><\/p>\n <div class=\"modal-actions\">\n <button class=\"btn btn-success\" id=\"modalDownloadBtn\" onclick=\"modalDownload()\">\ud83d\udcbe \u0630\u062e\u06cc\u0631\u0647 \u062f\u0631 \u06af\u0627\u0644\u0631\u06cc<\/button>\n <button class=\"btn btn-outline\" id=\"modalShareBtn\" onclick=\"modalShare()\">\ud83d\udce4 \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc<\/button>\n <button class=\"btn btn-outline\" onclick=\"closeDownloadModal()\">\u274c \u0628\u0633\u062a\u0646<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"toastContainer\"><\/div>\n\n <script>\n \/\/ ========== State ==========\n let files = [];\n let convertedBlobs = [];\n let currentMode = 'quality';\n let isDark = true;\n let history = JSON.parse(localStorage.getItem('image-converter-history') || '[]');\n let pendingDownload = null; \/\/ For modal download\n\n \/\/ ========== Theme ==========\n function toggleTheme() {\n isDark = !isDark;\n document.body.classList.toggle('light-mode', !isDark);\n document.querySelector('.theme-toggle').textContent = isDark ? '\ud83c\udf19' : '\u2600\ufe0f';\n localStorage.setItem('image-converter-theme', isDark ? 'dark' : 'light');\n }\n if (localStorage.getItem('image-converter-theme') === 'light') { isDark = false; document.body.classList.add('light-mode'); document.querySelector('.theme-toggle').textContent = '\u2600\ufe0f'; }\n\n \/\/ ========== Download Modal ==========\n function showDownloadModal(dataURL, fileName, fileSize) {\n pendingDownload = { dataURL, fileName, fileSize };\n document.getElementById('modalImage').src = dataURL;\n document.getElementById('modalInfo').textContent = `${fileName} | \u062d\u062c\u0645: ${fileSize}`;\n document.getElementById('downloadModal').style.display = 'flex';\n }\n\n function closeDownloadModal(e) {\n if (e && e.target !== document.getElementById('downloadModal')) return;\n document.getElementById('downloadModal').style.display = 'none';\n pendingDownload = null;\n }\n\n function modalDownload() {\n if (!pendingDownload) return;\n const { dataURL, fileName } = pendingDownload;\n \n \/\/ \u0631\u0648\u0634 \u06f1: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0644\u06cc\u0646\u06a9 \u062f\u0627\u0646\u0644\u0648\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\n const link = document.createElement('a');\n link.href = dataURL;\n link.download = fileName;\n document.body.appendChild(link);\n \n \/\/ \u062a\u0644\u0627\u0634 \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u06a9 \u062e\u0648\u062f\u06a9\u0627\u0631\n try {\n link.click();\n setTimeout(() => document.body.removeChild(link), 100);\n showToast('\u2705 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0630\u062e\u06cc\u0631\u0647 \u0634\u062f');\n } catch (e) {\n document.body.removeChild(link);\n \/\/ \u0631\u0648\u0634 \u06f2: \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062f\u0631 \u062a\u0628 \u062c\u062f\u06cc\u062f (\u0628\u0631\u0627\u06cc WebView)\n try {\n const win = window.open(dataURL, '_blank');\n if (win) {\n win.document.write(`<img decoding=\"async\" src=\"${dataURL}\" style=\"max-width:100%;\"><br><p style=\"font-family:sans-serif;text-align:center;direction:rtl;\">\u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647\u060c \u0627\u0646\u06af\u0634\u062a \u062e\u0648\u062f \u0631\u0627 \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u0648 \"\u0630\u062e\u06cc\u0631\u0647 \u062a\u0635\u0648\u06cc\u0631\" \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>`);\n showToast('\ud83d\udc46 \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f');\n } else {\n throw new Error('Popup blocked');\n }\n } catch (e2) {\n showToast('\u26a0\ufe0f \u0644\u0637\u0641\u0627\u064b \u0627\u0632 \u0645\u0646\u0648\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u06af\u0632\u06cc\u0646\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f');\n }\n }\n \n closeDownloadModal();\n }\n\n async function modalShare() {\n if (!pendingDownload) return;\n const { dataURL, fileName } = pendingDownload;\n \n \/\/ \u062a\u0628\u062f\u06cc\u0644 dataURL \u0628\u0647 Blob\n const blob = dataURLToBlob(dataURL);\n const file = new File([blob], fileName, { type: blob.type });\n \n if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {\n try {\n await navigator.share({\n files: [file],\n title: fileName,\n });\n showToast('\ud83d\udce4 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0647 \u0634\u062f');\n closeDownloadModal();\n } catch (err) {\n if (err.name !== 'AbortError') {\n showToast('\u26a0\ufe0f \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u0646\u0627\u0645\u0648\u0641\u0642 \u0628\u0648\u062f');\n }\n }\n } else if (navigator.share) {\n try {\n await navigator.share({\n title: fileName,\n url: dataURL\n });\n closeDownloadModal();\n } catch (err) {\n if (err.name !== 'AbortError') {\n showToast('\u26a0\ufe0f \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u0646\u0627\u0645\u0648\u0641\u0642 \u0628\u0648\u062f. \u0627\u0632 \u062f\u06a9\u0645\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.');\n }\n }\n } else {\n showToast('\u26a0\ufe0f \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u0634\u0648\u062f');\n }\n }\n\n function dataURLToBlob(dataURL) {\n const parts = dataURL.split(',');\n const mime = parts[0].match(\/:(.*?);\/)[1];\n const bytes = atob(parts[1]);\n const array = new Uint8Array(bytes.length);\n for (let i = 0; i < bytes.length; i++) {\n array[i] = bytes.charCodeAt(i);\n }\n return new Blob([array], { type: mime });\n }\n\n \/\/ ========== History ==========\n function saveHistory() {\n localStorage.setItem('image-converter-history', JSON.stringify(history));\n }\n\n function addToHistory(fileName, originalSize, convertedSize, format, blob) {\n const reader = new FileReader();\n reader.onload = (e) => {\n history.unshift({\n id: Date.now(),\n name: fileName,\n originalSize: originalSize,\n convertedSize: convertedSize,\n format: format,\n dataURL: e.target.result,\n time: new Date().toLocaleString('fa-IR')\n });\n if (history.length > 50) history = history.slice(0, 50);\n saveHistory();\n renderHistory();\n };\n reader.readAsDataURL(blob);\n }\n\n function renderHistory() {\n const container = document.getElementById('historyList');\n const clearBtn = document.getElementById('clearHistoryBtn');\n \n if (history.length === 0) {\n container.innerHTML = '<div class=\"empty-history\"><span class=\"icon\">\ud83d\udced<\/span>\u0647\u0646\u0648\u0632 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u062f\u0647<\/div>';\n clearBtn.style.display = 'none';\n return;\n }\n \n clearBtn.style.display = 'inline-flex';\n container.innerHTML = history.map((item, index) => {\n const reduction = item.originalSize > 0 ? Math.round((1 - item.convertedSize \/ item.originalSize) * 100) : 0;\n return `\n <div class=\"history-item\">\n <img decoding=\"async\" class=\"history-thumb\" src=\"${item.dataURL}\" alt=\"${item.name}\" loading=\"lazy\">\n <div class=\"history-info\">\n <div class=\"history-name\">${item.name}<\/div>\n <div class=\"history-details\">\n ${formatSize(item.originalSize)} \u2192 ${formatSize(item.convertedSize)} \n (${reduction > 0 ? '\u2193' + reduction + '%' : '\u0628\u062f\u0648\u0646 \u062a\u063a\u06cc\u06cc\u0631'}) | \n ${item.format} | ${item.time}\n <\/div>\n <\/div>\n <div class=\"history-actions\">\n <button class=\"btn btn-sm btn-success\" onclick=\"downloadHistoryItem(${index})\" title=\"\u062f\u0627\u0646\u0644\u0648\u062f\">\ud83d\udce5<\/button>\n <button class=\"btn btn-sm btn-outline\" onclick=\"removeHistoryItem(${index})\" title=\"\u062d\u0630\u0641\">\ud83d\uddd1\ufe0f<\/button>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function removeHistoryItem(index) {\n history.splice(index, 1);\n saveHistory();\n renderHistory();\n showToast('\ud83d\uddd1\ufe0f \u0627\u0632 \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u062d\u0630\u0641 \u0634\u062f');\n }\n\n function clearHistory() {\n if (confirm('\u0622\u06cc\u0627 \u0627\u0632 \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06a9\u0644 \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u0637\u0645\u0626\u0646 \u0647\u0633\u062a\u06cc\u062f\u061f')) {\n history = [];\n saveHistory();\n renderHistory();\n showToast('\ud83d\uddd1\ufe0f \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u067e\u0627\u06a9 \u0634\u062f');\n }\n }\n\n function downloadHistoryItem(index) {\n const item = history[index];\n if (!item || !item.dataURL) return;\n \n const ext = { 'JPEG': '.jpg', 'PNG': '.png', 'WebP': '.webp', 'BMP': '.bmp', 'ICO': '.ico' }[item.format] || '.jpg';\n const baseName = item.name.replace(\/\\.[^\/.]+$\/, '');\n const fileName = baseName + '_converted' + ext;\n \n \/\/ Show modal instead of direct download\n showDownloadModal(item.dataURL, fileName, formatSize(item.convertedSize));\n }\n\n \/\/ ========== Mode ==========\n function setMode(mode) {\n currentMode = mode;\n document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active', 'size-active'));\n if (mode === 'quality') {\n document.querySelector('.mode-tab').classList.add('active');\n document.getElementById('qualityGroup').style.display = 'flex';\n document.getElementById('sizeGroup').style.display = 'none';\n document.getElementById('targetFormat').disabled = false;\n document.getElementById('iconGroup').style.display = 'none';\n } else {\n document.getElementById('sizeModeBtn').classList.add('active', 'size-active');\n document.getElementById('qualityGroup').style.display = 'none';\n document.getElementById('sizeGroup').style.display = 'flex';\n document.getElementById('targetFormat').disabled = true;\n document.getElementById('targetFormat').value = 'JPEG';\n document.getElementById('iconGroup').style.display = 'none';\n }\n onFormatChange();\n }\n\n function onFormatChange() {\n document.getElementById('iconGroup').style.display = (document.getElementById('targetFormat').value === 'ICO') ? 'flex' : 'none';\n }\n\n function updateQuality(val) { document.getElementById('qualityValue').textContent = val + '%'; }\n\n \/\/ ========== File Handling ==========\n const dropZone = document.getElementById('dropZone');\n dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });\n dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));\n dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); handleFiles(e.dataTransfer.files); });\n\n function handleFiles(fileList) {\n const imageFiles = Array.from(fileList).filter(f => f.type.startsWith('image\/'));\n files = [...files, ...imageFiles];\n renderFileList();\n updateConvertButton();\n if (files.length > 0) showPreview(files[0]);\n }\n\n function renderFileList() {\n document.getElementById('fileList').innerHTML = files.map((f, i) => `\n <div class=\"file-item\"><span>\ud83d\uddbc\ufe0f<\/span><span style=\"flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\">${f.name}<\/span><span style=\"color:var(--text2);font-size:0.65rem;\">${formatSize(f.size)}<\/span><button class=\"remove-btn\" onclick=\"removeFile(${i})\">\u00d7<\/button><\/div>\n `).join('');\n document.getElementById('fileCount').textContent = `${files.length} \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647`;\n }\n\n function removeFile(index) { files.splice(index, 1); convertedBlobs = []; renderFileList(); updateConvertButton(); }\n function clearAll() { files = []; convertedBlobs = []; renderFileList(); updateConvertButton(); document.getElementById('previewCard').style.display = 'none'; document.getElementById('statsGrid').style.display = 'none'; document.getElementById('downloadAllBtn').style.display = 'none'; updateProgress(0, ''); }\n function updateConvertButton() { document.getElementById('convertBtn').disabled = files.length === 0; }\n\n function showPreview(file) {\n const reader = new FileReader();\n reader.onload = (e) => { document.getElementById('previewCard').style.display = 'block'; document.getElementById('previewBefore').src = e.target.result; document.getElementById('previewBeforeSize').textContent = `\u062d\u062c\u0645: ${formatSize(file.size)}`; document.getElementById('previewAfter').src = ''; document.getElementById('previewAfterSize').textContent = ''; };\n reader.readAsDataURL(file);\n }\n\n \/\/ ========== Conversion ==========\n async function convertAll() {\n if (files.length === 0) return;\n const btn = document.getElementById('convertBtn');\n btn.disabled = true; btn.textContent = '\u23f3 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0628\u062f\u06cc\u0644...';\n convertedBlobs = [];\n let totalBefore = 0, totalAfter = 0;\n \n for (let i = 0; i < files.length; i++) {\n updateProgress(Math.round((i \/ files.length) * 100), `\u062f\u0631 \u062d\u0627\u0644 \u062a\u0628\u062f\u06cc\u0644 ${i + 1} \u0627\u0632 ${files.length}...`);\n try {\n const result = await convertImage(files[i]);\n convertedBlobs.push(result.blob);\n totalBefore += files[i].size;\n totalAfter += result.blob.size;\n if (i === 0) showConvertedPreview(files[i], result.blob);\n \n const format = document.getElementById('targetFormat').value;\n addToHistory(files[i].name, files[i].size, result.blob.size, format, result.blob);\n } catch (err) {\n showToast('\u26a0\ufe0f \u062e\u0637\u0627 \u062f\u0631 \u062a\u0628\u062f\u06cc\u0644 ' + files[i].name);\n }\n }\n \n updateProgress(100, '\u2705 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0627\u0645\u0644 \u0634\u062f!');\n btn.disabled = false; btn.textContent = '\ud83d\ude80 \u0634\u0631\u0648\u0639 \u062a\u0628\u062f\u06cc\u0644';\n document.getElementById('statsGrid').style.display = 'grid';\n document.getElementById('statTotal').textContent = convertedBlobs.length;\n document.getElementById('statBefore').textContent = formatSize(totalBefore);\n document.getElementById('statAfter').textContent = formatSize(totalAfter);\n document.getElementById('statReduction').textContent = (totalBefore > 0 ? Math.round((1 - totalAfter \/ totalBefore) * 100) : 0) + '%';\n if (convertedBlobs.length > 0) {\n document.getElementById('downloadAllBtn').style.display = 'inline-flex';\n showToast(`\u2705 ${convertedBlobs.length} \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f!`);\n }\n }\n\n async function convertImage(file) {\n const format = document.getElementById('targetFormat').value;\n const quality = parseInt(document.getElementById('qualitySlider').value) \/ 100;\n const targetWidth = document.getElementById('targetWidth').value ? parseInt(document.getElementById('targetWidth').value) : null;\n const targetHeight = document.getElementById('targetHeight').value ? parseInt(document.getElementById('targetHeight').value) : null;\n const keepAspect = document.getElementById('keepAspect').checked;\n const iconSize = format === 'ICO' ? parseInt(document.getElementById('iconSize').value) : null;\n const img = await loadImage(file);\n const canvas = document.createElement('canvas');\n let { width, height } = calculateSize(img.width, img.height, targetWidth, targetHeight, keepAspect, iconSize);\n canvas.width = width; canvas.height = height;\n const ctx = canvas.getContext('2d');\n if (format === 'JPEG') { ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, width, height); }\n ctx.drawImage(img, 0, 0, width, height);\n let mimeType = { 'PNG': 'image\/png', 'WebP': 'image\/webp', 'BMP': 'image\/bmp', 'ICO': 'image\/x-icon' }[format] || 'image\/jpeg';\n if (currentMode === 'size') return await compressToTarget(canvas, parseInt(document.getElementById('targetSize').value) * 1024);\n return { blob: await canvasToBlob(canvas, mimeType, quality), width, height };\n }\n\n async function compressToTarget(canvas, targetBytes) {\n let low = 0.01, high = 1.0, bestBlob = null, bestDiff = Infinity;\n for (let i = 0; i < 15; i++) {\n const mid = (low + high) \/ 2;\n const blob = await canvasToBlob(canvas, 'image\/jpeg', mid);\n if (Math.abs(blob.size - targetBytes) < bestDiff) { bestDiff = Math.abs(blob.size - targetBytes); bestBlob = blob; }\n blob.size > targetBytes ? high = mid : low = mid;\n }\n return { blob: bestBlob, width: canvas.width, height: canvas.height };\n }\n\n function loadImage(file) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = URL.createObjectURL(file); }); }\n function canvasToBlob(canvas, mimeType, quality) { return new Promise((resolve) => { canvas.toBlob(resolve, mimeType, quality); }); }\n\n function calculateSize(origW, origH, targetW, targetH, keepAspect, iconSize) {\n if (iconSize) return { width: iconSize, height: iconSize };\n if (!targetW && !targetH) return { width: origW, height: origH };\n if (keepAspect) {\n if (targetW && targetH) { const ratio = Math.min(targetW \/ origW, targetH \/ origH); return { width: Math.round(origW * ratio), height: Math.round(origH * ratio) }; }\n if (targetW) return { width: targetW, height: Math.round(origH * targetW \/ origW) };\n if (targetH) return { width: Math.round(origW * targetH \/ origH), height: targetH };\n }\n return { width: targetW || origW, height: targetH || origH };\n }\n\n function showConvertedPreview(originalFile, convertedBlob) {\n const reader = new FileReader();\n reader.onload = (e) => { document.getElementById('previewAfter').src = e.target.result; document.getElementById('previewAfterSize').textContent = `\u062d\u062c\u0645: ${formatSize(convertedBlob.size)} (${formatSize(originalFile.size)} \u2192 ${formatSize(convertedBlob.size)})`; };\n reader.readAsDataURL(convertedBlob);\n }\n\n function downloadAll() {\n if (convertedBlobs.length === 0) return;\n const format = document.getElementById('targetFormat').value;\n const ext = { 'JPEG': '.jpg', 'PNG': '.png', 'WebP': '.webp', 'BMP': '.bmp', 'ICO': '.ico' }[format] || '.jpg';\n \n \/\/ Download one by one with small delay\n let successCount = 0;\n convertedBlobs.forEach((blob, i) => {\n setTimeout(() => {\n const reader = new FileReader();\n reader.onload = (e) => {\n const fileName = (files[i]?.name || 'image').replace(\/\\.[^\/.]+$\/, '') + '_converted' + ext;\n const link = document.createElement('a');\n link.href = e.target.result;\n link.download = fileName;\n document.body.appendChild(link);\n try {\n link.click();\n successCount++;\n } catch (err) {\n \/\/ Fallback: open in new tab\n window.open(e.target.result, '_blank');\n }\n setTimeout(() => document.body.removeChild(link), 100);\n \n if (i === convertedBlobs.length - 1) {\n showToast(`\ud83d\udce5 ${successCount} \u0641\u0627\u06cc\u0644 \u0622\u0645\u0627\u062f\u0647 \u062f\u0627\u0646\u0644\u0648\u062f \u0634\u062f`);\n }\n };\n reader.readAsDataURL(blob);\n }, i * 300); \/\/ 300ms delay between downloads\n });\n }\n\n function formatSize(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes \/ 1024).toFixed(1) + ' KB'; return (bytes \/ (1024 * 1024)).toFixed(2) + ' MB'; }\n function updateProgress(percent, text) { document.getElementById('progressFill').style.width = percent + '%'; document.getElementById('progressText').textContent = text; }\n\n function showToast(msg) {\n const toast = document.createElement('div'); toast.className = 'toast'; toast.textContent = msg;\n document.getElementById('toastContainer').appendChild(toast);\n setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 400); }, 3000);\n }\n\n document.addEventListener('keydown', (e) => {\n if (e.ctrlKey && e.key === 'o') { e.preventDefault(); document.getElementById('fileInput').click(); }\n if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); convertAll(); }\n });\n\n \/\/ Initialize\n onFormatChange();\n renderHistory();\n <\/script>\n<\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfa8 Image Converter Pro \ud83c\udf13 \ud83c\udfa8 Image Converter Pro \ud83d\uddbc\ufe0f \u062a\u0628\u062f\u06cc\u0644 \u0641\u0631\u0645\u062a \ud83d\udcbe \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0647\u0648\u0634\u0645\u0646\u062f \ud83d\udcd0 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \ud83c\udf9a\ufe0f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/imageconverter.ir\/index.php?rest_route=\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imageconverter.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imageconverter.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imageconverter.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imageconverter.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=54"}],"version-history":[{"count":16,"href":"https:\/\/imageconverter.ir\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/imageconverter.ir\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/imageconverter.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}