留言板

.embedded-gb-container { width: 100%; max-width: 600px; margin: 20px auto; background: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

.embedded-gb-container h2 { text-align: center; color: #1a1a1a; margin-bottom: 8px; font-weight: 600; }

.embedded-gb-container .subtitle { text-align: center; color: #6c757d; font-size: 14px; margin-bottom: 25px; }

.embedded-gb-container .user-info { padding: 14px 20px; background-color: #e8f5e9; border-radius: 8px; border-left: 4px solid #28a745; margin-bottom: 25px; font-weight: 500; color: #28a745; }

.embedded-gb-container .rating { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 25px; font-size: 32px; user-select: none; }

.embedded-gb-container .rating span { color: #ddd; cursor: pointer; transition: color 0.2s ease; }

.embedded-gb-container .rating span.filled { color: #ffc107; text-shadow: 0 0 4px rgba(255, 193, 7, 0.4); }

.embedded-gb-container .emoji-container { display: flex; justify-content: center; gap: 10px; margin: 20px 0; padding: 15px; background-color: #f1f3f5; border-radius: 10px; flex-wrap: wrap; }

.embedded-gb-container .emoji-btn { background: #ffffff; border: 1px solid #dee2e6; border-radius: 8px; width: 44px; height: 44px; font-size: 20px; cursor: pointer; transition: all 0.2s; }

.embedded-gb-container .emoji-btn:hover { background-color: #e9ecef; transform: translateY(-2px); }

.embedded-gb-container textarea { width: 100%; padding: 16px; border: 2px solid #e9ecef; border-radius: 10px; resize: vertical; height: 120px; font-size: 15px; outline: none; }

.embedded-gb-container textarea:focus { border-color: #007bff; }

.embedded-gb-container .submit-btn { display: block; width: 100%; padding: 14px; background-color: #007bff; color: white; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; margin-top: 10px; }

.embedded-gb-container .submit-btn:hover { background-color: #0056b3; }

.embedded-gb-container .messages { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }

.embedded-gb-container .message-card { background: #fdfdfd; padding: 18px; border-radius: 10px; margin-bottom: 12px; border: 1px solid #eee; }

// 配置：修改这里的用户名 let currentUsername = "游客"; let currentRating = 0; let stars = null;

// 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { initGuestbook(); });

function initGuestbook() { const usernameSpan = document.getElementById('username'); const starRating = document.getElementById('star-rating'); const messageList = document.getElementById('message-list');

// 显示用户名 if (usernameSpan) usernameSpan.textContent = currentUsername;

// 初始化评分 if (starRating) { stars = starRating.querySelectorAll('span[data-value]'); stars.forEach(star => { star.addEventListener('click', function() { currentRating = this.getAttribute('data-value'); stars.forEach(s => { s.classList.toggle('filled', parseInt(s.getAttribute('data-value')) s.classList.remove('filled')); }

// 渲染留言 function renderMessages(messages, container) { if (!container) return; container.innerHTML = '';

messages.forEach(msg => { const card = document.createElement('div'); card.className = 'message-card'; card.innerHTML = `

${msg.content}

`; container.appendChild(card); }); }

// 存储操作 function getMessages() { return JSON.parse(localStorage.getItem('guestbook_messages') || '[]'); }

function saveMessages(messages) { localStorage.setItem('guestbook_messages', JSON.stringify(messages)); }

function loadMessages(container) { renderMessages(getMessages(), container); }