Created
October 19, 2025 18:31
-
-
Save sajjadyousefnia/14835cb13cd0914703b297a7a5c01fe1 to your computer and use it in GitHub Desktop.
contacts.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; | |
| } | |
| body { | |
| font-family: "IRANSans", sans-serif; | |
| background: var(--bg-light); | |
| margin: 0; | |
| padding: 0; | |
| color: var(--text-dark); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| * { | |
| font-family: "IRANSans", sans-serif !important; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 480px; | |
| 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; | |
| } | |
| @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.2rem; | |
| 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); | |
| } | |
| /* دکمه بالای صفحه */ | |
| .top-action { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| } | |
| .transfer-btn { | |
| background: var(--brand-color); | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 10px 20px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.2s; | |
| } | |
| .transfer-btn:hover { | |
| background: var(--brand-hover); | |
| box-shadow: 0 3px 10px rgba(251,145,0,0.3); | |
| } | |
| /* کارت مخاطب */ | |
| .contact-card { | |
| background: #fff; | |
| border: 1px solid #eee; | |
| border-radius: 14px; | |
| padding: 14px 16px; | |
| margin-bottom: 12px; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.04); | |
| transition: all 0.2s; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .contact-card:hover { | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| transform: translateY(-2px); | |
| } | |
| .contact-info { | |
| text-align: right; | |
| flex: 1; | |
| } | |
| .contact-name { | |
| font-weight: bold; | |
| font-size: 1rem; | |
| color: var(--text-dark); | |
| margin-bottom: 4px; | |
| } | |
| .contact-phone { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| } | |
| .sms-btn { | |
| border: none; | |
| background: var(--brand-color); | |
| color: #fff; | |
| border-radius: 8px; | |
| padding: 8px 14px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.2s; | |
| margin-right: 10px; | |
| white-space: nowrap; | |
| } | |
| .sms-btn:hover { | |
| background: var(--brand-hover); | |
| box-shadow: 0 3px 8px rgba(251,145,0,0.3); | |
| } | |
| .no-contacts { | |
| text-align: center; | |
| color: #777; | |
| font-size: 0.95rem; | |
| margin-top: 40px; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; top: 0; | |
| width: 100%; height: 100%; | |
| background: rgba(0,0,0,0.45); | |
| align-items: center; | |
| justify-content: center; | |
| backdrop-filter: blur(3px); | |
| } | |
| .modal-content { | |
| background: #fff; | |
| padding: 25px 20px; | |
| border-radius: 14px; | |
| width: 90%; | |
| max-width: 420px; | |
| text-align: right; | |
| box-shadow: 0 5px 20px rgba(0,0,0,0.25); | |
| animation: pop 0.3s ease; | |
| } | |
| @keyframes pop { | |
| from { transform: scale(0.9); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| .modal-content h2 { | |
| margin-top: 0; | |
| font-size: 1.1rem; | |
| color: var(--text-dark); | |
| margin-bottom: 15px; | |
| } | |
| label { | |
| font-size: 0.95rem; | |
| color: var(--text-dark); | |
| } | |
| select { | |
| width: 100%; | |
| padding: 10px; | |
| border-radius: 8px; | |
| border: 1.5px solid #ccc; | |
| margin-top: 5px; | |
| margin-bottom: 15px; | |
| font-size: 0.95rem; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| select:focus { | |
| border-color: var(--brand-color); | |
| box-shadow: 0 0 5px rgba(251,145,0,0.2); | |
| } | |
| .checkbox-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-bottom: 20px; | |
| } | |
| .start-transfer-btn { | |
| width: 100%; | |
| background: var(--brand-color); | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 10px 0; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .start-transfer-btn:hover { | |
| background: var(--brand-hover); | |
| box-shadow: 0 4px 10px rgba(251,145,0,0.3); | |
| } | |
| .close-modal { | |
| margin-top: 15px; | |
| display: block; | |
| width: 100%; | |
| border: none; | |
| background: #ddd; | |
| color: #333; | |
| border-radius: 8px; | |
| padding: 8px 0; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .close-modal:hover { | |
| background: #ccc; | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 20px 16px 30px; | |
| margin-top: 35px; | |
| } | |
| .header h1 { | |
| font-size: 1.1rem; | |
| } | |
| .sms-btn { | |
| font-size: 0.85rem; | |
| padding: 7px 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <button class="back-btn" id="backBtn">بازگشت</button> | |
| <h1>لیست مخاطبین</h1> | |
| </div> | |
| <div class="top-action"> | |
| <button class="transfer-btn" id="openTransferModal">انتقال مخاطبین به سامانه</button> | |
| </div> | |
| <div class="contact-card"> | |
| <div class="contact-info"> | |
| <div class="contact-name">علی رضایی</div> | |
| <div class="contact-phone">09123456789</div> | |
| </div> | |
| <button class="sms-btn">ارسال پیامک</button> | |
| </div> | |
| <div class="contact-card"> | |
| <div class="contact-info"> | |
| <div class="contact-name">محمد احمدی</div> | |
| <div class="contact-phone">09351234567</div> | |
| </div> | |
| <button class="sms-btn">ارسال پیامک</button> | |
| </div> | |
| <div class="contact-card"> | |
| <div class="contact-info"> | |
| <div class="contact-name">مخاطب بدون نام</div> | |
| <div class="contact-phone">09151239876</div> | |
| </div> | |
| <button class="sms-btn">ارسال پیامک</button> | |
| </div> | |
| <!-- <div class="no-contacts">هیچ مخاطبی یافت نشد.</div> --> | |
| </div> | |
| <div class="modal" id="transferModal"> | |
| <div class="modal-content"> | |
| <h2>انتقال مخاطبین به سامانه</h2> | |
| <label for="phonebookSelect">انتخاب دفترچه تلفن:</label> | |
| <select id="phonebookSelect"> | |
| <option value="">یک دفترچه را انتخاب کنید...</option> | |
| <option value="default">دفترچه اصلی</option> | |
| <option value="vip">مشتریان ویژه</option> | |
| </select> | |
| <div class="checkbox-row"> | |
| <input type="checkbox" id="newPhonebook"> | |
| <label for="newPhonebook">ایجاد دفترچه تلفن جدید</label> | |
| </div> | |
| <button class="start-transfer-btn" id="startTransfer">شروع انتقال</button> | |
| <button class="close-modal" id="closeModal">بستن</button> | |
| </div> | |
| </div> | |
| <script> | |
| const modal = document.getElementById("transferModal"); | |
| const openBtn = document.getElementById("openTransferModal"); | |
| const closeBtn = document.getElementById("closeModal"); | |
| const startBtn = document.getElementById("startTransfer"); | |
| openBtn.onclick = () => modal.style.display = "flex"; | |
| closeBtn.onclick = () => modal.style.display = "none"; | |
| window.onclick = e => { if (e.target === modal) modal.style.display = "none"; }; | |
| startBtn.onclick = () => { | |
| const phonebook = document.getElementById("phonebookSelect").value; | |
| const newBook = document.getElementById("newPhonebook").checked; | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.transferContacts(phonebook, newBook); | |
| } else { | |
| alert("شروع انتقال مخاطبین..."); | |
| } | |
| modal.style.display = "none"; | |
| }; | |
| document.getElementById("backBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.goBack(); | |
| } else { | |
| history.back(); | |
| } | |
| }); | |
| document.querySelectorAll(".sms-btn").forEach(btn => { | |
| btn.addEventListener("click", e => { | |
| const phone = e.target.closest(".contact-card").querySelector(".contact-phone")?.textContent || ""; | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.sendSms(phone); | |
| } else { | |
| alert("ارسال پیامک به " + phone); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment