Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>سامانه تعیین حدود اختیارات تعمیرات جزئی</title> | |
| <style> | |
| /* تنظیمات فونت */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| /* رنگهای اصلی */ | |
| --primary-color: #2563eb; | |
| --primary-dark: #1d4ed8; | |
| --primary-light: #dbeafe; | |
| --secondary-color: #0ea5e9; | |
| --secondary-dark: #0284c7; | |
| --secondary-light: #e0f7ff; | |
| --warning-color: #f59e0b; | |
| --warning-dark: #d97706; | |
| --warning-light: #fef3c7; | |
| --danger-color: #ef4444; | |
| --danger-dark: #dc2626; | |
| --danger-light: #fee2e2; | |
| --success-color: #10b981; | |
| --success-dark: #059669; | |
| --success-light: #ecfdf5; | |
| --light-bg: #f8fafc; | |
| --dark-text: #1e293b; | |
| --gray-text: #64748b; | |
| --border-color: #e2e8f0; | |
| --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| --transition-speed: 0.3s; | |
| --focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| /* رنگهای ویژه شعبه */ | |
| --branch: #10b981; | |
| --branch-light: #d1fae5; | |
| --branch-dark: #047857; | |
| --branch-gradient: linear-gradient(135deg, #10b981, #047857); | |
| /* رنگهای ویژه منطقه */ | |
| --regional: #f59e0b; | |
| --regional-light: #fef3c7; | |
| --regional-dark: #b45309; | |
| --regional-gradient: linear-gradient(135deg, #f59e0b, #b45309); | |
| /* رنگهای ویژه ستاد */ | |
| --central: #8b5cf6; | |
| --central-light: #ede9fe; | |
| --central-dark: #6d28d9; | |
| --central-gradient: linear-gradient(135deg, #8b5cf6, #6d28d9); | |
| } | |
| body { | |
| font-family: 'B Nazanin', Tahoma, Arial, sans-serif; | |
| line-height: 1.7; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f1f5f9; | |
| color: var(--dark-text); | |
| font-size: 14px; | |
| } | |
| .site-header { | |
| background: linear-gradient(to left, #1e40af, #0284c7); | |
| color: white; | |
| padding: 1rem 0; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | |
| position: relative; | |
| } | |
| .header-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| .logo i { | |
| font-size: 1.8rem; | |
| margin-left: 0.5rem; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .nav-link { | |
| color: white; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5rem; | |
| border-radius: var(--radius-sm); | |
| transition: background-color 0.3s; | |
| } | |
| .nav-link:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-link i { | |
| margin-left: 0.5rem; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 2rem auto; | |
| padding: 0 1.5rem; | |
| } | |
| .page-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .page-title { | |
| color: var(--primary-color); | |
| margin-bottom: 0.75rem; | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| position: relative; | |
| display: inline-block; | |
| padding-bottom: 0.75rem; | |
| } | |
| .page-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 4px; | |
| background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); | |
| border-radius: 2px; | |
| } | |
| .page-subtitle { | |
| color: var(--gray-text); | |
| font-size: 1rem; | |
| } | |
| .card { | |
| background-color: #fff; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--card-shadow); | |
| margin-bottom: 2rem; | |
| overflow: hidden; | |
| border: 1px solid var(--border-color); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: linear-gradient(to left, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 1.25rem 1.5rem; | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .card-header-title { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .card-header-title i { | |
| margin-left: 0.75rem; | |
| font-size: 1.25rem; | |
| } | |
| .card-header-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .card-header-btn { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| width: 2rem; | |
| height: 2rem; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .card-header-btn:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| /* تبها */ | |
| .tabs { | |
| display: flex; | |
| margin-bottom: 1.5rem; | |
| border-radius: var(--radius-md); | |
| background-color: var(--light-bg); | |
| padding: 0.5rem; | |
| border: 1px solid var(--border-color); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tab-button { | |
| flex: 1; | |
| padding: 0.75rem 1rem; | |
| text-align: center; | |
| cursor: pointer; | |
| font-weight: 500; | |
| color: var(--gray-text); | |
| border: none; | |
| background: transparent; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| border-radius: var(--radius-sm); | |
| white-space: nowrap; | |
| font-family: 'B Nazanin', Tahoma, Arial, sans-serif; | |
| font-size: 0.875rem; | |
| } | |
| .tab-button:hover:not(.active) { | |
| color: var(--primary-color); | |
| background-color: rgba(59, 130, 246, 0.05); | |
| } | |
| .tab-button.active { | |
| color: white; | |
| background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); | |
| box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2); | |
| } | |
| .tab-button i { | |
| margin-left: 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* تبهای پیشرفته */ | |
| .tabs-container { | |
| margin-bottom: 2rem; | |
| position: relative; | |
| } | |
| .tabs-nav { | |
| display: flex; | |
| background: white; | |
| padding: 0.75rem; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--card-shadow); | |
| position: relative; | |
| z-index: 5; | |
| overflow: hidden; | |
| } | |
| .tab-btn { | |
| flex: 1; | |
| border: none; | |
| background: transparent; | |
| padding: 1.25rem 1rem; | |
| border-radius: var(--radius-lg); | |
| cursor: pointer; | |
| font-family: 'B Nazanin', Tahoma, Arial, sans-serif; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| color: var(--gray-text); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.65rem; | |
| text-align: center; | |
| } | |
| .tab-btn::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--primary-light); | |
| transform: translateY(100%); | |
| transition: transform 0.3s ease; | |
| z-index: -1; | |
| opacity: 0.5; | |
| } | |
| .tab-btn i { | |
| font-size: 1.6rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .tab-btn span { | |
| display: block; | |
| transition: transform 0.3s ease; | |
| } | |
| .tab-btn:hover:not(.active) { | |
| color: var(--primary-color); | |
| } | |
| .tab-btn:hover:not(.active) i { | |
| transform: translateY(-5px); | |
| } | |
| .tab-btn:hover:not(.active) span { | |
| transform: translateY(3px); | |
| } | |
| .tab-btn.active { | |
| color: white; | |
| } | |
| .tab-btn.active::before { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| /* تبهای ویژه با رنگهای متفاوت */ | |
| .tab-btn[data-tab="branch"] { | |
| border-bottom: 3px solid transparent; | |
| } | |
| .tab-btn[data-tab="branch"].active { | |
| background: var(--branch-gradient); | |
| border-bottom-color: var(--branch); | |
| } | |
| .tab-btn[data-tab="branch"]::before { | |
| background: var(--branch-light); | |
| } | |
| .tab-btn[data-tab="branch"]:hover:not(.active) { | |
| color: var(--branch); | |
| } | |
| .tab-btn[data-tab="regional"] { | |
| border-bottom: 3px solid transparent; | |
| } | |
| .tab-btn[data-tab="regional"].active { | |
| background: var(--regional-gradient); | |
| border-bottom-color: var(--regional); | |
| } | |
| .tab-btn[data-tab="regional"]::before { | |
| background: var(--regional-light); | |
| } | |
| .tab-btn[data-tab="regional"]:hover:not(.active) { | |
| color: var(--regional); | |
| } | |
| .tab-btn[data-tab="central"] { | |
| border-bottom: 3px solid transparent; | |
| } | |
| .tab-btn[data-tab="central"].active { | |
| background: var(--central-gradient); | |
| border-bottom-color: var(--central); | |
| } | |
| .tab-btn[data-tab="central"]::before { | |
| background: var(--central-light); | |
| } | |
| .tab-btn[data-tab="central"]:hover:not(.active) { | |
| color: var(--central); | |
| } | |
| /* کارتهای اطلاعات */ | |
| .info-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--card-shadow); | |
| overflow: hidden; | |
| margin-bottom: 2rem; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| position: relative; | |
| } | |
| .info-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* هدر کارت با افکت موجدار */ | |
| .card-header::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 100%; | |
| height: 20px; | |
| background: white; | |
| clip-path: polygon( | |
| 0% 100%, | |
| 5% 90%, 10% 95%, 15% 85%, 20% 95%, 25% 90%, 30% 95%, | |
| 35% 85%, 40% 95%, 45% 90%, 50% 95%, 55% 90%, 60% 95%, | |
| 65% 85%, 70% 95%, 75% 90%, 80% 95%, 85% 85%, 90% 95%, | |
| 95% 90%, 100% 100% | |
| ); | |
| z-index: -1; | |
| } | |
| /* آیکون هدر */ | |
| .card-header-icon { | |
| width: 4.5rem; | |
| height: 4.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.2); | |
| font-size: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| margin-left: 1.25rem; | |
| } | |
| .card-header-icon::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: rotate(45deg) scale(0); | |
| transform-origin: center; | |
| transition: transform 0.5s; | |
| } | |
| .info-card:hover .card-header-icon::after { | |
| transform: rotate(45deg) scale(2.5); | |
| } | |
| /* محتوای هدر */ | |
| .card-header-content h2 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .card-header-content p { | |
| opacity: 0.9; | |
| font-size: 1rem; | |
| } | |
| /* دایره پیشرفت */ | |
| .progress-container { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| position: relative; | |
| } | |
| .circle-progress { | |
| position: relative; | |
| width: 140px; | |
| height: 140px; | |
| margin-left: 2rem; | |
| flex-shrink: 0; | |
| } | |
| .circle-outer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: conic-gradient(rgba(0,0,0,0.05) 50%, transparent 0); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: rotateCircle 10s linear infinite; | |
| } | |
| @keyframes rotateCircle { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .circle-svg { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transform: rotate(-90deg); | |
| } | |
| .circle-bg { | |
| fill: none; | |
| stroke: var(--light-bg); | |
| stroke-width: 12; | |
| } | |
| .circle-value { | |
| fill: none; | |
| stroke-width: 12; | |
| stroke-linecap: round; | |
| stroke-dasharray: 283; | |
| stroke-dashoffset: 283; | |
| transition: stroke-dashoffset 1.5s ease; | |
| } | |
| .circle-text { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .circle-percent { | |
| font-size: 2.25rem; | |
| line-height: 1; | |
| margin-bottom: 0.3rem; | |
| } | |
| .circle-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| color: var(--gray-text); | |
| letter-spacing: 0.05em; | |
| } | |
| /* نوار پیشرفت */ | |
| .bar-progress { | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| .bar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .bar-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| color: var(--gray-text); | |
| font-weight: 500; | |
| } | |
| .bar-title i { | |
| font-size: 1rem; | |
| } | |
| .bar-container { | |
| background: var(--light-bg); | |
| height: 10px; | |
| border-radius: 99px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .bar-value { | |
| height: 100%; | |
| width: 0; | |
| border-radius: 99px; | |
| transition: width 1.2s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .bar-value::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, | |
| rgba(255,255,255,0) 0%, | |
| rgba(255,255,255,0.3) 50%, | |
| rgba(255,255,255,0) 100%); | |
| animation: barShine 2s linear infinite; | |
| } | |
| @keyframes barShine { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| /* یادداشت ویژه */ | |
| .special-note { | |
| background: var(--light-bg); | |
| border-radius: var(--radius-md); | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .special-note:hover { | |
| transform: translateY(-5px); | |
| } | |
| .special-note::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 4px; | |
| } | |
| .note-icon { | |
| width: 3rem; | |
| height: 3rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-size: 1.5rem; | |
| flex-shrink: 0; | |
| } | |
| .note-content h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .note-content p { | |
| color: var(--gray-text); | |
| font-size: 0.95rem; | |
| line-height: 1.7; | |
| } | |
| /* لیست مراحل */ | |
| .steps-list { | |
| list-style: none; | |
| margin: 2rem 0; | |
| position: relative; | |
| padding: 0; | |
| } | |
| .steps-list::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 1.25rem; | |
| height: 100%; | |
| width: 2px; | |
| background: var(--border-color); | |
| z-index: 1; | |
| } | |
| .step-item { | |
| position: relative; | |
| padding-right: 3.5rem; | |
| padding-bottom: 1.75rem; | |
| z-index: 2; | |
| } | |
| .step-item:last-child { | |
| padding-bottom: 0; | |
| } | |
| .step-dot { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: white; | |
| z-index: 3; | |
| } | |
| .step-content { | |
| background: white; | |
| border-radius: var(--radius-md); | |
| padding: 1.5rem; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| } | |
| .step-item:hover .step-content { | |
| transform: translateX(-8px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .step-title { | |
| font-size: 1.15rem; | |
| font-weight: bold; | |
| margin-bottom: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .step-description { | |
| color: var(--gray-text); | |
| font-size: 0.95rem; | |
| line-height: 1.7; | |
| } | |
| /* جدول مقایسه */ | |
| .comparison-section { | |
| margin-top: 3rem; | |
| } | |
| .section-title { | |
| font-size: 1.4rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--dark-text); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| position: relative; | |
| } | |
| .section-title i { | |
| color: var(--primary-color); | |
| } | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| box-shadow: var(--card-shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .comparison-table th, | |
| .comparison-table td { | |
| padding: 1rem 1.25rem; | |
| text-align: right; | |
| } | |
| .comparison-table th { | |
| background: linear-gradient(to left, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| font-weight: 600; | |
| position: relative; | |
| } | |
| .comparison-table td { | |
| background: white; | |
| border-bottom: 1px solid var(--border-color); | |
| transition: all 0.15s ease; | |
| } | |
| .comparison-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .comparison-table tr:hover td { | |
| background: var(--light-bg); | |
| } | |
| .comparison-table .criteria { | |
| font-weight: bold; | |
| color: var(--primary-dark); | |
| background: var(--primary-light); | |
| } | |
| .comparison-table tr:hover .criteria { | |
| background: #cce0fd; | |
| } | |
| /* رنگهای خاص برای هر واحد */ | |
| #branch .card-header { | |
| background: var(--branch-gradient); | |
| } | |
| #branch .circle-value { | |
| stroke: var(--branch); | |
| } | |
| #branch .circle-percent { | |
| color: var(--branch); | |
| } | |
| #branch .bar-title i, | |
| #branch .progress-info h3 { | |
| color: var(--branch); | |
| } | |
| #branch .bar-value { | |
| background: var(--branch-gradient); | |
| } | |
| #branch .special-note::before { | |
| background: var(--branch); | |
| } | |
| #branch .note-icon { | |
| background: var(--branch-light); | |
| color: var(--branch); | |
| } | |
| #branch .step-dot { | |
| background: var(--branch-gradient); | |
| box-shadow: 0 0 0 6px var(--branch-light); | |
| } | |
| #branch .step-title { | |
| color: var(--branch); | |
| } | |
| #regional .card-header { | |
| background: var(--regional-gradient); | |
| } | |
| #regional .circle-value { | |
| stroke: var(--regional); | |
| } | |
| #regional .circle-percent { | |
| color: var(--regional); | |
| } | |
| #regional .bar-title i, | |
| #regional .progress-info h3 { | |
| color: var(--regional); | |
| } | |
| #regional .bar-value { | |
| background: var(--regional-gradient); | |
| } | |
| #regional .special-note::before { | |
| background: var(--regional); | |
| } | |
| #regional .note-icon { | |
| background: var(--regional-light); | |
| color: var(--regional); | |
| } | |
| #regional .step-dot { | |
| background: var(--regional-gradient); | |
| box-shadow: 0 0 0 6px var(--regional-light); | |
| } | |
| #regional .step-title { | |
| color: var(--regional); | |
| } | |
| #central .card-header { | |
| background: var(--central-gradient); | |
| } | |
| #central .circle-value { | |
| stroke: var(--central); | |
| } | |
| #central .circle-percent { | |
| color: var(--central); | |
| } | |
| #central .note-icon { | |
| background: var(--central-light); | |
| color: var(--central); | |
| } | |
| #central .special-note::before { | |
| background: var(--central); | |
| } | |
| #central .step-dot { | |
| background: var(--central-gradient); | |
| box-shadow: 0 0 0 6px var(--central-light); | |
| } | |
| #central .step-title { | |
| color: var(--central); | |
| } | |
| /* فرم محاسبه */ | |
| .form-section { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| .form-section { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .form-group { | |
| margin-bottom: 1.25rem; | |
| position: relative; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: var(--dark-text); | |
| font-size: 0.875rem; | |
| position: relative; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 0.875rem 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| font-size: 0.875rem; | |
| font-family: 'B Nazanin', Tahoma, Arial, sans-serif; | |
| background-color: #fcfcfc; | |
| transition: all 0.25s ease-in-out; | |
| color: var(--dark-text); | |
| } | |
| .form-control:focus { | |
| border-color: var(--primary-color); | |
| outline: none; | |
| background-color: #fff; | |
| box-shadow: var(--focus-shadow); | |
| } | |
| .form-control::placeholder { | |
| color: #a0aec0; | |
| } | |
| .input-group { | |
| display: flex; | |
| position: relative; | |
| } | |
| .input-group .form-control { | |
| flex: 1; | |
| border-radius: var(--radius-md); | |
| padding-left: 3.125rem; | |
| } | |
| .input-group .input-suffix { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--gray-text); | |
| font-weight: 500; | |
| pointer-events: none; | |
| } | |
| select.form-control { | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: left 1rem center; | |
| padding-left: 2.5rem; | |
| } | |
| .info-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| border-radius: 50%; | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| font-size: 0.75rem; | |
| cursor: help; | |
| margin-right: 0.5rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .info-icon:hover { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .info-icon .tooltip { | |
| position: absolute; | |
| top: -0.5rem; | |
| right: 1.875rem; | |
| background-color: var(--dark-text); | |
| color: white; | |
| padding: 0.625rem 0.9375rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.75rem; | |
| width: 15.625rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(10px); | |
| transition: all 0.3s ease; | |
| z-index: 10; | |
| text-align: right; | |
| font-weight: normal; | |
| line-height: 1.6; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .info-icon:hover .tooltip { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| /* نتایج محاسبات */ | |
| .result-section { | |
| background-color: #fff; | |
| border-radius: var(--radius-md); | |
| padding: 0; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .result-section:hover { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .result-header { | |
| background-color: var(--light-bg); | |
| padding: 1rem 1.25rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .result-title { | |
| font-weight: 600; | |
| color: var(--dark-text); | |
| font-size: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .result-title i { | |
| margin-left: 0.625rem; | |
| color: var(--primary-color); | |
| } | |
| .result-body { | |
| padding: 1.25rem; | |
| } | |
| .result-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.75rem 0.9375rem; | |
| margin-bottom: 0.625rem; | |
| background-color: var(--light-bg); | |
| border-radius: var(--radius-sm); | |
| transition: all 0.3s ease; | |
| } | |
| .result-item:hover { | |
| background-color: #f0f7ff; | |
| transform: translateY(-2px); | |
| } | |
| .result-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .result-label { | |
| font-weight: 500; | |
| color: var(--gray-text); | |
| } | |
| .result-value { | |
| font-weight: 600; | |
| color: var(--dark-text); | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.375rem 0.75rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .badge i { | |
| margin-left: 0.375rem; | |
| } | |
| .badge-success { | |
| background-color: var(--success-light); | |
| color: var(--success-dark); | |
| } | |
| .badge-warning { | |
| background-color: var(--warning-light); | |
| color: var(--warning-dark); | |
| } | |
| .badge-danger { | |
| background-color: var(--danger-light); | |
| color: var(--danger-dark); | |
| } | |
| .badge-primary { | |
| background-color: var(--primary-light); | |
| color: var(--primary-dark); | |
| } | |
| /* دکمه */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 500; | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: middle; | |
| user-select: none; | |
| border: 1px solid transparent; | |
| padding: 0.875rem 1.5rem; | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| border-radius: var(--radius-md); | |
| transition: all 0.25s ease-in-out; | |
| cursor: pointer; | |
| font-family: 'B Nazanin', Tahoma, Arial, sans-serif; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| transform: scale(10, 10); | |
| opacity: 0; | |
| transition: transform .5s, opacity 1s; | |
| } | |
| .btn:active::after { | |
| transform: scale(0, 0); | |
| opacity: .3; | |
| transition: 0s; | |
| } | |
| .btn-primary { | |
| color: #fff; | |
| background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); | |
| border-color: transparent; | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(to right, var(--primary-dark), var(--secondary-dark)); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| color: white; | |
| background: linear-gradient(to right, var(--warning-color), var(--warning-dark)); | |
| border-color: transparent; | |
| } | |
| .btn-secondary:hover { | |
| background: linear-gradient(to right, var(--warning-dark), #b45309); | |
| box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .btn i { | |
| margin-left: 0.5rem; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .mt-4 { | |
| margin-top: 1.5rem; | |
| } | |
| .mb-4 { | |
| margin-bottom: 1.5rem; | |
| } | |
| .mt-3 { | |
| margin-top: 1.25rem; | |
| } | |
| .mb-3 { | |
| margin-bottom: 1.25rem; | |
| } | |
| .d-none { | |
| display: none ; | |
| } | |
| .d-flex { | |
| display: flex; | |
| } | |
| .justify-content-between { | |
| justify-content: space-between; | |
| } | |
| .align-items-center { | |
| align-items: center; | |
| } | |
| @media (max-width: 576px) { | |
| .tabs { | |
| flex-direction: column; | |
| background-color: transparent; | |
| border: none; | |
| padding: 0; | |
| } | |
| .tab-button { | |
| margin-bottom: 0.5rem; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| background-color: var(--light-bg); | |
| } | |
| } | |
| /* سیستم نمایش پیامهای خطا و هشدار */ | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 9999; | |
| max-width: 350px; | |
| } | |
| .toast { | |
| background-color: white; | |
| color: var(--dark-text); | |
| padding: 1rem; | |
| margin-bottom: 0.75rem; | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| display: flex; | |
| align-items: flex-start; | |
| transform: translateX(120%); | |
| transition: transform 0.3s ease; | |
| overflow: hidden; | |
| max-width: 100%; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast-icon { | |
| min-width: 24px; | |
| height: 24px; | |
| margin-left: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .toast-content { | |
| flex: 1; | |
| } | |
| .toast-title { | |
| font-weight: bold; | |
| margin-bottom: 0.25rem; | |
| } | |
| .toast-message { | |
| font-size: 0.9rem; | |
| color: var(--gray-text); | |
| } | |
| .toast-close { | |
| background: transparent; | |
| border: none; | |
| color: var(--gray-text); | |
| cursor: pointer; | |
| font-size: 1.25rem; | |
| padding: 0; | |
| margin-right: 0.5rem; | |
| line-height: 1; | |
| transition: color 0.2s; | |
| } | |
| .toast-close:hover { | |
| color: var(--dark-text); | |
| } | |
| .toast-progress { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: rgba(0, 0, 0, 0.1); | |
| } | |
| .toast-progress-bar { | |
| height: 100%; | |
| background: var(--primary-color); | |
| width: 100%; | |
| } | |
| .toast.error .toast-progress-bar { | |
| background: var(--danger-color); | |
| } | |
| .toast.warning .toast-progress-bar { | |
| background: var(--warning-color); | |
| } | |
| .toast.success .toast-progress-bar { | |
| background: var(--success-color); | |
| } | |
| .error-message { | |
| color: var(--danger-color); | |
| font-size: 0.8rem; | |
| margin-top: 0.35rem; | |
| display: none; | |
| } | |
| .form-group.has-error .form-control { | |
| border-color: var(--danger-color); | |
| background-color: #fff5f5; | |
| } | |
| .form-group.has-error .error-message { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- هدر سایت --> | |
| <header class="site-header"> | |
| <div class="header-container"> | |
| <div class="logo"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="white" style="margin-left: 0.5rem;"> | |
| <path d="M21.71,13.29l-3.86-3.86a.67.67,0,0,0-.94,0l-2.79,2.79-.2-.19a3.06,3.06,0,0,0-4.24,0l-.19.2L7.8,10.53,5.62,8.35,3.85,6.58a.67.67,0,0,0-.94,0L.28,9.21a.67.67,0,0,0,0,.94L2.05,12l2.19,2.19L6,16h0L10.43,20.43A3.66,3.66,0,0,0,12.87,21.5h.27a3.83,3.83,0,0,0,2.69-1.07l5.88-5.88A.67.67,0,0,0,21.71,13.29ZM4.87,14.45,2.52,12.1l1.75-1.76,2.35,2.35Zm12.75,2.19-1.68,1.69a2.41,2.41,0,0,1-1.72.67,2.34,2.34,0,0,1-1.69-.69L8.17,14l.91-.91a1.7,1.7,0,0,1,2.39,0l.2.2L14,10.93l2.36,2.35Z"/> | |
| </svg> | |
| <span>سامانه تعمیرات جزئی</span> | |
| </div> | |
| <nav class="nav-menu"> | |
| <a href="main.html" class="nav-link"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="white" style="margin-left: 0.5rem;"> | |
| <path d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z"/> | |
| </svg> | |
| خانه | |
| </a> | |
| <a href="#" class="nav-link"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="white" style="margin-left: 0.5rem;"> | |
| <path d="M22.47,5.46h0a1,1,0,0,0,.22-0.33,1,1,0,0,0,0-.76,1,1,0,0,0-.22-0.33h0l-4-4h0a1,1,0,0,0-.33-0.22,1,1,0,0,0-.76,0,1,1,0,0,0-.33.22h0L13.06,4H6A3,3,0,0,0,3,7V24H19V10.94ZM17.06,7H15V4.94ZM5,7A1,1,0,0,1,6,6h7V9h4v13H5Z"/> | |
| </svg> | |
| راهنما | |
| </a> | |
| <a href="#" class="nav-link"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="white" style="margin-left: 0.5rem;"> | |
| <path d="M12,0A11.972,11.972,0,0,0,4,3.073V1A1,1,0,0,0,2,1V4A3,3,0,0,0,5,7H8A1,1,0,0,0,8,5H5a.854.854,0,0,1-.1-.021A9.987,9.987,0,1,1,2,12a1,1,0,0,0-2,0A12,12,0,1,0,12,0Z"/> | |
| <path d="M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/> | |
| </svg> | |
| تاریخچه | |
| </a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- کانتینر نمایش پیامهای خطا و هشدار --> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <!-- محتوای اصلی --> | |
| <main class="container"> | |
| <div class="page-header"> | |
| <h1 class="page-title">سامانه تعیین حدود اختیارات تعمیرات جزئی</h1> | |
| <p class="page-subtitle">مطابق با بخشنامه ۷۰۵/ویرایش ۴</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-header-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="white" style="margin-left: 0.75rem;"> | |
| <path d="M23,11H21V9a1,1,0,0,0-2,0v2H17a1,1,0,0,0,0,2h2v2a1,1,0,0,0,2,0V13h2A1,1,0,0,0,23,11ZM9,14H7a1,1,0,0,0,0,2H9a1,1,0,0,0,0-2ZM9,10H1a1,1,0,0,0,0,2H9a1,1,0,0,0,0-2ZM23,5H1A1,1,0,0,0,1,7H23A1,1,0,0,0,23,5ZM9,18H5a1,1,0,0,0,0,2H9a1,1,0,0,0,0-2Z"/> | |
| </svg> | |
| راهنمای حدود اختیارات تعمیرات | |
| </div> | |
| <div class="card-header-actions"> | |
| <button class="card-header-btn" id="printBtn" title="چاپ راهنما"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="white"> | |
| <path d="M19,7H17V2a1,1,0,0,0-1-1H8A1,1,0,0,0,7,2V7H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3h2v3a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V20h2a3,3,0,0,0,3-3V10A3,3,0,0,0,19,7ZM9,3h6V7H9Zm6,19H9V16h6Zm5-5a1,1,0,0,1-1,1H17V15a1,1,0,0,0-1-1H8a1,1,0,0,0-1,1v3H5a1,1,0,0,1-1-1V10A1,1,0,0,1,5,9H19a1,1,0,0,1,1,1Z"/> | |
| <path d="M17,11H15a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"/> | |
| </svg> | |
| </button> | |
| <button class="card-header-btn" id="calcBtn" title="محاسبه گر"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="white"> | |
| <path d="M19,2H5A3,3,0,0,0,2,5V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V5A3,3,0,0,0,19,2ZM20,19a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V5A1,1,0,0,1,5,4H19a1,1,0,0,1,1,1Z"/> | |
| <path d="M8,8h8a1,1,0,0,0,0-2H8A1,1,0,0,0,8,8Z"/> | |
| <path d="M8,13h8a1,1,0,0,0,0-2H8a1,1,0,0,0,0,2Z"/> | |
| <path d="M8,18h8a1,1,0,0,0,0-2H8a1,1,0,0,0,0,2Z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <!-- تبهای پیشرفته --> | |
| <div class="tabs-container"> | |
| <div class="tabs-nav"> | |
| <button class="tab-btn active" data-tab="branch"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 0.5rem;"> | |
| <path d="M22,8.52V3.98C22,2.57,21.36,2,19.77,2H15.73C14.14,2,13.5,2.57,13.5,3.98V8.51C13.5,9.93,14.14,10.49,15.73,10.49H19.77C21.36,10.5,22,9.93,22,8.52Z"/> | |
| <path d="M22,19.77V15.73C22,14.14,21.36,13.5,19.77,13.5H15.73C14.14,13.5,13.5,14.14,13.5,15.73V19.77C13.5,21.36,14.14,22,15.73,22H19.77C21.36,22,22,21.36,22,19.77Z"/> | |
| <path d="M10.5,8.52V3.98C10.5,2.57,9.86,2,8.27,2H4.23C2.64,2,2,2.57,2,3.98V8.51C2,9.93,2.64,10.49,4.23,10.49H8.27C9.86,10.5,10.5,9.93,10.5,8.52Z"/> | |
| <path d="M10.5,19.77V15.73C10.5,14.14,9.86,13.5,8.27,13.5H4.23C2.64,13.5,2,14.14,2,15.73V19.77C2,21.36,2.64,22,4.23,22H8.27C9.86,22,10.5,21.36,10.5,19.77Z"/> | |
| </svg> | |
| <span>شعبه</span> | |
| </button> | |
| <button class="tab-btn" data-tab="regional"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 0.5rem;"> | |
| <path d="M12,11.5A2.5,2.5,0,1,1,14.5,9,2.5,2.5,0,0,1,12,11.5Zm0-9A6.5,6.5,0,0,0,5.5,9c0,4.171,5.5,10.144,5.5,10.144S16.5,13.171,16.5,9A6.5,6.5,0,0,0,12,2.5ZM12,12.5a3.5,3.5,0,1,1,3.5-3.5A3.5,3.5,0,0,1,12,12.5Z"/> | |
| <circle cx="12" cy="9" r="1.5"/> | |
| </svg> | |
| <span>منطقه</span> | |
| </button> | |
| <button class="tab-btn" data-tab="central"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 0.5rem;"> | |
| <path d="M21,6H19V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V6H3A1,1,0,0,0,2,7v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V7h3v7H8v2H6a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-3h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V16a1,1,0,0,0-1-1H14v-2h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H18V7h2a1,1,0,0,0,1-1V7A1,1,0,0,0,21,6Z"/> | |
| </svg> | |
| <span>ستاد مرکزی</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- محتوای تب شعبه --> | |
| <div id="branch" class="tab-content active"> | |
| <div class="info-card"> | |
| <div class="card-header"> | |
| <div class="card-header-icon"> | |
| <i class="fas fa-store"></i> | |
| </div> | |
| <div class="card-header-content"> | |
| <h2>شعبه</h2> | |
| <p>حد مجاز تعمیرات جزئی</p> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="progress-container"> | |
| <div class="circle-progress"> | |
| <div class="circle-outer"></div> | |
| <svg class="circle-svg" viewBox="0 0 100 100"> | |
| <circle class="circle-bg" cx="50" cy="50" r="45" /> | |
| <circle class="circle-value" cx="50" cy="50" r="45" data-percent="75" /> | |
| </svg> | |
| <div class="circle-text"> | |
| <div class="circle-percent">۷۵٪</div> | |
| <div class="circle-label">سقف مجاز</div> | |
| </div> | |
| </div> | |
| <div class="progress-info"> | |
| <h3>۱,۰۹۵,۰۰۰,۰۰۰ ریال</h3> | |
| <p>هر شعبه میتواند تا ۷۵٪ از سقف کل مجاز معاملات جزئی، بدون هماهنگی با منطقه نسبت به انجام تعمیرات اقدام نماید. این مقدار براساس بخشنامه ۷۰۵/ویرایش ۴ تعیین شده است.</p> | |
| </div> | |
| </div> | |
| <div class="bar-progress"> | |
| <div class="bar-header"> | |
| <div class="bar-title"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| نیاز به مکاتبه با منطقه | |
| </div> | |
| <div>۷۵٪ تا ۱۰۰٪ سقف کل</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar-value" data-value="25"></div> | |
| </div> | |
| </div> | |
| <div class="bar-progress"> | |
| <div class="bar-header"> | |
| <div class="bar-title"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| نیاز به مکاتبه با ستاد | |
| </div> | |
| <div>بیش از ۱۰۰٪ سقف کل</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar-value" data-value="30"></div> | |
| </div> | |
| </div> | |
| <div class="special-note"> | |
| <div class="note-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12,6a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H13V7A1,1,0,0,0,12,6Z"/> | |
| <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/> | |
| </svg> | |
| </div> | |
| <div class="note-content"> | |
| <h3>نکته مهم</h3> | |
| <p>اگر هزینه درخواستی + هزینههای قبلی از ۷۵٪ سقف بیشتر شود، مکاتبه با منطقه الزامی است. در نظر داشته باشید که در این صورت، باید تمامی مستندات مورد نیاز شامل پیشفاکتورها، تصاویر محل و فرمهای مقایسه قیمت ضمیمه درخواست شود.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="section-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;"> | |
| <path d="M7,6H6a3,3,0,0,0-3,3V8a1,1,0,0,0,2,0V9a1,1,0,0,1,1-1H7a1,1,0,0,0,0-2ZM5,15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3H7a1,1,0,0,0,0-2H6a1,1,0,0,1-1-1ZM18,6h1a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V7a3,3,0,0,0-3-3H18a1,1,0,0,0,0,2Zm3,9a1,1,0,0,0-1,1v1a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h1a3,3,0,0,0,3-3V15A1,1,0,0,0,21,15ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/> | |
| </svg> | |
| مراحل درخواست تعمیرات در شعبه | |
| </h2> | |
| <ul class="steps-list"> | |
| <li class="step-item"> | |
| <div class="step-dot">۱</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-file-alt"></i> | |
| تکمیل فرم درخواست تعمیرات | |
| </div> | |
| <div class="step-description"> | |
| فرم مخصوص درخواست تعمیرات را با ذکر جزئیات کامل نوع تعمیرات، محل اجرا و برآورد هزینه تکمیل نمایید. این فرم باید به امضای رئیس شعبه برسد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۲</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-calculator"></i> | |
| محاسبه هزینه و مقایسه با سقف مجاز شعبه | |
| </div> | |
| <div class="step-description"> | |
| برآورد هزینه تعمیرات را با سقف ۷۵٪ مجاز شعبه مقایسه کنید. مجموع هزینههای انجام شده در سال جاری و هزینه درخواست فعلی نباید از این مقدار بیشتر باشد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۳</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-file-invoice"></i> | |
| تهیه مستندات لازم | |
| </div> | |
| <div class="step-description"> | |
| برای مبالغ زیر ۲۰۰ میلیون ریال، یک فقره پیشفاکتور یا فاکتور کافی است. برای مبالغ بالاتر، باید سه فقره استعلام قیمت دریافت و فرم مقایسه قیمتها تکمیل شود. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۴</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-handshake"></i> | |
| مکاتبه با واحد بالادستی (در صورت نیاز) | |
| </div> | |
| <div class="step-description"> | |
| اگر مبلغ درخواستی + هزینههای قبلی از سقف مجاز بیشتر باشد، باید با سرپرستی منطقه مکاتبه شود. این مکاتبه باید شامل جزئیات کامل و مستندات لازم باشد. | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- محتوای تب منطقه --> | |
| <div id="regional" class="tab-content"> | |
| <div class="info-card"> | |
| <div class="card-header"> | |
| <div class="card-header-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="card-header-content"> | |
| <h2>سرپرستی منطقه</h2> | |
| <p>حد مجاز تعمیرات جزئی</p> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="progress-container"> | |
| <div class="circle-progress"> | |
| <div class="circle-outer"></div> | |
| <svg class="circle-svg" viewBox="0 0 100 100"> | |
| <circle class="circle-bg" cx="50" cy="50" r="45" /> | |
| <circle class="circle-value" cx="50" cy="50" r="45" data-percent="50" /> | |
| </svg> | |
| <div class="circle-text"> | |
| <div class="circle-percent">۵۰٪</div> | |
| <div class="circle-label">سقف مجاز</div> | |
| </div> | |
| </div> | |
| <div class="progress-info"> | |
| <h3>۷۳۰,۰۰۰,۰۰۰ ریال</h3> | |
| <p>سرپرستی منطقه میتواند تا ۵۰٪ از سقف کل مجاز معاملات جزئی، بدون هماهنگی با ستاد نسبت به انجام تعمیرات اقدام نماید. این مقدار براساس بخشنامه ۷۰۵/ویرایش ۴ تعیین شده است.</p> | |
| </div> | |
| </div> | |
| <div class="bar-progress"> | |
| <div class="bar-header"> | |
| <div class="bar-title"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| نیاز به مکاتبه با ستاد | |
| </div> | |
| <div>بیش از ۵۰٪ سقف کل</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar-value" data-value="50"></div> | |
| </div> | |
| </div> | |
| <div class="special-note"> | |
| <div class="note-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12,6a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H13V7A1,1,0,0,0,12,6Z"/> | |
| <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/> | |
| </svg> | |
| </div> | |
| <div class="note-content"> | |
| <h3>نکته مهم</h3> | |
| <p>اگر هزینه درخواستی + هزینههای قبلی از ۵۰٪ سقف بیشتر شود، مکاتبه با ستاد مرکزی الزامی است. همچنین منطقه وظیفه رسیدگی به درخواستهای شعب برای مبالغ بالاتر از ۷۵٪ سقف را برعهده دارد.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="section-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;"> | |
| <path d="M7,6H6a3,3,0,0,0-3,3V8a1,1,0,0,0,2,0V9a1,1,0,0,1,1-1H7a1,1,0,0,0,0-2ZM5,15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3H7a1,1,0,0,0,0-2H6a1,1,0,0,1-1-1ZM18,6h1a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V7a3,3,0,0,0-3-3H18a1,1,0,0,0,0,2Zm3,9a1,1,0,0,0-1,1v1a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h1a3,3,0,0,0,3-3V15A1,1,0,0,0,21,15ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/> | |
| </svg> | |
| مراحل درخواست تعمیرات در منطقه | |
| </h2> | |
| <ul class="steps-list"> | |
| <li class="step-item"> | |
| <div class="step-dot">۱</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-clipboard-check"></i> | |
| دریافت و بررسی درخواست شعب | |
| </div> | |
| <div class="step-description"> | |
| منطقه درخواستهای شعب را که از ۷۵٪ سقف مجاز آنها بیشتر است، دریافت و بررسی میکند. این بررسی شامل کنترل مستندات و اطمینان از صحت محاسبات میباشد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۲</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-calculator"></i> | |
| محاسبه هزینه و مقایسه با سقف مجاز منطقه | |
| </div> | |
| <div class="step-description"> | |
| برآورد هزینه تعمیرات را با سقف ۵۰٪ مجاز منطقه مقایسه کنید. مجموع هزینههای انجام شده در سال جاری و هزینه درخواست فعلی نباید از این مقدار بیشتر باشد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۳</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-stamp"></i> | |
| تایید و صدور مجوز | |
| </div> | |
| <div class="step-description"> | |
| در صورتی که درخواست در محدوده اختیارات منطقه باشد، مجوز تعمیرات صادر میشود. این مجوز باید به امضای مسئول منطقه رسیده و در سیستم ثبت گردد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۴</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-handshake"></i> | |
| مکاتبه با ستاد مرکزی (در صورت نیاز) | |
| </div> | |
| <div class="step-description"> | |
| اگر مبلغ درخواستی + هزینههای قبلی از سقف مجاز منطقه بیشتر باشد، باید با ستاد مرکزی مکاتبه شود. این مکاتبه باید شامل جزئیات کامل و مستندات لازم باشد. | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- محتوای تب ستاد مرکزی --> | |
| <div id="central" class="tab-content"> | |
| <div class="info-card"> | |
| <div class="card-header"> | |
| <div class="card-header-icon"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <div class="card-header-content"> | |
| <h2>ستاد مرکزی</h2> | |
| <p>حد مجاز تعمیرات جزئی</p> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="progress-container"> | |
| <div class="circle-progress"> | |
| <div class="circle-outer"></div> | |
| <svg class="circle-svg" viewBox="0 0 100 100"> | |
| <circle class="circle-bg" cx="50" cy="50" r="45" /> | |
| <circle class="circle-value" cx="50" cy="50" r="45" data-percent="100" /> | |
| </svg> | |
| <div class="circle-text"> | |
| <div class="circle-percent">۱۰۰٪</div> | |
| <div class="circle-label">سقف مجاز</div> | |
| </div> | |
| </div> | |
| <div class="progress-info"> | |
| <h3>۱,۴۶۰,۰۰۰,۰۰۰ ریال</h3> | |
| <p>ستاد مرکزی میتواند تا سقف کامل معاملات جزئی (۱۰۰٪) بدون نیاز به تایید واحد دیگری نسبت به انجام تعمیرات اقدام نماید. همچنین ستاد مرکزی تاییدکننده نهایی برای درخواستهای فراتر از حد مجاز شعب و مناطق است.</p> | |
| </div> | |
| </div> | |
| <div class="special-note"> | |
| <div class="note-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"/> | |
| </svg> | |
| </div> | |
| <div class="note-content"> | |
| <h3>نکته مهم</h3> | |
| <p>ستاد مرکزی خود تأییدکننده است و نیازی به مکاتبهٔ بالادستی ندارد. با این حال، ستاد مرکزی نیز باید مقررات مربوط به استعلام قیمت را رعایت کند و برای مبالغ بالای ۲۰۰ میلیون ریال، سه فقره استعلام قیمت دریافت نماید.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="section-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;"> | |
| <path d="M7,6H6a3,3,0,0,0-3,3V8a1,1,0,0,0,2,0V9a1,1,0,0,1,1-1H7a1,1,0,0,0,0-2ZM5,15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3H7a1,1,0,0,0,0-2H6a1,1,0,0,1-1-1ZM18,6h1a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V7a3,3,0,0,0-3-3H18a1,1,0,0,0,0,2Zm3,9a1,1,0,0,0-1,1v1a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h1a3,3,0,0,0,3-3V15A1,1,0,0,0,21,15ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/> | |
| </svg> | |
| مراحل درخواست تعمیرات در ستاد مرکزی | |
| </h2> | |
| <ul class="steps-list"> | |
| <li class="step-item"> | |
| <div class="step-dot">۱</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-clipboard-check"></i> | |
| دریافت و بررسی درخواستهای ارجاعی | |
| </div> | |
| <div class="step-description"> | |
| ستاد مرکزی درخواستهای ارجاعی از مناطق را که از سقف مجاز آنها بیشتر است، دریافت و بررسی میکند. این بررسی شامل کنترل دقیق مستندات و اطمینان از صحت محاسبات میباشد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۲</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-search-dollar"></i> | |
| بررسی ضرورت و کارشناسی هزینه | |
| </div> | |
| <div class="step-description"> | |
| کارشناسان ستاد، ضرورت انجام تعمیرات و مناسب بودن هزینه برآوردی را بررسی میکنند. در صورت نیاز، ممکن است بازدید میدانی نیز انجام شود. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۳</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-stamp"></i> | |
| تایید نهایی و صدور مجوز | |
| </div> | |
| <div class="step-description"> | |
| پس از تایید کارشناسی، مجوز نهایی صادر میشود. این مجوز باید به امضای مدیر کل پشتیبانی و خدمات عمومی یا معاون مربوطه رسیده و در سیستم ثبت گردد. | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step-item"> | |
| <div class="step-dot">۴</div> | |
| <div class="step-content"> | |
| <div class="step-title"> | |
| <i class="fas fa-file-contract"></i> | |
| ابلاغ به واحد درخواستکننده | |
| </div> | |
| <div class="step-description"> | |
| پس از صدور مجوز، نتیجه به واحد درخواستکننده ابلاغ میشود. همچنین اعتبار لازم برای انجام تعمیرات تخصیص داده میشود و در سوابق مالی ثبت میگردد. | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- بخش مقایسه --> | |
| <div class="comparison-section"> | |
| <h2 class="section-title"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;"> | |
| <path d="M20.33,3.67A1,1,0,0,0,18.92,5.08a8,8,0,1,1-3.75-2.28A10,10,0,1,0,22,12,9.87,9.87,0,0,0,20.33,3.67ZM13,12a1,1,0,0,1-1,1H8a1,1,0,0,1,0-2h3V7A1,1,0,0,1,13,7Z"/> | |
| </svg> | |
| مقایسه حدود اختیارات واحدها | |
| </h2> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>معیار</th> | |
| <th>شعبه</th> | |
| <th>منطقه</th> | |
| <th>ستاد مرکزی</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="criteria">سقف مجاز</td> | |
| <td>۱,۰۹۵,۰۰۰,۰۰۰ ریال</td> | |
| <td>۷۳۰,۰۰۰,۰۰۰ ریال</td> | |
| <td>۱,۴۶۰,۰۰۰,۰۰۰ ریال</td> | |
| </tr> | |
| <tr> | |
| <td class="criteria">درصد مجاز</td> | |
| <td>۷۵٪ بودجه سالانه</td> | |
| <td>۵۰٪ بودجه سالانه</td> | |
| <td>۱۰۰٪ بودجه سالانه</td> | |
| </tr> | |
| <tr> | |
| <td class="criteria">نیاز به مکاتبه</td> | |
| <td>بیش از ۷۵٪</td> | |
| <td>بیش از ۵۰٪</td> | |
| <td>نیاز ندارد</td> | |
| </tr> | |
| <tr> | |
| <td class="criteria">نیاز به سه استعلام</td> | |
| <td colspan="3">برای مبالغ بالای ۲۰۰,۰۰۰,۰۰۰ ریال</td> | |
| </tr> | |
| <tr> | |
| <td class="criteria">مستندات مورد نیاز</td> | |
| <td colspan="3">پیشفاکتور، فاکتور، استعلامها، تصاویر محل تعمیر</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- بخش محاسبه --> | |
| <div class="card" id="calculatorCard"> | |
| <div class="card-header"> | |
| <div class="card-header-title"> | |
| <i class="fas fa-calculator"></i> محاسبه حدود اختیارات تعمیرات | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="accordion mb-4"> | |
| <div class="accordion-header" id="authorityGuideHeader"> | |
| <div class="accordion-title"> | |
| <i class="fas fa-info-circle"></i> راهنمای حدود اختیارات | |
| </div> | |
| <div class="accordion-icon"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </div> | |
| <div class="accordion-content" id="authorityGuideContent"> | |
| <div class="accordion-body"> | |
| <div class="result-item"> | |
| <div class="result-label">شعبه:</div> | |
| <div class="result-value">تا سقف <span class="text-primary">۱,۰۹۵,۰۰۰,۰۰۰</span> ریال (۷۵٪ بودجه سالانه)</div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-label">منطقه:</div> | |
| <div class="result-value">تا سقف <span class="text-warning">۷۳۰,۰۰۰,۰۰۰</span> ریال (۵۰٪ بودجه سالانه)</div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-label">نیاز به سه استعلام:</div> | |
| <div class="result-value">برای مبالغ بالای <span class="text-primary">۲۰۰,۰۰۰,۰۰۰</span> ریال</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group mb-4"> | |
| <label>دستهبندی تعمیرات</label> | |
| <div class="tabs"> | |
| <button class="tab-button active" data-repair-group="building"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.5rem;"> | |
| <path d="M21,6H19V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V6H3A1,1,0,0,0,2,7v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V7h3v7H8v2H6a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-3h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V16a1,1,0,0,0-1-1H14v-2h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H18V7h2a1,1,0,0,0,1-1V7A1,1,0,0,0,21,6Z"/> | |
| </svg> | |
| تعمیرات ساختمان | |
| </button> | |
| <button class="tab-button" data-repair-group="furniture"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.5rem;"> | |
| <path d="M20,8H18V5a1,1,0,0,0-1-1H7A1,1,0,0,0,6,5V8H4a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H20a3,3,0,0,0,3-3V11A3,3,0,0,0,20,8ZM8,5h8V8H8ZM21,19a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V16H6v1a1,1,0,0,0,2,0V16h8v1a1,1,0,0,0,2,0V16h3Zm0-5H3V11a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1Z"/> | |
| </svg> | |
| تعمیرات اثاثیه | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-section mb-3"> | |
| <div class="form-group"> | |
| <label>نوع واحد درخواستکننده | |
| <span class="info-icon"> | |
| <i class="fas fa-info"></i> | |
| <span class="tooltip">نوع واحد درخواستکننده تعمیرات را مشخص کنید. حدود اختیارات بر اساس نوع واحد متفاوت است.</span> | |
| </span> | |
| </label> | |
| <select id="unitType" class="form-control"> | |
| <option value="branch">شعبه</option> | |
| <option value="regional">منطقه</option> | |
| <option value="headquarters">ستاد</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>نوع تعمیرات | |
| <span class="info-icon"> | |
| <i class="fas fa-question-circle"></i> | |
| <span class="tooltip">نوع دقیق تعمیرات مورد نیاز را انتخاب کنید.</span> | |
| </span> | |
| </label> | |
| <select id="repairCategory" class="form-control"> | |
| <option value="">انتخاب کنید</option> | |
| <option value="electrical">تعمیرات برقی</option> | |
| <option value="plumbing">تعمیرات تأسیساتی</option> | |
| <option value="construction">تعمیرات ساختمانی</option> | |
| <option value="other_building">سایر موارد ساختمان</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-section mb-3"> | |
| <div class="form-group"> | |
| <label>برآورد هزینه (ریال)</label> | |
| <div class="input-group"> | |
| <input type="text" id="estimatedCost" class="form-control" placeholder="مثال: 45,000,000" inputmode="numeric"> | |
| <span class="input-suffix">ریال</span> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>مبلغ هزینه شده طی سال (ریال) | |
| <span class="info-icon"> | |
| <i class="fas fa-info"></i> | |
| <span class="tooltip">مجموع مبالغی که تا کنون در سال جاری برای تعمیرات جزئی هزینه شده است.</span> | |
| </span> | |
| </label> | |
| <div class="input-group"> | |
| <input type="text" id="yearlySpent" class="form-control" placeholder="مثال: 120,000,000" inputmode="numeric"> | |
| <span class="input-suffix">ریال</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <button class="btn btn-primary" id="calculateBtn"> | |
| <i class="fas fa-calculator"></i> محاسبه و تعیین حدود اختیارات | |
| </button> | |
| </div> | |
| <!-- نتایج محاسبات --> | |
| <div class="result-section mt-4 d-none" id="calculationResults"> | |
| <div class="result-header"> | |
| <div class="result-title"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.625rem;"> | |
| <path d="M11.23,20.23a1,1,0,0,1-1.46,0L3.7,14.16c-.2-.2-.3-.5-.3-.76,0-.3.1-.6.3-.8L9.78,6.5a1.89,1.89,0,0,1,2.45,0,1.65,1.65,0,0,1,0,2.4L8.7,12.55l15.3.05a1.65,1.65,0,0,1,1.7,1.7,1.65,1.65,0,0,1-1.7,1.7H8.7l3.53,3.55A1.7,1.7,0,0,1,11.23,20.23Z"/> | |
| </svg> | |
| نتیجه محاسبه حدود اختیارات | |
| </div> | |
| <div class="result-actions"> | |
| <button class="card-header-btn" id="printResultBtn" title="چاپ نتایج"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M19,7H17V2a1,1,0,0,0-1-1H8A1,1,0,0,0,7,2V7H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3h2v3a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V20h2a3,3,0,0,0,3-3V10A3,3,0,0,0,19,7ZM9,3h6V7H9Zm6,19H9V16h6Zm5-5a1,1,0,0,1-1,1H17V15a1,1,0,0,0-1-1H8a1,1,0,0,0-1,1v3H5a1,1,0,0,1-1-1V10A1,1,0,0,1,5,9H19a1,1,0,0,1,1,1Z"/> | |
| <path d="M17,11H15a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"/> | |
| </svg> | |
| </button> | |
| <button class="card-header-btn" id="shareResultBtn" title="اشتراکگذاری"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M16.53,11.16a1.5,1.5,0,0,0-1.14.53L8.75,8.93a2.5,2.5,0,0,0,0-.86l6.64-2.76a1.5,1.5,0,1,0-.26-.86,1.46,1.46,0,0,0,.14.63L8.63,7.84A2.5,2.5,0,1,0,8.5,13a2.46,2.46,0,0,0,1.4-.43l6.29,2.57a1.5,1.5,0,1,0,.34-.94Z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="result-body"> | |
| <div class="result-item"> | |
| <div class="result-label">برآورد هزینه:</div> | |
| <div class="result-value" id="resultCost">۰ ریال</div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-label">نیاز به سه استعلام/فاکتور:</div> | |
| <div class="result-value" id="resultQuotes"> | |
| <span class="badge badge-primary"><i class="fas fa-file-invoice"></i> خیر</span> | |
| </div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-label">سطح تصویب:</div> | |
| <div class="result-value" id="resultApprovalLevel"> | |
| <span class="badge badge-success"><i class="fas fa-check-circle"></i> واحد</span> | |
| </div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-label">نیاز به هماهنگی با واحد بالاتر:</div> | |
| <div class="result-value" id="resultRegionCoordination"> | |
| <span class="badge badge-primary"><i class="fas fa-handshake"></i> خیر</span> | |
| </div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-label">مدارک مورد نیاز:</div> | |
| <div class="result-value" id="resultDocuments"> | |
| <span class="badge badge-primary"><i class="fas fa-file-alt"></i> یک فاکتور / پیشفاکتور</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| /* مدیریت تبها */ | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // غیرفعال کردن همه تبها | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // فعال کردن تب انتخاب شده | |
| const tabId = this.getAttribute('data-tab'); | |
| this.classList.add('active'); | |
| document.getElementById(tabId).classList.add('active'); | |
| // راهاندازی نمودارهای تب فعال | |
| initCircleProgress(tabId); | |
| initBarProgress(tabId); | |
| }); | |
| }); | |
| /* مدیریت آکاردیون */ | |
| const accordionHeader = document.getElementById('authorityGuideHeader'); | |
| const accordionContent = document.getElementById('authorityGuideContent'); | |
| const accordionIcon = document.querySelector('.accordion-icon i'); | |
| if (accordionHeader) { | |
| accordionHeader.addEventListener('click', function() { | |
| accordionContent.classList.toggle('active'); | |
| accordionIcon.classList.toggle('active'); | |
| if (accordionContent.classList.contains('active')) { | |
| accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px'; | |
| } else { | |
| accordionContent.style.maxHeight = '0px'; | |
| } | |
| }); | |
| // بستن آکاردیون در ابتدا | |
| accordionContent.classList.remove('active'); | |
| accordionContent.style.maxHeight = '0px'; | |
| } | |
| /* مدیریت دستهبندی تعمیرات */ | |
| const repairGroupBtns = document.querySelectorAll('[data-repair-group]'); | |
| repairGroupBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| repairGroupBtns.forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| const group = this.getAttribute('data-repair-group'); | |
| updateRepairOptions(group); | |
| }); | |
| }); | |
| function updateRepairOptions(group) { | |
| const repairCategory = document.getElementById('repairCategory'); | |
| if (!repairCategory) return; | |
| // پاک کردن گزینههای قبلی | |
| while (repairCategory.options.length > 1) { | |
| repairCategory.remove(1); | |
| } | |
| // اضافه کردن گزینههای جدید | |
| if (group === 'building') { | |
| addOption(repairCategory, 'electrical', 'تعمیرات برقی'); | |
| addOption(repairCategory, 'plumbing', 'تعمیرات تأسیساتی'); | |
| addOption(repairCategory, 'construction', 'تعمیرات ساختمانی'); | |
| addOption(repairCategory, 'other_building', 'سایر موارد ساختمان'); | |
| } else if (group === 'furniture') { | |
| addOption(repairCategory, 'office_equipment', 'تجهیزات اداری'); | |
| addOption(repairCategory, 'furniture', 'مبلمان و اثاثیه'); | |
| addOption(repairCategory, 'electronic', 'تجهیزات الکترونیکی'); | |
| addOption(repairCategory, 'other_furniture', 'سایر موارد اثاثیه'); | |
| } | |
| } | |
| function addOption(selectElement, value, text) { | |
| const option = document.createElement('option'); | |
| option.value = value; | |
| option.textContent = text; | |
| selectElement.add(option); | |
| } | |
| /* تبدیل اعداد فارسی به انگلیسی و بالعکس */ | |
| function faDigitToEn(str) { | |
| if (!str) return ''; | |
| return str.toString() | |
| .replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d)) | |
| .replace(/[٠-٩]/g, d => '٠١٢٣٤٥٦٧٨٩'.indexOf(d)); | |
| } | |
| function parseNumber(str) { | |
| if (!str) return 0; | |
| const englishStr = faDigitToEn(str); | |
| const numericString = englishStr.replace(/[^0-9.-]/g, ''); | |
| return parseInt(numericString, 10) || 0; | |
| } | |
| function formatNumber(num) { | |
| if (isNaN(num) || num === null) return '۰'; | |
| return new Intl.NumberFormat('fa-IR').format(num); | |
| } | |
| /* مدیریت ورودیهای عددی */ | |
| const numberInputs = document.querySelectorAll('#estimatedCost, #yearlySpent'); | |
| numberInputs.forEach(input => { | |
| input.addEventListener('input', function() { | |
| this.value = this.value.replace(/[^\d,۰-۹٠-٩]/g, ''); | |
| }); | |
| input.addEventListener('blur', function() { | |
| const numericValue = parseNumber(this.value); | |
| if (numericValue > 0) { | |
| this.value = formatNumber(numericValue); | |
| } else if (this.value) { | |
| this.value = ''; | |
| } | |
| }); | |
| }); | |
| /* محاسبه حدود اختیارات */ | |
| const calculateBtn = document.getElementById('calculateBtn'); | |
| if (calculateBtn) { | |
| calculateBtn.addEventListener('click', calculateAndShowResults); | |
| } | |
| function calculateAndShowResults() { | |
| const repairCategory = document.getElementById('repairCategory'); | |
| const estimatedCostInput = document.getElementById('estimatedCost'); | |
| if (!repairCategory.value) { | |
| alert('لطفاً نوع تعمیرات را انتخاب کنید.'); | |
| repairCategory.focus(); | |
| return; | |
| } | |
| if (!estimatedCostInput.value) { | |
| alert('لطفاً برآورد هزینه را وارد کنید.'); | |
| estimatedCostInput.focus(); | |
| return; | |
| } | |
| // مقادیر پیکربندی | |
| const config = { | |
| totalLimit: 1460000000, | |
| quoteThreshold: 200000000, | |
| percentLimits: { | |
| branch: 0.75, | |
| regional: 0.50, | |
| headquarters: 1.0 | |
| } | |
| }; | |
| const unitType = document.getElementById('unitType').value; | |
| const estimatedCost = parseNumber(estimatedCostInput.value); | |
| const yearlySpent = parseNumber(document.getElementById('yearlySpent').value); | |
| if (estimatedCost <= 0) { | |
| alert('لطفاً مبلغ برآورد هزینه را به صورت عددی معتبر وارد کنید.'); | |
| estimatedCostInput.focus(); | |
| return; | |
| } | |
| const totalSpent = yearlySpent + estimatedCost; | |
| const unitLimit = config.totalLimit * config.percentLimits[unitType]; | |
| const needsThreeQuotes = estimatedCost >= config.quoteThreshold; | |
| const needsHigherApproval = totalSpent > unitLimit; | |
| const needsCentralApproval = totalSpent > config.totalLimit; | |
| let approvalLevel = needsCentralApproval ? 'مرکزی' : | |
| (needsHigherApproval ? (unitType === 'branch' ? 'منطقه' : 'مرکزی') : 'واحد'); | |
| const percentOfLimit = Math.round((totalSpent / config.totalLimit) * 100); | |
| // نمایش نتایج | |
| document.getElementById('resultCost').textContent = formatNumber(estimatedCost) + ' ریال'; | |
| document.getElementById('resultQuotes').innerHTML = needsThreeQuotes ? | |
| '<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"></path></svg> بله - نیاز به سه استعلام</span>' : | |
| '<span class="badge badge-primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M22.319,4.431,8.5,18.249a1,1,0,0,1-1.417,0L1.739,12.9a1,1,0,0,1,0-1.417l.119-.119a1,1,0,0,1,1.3-.116l4.72,3.777a.25.25,0,0,0,.319-.034l11.172-11.2a1,1,0,0,1,1.43,0l1.435,1.435A1,1,0,0,1,22.319,4.431Z"></path></svg> خیر - یک استعلام کافیست</span>'; | |
| document.getElementById('resultApprovalLevel').innerHTML = approvalLevel === 'مرکزی' ? | |
| '<span class="badge badge-danger"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M21,6H19V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V6H3A1,1,0,0,0,2,7v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V7h3v7H8v2H6a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-3h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V16a1,1,0,0,0-1-1H14v-2h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H18V7h2a1,1,0,0,0,1-1V7A1,1,0,0,0,21,6Z"></path></svg> واحد مرکزی</span>' : | |
| (approvalLevel === 'منطقه' ? | |
| '<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M12,11.5A2.5,2.5,0,1,1,14.5,9,2.5,2.5,0,0,1,12,11.5Zm0-9A6.5,6.5,0,0,0,5.5,9c0,4.171,5.5,10.144,5.5,10.144S16.5,13.171,16.5,9A6.5,6.5,0,0,0,12,2.5ZM12,12.5a3.5,3.5,0,1,1,3.5-3.5A3.5,3.5,0,0,1,12,12.5Z"></path><circle cx="12" cy="9" r="1.5"></circle></svg> سرپرستی منطقه</span>' : | |
| '<span class="badge badge-success"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path></svg> واحد</span>'); | |
| document.getElementById('resultRegionCoordination').innerHTML = needsHigherApproval ? | |
| `<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M19.87,13.1a1,1,0,0,0-1.44,0l-5.18,5.19V4a1,1,0,0,0-2,0V18.25l-5.19-5.19a1,1,0,0,0-1.44,0,1,1,0,0,0,0,1.41l6.89,6.89a1,1,0,0,0,.16.13.9.9,0,0,0,.15.09,1,1,0,0,0,.16.07,1,1,0,0,0,.18,0,.93.93,0,0,0,.19,0,1,1,0,0,0,.19,0,1.02,1.02,0,0,0,.18,0,1.09,1.09,0,0,0,.16-.07.88.88,0,0,0,.15-.09,1,1,0,0,0,.16-.13l6.89-6.89A1,1,0,0,0,19.87,13.1Z"></path></svg> بله (${formatNumber(percentOfLimit)}% از سقف مجاز)</span>` : | |
| `<span class="badge badge-primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M18.3,8.59l.91-.9a1,1,0,0,0-1.42-1.42l-.9.91a8,8,0,0,0-9.79,0l-.91-.92A1,1,0,0,0,4.77,7.69l.92.91A7.92,7.92,0,0,0,4,13.5,8,8,0,1,0,18.3,8.59ZM12,19.5a6,6,0,1,1,6-6A6,6,0,0,1,12,19.5Zm-2-15h4a1,1,0,0,0,0-2H10a1,1,0,0,0,0,2Zm3,10H12a1,1,0,0,0-.71.29l-2,2a1,1,0,1,0,1.42,1.42l1.29-1.3V15.5a1,1,0,0,0,2,0Z"></path></svg> خیر (${formatNumber(percentOfLimit)}% از سقف مجاز)</span>`; | |
| document.getElementById('resultDocuments').innerHTML = needsThreeQuotes ? | |
| '<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M22.47,5.46h0a1,1,0,0,0,.22-0.33,1,1,0,0,0,0-.76,1,1,0,0,0-.22-0.33h0l-4-4h0a1,1,0,0,0-.33-0.22,1,1,0,0,0-.76,0,1,1,0,0,0-.33.22h0L13.06,4H6A3,3,0,0,0,3,7V24H19V10.94ZM17.06,7H15V4.94ZM5,7A1,1,0,0,1,6,6h7V9h4v13H5Z"></path></svg> سه استعلام قیمت / فاکتور</span>' : | |
| '<span class="badge badge-primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M22.47,5.46h0a1,1,0,0,0,.22-0.33,1,1,0,0,0,0-.76,1,1,0,0,0-.22-0.33h0l-4-4h0a1,1,0,0,0-.33-0.22,1,1,0,0,0-.76,0,1,1,0,0,0-.33.22h0L13.06,4H6A3,3,0,0,0,3,7V24H19V10.94ZM17.06,7H15V4.94ZM5,7A1,1,0,0,1,6,6h7V9h4v13H5Z"></path></svg> یک فاکتور / پیشفاکتور</span>'; | |
| // افزودن اطلاعات اضافی اگر وجود نداشته باشد | |
| let additionalInfo = document.getElementById('additionalResultInfo'); | |
| if (!additionalInfo) { | |
| additionalInfo = document.createElement('div'); | |
| additionalInfo.id = 'additionalResultInfo'; | |
| additionalInfo.classList.add('result-item'); | |
| const resultBody = document.querySelector('#calculationResults .result-body'); | |
| resultBody.appendChild(additionalInfo); | |
| } | |
| additionalInfo.innerHTML = ` | |
| <div class="result-label">وضعیت مصرف بودجه:</div> | |
| <div class="result-value"> | |
| <span class="badge ${percentOfLimit > 75 ? 'badge-warning' : 'badge-success'}"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"> | |
| <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/> | |
| <path d="M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/> | |
| </svg> | |
| ${formatNumber(percentOfLimit)}% از سقف سالانه | |
| </span> | |
| </div> | |
| `; | |
| // نمایش بخش نتایج | |
| const calculationResults = document.getElementById('calculationResults'); | |
| calculationResults.classList.remove('d-none'); | |
| // اسکرول به بخش نتایج | |
| calculationResults.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| /* راهاندازی نمودارهای دایرهای */ | |
| function initCircleProgress(tabId) { | |
| const tab = document.getElementById(tabId); | |
| if (!tab) return; | |
| const circles = tab.querySelectorAll('.circle-value'); | |
| circles.forEach(circle => { | |
| const percent = parseInt(circle.getAttribute('data-percent')); | |
| const radius = circle.getAttribute('r'); | |
| const circumference = 2 * Math.PI * radius; | |
| circle.style.strokeDasharray = circumference; | |
| // تأخیر برای اینکه انیمیشن بعد از نمایش اجرا شود | |
| setTimeout(() => { | |
| const offset = circumference - (percent / 100 * circumference); | |
| circle.style.strokeDashoffset = offset; | |
| }, 300); | |
| }); | |
| } | |
| /* راهاندازی نوارهای پیشرفت */ | |
| function initBarProgress(tabId) { | |
| const tab = document.getElementById(tabId); | |
| if (!tab) return; | |
| const bars = tab.querySelectorAll('.bar-value'); | |
| bars.forEach(bar => { | |
| const value = parseInt(bar.getAttribute('data-value')); | |
| // تأخیر برای اینکه انیمیشن بعد از نمایش اجرا شود | |
| setTimeout(() => { | |
| bar.style.width = value + '%'; | |
| }, 500); | |
| }); | |
| } | |
| /* نمایش خطا */ | |
| function showError(fieldId, message) { | |
| const field = document.getElementById(fieldId); | |
| const errorElement = document.getElementById(fieldId + 'Error'); | |
| if (field && errorElement) { | |
| field.closest('.form-group').classList.add('has-error'); | |
| errorElement.textContent = message; | |
| } | |
| } | |
| /* حذف خطاها */ | |
| function resetErrors() { | |
| document.querySelectorAll('.form-group.has-error').forEach(group => { | |
| group.classList.remove('has-error'); | |
| }); | |
| } | |
| /* سیستم نمایش اعلان */ | |
| function showToast(title, message, type = 'info') { | |
| const toastContainer = document.getElementById('toastContainer'); | |
| if (!toastContainer) return; | |
| const toast = document.createElement('div'); | |
| toast.className = `toast ${type}`; | |
| let iconSvg = ''; | |
| switch (type) { | |
| case 'success': | |
| iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#059669"><path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path></svg>'; | |
| break; | |
| case 'error': | |
| iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#dc2626"><path d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"></path></svg>'; | |
| break; | |
| case 'warning': | |
| iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#d97706"><path d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"></path></svg>'; | |
| break; | |
| default: | |
| iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#2563eb"><path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75v-5.5h-.75a1,1,0,0,1,0-2H13a1,1,0,0,1,1,1V16.5h.5a1,1,0,0,1,0,2Z"></path></svg>'; | |
| } | |
| toast.innerHTML = ` | |
| <div class="toast-icon">${iconSvg}</div> | |
| <div class="toast-content"> | |
| <div class="toast-title">${title}</div> | |
| <div class="toast-message">${message}</div> | |
| </div> | |
| <button class="toast-close">×</button> | |
| <div class="toast-progress"> | |
| <div class="toast-progress-bar"></div> | |
| </div> | |
| `; | |
| toastContainer.appendChild(toast); | |
| // تأخیر کوتاه برای اعمال انیمیشن | |
| setTimeout(() => { | |
| toast.classList.add('show'); | |
| }, 10); | |
| // حذف اعلان پس از مدت مشخص | |
| const progressBar = toast.querySelector('.toast-progress-bar'); | |
| let timeout; | |
| const duration = 5000; // مدت نمایش (5 ثانیه) | |
| // انیمیشن نوار پیشرفت | |
| progressBar.style.transition = `width ${duration}ms linear`; | |
| setTimeout(() => { | |
| progressBar.style.width = '0'; | |
| }, 10); | |
| timeout = setTimeout(() => { | |
| toast.classList.remove('show'); | |
| setTimeout(() => { | |
| toastContainer.removeChild(toast); | |
| }, 300); | |
| }, duration); | |
| // دکمه بستن اعلان | |
| const closeBtn = toast.querySelector('.toast-close'); | |
| closeBtn.addEventListener('click', () => { | |
| clearTimeout(timeout); | |
| toast.classList.remove('show'); | |
| setTimeout(() => { | |
| if (toast.parentNode) { | |
| toastContainer.removeChild(toast); | |
| } | |
| }, 300); | |
| }); | |
| } | |
| /* دکمه چاپ */ | |
| const printBtn = document.getElementById('printBtn'); | |
| if (printBtn) { | |
| printBtn.addEventListener('click', function() { | |
| window.print(); | |
| }); | |
| } | |
| const printResultBtn = document.getElementById('printResultBtn'); | |
| if (printResultBtn) { | |
| printResultBtn.addEventListener('click', function() { | |
| window.print(); | |
| }); | |
| } | |
| /* دکمه محاسبه گر و راهنما */ | |
| const calcBtn = document.getElementById('calcBtn'); | |
| if (calcBtn) { | |
| calcBtn.addEventListener('click', function() { | |
| const calculatorCard = document.getElementById('calculatorCard'); | |
| calculatorCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| }); | |
| } | |
| /* تنظیم اولیه */ | |
| function initializeApp() { | |
| // راهاندازی اولیه نمودارها برای تب فعال | |
| const activeTab = document.querySelector('.tab-content.active'); | |
| if (activeTab) { | |
| const tabId = activeTab.id; | |
| initCircleProgress(tabId); | |
| initBarProgress(tabId); | |
| } | |
| // تنظیم گزینههای اولیه برای دستهبندی تعمیرات | |
| const activeRepairGroup = document.querySelector('[data-repair-group].active'); | |
| if (activeRepairGroup) { | |
| const group = activeRepairGroup.getAttribute('data-repair-group'); | |
| updateRepairOptions(group); | |
| } | |
| // اضافه کردن رویدادها برای اعتبارسنجی فرم | |
| const estimatedCostInput = document.getElementById('estimatedCost'); | |
| if (estimatedCostInput) { | |
| estimatedCostInput.addEventListener('blur', function() { | |
| validateField('estimatedCost'); | |
| }); | |
| } | |
| const yearlySpentInput = document.getElementById('yearlySpent'); | |
| if (yearlySpentInput) { | |
| yearlySpentInput.addEventListener('blur', function() { | |
| validateField('yearlySpent'); | |
| }); | |
| } | |
| const repairCategorySelect = document.getElementById('repairCategory'); | |
| if (repairCategorySelect) { | |
| repairCategorySelect.addEventListener('change', function() { | |
| validateField('repairCategory'); | |
| }); | |
| } | |
| } | |
| function validateField(fieldId) { | |
| resetErrors(); | |
| switch (fieldId) { | |
| case 'repairCategory': | |
| const category = document.getElementById(fieldId); | |
| if (!category.value) { | |
| showError(fieldId, 'لطفاً نوع تعمیرات را انتخاب کنید'); | |
| return false; | |
| } | |
| break; | |
| case 'estimatedCost': | |
| const cost = document.getElementById(fieldId); | |
| if (!cost.value) { | |
| showError(fieldId, 'لطفاً برآورد هزینه را وارد کنید'); | |
| return false; | |
| } else { | |
| const costValue = parseNumber(cost.value); | |
| if (isNaN(costValue) || costValue <= 0) { | |
| showError(fieldId, 'لطفاً مبلغ را به صورت عدد صحیح و مثبت وارد کنید'); | |
| return false; | |
| } | |
| } | |
| break; | |
| case 'yearlySpent': | |
| const yearly = document.getElementById(fieldId); | |
| if (yearly.value) { | |
| const yearlyValue = parseNumber(yearly.value); | |
| if (isNaN(yearlyValue) || yearlyValue < 0) { | |
| showError(fieldId, 'لطفاً مبلغ را به صورت عدد صحیح و غیرمنفی وارد کنید'); | |
| return false; | |
| } | |
| } | |
| break; | |
| } | |
| return true; | |
| } | |
| // تشخیص خطاهای اجرا و نمایش پیام مناسب | |
| window.addEventListener('error', function(e) { | |
| console.error('خطای اجرا:', e.message); | |
| showToast('خطای اجرا', 'متأسفانه خطایی در اجرای برنامه رخ داده است. لطفاً صفحه را مجدداً بارگذاری نمایید.', 'error'); | |
| return false; | |
| }); | |
| // راهاندازی برنامه | |
| initializeApp(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |