Una de las cositas que más me gustan de este blog es el gadget del tarot del día. No pretende reemplazar una lectura real ni nada por el estilo; es simplemente un elemento decorativo y entretenido que saca una carta al azar cuando haces clic en el botón.
Si quieres poner uno parecido en tu propio blog, aquí te explico cómo hacerlo.
Primero deben agregar un gadget HTML/JavaScript:
Entra a Blogger y ve a 'Diseño' y haz clic en 'Añadir un gadget' en el lugar donde quieras que aparezca. Luego selecciona 'HTML/JavaScript'.
Luego deben pegar el código completo de dentro del cuadro de HTML/JavaScript. Si quieres personalizarlo, puedes cambiar los colores, el tamaño de las cartas o cualquier otro detalle directamente desde el código. Les dejaré en negrita lo que pueden modificar.
<!-- Daily Tarot Widget -->
<div id="tarot-day-widget">
<style>
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');
#tarot-day-widget {
background: #A781BE; <-- CAMBIA COLOR AQUÍ: Color de fondo principal
font-family: 'IM Fell English', serif;
color: #f7efff; <-- CAMBIA COLOR AQUÍ: Color del texto del título
text-align: center;
padding: 22px 14px;
border-radius: 18px;
box-sizing: border-box;
max-width: 260px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.28); <-- CAMBIA COLOR AQUÍ: Opacidad blanca para el borde
box-shadow: 0 10px 30px rgba(45, 20, 60, 0.25); <-- CAMBIA COLOR AQUÍ: Tono oscuro de la sombra
}
#tarot-day-widget h3 {
margin: 0 0 8px;
font-size: 27px;
font-weight: normal;
letter-spacing: 1px;
}
#tarot-day-widget .intro {
margin: 0 0 16px;
font-size: 15px;
color: #f2e6fb; <-- CAMBIA COLOR AQUÍ: Color de la introducción
opacity: 0.9;
}
.tarot-scene {
width: 125px;
height: 150px;
perspective: 900px;
margin: 0 auto 16px;
}
.tarot-card {
width: 125px;
height: 150px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease;
}
.tarot-card.revealed {
transform: rotateY(180deg);
}
.tarot-face {
position: absolute;
width: 125px;
height: 150px;
inset: 0;
backface-visibility: hidden;
border-radius: 12px;
background: linear-gradient(145deg, #7d5a91, #5f3f73); <-- CAMBIA COLOR AQUÍ: Degradado del reverso
border: 1px solid rgba(255,255,255,0.45); <-- CAMBIA COLOR AQUÍ: Color del borde de la carta
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.08),
inset 0 0 28px rgba(255,255,255,0.08),
0 8px 20px rgba(45,20,60,0.35); <-- CAMBIA COLOR AQUÍ: Color de la sombra de la carta
overflow: hidden;
}
.tarot-back:before,
.tarot-back:after,
.tarot-front:before,
.tarot-front:after {
content: "";
position: absolute;
border: 1px solid rgba(255,255,255,0.42); <-- CAMBIA COLOR AQUÍ: Color de los círculos decorativos
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tarot-back:before,
.tarot-front:before {
width: 72px;
height: 72px;
}
.tarot-back:after,
.tarot-front:after {
width: 44px;
height: 44px;
opacity: 0.65;
}
.card-line {
position: absolute;
background: rgba(255,255,255,0.42); <-- CAMBIA COLOR AQUÍ: Color de las líneas del marco
}
.line-top,
.line-bottom {
width: 78px;
height: 1px;
left: 23px;
}
.line-top { top: 18px; }
.line-bottom { bottom: 18px; }
.line-left,
.line-right {
width: 1px;
height: 96px;
top: 27px;
}
.line-left { left: 18px; }
.line-right { right: 18px; }
.css-star {
position: absolute;
width: 1px;
height: 18px;
background: rgba(255,255,255,0.78); <-- CAMBIA COLOR AQUÍ: Color de la estrella (eje vertical)
left: 62px;
top: 66px;
}
.css-star:before {
content: "";
position: absolute;
width: 18px;
height: 1px;
background: rgba(255,255,255,0.78); <-- CAMBIAR COLOR AQUÍ: Color de la estrella (eje horizontal)
left: -8.5px;
top: 8.5px;
}
.css-moon {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255,255,255,0.78); <-- CAMBIAR COLOR AQUÍ: Color de la luna
left: 50px;
top: 57px;
}
.css-moon:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: #6d4b80; <-- CAMBIAR COLOR AQUÍ: Debe ser igual al color predominante de la carta front
left: 8px;
top: -1px;
}
.corner-dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.55); <-- CAMBIAR COLOR AQUÍ: Color de los puntos de las esquinas
}
.dot-a { top: 12px; left: 12px; }
.dot-b { top: 12px; right: 12px; }
.dot-c { bottom: 12px; left: 12px; }
.dot-d { bottom: 12px; right: 12px; }
.tarot-front {
transform: rotateY(180deg);
background: linear-gradient(145deg, #6f4b82, #4d315f); <-- CAMBIAR COLOR AQUÍ: Degradado de la carta delantera
}
.front-title {
position: absolute;
width: 100%;
top: 104px;
left: 0;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
line-height: 1.1;
color: #fff7ff; <-- CAMBIAR COLOR AQUÍ: Color del texto dentro de la carta
letter-spacing: 0.4px;
}
.tarot-button {
font-family: 'IM Fell English', serif;
background: rgba(255,255,255,0.12); <-- CAMBIAR COLOR AQUÍ: Color de fondo del botón
color: #fff7ff; <-- CAMBIAR COLOR AQUÍ: Color del texto del botón
border: 1px solid rgba(255,255,255,0.52); <-- CAMBIAR COLOR AQUÍ: Color del borde del botón
border-radius: 999px;
padding: 8px 18px;
cursor: pointer;
font-size: 15px;
letter-spacing: 0.5px;
transition: all 0.25s ease;
}
.tarot-button:hover {
background: rgba(255,255,255,0.22); <-- CAMBIAR COLOR AQUÍ: Color del botón en hover
transform: translateY(-1px);
}
.tarot-button:disabled {
opacity: 0.55;
cursor: default;
transform: none;
}
.tarot-result {
margin-top: 15px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.tarot-result.visible {
opacity: 1;
transform: translateY(0);
}
.tarot-result h4 {
margin: 0 0 7px;
font-size: 22px;
font-weight: normal;
color: #fff9ff; <-- CAMBIAR COLOR AQUÍ: Color del nombre del resultado
}
.tarot-keywords {
margin: 0 0 9px;
font-size: 13px;
color: #eadcf4; <-- CAMBIAR COLOR AQUÍ: Color de las palabras clave
letter-spacing: 0.4px;
}
.tarot-meaning {
min-height: 38px;
margin: 0 auto;
font-size: 14px;
line-height: 1.35;
color: #f8efff; <-- CAMBIAR COLOR AQUÍ: Color del texto del significado
max-width: 215px;
}
</style>
<h3>Daily Tarot</h3>
<p class="intro">Reveal your card…</p>
<div class="tarot-scene">
<div class="tarot-card" id="tarotCard">
<div class="tarot-face tarot-back">
<span class="card-line line-top"></span>
<span class="card-line line-bottom"></span>
<span class="card-line line-left"></span>
<span class="card-line line-right"></span>
<span class="corner-dot dot-a"></span>
<span class="corner-dot dot-b"></span>
<span class="corner-dot dot-c"></span>
<span class="corner-dot dot-d"></span>
<span class="css-star"></span>
</div>
<div class="tarot-face tarot-front">
<span class="card-line line-top"></span>
<span class="card-line line-bottom"></span>
<span class="card-line line-left"></span>
<span class="card-line line-right"></span>
<span class="corner-dot dot-a"></span>
<span class="corner-dot dot-b"></span>
<span class="corner-dot dot-c"></span>
<span class="corner-dot dot-d"></span>
<span class="css-moon"></span>
<div class="front-title" id="frontTitle">Hidden Arcana</div>
</div>
</div>
</div>
<button class="tarot-button" id="revealTarotBtn">Reveal Card</button>
<div class="tarot-result" id="tarotResult">
<h4 id="tarotName"></h4>
<p class="tarot-keywords" id="tarotKeywords"></p>
<p class="tarot-meaning" id="tarotMeaning"></p>
</div>
<script>
(function () {
const tarotData = [
{
name: "The Fool",
keywords: ["Beginnings, Trust, Freedom, Threshold"],
meaning: "Step lightly into the unknown. Not every path needs proof before it begins."
},
{
name: "The Magician",
keywords: ["Will, Focus, Creation, Skill"],
meaning: "What you need is already near your hands. Shape intention into action."
},
{
name: "The High Priestess",
keywords: ["Intuition, Silence, Mystery, Knowing"],
meaning: "There is wisdom beneath the surface. Listen before you answer."
},
{
name: "The Empress",
keywords: ["Nurture, Beauty, Growth, Receiving"],
meaning: "Let what is tender be protected. Something grows when it is not rushed."
},
{
name: "The Emperor",
keywords: ["Structure, Authority, Order, Discipline"],
meaning: "A calm boundary can be an act of devotion. Build what can hold you."
},
{
name: "The Hierophant",
keywords: ["Tradition, Guidance, Ritual, Learning"],
meaning: "Return to what is sacred and steady. A lesson arrives through patience."
},
{
name: "The Lovers",
keywords: ["Choice, Union, Values, Devotion"],
meaning: "Choose from alignment, not fear. The heart knows when it is divided."
},
{
name: "The Chariot",
keywords: ["Direction, Victory, Control, Resolve"],
meaning: "Gather your will and move with purpose. Momentum follows inner command."
},
{
name: "Strength",
keywords: ["Courage, Grace, Patience, Compassion"],
meaning: "Softness is not weakness. Your gentleness may be the strongest force today."
},
{
name: "The Hermit",
keywords: ["Solitude, Reflection, Wisdom, Inner Light"],
meaning: "Withdraw without disappearing. The quiet path reveals what noise conceals."
},
{
name: "Wheel of Fortune",
keywords: ["Change, Cycles, Fate, Movement"],
meaning: "The wheel turns whether you resist or breathe. Meet change with open hands."
},
{
name: "Justice",
keywords: ["Truth, Balance, Clarity, Accountability"],
meaning: "Look clearly at what is fair. Truth asks for courage, not severity."
},
{
name: "The Hanged Man",
keywords: ["Pause, Surrender, Perspective, Release"],
meaning: "Do not force the door. A new view appears when you stop pushing."
},
{
name: "Death",
keywords: ["Ending, Renewal, Release, Transformation"],
meaning: "What falls away makes room for breath. Let the old skin loosen."
},
{
name: "Temperance",
keywords: ["Harmony, Healing, Moderation, Flow"],
meaning: "Blend slowly. The right balance is found through small, honest adjustments."
},
{
name: "The Devil",
keywords: ["Attachment, Shadow, Desire, Awareness"],
meaning: "Name what binds you without shame. Seeing the chain is the first loosening."
},
{
name: "The Tower",
keywords: ["Disruption, Truth, Awakening, Release"],
meaning: "What cannot stand may fall. Let revelation clear the false foundation."
},
{
name: "The Star",
keywords: ["Hope, Renewal, Faith, Stillness"],
meaning: "A softer light returns. Trust the quiet restoration already beginning."
},
{
name: "The Moon",
keywords: ["Dreams, Illusion, Instinct, Depth"],
meaning: "Not everything is meant to be clear tonight. Walk gently through uncertainty."
},
{
name: "The Sun",
keywords: ["Joy, Vitality, Clarity, Warmth"],
meaning: "Let yourself be seen without apology. Light reveals what fear once hid."
},
{
name: "Judgement",
keywords: ["Calling, Awakening, Return, Decision"],
meaning: "A deeper part of you is asking to be heard. Rise without carrying every old name."
},
{
name: "The World",
keywords: ["Completion, Wholeness, Arrival, Integration"],
meaning: "A circle closes with grace. Honor how far your spirit has traveled."
}
];
const card = document.getElementById("tarotCard");
const button = document.getElementById("revealTarotBtn");
const result = document.getElementById("tarotResult");
const nameEl = document.getElementById("tarotName");
const keywordsEl = document.getElementById("tarotKeywords");
const meaningEl = document.getElementById("tarotMeaning");
const frontTitle = document.getElementById("frontTitle");
const today = new Date().toISOString().slice(0, 10);
const storageKey = "tarotDelDiaCard";
function typeText(element, text, speed) {
element.textContent = "";
let index = 0;
function write() {
if (index < text.length) {
element.textContent += text.charAt(index);
index++;
setTimeout(write, speed);
}
}
write();
}
function showCard(cardData, instant) {
frontTitle.textContent = cardData.name;
nameEl.textContent = cardData.name;
keywordsEl.textContent = cardData.keywords.join(" · ");
card.classList.add("revealed");
button.disabled = true;
button.textContent = "Card Revealed";
setTimeout(function () {
result.classList.add("visible");
if (instant) {
meaningEl.textContent = cardData.meaning;
} else {
typeText(meaningEl, cardData.meaning, 28);
}
}, instant ? 100 : 850);
}
function getSavedCard() {
try {
const saved = JSON.parse(localStorage.getItem(storageKey));
if (saved && saved.date === today && typeof saved.index === "number") {
return saved.index;
}
} catch (e) {}
return null;
}
function saveCard(index) {
localStorage.setItem(storageKey, JSON.stringify({
date: today,
index: index
}));
}
const savedIndex = getSavedCard();
if (savedIndex !== null && tarotData[savedIndex]) {
showCard(tarotData[savedIndex], true);
}
button.addEventListener("click", function () {
const existingIndex = getSavedCard();
if (existingIndex !== null && tarotData[existingIndex]) {
showCard(tarotData[existingIndex], false);
return;
}
const randomIndex = Math.floor(Math.random() * tarotData.length);
saveCard(randomIndex);
showCard(tarotData[randomIndex], false);
});
})();
</script>
</div>
<div id="tarot-day-widget">
<style>
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');
#tarot-day-widget {
background: #A781BE; <-- CAMBIA COLOR AQUÍ: Color de fondo principal
font-family: 'IM Fell English', serif;
color: #f7efff; <-- CAMBIA COLOR AQUÍ: Color del texto del título
text-align: center;
padding: 22px 14px;
border-radius: 18px;
box-sizing: border-box;
max-width: 260px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.28); <-- CAMBIA COLOR AQUÍ: Opacidad blanca para el borde
box-shadow: 0 10px 30px rgba(45, 20, 60, 0.25); <-- CAMBIA COLOR AQUÍ: Tono oscuro de la sombra
}
#tarot-day-widget h3 {
margin: 0 0 8px;
font-size: 27px;
font-weight: normal;
letter-spacing: 1px;
}
#tarot-day-widget .intro {
margin: 0 0 16px;
font-size: 15px;
color: #f2e6fb; <-- CAMBIA COLOR AQUÍ: Color de la introducción
opacity: 0.9;
}
.tarot-scene {
width: 125px;
height: 150px;
perspective: 900px;
margin: 0 auto 16px;
}
.tarot-card {
width: 125px;
height: 150px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease;
}
.tarot-card.revealed {
transform: rotateY(180deg);
}
.tarot-face {
position: absolute;
width: 125px;
height: 150px;
inset: 0;
backface-visibility: hidden;
border-radius: 12px;
background: linear-gradient(145deg, #7d5a91, #5f3f73); <-- CAMBIA COLOR AQUÍ: Degradado del reverso
border: 1px solid rgba(255,255,255,0.45); <-- CAMBIA COLOR AQUÍ: Color del borde de la carta
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.08),
inset 0 0 28px rgba(255,255,255,0.08),
0 8px 20px rgba(45,20,60,0.35); <-- CAMBIA COLOR AQUÍ: Color de la sombra de la carta
overflow: hidden;
}
.tarot-back:before,
.tarot-back:after,
.tarot-front:before,
.tarot-front:after {
content: "";
position: absolute;
border: 1px solid rgba(255,255,255,0.42); <-- CAMBIA COLOR AQUÍ: Color de los círculos decorativos
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tarot-back:before,
.tarot-front:before {
width: 72px;
height: 72px;
}
.tarot-back:after,
.tarot-front:after {
width: 44px;
height: 44px;
opacity: 0.65;
}
.card-line {
position: absolute;
background: rgba(255,255,255,0.42); <-- CAMBIA COLOR AQUÍ: Color de las líneas del marco
}
.line-top,
.line-bottom {
width: 78px;
height: 1px;
left: 23px;
}
.line-top { top: 18px; }
.line-bottom { bottom: 18px; }
.line-left,
.line-right {
width: 1px;
height: 96px;
top: 27px;
}
.line-left { left: 18px; }
.line-right { right: 18px; }
.css-star {
position: absolute;
width: 1px;
height: 18px;
background: rgba(255,255,255,0.78); <-- CAMBIA COLOR AQUÍ: Color de la estrella (eje vertical)
left: 62px;
top: 66px;
}
.css-star:before {
content: "";
position: absolute;
width: 18px;
height: 1px;
background: rgba(255,255,255,0.78); <-- CAMBIAR COLOR AQUÍ: Color de la estrella (eje horizontal)
left: -8.5px;
top: 8.5px;
}
.css-moon {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255,255,255,0.78); <-- CAMBIAR COLOR AQUÍ: Color de la luna
left: 50px;
top: 57px;
}
.css-moon:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: #6d4b80; <-- CAMBIAR COLOR AQUÍ: Debe ser igual al color predominante de la carta front
left: 8px;
top: -1px;
}
.corner-dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.55); <-- CAMBIAR COLOR AQUÍ: Color de los puntos de las esquinas
}
.dot-a { top: 12px; left: 12px; }
.dot-b { top: 12px; right: 12px; }
.dot-c { bottom: 12px; left: 12px; }
.dot-d { bottom: 12px; right: 12px; }
.tarot-front {
transform: rotateY(180deg);
background: linear-gradient(145deg, #6f4b82, #4d315f); <-- CAMBIAR COLOR AQUÍ: Degradado de la carta delantera
}
.front-title {
position: absolute;
width: 100%;
top: 104px;
left: 0;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
line-height: 1.1;
color: #fff7ff; <-- CAMBIAR COLOR AQUÍ: Color del texto dentro de la carta
letter-spacing: 0.4px;
}
.tarot-button {
font-family: 'IM Fell English', serif;
background: rgba(255,255,255,0.12); <-- CAMBIAR COLOR AQUÍ: Color de fondo del botón
color: #fff7ff; <-- CAMBIAR COLOR AQUÍ: Color del texto del botón
border: 1px solid rgba(255,255,255,0.52); <-- CAMBIAR COLOR AQUÍ: Color del borde del botón
border-radius: 999px;
padding: 8px 18px;
cursor: pointer;
font-size: 15px;
letter-spacing: 0.5px;
transition: all 0.25s ease;
}
.tarot-button:hover {
background: rgba(255,255,255,0.22); <-- CAMBIAR COLOR AQUÍ: Color del botón en hover
transform: translateY(-1px);
}
.tarot-button:disabled {
opacity: 0.55;
cursor: default;
transform: none;
}
.tarot-result {
margin-top: 15px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.tarot-result.visible {
opacity: 1;
transform: translateY(0);
}
.tarot-result h4 {
margin: 0 0 7px;
font-size: 22px;
font-weight: normal;
color: #fff9ff; <-- CAMBIAR COLOR AQUÍ: Color del nombre del resultado
}
.tarot-keywords {
margin: 0 0 9px;
font-size: 13px;
color: #eadcf4; <-- CAMBIAR COLOR AQUÍ: Color de las palabras clave
letter-spacing: 0.4px;
}
.tarot-meaning {
min-height: 38px;
margin: 0 auto;
font-size: 14px;
line-height: 1.35;
color: #f8efff; <-- CAMBIAR COLOR AQUÍ: Color del texto del significado
max-width: 215px;
}
</style>
<h3>Daily Tarot</h3>
<p class="intro">Reveal your card…</p>
<div class="tarot-scene">
<div class="tarot-card" id="tarotCard">
<div class="tarot-face tarot-back">
<span class="card-line line-top"></span>
<span class="card-line line-bottom"></span>
<span class="card-line line-left"></span>
<span class="card-line line-right"></span>
<span class="corner-dot dot-a"></span>
<span class="corner-dot dot-b"></span>
<span class="corner-dot dot-c"></span>
<span class="corner-dot dot-d"></span>
<span class="css-star"></span>
</div>
<div class="tarot-face tarot-front">
<span class="card-line line-top"></span>
<span class="card-line line-bottom"></span>
<span class="card-line line-left"></span>
<span class="card-line line-right"></span>
<span class="corner-dot dot-a"></span>
<span class="corner-dot dot-b"></span>
<span class="corner-dot dot-c"></span>
<span class="corner-dot dot-d"></span>
<span class="css-moon"></span>
<div class="front-title" id="frontTitle">Hidden Arcana</div>
</div>
</div>
</div>
<button class="tarot-button" id="revealTarotBtn">Reveal Card</button>
<div class="tarot-result" id="tarotResult">
<h4 id="tarotName"></h4>
<p class="tarot-keywords" id="tarotKeywords"></p>
<p class="tarot-meaning" id="tarotMeaning"></p>
</div>
<script>
(function () {
const tarotData = [
{
name: "The Fool",
keywords: ["Beginnings, Trust, Freedom, Threshold"],
meaning: "Step lightly into the unknown. Not every path needs proof before it begins."
},
{
name: "The Magician",
keywords: ["Will, Focus, Creation, Skill"],
meaning: "What you need is already near your hands. Shape intention into action."
},
{
name: "The High Priestess",
keywords: ["Intuition, Silence, Mystery, Knowing"],
meaning: "There is wisdom beneath the surface. Listen before you answer."
},
{
name: "The Empress",
keywords: ["Nurture, Beauty, Growth, Receiving"],
meaning: "Let what is tender be protected. Something grows when it is not rushed."
},
{
name: "The Emperor",
keywords: ["Structure, Authority, Order, Discipline"],
meaning: "A calm boundary can be an act of devotion. Build what can hold you."
},
{
name: "The Hierophant",
keywords: ["Tradition, Guidance, Ritual, Learning"],
meaning: "Return to what is sacred and steady. A lesson arrives through patience."
},
{
name: "The Lovers",
keywords: ["Choice, Union, Values, Devotion"],
meaning: "Choose from alignment, not fear. The heart knows when it is divided."
},
{
name: "The Chariot",
keywords: ["Direction, Victory, Control, Resolve"],
meaning: "Gather your will and move with purpose. Momentum follows inner command."
},
{
name: "Strength",
keywords: ["Courage, Grace, Patience, Compassion"],
meaning: "Softness is not weakness. Your gentleness may be the strongest force today."
},
{
name: "The Hermit",
keywords: ["Solitude, Reflection, Wisdom, Inner Light"],
meaning: "Withdraw without disappearing. The quiet path reveals what noise conceals."
},
{
name: "Wheel of Fortune",
keywords: ["Change, Cycles, Fate, Movement"],
meaning: "The wheel turns whether you resist or breathe. Meet change with open hands."
},
{
name: "Justice",
keywords: ["Truth, Balance, Clarity, Accountability"],
meaning: "Look clearly at what is fair. Truth asks for courage, not severity."
},
{
name: "The Hanged Man",
keywords: ["Pause, Surrender, Perspective, Release"],
meaning: "Do not force the door. A new view appears when you stop pushing."
},
{
name: "Death",
keywords: ["Ending, Renewal, Release, Transformation"],
meaning: "What falls away makes room for breath. Let the old skin loosen."
},
{
name: "Temperance",
keywords: ["Harmony, Healing, Moderation, Flow"],
meaning: "Blend slowly. The right balance is found through small, honest adjustments."
},
{
name: "The Devil",
keywords: ["Attachment, Shadow, Desire, Awareness"],
meaning: "Name what binds you without shame. Seeing the chain is the first loosening."
},
{
name: "The Tower",
keywords: ["Disruption, Truth, Awakening, Release"],
meaning: "What cannot stand may fall. Let revelation clear the false foundation."
},
{
name: "The Star",
keywords: ["Hope, Renewal, Faith, Stillness"],
meaning: "A softer light returns. Trust the quiet restoration already beginning."
},
{
name: "The Moon",
keywords: ["Dreams, Illusion, Instinct, Depth"],
meaning: "Not everything is meant to be clear tonight. Walk gently through uncertainty."
},
{
name: "The Sun",
keywords: ["Joy, Vitality, Clarity, Warmth"],
meaning: "Let yourself be seen without apology. Light reveals what fear once hid."
},
{
name: "Judgement",
keywords: ["Calling, Awakening, Return, Decision"],
meaning: "A deeper part of you is asking to be heard. Rise without carrying every old name."
},
{
name: "The World",
keywords: ["Completion, Wholeness, Arrival, Integration"],
meaning: "A circle closes with grace. Honor how far your spirit has traveled."
}
];
const card = document.getElementById("tarotCard");
const button = document.getElementById("revealTarotBtn");
const result = document.getElementById("tarotResult");
const nameEl = document.getElementById("tarotName");
const keywordsEl = document.getElementById("tarotKeywords");
const meaningEl = document.getElementById("tarotMeaning");
const frontTitle = document.getElementById("frontTitle");
const today = new Date().toISOString().slice(0, 10);
const storageKey = "tarotDelDiaCard";
function typeText(element, text, speed) {
element.textContent = "";
let index = 0;
function write() {
if (index < text.length) {
element.textContent += text.charAt(index);
index++;
setTimeout(write, speed);
}
}
write();
}
function showCard(cardData, instant) {
frontTitle.textContent = cardData.name;
nameEl.textContent = cardData.name;
keywordsEl.textContent = cardData.keywords.join(" · ");
card.classList.add("revealed");
button.disabled = true;
button.textContent = "Card Revealed";
setTimeout(function () {
result.classList.add("visible");
if (instant) {
meaningEl.textContent = cardData.meaning;
} else {
typeText(meaningEl, cardData.meaning, 28);
}
}, instant ? 100 : 850);
}
function getSavedCard() {
try {
const saved = JSON.parse(localStorage.getItem(storageKey));
if (saved && saved.date === today && typeof saved.index === "number") {
return saved.index;
}
} catch (e) {}
return null;
}
function saveCard(index) {
localStorage.setItem(storageKey, JSON.stringify({
date: today,
index: index
}));
}
const savedIndex = getSavedCard();
if (savedIndex !== null && tarotData[savedIndex]) {
showCard(tarotData[savedIndex], true);
}
button.addEventListener("click", function () {
const existingIndex = getSavedCard();
if (existingIndex !== null && tarotData[existingIndex]) {
showCard(tarotData[existingIndex], false);
return;
}
const randomIndex = Math.floor(Math.random() * tarotData.length);
saveCard(randomIndex);
showCard(tarotData[randomIndex], false);
});
})();
</script>
</div>
Lamentablemente, deben borrar las aclaraciones que dejé al lado de lo que deben modificar, porque si no, el código no funcionará. Una vez hayas modificado y borrado las aclaraciones, guarda los cambios y listo.
¡Y eso es todo! Espero que este tutorial les sea útil. Si terminas agregando el gadget a tu blog, me encantaría verlo. 👀
¡Y eso es todo! Espero que este tutorial les sea útil. Si terminas agregando el gadget a tu blog, me encantaría verlo. 👀
No comments:
Post a Comment