{extend name="common/plugin_layout" /}
{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
{block name="main"}
<style>
.ssha-root{background:#1D2129;color:#E5E7EB;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:20px;}
.ssha-container{max-width:900px;margin:0 auto;}
.ssha-header{text-align:center;margin-bottom:30px;}
.ssha-header h2{font-size:28px;font-weight:bold;margin-bottom:10px;background:linear-gradient(135deg,#36CFC9 0%,#165DFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ssha-header p{color:#D1D5DB;font-size:16px;margin-bottom:15px;}
.ssha-stats{background:rgba(39,46,59,0.5);border-radius:8px;padding:12px;display:inline-block;border:1px solid #374151;}
.ssha-stats-content{display:flex;align-items:center;gap:10px;justify-content:center;}
.ssha-stats-icon{color:#36CFC9;font-size:18px;}
.ssha-stats-label{color:#D1D5DB;}
.ssha-stats-value{font-family:monospace;font-weight:bold;color:#36CFC9;font-size:18px;}
.ssha-tool-card{background:#272E3B;border-radius:12px;box-shadow:0 10px 15px rgba(0,0,0,0.3);overflow:hidden;border:1px solid #374151;margin-bottom:30px;}
.ssha-options{background:#1D2129;padding:15px;border-bottom:1px solid #374151;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px;}
.ssha-algo-group{display:flex;align-items:center;gap:10px;}
.ssha-algo-label{color:#D1D5DB;}
.ssha-btn-group{display:inline-flex;border-radius:8px;}
.ssha-algo-btn{padding:8px 16px;font-size:14px;font-weight:500;border:1px solid;cursor:pointer;transition:all 0.2s;}
.ssha-algo-btn:first-child{border-radius:8px 0 0 8px;}
.ssha-algo-btn:last-child{border-radius:0 8px 8px 0;}
.ssha-algo-btn.active{background:#165DFF;color:white;border-color:#165DFF;}
.ssha-algo-btn:not(.active){background:#272E3B;color:#D1D5DB;border-color:#4B5563;}
.ssha-algo-btn:not(.active):hover{background:#374151;color:white;}
.ssha-checkbox-group{display:flex;align-items:center;gap:8px;}
.ssha-checkbox{width:16px;height:16px;accent-color:#165DFF;}
.ssha-checkbox-label{font-size:14px;color:#D1D5DB;}
.ssha-input-section{padding:15px;border-bottom:1px solid #374151;}
.ssha-label{display:block;font-size:14px;font-weight:500;color:#D1D5DB;margin-bottom:8px;}
.ssha-textarea{width:100%;padding:12px;background:#1D2129;border:1px solid #4B5563;border-radius:8px;color:white;font-family:monospace;font-size:14px;resize:vertical;box-sizing:border-box;}
.ssha-textarea:focus{outline:none;border-color:#165DFF;}
.ssha-input-footer{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#9CA3AF;}
.ssha-btn-section{padding:15px;background:#1D2129;border-bottom:1px solid #374151;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.ssha-btn{padding:10px 20px;border-radius:8px;font-weight:500;cursor:pointer;transition:all 0.2s;border:none;display:flex;align-items:center;gap:8px;}
.ssha-btn-primary{background:linear-gradient(135deg,#165DFF 0%,#0E42D2 100%);color:white;}
.ssha-btn-primary:hover:not(:disabled){opacity:0.9;}
.ssha-btn-secondary{background:#36CFC9;color:#1D2129;}
.ssha-btn-secondary:hover{background:#2CBDB4;}
.ssha-btn-default{background:#374151;color:white;}
.ssha-btn-default:hover{background:#4B5563;}
.ssha-result-section{padding:15px;position:relative;}
.ssha-result-wrapper{position:relative;}
.ssha-result-badge{position:absolute;top:8px;left:12px;font-size:12px;color:#9CA3AF;font-family:monospace;background:rgba(29,33,41,0.7);padding:2px 8px;border-radius:4px;z-index:10;}
.ssha-result-textarea{width:100%;padding:12px;padding-left:80px;padding-top:24px;background:#1D2129;border:1px solid #4B5563;border-radius:8px;color:white;font-family:monospace;font-size:14px;resize:vertical;box-sizing:border-box;}
.ssha-copy-toast{position:absolute;top:12px;right:12px;background:#10B981;color:white;font-size:12px;padding:4px 8px;border-radius:4px;}
.ssha-copy-toast.hidden{display:none;}
.ssha-result-footer{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#9CA3AF;}
.ssha-compare-btn{color:#165DFF;background:none;border:none;cursor:pointer;font-size:12px;}
.ssha-compare-btn:hover{text-decoration:underline;}
.ssha-features{margin-bottom:30px;}
.ssha-section-title{font-size:20px;font-weight:bold;text-align:center;margin-bottom:20px;background:linear-gradient(135deg,#36CFC9 0%,#165DFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ssha-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.ssha-feature-card{background:#272E3B;padding:20px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.2);border:1px solid #374151;}
.ssha-feature-icon{width:48px;height:48px;background:rgba(22,93,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:15px;font-size:24px;}
.ssha-feature-title{font-size:18px;font-weight:600;color:white;margin-bottom:8px;}
.ssha-feature-desc{font-size:14px;color:#9CA3AF;}
.ssha-table-card{background:#272E3B;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.2);border:1px solid #374151;overflow:hidden;margin-bottom:30px;}
.ssha-table-title{font-size:18px;font-weight:bold;padding:20px;border-bottom:1px solid #374151;color:white;}
.ssha-table{width:100%;font-size:14px;border-collapse:collapse;}
.ssha-table thead{background:#1D2129;}
.ssha-table th{padding:12px 20px;text-align:left;color:#D1D5DB;border-bottom:1px solid #374151;}
.ssha-table td{padding:12px 20px;border-bottom:1px solid #374151;}
.ssha-table tbody tr:hover{background:#1D2129;}
.ssha-table .algo-name{font-weight:600;color:#36CFC9;}
.ssha-info-card{background:#272E3B;padding:20px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.2);border:1px solid #374151;margin-bottom:30px;}
.ssha-steps{list-style:none;padding:0;}
.ssha-step{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;color:#D1D5DB;}
.ssha-step-num{flex-shrink:0;width:24px;height:24px;background:#165DFF;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;}
.ssha-about{background:#272E3B;padding:20px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.2);border:1px solid #374151;}
.ssha-about p{color:#D1D5DB;margin-bottom:10px;}
.ssha-about ul{list-style:disc;padding-left:20px;color:#D1D5DB;}
.ssha-about li{margin-bottom:5px;}
.ssha-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;}
.ssha-modal.hidden{display:none;}
.ssha-modal-content{background:#272E3B;border-radius:12px;width:100%;max-width:400px;padding:20px;border:1px solid #374151;}
.ssha-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.ssha-modal-title{font-size:18px;font-weight:bold;color:white;}
.ssha-modal-close{background:none;border:none;color:#9CA3AF;cursor:pointer;font-size:20px;}
.ssha-modal-close:hover{color:white;}
.ssha-modal-body{display:flex;flex-direction:column;gap:15px;}
.ssha-form-group{display:flex;flex-direction:column;}
.ssha-form-label{font-size:14px;font-weight:500;color:#D1D5DB;margin-bottom:5px;}
.ssha-form-input{width:100%;padding:8px;background:#1D2129;border:1px solid #4B5563;border-radius:8px;color:white;font-family:monospace;font-size:14px;resize:vertical;box-sizing:border-box;}
.ssha-form-input:focus{outline:none;border-color:#165DFF;}
.ssha-compare-result{padding:12px;border-radius:8px;text-align:center;}
.ssha-compare-result.hidden{display:none;}
.ssha-compare-result.match{background:rgba(16,185,129,0.1);color:#34D399;border:1px solid #047857;}
.ssha-compare-result.not-match{background:rgba(239,68,68,0.1);color:#F87171;border:1px solid #B91C1C;}
.ssha-modal-action{width:100%;padding:10px;background:#165DFF;color:white;border:none;border-radius:8px;cursor:pointer;font-weight:500;}
.ssha-modal-action:hover{background:#0E42D2;}
@media (max-width:768px){.ssha-options{flex-direction:column;align-items:stretch;}.ssha-algo-group{flex-direction:column;align-items:stretch;}.ssha-btn-group{width:100%;}.ssha-btn-section{flex-direction:column;}.ssha-btn{width:100%;justify-content:center;}}
</style>
<div class="ssha-root">
    <div class="ssha-container">
        <div class="ssha-header">
            <h2>专业 SHA 加密工具</h2>
            <p>提供不可逆 SHA 加密服务，支持 SHA1、SHA256、SHA512 三种加密类型</p>
            <div class="ssha-stats">
                <div class="ssha-stats-content">
                    <span class="ssha-stats-icon">📊</span>
                    <span class="ssha-stats-label">累计加密次数：</span>
                    <span id="encryptCounter" class="ssha-stats-value">--</span>
                </div>
            </div>
        </div>
        <div class="ssha-tool-card">
            <div class="ssha-options">
                <div class="ssha-algo-group">
                    <span class="ssha-algo-label">加密类型：</span>
                    <div class="ssha-btn-group">
                        <button type="button" data-algorithm="sha1" class="ssha-algo-btn active">SHA1</button>
                        <button type="button" data-algorithm="sha256" class="ssha-algo-btn">SHA256</button>
                        <button type="button" data-algorithm="sha512" class="ssha-algo-btn">SHA512</button>
                    </div>
                </div>
                <div class="ssha-checkbox-group">
                    <input type="checkbox" id="uppercase" class="ssha-checkbox">
                    <label for="uppercase" class="ssha-checkbox-label">结果大写显示</label>
                </div>
            </div>
            <div class="ssha-input-section">
                <label for="sourceText" class="ssha-label">⌨ 输入需要加密的文本</label>
                <textarea id="sourceText" rows="4" class="ssha-textarea" placeholder="请输入需要加密的内容..."></textarea>
                <div class="ssha-input-footer">
                    <span id="charCount">字符数：0</span>
                    <span>🔒 本地加密，数据不会上传</span>
                </div>
            </div>
            <div class="ssha-btn-section">
                <button id="encryptBtn" class="ssha-btn ssha-btn-primary">🛡 执行加密</button>
                <button id="copyBtn" class="ssha-btn ssha-btn-secondary">📋 复制结果</button>
                <button id="clearBtn" class="ssha-btn ssha-btn-default">🗑 清空内容</button>
                <button id="generateBtn" class="ssha-btn ssha-btn-default">🎲 随机字符串</button>
            </div>
            <div class="ssha-result-section">
                <label class="ssha-label">✓ 加密结果</label>
                <div class="ssha-result-wrapper">
                    <div id="algorithmIndicator" class="ssha-result-badge">SHA1 加密结果</div>
                    <textarea id="resultText" rows="5" class="ssha-result-textarea" placeholder="加密结果将显示在这里..." readonly></textarea>
                    <div id="copyAlert" class="ssha-copy-toast hidden">已复制!</div>
                </div>
                <div class="ssha-result-footer">
                    <span id="hashInfo">哈希长度：40 字符</span>
                    <button id="compareBtn" class="ssha-compare-btn">⇄ 比较哈希</button>
                </div>
            </div>
        </div>
        <div class="ssha-features">
            <h3 class="ssha-section-title">SHA 加密的特点</h3>
            <div class="ssha-features-grid">
                <div class="ssha-feature-card">
                    <div class="ssha-feature-icon">🔓</div>
                    <h4 class="ssha-feature-title">不可逆性</h4>
                    <p class="ssha-feature-desc">SHA 加密是单向哈希函数，无法从哈希值反推原始数据</p>
                </div>
                <div class="ssha-feature-card">
                    <div class="ssha-feature-icon">🛡</div>
                    <h4 class="ssha-feature-title">高可靠性</h4>
                    <p class="ssha-feature-desc">比 MD5 算法更安全，抗碰撞能力更强</p>
                </div>
                <div class="ssha-feature-card">
                    <div class="ssha-feature-icon">🔀</div>
                    <h4 class="ssha-feature-title">多版本支持</h4>
                    <p class="ssha-feature-desc">支持 SHA1、SHA256、SHA512 等多种版本</p>
                </div>
            </div>
        </div>
        <div class="ssha-table-card">
            <h3 class="ssha-table-title">SHA 加密算法对比</h3>
            <table class="ssha-table">
                <thead><tr><th>算法</th><th>哈希长度</th><th>安全性</th><th>应用场景</th></tr></thead>
                <tbody>
                    <tr><td class="algo-name">SHA1</td><td>160 位 (40 字符)</td><td>中等</td><td>版本控制、文件校验</td></tr>
                    <tr><td class="algo-name">SHA256</td><td>256 位 (64 字符)</td><td>高</td><td>数据签名、密码存储、区块链</td></tr>
                    <tr><td class="algo-name">SHA512</td><td>512 位 (128 字符)</td><td>极高</td><td>高安全性要求的场景</td></tr>
                </tbody>
            </table>
        </div>
        <div class="ssha-info-card">
            <h3 class="ssha-section-title">使用说明</h3>
            <ol class="ssha-steps">
                <li class="ssha-step"><span class="ssha-step-num">1</span><p>在输入框中输入需要加密的文本内容</p></li>
                <li class="ssha-step"><span class="ssha-step-num">2</span><p>选择加密算法类型（SHA1、SHA256 或 SHA512）</p></li>
                <li class="ssha-step"><span class="ssha-step-num">3</span><p>点击"执行加密"按钮获取结果</p></li>
                <li class="ssha-step"><span class="ssha-step-num">4</span><p>使用"复制结果"按钮复制哈希值</p></li>
            </ol>
        </div>
        <div class="ssha-about">
            <h3 class="ssha-section-title">关于 SHA 加密</h3>
            <p>SHA（Secure Hash Algorithm）是一系列密码散列函数，由美国国家安全局（NSA）设计。</p>
            <p>主要特点：</p>
            <ul><li>输入任意长度的数据，输出固定长度的哈希值</li><li>不可逆性：无法从哈希值反推原始数据</li><li>抗碰撞性：很难找到两个不同的输入得到相同的哈希值</li></ul>
        </div>
    </div>
    <div id="compareModal" class="ssha-modal hidden">
        <div class="ssha-modal-content">
            <div class="ssha-modal-header">
                <h3 class="ssha-modal-title">比较哈希值</h3>
                <button id="closeModal" class="ssha-modal-close">×</button>
            </div>
            <div class="ssha-modal-body">
                <div class="ssha-form-group"><label class="ssha-form-label">哈希值 1</label><textarea id="hash1" rows="2" class="ssha-form-input"></textarea></div>
                <div class="ssha-form-group"><label class="ssha-form-label">哈希值 2</label><textarea id="hash2" rows="2" class="ssha-form-input"></textarea></div>
                <div id="comparisonResult" class="ssha-compare-result hidden"></div>
                <button id="doCompareBtn" class="ssha-modal-action">比较哈希值</button>
            </div>
        </div>
    </div>
</div>
<script>
const API_KEY='7a9da38a98844439ab24c1f9e4ffa73a';
const COUNTER_ID='0679e66104c5d5a46a6f51e5293832de';
const INCREMENT_API='https://js.ruseo.cn/api/counter.php?api_key='+API_KEY+'&action=increment&counter_id='+COUNTER_ID+'&value=1';
const GET_COUNT_API='https://js.ruseo.cn/api/counter.php?api_key='+API_KEY+'&action=get&counter_id='+COUNTER_ID;
let currentAlgorithm='sha1';
const sourceText=document.getElementById('sourceText');
const resultText=document.getElementById('resultText');
const encryptBtn=document.getElementById('encryptBtn');
const copyBtn=document.getElementById('copyBtn');
const clearBtn=document.getElementById('clearBtn');
const generateBtn=document.getElementById('generateBtn');
const uppercaseCheckbox=document.getElementById('uppercase');
const charCount=document.getElementById('charCount');
const algorithmIndicator=document.getElementById('algorithmIndicator');
const hashInfo=document.getElementById('hashInfo');
const algorithmBtns=document.querySelectorAll('.ssha-algo-btn');
const compareBtn=document.getElementById('compareBtn');
const compareModal=document.getElementById('compareModal');
const closeModal=document.getElementById('closeModal');
const hash1Input=document.getElementById('hash1');
const hash2Input=document.getElementById('hash2');
const doCompareBtn=document.getElementById('doCompareBtn');
const comparisonResult=document.getElementById('comparisonResult');
const copyAlert=document.getElementById('copyAlert');
const encryptCounter=document.getElementById('encryptCounter');
window.addEventListener('load',function(){updateAlgorithmInfo();fetchCurrentCount();});
function fetchCurrentCount(){fetch(GET_COUNT_API).then(function(r){return r.json()}).then(function(d){if(d.success&&d.counter&&d.counter.current_count)updateCounterDisplay(d.counter.current_count);else encryptCounter.textContent='--';}).catch(function(){encryptCounter.textContent='--';});}
function updateCounterDisplay(c){encryptCounter.textContent=new Intl.NumberFormat().format(c);}
function incrementCounter(){fetch(INCREMENT_API).then(function(r){return r.json()}).then(function(d){if(d.success)fetchCurrentCount();});}
algorithmBtns.forEach(function(btn){btn.addEventListener('click',function(){algorithmBtns.forEach(function(b){b.classList.remove('active')});btn.classList.add('active');currentAlgorithm=btn.dataset.algorithm;updateAlgorithmInfo();if(sourceText.value.trim())encryptText();});});
function updateAlgorithmInfo(){var l,n;switch(currentAlgorithm){case'sha1':l=40;n='SHA1';break;case'sha256':l=64;n='SHA256';break;case'sha512':l=128;n='SHA512';break;}algorithmIndicator.textContent=n+' 加密结果';hashInfo.textContent='哈希长度：'+l+' 字符';}
sourceText.addEventListener('input',function(){charCount.textContent='字符数：'+sourceText.value.length;});
encryptBtn.addEventListener('click',encryptText);
function encryptText(){var t=sourceText.value;if(!t.trim()){alert('请输入需要加密的文本内容');sourceText.focus();return;}encryptBtn.disabled=true;encryptBtn.innerHTML='⏳ 加密中...';var encoder=new TextEncoder();var data=encoder.encode(t);var algo=currentAlgorithm.toUpperCase().replace('SHA','SHA-');crypto.subtle.digest(algo,data).then(function(h){var ha=Array.from(new Uint8Array(h));var hex=ha.map(function(b){return b.toString(16).padStart(2,'0')}).join('');if(uppercaseCheckbox.checked)hex=hex.toUpperCase();resultText.value=hex;resultText.style.borderColor='#10B981';setTimeout(function(){resultText.style.borderColor='#4B5563';},1000);encryptBtn.disabled=false;encryptBtn.innerHTML='🛡 执行加密';incrementCounter();}).catch(function(e){console.error(e);alert('加密过程中出现错误');encryptBtn.disabled=false;encryptBtn.innerHTML='🛡 执行加密';});}
copyBtn.addEventListener('click',function(){if(!resultText.value.trim()){alert('没有可复制的加密结果');return;}var t=document.createElement('textarea');t.value=resultText.value;document.body.appendChild(t);t.select();try{if(document.execCommand('copy')){copyAlert.classList.remove('hidden');setTimeout(function(){copyAlert.classList.add('hidden');},2000);}else{alert('复制失败');}}catch(e){alert('复制失败');}document.body.removeChild(t);});
clearBtn.addEventListener('click',function(){sourceText.value='';resultText.value='';charCount.textContent='字符数：0';sourceText.focus();});
generateBtn.addEventListener('click',function(){var c='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';var r='';for(var i=0;i<16;i++)r+=c.charAt(Math.floor(Math.random()*c.length));sourceText.value=r;charCount.textContent='字符数：'+r.length;encryptText();});
compareBtn.addEventListener('click',function(){hash1Input.value=resultText.value;hash2Input.value='';comparisonResult.classList.add('hidden');compareModal.classList.remove('hidden');hash2Input.focus();});
closeModal.addEventListener('click',function(){compareModal.classList.add('hidden');});
compareModal.addEventListener('click',function(e){if(e.target===compareModal)compareModal.classList.add('hidden');});
doCompareBtn.addEventListener('click',function(){var h1=hash1Input.value.trim().toLowerCase();var h2=hash2Input.value.trim().toLowerCase();if(!h1||!h2){alert('请输入两个哈希值进行比较');return;}if(h1===h2){comparisonResult.textContent='哈希值匹配，两个输入内容相同';comparisonResult.className='ssha-compare-result match';}else{comparisonResult.textContent='哈希值不匹配，两个输入内容不同';comparisonResult.className='ssha-compare-result not-match';}comparisonResult.classList.remove('hidden');});
</script>
{/block}