Padgenpro1

Paused

App Files Files Community

Ezmary commited on Aug 18, 2025

Commit

f5289e0

verified ·

1 Parent(s): 3ddf518

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +25 -24

templates/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>تست سیستم اعتبار با تایمر</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
         body {
@@ -21,8 +21,7 @@
             padding: 40px;
             background-color: white;
             border-radius: 12px;
-            box-shadow: 0 4px
-            20px rgba(0,0,0,0.1);
             width: 90%;
             max-width: 500px;
         }
@@ -55,7 +54,6 @@
         .success { color: #28a745; }
         .error { color: #dc3545; }
-        /* --- استایل‌های جدید برای تایمر --- */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
@@ -66,34 +64,34 @@
         }
         #countdown-timer {
-            display: none; /* در ابتدا مخفی */
             margin-top: 20px;
             padding: 15px;
-            background-color: #f8f9fa;
             border-radius: 8px;
-            border: 1px solid #dee2e6;
             animation: fadeIn 0.5s ease;
         }
         .timer-content {
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 10px;
         }
         .clock-icon {
-            width: 24px;
-            height: 24px;
-            animation: spin 10s linear infinite;
         }
         #time-left {
             font-size: 1.2rem;
             font-weight: 700;
-            color: #007bff;
-            direction: ltr; /* برای نمایش صحیح اعداد */
         }
         .timer-text {
             font-size: 0.9rem;
-            color: #6c757d;
         }
     </style>
 </head>
@@ -103,12 +101,11 @@
         <button id="action-button">استفاده از یک اعتبار</button>
         <p id="status">برای شروع روی دکمه کلیک کنید.</p>
-        <!-- کانتینر جدید برای تایمر شمارش معکوس -->
         <div id="countdown-timer">
             <div class="timer-content">
-                <svg class="clock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#007bff"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path><path d="M13 7h-2v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg>
                 <div>
-                    <div id="time-left">00:00:00</div>
                     <div class="timer-text">زمان باقی‌مانده تا دریافت ۵ اعتبار رایگان</div>
                 </div>
             </div>
@@ -149,7 +146,7 @@
                 if (countdownInterval) clearInterval(countdownInterval);
                 countdownContainer.style.display = 'block';
-                countdownInterval = setInterval(() => {
                     const now = Date.now() / 1000;
                     const timeLeft = Math.max(0, resetTimestamp - now);
@@ -167,13 +164,17 @@
                     const minutes = Math.floor((timeLeft % 3600) / 60);
                     const seconds = Math.floor(timeLeft % 60);
-                    let timeString = '';
-                    if (days > 0) timeString += `${days} روز و `;
-                    timeString += `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-                    timeLeftDisplay.textContent = timeString;
-                }, 1000);
             }
             actionButton.addEventListener('click', async () => {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تست سیستم اعتبار با تایمر فارسی</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
         body {
             padding: 40px;
             background-color: white;
             border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
             width: 90%;
             max-width: 500px;
         }
         .success { color: #28a745; }
         .error { color: #dc3545; }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
         #countdown-timer {
+            display: none;
             margin-top: 20px;
             padding: 15px;
+            background-color: #fff9e6;
             border-radius: 8px;
+            border: 1px solid #ffeeba;
             animation: fadeIn 0.5s ease;
         }
         .timer-content {
             display: flex;
             align-items: center;
             justify-content: center;
+            gap: 12px;
         }
         .clock-icon {
+            width: 28px;
+            height: 28px;
+            animation: spin 20s linear infinite;
+            flex-shrink: 0;
         }
         #time-left {
             font-size: 1.2rem;
             font-weight: 700;
+            color: #856404;
         }
         .timer-text {
             font-size: 0.9rem;
+            color: #856404;
         }
     </style>
 </head>
         <button id="action-button">استفاده از یک اعتبار</button>
         <p id="status">برای شروع روی دکمه کلیک کنید.</p>
         <div id="countdown-timer">
             <div class="timer-content">
+                <svg class="clock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#856404"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path><path d="M13 7h-2v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg>
                 <div>
+                    <div id="time-left">...</div>
                     <div class="timer-text">زمان باقی‌مانده تا دریافت ۵ اعتبار رایگان</div>
                 </div>
             </div>
                 if (countdownInterval) clearInterval(countdownInterval);
                 countdownContainer.style.display = 'block';
+                const updateTimer = () => {
                     const now = Date.now() / 1000;
                     const timeLeft = Math.max(0, resetTimestamp - now);
                     const minutes = Math.floor((timeLeft % 3600) / 60);
                     const seconds = Math.floor(timeLeft % 60);
+                    let parts = [];
+                    if (days > 0) parts.push(`${days} روز`);
+                    if (hours > 0) parts.push(`${hours} ساعت`);
+                    if (minutes > 0) parts.push(`${minutes} دقیقه`);
+                    if (seconds > 0) parts.push(`${seconds} ثانیه`);
+                    timeLeftDisplay.textContent = parts.slice(0, 3).join(' و '); // نمایش حداکثر سه بخش
+                };
+                updateTimer(); // فراخوانی اولیه
+                countdownInterval = setInterval(updateTimer, 1000);
             }
             actionButton.addEventListener('click', async () => {