You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
468 lines
15 KiB
468 lines
15 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>青核 Youthome - 配对成功</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
|
:root {
|
|
/* Traework 设计令牌 - 圆角/间距/阴影/高度 */
|
|
--radius-xs: 4px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
--height-btn: 44px;
|
|
--height-input: 44px;
|
|
--height-nav: 64px;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
|
|
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
|
|
--shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
|
|
--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);
|
|
--shadow-float: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
--glass-bg: rgba(255, 255, 255, 0.72);
|
|
--glass-blur: blur(20px);
|
|
--glass-border: rgba(255, 255, 255, 0.3);
|
|
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', sans-serif;
|
|
overflow-x: hidden;}
|
|
|
|
.page-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
background: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 50%, #FFB347 100%);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 漂浮爱心背景 */
|
|
.floating-hearts {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.heart {
|
|
position: absolute;
|
|
color: rgba(255,255,255,0.3);
|
|
animation: float-up 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float-up {
|
|
0% { transform: translateY(100%) rotate(0deg); opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
|
|
}
|
|
|
|
.h1 { left: 10%; font-size: 24px; animation-delay: 0s; animation-duration: 5s; }
|
|
.h2 { left: 25%; font-size: 18px; animation-delay: 1s; animation-duration: 4s; }
|
|
.h3 { left: 45%; font-size: 28px; animation-delay: 0.5s; animation-duration: 6s; }
|
|
.h4 { left: 65%; font-size: 20px; animation-delay: 2s; animation-duration: 4.5s; }
|
|
.h5 { left: 80%; font-size: 22px; animation-delay: 1.5s; animation-duration: 5.5s; }
|
|
.h6 { left: 15%; font-size: 16px; animation-delay: 3s; animation-duration: 5s; }
|
|
.h7 { left: 70%; font-size: 30px; animation-delay: 2.5s; animation-duration: 6s; }
|
|
|
|
/* 顶部文字 */
|
|
.success-text {
|
|
margin-top: 120px;
|
|
text-align: center;
|
|
color: #fff;
|
|
z-index: 5;
|
|
animation: fadeInDown 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from { opacity: 0; transform: translateY(-30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.big-title {
|
|
font-size: 42px;
|
|
font-weight: 900;
|
|
text-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
|
margin-bottom: 8px;
|
|
animation: bounce-in 0.6s ease-out 0.3s both;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% { transform: scale(0.3); opacity: 0; }
|
|
50% { transform: scale(1.1); }
|
|
70% { transform: scale(0.9); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.sub-text {
|
|
font-size: 16px;
|
|
opacity: 0.95;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sub-text em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 头像区域 */
|
|
.avatars-area {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 50px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
position: relative;
|
|
animation: avatar-pop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
|
|
}
|
|
|
|
.avatar-wrapper.left { animation-delay: 0.4s; }
|
|
.avatar-wrapper.right { animation-delay: 0.6s; }
|
|
|
|
@keyframes avatar-pop {
|
|
from { transform: scale(0); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.match-avatar {
|
|
width: 110px;
|
|
height: 110px;
|
|
border-radius: 50%;
|
|
border: 5px solid #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 52px;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.match-avatar.mine { background: linear-gradient(135deg, #26C2BB, #54CAC5); }
|
|
.match-avatar.theirs { background: linear-gradient(135deg, #FF9A8B, #FF6A88); }
|
|
|
|
.avatar-ring {
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
right: -8px;
|
|
bottom: -8px;
|
|
border: 2px solid rgba(255,255,255,0.4);
|
|
border-radius: 50%;
|
|
animation: ring-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ring-pulse {
|
|
0%, 100% { transform: scale(1); opacity: 0.6; }
|
|
50% { transform: scale(1.1); opacity: 0.3; }
|
|
}
|
|
|
|
.avatar-name {
|
|
position: absolute;
|
|
bottom: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 中间爱心 */
|
|
.heart-center {
|
|
font-size: 48px;
|
|
z-index: 10;
|
|
animation: heart-beat 1s ease-in-out infinite;
|
|
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
|
|
position: relative;
|
|
}
|
|
|
|
.heart-center::before {
|
|
content: '💖';
|
|
position: absolute;
|
|
animation: heart-beat 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heart-beat {
|
|
0%, 100% { transform: scale(1); }
|
|
15% { transform: scale(1.2); }
|
|
30% { transform: scale(1); }
|
|
45% { transform: scale(1.15); }
|
|
60% { transform: scale(1); }
|
|
}
|
|
|
|
/* 匹配信息 */
|
|
.match-info {
|
|
margin-top: 60px;
|
|
background: rgba(255,255,255,0.25);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 16px;
|
|
padding: 16px 24px;
|
|
color: #fff;
|
|
text-align: center;
|
|
z-index: 5;
|
|
animation: fadeInUp 0.8s ease-out 0.8s both;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.match-info-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.match-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.match-tag {
|
|
padding: 4px 12px;
|
|
background: rgba(255,255,255,0.3);
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 底部操作区 */
|
|
.bottom-actions {
|
|
margin-top: auto;
|
|
padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
|
|
width: 100%;
|
|
z-index: 5;
|
|
animation: fadeInUp 0.8s ease-out 1s both;
|
|
}
|
|
|
|
.btn-primary {
|
|
width: 100%;
|
|
padding: 16px;
|
|
background: #fff;
|
|
color: #FF6B9D;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary:active { transform: scale(0.98); }
|
|
|
|
.btn-secondary {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: transparent;
|
|
color: #fff;
|
|
border: 2px solid rgba(255,255,255,0.5);
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-secondary:active {
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
/* 分享提示 */
|
|
.share-tip {
|
|
text-align: center;
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 11px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
/* 关闭按钮 */
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 54px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.25);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
}
|
|
|
|
/* 彩纸效果 */
|
|
.confetti {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
top: -10px;
|
|
animation: confetti-fall 3s linear forwards;
|
|
}
|
|
|
|
@keyframes confetti-fall {
|
|
to {
|
|
top: 100%;
|
|
transform: rotate(720deg);
|
|
}
|
|
}
|
|
|
|
/* SVG 图标统一尺寸 */
|
|
.icon-svg {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
.icon-svg svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
stroke: currentColor;
|
|
}
|
|
/* 侧栏图标 */
|
|
.sidebar-icon .icon-svg { width: 22px; height: 22px; font-size: 22px; }
|
|
/* 社团logo图标 */
|
|
.club-logo .icon-svg { width: 28px; height: 28px; font-size: 28px; color: #fff; }
|
|
/* 头图大图标 */
|
|
.hero-icon .icon-svg { width: 56px; height: 56px; font-size: 56px; opacity: 0.3; }
|
|
/* meta 小图标 */
|
|
.club-meta .icon-svg { width: 12px; height: 12px; font-size: 12px; }
|
|
/* 分类选择网格图标 */
|
|
.cat-option .icon-svg { width: 26px; height: 26px; font-size: 26px; }
|
|
/* logo预览图标 */
|
|
.logo-preview .icon-svg { width: 40px; height: 40px; font-size: 40px; color: #fff; }
|
|
/* 提示图标 */
|
|
.notice-icon .icon-svg { width: 18px; height: 18px; font-size: 18px; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container" data-dom-id="page-container">
|
|
<!-- 漂浮爱心 -->
|
|
<div class="floating-hearts">
|
|
<div class="heart h1">💗</div>
|
|
<div class="heart h2">💕</div>
|
|
<div class="heart h3">💖</div>
|
|
<div class="heart h4">💓</div>
|
|
<div class="heart h5">💞</div>
|
|
<div class="heart h6">💗</div>
|
|
<div class="heart h7">💖</div>
|
|
</div>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<div class="close-btn" onclick="closePage()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</div>
|
|
|
|
<!-- 成功文字 -->
|
|
<div class="success-text">
|
|
<div class="big-title">配对成功！</div>
|
|
<div class="sub-text">你和 <em>小夏同学</em> 互相喜欢</div>
|
|
</div>
|
|
|
|
<!-- 头像区 -->
|
|
<div class="avatars-area">
|
|
<div class="avatar-wrapper left">
|
|
<div class="avatar-ring"></div>
|
|
<div class="match-avatar mine">😎</div>
|
|
<span class="avatar-name">我</span>
|
|
</div>
|
|
<div class="heart-center">💖</div>
|
|
<div class="avatar-wrapper right">
|
|
<div class="avatar-ring"></div>
|
|
<div class="match-avatar theirs"><span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span><span class="icon-svg icon-graduation-cap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></span></div>
|
|
<span class="avatar-name">小夏同学</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 共同兴趣 -->
|
|
<div class="match-info">
|
|
<div class="match-info-title"><span class="icon-svg icon-sparkles"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg></span> 你们有 4 个共同兴趣</div>
|
|
<div class="match-tags">
|
|
<span class="match-tag"><span class="icon-svg icon-camera"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg></span> 摄影</span>
|
|
<span class="match-tag">☕ 咖啡</span>
|
|
<span class="match-tag"><span class="icon-svg icon-clapperboard"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.13 3.98-.83 2.5"/><path d="M3.77 6.04 2.1 11.1a2 2 0 0 0 .52 2.1l8.1 8.1a2 2 0 0 0 2.1.5l5.06-1.67"/><path d="M15.5 4.5 17 9"/><path d="m17.5 4.5 2.5-2.5 1 1-2.5 2.5"/><path d="m15.5 6.5 2.5 2.5"/><path d="m11.5 10.5 2.5 2.5"/><path d="m7.5 14.5 2.5 2.5"/></svg></span> 电影</span>
|
|
<span class="match-tag">🐱 猫咪</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部按钮 -->
|
|
<div class="bottom-actions">
|
|
<button class="btn-primary" onclick="sendMessage()">
|
|
<span class="icon-svg icon-message-circle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg></span> 打个招呼
|
|
</button>
|
|
<button class="btn-secondary" onclick="keepSwiping()">
|
|
继续滑动
|
|
</button>
|
|
<div class="share-tip">截图分享到朋友圈，记录这个心动瞬间 💫</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 生成彩纸
|
|
function createConfetti() {
|
|
const colors = ['#FF6B9D', '#FFD700', '#FF8E53', '#fff', '#FFB6C1'];
|
|
const container = document.querySelector('.page-container');
|
|
|
|
for (let i = 0; i < 30; i++) {
|
|
const confetti = document.createElement('div');
|
|
confetti.className = 'confetti';
|
|
confetti.style.left = Math.random() * 100 + '%';
|
|
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
|
|
confetti.style.animationDelay = Math.random() * 2 + 's';
|
|
confetti.style.animationDuration = (2 + Math.random() * 2) + 's';
|
|
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
|
|
confetti.style.width = (6 + Math.random() * 8) + 'px';
|
|
confetti.style.height = (6 + Math.random() * 8) + 'px';
|
|
container.appendChild(confetti);
|
|
}
|
|
}
|
|
|
|
setTimeout(createConfetti, 500);
|
|
|
|
function closePage() { window.history.back(); }
|
|
function sendMessage() { alert('跳转到聊天页面'); }
|
|
function keepSwiping() { window.history.back(); }
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|