⟡˖°. Sugar Moon Blog ⏾

Codes for your blog <3

Hello! I decided to make a codes page for anyone who'd like to add the same widgets I have here, to their blog! Just copy and paste whichever widget you'd like to add and paste it into the HTML/Java Script located under the "add gadget" to your sidebars. You can edit any of these codes to customize them to your liking.

Hope you enjoy! x0x0

Moon Fortunes 🔮

</div>

✧ ask the moon what awaits you ✧

</div>

Choose a token below...

</div>

<div class="moon-fortune-tab"

onclick="openMoonFortune(' The moon has misplaced a secret, and somehow you are going to find it. Keep your eyes open for something delightfully strange. ☾')">

☾ Moon

</div>

<div class="moon-fortune-tab"

onclick="openMoonFortune(' A little star has fallen into your pocket. Spend its luck wisely… or on something unnecessarily cute. ✦')">

✦ Star

</div>

<div class="moon-fortune-tab"

onclick="openMoonFortune('A raven carries good news in its beak. Someone will soon say something that makes you smile when you least expect it. 🖤')">

♣ Raven

</div>

<div class="moon-fortune-tab"

onclick="openMoonFortune('Beware the hour after midnight — you may suddenly become inspired to create something wonderfully strange. Keep paper nearby. ✧')">

☽ Midnight

</div>

<div class="moon-fortune-tab"

onclick="openMoonFortune('Your wish is wandering toward you at a leisurely pace. It stopped for pastries along the way ʚ𖦹ɞ')">

❧ Wish

</div>

<div class="moon-fortune-tab"

onclick="openMoonFortune('A little bit of luck has been hiding in plain sight. Look in an unexpected place — the universe enjoys leaving clues where you least expect them. 🔑')">

⚿ Key

</div>

☾ ─── ✦ ─── ☽

</div>

<button

class="moon-fortune-reset"

onclick="resetMoonFortune()">

Return to the Moon

</button

></div>

<style>

/* =========================================

FORTUNES FROM THE MOON

Dark Academia Fortune Widget

========================================= */

/* MAIN CARD */

.moon-fortune-widget {

width: 250px;

height: 235px;

padding: 12px;

margin: 0 auto;

box-sizing: border-box;

background:

radial-gradient(

circle at top,

rgba(118, 65, 78, 0.25),

transparent 45%

#21171a;

border: 1px solid #8c6a4b;

outline: 1px solid #21171a;

outline-offset: -5px;

border-radius: 2px;

box-shadow:

5px 5px 0 rgba(35, 20, 22, 0.45),

inset 0 0 20px rgba(0,0,0,0.45);

text-align: center;

font-family:

Georgia,

"Times New Roman",

serif;

color: #d8c3a5;

}

/* STARS ABOVE TITLE */

.moon-fortune-stars {

color: #c7a66b;

font-size: 12px;

letter-spacing: 4px;

line-height: 12px;

margin-bottom: 3px;

}

/* TITLE */

.moon-fortune-title {

font-size: 12px;

letter-spacing: 1.3px;

font-weight: bold;

color: #d8bd8a;

text-shadow:

1px 1px 0 #100b0c;

line-height: 14px;

}

/* LITTLE SUBTITLE */

.moon-fortune-subtitle {

margin-top: 3px;

margin-bottom: 7px;

font-size: 7.5px;

font-style: italic;

letter-spacing: 0.6px;

color: #9e8979;

}

/* FORTUNE DISPLAY */

.moon-fortune-box {

height: 61px;

width: 100%;

box-sizing: border-box;

padding: 7px;

display: flex;

align-items: center;

justify-content: center;

background:

linear-gradient(

rgba(235,220,190,0.04),

rgba(235,220,190,0.04)

#2b2020;

border: 1px solid #705541;

color: #d7c7ad;

font-size: 9px;

line-height: 1.35;

font-style: italic;

box-shadow:

inset 0 0 12px rgba(0,0,0,0.5);

transition:

opacity 0.25s ease;

text-align: center;

}

/* BUTTON GRID */

.moon-fortune-grid {

display: grid;

grid-template-columns:

1fr 1fr;

gap: 4px;

margin-top: 7px;

}

/* BUTTONS */

.moon-fortune-tab {

height: 23px;

display: flex;

align-items: center;

justify-content: center;

box-sizing: border-box;

background:

linear-gradient(

to bottom,

#4a292f,

#321d22

);

border: 1px solid #765542;

color: #d5bd96;

font-size: 8px;

letter-spacing: 0.3px;

cursor: pointer;

user-select: none;

transition:

background 0.2s ease,

color 0.2s ease,

transform 0.15s ease;

box-shadow:

inset 0 0 6px rgba(0,0,0,0.4);

}

/* BUTTON HOVER */

.moon-fortune-tab:hover {

background:

linear-gradient(

to bottom,

#60353d,

#402329

);

color: #ead5ad;

border-color: #a2815b;

}

/* BUTTON CLICK */

.moon-fortune-tab:active {

transform:

scale(0.96);

}

/* DECORATIVE DIVIDER */

.moon-fortune-divider {

margin-top: 6px;

margin-bottom: 5px;

color: #8d6b4c;

font-size: 8px;

letter-spacing: 1px;

}

/* RESET BUTTON */

.moon-fortune-reset {

width: 100%;

height: 20px;

padding: 2px;

box-sizing: border-box;

font-family:

Georgia,

"Times New Roman",

serif;

font-size: 7.5px;

font-style: italic;

letter-spacing: 0.5px;

color: #aa9278;

background: #1a1214;

border: 1px solid #574236;

cursor: pointer;

transition: 0.2s ease;

}

/* RESET HOVER */

.moon-fortune-reset:hover {

color: #d6bd91;

border-color: #87694d;

background: #24191c;

}

/* =========================================

FORTUNE FADE ANIMATION

========================================= */

.moon-fortune-box {

transition:

opacity 0.2s ease;

}

</style>

function openMoonFortune(txt) {

const screen =

document.getElementById(

"moon-fortune-screen"

);

screen.style.opacity = "0";

setTimeout(function() {

screen.innerText = txt;

screen.style.opacity = "1";

}, 180);

}

function resetMoonFortune() {

const screen =

document.getElementById(

"moon-fortune-screen"

);

screen.style.opacity = "0";

setTimeout(function() {

screen.innerText =

"Choose a moon token below...";

screen.style.opacity = "1";

}, 180);

}

</script>

Crystal Cabinet

</div>

let the crystal find you .☘︎ ݁˖

</div>

𖦹

press the button<br />

and see what you get!

𖦹<br />

</div>

<button

class="crystal-pick-button"

onclick="pickCrystal()">

Draw

</button

></div>

<style>

/* ==========================================

PICK A CRYSTAL

Soft Dark Blog Style

========================================== */

.crystal-picker {

width: 255px;

padding: 16px;

margin: 0 auto;

box-sizing: border-box;

background:

radial-gradient(

circle at 50% 0%,

rgba(91, 57, 82, 0.35),

transparent 55%

#171219;

border: 1px solid #463744;

border-radius: 24px;

box-shadow:

0 8px 25px rgba(0,0,0,0.45),

inset 0 1px 0 rgba(255,255,255,0.04);

text-align: center;

font-family:

"Trebuchet MS",

Arial,

sans-serif;

color: #d3c7d1;

}

/* TOP SPARKLE */

.crystal-mini-icon {

width: 25px;

height: 25px;

margin: 0 auto 5px auto;

display: flex;

align-items: center;

justify-content: center;

background: #28202b;

border: 1px solid #514252;

border-radius: 50%;

color: #c8a8c5;

font-size: 10px;

}

/* TITLE */

.crystal-heading {

font-size: 14px;

font-weight: bold;

letter-spacing: 0.5px;

color: #e0d4df;

}

/* SUBTITLE */

.crystal-little-note {

margin-top: 4px;

margin-bottom: 11px;

font-size: 8px;

color: #8f7f8e;

}

/* RESULT AREA */

.crystal-result {

height: 92px;

padding: 10px;

box-sizing: border-box;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

background:

linear-gradient(

145deg,

rgba(117,78,110,0.12),

rgba(22,17,25,0.5)

#201923;

border: 1px solid #493b4b;

border-radius: 18px;

box-shadow:

inset 0 3px 12px rgba(0,0,0,0.35);

transition:

opacity 0.25s ease,

transform 0.25s ease;

}

/* INITIAL TEXT */

.crystal-question {

font-size: 8px;

line-height: 1.55;

color: #817381;

}

/* CRYSTAL NAME */

.crystal-name {

font-size: 16px;

font-weight: bold;

letter-spacing: 0.5px;

color: #e0c9dc;

}

/* DESCRIPTION */

.crystal-description {

max-width: 165px;

margin-top: 7px;

font-size: 10px;

line-height: 1.4;

color: #9b8999;

}

/* BUTTON */

.crystal-pick-button {

width: 100%;

height: 34px;

margin-top: 10px;

border: none;

border-radius: 999px;

background:

linear-gradient(

135deg,

#5a3b58,

#3b293c

);

color: #eaddeb;

font-family:

"Trebuchet MS",

Arial,

sans-serif;

font-size: 9px;

font-weight: bold;

letter-spacing: 0.4px;

cursor: pointer;

box-shadow:

0 4px 10px rgba(0,0,0,0.3);

transition:

transform 0.2s ease,

box-shadow 0.2s ease,

filter 0.2s ease;

}

/* BUTTON HOVER */

.crystal-pick-button:hover {

filter: brightness(1.18);

transform:

translateY(-1px);

box-shadow:

0 6px 13px rgba(0,0,0,0.4);

}

/* BUTTON PRESS */

.crystal-pick-button:active {

transform:

scale(0.96);

}

/* BOTTOM DECORATION */

.crystal-bottom {

margin-top: 10px;

font-size: 9px;

letter-spacing: 2px;

color: #725f70;

}

/* RESULT ANIMATION */

.crystal-result.crystal-change {

transform:

scale(0.97);

}

</style>

const crystals = [

{

description:

"Calm, intuition & spiritual clarity. Traditionally associated with peaceful energy, protection, meditation, and clearing mental clutter."

{

description:

"Intuition, new beginnings & emotional balance. Connected with lunar energy, cycles, inner wisdom, and gentle transformation."

{

description:

"Love, compassion & emotional healing. Traditionally associated with tenderness, self-love, harmony, and peaceful relationships."

{

description:

"Protection, grounding & truth. A deeply grounding stone traditionally used for energetic protection, reflection, and releasing negativity."

{

description:

"Joy, abundance & confidence. Associated with optimism, motivation, creativity, prosperity, and bright uplifting energy."

{

description:

"Transformation, intuition & protection. Known for its mystical associations with inner wisdom, change, imagination, and spiritual awareness."

{

description:

"Grounding, stability & release. Traditionally associated with absorbing negativity, emotional grounding, calmness, and letting go."

{

description:

"Clarity, focus & organization. Connected with concentration, mental clarity, decision-making, and bringing scattered thoughts into order."

{

description:

"Courage, creativity & motivation. Traditionally associated with passion, confidence, vitality, inspiration, and taking action.'"

{

description:

"Wisdom, truth & communication. Associated with self-expression, inner knowledge, honesty, intuition, and intellectual clarity."

{

description:

"Protection, grounding & boundaries. Traditionally regarded as a protective stone associated with stability, balance, and shielding from negative energy."

{

description:

"Clarity, intention & amplification. Often called a versatile or “master” crystal, traditionally associated with cleansing, focus, intention, and amplifying energy."

}

];

function pickCrystal() {

const result =

document.getElementById(

"crystal-result"

);

const random =

crystals[

Math.floor(

Math.random() *

crystals.length

)

];

result.classList.add(

"crystal-change"

);

result.style.opacity = "0";

setTimeout(function() {

result.innerHTML =

'<div class="crystal-name">' +

random.name +

'</div>' +

'<div class="crystal-description">' +

random.description +

'</div>';

result.style.opacity = "1";

setTimeout(function() {

result.classList.remove(

"crystal-change"

);

}, 250);

}, 180);

}

</script>

Ask the crystal...

</div>

</div>

<style>

/* =====================================

OUTSIDE — COMPLETELY TRANSPARENT

===================================== */

#sugar-moon-crystal-ball {

width: 100%;

display: flex;

justify-content: center;

align-items: center;

background: transparent !important;

padding: 25px 0;

}

/* =====================================

CRYSTAL BALL

===================================== */

.crystal-ball {

position: relative;

width: 200px;

height: 200px;

border-radius: 50%;

overflow: hidden;

cursor: pointer;

background:

/* bright glass reflection */

radial-gradient(

circle at 29% 22%,

rgba(255,255,255,.58) 0%,

rgba(255,255,255,.20) 5%,

rgba(255,255,255,.05) 15%,

transparent 28%

/* purple center */

radial-gradient(

circle at 58% 58%,

rgba(178,70,255,.95) 0%,

rgba(115,25,170,.95) 38%,

rgba(55,8,90,1) 72%,

rgba(22,3,38,1) 100%

);

box-shadow:

0 0 12px rgba(220,150,255,.95),

0 0 30px rgba(180,80,255,.85),

0 0 65px rgba(135,35,220,.65),

0 0 110px rgba(100,20,170,.35),

inset 12px 12px 28px rgba(255,255,255,.20),

inset -22px -25px 45px rgba(0,0,0,.55);

transition:

transform .4s ease,

box-shadow .4s ease;

}

/* Hover */

.crystal-ball:hover {

transform: scale(1.045);

box-shadow:

0 0 18px rgba(235,180,255,1),

0 0 40px rgba(195,100,255,.95),

0 0 80px rgba(150,50,240,.75),

0 0 120px rgba(100,25,190,.4),

inset 12px 12px 28px rgba(255,255,255,.25),

inset -22px -25px 45px rgba(0,0,0,.55);

}

/* =====================================

INNER MAGICAL GLOW

===================================== */

.inner-glow {

position: absolute;

width: 150px;

height: 150px;

left: 50%;

top: 52%;

transform: translate(-50%, -50%);

border-radius: 50%;

background:

radial-gradient(

circle,

rgba(255,255,255,.16) 0%,

rgba(220,120,255,.14) 22%,

rgba(150,50,220,.10) 45%,

transparent 72%

);

filter: blur(10px);

animation: innerPulse 5s infinite ease-in-out;

pointer-events: none;

}

@keyframes innerPulse {

0%, 100% {

opacity: .65;

transform: translate(-50%, -50%) scale(.95);

}

50% {

opacity: 1;

transform: translate(-50%, -50%) scale(1.08);

}

/* =====================================

SWIRLING MIST

===================================== */

.mist {

position: absolute;

border-radius: 50%;

pointer-events: none;

filter: blur(9px);

opacity: .38;

}

/* Mist 1 */

.mist-one {

width: 150px;

height: 20px;

left: -15px;

top: 105px;

background:

radial-gradient(

ellipse,

rgba(239,190,255,.55),

rgba(166,67,240,.15),

transparent 70%

);

transform: rotate(-18deg);

animation: mistMoveOne 7s infinite ease-in-out;

}

/* Mist 2 */

.mist-two {

width: 210px;

height: 70px;

right: -35px;

top: 145px;

background:

radial-gradient(

ellipse,

rgba(207,135,255,.45),

rgba(110,25,180,.15),

transparent 70%

);

transform: rotate(22deg);

animation: mistMoveTwo 9s infinite ease-in-out;

}

/* Mist 3 */

.mist-three {

width: 170px;

height: 55px;

left: 55px;

bottom: 40px;

background:

radial-gradient(

ellipse,

rgba(255,215,255,.35),

transparent 70%

);

transform: rotate(-8deg);

animation: mistMoveThree 8s infinite ease-in-out;

}

@keyframes mistMoveOne {

0%, 100% {

transform: translateX(-12px) rotate(-18deg);

}

50% {

transform: translateX(30px) rotate(-5deg);

}

@keyframes mistMoveTwo {

0%, 100% {

transform: translateX(20px) rotate(22deg);

}

50% {

transform: translateX(-30px) rotate(8deg);

}

@keyframes mistMoveThree {

0%, 100% {

transform: translateX(15px) rotate(-8deg);

}

50% {

transform: translateX(-25px) rotate(8deg);

}

/* =====================================

FORTUNE

===================================== */

.fortune-text {

position: absolute;

width: 67%;

left: 16.5%;

top: 50%;

transform: translateY(-50%);

text-align: center;

color: #fff8ff;

font-family:

Georgia,

"Times New Roman",

serif;

font-size: 15px;

line-height: 1.4;

letter-spacing: .2px;

text-shadow:

0 0 4px white,

0 0 10px #e5b5ff,

0 0 20px #ad55ff,

0 0 30px rgba(180,70,255,.8);

z-index: 20;

pointer-events: none;

transition:

opacity .35s ease,

transform .35s ease;

}

/* =====================================

GLASS REFLECTION

===================================== */

.glass-shine {

position: absolute;

width: 90px;

height: 120px;

top: 22px;

left: 38px;

border-radius: 50%;

background:

linear-gradient(

135deg,

rgba(255,255,255,.50),

rgba(255,255,255,.18) 30%,

rgba(255,255,255,.04) 55%,

transparent 75%

);

transform: rotate(-27deg);

filter: blur(1px);

opacity: .72;

z-index: 25;

pointer-events: none;

}

/* Smaller reflection */

.small-shine {

position: absolute;

width: 30px;

height: 55px;

top: 38px;

left: 110px;

border-radius: 50%;

background: rgba(255,255,255,.35);

transform: rotate(-28deg);

filter: blur(3px);

opacity: .55;

z-index: 26;

pointer-events: none;

}

/* =====================================

STARS

===================================== */

.star {

position: absolute;

color: rgba(255,240,255,.9);

text-shadow:

0 0 5px white,

0 0 12px #d98cff,

0 0 20px #a43dff;

z-index: 12;

pointer-events: none;

animation: starTwinkle 3s infinite ease-in-out;

}

.star-one {

top: 80px;

right: 70px;

font-size: 14px;

}

.star-two {

top: 110px;

left: 65px;

font-size: 11px;

animation-delay: .7s;

}

.star-three {

top: 150px;

right: 58px;

font-size: 17px;

animation-delay: 1.4s;

}

.star-four {

bottom: 78px;

left: 78px;

font-size: 12px;

animation-delay: 2s;

}

.star-five {

bottom: 55px;

right: 85px;

font-size: 10px;

animation-delay: 1s;

}

.star-six {

top: 170px;

left: 53px;

font-size: 8px;

animation-delay: 2.3s;

}

@keyframes starTwinkle {

0%, 100% {

opacity: .25;

transform: scale(.6);

}

50% {

opacity: 1;

transform: scale(1.35);

}

/* =====================================

LARGE SPARKLES

===================================== */

.sparkle {

position: absolute;

color: white;

z-index: 30;

pointer-events: none;

text-shadow:

0 0 5px white,

0 0 12px #e8b8ff,

0 0 25px #b84dff;

animation: sparkleGlow 2.8s infinite ease-in-out;

}

.sparkle-one {

top: 48px;

right: 48px;

font-size: 20px;

}

.sparkle-two {

bottom: 70px;

left: 42px;

font-size: 15px;

animation-delay: 1.2s;

}

.sparkle-three {

top: 105px;

left: 43px;

font-size: 10px;

animation-delay: 2s;

}

@keyframes sparkleGlow {

0%, 100% {

opacity: .2;

transform:

scale(.6)

rotate(0deg);

}

50% {

opacity: 1;

transform:

scale(1.35)

rotate(20deg);

}

/* =====================================

MOBILE

===================================== */

@media (max-width: 600px) {

.crystal-ball {

width: 230px;

height: 230px;

}

.fortune-text {

font-size: 16px;

}

</style>

const fortunes = [

"Something beautiful is coming your way...",

"Trust your intuition.",

"A secret will soon be revealed.",

"Your next chapter will surprise you.",

"Someone is thinking about you.",

"Follow the path that feels right.",

"Good fortune is closer than you think.",

"A wish you made long ago is beginning to unfold.",

"The answer you seek is already within you.",

"An unexpected opportunity is approaching.",

"Let go of what no longer serves you.",

"Your patience will soon be rewarded.",

"A new beginning is waiting for you.",

"The universe is nudging you forward.",

"Something magical is about to happen.",

"Listen carefully to your dreams.",

"A change is coming — and it will be for the better.",

"You are closer to your goal than you realize.",

"Someone from your past may return.",

"Tonight, pay attention to the signs.",

"Your intuition already knows the answer.",

"A little mystery will soon become clear.",

"The stars are pointing you toward something new.",

"An unexpected moment may become a beautiful memory."

];

const crystalBall =

document.querySelector(".crystal-ball");

const fortuneText =

document.getElementById("fortuneText");

crystalBall.addEventListener("click", function() {

fortuneText.style.opacity = "0";

fortuneText.style.transform =

"translateY(-50%) scale(.7)";

setTimeout(function() {

const randomFortune =

fortunes[

Math.floor(

Math.random() * fortunes.length

)

];

fortuneText.textContent =

randomFortune;

fortuneText.style.opacity = "1";

fortuneText.style.transform =

"translateY(-50%) scale(1)";

}, 350);

});

</script>

<div id="halloftarot-tarot-widget"

data-bg="#312002"

data-color="#fff4e5">

</div>

⟡˖°. Sugar Moon Blog ⏾

Pages

Wednesday, August 12, 2026

Women need to support women

Translate