Created
October 19, 2025 18:32
-
-
Save sajjadyousefnia/3c9035896c750d574d84865b13cc3969 to your computer and use it in GitHub Desktop.
history.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; | |
| --incoming: #34c759; | |
| --outgoing: #007aff; | |
| } | |
| 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); | |
| } | |
| /* کارت تماس */ | |
| .call-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; | |
| } | |
| .call-card:hover { | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| transform: translateY(-2px); | |
| } | |
| .call-info { | |
| text-align: right; | |
| flex: 1; | |
| } | |
| .call-name { | |
| font-weight: bold; | |
| font-size: 1rem; | |
| color: var(--text-dark); | |
| margin-bottom: 4px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .call-name span { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| font-weight: 400; | |
| } | |
| .call-meta { | |
| font-size: 0.85rem; | |
| color: #777; | |
| margin-top: 2px; | |
| } | |
| .call-type { | |
| font-size: 1.2rem; | |
| } | |
| .call-type.incoming { | |
| color: var(--incoming); | |
| } | |
| .call-type.outgoing { | |
| color: var(--outgoing); | |
| } | |
| .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-calls { | |
| text-align: center; | |
| color: #777; | |
| font-size: 0.95rem; | |
| margin-top: 40px; | |
| } | |
| @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="call-card"> | |
| <div class="call-info"> | |
| <div class="call-name"> | |
| <span class="call-type incoming">⬇</span> علی رضایی <span>(09123456789)</span> | |
| </div> | |
| <div class="call-meta">۱۴۰۴/۰۷/۲۸ - ۱۲:۴۵</div> | |
| </div> | |
| <button class="sms-btn">ارسال پیامک</button> | |
| </div> | |
| <div class="call-card"> | |
| <div class="call-info"> | |
| <div class="call-name"> | |
| <span class="call-type outgoing">⬆</span> محمد احمدی <span>(09351234567)</span> | |
| </div> | |
| <div class="call-meta">۱۴۰۴/۰۷/۲۷ - ۱۸:۲۰</div> | |
| </div> | |
| <button class="sms-btn">ارسال پیامک</button> | |
| </div> | |
| <div class="call-card"> | |
| <div class="call-info"> | |
| <div class="call-name"> | |
| <span class="call-type incoming">⬇</span> تماس ناشناس <span>(09151239876)</span> | |
| </div> | |
| <div class="call-meta">۱۴۰۴/۰۷/۲۶ - ۰۹:۱۵</div> | |
| </div> | |
| <button class="sms-btn">ارسال پیامک</button> | |
| </div> | |
| <!-- <div class="no-calls">هیچ تماسی ثبت نشده است.</div> --> | |
| </div> | |
| <script> | |
| 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(".call-card").querySelector(".call-name span:nth-child(2)")?.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