mirror of
https://github.com/fzxx/XiangYue.git
synced 2025-11-25 03:15:16 +08:00
1 line
20 KiB
HTML
1 line
20 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>想曰 - Want To Say</title><meta name="description" content="想曰 - 文本加密让你想曰就曰，曰你所想。 | Want to say - Text encryption allows you to express what you want to say and convey your thoughts."><meta name="keywords" content="想曰, 文本加密, 聊天, 开源, 安全, 加密, 级联算法, 密文"><link rel="icon" href="favicon.ico" type="image/x-icon"><script src="js/library/tailwind-3.4.17.js"></script><link rel="stylesheet" href="css/all.min.css"><script src="js/web.js"></script><script src="js/utils.js"></script><script src="js/encryption-method-1.js"></script><script src="js/library/sodium-sumo-0.7.15.js"></script><script src="js/library/pako-2.1.0.js"></script><script src="js/mapping-mode-1.js"></script><script src="js/mapping-mode-2.js"></script><script src="js/mapping-mode-3.js"></script><script src="js/mapping-mode-4.js"></script><script src="js/mapping-mode-5.js"></script><script>document.addEventListener('keydown', e => {if (e.key === 'F12' || e.ctrlKey && e.shiftKey && e.key === 'I' || e.ctrlKey && e.key === 's' || e.ctrlKey && e.key === 'u' || e.shiftKey && e.key === 'F10') {e.preventDefault(); e.stopPropagation();} }, true); document.addEventListener('contextmenu', e => {if (e.target.tagName === 'IMG') {e.preventDefault(); e.stopPropagation();} }, true);</script><script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', danger: '#EF4444', dark: '#1E293B', light: '#F8FAFC' } } } } </script><style type="text/tailwindcss"> /* 全局背景样式 */ body { @apply bg-gray-50 dark:bg-gray-900; } @layer utilities { .content-auto { content-visibility: auto; } .bg-gradient { @apply bg-gradient-to-r; } .text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .transition-all-300 { transition: all 0.3s ease; } .scrollbar-thin { scrollbar-width: thin; &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-track { @apply bg-gray-100 dark:bg-gray-700 rounded-full; } &::-webkit-scrollbar-thumb { @apply bg-gray-300 dark:bg-gray-500 rounded-full hover:bg-gray-400 dark:hover:bg-gray-400; } } .min-h-40 { min-height: 10rem; } .card-spacing { margin-bottom: 1rem; } /* 深色模式切换按钮 */ .theme-toggle-btn { @apply rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300; } .theme-toggle-icon { @apply text-dark dark:text-white; } /* 卡片悬停、玻璃效果 */ .card-hover-effect { transition: all 0.3s ease; will-change: box-shadow; &:hover { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } } .card-glass-effect { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid transparent; } .dark .card-glass-effect { background-color: rgba(30, 41, 59, 0.8); border-color: rgba(30, 41, 59, 0.18); } /* 文本框优化 */ .textarea-optimized { content-visibility: auto; white-space: pre-wrap; word-break: break-word; will-change: contents; } /* 卡片切换效果 */ .card-container { position: relative; width: 100%; margin-bottom: 10px; padding: 4px; } .card-wrapper { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .card { width: 100%; border-radius: 0.75rem; } .card-front { display: block; } .card-back { display: none; } .card-container.flipped .card-front { display: none; } .card-container.flipped .card-back { display: block; } /* 密钥对样式 */ .key-pair-section { @apply mb-1.5; } .key-pair-header { @apply mb-2 flex justify-between items-center; } .key-pair-container { @apply space-y-2; } .key-input { @apply px-3 py-2 text-sm; } .key-label { @apply block text-sm font-medium text-gray-600 dark:text-gray-300 mb-1; } .key-generate-btn { @apply text-sm px-2 py-1; } /* 统一密钥生成按钮宽度 */ #generate-keys-1, #generate-keys-2 { @apply w-28; } .asymmetric-card { padding: 0.6rem !important; } .key-pairs-wrapper { @apply mt-1.5; } .key-section-header { @apply flex justify-between items-center; } /* 文本框容器样式 */ .textbox-container { @apply relative; } .textbox-action-btn { @apply absolute bottom-2 right-2 p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 z-10; } } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }</style></head><body class="flex flex-col dark:text-white transition-colors duration-300 min-h-screen"><nav class="bg-white shadow-md sticky top-0 z-50 dark:bg-gray-800 transition-colors duration-300"><div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-5"><div class="flex justify-between h-14"><div class="flex items-center"><div class="flex-shrink-0 flex items-center"><i class="fa-solid fa-lock text-primary text-xl mr-2"></i><span class="font-bold text-lg">想曰</span></div></div><div class="flex items-center space-x-2"><button id="encryption-mode-toggle" class="theme-toggle-btn"><i class="fa-solid fa-exchange theme-toggle-icon"></i></button><button id="base64-toggle" class="theme-toggle-btn"><i class="fa-solid fa-language theme-toggle-icon"></i></button><button id="theme-toggle" class="theme-toggle-btn"><i class="fa-solid fa-sun theme-toggle-icon"></i></button></div></div></div></nav><main class="flex-grow container mx-auto px-3 py-4"><section class="w-full"><div id="card-container" class="card-container"><div class="card-wrapper"><div class="card card-front bg-white rounded-xl shadow-lg p-5 md:p-6 hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border dark:border-gray-700 card-hover-effect card-glass-effect"><div class="mb-3"><label for="encryption-key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"><strong><i class="fa-solid fa-key mr-2"></i>密码</strong></label><div class="relative"><input type="password" id="encryption-key" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white pr-16" placeholder="如果不输入密码，将使用默认密码。"><div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex space-x-1"><button id="toggle-key-visibility" class="p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200"><i class="fa-regular fa-eye-slash"></i></button><button id="generate-password" class="p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200"><i class="fa-solid fa-random"></i></button><button id="save-password" class="p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200"><i class="fa-solid fa-save"></i></button></div></div><p class="mt-1 text-xs text-gray-500 dark:text-gray-400"><strong>密码建议：包含大小写字母、数字和特殊符号，长度至少16位；或者点击随机生成按钮。</strong></p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"><div class="flex flex-col relative"><label for="text-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"><strong><i class="fa-solid fa-file-text mr-2"></i>文本内容</strong></label><div class="relative flex-grow"><textarea id="text-input" rows="7" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white min-h-[120px] textarea-optimized" placeholder="请输入需要加密或解密的文本......"></textarea><button id="paste-btn" class="absolute bottom-3 right-3 p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200"><i class="fa-solid fa-paste"></i></button></div></div><div class="flex flex-col relative"><label for="result-output" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"><strong><i class="fa-solid fa-shield mr-2"></i>输出结果</strong></label><div class="relative flex-grow"><textarea id="result-output" rows="7" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white min-h-[120px] textarea-optimized" placeholder="加密或解密结果将显示在这里......" readonly></textarea><div id="result-status" class="absolute top-3 right-3 px-2 py-1 rounded-full text-xs font-medium hidden"></div><button id="copy-btn" class="absolute bottom-3 right-3 p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200"><i class="fa-solid fa-copy"></i></button></div></div></div><div class="flex flex-wrap gap-3 mb-3"><button id="encrypt-btn" class="flex-1 bg-gradient from-indigo-500 to-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm"><i class="fa-solid fa-lock mr-2"></i>加密 </button><button id="decrypt-btn" class="flex-1 bg-gradient from-green-400 to-emerald-500 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-400/50 text-sm"><i class="fa-solid fa-unlock mr-2"></i>解密 </button><button id="clear-btn" class="flex-1 bg-gradient from-red-500 to-pink-500 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-500/50 text-sm"><i class="fa-solid fa-trash mr-2"></i> 清空 </button></div><div class="bg-blue-50 border-l-4 border-primary p-2.5 rounded-r-lg dark:bg-blue-900/20 dark:border-blue-500 text-xs"><div class="flex"><div class="flex-shrink-0"></div><div class="ml-2"><strong><i class="fa-solid fa-info-circle text-primary mt-1 mr-2"></i>使用提示</strong><div class="mt-1 space-y-1"><i class="fa-solid fa-cog text-primary mt-1 mr-2"></i><span>点击导航栏的图标可以切换非对称加密、设置输出的密文、切换夜间模式</span><p><i class="fa-solid fa-check-circle text-secondary mt-1 mr-2"></i><span>密钥算法：Argon2id ➕ HKDF-SHA512 <i class="fa-solid fa-check-circle text-secondary mt-1 mr-2 ml-5"></i> 加密算法：AES256-CTR ➕ ChaCha20-Poly1305-IETF</span></p><p><i class="fa-solid fa-lock text-secondary mt-1 mr-2"></i><span>所有操作均在本设备内完成；请妥善保存密码，丢失将无法解密数据。</span></p></div></div></div></div></div><div class="card card-back bg-white rounded-xl p-5 md:p-6 transition-all duration-300 dark:bg-gray-800 dark:border dark:border-gray-700 card-hover-effect card-glass-effect asymmetric-card"><div class="key-pairs-wrapper"><div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-1.5"><div class="key-pair-section"><div class="key-section-header"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><strong><i class="fa-solid fa-key mr-2"></i>明 密钥对</strong></label><button id="generate-keys-1" class="key-generate-btn bg-gradient-to-r from-blue-200 to-cyan-200 text-gray-700 rounded hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-200/50"><i class="fa-solid fa-random mr-2"></i>生成明密钥 </button></div><div class="flex flex-col gap-2 key-pair-container"><div><label for="private-key-1" class="key-label">⚪私钥 (用于解密/签名)</label><textarea id="private-key-1" rows="1" class="w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized key-input" placeholder="你的明私钥，不可抗力情况可暴露。"></textarea></div><div><label for="public-key-1" class="key-label">⚪公钥 (用于加密/验证)</label><textarea id="public-key-1" rows="1" class="w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized key-input" placeholder="你的明公钥，给他人加密消息......"></textarea></div></div></div><div class="key-pair-section"><div class="key-section-header"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><strong><i class="fa-solid fa-key mr-2"></i>暗 密钥对</strong></label><button id="generate-keys-2" class="key-generate-btn bg-gradient-to-r from-blue-200 to-cyan-200 text-gray-700 rounded hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-200/50"><i class="fa-solid fa-random mr-2"></i>生成暗密钥 </button></div><div class="flex flex-col gap-2 key-pair-container"><div><label for="private-key-2" class="key-label">⚫私钥(可以不填，使用前详看文档)</label><textarea id="private-key-2" rows="1" class="w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized key-input" placeholder="你的暗私钥，绝不能泄露！"></textarea></div><div><label for="public-key-2" class="key-label">⚫公钥(可以不填)</label><textarea id="public-key-2" rows="1" class="w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized key-input" placeholder="你的暗公钥，给他人加密消息......"></textarea></div></div></div></div><div class="key-pair-section"><div class="mb-1"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><strong><i class="fa-solid fa-key mr-2"></i>对方的密钥对</strong></label></div><div class="grid grid-cols-1 md:grid-cols-2 gap-3"><div><label for="public-key-3" class="key-label">对方明⚪公钥(用于加密给对方)</label><textarea id="public-key-3" rows="1" class="w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized key-input" placeholder="粘贴对方的明公钥......"></textarea></div><div><label for="public-key-4" class="key-label">对方暗⚫公钥(如果没有可以不填)</label><textarea id="public-key-4" rows="1" class="w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized key-input" placeholder="粘贴对方的暗公钥......"></textarea></div></div></div><div class="mb-1.5 mt-1.5 grid grid-cols-1 md:grid-cols-12 gap-2"><div class="md:col-span-7 flex flex-col gap-2"><div class="flex flex-col"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><strong><i class="fa-regular fa-file-lines mr-2"></i>明⚪文本</strong></label><div class="textbox-container"><textarea id="asymmetric-text-input" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized" placeholder="请输入需要加密的明文本......"></textarea><button id="asymmetric-paste-btn" class="textbox-action-btn"><i class="fa-solid fa-paste"></i></button></div></div><div class="flex flex-col"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><strong><i class="fa-regular fa-file-lines mr-2"></i>暗⚫文本</strong></label><div class="textbox-container"><textarea id="asymmetric-text-input-2" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized" placeholder="请输入需要加密的暗文本......"></textarea><button id="asymmetric-paste-btn-2" class="textbox-action-btn"><i class="fa-solid fa-paste"></i></button></div></div></div><div class="md:col-span-5 flex flex-col"><label for="asymmetric-result-output" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><strong><i class="fa-solid fa-shield mr-2"></i>密文(二合一)</strong></label><div class="textbox-container"><textarea id="asymmetric-result-output" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300 resize-none scrollbar-thin dark:bg-gray-700 dark:border-gray-600 dark:text-white textarea-optimized" placeholder="输出或输入密文......"></textarea><div id="asymmetric-result-status" class="absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-medium hidden"></div><button id="asymmetric-copy-btn" class="textbox-action-btn"><i class="fa-solid fa-copy"></i></button></div></div></div><div class="flex flex-wrap gap-3 mb-1"><button id="asymmetric-encrypt-btn" class="flex-1 bg-gradient-to-r from-indigo-500 to-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-sm"><i class="fa-solid fa-lock mr-2"></i>加密 </button><button id="asymmetric-decrypt-btn" class="flex-1 bg-gradient-to-r from-green-400 to-emerald-500 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-400/50 text-sm"><i class="fa-solid fa-unlock mr-2"></i>解密 </button><button id="asymmetric-clear-btn" class="flex-1 bg-gradient-to-r from-red-500 to-pink-500 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-500/50 text-sm"><i class="fa-solid fa-trash mr-2"></i> 清空 </button></div><div class="bg-blue-50 border-l-4 border-primary p-2.5 rounded-r-lg dark:bg-blue-900/20 dark:border-blue-500 text-xs mt-auto"><div class="flex"><div class="ml-2"><strong><i class="fa-solid fa-info-circle text-primary mt-1 mr-2"></i>非对称加密提示</strong><div class="mt-1 space-y-1"><i class="fa-solid fa-cog text-primary mt-1 mr-2"></i><span>使用公钥加密，私钥解密；私钥签名，公钥验证</span><p><i class="fa-solid fa-check-circle text-secondary mt-1 mr-2"></i><span>算法：ECDH</span></p><p><i class="fa-solid fa-lock text-secondary mt-1 mr-2"></i><span>请用密码管理器妥善保存你的私钥，丢失将无法解密数据；不要向任何人透露私钥。</span></p></div></div></div></div></div></div></div></div></section></main><footer class="bg-white/90 dark:bg-gray-800/90 py-5 text-sm text-gray-600 dark:text-gray-400 bg-blur mt-auto"><div class="container mx-auto px-3"><div class="flex flex-col md:flex-row justify-between items-center"><div class="flex items-center"><i class="fa-solid fa-lock text-primary mr-2"></i><span class="ml-2"><strong>想曰(yuē)</strong> - 想曰就曰，曰你所想。</span></div><div class="flex space-x-6 mt-3 md:mt-0"><a href="https://github.com/fzxx/XiangYue" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-primary transition-all duration-300"><i class="fa-brands fa-github"></i></a><a href="https://github.com/fzxx/XiangYue/releases" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-primary transition-all duration-300"><i class="fa-solid fa-download"></i></a></div></div></div></footer></body></html> |