Created
October 19, 2025 18:35
-
-
Save sajjadyousefnia/9e8cc7801e1506ecb361c7d1fc7f1698 to your computer and use it in GitHub Desktop.
setting.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>تنظیمات تماس</title> | |
| <style> | |
| @font-face { | |
| font-family: "IRANSans"; | |
| src: url("fonts/IRANSans.ttf"); | |
| } | |
| :root { | |
| --brand-color: #253149; | |
| --brand-hover: #364a72; | |
| --bg-light: #f9fafb; | |
| --text-dark: #222; | |
| --text-light: #666; | |
| } | |
| * { | |
| font-family: "IRANSans", sans-serif !important; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--bg-light); | |
| margin: 0; | |
| padding: 0; | |
| color: var(--text-dark); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| width: 92%; | |
| max-width: 460px; | |
| background: #fff; | |
| margin-top: 50px; | |
| padding: 25px 20px 40px; | |
| border-radius: 18px; | |
| box-shadow: 0 6px 20px rgba(0,0,0,0.05); | |
| animation: fadeIn 0.4s ease; | |
| position: relative; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(15px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 25px; | |
| } | |
| .header h1 { | |
| font-size: 1.25rem; | |
| color: var(--text-dark); | |
| margin: 0 auto; | |
| } | |
| .back-btn { | |
| border: none; | |
| background: transparent; | |
| color: var(--brand-color); | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: color 0.2s; | |
| } | |
| .back-btn:hover { | |
| color: var(--brand-hover); | |
| } | |
| /* تب ها */ | |
| .tabs { | |
| display: flex; | |
| justify-content: space-between; | |
| background: #f1f3f5; | |
| border-radius: 12px; | |
| margin-bottom: 20px; | |
| overflow: hidden; | |
| } | |
| .tab { | |
| flex: 1; | |
| text-align: center; | |
| padding: 10px 0; | |
| cursor: pointer; | |
| font-weight: 500; | |
| color: #555; | |
| transition: all 0.3s ease; | |
| } | |
| .tab.active { | |
| background: linear-gradient(135deg, var(--brand-color), var(--brand-hover)); | |
| color: white; | |
| } | |
| .settings-group { | |
| display: none; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .settings-group.active { | |
| display: flex; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: #f7f8fa; | |
| padding: 12px 15px; | |
| border-radius: 10px; | |
| border: 1px solid #eee; | |
| transition: all 0.2s ease; | |
| } | |
| .setting-item:hover { | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.06); | |
| } | |
| .setting-label { | |
| font-size: 0.95rem; | |
| color: var(--text-dark); | |
| } | |
| /* سوئیچ */ | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 46px; | |
| height: 26px; | |
| } | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; left: 0; | |
| right: 0; bottom: 0; | |
| background-color: #ccc; | |
| transition: 0.3s; | |
| border-radius: 26px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 20px; | |
| width: 20px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: 0.3s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: var(--brand-color); | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(20px); | |
| } | |
| .save-btn { | |
| width: 100%; | |
| margin-top: 25px; | |
| background: linear-gradient(135deg, var(--brand-color), var(--brand-hover)); | |
| border: none; | |
| color: white; | |
| padding: 12px; | |
| font-size: 1.05rem; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .save-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 3px 10px rgba(251,145,0,0.3); | |
| } | |
| .footer { | |
| margin-top: 25px; | |
| font-size: 0.85rem; | |
| color: #777; | |
| text-align: center; | |
| line-height: 1.7; | |
| } | |
| .footer strong { | |
| color: var(--brand-color); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <button class="back-btn" id="backBtn">بازگشت</button> | |
| <h1>تنظیمات تماس</h1> | |
| </div> | |
| <div class="tabs"> | |
| <div class="tab active" data-target="sim1">سیم کارت ۱</div> | |
| <div class="tab" data-target="sim2">سیم کارت ۲</div> | |
| </div> | |
| <div id="sim1" class="settings-group active"> | |
| <div class="setting-item"> | |
| <span class="setting-label">نمایش اطلاعات مخاطب هنگام تماس (Caller ID)</span> | |
| <label class="switch"><input type="checkbox" id="callerid_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس ورودی (در حال زنگ خوردن)</span> | |
| <label class="switch"><input type="checkbox" id="incoming_start_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس خروجی (در حال برقراری)</span> | |
| <label class="switch"><input type="checkbox" id="outgoing_start_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس موفق ورودی</span> | |
| <label class="switch"><input type="checkbox" id="incoming_success_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس موفق خروجی</span> | |
| <label class="switch"><input type="checkbox" id="outgoing_success_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس ناموفق ورودی</span> | |
| <label class="switch"><input type="checkbox" id="incoming_failed_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس ناموفق خروجی</span> | |
| <label class="switch"><input type="checkbox" id="outgoing_failed_sim1" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">حالت آفلاین</span> | |
| <label class="switch"><input type="checkbox" id="offline_mode_sim1"><span class="slider"></span></label> | |
| </div> | |
| </div> | |
| <div id="sim2" class="settings-group"> | |
| <div class="setting-item"> | |
| <span class="setting-label">نمایش اطلاعات مخاطب هنگام تماس (Caller ID)</span> | |
| <label class="switch"><input type="checkbox" id="callerid_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس ورودی (در حال زنگ خوردن)</span> | |
| <label class="switch"><input type="checkbox" id="incoming_start_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس خروجی (در حال برقراری)</span> | |
| <label class="switch"><input type="checkbox" id="outgoing_start_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس موفق ورودی</span> | |
| <label class="switch"><input type="checkbox" id="incoming_success_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس موفق خروجی</span> | |
| <label class="switch"><input type="checkbox" id="outgoing_success_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس ناموفق ورودی</span> | |
| <label class="switch"><input type="checkbox" id="incoming_failed_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">تماس ناموفق خروجی</span> | |
| <label class="switch"><input type="checkbox" id="outgoing_failed_sim2" checked><span class="slider"></span></label> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">حالت آفلاین</span> | |
| <label class="switch"><input type="checkbox" id="offline_mode_sim2"><span class="slider"></span></label> | |
| </div> | |
| </div> | |
| <button class="save-btn" id="saveSettingsBtn">ذخیره تنظیمات</button> | |
| <div class="footer"> | |
| </div> | |
| </div> | |
| <script> | |
| const tabs = document.querySelectorAll(".tab"); | |
| const groups = document.querySelectorAll(".settings-group"); | |
| tabs.forEach(tab => { | |
| tab.addEventListener("click", () => { | |
| tabs.forEach(t => t.classList.remove("active")); | |
| groups.forEach(g => g.classList.remove("active")); | |
| tab.classList.add("active"); | |
| document.getElementById(tab.dataset.target).classList.add("active"); | |
| }); | |
| }); | |
| document.getElementById("backBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.goBack(); | |
| } else { | |
| history.back(); | |
| } | |
| }); | |
| document.getElementById("saveSettingsBtn").addEventListener("click", () => { | |
| const settings = { | |
| sim1: { | |
| callerid: callerid_sim1.checked, | |
| incoming_start: incoming_start_sim1.checked, | |
| outgoing_start: outgoing_start_sim1.checked, | |
| incoming_success: incoming_success_sim1.checked, | |
| outgoing_success: outgoing_success_sim1.checked, | |
| incoming_failed: incoming_failed_sim1.checked, | |
| outgoing_failed: outgoing_failed_sim1.checked, | |
| offline_mode: offline_mode_sim1.checked, | |
| }, | |
| sim2: { | |
| callerid: callerid_sim2.checked, | |
| incoming_start: incoming_start_sim2.checked, | |
| outgoing_start: outgoing_start_sim2.checked, | |
| incoming_success: incoming_success_sim2.checked, | |
| outgoing_success: outgoing_success_sim2.checked, | |
| incoming_failed: incoming_failed_sim2.checked, | |
| outgoing_failed: outgoing_failed_sim2.checked, | |
| offline_mode: offline_mode_sim2.checked, | |
| }, | |
| }; | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.saveSettings(JSON.stringify(settings)); | |
| } else { | |
| alert("تنظیمات ذخیره شد:\n" + JSON.stringify(settings, null, 2)); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment