最近越来越多的企业开始将 MaxKB 在他们企业当中的应用场景官宣了。有时候我们会疑问，这真的是 MaxKB 做的吗？
MaxKB 你怎么还能动的？
案例一：医疗资源小助手开场白
效果展示：
源码：
<html_rander>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>医药咨询小助手</title>
<style>
:root { --primary: #00d4ff; --secondary: #090979; --accent: #ff00e1; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #292456; color: #000000; min-height: 100vh; overflow-x: hidden; } .container {padding: 30px; background: #282456; border-radius: 20px; box-shadow: 0 0 30px rgba(0, 212, 255, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,212,255,0.1) 0%, rgba(9,9,121,0) 70%); z-index: -1; animation: rotate 20s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } h2 { font-size: 2.8em; margin-bottom: 15px; color: white; text-shadow: 0 0 10px var(--primary), 0 0 20px rgba(0, 212, 255, 0.5); position: relative; display: inline-block; } h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 3px; } h3 { font-size: 1.3em; line-height: 1.6; margin-bottom: 30px; color: rgba(255, 255, 255, 0.8); font-weight: 300; } .tab { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .tab button { background: rgba(0, 0, 0, 0.3); border: none; padding: 12px 25px; font-size: 1.1em; border-radius: 30px; cursor: pointer; color: white; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .tab button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); z-index: -1; opacity: 0; transition: opacity 0.3s; } .tab button:hover, .tab button.active { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4); } .tab button:hover::before, .tab button.active::before { opacity: 1; } .tab button.active { color: white; font-weight: bold; } .tabcontent { display: none; padding: 25px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.1); animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tabcontent.active { display: block; } .question-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .question-list li { background: rgba(0, 0, 0, 0.2); padding: 18px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; color: white; position: relative; overflow: hidden; border: 1px solid rgba(0, 212, 255, 0.1); backdrop-filter: blur(5px); } .question-list li::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--accent)); transition: width 0.3s; } .question-list li:hover { background: rgba(0, 212, 255, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2); } .question-list li:hover::before { width: 6px; } @media (max-width: 768px) { .container { padding: 20px; margin: 15px; } h2 { font-size: 2em; } .question-list { grid-template-columns: 1fr; } .tab button { padding: 10px 20px; font-size: 1em; } } /* Floating particles */ .particle { position: absolute; background: rgba(0, 212, 255, 0.5); border-radius: 50%; pointer-events: none; z-index: -1; }
</style>
</head>
<body>
<div class="container">
<h2>医药咨询小助手</h2>
<h3>为您提供专业、可靠的医药咨询服务，守护您的健康。</h3>
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">常见问题</button> <button class="tablinks" onclick="openTab(event, 'tab2')">药品咨询</button> <button class="tablinks" onclick="openTab(event, 'tab3')">健康建议</button> </div>
<div id="tab1" class="tabcontent active">
<ul class="question-list">
<li onclick="sendMessage('感冒了应该吃什么药？')">感冒了应该吃什么药？</li>
<li onclick="sendMessage('如何正确服用抗生素？')">如何正确服用抗生素？</li>
<li onclick="sendMessage('高血压患者需要注意什么？')">高血压患者需要注意什么？</li>
</ul>
</div>
<div id="tab2" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('阿司匹林有哪些副作用？')">阿司匹林有哪些副作用？</li>
<li onclick="sendMessage('布洛芬和对乙酰氨基酚有什么区别？')">布洛芬和对乙酰氨基酚有什么区别？</li>
<li onclick="sendMessage('胰岛素的保存方法是什么？')">胰岛素的保存方法是什么？</li>
</ul>
</div>
<div id="tab3" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('如何提高免疫力？')">如何提高免疫力？</li>
<li onclick="sendMessage('运动对健康有哪些好处？')">运动对健康有哪些好处？</li>
<li onclick="sendMessage('如何预防流感？')">如何预防流感？</li>
</ul>
</div>
</div>
<script>
function openTab(evt, tabName) { const tabcontents = document.getElementsByClassName("tabcontent"); Array.from(tabcontents).forEach(tab => tab.style.display = "none"); const tablinks = document.getElementsByClassName("tablinks"); Array.from(tablinks).forEach(link => link.classList.remove("active")); document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active"); } openTab({ currentTarget: document.querySelector('.tablinks') }, 'tab1'); function send(event) { console.log(event); console.log(event.target.innerText); sendMessage(event.target.innerText); } // Create floating particles function createParticles() { const container = document.querySelector('.container'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 5 + 2; const posX = Math.random() * 100; const posY = Math.random() * 100; const duration = Math.random() * 20 + 10; const delay = Math.random() * 5; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; particle.style.opacity = Math.random() * 0.5 + 0.1; particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite alternate`; container.appendChild(particle); } } // Add floating animation const style = document.createElement('style'); style.textContent = ` @keyframes float { 0% { transform: translate(0, 0); } 25% { transform: translate(10px, 10px); } 50% { transform: translate(20px, 0); } 75% { transform: translate(10px, -10px); } 100% { transform: translate(0, 0); } } `; document.head.appendChild(style); // Initialize particles window.addEventListener('load', createParticles);
</script>
</body>
</html>
</html_rander>案例二：火警应急资源助手
效果展示：
源码：
<html_rander>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>火警应急咨询助手</title>
<style>
:root { --primary: #ff3a22; --secondary: #ff8a00; --accent: #ffd700; --dark: #1a1a1a; } body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #1a1a1a, #2a0e00); color: #000000; min-height: 100vh; overflow-x: hidden; background-image: radial-gradient(circle at 20% 30%, rgba(255, 58, 34, 0.15) 0%, transparent 20%), radial-gradient(circle at 80% 70%, rgba(255, 138, 0, 0.15) 0%, transparent 20%); } .container {padding: 30px; background: rgba(26, 26, 26, 0.8); border-radius: 10px; box-shadow: 0 0 30px rgba(255, 58, 34, 0.3); backdrop-filter: blur(5px); border: 1px solid rgba(255, 58, 34, 0.3); position: relative; overflow: hidden; } .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); box-shadow: 0 0 10px var(--primary); } h2 { font-size: 2.8em; margin-bottom: 15px; color: white; text-shadow: 0 0 10px var(--primary), 0 0 20px rgba(255, 58, 34, 0.5); position: relative; display: inline-block; letter-spacing: 1px; } h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 3px; box-shadow: 0 0 8px var(--primary); } h3 { font-size: 1.3em; line-height: 1.6; margin-bottom: 30px; color: rgba(255, 255, 255, 0.8); font-weight: 300; } .tab { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .tab button { background: rgba(40, 40, 40, 0.8); border: none; padding: 12px 25px; font-size: 1.1em; border-radius: 5px; cursor: pointer; color: white; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 58, 34, 0.3); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } .tab button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); z-index: -1; opacity: 0; transition: opacity 0.3s; } .tab button:hover, .tab button.active { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 58, 34, 0.4); } .tab button:hover::before, .tab button.active::before { opacity: 1; } .tab button.active { color: white; font-weight: bold; } .tabcontent { display: none; padding: 25px; background: rgba(40, 40, 40, 0.6); border-radius: 8px; box-shadow: inset 0 0 10px rgba(255, 58, 34, 0.1); border: 1px solid rgba(255, 58, 34, 0.2); animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tabcontent.active { display: block; } .question-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .question-list li { background: rgba(30, 30, 30, 0.8); padding: 18px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; color: white; position: relative; overflow: hidden; border: 1px solid rgba(255, 58, 34, 0.2); backdrop-filter: blur(5px); font-weight: 500; } .question-list li::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--secondary)); transition: width 0.3s; } .question-list li:hover { background: rgba(255, 58, 34, 0.1); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 58, 34, 0.3); } .question-list li:hover::before { width: 6px; } @media (max-width: 768px) { .container { padding: 20px; margin: 15px; } h2 { font-size: 2em; } .question-list { grid-template-columns: 1fr; } .tab button { padding: 10px 20px; font-size: 1em; } } /* Fire alarm elements */ .alarm-light { position: absolute; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; top: 30px; right: 30px; box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); animation: pulse 1.5s infinite alternate; } @keyframes pulse { 0% { opacity: 0.3; } 100% { opacity: 1; } } /* Emergency tape effect */ .tape { position: absolute; width: 100%; height: 40px; background: repeating-linear-gradient( 45deg, #ff3a22, #ff3a22 20px, #000 20px, #000 40px ); transform: rotate(-2deg); top: 50px; left: 0; opacity: 0.2; z-index: -1; } /* Smoke effect */ .smoke { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle at 20% 30%, transparent 0%, rgba(40, 40, 40, 0.5) 50%, transparent 70%), radial-gradient(circle at 80% 70%, transparent 0%, rgba(40, 40, 40, 0.5) 50%, transparent 70%); pointer-events: none; z-index: -1; }
</style>
</head>
<body>
<div class="container">
<div class="alarm-light"></div>
<div class="tape"></div>
<div class="smoke"></div>
<h2>火警应急咨询助手</h2>
<h3>提供火灾预防、应急处理和救援指导，保障您的生命安全。</h3>
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">火灾预防</button> <button class="tablinks" onclick="openTab(event, 'tab2')">应急处理</button> <button class="tablinks" onclick="openTab(event, 'tab3')">救援指导</button> </div>
<div id="tab1" class="tabcontent active">
<ul class="question-list">
<li onclick="sendMessage('如何检查家庭火灾隐患？')">如何检查家庭火灾隐患？</li>
<li onclick="sendMessage('灭火器的正确使用方法？')">灭火器的正确使用方法？</li>
<li onclick="sendMessage('电气火灾如何预防？')">电气火灾如何预防？</li>
</ul>
</div>
<div id="tab2" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('发现火灾第一时间该做什么？')">发现火灾第一时间该做什么？</li>
<li onclick="sendMessage('如何正确报警？')">如何正确报警？</li>
<li onclick="sendMessage('高楼火灾如何逃生？')">高楼火灾如何逃生？</li>
</ul>
</div>
<div id="tab3" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('烧伤急救措施有哪些？')">烧伤急救措施有哪些？</li>
<li onclick="sendMessage('烟雾吸入如何处理？')">烟雾吸入如何处理？</li>
<li onclick="sendMessage('火灾后心理疏导建议')">火灾后心理疏导建议</li>
</ul>
</div>
</div>
<script>
function openTab(evt, tabName) { const tabcontents = document.getElementsByClassName("tabcontent"); Array.from(tabcontents).forEach(tab => tab.style.display = "none"); const tablinks = document.getElementsByClassName("tablinks"); Array.from(tablinks).forEach(link => link.classList.remove("active")); document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active"); } openTab({ currentTarget: document.querySelector('.tablinks') }, 'tab1'); function send(event) { console.log(event); console.log(event.target.innerText); sendMessage(event.target.innerText); } // Create smoke particles function createSmoke() { const container = document.querySelector('.container'); const smokeCount = 15; for (let i = 0; i < smokeCount; i++) { const smokeParticle = document.createElement('div'); smokeParticle.classList.add('smoke-particle'); const size = Math.random() * 100 + 50; const posX = Math.random() * 100; const posY = Math.random() * 100; const duration = Math.random() * 20 + 10; const delay = Math.random() * 5; const opacity = Math.random() * 0.3 + 0.1; smokeParticle.style.width = `${size}px`; smokeParticle.style.height = `${size}px`; smokeParticle.style.left = `${posX}%`; smokeParticle.style.top = `${posY}%`; smokeParticle.style.opacity = opacity; smokeParticle.style.background = `radial-gradient(circle, rgba(255,255,255,${opacity}) 0%, rgba(255,255,255,0) 70%)`; smokeParticle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; smokeParticle.style.borderRadius = '50%'; smokeParticle.style.position = 'absolute'; smokeParticle.style.pointerEvents = 'none'; smokeParticle.style.zIndex = '-1'; container.appendChild(smokeParticle); } } // Add floating animation for smoke const style = document.createElement('style'); style.textContent = ` @keyframes float { 0% { transform: translate(0, 0) scale(1); opacity: 0.1; } 50% { transform: translate(20px, -20px) scale(1.2); opacity: 0.3; } 100% { transform: translate(40px, -40px) scale(1.5); opacity: 0; } } `; document.head.appendChild(style); // Initialize smoke effect window.addEventListener('load', createSmoke);
</script>
</body>
</html>
</html_rander>案例三：校园安全咨询助手
效果展示：
源码：
<html_rander>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校园安全咨询助手</title>
<style>
:root { --primary: #3498db; --secondary: #2ecc71; --accent: #f1c40f; --dark: #2c3e50; --light: #ecf0f1; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f5f7fa; color: #333; min-height: 100vh; overflow-x: hidden; } .container {padding: 30px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; border: none; } .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 6px 6px 0 0; } h2 { font-size: 2.5em; margin-bottom: 15px; color: var(--dark); position: relative; display: inline-block; letter-spacing: 0.5px; font-weight: 700; } h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background: var(--accent); border-radius: 2px; } h3 { font-size: 1.2em; line-height: 1.6; margin-bottom: 30px; color: #7f8c8d; font-weight: 400; } .tab { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .tab button { background: white; border: none; padding: 12px 25px; font-size: 1em; border-radius: 8px; cursor: pointer; color: var(--dark); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); border: 1px solid #e0e0e0; font-weight: 600; letter-spacing: 0.5px; } .tab button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.15); color: var(--primary); } .tab button.active { background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); } .tabcontent { display: none; padding: 25px; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); border: 1px solid #eee; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tabcontent.active { display: block; } .question-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .question-list li { background: white; padding: 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; color: var(--dark); position: relative; overflow: hidden; border: 1px solid #e0e0e0; font-weight: 500; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .question-list li::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--primary); transition: all 0.3s ease; } .question-list li:hover { background: #f8fafc; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(52, 152, 219, 0.1); } .question-list li:hover::before { width: 6px; background: var(--secondary); } /* Education elements */ .edu-icon { position: absolute; width: 120px; height: 120px; opacity: 0.05; z-index: 0; } .edu-icon.book { top: 20px; right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232c3e50' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } .edu-icon.graduate { bottom: 20px; left: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232c3e50' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } /* Floating dots decoration */ .floating-dots { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; overflow: hidden; } .dot { position: absolute; background-color: rgba(52, 152, 219, 0.1); border-radius: 50%; animation: float 15s infinite linear; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-1000px) rotate(720deg); } } @media (max-width: 768px) { .container { padding: 20px; margin: 15px; } h2 { font-size: 2em; } .question-list { grid-template-columns: 1fr; } .tab button { padding: 10px 20px; font-size: 0.9em; } }
</style>
</head>
<body>
<div class="container">
<div class="edu-icon book"></div>
<div class="edu-icon graduate"></div>
<div class="floating-dots" id="floatingDots"></div>
<h2>校园安全咨询助手</h2>
<h3>提供校园安全知识、应急处理和预防指导，保障师生安全。</h3>
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">安全知识</button> <button class="tablinks" onclick="openTab(event, 'tab2')">应急处理</button> <button class="tablinks" onclick="openTab(event, 'tab3')">预防指导</button> </div>
<div id="tab1" class="tabcontent active">
<ul class="question-list">
<li onclick="sendMessage('如何检查校园安全隐患？')">如何检查校园安全隐患？</li>
<li onclick="sendMessage('灭火器的正确使用方法？')">灭火器的正确使用方法？</li>
<li onclick="sendMessage('电气安全如何预防？')">电气安全如何预防？</li>
</ul>
</div>
<div id="tab2" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('发现紧急情况第一时间该做什么？')">发现紧急情况第一时间该做什么？</li>
<li onclick="sendMessage('如何正确报警？')">如何正确报警？</li>
<li onclick="sendMessage('教学楼紧急疏散步骤？')">教学楼紧急疏散步骤？</li>
</ul>
</div>
<div id="tab3" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('校园安全演练计划')">校园安全演练计划</li>
<li onclick="sendMessage('学生安全教育内容')">学生安全教育内容</li>
<li onclick="sendMessage('校园安全管理制度')">校园安全管理制度</li>
</ul>
</div>
</div>
<script>
function openTab(evt, tabName) { const tabcontents = document.getElementsByClassName("tabcontent"); Array.from(tabcontents).forEach(tab => tab.style.display = "none"); const tablinks = document.getElementsByClassName("tablinks"); Array.from(tablinks).forEach(link => link.classList.remove("active")); document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active"); } openTab({ currentTarget: document.querySelector('.tablinks') }, 'tab1'); function send(event) { console.log(event); console.log(event.target.innerText); sendMessage(event.target.innerText); } // Create floating dots function createFloatingDots() { const container = document.getElementById('floatingDots'); const dotCount = 15; for (let i = 0; i < dotCount; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); const size = Math.random() * 100 + 20; const posX = Math.random() * 100; const posY = Math.random() * 100 + 100; const duration = Math.random() * 10 + 10; const delay = Math.random() * 5; const opacity = Math.random() * 0.1 + 0.05; dot.style.width = `${size}px`; dot.style.height = `${size}px`; dot.style.left = `${posX}%`; dot.style.top = `${posY}%`; dot.style.opacity = opacity; dot.style.animationDuration = `${duration}s`; dot.style.animationDelay = `${delay}s`; container.appendChild(dot); } } // Initialize floating dots window.addEventListener('load', createFloatingDots);
</script>
</body>
</html>
</html_rander>案例四：能源智能研究平台
效果展示：
源码
<html_rander>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>能源智能研究平台</title>
<style>
:root { --primary: #0066cc; --secondary: #00aaff; --accent: #00ffcc; --dark: #0a192f; --light: #e6f7ff; } body { font-family: 'Segoe UI', 'Roboto', sans-serif; margin: 0; padding: 0; background-color: var(--dark); color: #000000; min-height: 100vh; overflow-x: hidden; /* 修改背景，添加对角线花纹 */ background-image: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, transparent 50%), linear-gradient(-135deg, rgba(0, 170, 255, 0.05) 0%, transparent 50%), /* 添加交叉线条花纹 */ linear-gradient(to right, rgba(0, 170, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 170, 255, 0.02) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; } .container { padding: 30px; background: rgba(10, 25, 47, 0.9); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 102, 204, 0.2); backdrop-filter: blur(8px); border: 1px solid rgba(0, 170, 255, 0.2); position: relative; overflow: hidden; /* 添加边框花纹效果 */ border-image: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)) 1; } .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); box-shadow: 0 0 15px rgba(0, 170, 255, 0.5); } /* 添加容器内部的斜线花纹 */ .container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, rgba(0, 170, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(0, 170, 255, 0.03) 75%, rgba(0, 170, 255, 0.03)), linear-gradient(45deg, rgba(0, 170, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(0, 170, 255, 0.03) 75%, rgba(0, 170, 255, 0.03)); background-size: 20px 20px; background-position: 0 0, 10px 10px; pointer-events: none; z-index: -1; opacity: 0.5; } h2 { font-size: 2.8em; margin-bottom: 15px; color: var(--light); font-weight: 600; letter-spacing: 0.5px; position: relative; display: inline-block; background: linear-gradient(90deg, var(--secondary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; /* 添加文字下方的装饰线条 */ padding-bottom: 10px; } h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: 2px; } h2::before { content: ''; position: absolute; bottom: -15px; right: 0; width: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); border-radius: 2px; } h3 { font-size: 1.3em; line-height: 1.6; margin-bottom: 30px; color: rgba(230, 247, 255, 0.8); font-weight: 300; max-width: 80%; position: relative; } /* 在副标题下方添加装饰线条 */ h3::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 100px; height: 2px; background: linear-gradient(90deg, var(--secondary), transparent); border-radius: 2px; } .tab { display: flex; justify-content: flex-start; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; position: relative; } /* 在选项卡下方添加装饰线条 */ .tab::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 170, 255, 0.3), transparent); } .tab button { background: rgba(16, 42, 82, 0.8); border: none; padding: 12px 25px; font-size: 1.1em; border-radius: 6px; cursor: pointer; color: var(--light); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; border: 1px solid rgba(0, 170, 255, 0.3); font-weight: 500; letter-spacing: 0.5px; } .tab button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); z-index: -1; opacity: 0; transition: opacity 0.3s; } /* 为按钮添加斜线花纹效果 */ .tab button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%); background-size: 4px 4px; opacity: 0.3; z-index: -1; } .tab button:hover, .tab button.active { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 170, 255, 0.3); } .tab button:hover::before, .tab button.active::before { opacity: 0.3; } .tab button.active { color: white; font-weight: 600; border: 1px solid var(--secondary); background: rgba(0, 102, 204, 0.3); } .tabcontent { display: none; padding: 25px; background: rgba(16, 42, 82, 0.4); border-radius: 8px; box-shadow: inset 0 0 20px rgba(0, 102, 204, 0.1); border: 1px solid rgba(0, 170, 255, 0.1); animation: fadeIn 0.5s ease; position: relative; overflow: hidden; } /* 为内容区域添加边框花纹 */ .tabcontent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid transparent; border-image: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)) 1; border-image-slice: 1; pointer-events: none; z-index: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tabcontent.active { display: block; } .question-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .question-list li { background: rgba(16, 42, 82, 0.6); padding: 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; color: var(--light); position: relative; overflow: hidden; border: 1px solid rgba(0, 170, 255, 0.2); font-weight: 400; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .question-list li::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--secondary), var(--accent)); transition: width 0.3s; } /* 为列表项添加斜线花纹 */ .question-list li::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%); background-size: 6px 6px; opacity: 0.5; } .question-list li:hover { background: rgba(0, 170, 255, 0.1); transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 170, 255, 0.2); } .question-list li:hover::before { width: 6px; } /* Tech elements */ .tech-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 增强网格线条效果 */ background-image: linear-gradient(rgba(0, 170, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 170, 255, 0.1) 1px, transparent 1px), /* 添加对角线网格 */ linear-gradient(45deg, rgba(0, 170, 255, 0.05) 1px, transparent 1px), linear-gradient(-45deg, rgba(0, 170, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 80px 80px, 80px 80px; pointer-events: none; z-index: -1; } .data-node { position: absolute; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } } /* Responsive design */ @media (max-width: 768px) { .container { padding: 20px; margin: 15px; } h2 { font-size: 2em; } h3 { max-width: 100%; font-size: 1.1em; } .question-list { grid-template-columns: 1fr; } .tab button { padding: 10px 20px; font-size: 1em; } } /* Animated connection lines */ .connection-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--secondary), transparent); transform-origin: left center; animation: connect 3s infinite; z-index: -1; } @keyframes connect { 0% { transform: scaleX(0); opacity: 0; } 50% { transform: scaleX(1); opacity: 0.5; } 100% { transform: scaleX(0); opacity: 0; } } /* 新增的粒子闪光效果 */ .particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: hidden; } .particle { position: absolute; width: 4px; height: 4px; background-color: rgba(0, 255, 204, 0.8); border-radius: 50%; box-shadow: 0 0 10px 2px rgba(0, 255, 204, 0.6); animation: particle-float 8s infinite ease-in-out; } .particle:nth-child(2n) { background-color: rgba(0, 170, 255, 0.8); box-shadow: 0 0 10px 2px rgba(0, 170, 255, 0.6); } .particle:nth-child(3n) { background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.6); } @keyframes particle-float { 0% { transform: translate(0, 0) scale(0.8); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 0.8; } 100% { transform: translate(var(--tx), var(--ty)) scale(1.2); opacity: 0; } } .sparkle { position: absolute; width: 2px; height: 2px; background-color: white; border-radius: 50%; box-shadow: 0 0 5px 1px white; animation: sparkle-flicker 1.5s infinite alternate; } @keyframes sparkle-flicker { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* 新增的装饰性角标 */ .corner-decoration { position: absolute; width: 30px; height: 30px; border: 2px solid var(--secondary); opacity: 0.5; z-index: 1; } .corner-decoration.top-left { top: 10px; left: 10px; border-right: none; border-bottom: none; } .corner-decoration.top-right { top: 10px; right: 10px; border-left: none; border-bottom: none; } .corner-decoration.bottom-left { bottom: 10px; left: 10px; border-right: none; border-top: none; } .corner-decoration.bottom-right { bottom: 10px; right: 10px; border-left: none; border-top: none; }
</style>
</head>
<body>
<div class="particles-container" id="particles-container"></div>
<div class="container">
<div class="tech-grid"></div>
<div id="data-nodes"></div>
<div id="connection-lines"></div>
<div class="corner-decoration top-left"></div>
<div class="corner-decoration top-right"></div>
<div class="corner-decoration bottom-left"></div>
<div class="corner-decoration bottom-right"></div>
<h2>能源智能研究平台</h2>
<h3>基于大数据分析的能源系统优化研究平台，为能源决策提供科学依据</h3>
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">可再生能源</button> <button class="tablinks" onclick="openTab(event, 'tab2')">能源效率</button> <button class="tablinks" onclick="openTab(event, 'tab3')">储能技术</button> </div>
<div id="tab1" class="tabcontent active">
<ul class="question-list">
<li onclick="sendMessage('太阳能发电技术最新进展？')">太阳能发电技术最新进展？</li>
<li onclick="sendMessage('风能发电的经济性分析？')">风能发电的经济性分析？</li>
<li onclick="sendMessage('生物质能源发展前景？')">生物质能源发展前景？</li>
</ul>
</div>
<div id="tab2" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('工业能效提升的关键技术？')">工业能效提升的关键技术？</li>
<li onclick="sendMessage('建筑节能的最佳实践？')">建筑节能的最佳实践？</li>
<li onclick="sendMessage('智能电网如何提高能源效率？')">智能电网如何提高能源效率？</li>
</ul>
</div>
<div id="tab3" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('锂电池技术最新突破？')">锂电池技术最新突破？</li>
<li onclick="sendMessage('氢能源储存技术发展现状？')">氢能源储存技术发展现状？</li>
<li onclick="sendMessage('新型储能材料研究进展')">新型储能材料研究进展</li>
</ul>
</div>
</div>
<script>
function openTab(evt, tabName) { const tabcontents = document.getElementsByClassName("tabcontent"); Array.from(tabcontents).forEach(tab => tab.style.display = "none"); const tablinks = document.getElementsByClassName("tablinks"); Array.from(tablinks).forEach(link => link.classList.remove("active")); document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active"); } openTab({ currentTarget: document.querySelector('.tablinks') }, 'tab1');
</script>
</body>
</html>案例五：能源智能研究平台
效果展示：
源码
<html_rander>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>政务数据智能分析平台</title>
<style>
:root { --primary: #1a5fb4; --secondary: #3584e4; --accent: #62a0ea; --dark: #f6f5f4; --light: #ffffff; --text-dark: #241f31; --text-light: #5e5c64; --border: #d9d7e0; } body { font-family: 'Microsoft YaHei', 'PingFang SC', 'SimHei', sans-serif; margin: 0; padding: 0; background-color: var(--dark); color: var(--text-dark); min-height: 100vh; line-height: 1.6; } .container {padding: 30px; background: var(--light); border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); border: 1px solid var(--border); position: relative; } h2 { font-size: 24px; margin-bottom: 15px; color: var(--primary); font-weight: 600; padding-bottom: 10px; border-bottom: 2px solid var(--primary); position: relative; } h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: var(--accent); } h3 { font-size: 16px; line-height: 1.6; margin-bottom: 25px; color: var(--text-light); font-weight: 400; } .tab { display: flex; justify-content: flex-start; gap: 5px; margin-bottom: 25px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .tab button { background: var(--light); border: none; padding: 8px 20px; font-size: 14px; border-radius: 4px 4px 0 0; cursor: pointer; color: var(--text-light); transition: all 0.2s ease; position: relative; border: 1px solid transparent; border-bottom: none; font-weight: 500; } .tab button:hover { color: var(--primary); background: #f5f9ff; } .tab button.active { color: var(--primary); font-weight: 600; border-color: var(--border); border-bottom: 1px solid var(--light); background: var(--light); margin-bottom: -1px; } .tabcontent { display: none; padding: 20px 0; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tabcontent.active { display: block; } .question-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .question-list li { background: var(--light); padding: 15px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; color: var(--text-dark); border: 1px solid var(--border); font-weight: 400; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .question-list li:hover { background: #f5f9ff; border-color: var(--accent); color: var(--primary); } /* 政府风格装饰元素 */ .gov-decoration { position: absolute; top: 0; right: 0; height: 100%; width: 80px; background: linear-gradient(90deg, rgba(26, 95, 180, 0.05) 0%, transparent 100%); z-index: -1; } .gov-seal { position: absolute; top: 30px; right: 30px; width: 60px; height: 60px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* 响应式设计 */ @media (max-width: 768px) { .container { padding: 20px; margin: 10px; } h2 { font-size: 20px; } h3 { font-size: 14px; } .question-list { grid-template-columns: 1fr; } .tab button { padding: 6px 15px; font-size: 13px; } .gov-seal { width: 40px; height: 40px; font-size: 12px; top: 15px; right: 15px; } }
</style>
</head>
<body>
<div class="container">
<div class="gov-decoration"></div>
<div class="gov-seal">数政</div>
<h2>政务数据智能分析平台</h2>
<h3>基于政务大数据的智能分析平台，为政府决策提供科学依据和技术支持</h3>
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">经济数据</button> <button class="tablinks" onclick="openTab(event, 'tab2')">人口统计</button> <button class="tablinks" onclick="openTab(event, 'tab3')">公共服务</button> </div>
<div id="tab1" class="tabcontent active">
<ul class="question-list">
<li onclick="sendMessage('区域经济发展趋势分析？')">区域经济发展趋势分析？</li>
<li onclick="sendMessage('重点产业GDP贡献率？')">重点产业GDP贡献率？</li>
<li onclick="sendMessage('中小企业发展现状报告？')">中小企业发展现状报告？</li>
</ul>
</div>
<div id="tab2" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('人口年龄结构变化分析？')">人口年龄结构变化分析？</li>
<li onclick="sendMessage('流动人口分布特征？')">流动人口分布特征？</li>
<li onclick="sendMessage('人口预测模型结果？')">人口预测模型结果？</li>
</ul>
</div>
<div id="tab3" class="tabcontent">
<ul class="question-list">
<li onclick="sendMessage('教育资源均衡性评估？')">教育资源均衡性评估？</li>
<li onclick="sendMessage('医疗资源覆盖情况？')">医疗资源覆盖情况？</li>
<li onclick="sendMessage('公共交通满意度调查')">公共交通满意度调查</li>
</ul>
</div>
</div>
<script>
function openTab(evt, tabName) { const tabcontents = document.getElementsByClassName("tabcontent"); Array.from(tabcontents).forEach(tab => tab.style.display = "none"); const tablinks = document.getElementsByClassName("tablinks"); Array.from(tablinks).forEach(link => link.classList.remove("active")); document.getElementById(tabName).style.display = "block"; evt.currentTarget.classList.add("active"); } openTab({ currentTarget: document.querySelector('.tablinks') }, 'tab1'); function sendMessage(message) { console.log("发送消息: " + message); }
</script>
</body>
</html>
</html_rander>其他效果
基于 MaxKB 的使用方法说明
直接复制代码粘贴到高级编排的开场白中。同时确保使用 <html_rander> 标签，且代码均在 <html_rander> 标签中。
如下图所示：
