基于HTML2WEB和DEEPSEEK实现web设计-EW帮帮网

参考网站：

1. https://html2web.com/

2. https://www.deepseek.com/

生成网站：

https://u3j21367.html2web.com

网站代码：

<!DOCTYPE html>

<head>

<title>小王的AI大模型导航与个人日志</title>

<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>

<h1>小王的AI大模型导航与个人日志</h1>

<p class="subtitle">一站式访问中国主要人工智能大模型平台，并记录您的学习与思考</p>

</div>

</header>

<div class="tab active" data-tab="models">大模型导航</div>

</div>

<h2>探索中国人工智能大模型生态</h2>

<p>本页面收集了国内主要的大模型平台官网链接，方便研究人员、开发者和爱好者快速访问和比较各平台的特性。点击下方卡片中的链接即可直接访问相应官网。</p>

</div>

<p><strong>最后更新：</strong>2025年9月14日 - 将定期更新链接和信息</p>

</div>

<h2>DeepSeek 深度求索</h2>

</div>

<h3>通用大语言模型</h3>

<p>DeepSeek 是一家专注于开发大型语言模型和多模态模型的人工智能公司，提供领先的 AI 技术与服务。</p>

<p>提供基础对话、深度思考、联网搜索等多种对话模式。</p>

</div>

</div>

<h3>阿里云大模型</h3>

<p>阿里云推出的通义千问大模型，能够写邮件、周报、提纲，创作诗歌、小说、剧本、编程等。</p>

<p>在多项评估中获得通用能力、创新能力、服务能力等6项满分。</p>

</div>

</div>

<h3>认知大模型</h3>

<p>科大讯飞推出的以中文为核心的新一代认知智能大模型，具备跨领域多任务的理解和生成能力。</p>

<p>提供指令集页面，为用户提供了海量的星火大模型指令模板。</p>

</div>

</div>

<h3>百度大模型</h3>

<p>百度推出的对话式AI大模型，具有强大的中文理解和生成能力，支持多种应用场景。</p>

<p>提供API接口和开发平台，支持企业定制化需求。</p>

</div>

</div>

<h3>腾讯大模型</h3>

<p>腾讯推出的大语言模型，整合到多种腾讯产品中，支持内容创作、对话交互等多种功能。</p>

<p>提供企业级解决方案和API服务。</p>

</div>

<h2>ChatGLM</h2>

</div>

<h3>清华智谱AI</h3>

<p>清华大学与智谱AI联合开发的开源双语对话语言模型，支持中英文对话。</p>

<p>提供开源模型和API服务，适合研究和商业应用。</p>

</div>

<p>以上收集了国内主要的大模型平台，点击卡片中的按钮即可访问相应官网。大多数平台需要注册账号后才能使用，部分平台可能需等待审核或邀请。</p>

<p>请注意：大模型技术发展迅速，官网界面和功能可能随时间变化，请以各平台最新信息为准。</p>

</div>

<h2>个人日志记录</h2>

<p>在这里记录您的研究笔记、学习心得和灵感想法。支持文本格式化、图片和视频上传。</p>

</div>

</div>

</div>

</div>

<label for="keyword-search">关键词搜索</label>

</div>

<option value="custom">自定义范围</option>

</select>

</div>

</div>

</div>

</div>

<h3>您的日志记录</h3>

<p id="no-entries">暂无日志记录，开始添加您的第一条日志吧！</p>

</div>

<p>温馨提示：大模型能力仍在发展中，请理性评估其输出内容</p>

</footer>

</div>

// 存储所有日志条目的数组

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 = `

<span class="entry-date">${entry.dateString}</span>

</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>

网页展示：

如对本网站有任何意见和建议，请您提出您的宝贵建议，谢谢。

基于HTML2WEB和DEEPSEEK实现web设计

网站公告

今日签到

热门文章

最新发布