一个比较酷的黑客终端页面HTML打造
直接把下边的代码保存成HTML格式，然后打开查看效果~~~
<!DOCTYPE html>
<html>
<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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
terminal: {
green: '#39FF14',
dark: '#0C111B',
light: '#121927'
}
},
fontFamily: {
code: ['Fira Code', 'monospace']
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.terminal-cursor {
animation: blink 1s step-end infinite;
}
.glow {
text-shadow: 0 0 5px rgba(57, 255, 20, 0.7);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.glass {
background: rgba(18, 25, 39, 0.7);
backdrop-filter: blur(8px);
}
}
@keyframes blink {
from, to { opacity: 1; }
50% { opacity: 0; }
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="bg-terminal-dark font-code text-terminal-green min-h-screen flex flex-col">
<!-- 顶部导航 -->
<header class="glass py-4 px-6 border-b border-terminal-green/20 sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-terminal text-terminal-green text-xl"></i>
<h1 class="text-lg md:text-xl font-bold tracking-wider">黑客<span>终端</span></h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-white transition-colors duration-300">首页</a>
<a href="#" class="hover:text-white transition-colors duration-300">项目</a>
<a href="#" class="hover:text-white transition-colors duration-300">关于</a>
<a href="#" class="hover:text-white transition-colors duration-300">联系</a>
</nav>
<button class="md:hidden text-terminal-green text-xl">
<i class="fa fa-bars"></i>
</button>
</div>
</header>
<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
<!-- 欢迎信息 -->
<section class="mb-12 max-w-4xl mx-auto">
<div class="bg-terminal-light p-6 rounded-lg border border-terminal-green/30 shadow-lg shadow-terminal-green/10">
<h2 class="text-2xl md:text-3xl font-bold mb-6">欢迎来到 <span>黑客终端</span></h2>
<div id="typing-text">
<p>访问授权成功。系统已启动。</p>
<p>使用 <span class="bg-terminal-green text-terminal-dark px-1 rounded">help</span> 查看可用命令。</p>
<div class="flex items-center">
<span>root@hackerterminal:~$ </span>
<span>|</span>
</div>
</div>
</div>
</section>
<!-- 项目展示 -->
<section>
<h2 class="text-xl md:text-2xl font-bold mb-6">精选 <span>项目</span></h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 项目卡片 1 -->
<div class="bg-terminal-light rounded-lg border border-terminal-green/30 overflow-hidden hover:shadow-lg hover:shadow-terminal-green/20 transition-all duration-300 transform hover:-translate-y-1">
<div>
<h3 class="text-lg font-bold mb-3 flex items-center">
<i class="fa fa-code mr-2"></i>
神经网络可视化工具
</h3>
<p class="text-sm text-terminal-green/80 mb-4">一个用于实时可视化神经网络架构和训练过程的工具。</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-terminal-green/20 px-2 py-1 rounded">Python</span>
<a href="#" class="text-xs hover:text-white transition-colors duration-300">
<i class="fa fa-github mr-1"></i> 查看代码
</a>
</div>
</div>
</div>
<!-- 项目卡片 2 -->
<div class="bg-terminal-light rounded-lg border border-terminal-green/30 overflow-hidden hover:shadow-lg hover:shadow-terminal-green/20 transition-all duration-300 transform hover:-translate-y-1">
<div>
<h3 class="text-lg font-bold mb-3 flex items-center">
<i class="fa fa-shield mr-2"></i>
网络防御系统
</h3>
<p class="text-sm text-terminal-green/80 mb-4">一个基于人工智能的安全系统，用于实时检测和预防网络威胁。</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-terminal-green/20 px-2 py-1 rounded">JavaScript</span>
<a href="#" class="text-xs hover:text-white transition-colors duration-300">
<i class="fa fa-github mr-1"></i> 查看代码
</a>
</div>
</div>
</div>
<!-- 项目卡片 3 -->
<div class="bg-terminal-light rounded-lg border border-terminal-green/30 overflow-hidden hover:shadow-lg hover:shadow-terminal-green/20 transition-all duration-300 transform hover:-translate-y-1">
<div>
<h3 class="text-lg font-bold mb-3 flex items-center">
<i class="fa fa-database mr-2"></i>
数据加密工具
</h3>
<p class="text-sm text-terminal-green/80 mb-4">一个强大的加密实用工具，使用先进的加密算法保护你的数据。</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-terminal-green/20 px-2 py-1 rounded">C++</span>
<a href="#" class="text-xs hover:text-white transition-colors duration-300">
<i class="fa fa-github mr-1"></i> 查看代码
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 技能展示 -->
<section>
<h2 class="text-xl md:text-2xl font-bold mb-6">技术 <span>能力</span></h2>
<div class="bg-terminal-light p-6 rounded-lg border border-terminal-green/30">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold mb-3">编程语言</h3>
<div>
<div>
<div class="flex justify-between mb-1">
<span>Python</span>
<span>95%</span>
</div>
<div class="h-2 bg-terminal-dark rounded-full overflow-hidden">
<div class="h-full bg-terminal-green" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>JavaScript</span>
<span>85%</span>
</div>
<div class="h-2 bg-terminal-dark rounded-full overflow-hidden">
<div class="h-full bg-terminal-green" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>C++</span>
<span>75%</span>
</div>
<div class="h-2 bg-terminal-dark rounded-full overflow-hidden">
<div class="h-full bg-terminal-green" style="width: 75%"></div>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-bold mb-3">安全工具</h3>
<div>
<div>
<div class="flex justify-between mb-1">
<span>Metasploit</span>
<span>90%</span>
</div>
<div class="h-2 bg-terminal-dark rounded-full overflow-hidden">
<div class="h-full bg-terminal-green" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Nmap</span>
<span>80%</span>
</div>
<div class="h-2 bg-terminal-dark rounded-full overflow-hidden">
<div class="h-full bg-terminal-green" style="width: 80%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Wireshark</span>
<span>85%</span>
</div>
<div class="h-2 bg-terminal-dark rounded-full overflow-hidden">
<div class="h-full bg-terminal-green" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 互动终端 -->
<section>
<h2 class="text-xl md:text-2xl font-bold mb-6">交互式 <span>终端</span></h2>
<div class="bg-terminal-dark rounded-lg border border-terminal-green/30 shadow-inner h-64 md:h-80 overflow-auto p-4 relative">
<div id="terminal-output">
<p><span>guest@hackerterminal:~$ </span>help</p>
<p><span class="text-terminal-green/70">可用命令:</span></p>
<p><span class="text-terminal-green/70"> help - 显示此帮助信息</span></p>
<p><span class="text-terminal-green/70"> projects - 列出可用项目</span></p>
<p><span class="text-terminal-green/70"> skills - 查看技术能力</span></p>
<p><span class="text-terminal-green/70"> contact - 显示联系信息</span></p>
<p><span class="text-terminal-green/70"> clear - 清除终端</span></p>
</div>
<div class="absolute bottom-4 left-4 right-4 flex items-center">
<span>guest@hackerterminal:~$ </span>
<input type="text" id="terminal-input" class="bg-transparent border-none outline-none font-code text-terminal-green w-full" placeholder="输入命令...">
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="glass py-6 px-4 border-t border-terminal-green/20 mt-12">
<div class="container mx-auto text-center text-sm text-terminal-green/60">
<p>黑客终端 © 2025 - 保留所有权利</p>
<div class="flex justify-center space-x-4 mt-4">
<a href="#" class="hover:text-white transition-colors duration-300">
<i class="fa fa-github"></i>
</a>
<a href="#" class="hover:text-white transition-colors duration-300">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="hover:text-white transition-colors duration-300">
<i class="fa fa-linkedin"></i>
</a>
<a href="#" class="hover:text-white transition-colors duration-300">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
</footer>
<script>
// 打字机效果
document.addEventListener('DOMContentLoaded', () => {
// 模拟命令行输入
const terminalInput = document.getElementById('terminal-input');
const terminalOutput = document.getElementById('terminal-output');
terminalInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const command = terminalInput.value.trim();
if (command) {
// 添加用户输入到输出
const userInputLine = document.createElement('p');
userInputLine.innerHTML = `<span>guest@hackerterminal:~$ </span>${command}`;
terminalOutput.appendChild(userInputLine);
// 处理命令
let response;
switch(command.toLowerCase()) {
case 'help':
response = `
<p><span class="text-terminal-green/70">可用命令:</span></p>
<p><span class="text-terminal-green/70"> help - 显示此帮助信息</span></p>
<p><span class="text-terminal-green/70"> projects - 列出可用项目</span></p>
<p><span class="text-terminal-green/70"> skills - 查看技术能力</span></p>
<p><span class="text-terminal-green/70"> contact - 显示联系信息</span></p>
<p><span class="text-terminal-green/70"> clear - 清除终端</span></p>
`;
break;
case 'projects':
response = `
<p><span class="text-terminal-green/70">可用项目:</span></p>
<p><span class="text-terminal-green/70"> 1. 神经网络可视化工具 - 基于Python的可视化工具</span></p>
<p><span class="text-terminal-green/70"> 2. 网络防御系统 - 基于人工智能的安全系统</span></p>
<p><span class="text-terminal-green/70"> 3. 数据加密工具 - 高级数据加密实用工具</span></p>
`;
break;
case 'skills':
response = `
<p><span class="text-terminal-green/70">技术能力:</span></p>
<p><span class="text-terminal-green/70"> - 编程语言: Python, JavaScript, C++, Java</span></p>
<p><span class="text-terminal-green/70"> - 安全工具: Metasploit, Nmap, Wireshark, Burp Suite</span></p>
<p><span class="text-terminal-green/70"> - Web技术: HTML, CSS, React, Node.js</span></p>
<p><span class="text-terminal-green/70"> - 数据库: Mysql, MongoDB, PostgreSQL</span></p>
`;
break;
case 'contact':
response = `
<p><span class="text-terminal-green/70">联系信息:</span></p>
<p><span class="text-terminal-green/70"> 邮箱: contact@hackerterminal.io</span></p>
<p><span class="text-terminal-green/70"> GitHub: github.com/hackerterminal</span></p>
<p><span class="text-terminal-green/70"> Twitter: @hacker_terminal</span></p>
`;
break;
case 'clear':
terminalOutput.innerHTML = '';
break;
default:
response = `<p><span>命令未找到: ${command}</span></p>
<p><span class="text-terminal-green/70">输入 'help' 查看可用命令。</span></p>`;
}
// 添加命令响应
if (command.toLowerCase() !== 'clear') {
const responseElement = document.createElement('div');
responseElement.innerHTML = response;
terminalOutput.appendChild(responseElement);
}
// 清空输入并滚动到底部
terminalInput.value = '';
terminalOutput.scrollTop = terminalOutput.scrollHeight;
}
}
});
// 初始化时聚焦到输入框
terminalInput.focus();
// 模拟打字效果
const typingText = document.getElementById('typing-text');
const originalContent = typingText.innerHTML;
typingText.innerHTML = '';
function typeWriter(text, i) {
if (i < text.length) {
typingText.innerHTML += text.charAt(i);
i++;
setTimeout(function() {
typeWriter(text, i);
}, 50);
}
}
// 延迟后开始打字效果
setTimeout(() => {
typeWriter(originalContent, 0);
}, 1000);
});
</script>
</body>
</html>