✨ 给你的倒计时起个名字

这将是你的专属倒计时，记录每一个珍贵的时刻

setTitle(e.target.value)} maxLength={20} /> {title.length}/20

快速选择： {["我的毕业季 🎓","暑假倒计时 ☀️","寒假来了 ❄️","考研冲刺 📚"].map((suggestion) => ())}

)} {step === 2 && (

🎨 选择一个主题

不同的主题会给你的倒计时带来不同的氛围

{presetThemes.map((theme) => (

setSelectedTheme(theme.id)} style={{"--theme-color": theme.color} as React.CSSProperties} >

{theme.emoji}

{theme.name}

{selectedTheme === theme.id && ( ✓ )}

))}

)} {step === 3 && (

📅 选择目标日期

设置你期待的那一天，我们会帮你记录每一个倒数时刻

setTargetDate(e.target.value)} min={new Date().toISOString().slice(0,16)} />

{targetDate && ( 距离 {new Date(targetDate).toLocaleDateString("zh-CN",{year: "numeric",month: "long",day: "numeric",weekday: "long",hour: "2-digit",minute: "2-digit",})} 还有 {Math.ceil((new Date(targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))} 天 )}

)} {step === 4 && (

📝 记录此刻的心情

写下你现在的感受，这将是未来美好的回忆

setMood(e.target.value)} maxLength={100} rows={4} /> <span className="char-count">{mood.length}/100</span> </div> <div className="mood-suggestions"> <span>快速选择：</span> {["期待 🎉","舍不得 💕","紧张 😰","开心 😊","平静 😌"].map((m) => (<button key={m} className="mood-chip" onClick={() => setMood(m)} > {m} </button>))} </div> </motion.div>)} </div> {} <div className="guide-navigation"> {step > 1 && (<button className="btn btn-secondary" onClick={handleBack}> ← 上一步 </button>)} <button className="btn btn-primary" onClick={handleNext} disabled={!canProceed()} > {step === 4 ? "完成设置 ✨" : "下一步 →"} </button> </div> </div> </motion.div>)}; export default GuidePage; .sticky-note{background:linear-gradient(135deg,#fff9e6,#fff3d4);border-radius:2px 16px;padding:var(--spacing-md);box-shadow:1px 2px 4px #8b77651a,inset 0 1px #fffc;position:relative;transform:rotate(-1deg);transition:all var(--transition-normal)}.sticky-note:hover{transform:rotate(0) translateY(-2px);box-shadow:2px 4px 8px #8b776526,inset 0 1px #fffc}.sticky-note:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:60px;height:20px;background:#fff6;border:1px solid rgba(255,255,255,.6);border-radius:2px;box-shadow:0 1px 2px #0000000d,inset 0 20px #fff3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.polaroid{background:#fff;padding:var(--spacing-sm);padding-bottom:var(--spacing-xl);border-radius:var(--border-radius-sm);box-shadow:2px 3px 8px #8b776526,0 1px 3px #8b77651a;transform:rotate(2deg);transition:all var(--transition-normal);cursor:pointer;position:relative}.polaroid:hover{transform:rotate(0) scale(1.02);box-shadow:4px 6px 12px #8b776533,0 2px 4px #8b776526}.polaroid-image{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--color-latte) 0%,var(--color-cream) 100%);border-radius:var(--border-radius-xs);display:flex;align-items:center;justify-content:center;font-size:3rem;overflow:hidden}.polaroid-caption{margin-top:var(--spacing-sm);text-align:center;font-family:var(--font-family-handwritten);font-size:.875rem;color:var(--color-text-secondary)}.diary-cover{background:linear-gradient(135deg,#f5e6d3,#ede0d0,#e8d9c5);border-radius:var(--border-radius-lg);box-shadow:0 4px 20px #8b776533,inset 0 1px #ffffff80,inset 0 -1px #0000000d;padding:var(--spacing-xl);position:relative;overflow:hidden}.diary-cover:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:40px;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(139,119,101,.05) 30%,rgba(139,119,101,.1) 50%,rgba(139,119,101,.05) 70%,transparent 100%);pointer-events:none}.countdown-card{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border-radius:var(--border-radius-xl);padding:var(--spacing-xl);box-shadow:0 4px 16px #8b77651a,inset 0 1px #fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5)}.countdown-number{font-size:4rem;font-weight:700;color:var(--color-text-primary);line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.countdown-label{font-size:.875rem;color:var(--color-text-secondary);margin-top:var(--spacing-xs);text-transform:uppercase;letter-spacing:1px}.countdown-unit{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm)}.countdown-separator{font-size:2rem;color:var(--color-text-muted);font-weight:300;align-self:flex-start;margin-top:var(--spacing-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);font-size:.875rem;font-weight:500;transition:all var(--transition-normal);cursor:pointer;border:none;outline:none}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:#fff;box-shadow:0 2px 8px #e8b4a366}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #e8b4a380}.btn-secondary{background:#fffc;color:var(--color-text-primary);border:1px solid rgba(212,165,116,.3)}.btn-secondary:hover{background:#fff;border-color:#d4a57480}.input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid rgba(212,165,116,.3);border-radius:var(--border-radius-md);background:#fffc;color:var(--color-text-primary);font-size:.875rem;transition:all var(--transition-normal)}.input:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px #e8b4a333}.input::placeholder{color:var(--color-text-muted)}@media(max-width:640px){.countdown-number{font-size:2.5rem}.diary-cover{padding:var(--spacing-lg)}.polaroid{transform:rotate(1deg)}}@media(min-width:641px)and (max-width:1024px){.countdown-number{font-size:3rem}}@media(min-width:1025px){.countdown-number{font-size:4rem}}:root{--color-cream: #FFF8F0;--color-warm-white: #FFFCF8;--color-paper: #FEF9F3;--color-latte: #F5EDE4;--color-primary: #E8B4A3;--color-primary-light: #F0C9BC;--color-secondary: #D4A574;--color-accent: #C49A6C;--color-text-primary: #4A4039;--color-text-secondary: #7A6F65;--color-text-muted: #A99E93;--shadow-soft: 2px 3px 8px rgba(139, 119, 101, .15);--shadow-medium: 3px 4px 12px rgba(139, 119, 101, .2);--shadow-hard: 4px 6px 16px rgba(139, 119, 101, .25);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-family-handwritten: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family-primary);background-color:var(--color-paper);color:var(--color-text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(212,165,116,.1) 31px,rgba(212,165,116,.1) 32px);pointer-events:none;z-index:-1}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-latte);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb{background:var(--color-secondary);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}::selection{background:var(--color-primary-light);color:var(--color-text-primary)}:disabled{opacity:.6;cursor:not-allowed}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all var(--transition-normal)}input,textarea{font-family:inherit;outline:none;border:none;background:transparent}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}ul,ol{list-style:none}