基于HTML2WEB和DEEPSEEK实现web设计
参考网站：
1. https://html2web.com/
2. https://www.deepseek.com/
生成网站：
https://u3j21367.html2web.com
网站代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小王的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', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
min-height: 100vh;
padding-bottom: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
color: white;
text-align: center;
padding: 2rem 0;
margin-bottom: 2rem;
border-bottom: 5px solid #ffd700;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.tabs {
display: flex;
background: white;
border-radius: 10px 10px 0 0;
overflow: hidden;
margin-bottom: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.tab {
padding: 15px 30px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
text-align: center;
flex: 1;
}
.tab.active {
background: #4b6cb7;
color: white;
}
.tab:hover:not(.active) {
background: #e6eef9;
}
.tab-content {
display: none;
background: white;
padding: 2rem;
border-radius: 0 0 10px 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.tab-content.active {
display: block;
}
.model-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.model-card {
background: white;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
border: 1px solid #e6eef9;
}
.model-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.model-header {
padding: 1.5rem;
color: white;
text-align: center;
}
.deepseek { background: linear-gradient(90deg, #3494E6 0%, #EC6EAD 100%); }
.qwen { background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); }
.xinghuo { background: linear-gradient(90deg, #40E0D0 0%, #FF8C00 50%, #FF0080 100%); }
.wenxin { background: linear-gradient(90deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%); }
.hunyuan { background: linear-gradient(90deg, #7b4397 0%, #dc2430 100%); }
.chatglm { background: linear-gradient(90deg, #56ab2f 0%, #a8e063 100%); }
.model-content {
padding: 1.5rem;
}
.model-content h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.model-content p {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.95rem;
}
.btn {
display: inline-block;
background: #4b6cb7;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background: #305096;
}
.btn-ghost {
background: transparent;
border: 2px solid #4b6cb7;
color: #4b6cb7;
}
.btn-ghost:hover {
background: #4b6cb7;
color: white;
}
.btn-sm {
padding: 6px 12px;
font-size: 0.9rem;
}
footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 0.9rem;
}
.last-updated {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
text-align: center;
}
/* 日志部分样式 */
.editor-container {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.toolbar {
background: #f8f9fa;
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.toolbar button {
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.2s;
}
.toolbar button:hover {
background: #e9ecef;
}
#editor {
min-height: 200px;
padding: 15px;
outline: none;
}
.media-upload {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.media-upload input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.log-entries {
margin-top: 30px;
}
.log-entry {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.entry-header {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.entry-date {
font-weight: bold;
color: #4b6cb7;
}
.entry-content {
margin-bottom: 15px;
}
.entry-media {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-top: 15px;
}
.entry-media img, .entry-media video {
width: 100%;
border-radius: 6px;
}
/* 搜索区域样式 */
.search-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.search-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.search-group {
flex: 1;
min-width: 250px;
}
.search-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #4b6cb7;
}
.search-group input, .search-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.search-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
@media (max-width: 768px) {
.model-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 2rem;
}
.tabs {
flex-direction: column;
}
.search-row {
flex-direction: column;
}
.search-group {
min-width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>小王的AI大模型导航与个人日志</h1>
<p class="subtitle">一站式访问中国主要人工智能大模型平台，并记录您的学习与思考</p>
</div>
</header>
<div class="container">
<div class="tabs">
<div class="tab active" data-tab="models">大模型导航</div>
<div class="tab" data-tab="journal">个人日志</div>
</div>
<div class="tab-content active" id="models-content">
<div class="intro">
<h2>探索中国人工智能大模型生态</h2>
<p>本页面收集了国内主要的大模型平台官网链接，方便研究人员、开发者和爱好者快速访问和比较各平台的特性。点击下方卡片中的链接即可直接访问相应官网。</p>
</div>
<div class="last-updated">
<p><strong>最后更新：</strong>2025年9月14日 - 将定期更新链接和信息</p>
</div>
<div class="model-grid">
<div class="model-card">
<div class="model-header deepseek">
<h2>DeepSeek 深度求索</h2>
</div>
<div class="model-content">
<h3>通用大语言模型</h3>
<p>DeepSeek 是一家专注于开发大型语言模型和多模态模型的人工智能公司，提供领先的 AI 技术与服务。</p>
<p>提供基础对话、深度思考、联网搜索等多种对话模式。</p>
<a href="https://chat.deepseek.com/" target="_blank" class="btn">访问官网</a>
</div>
</div>
<div class="model-card">
<div class="model-header qwen">
<h2>通义千问</h2>
</div>
<div class="model-content">
<h3>阿里云大模型</h3>
<p>阿里云推出的通义千问大模型，能够写邮件、周报、提纲，创作诗歌、小说、剧本、编程等。</p>
<p>在多项评估中获得通用能力、创新能力、服务能力等6项满分。</p>
<a href="https://qianwen.aliyun.com/" target="_blank" class="btn">访问官网</a>
</div>
</div>
<div class="model-card">
<div class="model-header xinghuo">
<h2>讯飞星火</h2>
</div>
<div class="model-content">
<h3>认知大模型</h3>
<p>科大讯飞推出的以中文为核心的新一代认知智能大模型，具备跨领域多任务的理解和生成能力。</p>
<p>提供指令集页面，为用户提供了海量的星火大模型指令模板。</p>
<a href="https://xinghuo.xfyun.cn/" target="_blank" class="btn">访问官网</a>
</div>
</div>
<div class="model-card">
<div class="model-header wenxin">
<h2>文心一言</h2>
</div>
<div class="model-content">
<h3>百度大模型</h3>
<p>百度推出的对话式AI大模型，具有强大的中文理解和生成能力，支持多种应用场景。</p>
<p>提供API接口和开发平台，支持企业定制化需求。</p>
<a href="https://yiyan.baidu.com/" target="_blank" class="btn">访问官网</a>
</div>
</div>
<div class="model-card">
<div class="model-header hunyuan">
<h2>腾讯混元</h2>
</div>
<div class="model-content">
<h3>腾讯大模型</h3>
<p>腾讯推出的大语言模型，整合到多种腾讯产品中，支持内容创作、对话交互等多种功能。</p>
<p>提供企业级解决方案和API服务。</p>
<a href="https://hunyuan.tencent.com/" target="_blank" class="btn">访问官网</a>
</div>
</div>
<div class="model-card">
<div class="model-header chatglm">
<h2>ChatGLM</h2>
</div>
<div class="model-content">
<h3>清华智谱AI</h3>
<p>清华大学与智谱AI联合开发的开源双语对话语言模型，支持中英文对话。</p>
<p>提供开源模型和API服务，适合研究和商业应用。</p>
<a href="https://chatglm.cn/" target="_blank" class="btn">访问官网</a>
</div>
</div>
</div>
<div class="intro">
<h2>使用说明</h2>
<p>以上收集了国内主要的大模型平台，点击卡片中的按钮即可访问相应官网。大多数平台需要注册账号后才能使用，部分平台可能需等待审核或邀请。</p>
<p>请注意：大模型技术发展迅速，官网界面和功能可能随时间变化，请以各平台最新信息为准。</p>
</div>
</div>
<div class="tab-content" id="journal-content">
<h2>个人日志记录</h2>
<p>在这里记录您的研究笔记、学习心得和灵感想法。支持文本格式化、图片和视频上传。</p>
<div class="editor-container">
<div class="toolbar">
<button type="button" data-command="bold"><i class="fas fa-bold"></i></button>
<button type="button" data-command="italic"><i class="fas fa-italic"></i></button>
<button type="button" data-command="underline"><i class="fas fa-underline"></i></button>
<button type="button" data-command="insertUnorderedList"><i class="fas fa-list-ul"></i></button>
<button type="button" data-command="insertOrderedList"><i class="fas fa-list-ol"></i></button>
<button type="button" data-command="createLink"><i class="fas fa-link"></i></button>
</div>
<div id="editor" contenteditable="true"></div>
</div>
<div class="media-upload">
<input type="text" id="image-url" placeholder="输入图片URL或上传图片">
<input type="file" id="image-upload" accept="image/*" style="display: none;">
<button class="btn" id="add-image-btn">添加图片</button>
</div>
<div class="media-upload">
<input type="text" id="video-url" placeholder="输入视频URL或上传视频">
<input type="file" id="video-upload" accept="video/*" style="display: none;">
<button class="btn" id="add-video-btn">添加视频</button>
</div>
<button class="btn" id="save-entry">保存日志</button>
<!-- 搜索区域 -->
<div class="search-section">
<h3>日志检索</h3>
<div class="search-row">
<div class="search-group">
<label for="keyword-search">关键词搜索</label>
<input type="text" id="keyword-search" placeholder="输入关键词...">
</div>
<div class="search-group">
<label for="date-filter">时间筛选</label>
<select id="date-filter">
<option value="all">全部时间</option>
<option value="today">今天</option>
<option value="yesterday">昨天</option>
<option value="week">本周</option>
<option value="month">本月</option>
<option value="year">本年</option>
<option value="custom">自定义范围</option>
</select>
</div>
</div>
<div class="search-row" id="custom-date-range" style="display: none;">
<div class="search-group">
<label for="start-date">开始日期</label>
<input type="date" id="start-date">
</div>
<div class="search-group">
<label for="end-date">结束日期</label>
<input type="date" id="end-date">
</div>
</div>
<div class="search-actions">
<button class="btn btn-sm" id="search-btn">搜索</button>
<button class="btn btn-sm btn-ghost" id="reset-search">重置</button>
</div>
</div>
<div class="log-entries" id="log-entries">
<h3>您的日志记录</h3>
<p id="no-entries">暂无日志记录，开始添加您的第一条日志吧！</p>
<!-- 日志条目将通过JavaScript动态添加 -->
</div>
</div>
<footer>
<p>© 2025 AI大模型导航与个人日志 | 本页面仅提供导航服务，所有商标归属原公司所有</p>
<p>温馨提示：大模型能力仍在发展中，请理性评估其输出内容</p>
</footer>
</div>
<script>
// 存储所有日志条目的数组
let journalEntries = [];
// 页面加载时从localStorage读取日志
document.addEventListener('DOMContentLoaded', function() {
const savedEntries = localStorage.getItem('journalEntries');
if (savedEntries) {
journalEntries = JSON.parse(savedEntries);
renderJournalEntries(journalEntries);
}
});
// 保存日志到localStorage
function saveEntriesToStorage() {
localStorage.setItem('journalEntries', JSON.stringify(journalEntries));
}
// 标签切换功能
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
tab.classList.add('active');
document.getElementById(tab.dataset.tab + '-content').classList.add('active');
// 切换到日志标签时，重新渲染日志
if (tab.dataset.tab === 'journal') {
renderJournalEntries(journalEntries);
}
});
});
// 富文本编辑器功能
document.querySelectorAll('.toolbar button').forEach(button => {
button.addEventListener('click', () => {
const command = button.dataset.command;
if (command === 'createLink') {
const url = prompt('请输入链接URL:', 'http://');
if (url) {
document.execCommand(command, false, url);
}
} else {
document.execCommand(command, false, null);
}
});
});
// 添加图片功能
document.getElementById('add-image-btn').addEventListener('click', () => {
const imageUrl = document.getElementById('image-url').value;
if (imageUrl) {
document.execCommand('insertImage', false, imageUrl);
document.getElementById('image-url').value = '';
}
});
// 添加视频功能
document.getElementById('add-video-btn').addEventListener('click', () => {
const videoUrl = document.getElementById('video-url').value;
if (videoUrl) {
const videoElement = document.createElement('video');
videoElement.src = videoUrl;
videoElement.controls = true;
videoElement.style.maxWidth = '100%';
document.execCommand('insertHTML', false, videoElement.outerHTML);
document.getElementById('video-url').value = '';
}
});
// 保存日志功能
document.getElementById('save-entry').addEventListener('click', () => {
const content = document.getElementById('editor').innerHTML;
if (!content.trim()) {
alert('日志内容不能为空！');
return;
}
const now = new Date();
const timestamp = now.getTime();
const dateString = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
// 创建日志对象
const entry = {
id: timestamp,
timestamp: timestamp,
dateString: dateString,
content: content
};
// 添加到数组
journalEntries.push(entry);
// 保存到localStorage
saveEntriesToStorage();
// 更新显示
renderJournalEntries(journalEntries);
// 清空编辑器
document.getElementById('editor').innerHTML = '';
});
// 文件上传功能
document.getElementById('image-upload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('image-url').value = event.target.result;
};
reader.readAsDataURL(file);
}
});
document.getElementById('video-upload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('video-url').value = event.target.result;
};
reader.readAsDataURL(file);
}
});
// 触发文件选择对话框
document.getElementById('image-url').addEventListener('click', function() {
document.getElementById('image-upload').click();
});
document.getElementById('video-url').addEventListener('click', function() {
document.getElementById('video-upload').click();
});
// 自定义日期范围显示/隐藏
document.getElementById('date-filter').addEventListener('change', function() {
const customDateRange = document.getElementById('custom-date-range');
customDateRange.style.display = this.value === 'custom' ? 'flex' : 'none';
});
// 搜索功能
document.getElementById('search-btn').addEventListener('click', function() {
const keyword = document.getElementById('keyword-search').value.toLowerCase();
const dateFilter = document.getElementById('date-filter').value;
const startDate = document.getElementById('start-date').value;
const endDate = document.getElementById('end-date').value;
let filteredEntries = journalEntries;
// 关键词搜索
if (keyword) {
filteredEntries = filteredEntries.filter(entry => {
// 创建一个临时div来提取文本内容
const tempDiv = document.createElement('div');
tempDiv.innerHTML = entry.content;
const textContent = tempDiv.textContent || tempDiv.innerText || '';
return textContent.toLowerCase().includes(keyword);
});
}
// 时间筛选
if (dateFilter !== 'all') {
const now = new Date();
filteredEntries = filteredEntries.filter(entry => {
const entryDate = new Date(entry.timestamp);
switch(dateFilter) {
case 'today':
return isSameDay(entryDate, now);
case 'yesterday':
const yesterday = new Date(now);
yesterday.setDate(yesterday.getDate() - 1);
return isSameDay(entryDate, yesterday);
case 'week':
const weekStart = new Date(now);
weekStart.setDate(weekStart.getDate() - weekStart.getDay());
weekStart.setHours(0, 0, 0, 0);
return entryDate >= weekStart;
case 'month':
return entryDate.getMonth() === now.getMonth() &&
entryDate.getFullYear() === now.getFullYear();
case 'year':
return entryDate.getFullYear() === now.getFullYear();
case 'custom':
if (startDate && endDate) {
const start = new Date(startDate);
const end = new Date(endDate);
end.setHours(23, 59, 59, 999);
return entryDate >= start && entryDate <= end;
}
return true;
default:
return true;
}
});
}
// 高亮关键词
if (keyword) {
const highlightedEntries = filteredEntries.map(entry => {
// 创建高亮版本的内容
const tempDiv = document.createElement('div');
tempDiv.innerHTML = entry.content;
// 高亮文本节点中的关键词
highlightTextNodes(tempDiv, keyword);
return {
...entry,
highlightedContent: tempDiv.innerHTML
};
});
renderJournalEntries(highlightedEntries, true);
} else {
renderJournalEntries(filteredEntries);
}
});
// 重置搜索
document.getElementById('reset-search').addEventListener('click', function() {
document.getElementById('keyword-search').value = '';
document.getElementById('date-filter').value = 'all';
document.getElementById('custom-date-range').style.display = 'none';
document.getElementById('start-date').value = '';
document.getElementById('end-date').value = '';
renderJournalEntries(journalEntries);
});
// 渲染日志条目
function renderJournalEntries(entries, useHighlighted = false) {
const entriesContainer = document.getElementById('log-entries');
const noEntriesMsg = document.getElementById('no-entries');
// 清空现有条目（保留标题和"无条目"消息）
const entriesToRemove = entriesContainer.querySelectorAll('.log-entry');
entriesToRemove.forEach(el => el.remove());
if (entries.length === 0) {
noEntriesMsg.style.display = 'block';
return;
}
noEntriesMsg.style.display = 'none';
// 按时间倒序排列
entries.sort((a, b) => b.timestamp - a.timestamp);
// 添加新条目
entries.forEach(entry => {
const entryElement = document.createElement('div');
entryElement.className = 'log-entry';
entryElement.innerHTML = `
<div class="entry-header">
<span class="entry-date">${entry.dateString}</span>
<button class="btn-ghost delete-entry btn-sm" data-id="${entry.id}">删除</button>
</div>
<div class="entry-content">${useHighlighted ? (entry.highlightedContent || entry.content) : entry.content}</div>
`;
entriesContainer.appendChild(entryElement);
// 添加删除功能
entryElement.querySelector('.delete-entry').addEventListener('click', function() {
const id = parseInt(this.getAttribute('data-id'));
// 从数组中移除
journalEntries = journalEntries.filter(e => e.id !== id);
// 更新localStorage
saveEntriesToStorage();
// 重新渲染
renderJournalEntries(journalEntries);
});
});
}
// 判断两个日期是否为同一天
function isSameDay(date1, date2) {
return date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate();
}
// 高亮文本节点中的关键词
function highlightTextNodes(element, keyword) {
const walker = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
null,
false
);
let node;
const nodes = [];
// 收集所有文本节点
while (node = walker.nextNode()) {
nodes.push(node);
}
// 处理每个文本节点
nodes.forEach(node => {
const text = node.nodeValue;
const lowerText = text.toLowerCase();
const index = lowerText.indexOf(keyword);
if (index > -1) {
const span = document.createElement('span');
span.innerHTML = text.substring(0, index) +
'<span class="highlight">' +
text.substring(index, index + keyword.length) +
'</span>' +
text.substring(index + keyword.length);
node.parentNode.replaceChild(span, node);
}
});
}
</script>
</body>
</html>
网页展示：
如对本网站有任何意见和建议，请您提出您的宝贵建议，谢谢。