<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mingo浏览器 - 智能AI助手版</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: #0f0f0f;
color: #e0e0e0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.browser-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #1a1a1a;
overflow: hidden;
position: relative;
}
.titlebar {
height: 40px;
background: #1a1a1a;
display: flex;
align-items: center;
padding: 0 16px;
justify-content: space-between;
border-bottom: 1px solid #2a2a2a;
user-select: none;
}
.window-controls {
display: flex;
gap: 10px;
}
.control-btn {
width: 14px;
height: 14px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.control-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: inherit;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.control-btn:hover::before {
width: 24px;
height: 24px;
opacity: 0.3;
}
.control-btn:active::before {
width: 30px;
height: 30px;
opacity: 0.2;
transition: all 0.1s;
}
.control-btn.loading::before {
animation: pulse 1.5s infinite;
width: 24px;
height: 24px;
opacity: 0.4;
}
.control-btn.success::before {
animation: successPulse 0.8s ease-out;
width: 24px;
height: 24px;
opacity: 0.4;
}
.control-btn.error::before {
animation: errorShake 0.5s ease-out;
}
.control-btn.idle::before {
animation: idleGlow 4s infinite;
width: 18px;
height: 18px;
opacity: 0.2;
}
.close { background: #ff5f57; }
.minimize { background: #ffbd2e; }
.maximize { background: #28ca42; }
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
}
@keyframes successPulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
50% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes errorShake {
0% { transform: translate(-50%, -50%); }
20% { transform: translate(-55%, -50%); }
40% { transform: translate(-45%, -50%); }
60% { transform: translate(-55%, -50%); }
80% { transform: translate(-45%, -50%); }
100% { transform: translate(-50%, -50%); }
}
@keyframes idleGlow {
0% { opacity: 0.1; }
50% { opacity: 0.3; }
100% { opacity: 0.1; }
}
.title-center {
display: flex;
align-items: center;
gap: 8px;
}
.logo {
width: 22px;
height: 22px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
color: white;
position: relative;
overflow: hidden;
}
.logo::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
animation: logoShine 3s infinite;
}
@keyframes logoShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.browser-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tab-bar {
display: flex;
background: #1a1a1a;
padding: 0 8px;
height: 40px;
align-items: center;
overflow-x: auto;
border-bottom: 1px solid #2a2a2a;
}
.tab {
background: #252525;
border-radius: 8px 8px 0 0;
padding: 8px 16px;
margin-right: 6px;
cursor: pointer;
display: flex;
align-items: center;
max-width: 220px;
min-width: 140px;
position: relative;
transition: all 0.2s ease;
border: 1px solid #2a2a2a;
border-bottom: none;
}
.tab:hover {
background: #2a2a2a;
}
.tab.active {
background: #333;
}
.tab-favicon {
width: 16px;
height: 16px;
margin-right: 8px;
background: #4263eb;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
font-weight: bold;
}
.tab-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
font-size: 13px;
color: #e0e0e0;
}
.tab-close {
margin-left: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #868e96;
transition: background 0.2s;
}
.tab-close:hover {
background: #3a3a3a;
color: #e0e0e0;
}
.new-tab {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
margin-left: 6px;
cursor: pointer;
color: #868e96;
transition: all 0.2s;
}
.new-tab:hover {
background: #2a2a2a;
color: #e0e0e0;
}
.toolbar {
display: flex;
padding: 12px 16px;
background: #1a1a1a;
border-bottom: 1px solid #2a2a2a;
align-items: center;
}
.nav-buttons {
display: flex;
gap: 6px;
margin-right: 14px;
}
.nav-btn {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #e0e0e0;
background: transparent;
border: none;
transition: all 0.2s;
}
.nav-btn:hover {
background: #2a2a2a;
}
.nav-btn:disabled {
color: #555;
cursor: default;
}
.nav-btn:disabled:hover {
background: transparent;
}
.address-bar {
flex: 1;
display: flex;
align-items: center;
background: #252525;
border-radius: 24px;
padding: 0 18px;
height: 40px;
margin-right: 14px;
transition: all 0.2s;
border: 1px solid transparent;
}
.address-bar:focus-within {
background: #2a2a2a;
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
border-color: #4263eb;
}
.lock-icon {
margin-right: 10px;
color: #37b24d;
font-size: 14px;
}
.url-input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 14px;
padding: 8px 0;
color: #e0e0e0;
}
.url-input::placeholder {
color: #868e96;
}
.action-buttons {
display: flex;
gap: 6px;
}
.action-btn {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #e0e0e0;
background: transparent;
border: none;
transition: all 0.2s;
}
.action-btn:hover {
background: #2a2a2a;
}
.content-area {
flex: 1;
background: #1a1a1a;
overflow: hidden;
position: relative;
display: flex;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.iframe-container {
width: 100%;
height: 100%;
border: none;
}
.welcome-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #1a1a1a;
padding: 40px;
text-align: center;
}
.welcome-logo {
width: 120px;
height: 120px;
border-radius: 24px;
margin-bottom: 24px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 48px;
font-weight: 700;
box-shadow: 0 10px 30px rgba(106, 17, 203, 0.3);
position: relative;
overflow: hidden;
}
.welcome-logo::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
animation: logoShine 3s infinite;
}
.welcome-title {
font-size: 36px;
margin-bottom: 16px;
color: #e0e0e0;
font-weight: 600;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome-subtitle {
font-size: 18px;
color: #868e96;
margin-bottom: 30px;
max-width: 500px;
line-height: 1.5;
}
.search-box {
display: flex;
max-width: 580px;
width: 100%;
margin: 0 auto 40px;
border: 1px solid #2a2a2a;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
}
.search-box:focus-within {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-color: #4263eb;
}
.search-input {
flex: 1;
border: none;
padding: 14px 20px;
font-size: 16px;
outline: none;
color: #e0e0e0;
background: #252525;
}
.search-input::placeholder {
color: #868e96;
}
.search-btn {
background: #4263eb;
color: white;
border: none;
padding: 0 24px;
cursor: pointer;
transition: background 0.2s;
font-weight: 500;
}
.search-btn:hover {
background: #3b5bdb;
}
.quick-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
max-width: 600px;
}
.quick-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #e0e0e0;
padding: 16px 12px;
border-radius: 12px;
transition: all 0.2s;
}
.quick-link:hover {
background: #252525;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.link-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: #252525;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
font-size: 20px;
color: #4263eb;
transition: all 0.2s;
}
.quick-link:hover .link-icon {
background: #4263eb;
color: white;
}
.link-name {
font-size: 14px;
font-weight: 500;
}
.status-bar {
height: 24px;
background: #1a1a1a;
border-top: 1px solid #2a2a2a;
display: flex;
align-items: center;
padding: 0 16px;
font-size: 12px;
color: #868e96;
}
.status-text {
margin-right: 16px;
}
.loading-bar {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #ff5f57, #ffbd2e, #28ca42);
width: 0%;
transition: width 0.3s;
z-index: 10;
}
.loading-bar.active {
width: 80%;
transition: width 2s ease-in-out;
}
.tab-content {
width: 100%;
height: 100%;
display: none;
}
.tab-content.active {
display: flex;
}
/* AI助手侧边栏 */
.ai-assistant {
width: 320px;
background: #1e1e1e;
border-left: 1px solid #2a2a2a;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.assistant-header {
padding: 16px;
border-bottom: 1px solid #2a2a2a;
display: flex;
align-items: center;
justify-content: space-between;
}
.assistant-title {
font-size: 16px;
font-weight: 600;
color: #e0e0e0;
}
.assistant-controls {
display: flex;
gap: 8px;
}
.assistant-btn {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #868e96;
background: transparent;
border: none;
transition: all 0.2s;
}
.assistant-btn:hover {
background: #2a2a2a;
color: #e0e0e0;
}
/* 聊天区域 */
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-messages {
flex: 1;
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.message {
max-width: 85%;
padding: 12px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.4;
position: relative;
}
.message.user {
align-self: flex-end;
background: #4263eb;
color: white;
border-bottom-right-radius: 6px;
}
.message.assistant {
align-self: flex-start;
background: #2a2a2a;
color: #e0e0e0;
border-bottom-left-radius: 6px;
padding-right: 50px;
}
.message-avatar {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #1a1a1a;
}
.robot-mini {
width: 100%;
height: 100%;
background-color: #0a0a0a;
border-radius: 6px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px rgba(66, 99, 235, 0.3);
}
.mini-eye {
width: 6px;
height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 12px;
transition: all 0.8s ease;
}
.mini-eye.left {
left: 8px;
}
.mini-eye.right {
right: 8px;
}
.robot-mini .mini-eye {
animation: miniBlink 3s infinite;
}
@keyframes miniBlink {
0%, 80%, 100% {
height: 8px;
top: 12px;
}
98% {
height: 2px;
top: 15px;
}
}
.chat-input-container {
padding: 16px;
border-top: 1px solid #2a2a2a;
display: flex;
gap: 10px;
}
.chat-input {
flex: 1;
background: #252525;
border: 1px solid #2a2a2a;
border-radius: 20px;
padding: 10px 16px;
color: #e0e0e0;
font-size: 14px;
outline: none;
resize: none;
height: 40px;
transition: all 0.2s;
}
.chat-input:focus {
border-color: #4263eb;
}
.send-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #4263eb;
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.send-btn:hover {
background: #3b5bdb;
}
.diagnosis-panel {
padding: 16px;
border-top: 1px solid #2a2a2a;
}
.diagnosis-title {
font-size: 16px;
font-weight: 600;
color: #e0e0e0;
margin-bottom: 12px;
}
.diagnosis-steps {
display: flex;
flex-direction: column;
gap: 8px;
}
.diagnosis-step {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: #252525;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.diagnosis-step:hover {
background: #2a2a2a;
}
.step-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: #4263eb;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
.step-text {
font-size: 14px;
color: #e0e0e0;
}
/* 声明面板 - 简洁版 */
.declaration-panel {
position: fixed;
bottom: 10px;
right: 10px;
background: rgba(26, 26, 26, 0.9);
border-radius: 8px;
z-index: 1000;
transition: all 0.3s ease;
max-width: 300px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
border: 1px solid #2a2a2a;
overflow: hidden;
}
.declaration-header {
padding: 8px 12px;
background: rgba(37, 37, 37, 0.9);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.declaration-title {
display: flex;
align-items: center;
gap: 8px;
color: #868e96;
font-size: 12px;
font-weight: 500;
}
.declaration-toggle {
background: none;
border: none;
color: #868e96;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
padding: 4px;
}
.declaration-toggle:hover {
color: #e0e0e0;
background: rgba(255,255,255,0.1);
border-radius: 4px;
}
.declaration-content {
padding: 12px;
max-height: 200px;
overflow-y: auto;
font-size: 11px;
line-height: 1.4;
color: #a0a0a0;
}
.declaration-section {
margin-bottom: 10px;
}
.declaration-section h4 {
color: #ffbd2e;
margin-bottom: 5px;
font-size: 11px;
}
.declaration-section ul {
padding-left: 15px;
margin-bottom: 8px;
}
.declaration-section li {
margin-bottom: 3px;
}
.declaration-warning {
background: rgba(255, 95, 87, 0.05);
border-left: 2px solid rgba(255, 95, 87, 0.5);
padding: 6px 10px;
margin: 6px 0;
border-radius: 0 3px 3px 0;
font-size: 10px;
}
.declaration-copyright {
text-align: center;
padding-top: 8px;
border-top: 1px solid #2a2a2a;
margin-top: 10px;
font-size: 10px;
color: #666;
}
.declaration-copyright a {
color: #4263eb;
text-decoration: none;
}
.declaration-copyright a:hover {
text-decoration: underline;
}
/* 折叠状态 */
.declaration-panel.collapsed {
max-height: 36px;
width: auto;
}
.declaration-panel.collapsed .declaration-content {
display: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.ai-assistant {
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: translateX(100%);
z-index: 100;
width: 100%;
max-width: 400px;
}
.ai-assistant.open {
transform: translateX(0);
}
.quick-links {
grid-template-columns: repeat(2, 1fr);
}
.welcome-title {
font-size: 28px;
}
.welcome-logo {
width: 80px;
height: 80px;
font-size: 32px;
}
.message {
max-width: 90%;
}
.declaration-panel {
max-width: 250px;
bottom: 5px;
right: 5px;
}
}
/* 滚动条样式 */
.tab-bar::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.declaration-content::-webkit-scrollbar {
height: 4px;
width: 4px;
}
.tab-bar::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.declaration-content::-webkit-scrollbar-track {
background: transparent;
}
.tab-bar::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.declaration-content::-webkit-scrollbar-thumb {
background: #3a3a3a;
border-radius: 2px;
}
.tab-bar::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.declaration-content::-webkit-scrollbar-thumb:hover {
background: #4a4a4a;
}
</style>
</head>
<body>
<div class="browser-container">
<div class="titlebar">
<div class="window-controls">
<div class="control-btn close idle" id="close-btn" title="关闭"></div>
<div class="control-btn minimize idle" id="minimize-btn" title="最小化"></div>
<div class="control-btn maximize idle" id="maximize-btn" title="最大化"></div>
</div>
<div class="title-center">
<div class="logo">M</div>
<div style="font-size: 14px; color: #e0e0e0; font-weight: 500;">Mingo浏览器</div>
</div>
<div style="width: 60px;"></div>
</div>
<div class="browser-content">
<div class="tab-bar">
<div class="tab active" data-tab="home">
<div class="tab-favicon">M</div>
<div class="tab-title">Mingo主页</div>
<div class="tab-close" onclick="closeTab('home')">×</div>
</div>
<div class="new-tab" onclick="createNewTab()">
<i class="fas fa-plus"></i>
</div>
</div>
<div class="toolbar">
<div class="nav-buttons">
<button class="nav-btn" id="back-btn" disabled>
<i class="fas fa-chevron-left"></i>
</button>
<button class="nav-btn" id="forward-btn" disabled>
<i class="fas fa-chevron-right"></i>
</button>
<button class="nav-btn" id="refresh-btn">
<i class="fas fa-redo"></i>
</button>
</div>
<div class="address-bar">
<span class="lock-icon">
<i class="fas fa-lock"></i>
</span>
<input type="text" class="url-input" id="url-input" placeholder="输入网址" value="mingo://welcome">
</div>
<div class="action-buttons">
<button class="action-btn" id="menu-btn">
<i class="fas fa-ellipsis-h"></i>
</button>
<button class="action-btn" id="assistant-toggle">
<i class="fas fa-robot"></i>
</button>
</div>
</div>
<div class="content-area">
<div class="loading-bar" id="loading-bar"></div>
<div class="main-content">
<!-- 主页内容 -->
<div class="tab-content active" id="home-tab">
<div class="welcome-page">
<div class="welcome-logo">M</div>
<h1 class="welcome-title">Mingo浏览器</h1>
<p class="welcome-subtitle">快速、安全、私密的浏览体验。使用地址栏或下方搜索框开始浏览。</p>
<div class="search-box">
<input type="text" class="search-input" id="search-input" placeholder="输入网址">
<button class="search-btn" id="search-btn">
<i class="fas fa-arrow-right"></i>
</button>
</div>
<div class="quick-links">
<a href="#" class="quick-link" data-url="https://www.wikipedia.org">
<div class="link-icon">W</div>
<div class="link-name">维基百科</div>
</a>
<a href="#" class="quick-link" data-url="https://news.google.com">
<div class="link-icon">N</div>
<div class="link-name">新闻</div>
</a>
<a href="#" class="quick-link" data-url="https://www.youtube.com">
<div class="link-icon">
<i class="fab fa-youtube"></i>
</div>
<div class="link-name">视频</div>
</a>
<a href="#" class="quick-link" data-url="https://maps.google.com">
<div class="link-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="link-name">地图</div>
</a>
<a href="#" class="quick-link" data-url="https://github.com">
<div class="link-icon">
<i class="fab fa-github"></i>
</div>
<div class="link-name">GitHub</div>
</a>
<a href="#" class="quick-link" data-url="https://stackoverflow.com">
<div class="link-icon">S</div>
<div class="link-name">Stack Overflow</div>
</a>
<a href="#" class="quick-link" data-url="https://weather.com">
<div class="link-icon">
<i class="fas fa-cloud-sun"></i>
</div>
<div class="link-name">天气</div>
</a>
<a href="#" class="quick-link" id="add-shortcut">
<div class="link-icon">
<i class="fas fa-plus"></i>
</div>
<div class="link-name">添加快捷方式</div>
</a>
</div>
</div>
</div>
<!-- 其他标签页内容将通过JavaScript动态添加 -->
</div>
<!-- AI助手侧边栏 -->
<div class="ai-assistant" id="ai-assistant">
<div class="assistant-header">
<div class="assistant-title">Mingo助手</div>
<div class="assistant-controls">
<button class="assistant-btn" id="minimize-assistant">
<i class="fas fa-minus"></i>
</button>
<button class="assistant-btn" id="close-assistant">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="chat-container">
<div class="chat-messages" id="chat-messages">
<div class="message assistant">
您好！我是Mingo助手，有什么可以帮您的吗？
<div class="message-avatar">
<div class="robot-mini">
<div class="mini-eye left"></div>
<div class="mini-eye right"></div>
</div>
</div>
</div>
</div>
<div class="chat-input-container">
<input type="text" class="chat-input" id="chat-input" placeholder="向Mingo助手提问...">
<button class="send-btn" id="send-btn">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
<div class="diagnosis-panel">
<div class="diagnosis-title">快速工具</div>
<div class="diagnosis-steps">
<div class="diagnosis-step" onclick="quickAction(1)">
<div class="step-icon">
<i class="fas fa-wifi"></i>
</div>
<div class="step-text">网络诊断</div>
</div>
<div class="diagnosis-step" onclick="quickAction(2)">
<div class="step-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="step-text">隐私保护</div>
</div>
<div class="diagnosis-step" onclick="quickAction(3)">
<div class="step-icon">
<i class="fas fa-bolt"></i>
</div>
<div class="step-text">性能优化</div>
</div>
</div>
</div>
</div>
</div>
<div class="status-bar">
<span class="status-text" id="status-text">就绪</span>
</div>
</div>
<!-- 声明面板 - 简洁版 -->
<div class="declaration-panel collapsed" id="declaration-panel">
<div class="declaration-header" id="declaration-toggle">
<div class="declaration-title">
<i class="fas fa-info-circle"></i>
<span>使用声明</span>
</div>
<button class="declaration-toggle">
<i class="fas fa-chevron-up" id="declaration-icon"></i>
</button>
</div>
<div class="declaration-content">
<div class="declaration-section">
<h4>重要声明</h4>
<p>本软件仍处于开发阶段，安全保护机制尚未完全实现，仅供技术展示与评估使用。</p>
</div>
<div class="declaration-section">
<h4>使用限制</h4>
<ul>
<li>禁止未经授权的修改、复制或分发</li>
<li>禁止用于生产环境或商业用途</li>
<li>禁止移除或修改本声明</li>
<li>仅允许在受控环境中进行技术展示</li>
</ul>
</div>
<div class="declaration-section">
<h4>风险提示</h4>
<div class="declaration-warning">
<strong>安全风险</strong>
<ul>
<li>可能存在未发现的安全漏洞</li>
<li>数据传输可能未完全加密</li>
</ul>
</div>
<div class="declaration-warning">
<strong>功能风险</strong>
<ul>
<li>功能可能不稳定或存在缺陷</li>
<li>数据可能丢失或损坏</li>
</ul>
</div>
</div>
<div class="declaration-section">
<h4>授权范围</h4>
<p><strong>仅授权用于：</strong></p>
<ul>
<li>技术展示与演示</li>
<li>内部测试与评估</li>
</ul>
</div>
<div class="declaration-copyright">
<p>版权所有 © 2025-present by Ray_ming</p>
<p>本软件基于MIT许可证发布</p>
</div>
</div>
</div>
</div>
<script>
// 当前标签页管理
let tabs = [
{ id: 'home', title: 'Mingo主页', url: 'mingo://welcome', favicon: 'M' }
];
let activeTabId = 'home';
let tabCounter = 1;
// 历史记录管理
let history = {
back: [],
forward: []
};
// DOM元素
const urlInput = document.getElementById('url-input');
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
const backBtn = document.getElementById('back-btn');
const forwardBtn = document.getElementById('forward-btn');
const refreshBtn = document.getElementById('refresh-btn');
const statusText = document.getElementById('status-text');
const loadingBar = document.getElementById('loading-bar');
const tabBar = document.querySelector('.tab-bar');
const contentArea = document.querySelector('.content-area');
const closeBtn = document.getElementById('close-btn');
const minimizeBtn = document.getElementById('minimize-btn');
const maximizeBtn = document.getElementById('maximize-btn');
const assistantToggle = document.getElementById('assistant-toggle');
const aiAssistant = document.getElementById('ai-assistant');
const closeAssistant = document.getElementById('close-assistant');
const minimizeAssistant = document.getElementById('minimize-assistant');
const chatMessages = document.getElementById('chat-messages');
const chatInput = document.getElementById('chat-input');
const sendBtn = document.getElementById('send-btn');
const declarationPanel = document.getElementById('declaration-panel');
const declarationToggle = document.getElementById('declaration-toggle');
const declarationIcon = document.getElementById('declaration-icon');
const menuBtn = document.getElementById('menu-btn');
// 对话历史
let conversationHistory = [];
// 初始化
document.addEventListener('DOMContentLoaded', function() {
// 设置事件监听器
urlInput.addEventListener('keypress', function(e) {
if(e.key === 'Enter') {
navigateToUrl(this.value);
}
});
searchInput.addEventListener('keypress', function(e) {
if(e.key === 'Enter') {
navigateToUrl(this.value);
}
});
searchBtn.addEventListener('click', function() {
navigateToUrl(searchInput.value);
});
refreshBtn.addEventListener('click', function() {
refreshCurrentTab();
});
// 快速链接点击事件
document.querySelectorAll('.quick-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const url = this.getAttribute('data-url');
if (url) {
createNewTab(url);
} else if (this.id === 'add-shortcut') {
addCustomShortcut();
}
});
});
// 窗口控制按钮事件
closeBtn.addEventListener('click', closeWindow);
minimizeBtn.addEventListener('click', minimizeWindow);
maximizeBtn.addEventListener('click', maximizeWindow);
// AI助手事件
assistantToggle.addEventListener('click', function() {
aiAssistant.classList.toggle('open');
});
closeAssistant.addEventListener('click', function() {
aiAssistant.classList.remove('open');
});
minimizeAssistant.addEventListener('click', function() {
// 简化实现：暂时关闭助手
aiAssistant.classList.remove('open');
});
// 聊天输入事件
chatInput.addEventListener('keypress', function(e) {
if(e.key === 'Enter') {
sendMessage();
}
});
sendBtn.addEventListener('click', sendMessage);
// 声明面板折叠/展开
declarationToggle.addEventListener('click', toggleDeclaration);
// 菜单按钮事件
menuBtn.addEventListener('click', showMenu);
// 前进后退按钮事件
backBtn.addEventListener('click', goBack);
forwardBtn.addEventListener('click', goForward);
// 初始状态
updateNavigationButtons();
// 页面加载时播放红绿灯动画
animateTrafficLights('loading');
// 3秒后切换到空闲状态
setTimeout(() => {
setTrafficLightsState('idle');
}, 3000);
// 添加欢迎消息
setTimeout(() => {
addMessage('assistant', '欢迎使用Mingo浏览器！我可以帮您解决网站访问问题、回答各种问题，或者只是陪您聊天。');
}, 1000);
});
// 显示菜单
function showMenu() {
const menuItems = [
'书签管理器',
'下载内容',
'历史记录',
'扩展程序',
'设置',
'关于Mingo浏览器'
];
// 创建菜单
const menu = document.createElement('div');
menu.style.cssText = `
position: absolute;
top: 50px;
right: 16px;
background: #252525;
border-radius: 8px;
padding: 8px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
min-width: 180px;
border: 1px solid #2a2a2a;
`;
menuItems.forEach(item => {
const menuItem = document.createElement('div');
menuItem.textContent = item;
menuItem.style.cssText = `
padding: 8px 16px;
cursor: pointer;
transition: background 0.2s;
font-size: 14px;
`;
menuItem.addEventListener('mouseenter', () => {
menuItem.style.background = '#2a2a2a';
});
menuItem.addEventListener('mouseleave', () => {
menuItem.style.background = 'transparent';
});
menuItem.addEventListener('click', () => {
alert(`选择了: ${item}`);
document.body.removeChild(menu);
});
menu.appendChild(menuItem);
});
// 添加点击外部关闭菜单
const closeMenu = (e) => {
if (!menu.contains(e.target) && e.target !== menuBtn) {
document.body.removeChild(menu);
document.removeEventListener('click', closeMenu);
}
};
document.body.appendChild(menu);
setTimeout(() => {
document.addEventListener('click', closeMenu);
}, 10);
}
// 前进功能
function goForward() {
if (history.forward.length > 0) {
const url = history.forward.pop();
history.back.push(getCurrentUrl());
navigateToUrl(url, true);
updateNavigationButtons();
}
}
// 后退功能
function goBack() {
if (history.back.length > 0) {
const url = history.back.pop();
history.forward.push(getCurrentUrl());
navigateToUrl(url, true);
updateNavigationButtons();
}
}
// 获取当前URL
function getCurrentUrl() {
const activeTab = tabs.find(tab => tab.id === activeTabId);
return activeTab ? activeTab.url : '';
}
// 更新导航按钮状态
function updateNavigationButtons() {
backBtn.disabled = history.back.length === 0;
forwardBtn.disabled = history.forward.length === 0;
}
// 添加快捷方式
function addCustomShortcut() {
const name = prompt('请输入快捷方式名称:');
if (!name) return;
const url = prompt('请输入网址:');
if (!url) return;
// 创建新的快捷方式
const quickLinks = document.querySelector('.quick-links');
const newLink = document.createElement('a');
newLink.className = 'quick-link';
newLink.setAttribute('data-url', url);
newLink.innerHTML = `
<div class="link-icon">${name.charAt(0)}</div>
<div class="link-name">${name}</div>
`;
newLink.addEventListener('click', function(e) {
e.preventDefault();
createNewTab(url);
});
quickLinks.appendChild(newLink);
alert(`已添加快捷方式: ${name}`);
}
// 切换声明面板的折叠/展开状态
function toggleDeclaration() {
declarationPanel.classList.toggle('collapsed');
if (declarationPanel.classList.contains('collapsed')) {
declarationIcon.className = 'fas fa-chevron-up';
} else {
declarationIcon.className = 'fas fa-chevron-down';
}
}
// 发送消息函数
function sendMessage() {
const text = chatInput.value.trim();
if (!text) return;
addMessage('user', text);
chatInput.value = '';
// 添加到对话历史
conversationHistory.push({ role: 'user', content: text });
// 机器人思考状态
const thinkingMsg = addMessage('assistant', '思考中...');
// 模拟AI响应
setTimeout(() => {
// 移除"思考中"消息
thinkingMsg.remove();
// 生成AI响应
const response = generateResponse(text);
addMessage('assistant', response);
// 添加到对话历史
conversationHistory.push({ role: 'assistant', content: response });
}, 1000 + Math.random() * 1000);
}
// 添加消息到聊天界面
function addMessage(sender, text) {
const messageElement = document.createElement('div');
messageElement.className = `message ${sender}`;
messageElement.textContent = text;
if (sender === 'assistant') {
const avatar = document.createElement('div');
avatar.className = 'message-avatar';
avatar.innerHTML = `
<div class="robot-mini">
<div class="mini-eye left"></div>
<div class="mini-eye right"></div>
</div>
`;
messageElement.appendChild(avatar);
}
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
return messageElement;
}
// 生成AI响应
function generateResponse(userInput) {
const input = userInput.toLowerCase();
// 问候语
if (input.includes('你好') || input.includes('嗨') || input.includes('hello') || input.includes('hi')) {
const greetings = [
'你好！很高兴为您服务！',
'嗨！今天过得怎么样？',
'您好！有什么我可以帮助您的吗？',
'你好呀！我是Mingo助手，随时为您提供帮助。'
];
return greetings[Math.floor(Math.random() * greetings.length)];
}
// 感谢
if (input.includes('谢谢') || input.includes('感谢') || input.includes('thx') || input.includes('thank')) {
return '不用客气！很高兴能帮助您。如果还有其他问题，请随时告诉我。';
}
// 浏览器功能
if (input.includes('浏览器') || input.includes('功能') || input.includes('能做什么')) {
return 'Mingo浏览器是一款现代化的浏览器，具有以下特色功能：\n\n1. 快速安全的网页浏览\n2. 智能助手Mingo随时为您服务\n3. 隐私保护模式\n4. 网站访问问题诊断\n5. 个性化界面设置\n\n您想了解哪方面的功能呢？';
}
// 网站访问问题诊断
if (input.includes('网站访问') || input.includes('访问不了') || input.includes('上不去') || input.includes('打不开')) {
return `网站无法访问通常由以下原因造成：
1. **网络连接问题**：检查您的网络连接是否正常
2. **DNS解析故障**：域名解析出现问题，可以尝试清除DNS缓存
3. **服务器故障**：网站服务器可能暂时不可用
4. **防火墙或安全软件限制**：检查防火墙设置
5. **浏览器缓存问题**：尝试清除浏览器缓存
您可以使用下方的"网络诊断"工具来排查问题。`;
}
// DNS相关问题
if (input.includes('dns') || input.includes('解析')) {
return `DNS解析问题可以尝试以下解决方案：
1. **清除DNS缓存**：
- Windows: 在命令提示符运行 "ipconfig /flushdns"
- macOS: 在终端运行 "sudo killall -HUP mDNSResponder"
- Linux: 运行 "sudo systemctl restart systemd-resolved"
2. **更换DNS服务器**：尝试使用公共DNS如 8.8.8.8 (Google) 或 1.1.1.1 (Cloudflare)`;
}
// 浏览器缓存问题
if (input.includes('缓存') || input.includes('清除缓存')) {
return `清除浏览器缓存可以解决很多网站访问问题：
**Mingo浏览器**:
1. 点击右上角菜单按钮
2. 选择"设置"
3. 点击"隐私和安全"
4. 选择"清除浏览数据"
5. 选择"缓存的图片和文件"
6. 点击"清除数据"`;
}
// 时间查询
if (input.includes('时间') || input.includes('几点')) {
const now = new Date();
return `现在是 ${now.toLocaleTimeString('zh-CN')}，今天是 ${now.toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}。`;
}
// 天气查询
if (input.includes('天气') || input.includes('气温')) {
return '我目前无法获取实时天气数据，但您可以尝试访问天气网站如 weather.com 或使用天气应用程序来获取最新的天气信息。';
}
// 计算
if (input.includes('计算') || input.match(/\d+[\+\-\*\/]\d+/)) {
try {
// 简单的数学计算
const expression = input.replace(/[^0-9\+\-\*\/\.]/g, '');
if (expression) {
const result = eval(expression);
return `计算结果是：${expression} = ${result}`;
}
} catch (e) {
// 计算失败
}
}
// 默认响应 - 更自然的对话
const defaultResponses = [
`我理解您说的是"${userInput}"。虽然我不是真正的AI，但我会尽力帮助您解决问题或与您聊天。`,
`关于"${userInput}"，我目前的知识可能有限，但您可以尝试问我关于浏览器使用、网站访问问题或一般性的问题。`,
`"${userInput}"是一个有趣的话题！如果您有具体的技术问题，我很乐意帮助解答。`,
`我主要专注于帮助解决浏览器和网站访问相关的问题，但也可以陪您聊聊天。您刚才说的是"${userInput}"对吗？`
];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
// 快速操作
function quickAction(action) {
let message = '';
switch(action) {
case 1:
message = '**网络诊断**：开始检查您的网络连接...\n\n1. 检查本地网络连接 ✓\n2. 测试互联网连通性 ✓\n3. 检查DNS解析...\n\n如果发现任何问题，我会提供解决方案。';
break;
case 2:
message = '**隐私保护**：Mingo浏览器提供多种隐私保护功能：\n\n1. 阻止跟踪器\n2. 清除浏览数据\n3. 隐私浏览模式\n4. 网站权限管理\n\n您可以在设置中调整这些选项。';
break;
case 3:
message = '**性能优化**：优化浏览器性能的方法：\n\n1. 关闭不需要的标签页\n2. 清除缓存和Cookie\n3. 禁用不必要的扩展\n4. 更新浏览器到最新版本\n\n您的浏览器当前运行状态良好！';
break;
}
addMessage('assistant', message);
}
// 红绿灯动画效果
function animateTrafficLights(type) {
const lights = [closeBtn, minimizeBtn, maximizeBtn];
if (type === 'loading') {
lights.forEach((light, index) => {
setTimeout(() => {
light.classList.remove('idle');
light.classList.add('loading');
setTimeout(() => {
light.classList.remove('loading');
if (index === lights.length - 1) {
setTrafficLightsState('success');
}
}, 1000);
}, index * 300);
});
} else if (type === 'success') {
lights.forEach((light, index) => {
setTimeout(() => {
light.classList.add('success');
setTimeout(() => {
light.classList.remove('success');
}, 800);
}, index * 100);
});
} else if (type === 'error') {
lights.forEach(light => {
light.classList.add('error');
setTimeout(() => {
light.classList.remove('error');
}, 500);
});
}
}
// 设置红绿灯状态
function setTrafficLightsState(state) {
const lights = [closeBtn, minimizeBtn, maximizeBtn];
lights.forEach(light => {
// 移除所有状态类
light.classList.remove('loading', 'success', 'error', 'idle');
// 添加新状态类
if (state === 'idle') {
light.classList.add('idle');
}
});
}
// 导航到URL
function navigateToUrl(url, fromHistory = false) {
if (!url) return;
// 确保URL有协议前缀
if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('mingo://')) {
url = 'https://' + url;
}
// 更新当前标签页的URL
const activeTab = tabs.find(tab => tab.id === activeTabId);
// 如果不是从历史记录导航，则更新历史记录
if (!fromHistory && activeTab) {
history.back.push(activeTab.url);
history.forward = [];
}
if (activeTab) {
activeTab.url = url;
}
// 如果是主页标签，需要创建一个新标签来显示网页
if (activeTabId === 'home') {
createNewTab(url);
} else {
// 更新标签页标题和内容
updateTabContent(activeTabId, url);
// 显示加载状态
showLoading();
// 播放红绿灯动画
animateTrafficLights('loading');
// 模拟加载完成
setTimeout(() => {
hideLoading();
statusText.textContent = `已加载 ${url}`;
setTrafficLightsState('idle');
updateNavigationButtons();
}, 1500);
}
}
// 创建新标签页
function createNewTab(url = '') {
const tabId = `tab-${tabCounter++}`;
const title = url ? getDomainFromUrl(url) : '新标签页';
const favicon = url ? title.charAt(0).toUpperCase() : '+';
// 添加标签页数据
tabs.push({
id: tabId,
title: title,
url: url || 'about:blank',
favicon: favicon
});
// 创建标签页DOM元素
const tabElement = document.createElement('div');
tabElement.className = 'tab';
tabElement.setAttribute('data-tab', tabId);
tabElement.innerHTML = `
<div class="tab-favicon">${favicon}</div>
<div class="tab-title">${title}</div>
<div class="tab-close" onclick="closeTab('${tabId}')">×</div>
`;
// 插入到标签栏（在新建按钮之前）
tabBar.insertBefore(tabElement, document.querySelector('.new-tab'));
// 创建内容区域
const contentElement = document.createElement('div');
contentElement.className = 'tab-content';
contentElement.id = `${tabId}-content`;
if (url) {
// 创建iframe来显示网页
const iframe = document.createElement('iframe');
iframe.className = 'iframe-container';
iframe.src = url;
iframe.onload = function() {
hideLoading();
statusText.textContent = `已加载 ${url}`;
setTrafficLightsState('idle');
};
contentElement.appendChild(iframe);
} else {
// 空白页
contentElement.innerHTML = `
<div class="welcome-page">
<h2>新标签页</h2>
<p>在地址栏输入网址或搜索内容</p>
</div>
`;
}
contentArea.appendChild(contentElement);
// 切换到新标签页
switchToTab(tabId);
// 如果提供了URL，显示加载状态
if (url) {
showLoading();
// 播放红绿灯动画
animateTrafficLights('loading');
}
// 更新导航按钮
updateNavigationButtons();
}
// 切换标签页
function switchToTab(tabId) {
// 更新活动标签页状态
activeTabId = tabId;
// 更新标签页UI
document.querySelectorAll('.tab').forEach(tab => {
if (tab.getAttribute('data-tab') === tabId) {
tab.classList.add('active');
} else {
tab.classList.remove('active');
}
});
// 更新内容区域
document.querySelectorAll('.tab-content').forEach(content => {
if (content.id === `${tabId}-content`) {
content.classList.add('active');
} else {
content.classList.remove('active');
}
});
// 更新地址栏
const activeTab = tabs.find(tab => tab.id === tabId);
if (activeTab) {
urlInput.value = activeTab.url;
}
// 更新导航按钮状态
updateNavigationButtons();
}
// 关闭标签页
function closeTab(tabId) {
// 不能关闭最后一个标签页
if (tabs.length <= 1) return;
// 从数据中移除
tabs = tabs.filter(tab => tab.id !== tabId);
// 移除DOM元素
document.querySelector(`.tab[data-tab="${tabId}"]`).remove();
document.querySelector(`#${tabId}-content`).remove();
// 如果关闭的是当前活动标签页，切换到另一个标签页
if (activeTabId === tabId) {
const newActiveTab = tabs[tabs.length - 1];
switchToTab(newActiveTab.id);
}
// 更新导航按钮
updateNavigationButtons();
}
// 更新标签页内容
function updateTabContent(tabId, url) {
const tab = tabs.find(t => t.id === tabId);
if (!tab) return;
tab.url = url;
tab.title = getDomainFromUrl(url);
tab.favicon = tab.title.charAt(0).toUpperCase();
// 更新标签页UI
const tabElement = document.querySelector(`.tab[data-tab="${tabId}"]`);
if (tabElement) {
tabElement.querySelector('.tab-title').textContent = tab.title;
tabElement.querySelector('.tab-favicon').textContent = tab.favicon;
}
// 更新内容
const contentElement = document.getElementById(`${tabId}-content`);
if (contentElement) {
// 移除现有内容
contentElement.innerHTML = '';
// 创建iframe
const iframe = document.createElement('iframe');
iframe.className = 'iframe-container';
iframe.src = url;
iframe.onload = function() {
hideLoading();
statusText.textContent = `已加载 ${url}`;
};
contentElement.appendChild(iframe);
}
}
// 从URL获取域名
function getDomainFromUrl(url) {
try {
const domain = new URL(url).hostname;
return domain.replace('www.', '');
} catch (e) {
return '新标签页';
}
}
// 显示加载状态
function showLoading() {
loadingBar.classList.add('active');
statusText.textContent = '正在加载...';
}
// 隐藏加载状态
function hideLoading() {
loadingBar.classList.remove('active');
}
// 刷新当前标签页
function refreshCurrentTab() {
const activeTab = tabs.find(tab => tab.id === activeTabId);
if (activeTab && activeTab.url && activeTab.url !== 'about:blank') {
showLoading();
animateTrafficLights('loading');
// 模拟刷新
setTimeout(() => {
hideLoading();
statusText.textContent = `已刷新 ${activeTab.url}`;
setTrafficLightsState('idle');
}, 1000);
}
}
// 窗口控制函数
function closeWindow() {
animateTrafficLights('error');
setTimeout(() => {
document.querySelector('.browser-container').style.opacity = '0';
document.querySelector('.browser-container').style.transform = 'scale(0.9)';
setTimeout(() => {
alert('窗口已关闭');
}, 300);
}, 500);
}
function minimizeWindow() {
animateTrafficLights('success');
document.querySelector('.browser-container').style.transform = 'scale(0.95) translateY(20px)';
document.querySelector('.browser-container').style.opacity = '0.8';
setTimeout(() => {
alert('窗口已最小化');
}, 300);
}
function maximizeWindow() {
animateTrafficLights('success');
const container = document.querySelector('.browser-container');
if (container.style.width === '100%') {
container.style.width = '95%';
container.style.height = '90%';
container.style.maxWidth = '1200px';
} else {
container.style.width = '100%';
container.style.height = '100%';
container.style.maxWidth = 'none';
}
}
// 标签点击事件委托
tabBar.addEventListener('click', function(e) {
const tabElement = e.target.closest('.tab');
if (tabElement && !e.target.classList.contains('tab-close')) {
const tabId = tabElement.getAttribute('data-tab');
switchToTab(tabId);
}
});
</script>
</body>
</html>
index.html
index.html