Created
October 19, 2025 18:30
-
-
Save sajjadyousefnia/897d15b614e7f791fc1e4ebd0493f2c6 to your computer and use it in GitHub Desktop.
active.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: #555; | |
| --bg-light: #f9fafb; | |
| } | |
| 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; | |
| } | |
| input,button{ | |
| font-family: "IRANSans", sans-serif; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 400px; | |
| background: #fff; | |
| margin-top: 60px; | |
| padding: 35px 25px; | |
| border-radius: 18px; | |
| box-shadow: 0 6px 24px rgba(0,0,0,0.08); | |
| text-align: center; | |
| animation: fadeIn 0.6s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| img.logo { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: contain; | |
| margin-bottom: 20px; | |
| border-radius:15px; | |
| } | |
| h1 { | |
| font-size: 1.4rem; | |
| color: var(--text-dark); | |
| margin-bottom: 10px; | |
| } | |
| p.description { | |
| font-size: 0.95rem; | |
| color: var(--text-light); | |
| margin-bottom: 25px; | |
| line-height: 1.6; | |
| } | |
| input[type="text"] { | |
| width: 90%; | |
| padding: 12px 14px; | |
| border: 1.5px solid #ddd; | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| outline: none; | |
| text-align: center; | |
| transition: all 0.3s; | |
| } | |
| input[type="text"]:focus { | |
| border-color: var(--brand-color); | |
| box-shadow: 0 0 5px rgba(251,145,0,0.3); | |
| } | |
| .checkbox-area { | |
| margin-top: 20px; | |
| text-align: right; | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| } | |
| .checkbox-area input { | |
| vertical-align: middle; | |
| margin-left: 6px; | |
| } | |
| .checkbox-area a { | |
| color: var(--brand-color); | |
| text-decoration: none; | |
| cursor: pointer; | |
| font-weight: 500; | |
| } | |
| .checkbox-area a:hover { | |
| text-decoration: underline; | |
| } | |
| .activate-btn, .signup-btn { | |
| width: 100%; | |
| padding: 12px 0; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 1.05rem; | |
| font-weight: bold; | |
| color: white; | |
| background: var(--brand-color); | |
| cursor: pointer; | |
| margin-top: 22px; | |
| transition: all 0.25s ease; | |
| } | |
| .activate-btn:hover, .signup-btn:hover { | |
| background: var(--brand-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(251,145,0,0.3); | |
| } | |
| .signup-btn { | |
| background: transparent; | |
| color: var(--brand-color); | |
| border: 2px solid var(--brand-color); | |
| } | |
| .signup-btn:hover { | |
| background: var(--brand-color); | |
| color: #fff; | |
| } | |
| .footer-text { | |
| margin-top: 25px; | |
| font-size: 0.85rem; | |
| color: #777; | |
| line-height: 1.6; | |
| } | |
| /* 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; | |
| border-radius: 14px; | |
| width: 85%; | |
| 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); | |
| } | |
| .modal-content p { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| line-height: 1.7; | |
| } | |
| .close-btn { | |
| display: inline-block; | |
| margin-top: 18px; | |
| padding: 9px 22px; | |
| background: var(--brand-color); | |
| color: #fff; | |
| border-radius: 8px; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: background 0.2s; | |
| } | |
| .close-btn:hover { | |
| background: var(--brand-hover); | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 25px 20px; | |
| margin-top: 40px; | |
| } | |
| h1 { font-size: 1.2rem; } | |
| .activate-btn, .signup-btn { font-size: 1rem; } | |
| } | |
| a { color: #777 !important; | |
| font-weight: bold !important; | |
| text-decoration: none !important;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="files/logo.jpg" class="logo" alt="App Logo"> | |
| <h1>فعال سازی <span>اپلیکیشن</span></h1> | |
| <p class="description"> | |
| برای فعال سازی برنامه، لازم است در سامانه پیامکی حساب کاربری فعال داشته باشید.<br> | |
| پس از ورود به پنل، از مسیر ابزارهای سیستم » ثبت اطلاعات مشتریان » سرویس رویداد تماس، کد فعال سازی خود را دریافت کرده و در کادر زیر وارد نمایید. | |
| </p> | |
| <input type="text" id="activationCode" placeholder="کد فعال سازی را وارد کنید"> | |
| <div class="checkbox-area"> | |
| <label> | |
| <input type="checkbox" id="policyCheckbox"> | |
| من <a id="policyLink">خط مشی حریم خصوصی</a> را می پذیرم. | |
| </label> | |
| </div> | |
| <button class="activate-btn" id="activateBtn">فعالسازی</button> | |
| </div> | |
| <div class="modal" id="policyModal"> | |
| <div class="modal-content"> | |
| <h2>خط مشی حریم خصوصی</h2> | |
| <p> | |
| کلیه اطلاعات و دسترسی های دریافت شده از شما، صرفاً به منظور انجام عملیات اصلی این نرم افزار شامل ارسال پیامک پس از تماس به مشترکین، ارسال پیامک به مخاطبین و درج سوابق تماس مشتریان در باشگاه مشتریان مورد استفاده قرار می گیرد.</p> | |
| <p>تمامی داده ها نزد شرکت محفوظ بوده و در هیچ شرایطی در اختیار اشخاص یا شرکت های ثالث قرار نخواهد گرفت.</p> | |
| <p>لازم به ذکر است این اپلیکیشن تنها به اطلاعات مربوط به شماره تماس ها و مخاطبین شما دسترسی دارد و به محتوای تماس ها دسترسی نداشته و هیچ گونه ضبط یا ذخیره ای از آن انجام نمی دهد. | |
| </p> | |
| <button class="close-btn" id="closeModal">بستن</button> | |
| </div> | |
| </div> | |
| <script> | |
| const policyModal = document.getElementById("policyModal"); | |
| const policyLink = document.getElementById("policyLink"); | |
| const closeModal = document.getElementById("closeModal"); | |
| policyLink.addEventListener("click", () => policyModal.style.display = "flex"); | |
| closeModal.addEventListener("click", () => policyModal.style.display = "none"); | |
| window.onclick = function(event) { | |
| if (event.target === policyModal) { | |
| policyModal.style.display = "none"; | |
| } | |
| }; | |
| document.getElementById("activateBtn").addEventListener("click", function() { | |
| const code = document.getElementById("activationCode").value.trim(); | |
| const accepted = document.getElementById("policyCheckbox").checked; | |
| if (!accepted) { | |
| alert("لطفاً خط مشی حریم خصوصی را بپذیرید."); | |
| return; | |
| } | |
| if (code.length === 0) { | |
| alert("لطفاً کد فعال سازی را وارد کنید."); | |
| return; | |
| } | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.activateApp(code); | |
| } else { | |
| alert("کد فعال سازی: " + code); | |
| } | |
| }); | |
| document.getElementById("signupBtn").addEventListener("click", function() { | |
| window.open("https://radinpayamak.com/login/?utm_source=callTrackerAndroidApp", "_blank"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment