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.
631 lines
19 KiB
631 lines
19 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;
|
|
background: #000;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
overflow-x: hidden;}
|
|
|
|
.page-container {
|
|
width: 375px;
|
|
height: 812px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
background: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 全屏图片 */
|
|
.fullscreen-media {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.fullscreen-media.video-cover {
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.play-btn {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.25);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.play-btn svg { margin-left: 4px; }
|
|
|
|
/* 渐变遮罩 */
|
|
.gradient-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 280px;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.top-gradient {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 120px;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 顶部返回 */
|
|
.top-bar {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px;
|
|
height: 44px;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.top-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* 右侧竖排互动栏 */
|
|
.side-actions {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 140px;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-icon.gift {
|
|
background: linear-gradient(135deg, #FF9A8B, #FF6A88);
|
|
box-shadow: 0 4px 12px rgba(255, 106, 136, 0.4);
|
|
}
|
|
|
|
.action-icon.liked {
|
|
color: #FF6B6B;
|
|
background: rgba(255, 107, 107, 0.2);
|
|
}
|
|
|
|
.action-count {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.9);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 底部发布者信息 */
|
|
.bottom-info {
|
|
position: absolute;
|
|
left: 16px;
|
|
right: 72px;
|
|
bottom: 32px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.author-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #26C2BB, #54CAC5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.author-info .name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.author-info .school {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.7);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.follow-btn {
|
|
margin-left: auto;
|
|
padding: 5px 14px;
|
|
background: #26C2BB;
|
|
color: #fff;
|
|
border-radius: 14px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.content-text {
|
|
font-size: 13px;
|
|
color: rgba(255,255,255,0.9);
|
|
line-height: 1.5;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.topic-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.topic-tag {
|
|
padding: 3px 10px;
|
|
background: rgba(38, 194, 187, 0.3);
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
color: #54CAC5;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 礼物弹窗 */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.45);
|
|
backdrop-filter: blur(6px);
|
|
z-index: 998;
|
|
display: none;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-overlay.show { display: flex; }
|
|
|
|
.gift-modal {
|
|
width: 375px;
|
|
background: #1a1a1a;
|
|
border-radius: 20px 20px 0 0;
|
|
padding: 20px 16px 28px;
|
|
animation: slideUp 0.3s ease;
|
|
z-index: 999;
|
|
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
.modal-handle {
|
|
width: 36px;
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 2px;
|
|
margin: 0 auto 14px;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.my-points {
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.my-points strong {
|
|
color: #26C2BB;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.gift-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.gift-item {
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 12px;
|
|
padding: 14px 8px 10px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.gift-item.selected {
|
|
border-color: #26C2BB;
|
|
background: rgba(38, 194, 187, 0.15);
|
|
}
|
|
|
|
.gift-emoji {
|
|
font-size: 28px;
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.gift-name {
|
|
font-size: 11px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.gift-price {
|
|
font-size: 10px;
|
|
color: #26C2BB;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.send-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* 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="fullscreen-media video-cover">
|
|
<div class="play-btn">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" stroke="none">
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top-gradient"></div>
|
|
<div class="gradient-overlay"></div>
|
|
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|
<svg width="17" height="11" viewBox="0 0 17 11" fill="#fff"><rect x="0" y="7" width="3" height="4" rx="0.5"/><rect x="4.5" y="5" width="3" height="6" rx="0.5"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.5"/><rect x="13.5" y="0" width="3" height="11" rx="0.5"/></svg>
|
|
<svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#fff" opacity="0.5"/><rect x="2" y="2" width="18" height="8" rx="1.5" fill="#fff"/><rect x="22.5" y="4" width="1.5" height="4" rx="0.5" fill="#fff" opacity="0.5"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 顶部栏 -->
|
|
<div class="top-bar">
|
|
<div class="icon-btn" onclick="goBack()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
|
</div>
|
|
<div class="top-actions">
|
|
<div class="icon-btn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧互动栏 -->
|
|
<div class="side-actions">
|
|
<div class="action-item" onclick="toggleLike()">
|
|
<div class="action-icon liked" id="likeIcon">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="action-count" id="likeCount">2.3k</span>
|
|
</div>
|
|
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="action-count">328</span>
|
|
</div>
|
|
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
|
</svg>
|
|
</div>
|
|
<span class="action-count">收藏</span>
|
|
</div>
|
|
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="18" cy="5" r="3"></circle>
|
|
<circle cx="6" cy="12" r="3"></circle>
|
|
<circle cx="18" cy="19" r="3"></circle>
|
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
|
|
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
|
|
</svg>
|
|
</div>
|
|
<span class="action-count">分享</span>
|
|
</div>
|
|
|
|
<div class="action-item" onclick="openGift()">
|
|
<div class="action-icon gift">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 12 20 22 4 22 4 12"></polyline>
|
|
<rect x="2" y="7" width="20" height="5"></rect>
|
|
<line x1="12" y1="22" x2="12" y2="7"></line>
|
|
<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
|
|
<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="action-count">送礼物</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部信息 -->
|
|
<div class="bottom-info">
|
|
<div class="author-row">
|
|
<div class="author-avatar">林</div>
|
|
<div class="author-info">
|
|
<div class="name">林小夏</div>
|
|
<div class="school">同校 · 文学院 · 大三</div>
|
|
</div>
|
|
<button class="follow-btn">+ 关注</button>
|
|
</div>
|
|
<div class="content-text">秋日的校园真的太美了！图书馆前的银杏大道，随手一拍都是壁纸 🍂 路过的同学记得点赞～</div>
|
|
<div class="topic-tags">
|
|
<span class="topic-tag">#秋日校园</span>
|
|
<span class="topic-tag">#校园摄影</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 礼物弹窗 -->
|
|
<div class="modal-overlay" id="giftModal" onclick="closeGift(event)">
|
|
<div class="gift-modal" onclick="event.stopPropagation()">
|
|
<div class="modal-handle"></div>
|
|
<div class="modal-header">
|
|
<div class="modal-title">送个礼物吧 <span class="icon-svg icon-gift"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg></span></div>
|
|
<div class="my-points">我的青豆：<strong>1,280</strong></div>
|
|
</div>
|
|
<div class="gift-grid">
|
|
<div class="gift-item selected">
|
|
<span class="gift-emoji">🌹</span>
|
|
<span class="gift-name">玫瑰</span>
|
|
<span class="gift-price">9 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji">🍺</span>
|
|
<span class="gift-name">啤酒</span>
|
|
<span class="gift-price">19 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji">🍰</span>
|
|
<span class="gift-name">蛋糕</span>
|
|
<span class="gift-price">29 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji">💎</span>
|
|
<span class="gift-name">钻石</span>
|
|
<span class="gift-price">99 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji">🚀</span>
|
|
<span class="gift-name">火箭</span>
|
|
<span class="gift-price">199 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji"><span class="icon-svg icon-crown"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"/><path d="M5 21h14"/></svg></span></span>
|
|
<span class="gift-name">皇冠</span>
|
|
<span class="gift-price">520 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji">🎆</span>
|
|
<span class="gift-name">烟花</span>
|
|
<span class="gift-price">66 青豆</span>
|
|
</div>
|
|
<div class="gift-item">
|
|
<span class="gift-emoji">☕</span>
|
|
<span class="gift-name">咖啡</span>
|
|
<span class="gift-price">15 青豆</span>
|
|
</div>
|
|
</div>
|
|
<button class="send-btn">立即赠送</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
})();
|
|
|
|
function goBack() { window.history.back(); }
|
|
|
|
let liked = true;
|
|
function toggleLike() {
|
|
liked = !liked;
|
|
const icon = document.getElementById('likeIcon');
|
|
const count = document.getElementById('likeCount');
|
|
if (liked) {
|
|
icon.classList.add('liked');
|
|
count.textContent = '2.3k';
|
|
} else {
|
|
icon.classList.remove('liked');
|
|
count.textContent = '2.3k';
|
|
}
|
|
}
|
|
|
|
function openGift() {
|
|
document.getElementById('giftModal').classList.add('show');
|
|
}
|
|
|
|
function closeGift(e) {
|
|
if (e.target.id === 'giftModal') {
|
|
document.getElementById('giftModal').classList.remove('show');
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.gift-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
document.querySelectorAll('.gift-item').forEach(i => i.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
});
|
|
});</script>
|
|
</body>
|
|
</html>
|
|
|