<style>
.horoscope-gadget {
max-width: 320px;
margin: 15px auto;
background: linear-gradient(180deg, #2e053f 0%, #1a0028 100%);
color: #f0e6ff;
border: 4px solid #ffd700;
border-radius: 20px;
padding: 18px 15px;
box-shadow:
0 0 25px rgba(255, 215, 0, 0.6),
inset 0 0 30px rgba(255, 215, 0, 0.2);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow: hidden;
position: relative;
}
.header {
position: relative;
text-align: center;
padding: 12px 0 8px;
margin-bottom: 12px;
height: 92px;
overflow: hidden;
}
.header h1 {
font-size: 29px;
margin: 0 0 4px;
color: #ffd700;
text-shadow:
0 0 12px #ffd700,
0 0 20px rgba(255, 215, 0, 0.7);
letter-spacing: 1px;
}
.header p {
font-size: 14px;
margin: 0;
color: #e8d5ff;
font-weight: 500;
opacity: 0.95;
}
.star {
position: absolute;
color: #ffd700;
text-shadow: 0 0 10px #ffd700;
animation: twinkle 1.8s ease-in-out infinite alternate;
pointer-events: none;
z-index: 1;
}
@keyframes twinkle {
from { opacity: 0.4; transform: scale(0.8); }
to { opacity: 1; transform: scale(1.15); }
}
.tabs {
display: flex;
background: rgba(255,255,255,0.12);
border-radius: 50px;
padding: 6px;
margin-bottom: 18px;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.tabs button {
flex: 1;
padding: 10px 0;
background: transparent;
border: none;
color: #f0e6ff;
font-size: 15px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
.tabs button.active {
background: linear-gradient(90deg, #ffd700, #ffeb99);
color: #2e053f;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
}
.sign-selector {
overflow-x: auto;
white-space: nowrap;
padding: 8px 0 12px;
margin-bottom: 10px;
scrollbar-width: none;
}
.sign-selector::-webkit-scrollbar {
display: none;
}
.sign-card {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 64px;
margin-right: 10px;
padding: 8px 4px;
background: rgba(255, 215, 0, 0.12);
border-radius: 14px;
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.sign-card:hover {
transform: translateY(-3px) scale(1.08);
background: rgba(255, 215, 0, 0.25);
}
.sign-card.active {
border-color: #ffd700;
background: rgba(255, 215, 0, 0.3);
box-shadow: 0 0 15px #ffd700;
}
.sign-card .symbol {
font-size: 36px;
line-height: 1;
margin-bottom: 3px;
filter: drop-shadow(0 0 8px #ffd700);
}
.sign-card .name {
font-size: 12px;
font-weight: 700;
color: #ffd700;
text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
.main-content {
background: rgba(255,255,255,0.08);
border-radius: 16px;
padding: 22px 18px;
text-align: center;
min-height: 240px;
box-shadow: inset 0 3px 12px rgba(0,0,0,0.2);
}
.selected-sign {
margin-bottom: 18px;
}
#big-symbol {
font-size: 78px;
display: block;
line-height: 1;
margin-bottom: 6px;
filter: drop-shadow(0 0 18px #ffd700);
}
#sign-name {
font-size: 26px;
margin: 0;
color: #ffd700;
font-weight: 700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
#prediction {
font-size: 15.5px;
line-height: 1.65;
text-align: left;
color: #f0e6ff;
min-height: 140px;
}
.footer {
text-align: center;
margin-top: 18px;
font-size: 12px;
color: #ffd700;
opacity: 0.85;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.footer span {
font-size: 16px;
}
</style>
<div class="horoscope-gadget" id="horoscope-gadget">
<!-- Header with twinkling stars -->
<div class="header" id="header">
<h1>🌙 राशिफल</h1>
<p>मेष से मीन तक • सुंदर ज्योतिष</p>
</div>
<!-- 4 Tabs -->
<div class="tabs" id="tabs">
<button class="active" data-tab="today">आज</button>
<button data-tab="tomorrow">कल</button>
<button data-tab="weekly">साप्ताहिक</button>
<button data-tab="monthly">मासिक</button>
</div>
<!-- Zodiac signs horizontal scroll -->
<div class="sign-selector" id="sign-selector">
<!-- Cards will be added by JS -->
</div>
<!-- Main display area -->
<div class="main-content">
<div class="selected-sign">
<span id="big-symbol"></span>
<h2 id="sign-name"></h2>
</div>
<div id="prediction"></div>
</div>
<!-- Footer -->
<div class="footer">
✨ बिना इंटरनेट के काम करता है • Built-in Data
</div>
</div>
<script>
// ================================================
// 12 राशियाँ — Built-in Hindi Data (offline)
// ================================================
const signs = [
{
id: "mesha",
name: "मेष",
symbol: "♈",
predictions: {
today: "आज आपका दिन ऊर्जा और उत्साह से भरा रहेगा। करियर में नए अवसर मिल सकते हैं। प्रेम में मधुरता आएगी और स्वास्थ्य अच्छा रहेगा।",
tomorrow: "कल परिवार का सहयोग मिलेगा। छोटी यात्रा फायदेमंद साबित होगी। स्वास्थ्य का ध्यान रखें।",
weekly: "इस सप्ताह आर्थिक स्थिति मजबूत रहेगी। नौकरी या व्यवसाय में अच्छी प्रगति होगी।",
monthly: "महीने भर लक्ष्य पूरे होंगे। रिश्तों में गहराई आएगी और आर्थिक लाभ अच्छा रहेगा।"
}
},
{
id: "vrishabha",
name: "वृषभ",
symbol: "♉",
predictions: {
today: "आज स्थिरता और धैर्य का फल मिलेगा। वित्तीय मामलों में सावधानी बरतें तो लाभ होगा।",
tomorrow: "कल घरेलू जीवन सुखमय रहेगा। प्रेम संबंधों में रोमांचक क्षण आएंगे।",
weekly: "सप्ताह भर करियर में स्थिरता आएगी। स्वास्थ्य पर थोड़ा ध्यान दें।",
monthly: "इस महीने नई योजनाएं सफल होंगी। आध्यात्मिक शांति मिलेगी।"
}
},
{
id: "mithuna",
name: "मिथुन",
symbol: "♊",
predictions: {
today: "आज संचार कौशल चमकेंगे। बौद्धिक कार्यों में सफलता मिलेगी। नए दोस्त बन सकते हैं।",
tomorrow: "कल नए विचार आएंगे। प्रेम में रोमांचक मुलाकात संभव है।",
weekly: "इस सप्ताह सामाजिक गतिविधियां बढ़ेंगी। छोटी यात्राएं फायदेमंद होंगी।",
monthly: "महीने भर ज्ञान और कौशल में वृद्धि होगी। आर्थिक लाभ भी अच्छा रहेगा।"
}
},
{
id: "karka",
name: "कर्क",
symbol: "♋",
predictions: {
today: "आज भावनाओं को संतुलित रखें। घरेलू सुख बढ़ेगा और परिवार का साथ मिलेगा।",
tomorrow: "कल आर्थिक लाभ की संभावना है। स्वास्थ्य सुधरेगा।",
weekly: "सप्ताह में परिवार और घर का महत्व बढ़ेगा। भावनात्मक मजबूती आएगी।",
monthly: "इस महीने सुरक्षा और सुरक्षा का भाव रहेगा। रिश्ते मजबूत होंगे।"
}
},
{
id: "simha",
name: "सिंह",
symbol: "♌",
predictions: {
today: "आज नेतृत्व गुण चमकेंगे। सफलता आपके हाथ में है। महत्वपूर्ण निर्णय लें।",
tomorrow: "कल स्वास्थ्य का ध्यान रखें। दोस्तों का सहयोग मिलेगा।",
weekly: "इस सप्ताह प्रेम और करियर दोनों में अच्छे परिणाम मिलेंगे।",
monthly: "महीने में ऊर्जा और महत्वाकांक्षा पूरी होगी। बड़ी उपलब्धि संभव है।"
}
},
{
id: "kanya",
name: "कन्या",
symbol: "♍",
predictions: {
today: "आज विस्तार से काम करें। स्वास्थ्य अच्छा रहेगा और छोटे-छोटे काम पूरे होंगे।",
tomorrow: "कल काम में सुधार होगा। आर्थिक योजना बनाएं।",
weekly: "सप्ताह में वित्तीय मामलों में अच्छी योजना से लाभ होगा।",
monthly: "इस महीने संगठन कौशल से बड़ी सफलता मिलेगी।"
}
},
{
id: "tula",
name: "तुला",
symbol: "♎",
predictions: {
today: "आज संतुलन बनाए रखें। रिश्तों में मधुरता और सौंदर्य का आनंद लें।",
tomorrow: "कल निर्णय लेते समय सावधानी बरतें। प्रेम अच्छा रहेगा।",
weekly: "इस सप्ताह न्याय और समानता का भाव रहेगा।",
monthly: "महीने में कला, संगीत और रिश्तों का भरपूर आनंद मिलेगा।"
}
},
{
id: "vrishchika",
name: "वृश्चिक",
symbol: "♏",
predictions: {
today: "आज गहराई से सोचें। रहस्यों का खुलासा होगा। ऊर्जा बहुत ज्यादा रहेगी।",
tomorrow: "कल ऊर्जा बढ़ेगी। महत्वपूर्ण बदलाव संभव हैं।",
weekly: "सप्ताह में सकारात्मक परिवर्तन आएंगे। आध्यात्मिक विकास होगा।",
monthly: "इस महीने गहन शक्ति और सफलता के नए रास्ते खुलेंगे।"
}
},
{
id: "dhanu",
name: "धनु",
symbol: "♐",
predictions: {
today: "आज साहस दिखाएं। यात्रा के योग बन रहे हैं। ज्ञान बढ़ेगा।",
tomorrow: "कल नई सीख मिलेगी। दोस्तों के साथ अच्छा समय बिताएं।",
weekly: "इस सप्ताह रोमांचक अनुभव और सकारात्मक ऊर्जा रहेगी।",
monthly: "महीने भर उदारता और सकारात्मकता से बड़ा लाभ होगा।"
}
},
{
id: "makara",
name: "मकर",
symbol: "♑",
predictions: {
today: "आज मेहनत का फल मिलेगा। अनुशासन से काम करें।",
tomorrow: "कल लक्ष्य की ओर तेजी से बढ़ें।",
weekly: "सप्ताह में अनुशासन और मेहनत से सफलता मिलेगी।",
monthly: "इस महीने करियर में उन्नति और आर्थिक मजबूती आएगी।"
}
},
{
id: "kumbha",
name: "कुंभ",
symbol: "♒",
predictions: {
today: "आज नवीन विचार सफल होंगे। सामाजिक कार्य में भाग लें।",
tomorrow: "कल दोस्तों और समूह का सहयोग मिलेगा।",
weekly: "इस सप्ताह सामाजिक गतिविधियां और नेटवर्किंग अच्छी रहेगी।",
monthly: "महीने में मानवता की सेवा से पुण्य और सफलता दोनों मिलेंगे।"
}
},
{
id: "meena",
name: "मीन",
symbol: "♓",
predictions: {
today: "आज कल्पना शक्ति चरम पर रहेगी। रचनात्मक कार्य सफल होंगे।",
tomorrow: "कल आध्यात्मिक शांति मिलेगी।",
weekly: "सप्ताह में रचनात्मकता और अंतर्ज्ञान से लाभ होगा।",
monthly: "इस महीने अंतर्ज्ञान और प्रेम से जीवन में सकारात्मक बदलाव आएंगे।"
}
}
]
// Current state
let currentSignIndex = 0
let currentTab = 'today'
// Render all zodiac cards
function renderSignCards() {
const container = document.getElementById('sign-selector')
container.innerHTML = ''
signs.forEach((sign, index) => {
const card = document.createElement('div')
card.className = `sign-card ${index === currentSignIndex ? 'active' : ''}`
card.innerHTML = `
<span class="symbol">${sign.symbol}</span>
<span class="name">${sign.name}</span>
`
card.addEventListener('click', () => {
currentSignIndex = index
// Remove active from all cards
document.querySelectorAll('.sign-card').forEach(c => c.classList.remove('active'))
// Add active to clicked
card.classList.add('active')
renderContent()
})
container.appendChild(card)
})
}
// Render current sign + prediction
function renderContent() {
const sign = signs[currentSignIndex]
// Big symbol and name
document.getElementById('big-symbol').textContent = sign.symbol
document.getElementById('sign-name').innerHTML = `${sign.name} <small style="font-size:14px;opacity:0.8;">राशि</small>`
// Prediction text
const predictionEl = document.getElementById('prediction')
predictionEl.innerHTML = `
<p>${sign.predictions[currentTab]}</p>
<div style="margin-top:18px;font-size:13px;color:#ffd700;opacity:0.7;text-align:center;">
🌟 आज की राशिफल पूरी तरह बिल्ट-इन है
</div>
`
}
// Create twinkling golden stars in header
function createStars() {
const header = document.getElementById('header')
for (let i = 0; i < 28; i++) {
const star = document.createElement('span')
star.className = 'star'
star.textContent = Math.random() > 0.6 ? '✨' : '★'
star.style.left = Math.random() * 100 + '%'
star.style.top = Math.random() * 72 + 'px'
star.style.fontSize = (Math.random() * 13 + 7) + 'px'
star.style.animationDelay = '-' + (Math.random() * 2.5) + 's'
// Random opacity for variety
star.style.opacity = Math.random() * 0.6 + 0.5
header.appendChild(star)
}
}
// Tab click handlers
function initTabs() {
const tabButtons = document.querySelectorAll('#tabs button')
tabButtons.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active from all
tabButtons.forEach(b => b.classList.remove('active'))
// Activate clicked
btn.classList.add('active')
currentTab = btn.getAttribute('data-tab')
renderContent()
})
})
}
// Initialize everything
function initializeGadget() {
createStars()
renderSignCards()
renderContent()
initTabs()
// Optional: Console message for Blogger users
console.log('%c🌙 राशिफल गैजेट लोड हो गया! (Offline Mode)', 'color:#ffd700; font-size:13px;')
}
// Run when gadget loads
window.addEventListener('load', initializeGadget)
</script>
0 $type={blogger}:
Post a Comment