18069996051/codingroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交：CodingRoom 机器人与 AI 平台

Browse Source
This commit is contained in:
yczpf2019
2026-01-28 00:19:52 +08:00
commit 2af1b4ffe7
13 changed files with 618 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
index.html Normal file
View File

@@ -0,0 +1,322 @@
<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodingRoom | 机器人与 AI 世界</title>
<!-- 使用 Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Noto+Sans+SC:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Fredoka', 'Noto Sans SC', sans-serif;
background-color: #fffbeb;
color: #431407;
}
.glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-pattern {
background-color: #fffbeb;
background-image: radial-gradient(#fbbf24 0.5px, #fffbeb 0.5px);
background-size: 20px 20px;
}
.bubble-float {
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-15px) rotate(2deg);
}
}
.card-hover:hover {
transform: scale(1.02) translateY(-5px);
}
.fun-gradient {
background: linear-gradient(135deg, #f97316 0%, #a855f7 100%);
}
/* 解决固定导航栏遮挡标题的问题 */
section {
scroll-margin-top: 100px;
}
#mobile-menu {
transition: all 0.3s ease-in-out;
transform: translateY(-20px);
opacity: 0;
pointer-events: none;
}
#mobile-menu.active {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@^19.2.4",
"react/": "https://esm.sh/react@^19.2.4/",
"@google/genai": "https://esm.sh/@google/genai@^1.38.0"
}
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body class="selection:bg-orange-200">
<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50 px-6 py-4">
<div class="max-w-7xl mx-auto relative">
<div class="flex justify-between items-center glass rounded-full px-8 py-3 shadow-lg shadow-orange-100/50">
<a href="#" class="flex items-center gap-2 group">
<div
class="w-10 h-10 fun-gradient rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg group-hover:rotate-12 transition-transform">
C</div>
<span class="text-2xl font-bold tracking-tight text-slate-800">coding<span
class="text-orange-500">room.cn</span></span>
</a>
<!-- 桌面端菜单 -->
<div class="hidden md:flex gap-10 text-lg font-bold text-slate-600">
<a href="#services"
class="hover:text-orange-500 transition-colors relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-1 after:bg-orange-400 after:transition-all hover:after:w-full">机器人奇遇</a>
<a href="#tech"
class="hover:text-orange-500 transition-colors relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-1 after:bg-orange-400 after:transition-all hover:after:w-full">为什么选我</a>
</div>
<!-- 移动端汉堡按钮 -->
<button id="menu-toggle"
class="md:hidden w-10 h-10 flex flex-col justify-center items-center gap-1.5 focus:outline-none">
<div class="w-6 h-1 bg-orange-500 rounded transition-all menu-bar"></div>
<div class="w-6 h-1 bg-purple-500 rounded transition-all menu-bar"></div>
<div class="w-6 h-1 bg-orange-500 rounded transition-all menu-bar"></div>
</button>
</div>
<!-- 移动端菜单面板 -->
<div id="mobile-menu"
class="absolute top-full left-0 right-0 mt-4 md:hidden glass rounded-3xl p-6 shadow-2xl flex flex-col gap-4 text-center font-bold text-slate-700">
<a href="#services" class="py-3 hover:bg-orange-50 rounded-xl transition-colors">机器人奇遇</a>
<a href="#tech" class="py-3 hover:bg-orange-50 rounded-xl transition-colors">为什么选我</a>
</div>
</div>
</nav>
<!-- 英雄区 -->
<header class="relative pt-48 pb-20 px-6 hero-pattern overflow-hidden">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-16">
<div class="flex-1 text-center lg:text-left space-y-8">
<div
class="inline-block px-6 py-2 bg-yellow-400/20 border-2 border-yellow-400/30 rounded-full text-orange-600 text-sm font-bold uppercase tracking-wider">
🌟 机器人创新工坊
</div>
<h1 class="text-5xl lg:text-7xl font-extrabold tracking-tight leading-tight text-slate-800">
和机器人朋友<br />
<span class="text-transparent bg-clip-text fun-gradient">
开启智能新体验
</span>
</h1>
<p class="text-xl text-slate-600 max-w-xl mx-auto lg:mx-0 leading-relaxed">
在 CodingRoom，我们让机器人变成你的好伙伴！来这里设计你自己的机器人小伙伴，让它学会走路、说话和各种神奇技能！
</p>
<div class="flex justify-center lg:justify-start">
<button onclick="document.getElementById('services').scrollIntoView({behavior:'smooth'})"
class="px-12 py-5 fun-gradient text-white rounded-3xl font-black text-xl shadow-xl shadow-orange-500/30 transition-transform hover:scale-110 active:scale-95">
立即探索！🚀
</button>
</div>
</div>
<div class="flex-1 w-full max-w-lg bubble-float">
<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-full drop-shadow-2xl">
<circle cx="120" cy="120" r="110" fill="white" fill-opacity="0.8" />
<rect x="70" y="80" width="100" height="90" rx="25" fill="#f97316" stroke="#431407"
stroke-width="6" />
<rect x="85" y="100" width="30" height="30" rx="15" fill="white" />
<rect x="125" y="100" width="30" height="30" rx="15" fill="white" />
<circle cx="100" cy="115" r="8" fill="#431407">
<animate attributeName="r" values="8;10;8" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="140" cy="115" r="8" fill="#431407">
<animate attributeName="r" values="8;10;8" dur="2s" repeatCount="indefinite" />
</circle>
<path d="M105 145 Q120 155 135 145" stroke="white" stroke-width="6" stroke-linecap="round" />
<path d="M120 50 V80" stroke="#431407" stroke-width="6" stroke-linecap="round" />
<circle cx="120" cy="40" r="12" fill="#a855f7" class="animate-pulse" />
<rect x="40" y="110" width="25" height="40" rx="12" fill="#a855f7" stroke="#431407"
stroke-width="4" />
<rect x="175" y="110" width="25" height="40" rx="12" fill="#a855f7" stroke="#431407"
stroke-width="4" />
</svg>
</div>
</div>
</header>
<!-- 核心板块 -->
<section id="services" class="py-24 px-6 bg-white rounded-[4rem] mx-4 shadow-inner">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 space-y-4">
<h2 class="text-4xl md:text-5xl font-black text-slate-800">三大核心功能</h2>
<div class="w-24 h-2 bg-purple-400 rounded-full mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div
class="p-10 rounded-[3rem] bg-orange-50 border-4 border-orange-100 card-hover transition-all group">
<div
class="w-20 h-20 bg-orange-500 rounded-3xl flex items-center justify-center text-white mb-8 shadow-lg rotate-3 group-hover:rotate-0 transition-transform">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<h3 class="text-2xl font-black mb-4">机器人奇遇记</h3>
<p class="text-slate-600 text-lg font-medium leading-relaxed">挑选最适合你的“机械战友”，开启第一步。</p>
</div>
<div
class="p-10 rounded-[3rem] bg-purple-50 border-4 border-purple-100 card-hover transition-all group">
<div
class="w-20 h-20 bg-purple-500 rounded-3xl flex items-center justify-center text-white mb-8 shadow-lg -rotate-3 group-hover:rotate-0 transition-transform">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<h3 class="text-2xl font-black mb-4">智能控制</h3>
<p class="text-slate-600 text-lg font-medium leading-relaxed">让机器人跳舞、唱歌和灵活绕障。</p>
</div>
<div
class="p-10 rounded-[3rem] bg-yellow-50 border-4 border-yellow-100 card-hover transition-all group">
<div
class="w-20 h-20 bg-yellow-500 rounded-3xl flex items-center justify-center text-white mb-8 shadow-lg rotate-6 group-hover:rotate-0 transition-transform">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-2xl font-black mb-4">AI 小魔法</h3>
<p class="text-slate-600 text-lg font-medium leading-relaxed">给机器人装上“超级大脑”！让它认出你的脸。</p>
</div>
</div>
</div>
</section>
<!-- 技术优势 (ID: tech) -->
<section id="tech" class="py-24 px-6 overflow-hidden">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row gap-20 items-center">
<div class="flex-1 space-y-8 text-center lg:text-left">
<h2 class="text-4xl md:text-5xl font-black text-slate-800">为什么大家都爱 CodingRoom？</h2>
<div class="space-y-6">
<div
class="flex items-center gap-6 p-6 bg-white rounded-3xl shadow-md border-l-8 border-orange-500 transition-all hover:translate-x-2">
<div
class="w-12 h-12 rounded-full bg-orange-100 text-orange-600 flex-shrink-0 flex items-center justify-center text-2xl font-bold">
1</div>
<span class="text-xl font-bold text-slate-700">超简单：拖拽即可操控，轻松上手。</span>
</div>
<div
class="flex items-center gap-6 p-6 bg-white rounded-3xl shadow-md border-l-8 border-purple-500 transition-all hover:translate-x-2">
<div
class="w-12 h-12 rounded-full bg-purple-100 text-purple-600 flex-shrink-0 flex items-center justify-center text-2xl font-bold">
2</div>
<span class="text-xl font-bold text-slate-700">看得到：指令发出，机器人立刻动起来！</span>
</div>
</div>
</div>
<div class="flex-1 w-full">
<div
class="bg-slate-900 rounded-[3rem] p-8 shadow-2xl relative border-8 border-slate-800 transform rotate-2 flex items-center justify-center">
<div class="text-center">
<div class="text-6xl mb-4">🤖</div>
<p class="text-lg md:text-xl text-orange-300 font-bold italic">智能互动，无限可能</p>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="py-16 bg-slate-100 border-t-4 border-slate-200 px-6">
<div class="max-w-7xl mx-auto flex flex-col items-center gap-10 text-center">
<div class="flex items-center gap-3">
<div
class="w-12 h-12 fun-gradient rounded-2xl flex items-center justify-center font-bold text-white text-2xl">
C</div>
<span class="text-3xl font-black text-slate-800 tracking-tighter">codingroom.cn</span>
</div>
<div class="space-y-4">
<p class="text-slate-500 text-lg font-bold">🎨 创造无限可能</p>
<div class="flex flex-col md:flex-row items-center justify-center gap-4 mt-6">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"
class="bg-white px-6 py-2 rounded-full text-slate-500 font-bold shadow-sm hover:text-orange-500 hover:shadow-md transition-all">
浙ICP备2026005005号-1
</a>
</div>
</div>
</div>
</footer>
<script>
// 移动端菜单逻辑
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
const menuBars = document.querySelectorAll('.menu-bar');
menuToggle.addEventListener('click', (e) => {
e.stopPropagation();
const isActive = mobileMenu.classList.toggle('active');
// 汉堡按钮动画简单处理
if (isActive) {
menuBars[0].style.transform = "rotate(45deg) translate(5px, 5px)";
menuBars[1].style.opacity = "0";
menuBars[2].style.transform = "rotate(-45deg) translate(5px, -5px)";
} else {
menuBars[0].style.transform = "none";
menuBars[1].style.opacity = "1";
menuBars[2].style.transform = "none";
}
});
// 点击菜单项后关闭菜单
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('active');
menuBars.forEach(bar => bar.style.transform = "none");
menuBars[1].style.opacity = "1";
});
});
// 点击外部关闭菜单
document.addEventListener('click', () => {
if (mobileMenu.classList.contains('active')) {
mobileMenu.classList.remove('active');
menuBars.forEach(bar => bar.style.transform = "none");
menuBars[1].style.opacity = "1";
}
});
</script>
<script type="module" src="/index.tsx"></script>
</body>
</html>