File: /var/www/html/private/钱沐娴抽签.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钱沐娴抽签游戏</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #333;
}
.container {
max-width: 1100px;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
overflow: hidden;
padding: 30px;
text-align: center;
}
.header {
margin-bottom: 30px;
}
h1 {
color: #6a11cb;
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.subtitle {
font-size: 1.2rem;
color: #666;
margin-bottom: 20px;
}
.date-badge {
display: inline-block;
background: linear-gradient(to right, #ff8a00, #da1b60);
color: white;
padding: 8px 20px;
border-radius: 50px;
font-weight: bold;
margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(218, 27, 96, 0.3);
}
.main-content {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}
.options-section {
flex: 2;
min-width: 300px;
}
.controls-section {
flex: 1;
min-width: 280px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.options-container {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.option-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 3px solid transparent;
text-align: left;
}
.option-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.option-card.active {
border-color: #6a11cb;
animation: pulse 2s infinite;
}
.option-card.winner {
border-color: #ff8a00;
animation: winner-glow 1.5s infinite alternate;
}
.option-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.option-number {
display: inline-block;
width: 35px;
height: 35px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border-radius: 50%;
line-height: 35px;
text-align: center;
font-size: 1.3rem;
font-weight: bold;
}
.option-actions {
display: flex;
gap: 10px;
}
.option-action-btn {
background: none;
border: none;
color: #666;
cursor: pointer;
font-size: 1.1rem;
transition: color 0.3s;
padding: 5px;
}
.option-action-btn:hover {
color: #6a11cb;
}
.option-content {
margin-bottom: 15px;
}
.option-title {
font-size: 1.5rem;
margin-bottom: 10px;
color: #444;
}
.option-desc {
font-size: 1rem;
color: #666;
line-height: 1.5;
}
.option-edit-form {
display: none;
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
}
.form-group {
margin-bottom: 15px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.form-input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-input:focus {
border-color: #6a11cb;
outline: none;
}
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(to right, #6a11cb, #2575fc);
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-success {
background: linear-gradient(to right, #00b09b, #96c93d);
color: white;
}
.btn-danger {
background: linear-gradient(to right, #ff416c, #ff4b2b);
color: white;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(0);
}
.draw-btn {
width: 100%;
padding: 18px;
font-size: 1.4rem;
margin-bottom: 25px;
}
.control-title {
font-size: 1.5rem;
color: #444;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #6a11cb;
}
.add-option-section {
background: white;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.result-container {
margin-top: 40px;
padding: 25px;
background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
display: none;
}
.result-title {
font-size: 1.8rem;
color: #6a11cb;
margin-bottom: 15px;
}
.result-content {
font-size: 1.5rem;
font-weight: bold;
color: #da1b60;
margin-bottom: 10px;
}
.result-countdown {
font-size: 1.1rem;
color: #666;
margin-top: 15px;
}
.footer {
margin-top: 30px;
color: #777;
font-size: 0.9rem;
}
/* 动画效果 */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(106, 17, 203, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(106, 17, 203, 0); }
100% { box-shadow: 0 0 0 0 rgba(106, 17, 203, 0); }
}
@keyframes winner-glow {
0% { box-shadow: 0 0 15px #ff8a00; }
100% { box-shadow: 0 0 30px #ff8a00; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.shaking {
animation: shake 0.5s;
}
.fade-in {
animation: fadeIn 0.8s ease-out;
}
/* 响应式设计 */
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
h1 {
font-size: 2.2rem;
}
.option-title {
font-size: 1.3rem;
}
}
.empty-message {
text-align: center;
padding: 40px;
color: #888;
font-size: 1.2rem;
border: 2px dashed #ddd;
border-radius: 15px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-dice"></i> 钱沐娴的选择助手</h1>
<p class="subtitle">不再纠结！自定义选项，让抽签帮你做决定</p>
<div class="date-badge"> 不再纠结的选择日</div>
</div>
<div class="main-content">
<div class="options-section">
<h2 class="control-title">当前选项</h2>
<div class="options-container" id="optionsContainer">
<!-- 选项将通过JavaScript动态生成 -->
</div>
<div class="add-option-section">
<h3><i class="fas fa-plus-circle"></i> 添加新选项</h3>
<form id="addOptionForm">
<div class="form-group">
<label for="newOptionTitle">选项名称</label>
<input type="text" id="newOptionTitle" class="form-input" placeholder="例如：去图书馆看书" required>
</div>
<div class="form-group">
<label for="newOptionDesc">选项描述 (可选)</label>
<input type="text" id="newOptionDesc" class="form-input" placeholder="描述一下这个选项...">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success">
<i class="fas fa-plus"></i> 添加选项
</button>
<button type="button" id="resetOptionsBtn" class="btn btn-danger">
<i class="fas fa-trash-alt"></i> 重置所有选项
</button>
</div>
</form>
</div>
</div>
<div class="controls-section">
<h2 class="control-title">抽签控制</h2>
<button class="btn btn-primary draw-btn" id="drawButton">
<i class="fas fa-random"></i> 开始抽签
</button>
<div class="info-box">
<h3><i class="fas fa-lightbulb"></i> 使用提示</h3>
<ul style="text-align: left; margin-top: 15px; padding-left: 20px; color: #555;">
<li style="margin-bottom: 8px;">点击选项右上角的图标可以编辑或删除选项</li>
<li style="margin-bottom: 8px;">至少需要2个选项才能开始抽签</li>
<li style="margin-bottom: 8px;">最多可以添加10个选项</li>
<li style="margin-bottom: 8px;">抽签结果会高亮显示8秒</li>
<li>可以随时修改选项内容</li>
</ul>
</div>
<div class="option-count" style="margin-top: 25px; padding: 15px; background: white; border-radius: 10px;">
<h3><i class="fas fa-chart-bar"></i> 选项统计</h3>
<p style="font-size: 1.2rem; margin-top: 10px;">当前选项数: <span id="optionCount">0</span></p>
</div>
</div>
</div>
<div class="result-container" id="resultContainer">
<h2 class="result-title"><i class="fas fa-trophy"></i> 抽签结果</h2>
<div class="result-content" id="resultContent">抽签结果将显示在这里</div>
<p class="result-countdown" id="countdown">结果将在8秒后消失</p>
</div>
<div class="footer">
<p>© 2023 钱沐娴选择助手 | 设计：不再纠结的选择工具</p>
<p>温馨提示：抽签结果仅供参考，最终决定权在你手中！</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const optionsContainer = document.getElementById('optionsContainer');
const drawButton = document.getElementById('drawButton');
const resultContainer = document.getElementById('resultContainer');
const resultContent = document.getElementById('resultContent');
const countdownElement = document.getElementById('countdown');
const addOptionForm = document.getElementById('addOptionForm');
const resetOptionsBtn = document.getElementById('resetOptionsBtn');
const optionCountElement = document.getElementById('optionCount');
// 初始选项数据
let options = [
{
id: 1,
title: "跟妈妈一起去常州",
description: "和妈妈一起前往常州，享受亲子时光，探索新的地方，创造美好回忆。"
},
{
id: 2,
title: "先去同学家，五点同学再送我回家",
description: "先去同学家玩耍，然后下午五点同学会送你回家，享受朋友间的欢乐时光。"
}
];
let isDrawing = false;
let drawInterval;
let activeOption = null;
let drawCount = 0;
const totalDraws = 25; // 闪烁次数
let nextId = 3; // 下一个选项的ID
// 初始化选项显示
renderOptions();
updateOptionCount();
// 渲染选项列表
function renderOptions() {
optionsContainer.innerHTML = '';
if (options.length === 0) {
optionsContainer.innerHTML = `
<div class="empty-message">
<i class="fas fa-inbox" style="font-size: 3rem; margin-bottom: 15px;"></i>
<p>还没有任何选项，请添加至少2个选项开始抽签</p>
</div>
`;
return;
}
options.forEach((option, index) => {
const optionElement = document.createElement('div');
optionElement.className = 'option-card';
optionElement.id = `option-${option.id}`;
optionElement.dataset.id = option.id;
optionElement.innerHTML = `
<div class="option-header">
<div class="option-number">${index + 1}</div>
<div class="option-actions">
<button class="option-action-btn edit-option-btn" data-id="${option.id}">
<i class="fas fa-edit"></i>
</button>
<button class="option-action-btn delete-option-btn" data-id="${option.id}">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div class="option-content">
<h3 class="option-title">${option.title}</h3>
<p class="option-desc">${option.description}</p>
</div>
<div class="option-edit-form" id="edit-form-${option.id}">
<div class="form-group">
<label for="edit-title-${option.id}">选项名称</label>
<input type="text" id="edit-title-${option.id}" class="form-input" value="${option.title}">
</div>
<div class="form-group">
<label for="edit-desc-${option.id}">选项描述</label>
<input type="text" id="edit-desc-${option.id}" class="form-input" value="${option.description}">
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary save-edit-btn" data-id="${option.id}">保存</button>
<button type="button" class="btn btn-secondary cancel-edit-btn" data-id="${option.id}">取消</button>
</div>
</div>
`;
optionsContainer.appendChild(optionElement);
});
// 添加事件监听器
addOptionEventListeners();
}
// 添加选项事件监听器
function addOptionEventListeners() {
// 编辑按钮
document.querySelectorAll('.edit-option-btn').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
const editForm = document.getElementById(`edit-form-${id}`);
editForm.style.display = 'block';
});
});
// 删除按钮
document.querySelectorAll('.delete-option-btn').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
if (options.length <= 2) {
alert('至少需要2个选项才能进行抽签！');
return;
}
if (confirm('确定要删除这个选项吗？')) {
deleteOption(id);
}
});
});
// 保存编辑按钮
document.querySelectorAll('.save-edit-btn').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
const titleInput = document.getElementById(`edit-title-${id}`);
const descInput = document.getElementById(`edit-desc-${id}`);
if (!titleInput.value.trim()) {
alert('选项名称不能为空！');
return;
}
updateOption(id, titleInput.value.trim(), descInput.value.trim());
document.getElementById(`edit-form-${id}`).style.display = 'none';
});
});
// 取消编辑按钮
document.querySelectorAll('.cancel-edit-btn').forEach(btn => {
btn.addEventListener('click', function() {
const id = parseInt(this.dataset.id);
document.getElementById(`edit-form-${id}`).style.display = 'none';
});
});
}
// 更新选项
function updateOption(id, title, description) {
const index = options.findIndex(option => option.id === id);
if (index !== -1) {
options[index].title = title;
options[index].description = description;
renderOptions();
}
}
// 删除选项
function deleteOption(id) {
options = options.filter(option => option.id !== id);
renderOptions();
updateOptionCount();
}
// 添加新选项
addOptionForm.addEventListener('submit', function(e) {
e.preventDefault();
const titleInput = document.getElementById('newOptionTitle');
const descInput = document.getElementById('newOptionDesc');
if (!titleInput.value.trim()) {
alert('选项名称不能为空！');
return;
}
if (options.length >= 10) {
alert('最多只能添加10个选项！');
return;
}
const newOption = {
id: nextId++,
title: titleInput.value.trim(),
description: descInput.value.trim()
};
options.push(newOption);
renderOptions();
updateOptionCount();
// 清空表单
titleInput.value = '';
descInput.value = '';
// 滚动到新添加的选项
const newOptionElement = document.getElementById(`option-${newOption.id}`);
newOptionElement.scrollIntoView({ behavior: 'smooth' });
});
// 重置所有选项
resetOptionsBtn.addEventListener('click', function() {
if (confirm('确定要重置所有选项吗？这将恢复为初始的两个选项。')) {
options = [
{
id: 1,
title: "跟妈妈一起去常州",
description: "和妈妈一起前往常州，享受亲子时光，探索新的地方，创造美好回忆。"
},
{
id: 2,
title: "先去同学家，五点同学再送我回家",
description: "先去同学家玩耍，然后下午五点同学会送你回家，享受朋友间的欢乐时光。"
}
];
nextId = 3;
renderOptions();
updateOptionCount();
}
});
// 更新选项计数
function updateOptionCount() {
optionCountElement.textContent = options.length;
drawButton.disabled = options.length < 2;
}
// 开始抽签
drawButton.addEventListener('click', function() {
if (isDrawing || options.length < 2) return;
isDrawing = true;
drawButton.disabled = true;
drawButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 抽签中...';
// 重置状态
document.querySelectorAll('.option-card').forEach(card => {
card.classList.remove('winner', 'active');
});
resultContainer.style.display = 'none';
drawCount = 0;
// 开始闪烁效果
drawInterval = setInterval(switchActiveOption, 150);
});
// 切换活动选项（闪烁效果）
function switchActiveOption() {
// 移除之前的活动状态
if (activeOption) {
activeOption.classList.remove('active');
}
// 随机选择一个选项
const randomIndex = Math.floor(Math.random() * options.length);
activeOption = document.getElementById(`option-${options[randomIndex].id}`);
// 添加活动状态
activeOption.classList.add('active');
// 添加抖动效果
activeOption.classList.add('shaking');
setTimeout(() => {
activeOption.classList.remove('shaking');
}, 500);
drawCount++;
// 停止闪烁，显示结果
if (drawCount >= totalDraws) {
clearInterval(drawInterval);
// 确定最终结果
const finalIndex = Math.floor(Math.random() * options.length);
const finalOption = document.getElementById(`option-${options[finalIndex].id}`);
// 移除活动状态，添加获胜者状态
activeOption.classList.remove('active');
finalOption.classList.add('winner');
// 显示结果
resultContent.textContent = `恭喜！抽签结果是：${options[finalIndex].title}`;
resultContainer.style.display = 'block';
resultContainer.classList.add('fade-in');
// 更新按钮状态
drawButton.disabled = options.length < 2;
drawButton.innerHTML = '<i class="fas fa-redo"></i> 重新抽签';
isDrawing = false;
// 滚动到结果区域
resultContainer.scrollIntoView({ behavior: 'smooth' });
// 启动倒计时
startCountdown();
}
}
// 结果倒计时
function startCountdown() {
let countdown = 8;
const countdownInterval = setInterval(() => {
countdownElement.textContent = `结果将在${countdown}秒后消失`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
resultContainer.style.display = 'none';
document.querySelectorAll('.option-card').forEach(card => {
card.classList.remove('winner');
});
}
}, 1000);
}
// 初始动画
setTimeout(() => {
document.querySelectorAll('.option-card').forEach((card, index) => {
setTimeout(() => {
card.classList.add('fade-in');
}, index * 200);
});
}, 500);
});
</script>
</body>
</html>