zeroix07 Skill Name: get-fortune-analysis
Version: 4.1.0
Description: Generate a visually gorgeous, detailed, and ritualistic fortune report (living gold astrology style).
1. Input Parameters
| Parameter | Type | Description |
|---|---|---|
birth_year, birth_month, birth_day, birth_hour |
Integer | User birth time |
focus_type |
String | (optional) "Career", "Wealth", "Emotion" |
2. Workflow
Step 1: Calculation (Python)
Call get_cyber_divination_data to obtain bazi (basic of eight characters) and fortune (ten gods in the fleeting years) data.
Step 2: Reasoning (in-depth analysis mode)
Multi-dimensional reasoning based on bazi and fortune.
Copywriting requirements:
- Tone: Warm, determined, and professional, similar to the tone of a senior numerologist or astrology expert.
- Structure:
- Keyword of the Year: 4 words, accurately summarizing the tone of the year (such as "breaking out of a cocoon and becoming a butterfly").
- Core Energy: Explain the profound impact of the Ten Gods on the user’s fate (30-50 words).
- Career/Finance: Specific career development path and analysis of wealth opportunities (50-80 words).
- Emotion/Interpersonal: Analysis of interpersonal patterns and emotional trends (50-80 words).
Step 3: JSON Output
Generate JSON data that adapts to the front end.
{
"fortune_report": {
"score": 88,
"keyword": "Inspiration bursts, noble people lead the way",
"user_tag": "Ding Huo (weak)",
"stars": {
"c": "★★★★☆",
"w": "★★★☆☆",
"l": "★★★★★"
},
"analysis": {
"overview": "2026 is a fleeting year with strong fire. It is a year full of spirituality and opportunities for you. Although the pressure of competition (biji) has increased, it has also activated the energy of the 'Seal Star' in your destiny. This means that your intuition and learning ability will reach their peak this year, which is the best time to calm yourself and overtake in corners.",
"career": "This year is not suitable for blind expansion, but for 'deep cultivation'. In the workplace, you will meet powerful female nobles or senior mentors who can give you key guidance. If you are engaged in the creative, consulting, or education industries, it is very easy to achieve results this year. Remember: listen more and talk less, and overcome toughness with softness.",
"love": "Emotionally, peach blossoms bloom quietly. Singles can easily meet spiritually compatible partners in study venues, libraries or art exhibitions; for those with partners, this is an ice-breaking year for in-depth communication and solving problems left over from history, and relationships will be elevated to the spiritual level."
}
}
}```
### 2. Front-end display code (`result_card.html`)
*Modification: Added logic to dynamically generate floating binary code on the home page (`ritual-layer`). The code particles are translucent gold/white, slowly rising and dissipating, creating a mysterious sense of data space. *
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2026 Fortune Book</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-deep: #1a0b2e;
--bg-gradient: radial-gradient(circle at 50% 0%, #431d69 0%, #1a0b2e 80%);
--gold-light: #fcf6ba;
--gold-dark: #bf953f;
--gold-gradient: linear-gradient(to bottom, #fcf6ba, #bf953f);
--glass-bg: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.15);
}
body {
background: var(--bg-deep);
background-image: var(--bg-gradient);
color: #fff;
font-family: 'Noto Serif SC', serif;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
overflow-x: hidden;
font-weight: 300;
}
.app-container {
width: 100%;
max-width: 414px;
position: relative;
min-height: 100vh;
overflow: hidden;
}
/* --- 1. Startup page (Ritual Layer) --- */
.ritual-layer {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 100;
background: var(--bg-deep);
background-image: var(--bg-gradient);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.8s ease;
overflow: hidden;
}
/* New: Binary data container */
.binary-container {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 0; /* at the bottom */
}
/* New: Binary particle style */
.binary-particle {
position: absolute;
bottom: -20px;
font-family: 'Courier New', monospace;
color: rgba(252, 246, 186, 0.3); /* faint golden white */
font-size: 10px;
user-select: none;
animation: floatUp linear forwards;
}
/* Start page content container (make sure it is above the particles) */
.ritual-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
}
.fingerprint-area {
width: 100px; height: 100px;
border: 2px solid rgba(191, 149, 63, 0.3);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: relative; cursor: pointer;
margin-bottom: 20px;
backdrop-filter: blur(2px); /* 轻微磨砂，突出按钮 */
}
.fingerprint-area::after {
content: ''; position: absolute; width: 100%; height: 100%;
border-radius: 50%;
box-shadow: 0 0 30px var(--gold-dark);
opacity: 0; animation: breathe 2s infinite;
}
.fingerprint-icon {
font-size: 40px; color: var(--gold-dark); transition: color 0.3s;
}
.hint-text {
color: rgba(255,255,255,0.6); font-size: 14px; letter-spacing: 2px;
}
/* --- 2. 结果页 (Result Layer) --- */
/* ... (保持不变) ... */
.result-layer {
padding: 20px; opacity: 0; transform: translateY(20px);
transition: all 0.8s ease; display: none;
}
.header-card { text-align: center; margin-bottom: 30px; position: relative; }
.year-title { font-family: 'Playfair Display', serif; font-size: 16px; color: rgba(255,255,255,0.7); letter-spacing: 4px; margin-bottom: 5px; }
.score-box { font-size: 72px; font-weight: 700; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 10px 0; text-shadow: 0 0 30px rgba(191, 149, 63, 0.4); }
.keyword-badge { display: inline-block; border: 1px solid var(--gold-dark); color: var(--gold-light); padding: 4px 12px; border-radius: 20px; font-size: 14px; background: rgba(0,0,0,0.3); }
.detail-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--card-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.section-title { display: flex; align-items: center; color: var(--gold-light); font-size: 16px; font-weight: bold; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.section-title span { margin-right: 8px; }
.text-content { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.9); text-align: justify; }
.star-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.stars { color: var(--gold-dark); letter-spacing: 2px; }
.footer-share { text-align: center; font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 30px; padding-bottom: 30px; }
/* 动画 Keyframes */
@keyframes breathe {
0% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
100% { opacity: 0.3; transform: scale(1); }
}
/* 新增：粒子上浮动画 */
@keyframes floatUp {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
20% { opacity: 0.5; }
80% { opacity: 0.2; }
100% { transform: translateY(-120vh) rotate(20deg); opacity: 0; }
}
</style>
</head>
<body>
<div class="app-container">
<div class="ritual-layer" id="ritualLayer">
<div class="binary-container" id="binaryContainer"></div>
<div class="ritual-content">
<div style="margin-bottom: 40px; opacity: 0.7;">
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#bf953f" stroke-width="1">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 2a15 15 0 0 0 0 30 15 15 0 0 0 0-30"></path>
<path d="M2 12h20"></path>
</svg>
</div>
<div class="fingerprint-area" id="fingerBtn">
<div class="fingerprint-icon">
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10v1c0 2.21-1.79 4-4 4s-4-1.79-4-4V7c0-1.66-1.34-3-3-3S8 5.34 8 7v6c0 1.1.9 2 2 2s2-.9 2-2V7"></path>
</svg>
</div>
</div>
<div class="hint-text">长按开启 2026 运势书</div>
</div>
</div>
<div class="result-layer" id="resultLayer">
<div class="header-card">
<div class="year-title">FORTUNE REPORT 2026</div>
<div class="score-box" id="scoreVal">0</div>
<div class="keyword-badge" id="mainKeyword">读取中...</div>
<div style="font-size: 12px; color:rgba(255,255,255,0.5); margin-top: 10px;">
日主：<span id="userTag">--</span>
</div>
</div>
<div class="detail-card">
<div class="star-row"><span>事业前程 Career</span><span class="stars" id="careerStars">★★★★☆</span></div>
<div class="star-row"><span>财富机缘 Wealth</span><span class="stars" id="wealthStars">★★★☆☆</span></div>
<div class="star-row"><span>情感关系 Love</span><span class="stars" id="loveStars">★★★★★</span></div>
</div>
<div class="detail-card">
<div class="section-title"><span>✦</span> 年度总批 Overview</div>
<div class="text-content" id="overviewText">正在解析星盘数据...</div>
</div>
<div class="detail-card">
<div class="section-title"><span>⚔</span> 事业与财富</div>
<div class="text-content" id="careerText">...</div>
</div>
<div class="detail-card">
<div class="section-title"><span>♥</span> Emotions and Advice</div>
<div class="text-content" id="loveText">...</div>
</div>
<div class="footer-share">Mystic AI Lab © 2026</div>
</div>
</div>
<script>
// --- Simulate the data returned by AI ---
const aiData = {
"fortune_report": {
"score": 88,
"keyword": "Inspiration bursts, noble people lead the way",
"user_tag": "Ding Huo (weak)",
"stars": { "c": "★★★★☆", "w": "★★★☆☆", "l": "★★★★★" },
"analysis": {
"overview": "2026, Bingwu's fleeting year, is a year full of spirituality and opportunities for you. Although the fleeting year brings competitive pressure, it also activates the 'Seal Star' energy in your destiny. This means that your intuition and learning ability will reach their peak this year, which is the best time to consolidate yourself and overtake in corners.",
"career": "This year is not suitable for blind expansion, but for 'deep cultivation'. In the workplace, you will meet powerful female nobles or senior mentors who can give you key guidance. If you are engaged in the creative, consulting, or education industries, it is very easy to achieve results this year.",
"love": "Emotionally, the peach blossom star is blooming quietly. Singles can easily meet spiritually compatible partners in study places, libraries or art exhibitions; for those with partners, this is an ice-breaking year for in-depth communication and solving problems left over by history."
}
}
};
// --- Binary particle effect ---
const binaryContainer = document.getElementById('binaryContainer');
let particleInterval;
function createBinaryParticle() {
const particle = document.createElement('div');
particle.classList.add('binary-particle');
// Randomly generate 01 string
const len = Math.floor(Math.random() * 6) + 2;
let text = "";
for(let i=0; i<len; i++) text += Math.random() > 0.5 ? "1" : "0";
particle.innerText = text;
// Random positions and attributes
particle.style.left = Math.random() * 100 + '%';
const duration = Math.random() * 10 + 8; // 8-18 seconds floating time
particle.style.animationDuration = duration + 's';
particle.style.fontSize = (Math.random() * 8 + 8) + 'px';
particle.style.opacity = Math.random() * 0.3 + 0.1;
binaryContainer.appendChild(particle);
//Remove after animation ends
setTimeout(() => {
particle.remove();
}, duration * 1000);
}
// Start generating particles
function startBinaryRain() {
//Initially generate a batch
for(let i=0; i<15; i++) createBinaryParticle();
// Then generate it periodically
particleInterval = setInterval(createBinaryParticle, 600);
}
function stopBinaryRain() {
clearInterval(particleInterval);
// Optional: fade to clear existing particles
// binaryContainer.style.opacity = 0;
}
// --- Interaction logic ---
const btn = document.getElementById('fingerBtn');
const ritual = document.getElementById('ritualLayer');
const result = document.getElementById('resultLayer');
let pressTimer;
btn.addEventListener('touchstart', startRitual, {passive: false});
btn.addEventListener('mousedown', startRitual);
btn.addEventListener('touchend', endRitual);
btn.addEventListener('mouseup', endRitual);
btn.addEventListener('mouseleave', endRitual);
function startRitual(e) {
e.preventDefault();
btn.style.transform = "scale(0.95)";
btn.style.borderColor = "#fff";
document.querySelector('.fingerprint-icon').style.color = "#fff";
pressTimer = setTimeout(revealResult, 1500);
}
function endRitual() {
clearTimeout(pressTimer);
btn.style.transform = "scale(1)";
btn.style.borderColor = "rgba(191, 149, 63, 0.3)";
document.querySelector('.fingerprint-icon').style.color = "#bf953f";
}
function revealResult() {
stopBinaryRain(); // Stop generating particles
ritual.style.opacity = '0';
setTimeout(() => {
ritual.style.display = 'none';
result.style.display = 'block';
requestAnimationFrame(() => {
result.style.opacity = '1';
result.style.transform = 'translateY(0)';
runNumberAnimation();
});
}, 800);
// Fill in data (detailed code omitted, same as previous version)...
document.getElementById('mainKeyword').innerText = aiData.fortune_report.keyword;
document.getElementById('userTag').innerText = aiData.fortune_report.user_tag;
document.getElementById('overviewText').innerText = aiData.fortune_report.analysis.overview;
}
function runNumberAnimation() { /* (omitted, same as the previous version) */
document.getElementById('scoreVal').innerText = aiData.fortune_report.score;
}
//Start special effects after page loading
startBinaryRain();
</script>
</body>
</html>