Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>ورود و ثبت نام | نسخه سبک</title> | |
| <style> | |
| /* تنظیمات پایه و متغیرها */ | |
| :root { | |
| --bg-color: #1e293b; | |
| --card-bg: #334155; | |
| --input-bg: #0f172a; | |
| --primary-color: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --text-color: #f1f5f9; | |
| --text-muted: #94a3b8; | |
| --border-color: #475569; | |
| --error-color: #ef4444; | |
| --success-color: #22c55e; | |
| --font-main: 'Tahoma', 'Segoe UI', sans-serif; /* فونت سیستم برای سرعت بالا */ | |
| --radius: 12px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| /* لینک هدر */ | |
| .header-link { | |
| position: fixed; | |
| top: 15px; | |
| left: 15px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| background: rgba(0, 0, 0, 0.2); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| z-index: 100; | |
| } | |
| .header-link:hover { | |
| color: var(--primary-color); | |
| } | |
| /* کانتینر اصلی */ | |
| .container { | |
| width: 100%; | |
| max-width: 400px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| padding: 30px 20px; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| /* هدر فرم */ | |
| .form-header { | |
| text-align: center; | |
| margin-bottom: 25px; | |
| } | |
| .form-header h2 { | |
| font-size: 1.5rem; | |
| color: var(--text-color); | |
| margin-bottom: 5px; | |
| } | |
| .form-header p { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* ورودیها */ | |
| .input-group { | |
| margin-bottom: 15px; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| } | |
| .input-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| /* آیکونهای SVG داخلی */ | |
| .icon { | |
| width: 20px; | |
| height: 20px; | |
| fill: currentColor; | |
| } | |
| .icon-left { | |
| position: absolute; | |
| right: 12px; | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| .input-wrapper input { | |
| width: 100%; | |
| padding: 12px 40px 12px 12px; | |
| background: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| color: var(--text-color); | |
| font-family: var(--font-main); | |
| font-size: 0.95rem; | |
| } | |
| .input-wrapper input:focus { | |
| border-color: var(--primary-color); | |
| outline: none; | |
| } | |
| .toggle-password { | |
| position: absolute; | |
| left: 12px; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| background: none; | |
| border: none; | |
| padding: 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .toggle-password:hover { | |
| color: var(--text-color); | |
| } | |
| /* کپچا */ | |
| .captcha-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| canvas { | |
| background: #fff; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| .refresh-btn { | |
| background: none; | |
| border: none; | |
| color: var(--primary-color); | |
| cursor: pointer; | |
| padding: 5px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .captcha-container input { | |
| flex-grow: 1; | |
| padding: 10px; | |
| border-radius: 6px; | |
| border: 1px solid var(--border-color); | |
| background: var(--input-bg); | |
| color: white; | |
| text-align: center; | |
| min-width: 80px; | |
| } | |
| /* دکمه ارسال */ | |
| .submit-btn { | |
| width: 100%; | |
| padding: 12px; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius); | |
| font-family: var(--font-main); | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .submit-btn:hover { | |
| background: var(--primary-hover); | |
| } | |
| .submit-btn:disabled { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| } | |
| /* تغییر حالت */ | |
| .switch-mode { | |
| text-align: center; | |
| margin-top: 15px; | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| .switch-mode button { | |
| background: none; | |
| border: none; | |
| color: var(--primary-color); | |
| cursor: pointer; | |
| font-family: var(--font-main); | |
| font-weight: bold; | |
| padding: 0 5px; | |
| } | |
| /* کلاسهای کمکی */ | |
| .hidden { | |
| display: none ; | |
| } | |
| /* Toast (پیامها) */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 10px; | |
| } | |
| .toast { | |
| background: var(--card-bg); | |
| border-right: 4px solid var(--primary-color); | |
| padding: 12px 15px; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.3); | |
| color: var(--text-color); | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| max-width: 300px; | |
| animation: slideIn 0.3s ease; | |
| } | |
| .toast.success { border-color: var(--success-color); } | |
| .toast.error { border-color: var(--error-color); } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| @media (max-width: 360px) { | |
| .captcha-container input { | |
| width: 100%; | |
| flex-basis: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link"> | |
| Built with anycoder | |
| </a> | |
| <div class="container"> | |
| <!-- فرم ورود --> | |
| <div id="login-form"> | |
| <div class="form-header"> | |
| <h2>خوش آمدید</h2> | |
| <p>وارد حساب کاربری شوید</p> | |
| </div> | |
| <form onsubmit="handleLogin(event)"> | |
| <div class="input-group"> | |
| <label>نام کاربری</label> | |
| <div class="input-wrapper"> | |
| <!-- SVG Icon: User --> | |
| <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> | |
| <input type="text" id="login-username" placeholder="نام کاربری" autocomplete="off"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>رمز عبور</label> | |
| <div class="input-wrapper"> | |
| <!-- SVG Icon: Lock --> | |
| <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg> | |
| <input type="password" id="login-password" placeholder="رمز عبور"> | |
| <button type="button" class="toggle-password" onclick="togglePassword('login-password', this)"> | |
| <!-- SVG Icon: Eye Slash --> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="captcha-container"> | |
| <canvas id="captchaCanvas" width="100" height="40" title="تغییر کد"></canvas> | |
| <button type="button" class="refresh-btn" onclick="drawCaptcha()"> | |
| <!-- SVG Icon: Refresh --> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg> | |
| </button> | |
| <input type="text" id="login-captcha" placeholder="کد"> | |
| </div> | |
| <button type="submit" class="submit-btn"> | |
| <span>ورود</span> | |
| <!-- SVG Icon: Sign In --> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg> | |
| </button> | |
| <div class="switch-mode"> | |
| حساب ندارید؟ | |
| <button type="button" onclick="switchForm('register')">ثبت نام</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- فرم ثبت نام --> | |
| <div id="register-form" class="hidden"> | |
| <div class="form-header"> | |
| <h2>ثبت نام</h2> | |
| <p>ایجاد حساب جدید</p> | |
| </div> | |
| <form onsubmit="handleRegister(event)"> | |
| <div class="input-group"> | |
| <label>نام کاربری</label> | |
| <div class="input-wrapper"> | |
| <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> | |
| <input type="text" id="reg-username" placeholder="نام کاربری" autocomplete="off"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>رمز عبور</label> | |
| <div class="input-wrapper"> | |
| <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg> | |
| <input type="password" id="reg-password" placeholder="رمز عبور"> | |
| <button type="button" class="toggle-password" onclick="togglePassword('reg-password', this)"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>تکرار رمز</label> | |
| <div class="input-wrapper"> | |
| <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg> | |
| <input type="password" id="reg-confirm-password" placeholder="تکرار رمز عبور"> | |
| </div> | |
| </div> | |
| <div class="captcha-container"> | |
| <canvas id="captchaCanvasReg" width="100" height="40" title="تغییر کد"></canvas> | |
| <button type="button" class="refresh-btn" onclick="drawCaptcha(true)"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg> | |
| </button> | |
| <input type="text" id="reg-captcha" placeholder="کد"> | |
| </div> | |
| <button type="submit" class="submit-btn"> | |
| <span>ثبت نام</span> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> | |
| </button> | |
| <div class="switch-mode"> | |
| حساب دارید؟ | |
| <button type="button" onclick="switchForm('login')">ورود</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <script> | |
| let currentCaptcha = ''; | |
| let currentCaptchaReg = ''; | |
| window.onload = function() { | |
| drawCaptcha(); | |
| drawCaptcha(true); | |
| document.getElementById('captchaCanvas').addEventListener('click', () => drawCaptcha()); | |
| document.getElementById('captchaCanvasReg').addEventListener('click', () => drawCaptcha(true)); | |
| }; | |
| function switchForm(type) { | |
| const login = document.getElementById('login-form'); | |
| const reg = document.getElementById('register-form'); | |
| document.querySelectorAll('input').forEach(i => i.value = ''); | |
| if (type === 'register') { | |
| login.classList.add('hidden'); | |
| reg.classList.remove('hidden'); | |
| } else { | |
| reg.classList.add('hidden'); | |
| login.classList.remove('hidden'); | |
| } | |
| } | |
| function togglePassword(id, btn) { | |
| const input = document.getElementById(id); | |
| const isEyeSlash = btn.innerHTML.includes('M12 7c2.76'); // Check path content roughly | |
| if (input.type === 'password') { | |
| input.type = 'text'; | |
| // Change to Eye Open icon (simple path) | |
| btn.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>'; | |
| } else { | |
| input.type = 'password'; | |
| // Change back to Eye Slash | |
| btn.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>'; | |
| } | |
| } | |
| function drawCaptcha(isReg = false) { | |
| const cvs = document.getElementById(isReg ? 'captchaCanvasReg' : 'captchaCanvas'); | |
| const ctx = cvs.getContext('2d'); | |
| ctx.clearRect(0, 0, cvs.width, cvs.height); | |
| ctx.fillStyle = '#cbd5e1'; | |
| ctx.fillRect(0, 0, cvs.width, cvs.height); | |
| const chars = '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ'; | |
| let txt = ''; | |
| for(let i=0; i<5; i++) txt += chars[Math.floor(Math.random()*chars.length)]; | |
| if(isReg) currentCaptchaReg = txt; else currentCaptcha = txt; | |
| ctx.font = 'bold 24px monospace'; | |
| ctx.textBaseline = 'middle'; | |
| for(let i=0; i<5; i++) { | |
| ctx.save(); | |
| ctx.translate(15 + i*16, 20); | |
| ctx.rotate((Math.random()-0.5)*0.4); | |
| ctx.fillStyle = '#1e293b'; | |
| ctx.fillText(txt[i], 0, 0); | |
| ctx.restore(); | |
| } | |
| // Noise | |
| for(let i=0; i<5; i++) { | |
| ctx.strokeStyle = '#94a3b8'; | |
| ctx.beginPath(); | |
| ctx.moveTo(Math.random()*100, Math.random()*40); | |
| ctx.lineTo(Math.random()*100, Math.random()*40); | |
| ctx.stroke(); | |
| } | |
| } | |
| function handleLogin(e) { | |
| e.preventDefault(); | |
| const u = document.getElementById('login-username').value; | |
| const p = document.getElementById('login-password').value; | |
| const c = document.getElementById('login-captcha').value; | |
| if(!u || !p) return showToast('فیلدها الزامی است', 'error'); | |
| if(c !== currentCaptcha) return showToast('کد اشتباه است', 'error'); | |
| const btn = e.target.querySelector('.submit-btn'); | |
| btn.disabled = true; | |
| btn.innerHTML = 'در حال پردازش...'; | |
| setTimeout(() => { | |
| btn.disabled = false; | |
| btn.innerHTML = '<span>ورود</span><svg class="icon" viewBox="0 0 24 24"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>'; | |
| showToast('خوش آمدید!', 'success'); | |
| }, 1000); | |
| } | |
| function handleRegister(e) { | |
| e.preventDefault(); | |
| const u = document.getElementById('reg-username').value; | |
| const p = document.getElementById('reg-password').value; | |
| const cp = document.getElementById('reg-confirm-password').value; | |
| const c = document.getElementById('reg-captcha').value; | |
| if(!u || !p || !cp) return showToast('فیلدها الزامی است', 'error'); | |
| if(p.length < 6) return showToast('رمز کوتاه است', 'error'); | |
| if(p !== cp) return showToast('تکرار مغایرت دارد', 'error'); | |
| if(c !== currentCaptchaReg) return showToast('کد اشتباه است', 'error'); | |
| const btn = e.target.querySelector('.submit-btn'); | |
| btn.disabled = true; | |
| btn.innerHTML = 'در حال ثبت...'; | |
| setTimeout(() => { | |
| btn.disabled = false; | |
| btn.innerHTML = '<span>ثبت نام</span><svg class="icon" viewBox="0 0 24 24"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'; | |
| showToast('ثبت نام موفق!', 'success'); | |
| switchForm('login'); | |
| }, 1000); | |
| } | |
| function showToast(msg, type) { | |
| const con = document.getElementById('toastContainer'); | |
| const t = document.createElement('div'); | |
| t.className = `toast ${type}`; | |
| const icon = type === 'success' | |
| ? '<svg class="icon" style="fill:#22c55e" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>' | |
| : '<svg class="icon" style="fill:#ef4444" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>'; | |
| t.innerHTML = `${icon}<span>${msg}</span>`; | |
| con.appendChild(t); | |
| setTimeout(() => { | |
| t.style.opacity = '0'; | |
| setTimeout(() => t.remove(), 300); | |
| }, 3000); | |
| } | |
| </script> | |
| </body> | |
| </html> |