Tangledup-ai/check_in
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new

Browse Source
This commit is contained in:
jeremygan2021
2026-03-27 13:27:47 +08:00
parent df261106da
commit 84b243dc52
10 changed files with 464 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
templates/wall.html
View File

@@ -217,6 +217,35 @@
-webkit-text-fill-color: transparent;
}
.card-position {
font-size: 1.2rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.card-vision {
font-size: 1.4rem;
color: #dbe4ff;
font-style: italic;
margin-top: 15px;
}
.card-scope {
font-size: 1.2rem;
color: #dbe4ff;
margin-top: 10px;
}
.card-custom-field {
font-size: 1.2rem;
color: #dbe4ff;
margin-top: 10px;
padding: 8px 15px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
display: inline-block;
}
/* Stats Counter */
.stats-counter {
position: absolute;
@@ -241,6 +270,53 @@
color: #aaa;
}
/* 二维码容器 */
.qrcode-container {
position: fixed;
top: 50%;
right: 40px;
transform: translateY(-50%);
z-index: 25;
animation: fadeInUp 0.6s ease-out;
}
.qrcode-box {
background: rgba(10, 20, 40, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(0, 242, 255, 0.5);
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 255, 0.2);
}
.qrcode-title {
font-size: 1rem;
font-weight: bold;
color: #fff;
text-align: center;
margin-bottom: 12px;
text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}
.qrcode-image {
width: 150px;
height: 150px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(-50%) translateX(20px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
/* Mobile Learn More Button */
.mobile-btn-container {
display: none;
@@ -298,9 +374,6 @@
height: 60px;
font-size: 1.5rem;
}
#card-extra {
font-size: 1rem !important;
}
.stats-counter {
bottom: 10px;
right: 10px;
@@ -309,6 +382,23 @@
.stats-number {
font-size: 1.5rem;
}
.qrcode-container {
position: fixed;
top: auto;
bottom: 80px;
right: 50%;
transform: translateX(50%);
}
.qrcode-box {
padding: 12px;
}
.qrcode-title {
font-size: 0.9rem;
}
.qrcode-image {
width: 100px;
height: 100px;
}
}
</style>
@@ -332,25 +422,24 @@
<div class="spotlight-container">
<div class="spotlight-card" id="card">
<div class="user-info">
{% if show.name != false %}
<div class="user-info" id="card-header">
<div class="user-avatar-large" id="card-avatar">?</div>
<div>
<span id="card-name" style="font-weight: bold; color: white;"></span>
{% if show.position != false %}
<span id="card-position" style="font-size: 0.8em; margin-left: 10px; color: var(--primary-color);"></span>
{% endif %}
</div>
{% endif %}
</div>
{% if show.company_name != false %}
<div class="company-name" id="card-company"></div>
{% endif %}
{% if show.vision_2026 != false or show.business_scope != false %}
<div id="card-extra" style="font-size: 1.4rem; color: #dbe4ff; font-style: italic; margin-top: 20px;"></div>
{% endif %}
<div id="card-fields" style="margin-top: 20px;">
<!-- 动态字段将在这里渲染 -->
</div>
</div>
</div>
<!-- 扫码签到二维码 -->
<div class="qrcode-container" id="qrcode-container" style="display: none;">
<div class="qrcode-box">
<div class="qrcode-title">扫码签到</div>
<img src="/static/qrcode.png" alt="签到二维码" class="qrcode-image" id="wall-qrcode">
</div>
</div>
@@ -378,8 +467,10 @@
const isMobile = () => window.innerWidth <= 768;
const SHOW_VISION = {{ 'true' if show.vision_2026 != false else 'false' }};
const SHOW_SCOPE = {{ 'true' if show.business_scope != false else 'false' }};
// 大屏显示字段配置（从后端获取）
const WALL_SHOW_FIELDS = {{ config.wall_config.show_fields | tojson if config.wall_config and config.wall_config.show_fields else '{}' }};
const CHECKIN_FIELD_CONFIG = {{ config.checkin_field_config | tojson if config.checkin_field_config else '{}' }};
const WALL_CONFIG = {{ config.wall_config | tojson if config.wall_config else '{}' }};
// --- State ---
let allUsers = []; // All fetched users
@@ -400,6 +491,18 @@
if (isGridMode) arrangeGrid();
});
// 控制二维码显示/隐藏
const qrcodeContainer = document.getElementById('qrcode-container');
if (qrcodeContainer) {
// 如果 show_qrcode 为 true 则显示，默认为 false
if (WALL_CONFIG.show_qrcode === true) {
qrcodeContainer.style.display = 'block';
}
}
// 随机图标列表
const RANDOM_ICONS = ['🎯', '⭐', '🌟', '💫', '✨', '🎊', '🎉', '🎈', '🚀', '💎', '🏆', '🎖️', '🌈', '🦄', '🎪', '🎨', '🎭', '🎪', '🎯', '🎲'];
// --- Class: UserBubble ---
class UserBubble {
constructor(user) {
@@ -408,15 +511,23 @@
this.element = document.createElement('div');
this.element.className = 'user-bubble';
// Content
const name = user.name || '嘉宾';
// Dynamic font size based on name length
const showName = WALL_SHOW_FIELDS.name !== false;
let bubbleContent;
let fontSize = '0.9rem';
if (name.length > 3) fontSize = '0.7rem';
if (name.length > 4) fontSize = '0.6rem';
if (showName) {
const name = user.name || '嘉宾';
if (name.length > 3) fontSize = '0.7rem';
if (name.length > 4) fontSize = '0.6rem';
bubbleContent = name;
} else {
const randomIndex = Math.floor(Math.random() * RANDOM_ICONS.length);
bubbleContent = RANDOM_ICONS[randomIndex];
fontSize = '1.5rem';
}
this.element.innerHTML = `
<div class="bubble-avatar" style="font-size: ${fontSize}">${name}</div>
<div class="bubble-avatar" style="font-size: ${fontSize}">${bubbleContent}</div>
`;
// Interaction: Click to show in spotlight
@@ -665,29 +776,58 @@
const card = document.getElementById('card');
card.classList.remove('active');
// Wait for fade out
setTimeout(() => {
if(document.getElementById('card-name')) document.getElementById('card-name').textContent = user.name;
if(document.getElementById('card-position')) document.getElementById('card-position').textContent = user.position || '';
if(document.getElementById('card-company')) document.getElementById('card-company').textContent = user.company_name || '嘉宾';
if(document.getElementById('card-avatar')) document.getElementById('card-avatar').textContent = user.name ? user.name.charAt(0) : '?';
const showName = WALL_SHOW_FIELDS.name !== false;
const cardHeader = document.getElementById('card-header');
const extraDiv = document.getElementById('card-extra');
if (extraDiv) {
if (SHOW_VISION && user.vision_2026) {
extraDiv.textContent = "🎯 " + user.vision_2026;
extraDiv.style.display = 'block';
} else if (SHOW_SCOPE && user.business_scope) {
extraDiv.textContent = user.business_scope;
extraDiv.style.display = 'block';
} else {
extraDiv.style.display = 'none';
}
if (showName) {
cardHeader.style.display = 'flex';
if(document.getElementById('card-name')) document.getElementById('card-name').textContent = user.name || '';
if(document.getElementById('card-avatar')) document.getElementById('card-avatar').textContent = user.name ? user.name.charAt(0) : '?';
} else {
cardHeader.style.display = 'none';
}
renderCardFields(user);
card.classList.add('active');
}, 800);
}
/**
* 根据配置动态渲染卡片字段
*/
function renderCardFields(user) {
const container = document.getElementById('card-fields');
container.innerHTML = '';
let html = '';
Object.keys(WALL_SHOW_FIELDS).forEach(key => {
if (!WALL_SHOW_FIELDS[key]) return;
const fieldConfig = CHECKIN_FIELD_CONFIG[key];
if (!fieldConfig) return;
const fieldValue = user[key] || '';
if (!fieldValue) return;
if (key === 'company_name') {
html += `<div class="company-name">${fieldValue}</div>`;
} else if (key === 'vision_2026') {
html += `<div class="card-vision">🎯 ${fieldValue}</div>`;
} else if (key === 'business_scope') {
html += `<div class="card-scope">${fieldValue}</div>`;
} else if (key === 'position') {
html += `<div class="card-position">${fieldValue}</div>`;
} else {
html += `<div class="card-custom-field">${fieldValue}</div>`;
}
});
container.innerHTML = html;
}
function startSpotlight() {
if (isMobile()) return;
if (spotlightInterval) clearInterval(spotlightInterval);