-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraw.html
152 lines (145 loc) · 5.13 KB
/
draw.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarot Card Drawing</title>
<style>
body {
background: url('https://minio.ol.deepwisdomai.com/test/tarot/tarot-通用-背景.png') no-repeat center center fixed;
background-size: cover;
font-family: Arial, sans-serif;
color: white;
text-align: center;
}
.header {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px;
}
.header img {
height: 50px;
margin-left: 10px;
}
.main-content {
margin-top: 50px;
}
.instructions {
margin-bottom: 20px;
}
.card-deck {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.card {
width: 100px;
height: 150px;
margin: 5px;
background: url('https://minio.ol.deepwisdomai.com/test/tarot/tarot-backend.jpg') no-repeat center center;
background-size: cover;
cursor: pointer;
}
.shuffle-button {
background-color: white;
color: black;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
}
.result-area {
display: flex;
justify-content: center;
margin-top: 20px;
}
.result-box {
width: 100px;
height: 150px;
margin: 5px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.result-box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<span>Made by</span>
<img src="https://minio.ol.deepwisdomai.com/test/tarot/MetaGPTX-LOGO.png" alt="MetaGPT X Logo">
</div>
<div class="main-content">
<h1>Ask the Tarot</h1>
<div class="instructions">
<p>"Before drawing the cards, you need to focus and think about a very precise question. Then you should choose 3 cards from the deck below."</p>
<p>"Our free tarot reading will give you a unique insight into your future and allow you to face it with more serenity."</p>
</div>
<div class="card-deck" id="cardDeck">
<!-- Cards will be dynamically added here -->
</div>
<button class="shuffle-button" onclick="shuffleCards()">Shuffle</button>
<div class="result-area">
<div class="result-box" id="pastBox">+</div>
<div class="result-box" id="presentBox">+</div>
<div class="result-box" id="futureBox">+</div>
</div>
</div>
<script>
const cardNames = [
"愚者", "魔术师", "女祭司", "女皇", "皇帝", "教皇", "恋人", "战车", "力量", "隐士",
"命运之轮", "正义", "倒吊人", "死神", "节制", "恶魔", "塔", "星星", "月亮", "太阳", "审判", "世界"
];
const baseUrl = "https://minio.external.metadl.com/test/tarot/front/";
let selectedCards = [];
function createCard(name) {
const card = document.createElement('div');
card.className = 'card';
card.setAttribute('data-name', name);
card.addEventListener('click', selectCard);
return card;
}
function shuffleCards() {
const cardDeck = document.getElementById('cardDeck');
cardDeck.innerHTML = '';
cardNames.sort(() => Math.random() - 0.5);
cardNames.forEach(name => {
cardDeck.appendChild(createCard(name));
});
}
function selectCard(event) {
const cardName = event.target.getAttribute('data-name');
if (selectedCards.length < 3 && !selectedCards.includes(cardName)) {
selectedCards.push(cardName);
updateResultBoxes();
if (selectedCards.length === 3) {
const queryParams = selectedCards.map((card, index) => `card${index + 1}=${card}`).join('&');
window.location.href = `result.html?${queryParams}`;
}
}
}
function updateResultBoxes() {
const boxes = ['pastBox', 'presentBox', 'futureBox'];
boxes.forEach((boxId, index) => {
const box = document.getElementById(boxId);
if (selectedCards[index]) {
box.innerHTML = `<img src="${baseUrl}${selectedCards[index]}.png" alt="${selectedCards[index]}">`;
} else {
box.textContent = '+';
}
});
}
shuffleCards();
</script>
</body>
</html>