add new files
This commit is contained in:
Jethro Lin
commit
ca6484aa13
8 changed files with 278 additions and 0 deletions
8
.idea/.gitignore
vendored
Normal file
8
.idea/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/talama.iml" filepath="$PROJECT_DIR$/.idea/talama.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
20
.idea/php.xml
Normal file
20
.idea/php.xml
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="MessDetectorOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCSFixerOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCodeSnifferOptionsConfiguration">
|
||||
<option name="highlightLevel" value="WARNING" />
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
|
||||
<component name="PhpStanOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PsalmOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/talama.iml
Normal file
8
.idea/talama.iml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/vcs.xml
Normal file
6
.idea/vcs.xml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
54
index.html
Executable file
54
index.html
Executable file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-Hans">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>塔罗牌占卜</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 自定义CSS -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>塔罗牌占卜</h1>
|
||||
<p>选择您的牌阵，探索未来的奥秘</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label for="spreadSelect" class="form-label dropdown-label">选择牌阵</label>
|
||||
<select class="form-select" id="spreadSelect">
|
||||
<option value="" disabled selected>请选择一个牌阵</option>
|
||||
<option value="3">圣三角牌阵</option>
|
||||
<option value="4">四张牌牌阵</option>
|
||||
<option value="5">二选一牌阵</option>
|
||||
<option value="5_standard">五张牌牌阵</option>
|
||||
<option value="5_love">感情五张牌牌阵</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<button id="drawButton" class="btn btn-warning w-100">抽牌</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-container" id="cardContainer">
|
||||
<!-- 抽取的塔罗牌将显示在这里 -->
|
||||
</div>
|
||||
|
||||
<div class="template-section" id="templateSection" style="display: none;">
|
||||
<h4>占卜结果模板</h4>
|
||||
<p class="template-text" id="templateText"></p>
|
||||
<button class="btn btn-secondary copy-btn" id="copyButton">复制模板</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery和Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 自定义JS -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
107
script.js
Executable file
107
script.js
Executable file
|
|
@ -0,0 +1,107 @@
|
|||
$(document).ready(function() {
|
||||
// 大阿尔克那牌组
|
||||
const majorArcana = [
|
||||
"愚者", "魔术师", "女祭司", "女皇", "皇帝", "教皇", "恋人", "战车",
|
||||
"力量", "隐士", "命运之轮", "正义", "倒吊人", "死神", "节制",
|
||||
"恶魔", "塔", "星星", "月亮", "太阳", "审判", "世界"
|
||||
];
|
||||
|
||||
// 中文数字数组
|
||||
const chineseNumbers = ["一", "二", "三", "四", "五"];
|
||||
|
||||
// 牌阵定义
|
||||
const spreads = {
|
||||
"3": {
|
||||
name: "圣三角牌阵",
|
||||
description: ["我以为的状态", "真实的状态", "建言"],
|
||||
template: "我以为的状态➊ 》真实的状态➋ 》建言 - {牌一}-{牌二}-{牌三}"
|
||||
},
|
||||
"4": {
|
||||
name: "四张牌牌阵",
|
||||
description: ["问题核心", "障碍", "对策", "优势"],
|
||||
template: "问题核心➊ 》障碍➋ 》对策➌ 》优势➍ - {牌一}-{牌二}-{牌三}-{牌四}"
|
||||
},
|
||||
"5": {
|
||||
name: "二选一牌阵",
|
||||
description: ["选项A的状态", "选项B的状态", "选项A可能的结果", "选项B可能的结果", "当事人的状态"],
|
||||
template: "选项A的状态➊ 》选项B的状态➋ 》选项A可能的结果➌ 》选项B可能的结果➍ 》当事人的状态➎ - {牌一}-{牌二}-{牌三}-{牌四}-{牌五}"
|
||||
},
|
||||
"5_standard": {
|
||||
name: "五张牌牌阵",
|
||||
description: ["位置1", "位置2", "位置3", "位置4", "位置5"],
|
||||
template: "位置1➊ 》位置2➋ 》位置3➌ 》位置4➍ 》位置5➎ - {牌一}-{牌二}-{牌三}-{牌四}-{牌五}"
|
||||
},
|
||||
"5_love": {
|
||||
name: "感情五张牌牌阵",
|
||||
description: ["我的状态", "本人对我的感情态度", "对方的状态", "对方对我的感情态度", "可能的结果"],
|
||||
template: "我的状态➊ 》本人对我的感情态度➋ 》对方的状态➌ 》对方对我的感情态度➍ 》可能的结果➎ - {牌一}-{牌二}-{牌三}-{牌四}-{牌五}"
|
||||
}
|
||||
};
|
||||
|
||||
// 随机抽取不重复的牌
|
||||
function drawCards(count) {
|
||||
let shuffled = [...majorArcana].sort(() => 0.5 - Math.random());
|
||||
return shuffled.slice(0, count).map(card => {
|
||||
return {
|
||||
name: card,
|
||||
position: Math.random() > 0.5 ? "正位" : "逆位"
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 更新UI显示牌
|
||||
function displayCards(cards) {
|
||||
let container = $("#cardContainer");
|
||||
container.empty();
|
||||
cards.forEach((card, index) => {
|
||||
let cardDiv = $(`
|
||||
<div class="tarot-card">
|
||||
<div class="card-name">${card.name}</div>
|
||||
<div class="card-position">${card.position}</div>
|
||||
</div>
|
||||
`);
|
||||
container.append(cardDiv);
|
||||
});
|
||||
}
|
||||
|
||||
// 生成描述模板
|
||||
function generateTemplate(spreadKey, cards) {
|
||||
let spread = spreads[spreadKey];
|
||||
if (!spread) return "";
|
||||
let template = spread.template;
|
||||
cards.forEach((card, index) => {
|
||||
// 使用中文数字替换占位符
|
||||
template = template.replace(`{牌${chineseNumbers[index]}}`, `${card.name} ${card.position}`);
|
||||
});
|
||||
return template;
|
||||
}
|
||||
|
||||
// 处理抽牌按钮点击
|
||||
$("#drawButton").click(function() {
|
||||
let spreadKey = $("#spreadSelect").val();
|
||||
if (!spreadKey) {
|
||||
alert("请选择一个牌阵！");
|
||||
return;
|
||||
}
|
||||
|
||||
let spread = spreads[spreadKey];
|
||||
let cardCount = spread.description.length;
|
||||
let drawnCards = drawCards(cardCount);
|
||||
|
||||
displayCards(drawnCards);
|
||||
|
||||
let template = generateTemplate(spreadKey, drawnCards);
|
||||
$("#templateText").text(template);
|
||||
$("#templateSection").show();
|
||||
});
|
||||
|
||||
// 复制模板功能
|
||||
$("#copyButton").click(function() {
|
||||
let text = $("#templateText").text();
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
alert("模板已复制！");
|
||||
}).catch(err => {
|
||||
alert("复制失败，请手动复制。");
|
||||
});
|
||||
});
|
||||
});
|
||||
67
styles.css
Executable file
67
styles.css
Executable file
|
|
@ -0,0 +1,67 @@
|
|||
body {
|
||||
background-color: #2e2e2e;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
.container {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.card-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.tarot-card {
|
||||
background-color: #444;
|
||||
border: 2px solid #555;
|
||||
border-radius: 10px;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.tarot-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.card-name {
|
||||
font-weight: bold;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.card-position {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
color: #ccc;
|
||||
}
|
||||
.template-section {
|
||||
margin-top: 30px;
|
||||
background-color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.template-text {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.copy-btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 3em;
|
||||
color: #f1c40f;
|
||||
text-shadow: 2px 2px #000;
|
||||
}
|
||||
.dropdown-label {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
Loading…
Reference in a new issue