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

137
src/old.html
View File

@ -14,86 +14,88 @@
} }
.card-hover:hover { .card-hover:hover {
transform: translateY(-5px); 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 { .selected-card {
animation: pulse 2s infinite; 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 { @keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(252, 118, 7, 0.4); } 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(252, 118, 7, 0); } 70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); }
100% { box-shadow: 0 0 0 0 rgba(252, 118, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
} }
.button-glow { .button-glow {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.button-glow:hover { .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> </style>
</head> </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 id="vanta-bg" class="fixed inset-0 z-0"></div>
<div class="relative z-10 container mx-auto px-4 py-12"> <div class="relative z-10 container mx-auto px-4 py-12">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold text-[#D83514] mb-4">选择你的身份</h1> <!-- 标题改为绿-紫渐变，与 dash.html 一致 -->
<p class="text-lg text-[#AC8975] max-w-2xl mx-auto">在数字世界找到属于你的温暖连接</p> <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>
<!-- 身份选择卡片区域 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
<!-- Uncle Card --> <!-- 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="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="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl"> <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> </div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">叔叔</h3> <h3 class="text-2xl font-semibold text-white mb-2">叔叔</h3>
<!-- <p class="text-[#AC8975]">智慧与经验的分享者</p> --> <div class="selected-indicator hidden mt-4 text-green-500">
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i> <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div> </div>
</div> </div>
<!-- Aunt Card --> <!-- 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="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="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl"> <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> </div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">阿姨</h3> <h3 class="text-2xl font-semibold text-white mb-2">阿姨</h3>
<!-- <p class="text-[#AC8975]">温柔与关怀的传递者</p> --> <div class="selected-indicator hidden mt-4 text-green-500">
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i> <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div> </div>
</div> </div>
<!-- Grandpa Card --> <!-- 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="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="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl"> <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> </div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">爷爷</h3> <h3 class="text-2xl font-semibold text-white mb-2">爷爷</h3>
<!-- <p class="text-[#AC8975]">故事与智慧的宝库</p> --> <div class="selected-indicator hidden mt-4 text-green-500">
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i> <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div> </div>
</div> </div>
<!-- Grandma Card --> <!-- 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="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="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl"> <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> </div>
<h3 class="text-2xl font-semibold text-[#D83514] mb-2">奶奶</h3> <h3 class="text-2xl font-semibold text-white mb-2">奶奶</h3>
<!-- <p class="text-[#AC8975]">爱与传统的守护者</p> --> <div class="selected-indicator hidden mt-4 text-green-500">
<div class="selected-indicator hidden mt-4 text-[#FC7607]">
<i data-feather="check-circle" class="w-8 h-8 mx-auto"></i> <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center mt-16"> <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> </button>
</div> </div>
@ -101,28 +103,29 @@
<script> <script>
if (window.THREE && window.VANTA && document.querySelector('#vanta-bg')) { if (window.THREE && window.VANTA && document.querySelector('#vanta-bg')) {
VANTA.NET({ VANTA.NET({
el: "#vanta-bg", el: "#vanta-bg",
THREE: window.THREE, // 显式传入 THREE，避免读取不到全局 THREE: window.THREE,
mouseControls: true, mouseControls: true,
touchControls: true, touchControls: true,
gyroControls: false, gyroControls: false,
minHeight: 200.00, minHeight: 200.00,
minWidth: 200.00, minWidth: 200.00,
scale: 1.00, scale: 1.00,
scaleMobile: 1.00, scaleMobile: 1.00,
color: 0xfc7607, /* 采用 dash 深色背景与冷色系线条 */
backgroundColor: 0xeeecbc, color: 0x3f83f8, // 蓝色线条（接近 dash 的风格）
points: 8.00, backgroundColor: 0x111827, // 深灰背景（dash 的 bg-gray-900）
maxDistance: 20.00, points: 8.00,
spacing: 15.00 maxDistance: 20.00,
}); spacing: 15.00
} else { });
console.error('VANTA 初始化失败：THREE 或 VANTA 未加载'); } else {
} console.error('VANTA 初始化失败：THREE 或 VANTA 未加载');
}
// 初始化 feather icons // 初始化 feather icons
feather.replace(); feather.replace();
let selectedRole = null; let selectedRole = null;
const roleNames = { const roleNames = {
@ -135,23 +138,23 @@
function selectRole(role) { function selectRole(role) {
// Remove selection from all cards // Remove selection from all cards
document.querySelectorAll('.card').forEach(card => { 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.querySelector('.selected-indicator').classList.add('hidden');
card.style.transform = ''; card.style.transform = '';
}); });
// Add selection to clicked card // Add selection to clicked card（选中态采用绿色边框）
const selectedCard = event.currentTarget; 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.querySelector('.selected-indicator').classList.remove('hidden');
selectedCard.style.transform = 'scale(1.05)'; selectedCard.style.transform = 'scale(1.05)';
selectedRole = role; selectedRole = role;
// Enable confirm button // Enable confirm button（切换为绿-紫渐变）
const confirmBtn = document.getElementById('confirmBtn'); const confirmBtn = document.getElementById('confirmBtn');
confirmBtn.classList.remove('bg-[#AC8975]', 'bg-opacity-60', 'text-gray-500', 'cursor-not-allowed'); confirmBtn.classList.remove('bg-gray-700', 'bg-opacity-60', 'text-gray-400', 'cursor-not-allowed');
confirmBtn.classList.add('bg-gradient-to-r', 'from-[#FC7607]', 'to-[#D83514]', 'text-white', 'button-glow', 'cursor-pointer'); confirmBtn.classList.add('bg-gradient-to-r', 'from-green-500', 'to-purple-600', 'text-white', 'button-glow', 'cursor-pointer');
confirmBtn.textContent = `小乐与 ${roleNames[role]} 开始对话`; confirmBtn.textContent = `小乐与 ${roleNames[role]} 开始对话`;
// Add animation to the button // Add animation to the button
@ -161,17 +164,17 @@
}, 10); }, 10);
} }
// Add hover effect to cards // Add hover effect to cards（悬停态采用紫色边框）
document.querySelectorAll('.card').forEach(card => { document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => { card.addEventListener('mouseenter', () => {
if (!card.classList.contains('selected-card')) { if (!card.classList.contains('selected-card')) {
card.classList.add('border-[#FC7607]'); card.classList.add('border-purple-500');
} }
}); });
card.addEventListener('mouseleave', () => { card.addEventListener('mouseleave', () => {
if (!card.classList.contains('selected-card')) { 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