我有一个可以绘制卡片并显示文本的网页。文字和图像重叠。
我不知道如何让它们不与 FlexBox、网格 CSS 重叠。
var obj;
$(document).ready(function() {
var url = "https://clearlightdoor.com/s3cards";
$("#save_file").css("visibility", "hidden");
// Use $.ajax instead of $.getJSON to handle asynchronous loading
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
obj = data['AllData'];
for (var i = 0; i < obj.length; i++) {
if (i == 0) {
var td_data = obj[i]["img"];
$("#tenth-card").append(td_data);
} else if (i == 1) {
var td_data = obj[i]["img"];
$("#nineth-card").append(td_data);
} else if (i == 2) {
var td_data = obj[i]["img"];
$("#eighth-card").append(td_data);
} else if (i == 3) {
var td_data = obj[i]["img"];
$("#seventh-card").append(td_data);
} else if (i == 4) {
var td_data = obj[i]["img"];
$("#sixth-card").append(td_data);
} else if (i == 5) {
var td_data = obj[i]["img"];
$("#fifth-card").append(td_data);
} else if (i == 6) {
var td_data = obj[i]["img"];
$("#fourth-card").append(td_data);
} else if (i == 7) {
var td_data = obj[i]["img"];
$("#third-card").append(td_data);
} else if (i == 9) {
var td_data = obj[i]["img"];
$("#first-card").prepend(td_data);
}
}
}
});
var inc = 10;
$("#next_btn").click(function() {
inc = inc - 1;
if (inc == 9) {
$("#first-card").css("visibility", "visible");
$("#start_text").remove();
var first_text = obj[9]["line"];
$("#card_text").append(first_text);
} else if (inc == 8) {
// $("#second-card").css("visibility", "visible");
var second_data = obj[8]["img"];
$("#first-card").append(second_data);
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 7) {
$("#third-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 6) {
$("#fourth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 5) {
$("#fifth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 4) {
$("#sixth-card").css("visibility", "visible");
} else if (inc == 3) {
$("#seventh-card").css("visibility", "visible");
} else if (inc == 2) {
$("#eighth-card").css("visibility", "visible");
} else if (inc == 1) {
$("#nineth-card").css("visibility", "visible");
} else if (inc == 0) {
$("#tenth-card").css("visibility", "visible");
$("#save_file").css("visibility", "visible");
}
});
});
$("#save_file").click(function() {
var html_save = "<html><body><table>";
for (var i = 0; i < obj.length; i++) {
html_save += "<tr style='height: 215px;'><td valign='top'>" + obj[i]["line"] + "</td><td>" + obj[i]["img"] + "</td></tr>";
}
html_save += "</table></body></html>";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(html_save);
hiddenElement.target = '_blank';
hiddenElement.download = 'tarot_reading.html';
hiddenElement.click();
});/* this page uses CSS grid and FlexBox to control layout */
body {
font-family: 'Old Standard TT', serif;
background-color: #1c1c1c;
color: #d4af37;
font-size: 1.2em;
background-image: url("https://tarotcardsstyles.s3.us-west-2.amazonaws.com/pattern8-pattern53b.jpg");
background-repeat: repeat;
}
#card, #absolute {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
a {
color: #d4af37;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
}
a:visited {
color: #d4af37;
}
.button {
color: #d4af37;
font-family: 'Old Standard TT', serif;
text-decoration: none;
border: 2px solid #d4af37;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
} /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */
#rotate {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
left: -120px;
}
button {
text-decoration: none;
color: #d4af37;
background: rgba(0, 0, 0, 0.7);
padding: 7px 14px;
border: 2px solid #d4af37;
border-radius: 5px;
font-family: 'Old Standard TT', serif;
font-size: 1em;
margin-bottom: 20px;
}
.content-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0;
}
.start-text {
text-align: center;
margin-bottom: 20px;
}
.grid-container {
display: flex;
justify-content: center;
margin-top: 200px;
}
.grid-item {
padding: 10px;
}
.card-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
position: relative;
}
.text-container {
margin-top: 20px;
text-align: center;
}
.reading-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
#card_text {
top: 400%;
left: 100%;
display: flex;
}
#first-card {
position: relative;
}
#second-card, #third-card, #fourth-card, #fifth-card, #sixth-card,
#seventh-card, #eighth-card, #nineth-card, #tenth-card {
position: absolute;
visibility: collapse;
width: 100%;
height: 100%;
}
#second-card {
top: 50%;
left: 50%;
}
#third-card {
top: 100%;
left: 0;
display: flex;
}
#fourth-card {
top: 0;
left: -100%;
}
#fifth-card {
top: -100%;
left: 0;
}
#sixth-card {
top: 0;
left: 100%;
}
#seventh-card {
top: 200%;
left: 300%;
}
#eighth-card {
top: 100%;
left: 300%;
}
#nineth-card {
top: 0;
left: 300%;
}
#tenth-card {
top: -100%;
left: 300%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="button-container">
<button id="next_btn" style="border:1px solid black;">Next</button>
<br>
<button id="save_file" style="visibility:collapse; border:1px solid black;">Save reading to file</button>
</div>
<div class="content-container">
<div id="start_text" class="start-text">Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.</div>
<div class="grid-container">
<div class="grid-item">
<div class="card-grid">
<div id="first-card" style="visibility: collapse">
<div id="second-card" style="visibility: collapse"></div>
<div id="third-card" style="visibility: collapse"></div>
<div id="fourth-card" style="visibility: collapse"></div>
<div id="fifth-card" style="visibility: collapse"></div>
<div id="sixth-card" style="visibility: collapse"></div>
<div id="seventh-card" style="visibility: collapse"></div>
<div id="eighth-card" style="visibility: collapse"></div>
<div id="nineth-card" style="visibility: collapse"></div>
<div id="tenth-card" style="visibility: collapse"></div>
</div>
</div>
</div>
</div>
<div id="card_text"></div>
</div><div id="card_text"></div><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Tarot Card game featuring Celtic cross spread. The game text was partially generated by claude-3-opus-20240229">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>The Clear Light Door</title>
<link rel="icon" type="image/x-icon" href="https://tarotcardsstyles.s3.us-west-2.amazonaws.com/favicon.ico">
<style>
/* this page uses CSS grid and FlexBox to control layout */
body {
font-family: 'Old Standard TT', serif;
background-color: #1c1c1c;
color: #d4af37;
font-size: 1.2em;
background-image: url("https://tarotcardsstyles.s3.us-west-2.amazonaws.com/pattern8-pattern53b.jpg");
background-repeat: repeat;
}
#card, #absolute {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
a {
color: #d4af37;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
}
a:visited {
color: #d4af37;
}
.button {
color: #d4af37;
font-family: 'Old Standard TT', serif;
text-decoration: none;
border: 2px solid #d4af37;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
} /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */
#rotate {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
left: -120px;
}
button {
text-decoration: none;
color: #d4af37;
background: rgba(0, 0, 0, 0.7);
padding: 7px 14px;
border: 2px solid #d4af37;
border-radius: 5px;
font-family: 'Old Standard TT', serif;
font-size: 1em;
margin-bottom: 20px;
}
.content-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0;
}
.start-text {
text-align: center;
margin-bottom: 20px;
}
.grid-container {
display: flex;
justify-content: center;
margin-top: 200px;
}
.grid-item {
padding: 10px;
}
.card-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
position: relative;
}
.text-container {
margin-top: 20px;
text-align: center;
}
.reading-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
#card_text {
top: 400%;
left: 100%;
display: flex;
}
#first-card {
position: relative;
}
#second-card, #third-card, #fourth-card, #fifth-card, #sixth-card,
#seventh-card, #eighth-card, #nineth-card, #tenth-card {
position: absolute;
visibility: collapse;
width: 100%;
height: 100%;
}
#second-card {
top: 50%;
left: 50%;
}
#third-card {
top: 100%;
left: 0;
display: flex;
}
#fourth-card {
top: 0;
left: -100%;
}
#fifth-card {
top: -100%;
left: 0;
}
#sixth-card {
top: 0;
left: 100%;
}
#seventh-card {
top: 200%;
left: 300%;
}
#eighth-card {
top: 100%;
left: 300%;
}
#nineth-card {
top: 0;
left: 300%;
}
#tenth-card {
top: -100%;
left: 300%;
}
</style>
</head>
<body>
<div class="button-container">
<button id="next_btn" style="border:1px solid black;">Next</button>
<br>
<button id="save_file" style="visibility:collapse; border:1px solid black;">Save reading to file</button>
</div>
<div class="content-container">
<div id="start_text" class="start-text">Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.</div>
<div class="grid-container">
<div class="grid-item">
<div class="card-grid">
<div id="first-card" style="visibility: collapse">
<div id="second-card" style="visibility: collapse"></div>
<div id="third-card" style="visibility: collapse"></div>
<div id="fourth-card" style="visibility: collapse"></div>
<div id="fifth-card" style="visibility: collapse"></div>
<div id="sixth-card" style="visibility: collapse"></div>
<div id="seventh-card" style="visibility: collapse"></div>
<div id="eighth-card" style="visibility: collapse"></div>
<div id="nineth-card" style="visibility: collapse"></div>
<div id="tenth-card" style="visibility: collapse"></div>
</div>
</div>
</div>
</div>
<div id="card_text"></div>
</div>
</body>
<script>
/*global $*/
var obj;
$(document).ready(function() {
var url = "https://clearlightdoor.com/s3cards";
$("#save_file").css("visibility", "hidden");
// Use $.ajax instead of $.getJSON to handle asynchronous loading
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
obj = data['AllData'];
for (var i = 0; i < obj.length; i++) {
if (i == 0) {
var td_data = obj[i]["img"];
$("#tenth-card").append(td_data);
} else if (i == 1) {
var td_data = obj[i]["img"];
$("#nineth-card").append(td_data);
} else if (i == 2) {
var td_data = obj[i]["img"];
$("#eighth-card").append(td_data);
} else if (i == 3) {
var td_data = obj[i]["img"];
$("#seventh-card").append(td_data);
} else if (i == 4) {
var td_data = obj[i]["img"];
$("#sixth-card").append(td_data);
} else if (i == 5) {
var td_data = obj[i]["img"];
$("#fifth-card").append(td_data);
} else if (i == 6) {
var td_data = obj[i]["img"];
$("#fourth-card").append(td_data);
} else if (i == 7) {
var td_data = obj[i]["img"];
$("#third-card").append(td_data);
} else if (i == 9) {
var td_data = obj[i]["img"];
$("#first-card").prepend(td_data);
}
}
}
});
var inc = 10;
$("#next_btn").click(function() {
inc = inc - 1;
if (inc == 9) {
$("#first-card").css("visibility", "visible");
$("#start_text").remove();
var first_text = obj[9]["line"];
$("#card_text").append(first_text);
} else if (inc == 8) {
// $("#second-card").css("visibility", "visible");
var second_data = obj[8]["img"];
$("#first-card").append(second_data);
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 7) {
$("#third-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 6) {
$("#fourth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 5) {
$("#fifth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 4) {
$("#sixth-card").css("visibility", "visible");
} else if (inc == 3) {
$("#seventh-card").css("visibility", "visible");
} else if (inc == 2) {
$("#eighth-card").css("visibility", "visible");
} else if (inc == 1) {
$("#nineth-card").css("visibility", "visible");
} else if (inc == 0) {
$("#tenth-card").css("visibility", "visible");
$("#save_file").css("visibility", "visible");
}
});
});
$("#save_file").click(function() {
var html_save = "<html><body><table>";
for (var i = 0; i < obj.length; i++) {
html_save += "<tr style='height: 215px;'><td valign='top'>" + obj[i]["line"] + "</td><td>" + obj[i]["img"] + "</td></tr>";
}
html_save += "</table></body></html>";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(html_save);
hiddenElement.target = '_blank';
hiddenElement.download = 'tarot_reading.html';
hiddenElement.click();
});
</script>
</html>
因为我正在动态修改 DOM，所以我无法严格按照规则将事物分开。我最终使用边距填充来获得我需要的东西。 目前它无法在移动设备上正确呈现。第二张牌没有与第一张牌交叉，而是向左浮动。因此，仍然有一些工作要做，但答案可能不像切换以防止重叠那么简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Tarot Card game featuring Celtic cross spread. The game text was partially generated by claude-3-opus-20240229">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>The Clear Light Door</title>
<link rel="icon" type="image/x-icon" href="https://tarotcardsstyles.s3.us-west-2.amazonaws.com/favicon.ico">
<style>
/* this page uses CSS grid and FlexBox to control layout */
body {
font-family: 'Old Standard TT', serif;
background-color: #1c1c1c;
color: #d4af37;
font-size: 1.2em;
background-image: url("https://tarotcardsstyles.s3.us-west-2.amazonaws.com/pattern8-pattern53b.jpg");
background-repeat: repeat;
}
#card, #absolute {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
a {
color: #d4af37;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
}
a:visited {
color: #d4af37;
}
.button {
color: #d4af37;
font-family: 'Old Standard TT', serif;
text-decoration: none;
border: 2px solid #d4af37;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
} /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */
#rotate {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
left: -120px;
}
button {
text-decoration: none;
color: #d4af37;
background: rgba(0, 0, 0, 0.7);
padding: 7px 14px;
border: 2px solid #d4af37;
border-radius: 5px;
font-family: 'Old Standard TT', serif;
font-size: 1em;
margin-bottom: 20px;
}
.content-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.top-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding: 20px;
}
.cardtext-container {
margin-right: 40px;
text-align: left;
max-width: 300px;
padding-left: 20px;
}
.grid-container {
margin-top: 0;
padding-left: 40px;
border-left: 2px solid #d4af37;
}
.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
position: relative;
margin-bottom: 350px;
margin-left: 60px; /* Add this line */
}
.button-container {
margin-bottom: 20px;
}
.start-text {
text-align: center;
margin-bottom: 20px;
}
.grid-item {
padding: 10px;
}
.card-container {
display: flex;
margin-top: 20px;
}
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-bottom: 350px;
margin-left: 350px;
margin-top: 150px;
}
.text-container {
margin-top: 20px;
text-align: center;
}
.reading-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
#first-card {
position: relative;
}
#second-card, #third-card, #fourth-card, #fifth-card, #sixth-card,
#seventh-card, #eighth-card, #nineth-card, #tenth-card {
position: absolute;
visibility: collapse;
width: 100%;
height: 100%;
}
#second-card {
top: 50%;
left: 50%;
}
#third-card {
top: 100%;
left: 0;
display: flex;
}
#fourth-card {
top: 0;
left: -100%;
}
#fifth-card {
top: -100%;
left: 0;
}
#sixth-card {
top: 0;
left: 100%;
}
#seventh-card {
top: 200%;
left: 300%;
}
#eighth-card {
top: 100%;
left: 300%;
}
#nineth-card {
top: 0;
left: 300%;
}
#tenth-card {
top: -100%;
left: 300%;
}
</style>
</head>
<body>
<div class="button-container">
<button id="next_btn" style="border:1px solid black;">Next</button>
<br>
<button id="save_file" style="visibility:collapse; border:1px solid black;">Save reading to file</button>
</div>
<div class="content-container">
<div class="top-container">
<div class="cardtext-container">
<div id="card_text"></div>
</div>
<div class="grid-container">
<div class="grid-item">
<div class="card-grid">
<div id="first-card" style="visibility: collapse">
<div id="second-card" style="visibility: collapse"></div>
<div id="third-card" style="visibility: collapse"></div>
<div id="fourth-card" style="visibility: collapse"></div>
<div id="fifth-card" style="visibility: collapse"></div>
<div id="sixth-card" style="visibility: collapse"></div>
<div id="seventh-card" style="visibility: collapse"></div>
<div id="eighth-card" style="visibility: collapse"></div>
<div id="nineth-card" style="visibility: collapse"></div>
<div id="tenth-card" style="visibility: collapse"></div>
</div>
</div>
</div>
</div>
</div>
<div id="start_text" class="start-text">Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.</div>
</div>
</body>
<script>
/*global $*/
var obj;
$(document).ready(function() {
var url = "https://clearlightdoor.com/s3cards";
$("#save_file").css("visibility", "hidden");
// Use $.ajax instead of $.getJSON to handle asynchronous loading
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
obj = data['AllData'];
for (var i = 0; i < obj.length; i++) {
if (i == 0) {
var td_data = obj[i]["img"];
$("#tenth-card").append(td_data);
} else if (i == 1) {
var td_data = obj[i]["img"];
$("#nineth-card").append(td_data);
} else if (i == 2) {
var td_data = obj[i]["img"];
$("#eighth-card").append(td_data);
} else if (i == 3) {
var td_data = obj[i]["img"];
$("#seventh-card").append(td_data);
} else if (i == 4) {
var td_data = obj[i]["img"];
$("#sixth-card").append(td_data);
} else if (i == 5) {
var td_data = obj[i]["img"];
$("#fifth-card").append(td_data);
} else if (i == 6) {
var td_data = obj[i]["img"];
$("#fourth-card").append(td_data);
} else if (i == 7) {
var td_data = obj[i]["img"];
$("#third-card").append(td_data);
} else if (i == 9) {
var td_data = obj[i]["img"];
$("#first-card").prepend(td_data);
}
}
}
});
var inc = 10;
$("#next_btn").click(function() {
inc = inc - 1;
if (inc == 9) {
$("#first-card").css("visibility", "visible");
$("#start_text").remove();
var first_text = obj[9]["line"];
$("#card_text").append(first_text);
} else if (inc == 8) {
// $("#second-card").css("visibility", "visible");
var second_data = obj[8]["img"];
$("#first-card").append(second_data);
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 7) {
$("#third-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 6) {
$("#fourth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 5) {
$("#fifth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 4) {
$("#sixth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 3) {
$("#seventh-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 2) {
$("#eighth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 1) {
$("#nineth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 0) {
$("#tenth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
$("#save_file").css("visibility", "visible");
}
});
});
$("#save_file").click(function() {
var html_save = "<html><body><table>";
for (var i = 0; i < obj.length; i++) {
html_save += "<tr style='height: 215px;'><td valign='top'>" + obj[i]["line"] + "</td><td>" + obj[i]["img"] + "</td></tr>";
}
html_save += "</table></body></html>";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(html_save);
hiddenElement.target = '_blank';
hiddenElement.download = 'tarot_reading.html';
hiddenElement.click();
});
</script>
</html>