Copy and customize your own crystal ball!
Copy the code below and follow steps on the ' code tutorial ' page to add to your blog! Best placement for widget is in one of the side bars :)
To change crystal ball colors :
Example:
.crystal-ball-widget-wrapper {
--widget-accent-purple: #8a2be2;
--widget-accent-pink: #ff007f;
--widget-text-main: #f3f0ff;
To change the colors replace numbers after the pound/hashtag symbol with the HTML color code of your choice.
________________________________________
To change the fortunes:
Scroll down until you reach :
<script>
(function() {
const fortunes = [
"A mysterious stranger will bring unexpected inspiration to your week.",
"An unexpected financial breakthrough is closer than you think.",
"Trust your intuition tonight; your subconscious knows the right path.",
"The obstacle you are currently facing is a hidden blessing in disguise.",
"A long-awaited message will soon find its way to you.",
"Adventure awaits you if you step slightly outside your comfort zone.",
"Do not rush the process. Great things take time to align perfectly.",
"Your energy is attracting positive changes; maintain your focus.",
"An old passion will resurface and bring immense joy back into your life.",
"A creative solution to a tricky situation will flash into your mind soon."
];
From here all you have to do is change the quote/message within the quotation marks!
________________________________________
Copy & Paste the following:
<div class="crystal-ball-widget-wrapper">
<style>
.crystal-ball-widget-wrapper {
--widget-accent-purple: #8a2be2;
--widget-accent-pink: #ff007f;
--widget-text-main: #f3f0ff;
margin: 10px auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent; /* Made transparent to show your site's wallpaper */
font-family: 'Merriweather', serif;
max-width: 320px;
box-sizing: border-box;
}
.crystal-ball-widget-wrapper .widget-container {
background: transparent;
border: none;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
}
/* Crystal Ball Container */
.crystal-ball-widget-wrapper .ball-outer-container {
position: relative;
width: 140px;
height: 140px;
margin: 0 auto 25px auto;
cursor: pointer;
}
.crystal-ball-widget-wrapper .crystal-ball {
width: 120px;
height: 120px;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #b176f5 30%, #4a0e8f 70%, #170231 100%);
border-radius: 50%;
position: relative;
margin: 0 auto;
box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 -10px 20px rgba(0, 0, 0, 0.7), inset 0 10px 20px rgba(255, 255, 255, 0.4);
transition: transform 0.2s ease, box-shadow 0.3s ease;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.crystal-ball-widget-wrapper .crystal-ball::after {
content: '';
position: absolute;
top: 10%;
left: 15%;
width: 25px;
height: 15px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
transform: rotate(-30deg);
filter: blur(1px);
z-index: 3;
pointer-events: none;
}
/* Inner Fortune Text Styling */
.crystal-ball-widget-wrapper .fortune-text {
color: var(--widget-text-main);
font-size: 11px;
line-height: 1.4;
text-align: center;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(138, 43, 226, 0.8);
z-index: 4;
transition: opacity 0.3s ease;
user-select: none;
}
/* Glow Effect Overlay */
.crystal-ball-widget-wrapper .ball-glow {
position: absolute;
top: 0;
left: 10px;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 0, 127, 0.4) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
pointer-events: none;
}
/* Stand/Base */
.crystal-ball-widget-wrapper .ball-base {
width: 80px;
height: 18px;
background: linear-gradient(to right, #2c2541 0%, #463b63 50%, #2c2541 100%);
margin: -10px auto 0 auto;
border-radius: 4px / 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
position: relative;
z-index: 1;
border-bottom: 3px solid #1a1529;
}
/* Spin/Shake Animation */
.crystal-ball-widget-wrapper .spinning {
animation: spinBall 0.5s ease-in-out infinite alternate;
box-shadow: 0 0 45px rgba(255, 0, 127, 0.7), inset 0 -10px 20px rgba(0, 0, 0, 0.7);
}
@keyframes spinBall {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -1px) rotate(-1deg); }
20% { transform: translate(-2px, 0px) rotate(1deg); }
30% { transform: translate(0px, 1px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 1px) rotate(-1deg); }
60% { transform: translate(-2px, 1px) rotate(0deg); }
70% { transform: translate(1px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 1px) rotate(0deg); }
100% { transform: translate(1px, -1px) rotate(-1deg); }
}
/* Minimalist Action Button */
.crystal-ball-widget-wrapper .action-btn {
background: linear-gradient(135deg, var(--widget-accent-purple) 0%, #561ba3 100%);
border: none;
color: white;
padding: 10px 20px;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
transition: all 0.3s ease;
width: 100%;
max-width: 160px;
outline: none; }
.crystal-ball-widget-wrapper .action-btn:hover {
background: linear-gradient(135deg, #a044ff 0%, var(--widget-accent-purple) 100%);
box-shadow: 0 6px 18px rgba(138, 43, 226, 0.6);
transform: translateY(-2px); }
.crystal-ball-widget-wrapper .action-btn:active {
transform: translateY(1px); }
.crystal-ball-widget-wrapper .action-btn:disabled {
background: #3a3352;
color: #726a8f;
box-shadow: none;
cursor: not-allowed; }
</style>
<div class="widget-container">
<div class="ball-outer-container" id="ball-trigger">
<div class="crystal-ball" id="crystal-ball">
<div class="fortune-text" id="fortune-display">I’ve brought you a gift…it’s a crystal...</div>
</div>
<div class="ball-glow" id="ball-glow"></div>
<div class="ball-base"></div>
</div>
<button class="action-btn" id="predict-btn">click for your fortune</button>
</div>
<script>
(function() {
const fortunes = [
"A mysterious stranger will bring unexpected inspiration to your week.",
"An unexpected financial breakthrough is closer than you think.",
"Trust your intuition tonight; your subconscious knows the right path.",
"The obstacle you are currently facing is a hidden blessing in disguise.",
"A long-awaited message will soon find its way to you.",
"Adventure awaits you if you step slightly outside your comfort zone.",
"Do not rush the process. Great things take time to align perfectly.",
"Your energy is attracting positive changes; maintain your focus.",
"An old passion will resurface and bring immense joy back into your life.",
"A creative solution to a tricky situation will flash into your mind soon." ];
const wrapper = document.querySelector('.crystal-ball-widget-wrapper');
const ballTrigger = wrapper.querySelector('#ball-trigger');
const crystalBall = wrapper.querySelector('#crystal-ball');
const ballGlow = wrapper.querySelector('#ball-glow');
const fortuneDisplay = wrapper.querySelector('#fortune-display');
const predictBtn = wrapper.querySelector('#predict-btn');
let isPredicting = false;
function getFortune() {
if (isPredicting) return;
isPredicting = true;
predictBtn.disabled = true;
fortuneDisplay.style.opacity = '0.2';
crystalBall.classList.add('spinning');
ballGlow.style.opacity = '1';
setTimeout(() => {
crystalBall.classList.remove('spinning');
ballGlow.style.opacity = '0';
const randomIndex = Math.floor(Math.random() * fortunes.length);
const selectedFortune = fortunes[randomIndex];
fortuneDisplay.innerText = selectedFortune;
fortuneDisplay.style.opacity = '1';
predictBtn.disabled = false;
isPredicting = false;
}, 1200); }
ballTrigger.addEventListener('click', getFortune);
predictBtn.addEventListener('click', getFortune);
})();
</script>
</div>
End of code
No comments:
Post a Comment