分享一个自创加密
2025-10-28 21:52:39
发布于：浙江
4阅读
0回复
0点赞
html由AI生成
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊加密系统工具</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="min-h-screen gradient-bg">
<div class="container mx-auto px-4 py-8">
<!-- 头部导航 -->
<header class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-4">
<i class="fas fa-lock mr-4"></i>特殊加密系统工具
</h1>
<p class="text-white/80 text-lg">支持特定映射规则的加解密处理</p>
</header>
<!-- 主功能区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
<!-- 加密面板 -->
<div class="bg-white rounded-2xl shadow-2xl p-6 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-lock text-blue-500 mr-3"></i>加密功能
</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">输入文本（中文）</label>
<textarea id="encryptInput" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入要加密的中文文本..."></textarea>
</div>
<button onclick="encryptText()" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition duration-200">
<i class="fas fa-shield-alt mr-2"></i>开始加密
</button>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">加密结果</label>
<div id="encryptOutput" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg min-h-12"></div>
</div>
</div>
</div>
<!-- 解密面板 -->
<div class="bg-white rounded-2xl shadow-2xl p-6 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-unlock text-green-500 mr-3"></i>解密功能
</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">输入密文（数字串）</label>
<textarea id="decryptInput" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="请输入要解密的数字串..."></textarea>
</div>
<button onclick="decryptText()" class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-6 rounded-lg transition duration-200">
<i class="fas fa-search mr-2"></i>开始解密
</button>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">解密结果</label>
<div id="decryptOutput" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg min-h-12"></div>
</div>
</div>
</div>
</div>
<!-- 示例展示区域 -->
<div class="bg-white rounded-2xl shadow-2xl p-6 mt-8 max-w-6xl mx-auto">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-book text-purple-500 mr-3"></i>加密规则与示例
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-4">字母映射表</h3>
<div class="bg-gray-50 rounded-lg p-4 text-sm">
<div class="grid grid-cols-4 gap-2">
<div class="text-center p-2 bg-blue-100 rounded">A=1</div>
<div class="text-center p-2 bg-blue-100 rounded">B=3</div>
<div class="text-center p-2 bg-blue-100 rounded">C=5</div>
<div class="text-center p-2 bg-blue-100 rounded">D=7</div>
<div class="text-center p-2 bg-green-100 rounded">E=9</div>
<div class="text-center p-2 bg-green-100 rounded">F=2</div>
<div class="text-center p-2 bg-green-100 rounded">G=4</div>
<div class="text-center p-2 bg-green-100 rounded">H=6</div>
<div class="text-center p-2 bg-purple-100 rounded">I=8</div>
<div class="text-center p-2 bg-purple-100 rounded">J=10</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-4">快速示例</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between items-center p-2 bg-yellow-50 rounded">
<span>"为你千千万万遍"</span>
<button onclick="loadExample()" class="text-blue-500 hover:text-blue-700">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 历史记录 -->
<div class="bg-white rounded-2xl shadow-2xl p-6 mt-8 max-w-6xl mx-auto">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-history text-orange-500 mr-3"></i>加解密历史
</h2>
<div id="historyList" class="space-y-2 max-h-60 overflow-y-auto">
<!-- 历史记录将通过JavaScript动态添加 -->
</div>
</div>
</div>
<script>
// 加密映射表
const charToNum = {
'A': '1', 'B': '3', 'C': '5', 'D': '7', 'E': '9',
'F': '2', 'G': '4', 'H': '6', 'I': '8', 'J': '10',
'K': '11', 'L': '13', 'M': '15', 'N': '17', 'O': '19',
'P': '12', 'Q': '14', 'R': '16', 'S': '18', 'T': '20',
'U': '21', 'V': '23', 'W': '25', 'X': '27', 'Y': '29', 'Z': '22'
};
// 数字到字母的映射（处理多对一情况）
const numToChar = {
'1': ['A'], '2': ['F'], '3': ['B'], '4': ['G'], '5': ['C'],
'6': ['H'], '7': ['D'], '8': ['I'], '9': ['E'], '10': ['J'],
'11': ['K'], '12': ['P'], '13': ['L'], '14': ['Q'], '15': ['M'],
'16': ['R'], '17': ['N'], '18': ['S'], '19': ['O'], '20': ['T'],
'21': ['U'], '22': ['Z'], '23': ['V'], '25': ['W'], '27': ['X'], '29': ['Y']
};
// 中文拼音映射（简化版）
const pinyinMap = {
'WEI': 'wei', 'NI': 'ni', 'QIAN': 'qian', 'WAN': 'wan', 'BIAN': 'bian'
};
// 加密函数
function encryptText() {
const input = document.getElementById('encryptInput').value.trim();
if (!input) {
alert('请输入要加密的文本');
return;
}
// 将中文转换为拼音（这里使用简化处理）
let pinyin = chineseToPinyin(input);
let encrypted = '';
// 将拼音转换为数字
for (let i = 0; i < pinyin.length; i++) {
const char = pinyin[i].toUpperCase();
if (charToNum[char]) {
encrypted += charToNum[char];
if (i < pinyin.length - 1 && pinyin[i+1] !== ' ') {
encrypted += '114514';
}
} else if (char === ' ') {
encrypted += ' ';
}
}
document.getElementById('encryptOutput').textContent = encrypted;
addToHistory('加密', input, encrypted);
}
// 解密函数
function decryptText() {
const input = document.getElementById('decryptInput').value.trim();
if (!input) {
alert('请输入要解密的数字串');
return;
}
// 分割数字串
const numbers = input.split('114514');
let decrypted = '';
for (let num of numbers) {
if (numToChar[num]) {
// 处理多对一映射，取第一个解
decrypted += numToChar[num][0];
} else if (num === ' ') {
decrypted += ' ';
}
}
document.getElementById('decryptOutput').textContent = decrypted;
addToHistory('解密', input, decrypted);
}
// 中文转拼音（简化实现）
function chineseToPinyin(text) {
// 这里使用简化映射，实际应用中应该使用完整的拼音库
const map = {
'为': 'WEI', '你': 'NI', '千': 'QIAN', '万': 'WAN', '遍': 'BIAN'
};
let result = '';
for (let char of text) {
if (map[char]) {
result += map[char];
} else {
result += char;
}
}
return result;
}
// 添加到历史记录
function addToHistory(type, input, output) {
const historyList = document.getElementById('historyList');
const item = document.createElement('div');
item.className = 'fade-in bg-gray-50 rounded-lg p-3 border-l-4 border-blue-500';
item.innerHTML = `
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="font-semibold text-blue-600">${type}</span>
<span class="text-xs text-gray-500 ml-2">${new Date().toLocaleTimeString()}</span>
</div>
<div class="text-sm text-gray-600 mb-1">输入: ${input}</div>
<div class="text-sm text-gray-800 font-medium">输出: ${output}</div>
</div>
<button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-red-500 ml-2">
<i class="fas fa-times"></i>
</button>
</div>
`;
historyList.insertBefore(item, historyList.firstChild);
}
// 加载示例
function loadExample() {
document.getElementById('encryptInput').value = '为你千千万万遍';
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
// 可以添加一些初始化操作
});
</script>
</body>
</html>
<code_end>
这个Web应用实现了一个完整的特殊加密系统工具，具有以下功能特点：
- 现代化UI设计，采用渐变背景和卡片式布局
- 支持双向加解密功能，分别处理文本加密和数字解密
- 内置完整的字母-数字映射表，处理多对一映射关系
- 实时历史记录功能，保存每次加解密操作
- 响应式设计，适配各种屏幕尺寸
- 包含加密规则说明和快速示例加载
接下来生成项目的CSS样式文件来增强视觉效果。
<code_start>
project_name=加密解密工具
filename=styles.css
title=增强样式文件
entrypoint=false
runnable=false
project_final_file=false
>
/* 自定义样式增强 */
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.shadow-glow {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.typing-animation {
overflow: hidden;
border-right: 2px solid;
white-space: nowrap;
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #667eea }
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
<code_end>
有帮助，赞一个