| <!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> |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| body { |
| font-family: 'Vazir', 'Tahoma', sans-serif; |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| background: linear-gradient(145deg, #0b1120 0%, #1a253a 100%); |
| color: #fff; |
| padding: 1rem; |
| } |
| .container { |
| max-width: 700px; |
| width: 100%; |
| background: rgba(255, 255, 255, 0.06); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 50px; |
| padding: 2.5rem 2rem; |
| box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); |
| text-align: center; |
| transition: all 0.3s ease; |
| } |
| |
| .logo { |
| font-size: 3.5rem; |
| margin-bottom: 0.2rem; |
| } |
| h1 { |
| font-size: 2.2rem; |
| font-weight: 800; |
| background: linear-gradient(135deg, #f6d365, #fda085); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| margin-bottom: 0.5rem; |
| } |
| .sub { |
| color: #aab4ce; |
| font-size: 1rem; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
| padding-bottom: 1.2rem; |
| margin-bottom: 1.8rem; |
| } |
| |
| .timer-box { |
| background: rgba(0, 0, 0, 0.35); |
| border-radius: 30px; |
| padding: 1.8rem 1rem; |
| margin-bottom: 2rem; |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| .timer-label { |
| font-size: 0.9rem; |
| color: #8d99c4; |
| letter-spacing: 1px; |
| } |
| #countdown { |
| font-size: 4.2rem; |
| font-weight: 700; |
| font-family: 'Courier New', monospace; |
| background: linear-gradient(135deg, #00dbde, #fc00ff); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| line-height: 1.3; |
| direction: ltr; |
| } |
| .used-time { |
| color: #8d99c4; |
| font-size: 0.95rem; |
| margin-top: 0.2rem; |
| } |
| |
| .btn { |
| display: inline-block; |
| padding: 1rem 2.8rem; |
| border: none; |
| border-radius: 60px; |
| font-size: 1.4rem; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.25s ease; |
| text-decoration: none; |
| color: #fff; |
| background: linear-gradient(135deg, #f093fb, #f5576c); |
| box-shadow: 0 8px 25px rgba(245, 87, 108, 0.35); |
| margin: 0.3rem; |
| } |
| .btn:hover { |
| transform: translateY(-3px) scale(1.02); |
| box-shadow: 0 12px 35px rgba(245, 87, 108, 0.5); |
| } |
| .btn:active { |
| transform: scale(0.96); |
| } |
| .btn-secondary { |
| background: linear-gradient(135deg, #4facfe, #00f2fe); |
| box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3); |
| } |
| .btn-secondary:hover { |
| box-shadow: 0 12px 35px rgba(79, 172, 254, 0.5); |
| } |
| .btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| transform: none !important; |
| box-shadow: none !important; |
| } |
| |
| .blocked-icon { |
| font-size: 5rem; |
| display: block; |
| margin-bottom: 0.5rem; |
| } |
| .blocked-title { |
| font-size: 3rem; |
| font-weight: 800; |
| color: #fda085; |
| margin-bottom: 0.2rem; |
| } |
| .blocked-msg { |
| font-size: 1.6rem; |
| color: #e0e7ff; |
| } |
| .blocked-sub { |
| font-size: 1rem; |
| color: #8d99c4; |
| margin-top: 1.5rem; |
| border-top: 1px solid rgba(255, 255, 255, 0.08); |
| padding-top: 1.5rem; |
| } |
| .hidden { |
| display: none !important; |
| } |
| |
| .reset-btn { |
| margin-top: 2rem; |
| background: transparent; |
| border: 1px solid #4a5568; |
| color: #a0aec0; |
| padding: 0.5rem 1.5rem; |
| border-radius: 40px; |
| font-size: 0.8rem; |
| cursor: pointer; |
| transition: 0.2s; |
| } |
| .reset-btn:hover { |
| background: #2d3748; |
| border-color: #fc8181; |
| color: #fc8181; |
| } |
| |
| @media (max-width: 500px) { |
| .container { |
| padding: 1.5rem 1rem; |
| border-radius: 30px; |
| } |
| #countdown { |
| font-size: 3rem; |
| } |
| h1 { |
| font-size: 1.8rem; |
| } |
| .btn { |
| font-size: 1.1rem; |
| padding: 0.8rem 1.8rem; |
| } |
| .blocked-title { |
| font-size: 2.2rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container" id="app"> |
|
|
| |
| <div id="state-play"> |
| <div class="logo">🎯</div> |
| <h1>تانک استارز</h1> |
| <div class="sub">⏳ زمان مجاز روزانه: ۱ ساعت</div> |
|
|
| <div class="timer-box"> |
| <div class="timer-label">⌛ زمان باقیمانده</div> |
| <div id="countdown">01:00:00</div> |
| <div class="used-time" id="usedDisplay">استفادهشده: ۰ دقیقه</div> |
| </div> |
|
|
| |
| <button class="btn" id="playBtn">🔥 شروع بازی</button> |
| <br /><br /> |
| <small style="color:#6b7a9f; font-size:0.8rem;"> |
| ⚡ با کلیک، بازی در پنجرهی جدید باز میشود. <br /> |
| این صفحه را باز بگذارید تا زمانسنج کار کند! |
| </small> |
| <br /> |
| <button class="reset-btn" id="forceResetBtn">🔄 ریست دستی (فقط برای تست)</button> |
| </div> |
|
|
| |
| <div id="state-blocked" class="hidden"> |
| <span class="blocked-icon">⏰</span> |
| <div class="blocked-title">بسه بچه جون !😁</div> |
| <div class="blocked-msg">دیگه زمان بازی تموم شد!</div> |
| <div class="blocked-msg" style="font-size:1.8rem; margin-top:0.5rem;">برو بعداً بیا !!</div> |
| <div class="blocked-sub"> |
| ⭐ امروز ۱ ساعت کامل بازی کردی. <br /> |
| فردا دوباره خوش اومدی! روز نو، بازی نو. |
| </div> |
| <br /> |
| <button class="reset-btn" id="resetBtnAdmin">🔑 ریست اجباری (فقط مدیر)</button> |
| </div> |
|
|
| </div> |
|
|
| <script> |
| |
| |
| |
| |
| (function() { |
| |
| const LIMIT_MS = 60 * 60 * 1000; |
| const STORAGE_KEY = 'tank_stars_data'; |
| const GAME_URL = 'https://www.crazygames.com/game/tank-stars-online'; |
| |
| |
| const statePlay = document.getElementById('state-play'); |
| const stateBlocked = document.getElementById('state-blocked'); |
| const countdownEl = document.getElementById('countdown'); |
| const usedDisplay = document.getElementById('usedDisplay'); |
| const playBtn = document.getElementById('playBtn'); |
| const resetBtnAdmin = document.getElementById('resetBtnAdmin'); |
| const forceResetBtn = document.getElementById('forceResetBtn'); |
| |
| |
| let timerInterval = null; |
| let currentUsed = 0; |
| let isTimerRunning = false; |
| |
| |
| function formatTime(ms) { |
| if (ms < 0) ms = 0; |
| const totalSec = Math.floor(ms / 1000); |
| const h = Math.floor(totalSec / 3600); |
| const m = Math.floor((totalSec % 3600) / 60); |
| const s = totalSec % 60; |
| if (h > 0) { |
| return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0'); |
| } |
| return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0'); |
| } |
| |
| function formatMinutes(ms) { |
| const min = Math.floor(ms / 60000); |
| return min + ' دقیقه'; |
| } |
| |
| |
| function loadData() { |
| const raw = localStorage.getItem(STORAGE_KEY); |
| if (!raw) { |
| |
| return { |
| date: new Date().toDateString(), |
| used: 0, |
| isBlocked: false |
| }; |
| } |
| try { |
| const data = JSON.parse(raw); |
| const today = new Date().toDateString(); |
| |
| if (data.date !== today) { |
| return { |
| date: today, |
| used: 0, |
| isBlocked: false |
| }; |
| } |
| return data; |
| } catch (e) { |
| return { |
| date: new Date().toDateString(), |
| used: 0, |
| isBlocked: false |
| }; |
| } |
| } |
| |
| |
| function saveData(data) { |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); |
| } |
| |
| |
| function updateUI() { |
| const data = loadData(); |
| currentUsed = data.used || 0; |
| |
| const remaining = LIMIT_MS - currentUsed; |
| |
| |
| if (remaining > 0) { |
| countdownEl.textContent = formatTime(remaining); |
| usedDisplay.textContent = 'استفادهشده: ' + formatMinutes(currentUsed); |
| } else { |
| countdownEl.textContent = '00:00:00'; |
| usedDisplay.textContent = 'استفادهشده: ۱ ساعت (تمام)'; |
| } |
| |
| |
| if (remaining <= 0) { |
| |
| statePlay.classList.add('hidden'); |
| stateBlocked.classList.remove('hidden'); |
| if (timerInterval) { |
| clearInterval(timerInterval); |
| timerInterval = null; |
| isTimerRunning = false; |
| } |
| |
| const d = loadData(); |
| if (!d.isBlocked) { |
| d.isBlocked = true; |
| saveData(d); |
| } |
| |
| playBtn.disabled = true; |
| } else { |
| |
| statePlay.classList.remove('hidden'); |
| stateBlocked.classList.add('hidden'); |
| playBtn.disabled = false; |
| |
| if (!timerInterval) { |
| startTimer(); |
| } |
| } |
| } |
| |
| |
| function startTimer() { |
| if (timerInterval) { |
| clearInterval(timerInterval); |
| timerInterval = null; |
| } |
| isTimerRunning = true; |
| timerInterval = setInterval(() => { |
| |
| const data = loadData(); |
| let newUsed = (data.used || 0) + 1000; |
| |
| if (newUsed >= LIMIT_MS) { |
| newUsed = LIMIT_MS; |
| |
| data.used = newUsed; |
| data.isBlocked = true; |
| saveData(data); |
| |
| updateUI(); |
| if (timerInterval) { |
| clearInterval(timerInterval); |
| timerInterval = null; |
| isTimerRunning = false; |
| } |
| return; |
| } |
| |
| |
| data.used = newUsed; |
| data.isBlocked = false; |
| saveData(data); |
| |
| currentUsed = newUsed; |
| const remaining = LIMIT_MS - currentUsed; |
| countdownEl.textContent = formatTime(remaining); |
| usedDisplay.textContent = 'استفادهشده: ' + formatMinutes(currentUsed); |
| |
| }, 1000); |
| } |
| |
| |
| function openGame() { |
| const data = loadData(); |
| if (data.isBlocked || (data.used || 0) >= LIMIT_MS) { |
| alert('⛔ وقت بازی تموم شده! صفحه رو رفرش کن تا پیام رو ببینی.'); |
| updateUI(); |
| return; |
| } |
| |
| window.open(GAME_URL, '_blank'); |
| |
| console.log('🎮 بازی باز شد، زمان در حال شمارش است...'); |
| } |
| |
| |
| function forceReset() { |
| if (confirm('🔥 آیا مطمئنی میخوای زمان رو ریست کنی؟ (فقط برای تست)')) { |
| const today = new Date().toDateString(); |
| const newData = { |
| date: today, |
| used: 0, |
| isBlocked: false |
| }; |
| saveData(newData); |
| |
| if (timerInterval) { |
| clearInterval(timerInterval); |
| timerInterval = null; |
| isTimerRunning = false; |
| } |
| updateUI(); |
| startTimer(); |
| alert('✅ زمان ریست شد!'); |
| } |
| } |
| |
| |
| function init() { |
| |
| const data = loadData(); |
| |
| if (data.isBlocked && (data.used || 0) < LIMIT_MS) { |
| data.isBlocked = false; |
| saveData(data); |
| } |
| |
| if ((data.used || 0) >= LIMIT_MS) { |
| data.isBlocked = true; |
| saveData(data); |
| } |
| |
| updateUI(); |
| |
| |
| playBtn.addEventListener('click', openGame); |
| resetBtnAdmin.addEventListener('click', forceReset); |
| forceResetBtn.addEventListener('click', forceReset); |
| |
| |
| window.addEventListener('beforeunload', function() { |
| if (timerInterval) { |
| clearInterval(timerInterval); |
| timerInterval = null; |
| isTimerRunning = false; |
| } |
| }); |
| |
| |
| document.addEventListener('visibilitychange', function() { |
| if (!document.hidden) { |
| |
| updateUI(); |
| |
| if (!timerInterval && !document.getElementById('state-blocked').classList.contains('hidden') === |
| false) { |
| const data2 = loadData(); |
| if ((data2.used || 0) < LIMIT_MS) { |
| startTimer(); |
| } |
| } |
| } |
| }); |
| |
| console.log('🧠 ابر الگوریتم کنترل زمان با موفقیت بارگذاری شد!'); |
| } |
| |
| |
| init(); |
| |
| })(); |
| </script> |
|
|
| </body> |
| </html> |
