Created
October 19, 2025 18:33
-
-
Save sajjadyousefnia/175e19a592424d7cd0db053f6dbc0adc to your computer and use it in GitHub Desktop.
sendsms.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; | |
| --border-light: #ddd; | |
| } | |
| 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); | |
| } | |
| .receiver-box { | |
| background: #fff8f2; | |
| border: 1.5px solid var(--brand-color); | |
| border-radius: 12px; | |
| padding: 12px; | |
| margin-bottom: 20px; | |
| text-align: right; | |
| line-height: 1.6; | |
| font-size: 0.95rem; | |
| } | |
| .receiver-name { | |
| font-weight: bold; | |
| font-size: 1rem; | |
| color: var(--text-dark); | |
| } | |
| .receiver-phone { | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 160px; | |
| resize: none; | |
| padding: 12px; | |
| font-size: 1rem; | |
| border-radius: 10px; | |
| border: 1.5px solid var(--border-light); | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| line-height: 1.7; | |
| } | |
| textarea:focus { | |
| border-color: var(--brand-color); | |
| box-shadow: 0 0 6px rgba(251,145,0,0.25); | |
| } | |
| .ready-text-btn { | |
| margin-top: 10px; | |
| width: 100%; | |
| background: #fff8f2; | |
| border: 1.5px solid var(--brand-color); | |
| border-radius: 10px; | |
| padding: 10px 0; | |
| font-size: 0.95rem; | |
| color: var(--brand-color); | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.2s; | |
| } | |
| .ready-text-btn:hover { | |
| background: var(--brand-color); | |
| color: #fff; | |
| } | |
| .variables-section { | |
| margin: 20px 0 25px; | |
| text-align: right; | |
| } | |
| .variables-section .title { | |
| font-size: 0.95rem; | |
| color: var(--text-dark); | |
| margin-bottom: 10px; | |
| font-weight: 500; | |
| } | |
| .variables { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .var-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .var-btn { | |
| background: #fff8f2; | |
| border: 1.5px solid var(--brand-color); | |
| border-radius: 8px; | |
| padding: 7px 14px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: var(--brand-color); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .var-btn:hover { | |
| background: var(--brand-color); | |
| color: #fff; | |
| transform: translateY(-1px); | |
| } | |
| .var-label { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| } | |
| .send-btn { | |
| width: 100%; | |
| background: var(--brand-color); | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 12px 0; | |
| font-size: 1.05rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .send-btn:hover { | |
| background: var(--brand-hover); | |
| box-shadow: 0 4px 10px rgba(251,145,0,0.3); | |
| transform: translateY(-2px); | |
| } | |
| /* 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: 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: 12px; | |
| } | |
| .ready-text-item { | |
| background: #fff8f2; | |
| border: 1px solid var(--brand-color); | |
| border-radius: 10px; | |
| padding: 10px 12px; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| line-height: 1.7; | |
| font-size: 0.9rem; | |
| } | |
| .ready-text-item:hover { | |
| background: var(--brand-color); | |
| color: #fff; | |
| transform: translateY(-2px); | |
| } | |
| .close-modal { | |
| margin-top: 10px; | |
| 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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <button class="back-btn" id="backBtn">بازگشت</button> | |
| <h1>ارسال پیامک</h1> | |
| </div> | |
| <div class="receiver-box"> | |
| ارسال به : <span class="receiver-name">علی رضایی</span> - <span class="receiver-phone">09123456789</span> | |
| </div> | |
| <textarea id="smsText" placeholder="متن پیامک خود را بنویسید..."></textarea> | |
| <button class="ready-text-btn" id="openReadyTexts">انتخاب از متن های آماده</button> | |
| <div class="variables-section"> | |
| <div class="title">جهت درج اطلاعات مخاطب در پیام از دکمه های زیر استفاده کنید:</div> | |
| <div class="variables"> | |
| <div class="var-row"> | |
| <button class="var-btn" data-var="{name}">{name}</button> | |
| <span class="var-label">نام</span> | |
| </div> | |
| <div class="var-row"> | |
| <button class="var-btn" data-var="{family}">{family}</button> | |
| <span class="var-label">نام خانوادگی</span> | |
| </div> | |
| <div class="var-row"> | |
| <button class="var-btn" data-var="{phone}">{phone}</button> | |
| <span class="var-label">تلفن همراه</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="send-btn" id="sendBtn">ارسال پیامک</button> | |
| </div> | |
| <div class="modal" id="readyTextModal"> | |
| <div class="modal-content"> | |
| <h2>انتخاب از متن های آماده</h2> | |
| <div class="ready-text-item">سلام {name} عزیز، از تماس شما سپاسگزاریم 🌸</div> | |
| <div class="ready-text-item">با سلام، سفارش شما با موفقیت ثبت شد ✅</div> | |
| <div class="ready-text-item">کاربر گرامی، لطفاً در اولین فرصت با ما تماس بگیرید ☎️</div> | |
| <button class="close-modal" id="closeModal">بستن</button> | |
| </div> | |
| </div> | |
| <script> | |
| const modal = document.getElementById("readyTextModal"); | |
| const openBtn = document.getElementById("openReadyTexts"); | |
| const closeBtn = document.getElementById("closeModal"); | |
| openBtn.onclick = () => modal.style.display = "flex"; | |
| closeBtn.onclick = () => modal.style.display = "none"; | |
| window.onclick = e => { if (e.target === modal) modal.style.display = "none"; }; | |
| document.querySelectorAll(".var-btn").forEach(btn => { | |
| btn.addEventListener("click", e => { | |
| const variable = e.target.dataset.var; | |
| const textarea = document.getElementById("smsText"); | |
| const start = textarea.selectionStart; | |
| const end = textarea.selectionEnd; | |
| const text = textarea.value; | |
| textarea.value = text.substring(0, start) + variable + text.substring(end); | |
| textarea.focus(); | |
| textarea.selectionStart = textarea.selectionEnd = start + variable.length; | |
| }); | |
| }); | |
| document.querySelectorAll(".ready-text-item").forEach(item => { | |
| item.addEventListener("click", e => { | |
| const text = e.target.textContent; | |
| const textarea = document.getElementById("smsText"); | |
| textarea.value = text; | |
| modal.style.display = "none"; | |
| }); | |
| }); | |
| document.getElementById("sendBtn").addEventListener("click", () => { | |
| const text = document.getElementById("smsText").value.trim(); | |
| if (text.length === 0) { | |
| alert("لطفاً متن پیام را وارد کنید."); | |
| return; | |
| } | |
| const phone = document.querySelector(".receiver-phone").textContent.trim(); | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.sendMessage(phone, text); | |
| } else { | |
| alert("ارسال پیامک به " + phone + ":\n\n" + text); | |
| } | |
| }); | |
| document.getElementById("backBtn").addEventListener("click", () => { | |
| if (window.AndroidInterface) { | |
| window.AndroidInterface.goBack(); | |
| } else { | |
| history.back(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment