<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>茗辰原 的 温柔提醒生成器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}body {
background-color: #f0f2f5;
padding: 20px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}.container {
max-width: 500px;
width: 100%;
}.step {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}.step h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}.form-group {
margin-bottom: 15px;
}label {
display: block;
margin-bottom: 8px;
color: #666;
}input, select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}button {
padding: 10px 20px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}button:hover {
background-color: #66b1ff;
}.color-options, .size-options, .music-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 15px;
}.color-option, .size-option, .music-option {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
cursor: pointer;
}.color-option.selected, .size-option.selected, .music-option.selected {
border-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}.message-bubbles {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
border-radius: 0;
padding: 20px;
overflow: hidden;
z-index: 999;
}.bubble {
position: absolute;
border-radius: 15px;
padding: 8px 12px;
max-width: 140px;
word-break: break-all;
animation: bubbleCycle 7s ease-in-out infinite;
opacity: 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}@keyframes bubbleCycle {
0% { opacity: 0; transform: scale(0.5) translate(0, 0); }
15% { opacity: 1; transform: scale(1) translate(0, 0); }
35% { transform: translate(5px, -3px); }
55% { transform: translate(-4px, 5px); }
75% { transform: translate(3px, -2px); }
85% { opacity: 1; transform: scale(1) translate(0, 0); }
100% { opacity: 0; transform: scale(0.5) translate(0, 0); }
}.btn-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}.hidden {
display: none;
}.mt-10 {
margin-top: 10px;
} </style></head><body> <div class="container"> <div id="step1" class="step"><h2>温柔提醒</h2>
<div class="form-group"><label>你想给哪个朋友？</label>
<input type="text" id="friendName" placeholder="输入朋友昵称"> </div><button onclick="goToStep2()">下一步</button>
</div> <div id="step2" class="step hidden"><h2>选择方框颜色</h2>
<div class="color-options" id="colorOptions"><div class="color-option selected" data-color="random">随机彩色</div>
<div class="color-option" data-color="pink">温柔粉</div>
<div class="color-option" data-color="blue">天空蓝</div>
<div class="color-option" data-color="yellow">阳光黄</div>
<div class="color-option" data-color="green">清新绿</div>
<div class="color-option" data-color="purple">梦幻紫</div>
</div> <div class="btn-group"><button onclick="goToStep1()">上一步</button>
<button onclick="goToStep3()">下一步</button>
</div> </div> <div id="step3" class="step hidden"><h2>选择方框大小</h2>
<div class="size-options" id="sizeOptions"><div class="size-option" data-size="small">小巧</div>
<div class="size-option selected" data-size="medium">适中</div>
<div class="size-option" data-size="large">大气</div>
</div> <div class="btn-group"><button onclick="goToStep2()">上一步</button>
<button onclick="goToStep4()">下一步</button>
</div> </div> <div id="step4" class="step hidden"><h2>选择背景音乐</h2>
<div class="music-options" id="musicOptions"><div class="music-option selected" data-music="random">随机选择</div>
<div class="music-option" data-music="song1">好想爱这个世界啊 - 华晨宇</div>
<div class="music-option" data-music="song2">I Miss You So - Laufey</div>
<div class="music-option" data-music="https://s1.aigei.com/src/aud/mp3/fe/fe5fc3bfae5d434da89dfb9b3e89e357.mp3?e=1762674780&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:cT9MNNHcuF6ZNA6AOhJzZg-x4sw=">路过人间 - 郁可唯</div>
<div class="music-option" data-music="song4">恋人 - 李荣浩</div>
<div class="music-option" data-music="song5">说好不哭 - 周杰伦</div>
</div> <div class="btn-group"><button onclick="goToStep3()">上一步</button>
<button onclick="goToStep5()">下一步</button>
</div> </div> <div id="step5" class="step hidden"><h2>选择内容</h2>
<button onclick="useDefaultContent()">使用自带内容</button>
<button onclick="useCustomContent()">自己写内容</button>
<button onclick="goToStep4()" class="mt-10">上一步</button>
</div> <div id="step6" class="step hidden"><h2>写下你想说的话</h2>
<textarea id="customContent" rows="5" placeholder="每行一句，至少写15句"></textarea>
<div class="btn-group"><button onclick="goToStep5()">上一步</button>
<button onclick="generateBubbles()">下一步</button>
</div> </div> <div id="result" class="message-bubbles hidden"><button onclick="goToStep1()" style="position: absolute; top: 10px; right: 10px; z-index: 100;">重新开始</button>
</div> </div><script>
let currentStep = 1;
let friendName = '';
let color = 'random';
let size = 'medium';
let music = 'random';
let content = [];
let bubbleInterval;
const allColors = [
'#ff9aa2', '#ffb7b2', '#ffddd2', '#e2f0cb', '#b5ead7',
'#c7ceea', '#b5d8eb', '#ffeaa7', '#dda0dd', '#98d8c8',
'#f7dc6f', '#bb8fce', '#85c1e9', '#f8c471', '#82e0aa',
'#ffc3a0', '#dab894', '#f0e68c', '#e6e6fa', '#ffb6c1',
'#add8e6', '#f0fff0', '#fff8dc', '#faf0e6', '#f5f5dc',
'#ffecd2', '#fcb69f', '#cbd5e1', '#94a3b8', '#7dd3fc',
'#a5d6a7', '#ce93d8', '#ffab91', '#80deea', '#b39ddb'
];
function goToStep1() {
if (bubbleInterval) clearInterval(bubbleInterval);
hideAllSteps();
document.getElementById('step1').classList.remove('hidden');
currentStep = 1;
}function goToStep2() {
friendName = document.getElementById('friendName').value;
if (!friendName) {
alert('请输入朋友昵称');
return;
}hideAllSteps();
document.getElementById('step2').classList.remove('hidden');
currentStep = 2;
}function goToStep3() {
hideAllSteps();
document.getElementById('step3').classList.remove('hidden');
currentStep = 3;
}function goToStep4() {
hideAllSteps();
document.getElementById('step4').classList.remove('hidden');
currentStep = 4;
}function goToStep5() {
hideAllSteps();
document.getElementById('step5').classList.remove('hidden');
currentStep = 5;
}function goToStep6() {
hideAllSteps();
document.getElementById('step6').classList.remove('hidden');
currentStep = 6;
}function hideAllSteps() {
document.querySelectorAll('.step, #result').forEach(el => el.classList.add('hidden'));
}document.querySelectorAll('.color-option, .size-option, .music-option').forEach(option => {
option.addEventListener('click', function() {
const parent = this.parentElement;
parent.querySelectorAll('div').forEach(el => el.classList.remove('selected'));
this.classList.add('selected');
const type = parent.id.replace('Options', '');
window[type] = this.getAttribute(`data-${type}`);
});
});
function useDefaultContent() {
const defaultMessages = [
"记得好好吃饭", "早点休息", "多喝热水", "别熬夜了", "注意身体",
"天冷了多穿点衣服", "累了就休息一下吧", "不开心可以找我聊", "你已经很棒了", "慢慢来没关系",
"有我陪着你", "我一直都在你身边", "出门记得带伞", "你不是一个人", "我想你了",
"要保重身体", "别想太多", "开心最重要", "心情不好就说出来吧", "别太勉强自己",
"做自己就好", "谢谢你的存在", "有你真好", "今天也辛苦了，给自己一点时间", "你很重要",
"听听喜欢的音乐吧", "出去走走吧", "吃点好吃的犒劳自己", "睡睡大心情会好一点", "我相信你可以",
"别忘了笑一笑", "做点让自己开心的事", "给自己放个假吧", "可以依靠别人的", "求助不是软弱",
"不需要完美", "接纳真实的自己", "你的节奏很好", "别和别人比", "你有自己的时区",
"每一步都算数", "休息不是浪费时间", "把自己放在第一位", "要照顾好自己", "学会说不",
"守护自己的边界", "你的需求很重要", "困难会过去的", "允许自己犯错", "别委屈自己",
"对自己好一点", "重新开始也可以", "给自己多点耐心", "失败了也没关系", "一切都会好起来的",
"已经做得很好了", "你比想象中强"
];
content = defaultMessages.map(msg => `${friendName}，${msg}`);
generateBubbles();
}function useCustomContent() {
goToStep6();
}function generateBubbles() {
if (currentStep === 6) {
const customText = document.getElementById('customContent').value;
content = customText.split('\n').filter(line => line.trim()).map(line => `${friendName}，${line.trim()}`);
if (content.length < 15) {
alert('请至少输入15句内容');
return;
} }const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
const button = document.createElement('button');
button.onclick = goToStep1;
button.style.position = 'absolute';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '100';
button.textContent = '重新开始';
resultDiv.appendChild(button);
const sizeMap = { small: '12px', medium: '14px', large: '16px' };
const fontSize = sizeMap[size];
function createRandomBubble() {
const randomContentIndex = Math.floor(Math.random() * content.length);
const msg = content[randomContentIndex];
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.textContent = msg;
const randomColor = allColors[Math.floor(Math.random() * allColors.length)];
bubble.style.backgroundColor = randomColor;
bubble.style.fontSize = fontSize;
bubble.style.left = `${Math.random() * 92 + 1}%`;
bubble.style.top = `${Math.random() * 92 + 1}%`;
bubble.style.zIndex = Math.floor(Math.random() * 200);
bubble.style.animationDelay = `${Math.random() * 6}s`;
resultDiv.appendChild(bubble);
setTimeout(() => {
bubble.remove();
}, 7000);
}if (bubbleInterval) clearInterval(bubbleInterval);
for (let i = 0; i < 65; i++) createRandomBubble();
bubbleInterval = setInterval(createRandomBubble, 120);
hideAllSteps();
resultDiv.classList.remove('hidden');
} </script></body></html>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。