Base64 编码 - 小睿 AI 工具�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } .tool-name { font-size: 24px; font-weight: bold; color: #333; } .back-link { color: #667eea; text-decoration: none; } .mode-tabs { display: flex; gap: 10px; margin-bottom: 20px; } .mode-tab { flex: 1; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; text-align: center; cursor: pointer; font-weight: 500; } .mode-tab.active { border-color: #667eea; background: #667eea; color: #fff; } .textarea-group { margin-bottom: 20px; } .textarea-group label { display: block; margin-bottom: 8px; font-weight: 500; } textarea { width: 100%; min-height: 150px; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 14px; font-family: 'Courier New', monospace; resize: vertical; } textarea:focus { outline: none; border-color: #667eea; } .btn-group { display: flex; gap: 10px; flex-wrap: wrap; } .btn { flex: 1; padding: 15px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; min-width: 120px; } .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .btn-secondary { background: #f0f0f0; color: #333; } .result-box { margin-top: 30px; } .result-box label { display: block; margin-bottom: 8px; font-weight: 500; } .copy-btn { background: #52c41a; color: #fff; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; float: right; } .stats { display: flex; gap: 20px; margin-top: 15px; color: #666; font-size: 14px; } </style>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?419d570f333971ceaae9a6e2f8414d02"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Base64 编码", "description": "Base64 编码解码工具", "url": "https://xrdj.club/tool.php?id=34", "applicationCategory": "UtilitiesApplication", "operatingSystem": "All", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "CNY" }, "author": { "@type": "Organization", "name": "小睿 AI 工具箱", "url": "https://xrdj.club" } } </script> </head> <body> <div class="container"> <div class="header"> <div class="tool-name">🔐 Base64 编码</div> <a href="/" class="back-link">�?返回首页</a> </div> <div class="mode-tabs"> <div class="mode-tab active" onclick="setMode('encode')" id="encodeTab">🔒 编码 (Encode)</div> <div class="mode-tab" onclick="setMode('decode')" id="decodeTab">🔓 解码 (Decode)</div> </div> <div class="textarea-group"> <label id="inputLabel">输入要编码的文本</label> <textarea id="inputText" placeholder="在此输入文本..."></textarea> </div> <div class="btn-group"> <button class="btn btn-primary" onclick="process()" id="processBtn">🚀 开始编�?/button> <button class="btn btn-secondary" onclick="clearAll()">🗑�?清空</button> <button class="btn btn-secondary" onclick="swapText()">🔄 交换</button> </div> <div class="result-box"> <label> 结果 <button class="copy-btn" onclick="copyResult()">📋 复制</button> </label> <textarea id="outputText" readonly placeholder="结果将显示在这里..."></textarea> <div class="stats"> <span>输入长度�?strong id="inputLength">0</strong></span> <span>输出长度�?strong id="outputLength">0</strong></span> </div> </div> </div> <script> let currentMode = 'encode'; function setMode(mode) { currentMode = mode; document.getElementById('encodeTab').classList.toggle('active', mode === 'encode'); document.getElementById('decodeTab').classList.toggle('active', mode === 'decode'); document.getElementById('inputLabel').textContent = mode === 'encode' ? '输入要编码的文本' : '输入要解码的 Base64'; document.getElementById('processBtn').textContent = mode === 'encode' ? '🚀 开始编�? : '🚀 开始解�?; } function process() { const input = document.getElementById('inputText').value; if (!input.trim()) { alert('请输入内�?); return; } try { let result; if (currentMode === 'encode') { result = btoa(unescape(encodeURIComponent(input))); } else { result = decodeURIComponent(escape(atob(input))); } document.getElementById('outputText').value = result; document.getElementById('outputLength').textContent = result.length; } catch (e) { alert('处理失败�? + e.message); } document.getElementById('inputLength').textContent = input.length; } function copyResult() { const output = document.getElementById('outputText'); if (output.value) { output.select(); document.execCommand('copy'); alert('已复制到剪贴板！'); } } function clearAll() { document.getElementById('inputText').value = ''; document.getElementById('outputText').value = ''; document.getElementById('inputLength').textContent = '0'; document.getElementById('outputLength').textContent = '0'; } function swapText() { const input = document.getElementById('inputText'); const output = document.getElementById('outputText'); const temp = input.value; input.value = output.value; output.value = temp; } </script> <div class="ad-container ad-banner" style="text-align: center; padding: 15px; margin: 10px auto; background: #f9f9f9; border-radius: 8px; max-width: 100%; position: relative; z-index: 50;"><script> atOptions = { 'key' : '49db223ddf34a5bd582c6217c9b9fe7f', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script src="https://www.highperformanceformat.com/49db223ddf34a5bd582c6217c9b9fe7f/invoke.js"></script></div><div class="ad-container ad-native" style="margin: 20px auto; padding: 15px; background: #f9f9f9; border-radius: 8px; max-width: 100%;"><script> atOptions = { 'key' : '8c4626e3dac3f00cf12f158eb0bbd5d7', 'format' : 'iframe', 'height' : 250, 'width' : 300, 'params' : {} }; </script> <script src="https://www.highperformanceformat.com/8c4626e3dac3f00cf12f158eb0bbd5d7/invoke.js"></script></div> <style> /* 剩余次数指示器 */ .free-uses-indicator { position: fixed; bottom: 20px; right: 20px; z-index: 9998; background: #fff; border-radius: 20px; padding: 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s; border: 1px solid #e8e8e8; } .free-uses-indicator:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0,0,0,0.18); } .free-uses-count { font-weight: 700; font-size: 16px; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .free-uses-exhausted { background: linear-gradient(135deg, #f5576c, #f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 付费弹窗 */ .paywall-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .paywall-overlay.active { display: flex; } .paywall-modal { background: #fff; border-radius: 20px; padding: 35px 30px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: paywallSlideIn 0.3s ease; } @keyframes paywallSlideIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .paywall-icon { font-size: 56px; margin-bottom: 15px; } .paywall-title { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 10px; } .paywall-desc { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 20px; } .paywall-price { font-size: 36px; font-weight: 800; color: #f5576c; margin-bottom: 5px; } .paywall-price-sub { font-size: 13px; color: #999; margin-bottom: 20px; } .paywall-features { text-align: left; margin: 20px 0; padding: 0; list-style: none; } .paywall-features li { padding: 8px 0; font-size: 14px; color: #555; display: flex; align-items: center; gap: 8px; } .paywall-features li::before { content: "✅"; } .btn-unlock { display: block; width: 100%; padding: 14px; margin: 8px 0; background: linear-gradient(135deg, #f5576c, #f093fb); color: #fff; border: none; border-radius: 12px; font-size: 17px; font-weight: 700; cursor: pointer; transition: all 0.3s; text-decoration: none; text-align: center; } .btn-unlock:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(245,87,108,0.4); } .btn-unlock-alipay { background: linear-gradient(135deg, #1677ff, #69b1ff); } .btn-unlock-alipay:hover { box-shadow: 0 6px 25px rgba(22,119,255,0.4); } .btn-close-paywall { background: none; border: none; color: #999; font-size: 14px; cursor: pointer; padding: 8px; margin-top: 5px; } </style>  <div class="free-uses-indicator" id="freeUsesIndicator" onclick="showPaywall()"> <span>🎯</span> <span>剩余免费：</span> <span class="free-uses-count" id="freeUsesCount">3</span> <span>次</span> </div>  <div class="paywall-overlay" id="paywallOverlay"> <div class="paywall-modal"> <div class="paywall-icon">🔒</div> <div class="paywall-title">免费次数已用完</div> <div class="paywall-desc"> 您已用完 3 次免费试用，支付一次即可永久解锁全部 AI 工具 </div> <div class="paywall-price">¥9.9</div> <div class="paywall-price-sub">一次付费，永久使用</div> <ul class="paywall-features"> <li>无限使用所有 AI 工具</li> <li>优先体验新功能</li> <li>无需消耗积分</li> <li>专属客服支持</li> </ul> <a href="/recharge.php?type=premium" class="btn-unlock btn-unlock-alipay">💳 支付宝支付 ¥9.9</a> <button class="btn-unlock" onclick="handleWechatPay()">💚 微信支付 ¥9.9</button> <button class="btn-close-paywall" onclick="closePaywall()">稍后再说</button> </div> </div> <script> // 付费墙逻辑 var _freeRemaining = 3; var _isLoggedIn = ; function updateFreeUsesDisplay(remaining) { _freeRemaining = remaining; var el = document.getElementById('freeUsesCount'); var indicator = document.getElementById('freeUsesIndicator'); if (!el || !indicator) return; if (remaining === -1) { // 付费用户 indicator.innerHTML = '<span>👑</span><span style="color:#f59e0b;font-weight:600;">已解锁全部功能</span>'; indicator.style.background = 'linear-gradient(135deg, #fff9e6, #fff3cd)'; indicator.style.border = '1px solid #f59e0b'; indicator.onclick = null; } else if (remaining === 0) { el.textContent = '0'; el.className = 'free-uses-exhausted'; indicator.style.background = '#fff5f5'; indicator.style.border = '1px solid #f5576c'; } else { el.textContent = remaining; el.className = 'free-uses-count'; indicator.style.background = '#fff'; indicator.style.border = '1px solid #e8e8e8'; } } function showPaywall() { document.getElementById('paywallOverlay').classList.add('active'); } function closePaywall() { document.getElementById('paywallOverlay').classList.remove('active'); } function handleWechatPay() { // 跳转到充值页面，预选 premium 类型 window.location.href = '/recharge.php?type=premium&amount=' + 9.9; } // 拦截 AJAX 响应，检测免费次数耗尽 (function() { var originalFetch = window.fetch; window.fetch = function() { return originalFetch.apply(this, arguments).then(function(response) { var cloned = response.clone(); cloned.json().then(function(data) { if (data && data.free_remaining !== undefined) { updateFreeUsesDisplay(data.free_remaining); if (data.code === 'free_limit_exceeded' || (data.free_remaining === 0 && !data.is_premium)) { showPaywall(); } } }).catch(function() {}); return response; }); }; // 也拦截 XMLHttpRequest var XHR = XMLHttpRequest.prototype; var originalOpen = XHR.open; var originalSend = XHR.send; XHR.open = function(method, url) { this._url = url; return originalOpen.apply(this, arguments); }; XHR.send = function() { var xhr = this; var onload = xhr.onload; xhr.onload = function() { try { var data = JSON.parse(xhr.responseText); if (data && data.free_remaining !== undefined) { updateFreeUsesDisplay(data.free_remaining); if (data.code === 'free_limit_exceeded' || (data.free_remaining === 0 && !data.is_premium)) { showPaywall(); } } } catch(e) {} if (onload) onload.apply(this, arguments); }; return originalSend.apply(this, arguments); }; })(); // 点击遮罩关闭 document.getElementById('paywallOverlay').addEventListener('click', function(e) { if (e.target === this) closePaywall(); }); // 初始状态 updateFreeUsesDisplay(3); </script> </body> </html>