<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TENG YUAN - 智能终端系统</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
:root {
/* 基础变量 */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--border-radius: 12px;
--border-radius-lg: 20px;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
/* 暗色主题变量 */
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-tertiary: #94a3b8;
--accent-primary: #6366f1;
--accent-secondary: #8b5cf6;
--accent-hover: #7c3aed;
--border-color: rgba(255, 255, 255, 0.1);
--glass-bg: rgba(15, 23, 42, 0.8);
--glass-border: rgba(255, 255, 255, 0.1);
--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* 起始页变量 */
--startup-bg: #0a0a0a;
--startup-card-bg: rgba(255, 255, 255, 0.04);
--startup-card-hover: rgba(255, 255, 255, 0.08);
--startup-card-border: rgba(255, 255, 255, 0.08);
--startup-search-bg: rgba(255, 255, 255, 0.06);
--startup-search-focus: rgba(255, 255, 255, 0.1);
--startup-icon-bg: rgba(255, 255, 255, 0.08);
--startup-icon-hover: rgba(99, 102, 241, 0.2);
}
/* 亮色主题变量 */
.light-mode {
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #e2e8f0;
--text-primary: #1e293b;
--text-secondary: #475569;
--text-tertiary: #64748b;
--accent-primary: #3b82f6;
--accent-secondary: #6366f1;
--accent-hover: #2563eb;
--border-color: rgba(0, 0, 0, 0.1);
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(0, 0, 0, 0.1);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
/* 起始页变量 */
--startup-bg: #fafbfc;
--startup-card-bg: rgba(255, 255, 255, 0.8);
--startup-card-hover: rgba(255, 255, 255, 0.95);
--startup-card-border: rgba(0, 0, 0, 0.06);
--startup-search-bg: rgba(255, 255, 255, 0.9);
--startup-search-focus: rgba(255, 255, 255, 1);
--startup-icon-bg: rgba(0, 0, 0, 0.04);
--startup-icon-hover: rgba(59, 130, 246, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
color: var(--text-primary);
min-height: 100vh;
transition: all var(--transition-normal);
overflow: hidden;
}
/* ==================== 顶部导航栏样式 ==================== */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
z-index: 1000;
box-shadow: var(--shadow-sm);
}
/* 左侧Logo */
.nav-logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
}
.nav-logo i {
color: var(--accent-primary);
background: none;
-webkit-background-clip: unset;
background-clip: unset;
}
/* 中间导航按钮 */
.nav-tabs {
display: flex;
gap: 0.5rem;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: var(--border-radius-lg);
padding: 0.5rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nav-tab {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: calc(var(--border-radius-lg) - 0.25rem);
border: none;
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-normal);
overflow: hidden;
min-width: 120px;
justify-content: center;
}
.nav-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
opacity: 0;
transition: opacity var(--transition-normal);
z-index: -1;
}
.nav-tab:hover {
color: var(--text-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.nav-tab:hover::before {
opacity: 0.1;
}
.nav-tab.active {
color: white;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
box-shadow:
var(--shadow-md),
0 0 20px rgba(99, 102, 241, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.nav-tab.active::before {
opacity: 0;
}
.nav-tab i {
font-size: 1rem;
transition: transform var(--transition-normal);
}
.nav-tab:hover i {
transform: scale(1.1);
}
.nav-tab.active i {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
/* 右侧主题切换 */
.theme-toggle-container {
position: relative;
width: 70px;
height: 35px;
}
.theme-toggle-input {
display: none;
}
.theme-toggle-label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 50px;
cursor: pointer;
transition: all var(--transition-normal);
overflow: hidden;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.theme-toggle-label:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.theme-toggle-button {
position: absolute;
top: 3px;
left: 3px;
width: 29px;
height: 29px;
background: linear-gradient(145deg, #ffdf6b, #ffb347);
border-radius: 50%;
box-shadow: 0 2px 10px rgba(255, 179, 71, 0.5);
transition: all var(--transition-normal);
display: flex;
justify-content: center;
align-items: center;
}
.light-mode .theme-toggle-button {
left: 38px;
background: linear-gradient(145deg, #d1d1d1, #f1f1f1);
box-shadow: 0 2px 10px rgba(209, 209, 209, 0.5);
}
.sun, .moon {
position: absolute;
width: 16px;
height: 16px;
transition: all var(--transition-normal);
}
.sun {
border-radius: 50%;
background: #ffdf6b;
box-shadow: 0 0 8px #ffdf6b;
opacity: 1;
transform: scale(1);
}
.light-mode .sun {
opacity: 0;
transform: scale(0.5);
}
.moon {
border-radius: 50%;
background: #f1f1f1;
box-shadow: inset -4px -1px 0 0 #d1d1d1;
opacity: 0;
transform: scale(0.5) rotate(90deg);
}
.light-mode .moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* ==================== 主内容区域 ==================== */
.main-container {
margin-top: 80px;
height: calc(100vh - 80px);
position: relative;
overflow: hidden;
}
.content-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
}
.content-view.active {
opacity: 1;
visibility: visible;
}
/* ==================== 浏览器起始页样式 ==================== */
.browser-start-page {
background: var(--startup-bg);
background-image:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.06) 0%, transparent 50%);
height: 100%;
overflow-y: auto;
padding: 2rem;
}
.startup-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
}
.startup-header {
text-align: center;
padding: 2rem 0 3rem;
}
.startup-logo {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
}
.startup-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.startup-time {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: var(--border-radius-lg);
font-size: 0.9rem;
color: var(--text-tertiary);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* 搜索区域 */
.search-section {
width: 100%;
max-width: 680px;
margin-bottom: 4rem;
}
.search-container {
position: relative;
}
.search-input {
width: 100%;
height: 56px;
padding: 0 24px 0 56px;
font-size: 1rem;
border: 1px solid var(--startup-card-border);
border-radius: 28px;
background: var(--startup-search-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: var(--text-primary);
transition: all var(--transition-normal);
font-family: inherit;
}
.search-input::placeholder {
color: var(--text-tertiary);
}
.search-input:focus {
outline: none;
background: var(--startup-search-focus);
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
pointer-events: none;
}
.search-engine {
position: absolute;
right: 8px;
top: 8px;
height: 40px;
display: flex;
align-items: center;
padding: 0 16px;
background: var(--startup-icon-bg);
border: 1px solid var(--startup-card-border);
border-radius: 20px;
cursor: pointer;
transition: all var(--transition-normal);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.search-engine:hover {
background: var(--startup-icon-hover);
transform: scale(1.02);
}
.search-engine img {
width: 18px;
height: 18px;
margin-right: 8px;
border-radius: 50%;
}
.search-engine span {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
margin-right: 6px;
}
/* 快捷链接 */
.quick-links {
width: 100%;
margin-bottom: 3rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1.5rem;
text-align: center;
}
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.link-card {
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: var(--border-radius);
padding: 1.5rem;
transition: all var(--transition-normal);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.link-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
opacity: 0;
transition: opacity var(--transition-normal);
}
.link-card:hover {
background: var(--startup-card-hover);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.link-card:hover::before {
opacity: 1;
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.card-icon {
width: 24px;
height: 24px;
margin-right: 12px;
color: var(--accent-primary);
}
.card-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.card-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
}
.quick-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0.75rem;
background: var(--startup-icon-bg);
border: 1px solid var(--startup-card-border);
border-radius: var(--border-radius);
text-decoration: none;
color: var(--text-secondary);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.quick-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.quick-link:hover::before {
left: 100%;
}
.quick-link:hover {
background: var(--startup-icon-hover);
color: var(--text-primary);
transform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-md);
}
.link-icon {
width: 40px;
height: 40px;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 10px;
transition: all var(--transition-normal);
}
.quick-link:hover .link-icon {
background: var(--accent-primary);
border-color: var(--accent-primary);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.link-icon img {
width: 20px;
height: 20px;
object-fit: contain;
}
.link-name {
font-size: 0.875rem;
font-weight: 500;
text-align: center;
line-height: 1.3;
}
/* ==================== 终端样式 ==================== */
.terminal-container {
height: 100%;
display: flex;
flex-direction: column;
background: var(--bg-secondary);
margin: 1rem;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}
.terminal-header {
background: var(--bg-tertiary);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.window-btn {
width: 12px;
height: 12px;
border-radius: 50%;
transition: all var(--transition-fast);
}
.window-btn.close { background: #ff5f56; }
.window-btn.minimize { background: #ffbd2e; }
.window-btn.maximize { background: #27c93f; }
.terminal-title {
margin-left: 1rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.terminal-content {
flex: 1;
padding: 1rem;
overflow-y: auto;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.6;
background: var(--bg-primary);
}
.terminal-line {
margin-bottom: 0.5rem;
display: flex;
align-items: flex-start;
}
.terminal-prompt {
color: var(--accent-primary);
margin-right: 0.5rem;
font-weight: bold;
}
.terminal-command {
color: var(--text-secondary);
}
.terminal-output {
margin-bottom: 1rem;
color: var(--text-primary);
white-space: pre-wrap;
}
.terminal-output.error {
color: #ef4444;
}
.terminal-input-line {
display: flex;
align-items: center;
background: var(--bg-secondary);
padding: 0.75rem 1rem;
border-top: 1px solid var(--border-color);
}
.terminal-input {
flex: 1;
background: transparent;
border: none;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 14px;
outline: none;
margin-left: 0.5rem;
}
/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
.top-nav {
padding: 0 1rem;
}
.nav-logo {
font-size: 1.25rem;
}
.nav-tab {
padding: 0.5rem 1rem;
min-width: 100px;
}
.nav-tab span {
display: none;
}
.startup-logo {
font-size: 2rem;
}
.links-grid {
grid-template-columns: 1fr;
}
.card-links {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.nav-tabs {
gap: 0.25rem;
padding: 0.25rem;
}
.nav-tab {
padding: 0.5rem;
min-width: 80px;
}
.startup-header {
padding: 1rem 0 2rem;
}
.startup-logo {
font-size: 1.75rem;
}
.search-section {
margin-bottom: 2rem;
}
.card-links {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==================== 滚动条样式 ==================== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--text-tertiary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-primary);
}
/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.startup-container > * {
animation: fadeIn 0.6s ease-out forwards;
}
.startup-header {
animation-delay: 0.1s;
}
.search-section {
animation-delay: 0.2s;
}
.quick-links {
animation-delay: 0.3s;
}
</style>
</head>
<body class="dark-mode">
<!-- 顶部导航栏 -->
<nav class="top-nav">
<div class="nav-logo">
<i class="fas fa-cube"></i>
<span>TENG YUAN</span>
</div>
<div class="nav-tabs">
<button class="nav-tab active" data-view="browser">
<i class="fas fa-globe"></i>
<span>浏览器</span>
</button>
<button class="nav-tab" data-view="terminal">
<i class="fas fa-terminal"></i>
<span>终端</span>
</button>
</div>
<div class="theme-toggle-container">
<input type="checkbox" id="theme-toggle" class="theme-toggle-input">
<label for="theme-toggle" class="theme-toggle-label">
<div class="theme-toggle-button">
<div class="sun"></div>
<div class="moon"></div>
</div>
</label>
</div>
</nav>
<!-- 主内容区域 -->
<main class="main-container">
<!-- 浏览器起始页 -->
<div class="content-view active" id="browser-view">
<div class="browser-start-page">
<div class="startup-container">
<header class="startup-header">
<h1 class="startup-logo">Teng Yuan</h1>
<p class="startup-subtitle">智能终端 · 高效工作 · 极致体验</p>
<div class="startup-time" id="current-time"></div>
</header>
<section class="search-section">
<div class="search-container">
<i class="fas fa-search search-icon"></i>
<form id="search-form" action="https://www.google.com/search" method="get" target="_blank">
<input
type="text"
name="q"
class="search-input"
placeholder="搜索互联网，发现无限可能..."
autofocus
>
<div class="search-engine" id="search-engine">
<img src="https://www.google.com/favicon.ico" alt="Google">
<span>Google</span>
<i class="fas fa-chevron-down"></i>
</div>
</form>
</div>
</section>
<section class="quick-links">
<h2 class="section-title">常用网站</h2>
<div class="links-grid">
<!-- 娱乐媒体 -->
<div class="link-card">
<div class="card-header">
<i class="fas fa-play-circle card-icon"></i>
<h3 class="card-title">娱乐媒体</h3>
</div>
<div class="card-links">
<a href="https://www.youtube.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.youtube.com/favicon.ico" alt="YouTube">
</div>
<div class="link-name">YouTube</div>
</a>
<a href="https://www.bilibili.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.bilibili.com/favicon.ico" alt="Bilibili">
</div>
<div class="link-name">Bilibili</div>
</a>
<a href="https://music.163.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://music.163.com/favicon.ico" alt="网易云音乐">
</div>
<div class="link-name">网易云音乐</div>
</a>
<a href="https://www.netflix.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.netflix.com/favicon.ico" alt="Netflix">
</div>
<div class="link-name">Netflix</div>
</a>
</div>
</div>
<!-- 开发工具 -->
<div class="link-card">
<div class="card-header">
<i class="fas fa-code card-icon"></i>
<h3 class="card-title">开发工具</h3>
</div>
<div class="card-links">
<a href="https://github.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://github.com/favicon.ico" alt="GitHub">
</div>
<div class="link-name">GitHub</div>
</a>
<a href="https://stackoverflow.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://stackoverflow.com/favicon.ico" alt="Stack Overflow">
</div>
<div class="link-name">Stack Overflow</div>
</a>
<a href="https://developer.mozilla.org" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://developer.mozilla.org/favicon.ico" alt="MDN">
</div>
<div class="link-name">MDN</div>
</a>
<a href="https://v0.dev" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://v0.dev/favicon.ico" alt="v0.dev">
</div>
<div class="link-name">v0.dev</div>
</a>
</div>
</div>
<!-- AI工具 -->
<div class="link-card">
<div class="card-header">
<i class="fas fa-robot card-icon"></i>
<h3 class="card-title">AI工具</h3>
</div>
<div class="card-links">
<a href="https://chat.openai.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://chat.openai.com/favicon.ico" alt="ChatGPT">
</div>
<div class="link-name">ChatGPT</div>
</a>
<a href="https://claude.ai" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://claude.ai/favicon.ico" alt="Claude">
</div>
<div class="link-name">Claude</div>
</a>
<a href="https://www.midjourney.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.midjourney.com/favicon.ico" alt="Midjourney">
</div>
<div class="link-name">Midjourney</div>
</a>
<a href="https://copilot.microsoft.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://copilot.microsoft.com/favicon.ico" alt="Copilot">
</div>
<div class="link-name">Copilot</div>
</a>
</div>
</div>
<!-- 实用工具 -->
<div class="link-card">
<div class="card-header">
<i class="fas fa-tools card-icon"></i>
<h3 class="card-title">实用工具</h3>
</div>
<div class="card-links">
<a href="https://www.google.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.google.com/favicon.ico" alt="Google">
</div>
<div class="link-name">Google</div>
</a>
<a href="https://translate.google.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://translate.google.com/favicon.ico" alt="Google 翻译">
</div>
<div class="link-name">Google 翻译</div>
</a>
<a href="https://www.notion.so" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.notion.so/favicon.ico" alt="Notion">
</div>
<div class="link-name">Notion</div>
</a>
<a href="https://www.figma.com" class="quick-link" target="_blank">
<div class="link-icon">
<img src="https://www.figma.com/favicon.ico" alt="Figma">
</div>
<div class="link-name">Figma</div>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- 终端界面 -->
<div class="content-view" id="terminal-view">
<div class="terminal-container">
<div class="terminal-header">
<span class="window-btn close"></span>
<span class="window-btn minimize"></span>
<span class="window-btn maximize"></span>
<span class="terminal-title">terminal.js - 藤原的个人终端</span>
</div>
<div class="terminal-content" id="terminal-content">
<div class="terminal-output">欢迎来到藤原的个人终端！输入 "help" 获取可用命令。</div>
</div>
<form class="terminal-input-line" id="terminal-form">
<span class="terminal-prompt">></span>
<input type="text" class="terminal-input" id="terminal-input" autocomplete="off" autofocus>
</form>
</div>
</div>
</main>
<script>
// ==================== 全局变量 ====================
let currentTheme = 'dark';
let currentView = 'browser';
let commandHistory = [];
let historyIndex = -1;
// ==================== 主题管理 ====================
const themeManager = {
init() {
const savedTheme = localStorage.getItem('theme') || 'dark';
this.setTheme(savedTheme);
// 绑定主题切换事件
document.getElementById('theme-toggle').addEventListener('change', () => {
this.toggleTheme();
});
},
setTheme(theme) {
currentTheme = theme;
document.body.className = theme === 'light' ? 'light-mode' : 'dark-mode';
document.getElementById('theme-toggle').checked = theme === 'light';
localStorage.setItem('theme', theme);
},
toggleTheme() {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
this.setTheme(newTheme);
}
};
// ==================== 导航管理 ====================
const navigationManager = {
init() {
const navTabs = document.querySelectorAll('.nav-tab');
navTabs.forEach(tab => {
tab.addEventListener('click', () => {
const view = tab.dataset.view;
this.switchView(view);
});
});
},
switchView(view) {
// 更新导航按钮状态
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector(`[data-view="${view}"]`).classList.add('active');
// 切换内容视图
document.querySelectorAll('.content-view').forEach(contentView => {
contentView.classList.remove('active');
});
document.getElementById(`${view}-view`).classList.add('active');
currentView = view;
// 如果切换到终端，聚焦输入框
if (view === 'terminal') {
setTimeout(() => {
document.getElementById('terminal-input').focus();
}, 300);
}
}
};
// ==================== 时间管理 ====================
const timeManager = {
init() {
this.updateTime();
setInterval(() => this.updateTime(), 1000);
},
updateTime() {
const now = new Date();
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
};
const timeString = now.toLocaleDateString('zh-CN', options);
const timeElement = document.getElementById('current-time');
if (timeElement) {
timeElement.textContent = timeString;
}
}
};
// ==================== 搜索引擎管理 ====================
const searchManager = {
engines: {
google: {
name: 'Google',
url: 'https://www.google.com/search',
param: 'q',
icon: 'https://www.google.com/favicon.ico'
},
baidu: {
name: '百度',
url: 'https://www.baidu.com/s',
param: 'wd',
icon: 'https://www.baidu.com/favicon.ico'
},
bing: {
name: 'Bing',
url: 'https://www.bing.com/search',
param: 'q',
icon: 'https://www.bing.com/favicon.ico'
}
},
currentEngine: 'google',
init() {
this.updateSearchEngine();
// 搜索引擎切换（简化版，可以扩展为下拉菜单）
document.getElementById('search-engine').addEventListener('click', () => {
const engines = Object.keys(this.engines);
const currentIndex = engines.indexOf(this.currentEngine);
const nextIndex = (currentIndex + 1) % engines.length;
this.currentEngine = engines[nextIndex];
this.updateSearchEngine();
});
},
updateSearchEngine() {
const engine = this.engines[this.currentEngine];
const form = document.getElementById('search-form');
const input = form.querySelector('input[name]');
const engineElement = document.getElementById('search-engine');
form.action = engine.url;
input.name = engine.param;
engineElement.querySelector('img').src = engine.icon;
engineElement.querySelector('span').textContent = engine.name;
}
};
// ==================== 终端管理 ====================
const terminalManager = {
init() {
const form = document.getElementById('terminal-form');
const input = document.getElementById('terminal-input');
form.addEventListener('submit', (e) => {
e.preventDefault();
const command = input.value.trim();
if (command) {
this.executeCommand(command);
input.value = '';
historyIndex = -1;
}
});
// 命令历史导航
input.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
if (commandHistory.length > 0 && historyIndex < commandHistory.length - 1) {
historyIndex++;
input.value = commandHistory[commandHistory.length - 1 - historyIndex];
}
} else if (e.key === 'ArrowDown') {
e.preventDefault();
if (historyIndex > -1) {
historyIndex--;
input.value = historyIndex === -1 ? '' : commandHistory[commandHistory.length - 1 - historyIndex];
}
}
});
},
executeCommand(command) {
// 添加到历史记录
commandHistory.push(command);
if (commandHistory.length > 50) {
commandHistory.shift();
}
// 显示命令
this.addToTerminal(`> ${command}`, 'command');
// 处理命令
const output = this.processCommand(command);
this.addToTerminal(output.message, output.isError ? 'error' : 'output');
},
processCommand(command) {
const cmd = command.toLowerCase().trim();
if (cmd === 'help') {
return {
message: `可用命令:
基础命令:
- help: 显示帮助信息
- clear: 清空终端
- history: 显示命令历史记录
- theme: 切换深色/浅色主题
工具命令:
- video [url]: 解析并播放视频
- ai [message]: 与AI助手对话
- base64 [encode/decode] [text]: 进行Base64编码/解码
快捷键:
- 上/下箭头: 浏览命令历史`,
isError: false
};
}
if (cmd === 'clear') {
document.getElementById('terminal-content').innerHTML = '';
return { message: '', isError: false };
}
if (cmd === 'history') {
if (commandHistory.length === 0) {
return { message: '没有命令历史记录', isError: false };
}
return {
message: commandHistory.map((cmd, i) => `${i + 1}: ${cmd}`).join('\n'),
isError: false
};
}
if (cmd === 'theme') {
themeManager.toggleTheme();
return { message: `已切换到${currentTheme === 'dark' ? '亮色' : '暗色'}主题`, isError: false };
}
if (cmd.startsWith('base64')) {
const parts = command.split(' ');
const action = parts[1]?.toLowerCase();
const text = parts.slice(2).join(' ');
if (!action || !text) {
return { message: '使用方法: base64 [encode/decode] [text]', isError: true };
}
if (action === 'encode') {
try {
const encoded = btoa(encodeURIComponent(text).replace(/%([0-9A-F]{2})/g, (_, p1) => {
return String.fromCharCode(parseInt(p1, 16));
}));
return { message: encoded, isError: false };
} catch (e) {
return { message: '编码失败: ' + e.message, isError: true };
}
} else if (action === 'decode') {
try {
const decoded = decodeURIComponent(Array.from(atob(text), c => {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return { message: decoded, isError: false };
} catch (e) {
return { message: '解码失败: ' + e.message, isError: true };
}
} else {
return { message: '无效的操作，请使用 encode 或 decode', isError: true };
}
}
if (cmd.startsWith('video')) {
const url = command.split(' ')[1];
if (!url) {
return { message: '请提供视频URL', isError: true };
}
if (!url.startsWith('http')) {
return { message: '请提供有效的URL地址', isError: true };
}
return {
message: `正在解析视频: ${url}\n解析链接: https://www.yemu.xyz/?url=${encodeURIComponent(url)}`,
isError: false
};
}
if (cmd.startsWith('ai')) {
const message = command.substring(2).trim();
if (!message) {
return { message: '请输入您想对AI说的话', isError: true };
}
return { message: 'AI功能正在开发中，敬请期待！', isError: false };
}
return { message: `未知命令: ${command}。输入 "help" 获取可用命令。`, isError: true };
},
addToTerminal(text, type) {
const content = document.getElementById('terminal-content');
const div = document.createElement('div');
if (type === 'command') {
div.innerHTML = `<div class="terminal-line"><span class="terminal-prompt">></span><span class="terminal-command">${text.substring(2)}</span></div>`;
} else {
div.className = `terminal-output ${type === 'error' ? 'error' : ''}`;
div.textContent = text;
}
content.appendChild(div);
content.scrollTop = content.scrollHeight;
}
};
// ==================== 初始化 ====================
document.addEventListener('DOMContentLoaded', () => {
themeManager.init();
navigationManager.init();
timeManager.init();
searchManager.init();
terminalManager.init();
// 图片加载错误处理
document.addEventListener('error', (e) => {
if (e.target.tagName === 'IMG') {
e.target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAyQzYuNDggMiAyIDYuNDggMiAxMnM0LjQ4IDEwIDEwIDEwIDEwLTQuNDggMTAtMTBTMTcuNTIgMiAxMiAyem0tMiAxNWwtNS01aDN2LThoMnY4aDNsLTMgNXoiLz48L3N2Zz4=';
}
}, true);
console.log('TENG YUAN 系统已初始化完成！');
});
</script>
</body>
</html>
index.html
style.css
index.js