mirror of
https://github.com/fzxx/XiangYue.git
synced 2025-11-25 03:15:16 +08:00
1 line
9.6 KiB
HTML
1 line
9.6 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 - Say what you want to say, say what's on your mind."><link rel="icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/all.min.css"><script src="js/utils.js"></script><script src="js/web.js"></script><script src="js/tailwind-3.4.16.js"></script><script src="js/sodium.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/encryption-method-1.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"> @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; } .scrollbar-thin::-webkit-scrollbar { width: 6px; } .scrollbar-thin::-webkit-scrollbar-track { @apply bg-gray-100 dark:bg-gray-700 rounded-full; } .scrollbar-thin::-webkit-scrollbar-thumb { @apply bg-gray-300 dark:bg-gray-500 rounded-full; } .scrollbar-thin::-webkit-scrollbar-thumb:hover { @apply bg-gray-400 dark: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 aspect-square 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; /* 帮助浏览器优化渲染 */ } .card-hover-effect: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 rgba(255, 255, 255, 0.18); transform: translateZ(0); /* 触发硬件加速 */ } .dark .card-glass-effect { background-color: rgba(30, 41, 59, 0.8); border: 1px solid rgba(30, 41, 59, 0.18); } } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style></head><body class="bg-gray-50 flex flex-col dark:bg-gray-900 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="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 class="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-4"><label for="encryption-key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><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></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-4 mb-5"><div class="flex flex-col relative"><label for="text-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><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]" 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-2"><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]" 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-4"><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-3 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>点击导航栏的图标可以设置输出 中文/Base64/Emoji/零宽 密文、切换夜间模式</span><p><i class="fa-solid fa-check-circle text-secondary mt-1 mr-2"></i><span>密钥算法：PBKDF2-SHA256 ➕ HKDF-SHA256 <i class="fa-solid fa-check-circle text-secondary mt-1 mr-2 ml-5"></i> 加密算法：AES256-CTR ➕ ChaCha20-Poly1305-IETF</span><p><i class="fa-solid fa-lock text-secondary mt-1 mr-2"></i><span>所有操作均在本设备内完成；请妥善保存密码，丢失将无法解密数据。</span></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> |