songjvcheng/WebRtc_QingGan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image 优化
Some checks failed
Gitea Actions Demo / Explore-Gitea-Actions (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Song367 2025-10-20 19:43:44 +08:00
parent df98105213
commit 0c410b9f57
5 changed files with 70 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/Grandma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
src/Grandpa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
src/aunt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 387 KiB

95
src/old.html
View File

@ -14,86 +14,88 @@
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(252, 118, 7, 0.2);
/* 采用 dash 深色主题的紫色光晕 */
box-shadow: 0 15px 30px rgba(79, 70, 229, 0.25);
}
.selected-card {
animation: pulse 2s infinite;
box-shadow: 0 0 0 4px rgba(252, 118, 7, 0.3);
/* 选中态改为紫色描边光晕 */
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.4);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(252, 118, 7, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(252, 118, 7, 0); }
100% { box-shadow: 0 0 0 0 rgba(252, 118, 7, 0); }
0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); }
100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.button-glow {
transition: all 0.3s ease;
}
.button-glow:hover {
box-shadow: 0 0 20px rgba(252, 118, 7, 0.6);
/* 按钮悬停光晕改为紫色 */
box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
}
</style>
</head>
<body class="bg-[#EEECBC] min-h-screen font-sans">
<body class="min-h-screen bg-gray-900 text-white font-sans">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<div class="relative z-10 container mx-auto px-4 py-12">
<div class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold text-[#D83514] mb-4">选择你的身份</h1>
<p class="text-lg text-[#AC8975] max-w-2xl mx-auto">在数字世界找到属于你的温暖连接</p>
<!-- 标题改为绿-紫渐变，与 dash.html 一致 -->
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-purple-500">选择你的身份</h1>
<p class="text-lg text-gray-300 max-w-2xl mx-auto">在数字世界找到属于你的温暖连接</p>
</div>
<!-- 身份选择卡片区域 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
<!-- Uncle Card -->
<div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('uncle')">
<div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
👨‍💼
<div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('uncle')">
<div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
<img src="uncle.jpg" alt="叔叔" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">叔叔</h3>
<!-- <p class="text-[#AC8975]">智慧与经验的分享者</p> -->
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<h3 class="text-2xl font-semibold text-white mb-2">叔叔</h3>
<div class="selected-indicator hidden mt-4 text-green-500">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div>
</div>
<!-- Aunt Card -->
<div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('aunt')">
<div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
👩‍💼
<div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('aunt')">
<div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
<img src="aunt.jpg" alt="阿姨" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">阿姨</h3>
<!-- <p class="text-[#AC8975]">温柔与关怀的传递者</p> -->
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<h3 class="text-2xl font-semibold text-white mb-2">阿姨</h3>
<div class="selected-indicator hidden mt-4 text-green-500">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div>
</div>
<!-- Grandpa Card -->
<div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('grandpa')">
<div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
👴🌳
<div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('grandpa')">
<div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
<img src="Grandpa.png" alt="爷爷" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">爷爷</h3>
<!-- <p class="text-[#AC8975]">故事与智慧的宝库</p> -->
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<h3 class="text-2xl font-semibold text-white mb-2">爷爷</h3>
<div class="selected-indicator hidden mt-4 text-green-500">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div>
</div>
<!-- Grandma Card -->
<div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('grandma')">
<div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
👵🧶
<div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('grandma')">
<div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
<img src="Grandma.png" alt="奶奶" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">奶奶</h3>
<!-- <p class="text-[#AC8975]">爱与传统的守护者</p> -->
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<h3 class="text-2xl font-semibold text-white mb-2">奶奶</h3>
<div class="selected-indicator hidden mt-4 text-green-500">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div>
</div>
</div>
<div class="text-center mt-16">
<button id="confirmBtn" class="bg-[#AC8975] bg-opacity-60 text-gray-500 px-8 py-4 rounded-full text-xl font-medium transition-all duration-300 cursor-not-allowed">
<!-- 初始禁用按钮采用深灰，启用后切换为绿-紫渐变 -->
<button id="confirmBtn" class="bg-gray-700 bg-opacity-60 text-gray-400 px-8 py-4 rounded-full text-xl font-medium transition-all duration-300 cursor-not-allowed">
确认选择
</button>
</div>
@ -103,7 +105,7 @@
if (window.THREE && window.VANTA && document.querySelector('#vanta-bg')) {
VANTA.NET({
el: "#vanta-bg",
THREE: window.THREE, // 显式传入 THREE，避免读取不到全局
THREE: window.THREE,
mouseControls: true,
touchControls: true,
gyroControls: false,
@ -111,8 +113,9 @@
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xfc7607,
backgroundColor: 0xeeecbc,
/* 采用 dash 深色背景与冷色系线条 */
color: 0x3f83f8, // 蓝色线条（接近 dash 的风格）
backgroundColor: 0x111827, // 深灰背景（dash 的 bg-gray-900）
points: 8.00,
maxDistance: 20.00,
spacing: 15.00
@ -135,23 +138,23 @@
function selectRole(role) {
// Remove selection from all cards
document.querySelectorAll('.card').forEach(card => {
card.classList.remove('selected-card', 'border-[#FC7607]');
card.classList.remove('selected-card', 'border-green-500');
card.querySelector('.selected-indicator').classList.add('hidden');
card.style.transform = '';
});
// Add selection to clicked card
// Add selection to clicked card（选中态采用绿色边框）
const selectedCard = event.currentTarget;
selectedCard.classList.add('selected-card', 'border-[#FC7607]');
selectedCard.classList.add('selected-card', 'border-green-500');
selectedCard.querySelector('.selected-indicator').classList.remove('hidden');
selectedCard.style.transform = 'scale(1.05)';
selectedRole = role;
// Enable confirm button
// Enable confirm button（切换为绿-紫渐变）
const confirmBtn = document.getElementById('confirmBtn');
confirmBtn.classList.remove('bg-[#AC8975]', 'bg-opacity-60', 'text-gray-500', 'cursor-not-allowed');
confirmBtn.classList.add('bg-gradient-to-r', 'from-[#FC7607]', 'to-[#D83514]', 'text-white', 'button-glow', 'cursor-pointer');
confirmBtn.classList.remove('bg-gray-700', 'bg-opacity-60', 'text-gray-400', 'cursor-not-allowed');
confirmBtn.classList.add('bg-gradient-to-r', 'from-green-500', 'to-purple-600', 'text-white', 'button-glow', 'cursor-pointer');
confirmBtn.textContent = `小乐与 ${roleNames[role]} 开始对话`;
// Add animation to the button
@ -161,17 +164,17 @@
}, 10);
}
// Add hover effect to cards
// Add hover effect to cards（悬停态采用紫色边框）
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => {
if (!card.classList.contains('selected-card')) {
card.classList.add('border-[#FC7607]');
card.classList.add('border-purple-500');
}
});
card.addEventListener('mouseleave', () => {
if (!card.classList.contains('selected-card')) {
card.classList.remove('border-[#FC7607]');
card.classList.remove('border-purple-500');
}
});
});

BIN
src/uncle.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB