<!DOCTYPE html>

<head>

<title>Dating with me～</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

}

body {

min-height: 100vh;

background: linear-gradient(135deg, #fce8ef, #f5f0f8);

display: flex;

align-items: center;

justify-content: center;

padding: 20px;

position: relative;

overflow-x: hidden;

}

/* 散落装饰小花 */

.flower {

position: absolute;

color: #ff66b2;

font-size: 22px;

animation: float 4s ease-in-out infinite;

z-index: 0;

}

@keyframes float {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-10px); }

}

/* 主卡片容器 */

.main-card {

width: min(85vw, 720px);

background: #fff;

border: 4px solid #000;

border-radius: 32px;

padding: 40px 30px;

box-shadow: 8px 8px 0 #000;

position: relative;

z-index: 1;

}

/* 页面切换控制 */

.page {

display: none;

animation: fadeUp 0.5s ease;

}

.page.active {

display: block;

}

@keyframes fadeUp {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

/* 头像样式 */

.avatar-box {

width: 140px;

height: 140px;

margin: 0 auto 24px;

border-radius: 24px;

border: 4px solid #ff66b2;

padding: 6px;

background: #fff;

overflow: hidden;

}

.avatar-box img {

width: 100%;

height: 100%;

border-radius: 18px;

object-fit: cover;

}

h1 {

font-size: 42px;

font-weight: 900;

text-align: center;

line-height: 1.2;

margin-bottom: 12px;

}

/* 标题两侧大花样式 */

.title-flower{

font-size:52px;

color:#ff77bb;

vertical-align:middle;

margin:0 8px;

}

.tip-text {

text-align: center;

color: #555;

font-size: 16px;

margin-bottom: 36px;

}

/* 按钮组通用样式 */

.btn-group {

display: flex;

gap: 24px;

justify-content: center;

flex-wrap: wrap;

position: relative;

min-height: 80px;

}

.btn {

padding: 14px 48px;

border-radius: 50px;

border: 3px solid #000;

font-size: 20px;

font-weight: bold;

cursor: pointer;

box-shadow: 4px 4px 0 #000;

transition: all 0.2s ease;

}

.btn:active {

transform: translate(2px, 2px);

box-shadow: 2px 2px 0 #000;

}

.btn-primary {

background: #ff33aa;

color: #fff;

}

.btn-secondary {

background: #fff;

color: #000;

position: relative;

user-select: none;

}

/* 表单输入框/下拉框 */

.input-item {

width: 100%;

margin: 18px 0;

}

.input-item label {

display: block;

margin-bottom: 8px;

font-size: 18px;

}

.input-item input,

.input-item select {

width: 100%;

padding: 16px 20px;

border: 3px solid #000;

border-radius: 18px;

font-size: 18px;

box-shadow: 4px 4px 0 #000;

background: #fff;

}

/* 美食九宫格 */

.food-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 16px;

margin-top: 30px;

}

.food-item {

border: 3px solid #000;

border-radius: 18px;

padding: 20px 10px;

text-align: center;

box-shadow: 4px 4px 0 #000;

cursor: pointer;

transition: 0.2s;

background: #fff;

}

.food-item:hover {

transform: scale(1.05);

background: #ffe8f4;

}

.food-item .emoji {

font-size: 32px;

margin-bottom: 8px;

}

/* 结果信息卡片 */

.info-box {

border: 3px solid #000;

border-radius: 20px;

padding: 24px;

margin: 24px 0;

box-shadow: 6px 6px 0 #000;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 16px;

}

.info-cell {

padding: 12px;

border: 2px solid #000;

border-radius: 14px;

background: #fff;

}

.info-cell small {

color: #ff33aa;

font-weight: bold;

}

.heart-row {

display: flex;

justify-content: center;

gap: 10px;

margin-top: 20px;

color: #ff33aa;

font-size: 22px;

}

</style>

</head>

<body>

</div>

<h1><span class="title-flower">🌼</span>可以和我一起约会嘛？！<span class="title-flower">🌼</span></h1>

<p class="tip-text">系统检测到：对方已经紧张到开始写网页了。</p>

</div>

<h1>等下，你真的点了愿意？？😭</h1>

<p class="tip-text">我都已经准备好被你点“不要”了。</p>

</div>

<h1>所以...你什么时候有空？😊</h1>

</div>

</select>

</div>

</div>

<h1>我们吃点什么？🍽️✨</h1>

<p class="tip-text">挑一个今天的约会氛围。</p>

</div>

</div>

<h1>真开心你没有拒绝～我会准时来接你！</h1>

<p class="tip-text" id="result-desc">我们去吃好吃的，带好胃口，我带好路线。</p>

</div>

</div>

// 全局存储选中信息

let selectDate = '';

let selectTime = '';

let selectFood = '';

const page1 = document.querySelector('.page1');

const page2 = document.querySelector('.page2');

const page3 = document.querySelector('.page3');

const page4 = document.querySelector('.page4');

const page5 = document.querySelector('.page5');

const btnYes = document.getElementById('btn-yes');

const btnNo = document.getElementById('btn-no');

const btnNextTime = document.getElementById('btn-next-time');

const btnConfirmTime = document.getElementById('btn-confirm-time');

const dateSelect = document.getElementById('date-select');

const timeSelect = document.getElementById('time-select');

const foodItems = document.querySelectorAll('.food-item');

// 拒绝按钮4阶段循环文案

const noButtonTexts = [

"不要 💡",

"再想想 🤔",

"点不到吧 🫵",

"不要碰 😤"

];

let noButtonStage = 0;

let hoverCount = 0;

// 切换页面工具函数

function switchPage(nowPage, targetPage) {

nowPage.classList.remove('active');

targetPage.classList.add('active');

}

// 阻止拒绝按钮点击

btnNo.addEventListener('click', e => {

e.preventDefault();

e.stopPropagation();

return false;

});

// 拒绝按钮鼠标悬浮躲避 + 阶段切换

btnNo.addEventListener('mouseenter', () => {

hoverCount++;

noButtonStage = (noButtonStage + 1) % noButtonTexts.length;

btnNo.innerText = noButtonTexts[noButtonStage];

const distanceFactor = Math.min(hoverCount, 6);

const maxX = window.innerWidth - btnNo.offsetWidth - 100;

const maxY = window.innerHeight - btnNo.offsetHeight - 100;

const randomX = (Math.random() - 0.5) * maxX * distanceFactor * 0.45;

const randomY = (Math.random() - 0.5) * maxY * distanceFactor * 0.45;

btnNo.style.transform = `translate(${randomX}px, ${randomY}px)`;

btnNo.style.transition = 'transform 0.35s ease-out';

// 抖动效果

btnNo.animate(

[

{ transform: `translate(${randomX}px, ${randomY}px) rotate(0deg)` },

{ transform: `translate(${randomX}px, ${randomY}px) rotate(-3deg)` },

{ transform: `translate(${randomX}px, ${randomY}px) rotate(3deg)` },

{ transform: `translate(${randomX}px, ${randomY}px) rotate(0deg)` }

{

duration: 300,

easing: 'ease-in-out'

}

);

});

// 鼠标离开后按钮复位

btnNo.addEventListener('mouseleave', () => {

setTimeout(() => {

btnNo.style.transform = 'translate(0, 0)';

btnNo.style.transition = 'transform 0.4s ease';

}, 600);

});

// 愿意按钮跳转反差页

btnYes.addEventListener('click', () => {

switchPage(page1, page5);

});

// 反差页进入选时间页

btnNextTime.addEventListener('click', () => {

switchPage(page5, page4);

});

// 确认时间进入选美食页（校验下拉时间）

btnConfirmTime.addEventListener('click', () => {

selectDate = dateSelect.value;

selectTime = timeSelect.value;

if (!selectDate || !selectTime) {

alert('记得选好日期和时间哦🥰');

return;

}

switchPage(page4, page3);

});

// 选中美食进入结果页并回填数据

foodItems.forEach(item => {

item.addEventListener('click', () => {

selectFood = item.dataset.food;

document.getElementById('res-date').innerText = selectDate;

document.getElementById('res-time').innerText = selectTime;

document.getElementById('res-food').innerText = selectFood;

switchPage(page3, page2);

});

</script>

</body>

</html>