Created
October 19, 2025 18:33
-
-
Save sajjadyousefnia/61a701625174a2a9791f38f87d355331 to your computer and use it in GitHub Desktop.
home.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; | |
| --text-dark: #222; | |
| --text-light: #666; | |
| --bg-light: #f9fafb; | |
| --active-green:#19a463; /* سبز اصلی حالت فعال */ | |
| --active-green-ink:#128c52; | |
| --active-bg-1:#f2fff7; | |
| --active-bg-2:#fbfffd; | |
| } | |
| 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; | |
| justify-content: flex-start; | |
| min-height: 100vh; | |
| } | |
| * { | |
| font-family: "IRANSans", sans-serif !important; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 420px; | |
| background: #fff; | |
| margin-top: 60px; | |
| padding: 30px 25px 45px; | |
| border-radius: 18px; | |
| box-shadow: 0 6px 24px rgba(0,0,0,0.06); | |
| text-align: center; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| img.logo { | |
| width: 75px; | |
| height: 75px; | |
| margin-bottom: 10px; | |
| border-radius:15px; | |
| } | |
| h1 { | |
| font-size: 1.4rem; | |
| margin-bottom: 20px; | |
| color: var(--text-dark); | |
| } | |
| h1 span{ | |
| color :var(--brand-color); | |
| } | |
| .status-box{ | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 12px 14px; | |
| border-radius: 14px; | |
| border: 1.5px solid #e9eef3; | |
| background: #fff; | |
| color: #333; | |
| font-weight: 600; | |
| transition: all .25s ease; | |
| margin-top:30px; | |
| margin-bottom:30px; | |
| } | |
| /* ====== حالت فعال حرفه ای ====== */ | |
| .status-box.active{ | |
| color: var(--active-green-ink); | |
| border-color: var(--active-green); | |
| background: linear-gradient(180deg, var(--active-bg-1), var(--active-bg-2)); | |
| /* رینگ و عمق ظریف */ | |
| box-shadow: | |
| 0 8px 22px rgba(25,164,99,.12), | |
| inset 0 0 0 1px rgba(255,255,255,.7), | |
| 0 0 0 3px rgba(25,164,99,.10); /* هاله ی سبز نرم */ | |
| } | |
| /* نوار تأکیدی در لبه راست (هماهنگ با RTL) با گرادیان سبز ← نارنجی برند */ | |
| .status-box.active::before{ | |
| content:""; | |
| position:absolute; | |
| inset-block: 6px; | |
| inset-inline-start: 6px; /* سمت راست در RTL */ | |
| width: 4px; | |
| border-radius: 999px; | |
| background: linear-gradient(180deg, var(--active-green), var(--brand)); | |
| box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset; | |
| } | |
| .status-box .status-icon{ | |
| font-size: 1.25rem; | |
| line-height: 1; | |
| filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); | |
| } | |
| .status-box.inactive{ | |
| color:#d93025; | |
| border-color:#f2b8b8; | |
| background: #fff6f6; | |
| box-shadow: none; | |
| } | |
| .info-card { | |
| background: #f7f8fa; | |
| border-radius: 14px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| text-align: right; | |
| box-shadow: inset 0 0 6px rgba(0,0,0,0.05); | |
| } | |
| .info-label { | |
| font-size: 0.85rem; | |
| color: #777; | |
| } | |
| .info-value { | |
| font-size: 1rem; | |
| color: #333; | |
| margin-top: 4px; | |
| font-weight: 500; | |
| word-break: break-word; | |
| } | |
| .btn { | |
| font-family: "IRANSans", sans-serif !important; | |
| width: 100%; | |
| 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, background 0.2s; | |
| margin-top: 18px; | |
| background: var(--brand-color); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| background: var(--brand-hover); | |
| box-shadow: 0 4px 12px rgba(251,145,0,0.3); | |
| } | |
| .double-buttons { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 18px; | |
| } | |
| .double-buttons .btn { | |
| flex: 1; | |
| margin-top: 0; | |
| } | |
| .footer { | |
| margin-top: 35px; | |
| font-size: 0.85rem; | |
| color: #777; | |
| text-align: center; | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 25px 20px 35px; | |
| margin-top: 40px; | |
| } | |
| h1 { font-size: 1.2rem; } | |
| .btn { font-size: 1rem; } | |
| .double-buttons { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="files/logo.jpg" alt="App Logo" class="logo"> | |
| <h1>اپلیکیشن رویداد تماس <span>هوشمند</span></h1> | |
| <div id="statusBox" class="status-box active"> | |
| <span id="serviceStatus">فعال</span> | |
| </div> | |
| <div class="info-card"> | |
| <div class="info-label">ساعت و تاریخ فعلی:</div> | |
| <div class="info-value" id="currentDateTime">--:--</div> | |
| </div> | |
| <div class="info-card"> | |
| <div class="info-label">آخرین تماس ثبت شده:</div> | |
| <div class="info-value" id="lastCallTime">هیچ تماسی ثبت نشده است</div> | |
| </div> | |
| <div class="double-buttons"> | |
| <button class="btn" id="recentCallsBtn">تماس های اخیر</button> | |
| <button class="btn" id="contactsBtn">لیست مخاطبین</button> | |
| </div> | |
| <button class="btn" id="openSettingsBtn">تنظیمات</button> | |
| <button class="btn" id="openAdminPanelBtn">ورود به پنل مدیریت</button> | |
| <div class="footer">مدیریت تماس های شما به سبک هوشمند</div> | |
| </div> | |
| <script> | |
| function updateTime() { | |
| const now = new Date(); | |
| const options = { hour: '2-digit', minute: '2-digit', second: '2-digit' }; | |
| const date = now.toLocaleDateString('fa-IR'); | |
| const time = now.toLocaleTimeString('fa-IR', options); | |
| document.getElementById("currentDateTime").textContent = `${date} - ${time}`; | |
| } | |
| setInterval(updateTime, 1000); | |
| updateTime(); | |
| document.getElementById("openSettingsBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.openSettings(); | |
| } else { | |
| alert("باز کردن صفحه تنظیمات..."); | |
| } | |
| }); | |
| document.getElementById("openAdminPanelBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.openAdminPanel(); | |
| } else { | |
| window.open("https://radinpayamak.ir", "_blank"); | |
| } | |
| }); | |
| document.getElementById("recentCallsBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.openRecentCalls(); | |
| } else { | |
| alert("نمایش تماس های اخیر..."); | |
| } | |
| }); | |
| document.getElementById("contactsBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.openContacts(); | |
| } else { | |
| alert("نمایش لیست مخاطبین..."); | |
| } | |
| }); | |
| function updateServiceStatus(active) { | |
| const box = document.getElementById("statusBox"); | |
| if (active) { | |
| box.classList.remove("inactive"); | |
| box.classList.add("active"); | |
| box.innerHTML = '<span>فعال</span>'; | |
| } else { | |
| box.classList.remove("active"); | |
| box.classList.add("inactive"); | |
| box.innerHTML = '<span>غیرفعال</span>'; | |
| } | |
| } | |
| function setLastCallTime(datetime) { | |
| document.getElementById("lastCallTime").textContent = datetime || "هیچ تماسی ثبت نشده است"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment