<style>
.astro-gadget {
max-width: 340px;
margin: 20px auto;
background: linear-gradient(145deg, #2a003f, #1a0028);
border: 5px solid #d4af37;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.6),
0 0 40px rgba(212, 175, 55, 0.5),
inset 0 0 40px rgba(255, 215, 0, 0.15);
font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
color: #f0e6ff;
position: relative;
}
.astro-header {
background: linear-gradient(to right, #4b0082, #6a0dad);
padding: 18px 15px 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.astro-header h1 {
margin: 0;
font-size: 32px;
color: #ffd700;
text-shadow: 0 0 15px #ffd700, 0 0 25px rgba(255,215,0,0.8);
letter-spacing: 2px;
}
.astro-header p {
margin: 5px 0 0;
font-size: 15px;
color: #e0c0ff;
font-weight: 500;
}
.twinkle-stars {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
overflow: hidden;
}
.star {
position: absolute;
color: #ffd700;
text-shadow: 0 0 12px #ffd700;
animation: twinkle 2s infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.3; transform: scale(0.7); }
100% { opacity: 1; transform: scale(1.3); }
}
.tabs-container {
display: flex;
background: rgba(0,0,0,0.3);
padding: 8px 10px;
gap: 6px;
}
.tab-btn {
flex: 1;
padding: 12px 8px;
background: transparent;
border: none;
color: #e0c0ff;
font-size: 15px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s ease;
}
.tab-btn.active {
background: linear-gradient(90deg, #ffd700, #ffeb99);
color: #2a003f;
box-shadow: 0 6px 15px rgba(255, 215, 0, 0.6);
font-weight: 800;
}
.signs-scroll {
padding: 15px 12px 10px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.signs-scroll::-webkit-scrollbar { display: none; }
.sign-item {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 68px;
margin-right: 12px;
padding: 10px 6px;
background: rgba(255,215,0,0.1);
border-radius: 18px;
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.sign-item:hover {
transform: translateY(-5px) scale(1.1);
background: rgba(255,215,0,0.25);
}
.sign-item.active {
border-color: #ffd700;
background: rgba(255,215,0,0.28);
box-shadow: 0 0 20px #ffd700;
}
.sign-symbol {
font-size: 42px;
line-height: 1;
margin-bottom: 6px;
filter: drop-shadow(0 0 12px #ffd700);
}
.sign-name {
font-size: 13.5px;
font-weight: 700;
color: #ffd700;
}
.main-area {
padding: 25px 20px 30px;
text-align: center;
background: rgba(255,255,255,0.06);
min-height: 260px;
}
#big-symbol {
font-size: 92px;
display: block;
line-height: 1;
margin-bottom: 8px;
filter: drop-shadow(0 0 25px #ffd700);
}
#sign-name-big {
font-size: 28px;
margin: 0 0 18px;
color: #ffd700;
font-weight: 700;
text-shadow: 0 0 12px rgba(255,215,0,0.7);
}
#horoscope-text {
font-size: 15.8px;
line-height: 1.75;
text-align: left;
color: #f0e6ff;
padding: 0 8px;
}
.gadget-footer {
text-align: center;
padding: 12px 0;
font-size: 13px;
color: #ffd700;
background: rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,215,0,0.2);
}
.gadget-footer span { font-size: 18px; margin-right: 6px; }
</style>
<div class="astro-gadget" id="astro-gadget">
<!-- Header -->
<div class="astro-header">
<div class="twinkle-stars" id="stars"></div>
<h1>🌙 राशिफल</h1>
<p>मेष से मीन तक • रहस्यमय ज्योतिष</p>
</div>
<!-- Tabs -->
<div class="tabs-container">
<button class="tab-btn active" data-tab="today">आज</button>
<button class="tab-btn" data-tab="tomorrow">कल</button>
<button class="tab-btn" data-tab="weekly">साप्ताहिक</button>
<button class="tab-btn" data-tab="monthly">मासिक</button>
</div>
<!-- Zodiac Signs Scroll -->
<div class="signs-scroll" id="signs-scroll"></div>
<!-- Main Content -->
<div class="main-area">
<div id="big-symbol"></div>
<h2 id="sign-name-big"></h2>
<div id="horoscope-text"></div>
</div>
<!-- Footer -->
<div class="gadget-footer">
✨ बिना इंटरनेट के काम करता है • Built-in Data
</div>
</div>
<script>
// 12 राशियाँ - Built-in Hindi Content (Fully Offline)
const zodiacSigns = [
{id:"mesha", name:"मेष", symbol:"♈",
today:"आज आपका उत्साह चरम पर रहेगा। नया काम शुरू करने का शुभ मुहूर्त है। प्रेम में रोमांच रहेगा।",
tomorrow:"कल यात्रा या महत्वपूर्ण बैठक फायदेमंद साबित होगी। स्वास्थ्य अच्छा रहेगा।",
weekly:"इस सप्ताह करियर में उन्नति और आर्थिक लाभ दोनों होंगे।",
monthly:"महीने में ऊर्जा और महत्वाकांक्षा से बड़ी सफलता मिलेगी।"},
{id:"vrishabha", name:"वृषभ", symbol:"♉",
today:"आज स्थिरता और धैर्य से काम लें। वित्तीय योजना बनाना फायदेमंद रहेगा।",
tomorrow:"कल परिवार के साथ अच्छा समय बिताएंगे। प्रेम संबंध मजबूत होंगे।",
weekly:"साप्ताहिक रूप से स्वास्थ्य और धन दोनों में सुधार होगा।",
monthly:"इस महीने नई संपत्ति या निवेश का योग बन रहा है।"},
{id:"mithuna", name:"मिथुन", symbol:"♊",
today:"आज बौद्धिक कार्यों में सफलता मिलेगी। संवाद कौशल चमकेगा।",
tomorrow:"कल नए दोस्त या संपर्क फायदेमंद साबित होंगे।",
weekly:"इस सप्ताह छोटी यात्राएं और सामाजिक गतिविधियां बढ़ेंगी।",
monthly:"महीने भर ज्ञान और कौशल में वृद्धि होगी।"},
{id:"karka", name:"कर्क", symbol:"♋",
today:"आज भावनात्मक रूप से मजबूत रहें। परिवार का साथ मिलेगा।",
tomorrow:"कल घरेलू सुख बढ़ेगा। आर्थिक स्थिति अच्छी रहेगी।",
weekly:"सप्ताह में घर और परिवार पर ज्यादा ध्यान रहेगा।",
monthly:"इस महीने सुरक्षा और भावनात्मक संतुलन का समय है।"},
{id:"simha", name:"सिंह", symbol:"♌",
today:"आज नेतृत्व करने का दिन है। सफलता आपके कदम चूमेगी।",
tomorrow:"कल दोस्तों का सहयोग मिलेगा। महत्वपूर्ण निर्णय लें।",
weekly:"इस सप्ताह करियर और प्रेम दोनों क्षेत्रों में चमक रहेगी।",
monthly:"महीने में बड़ी उपलब्धि और सम्मान मिलने की संभावना है।"},
{id:"kanya", name:"कन्या", symbol:"♍",
today:"आज विस्तार से काम करें। छोटे-छोटे काम पूरे होंगे।",
tomorrow:"कल स्वास्थ्य का ध्यान रखें। आर्थिक योजना बनाएँ।",
weekly:"साप्ताहिक रूप से व्यवस्था और अनुशासन से लाभ होगा।",
monthly:"इस महीने मेहनत का अच्छा फल मिलेगा।"},
{id:"tula", name:"तुला", symbol:"♎",
today:"आज रिश्तों में संतुलन बनाए रखें। सौंदर्य और कला का आनंद लें।",
tomorrow:"कल निर्णय लेने में सावधानी बरतें। प्रेम अच्छा रहेगा।",
weekly:"इस सप्ताह न्याय और समझदारी से काम लें।",
monthly:"महीने में रिश्ते और साझेदारी मजबूत होंगी।"},
{id:"vrishchika", name:"वृश्चिक", symbol:"♏",
today:"आज गहन विचार आएंगे। रहस्य उजागर हो सकते हैं।",
tomorrow:"कल ऊर्जा बहुत बढ़ेगी। परिवर्तन के योग हैं।",
weekly:"सप्ताह में आध्यात्मिक और मानसिक शक्ति बढ़ेगी।",
monthly:"इस महीने गहन शक्ति से सफलता मिलेगी।"},
{id:"dhanu", name:"धनु", symbol:"♐",
today:"आज साहस और ज्ञान का दिन है। यात्रा योग अच्छे हैं।",
tomorrow:"कल नई सीख और अनुभव मिलेंगे।",
weekly:"इस सप्ताह रोमांचक और सकारात्मक ऊर्जा रहेगी।",
monthly:"महीने भर उदारता से बड़ा लाभ होगा।"},
{id:"makara", name:"मकर", symbol:"♑",
today:"आज मेहनत और अनुशासन का फल मिलेगा।",
tomorrow:"कल लक्ष्य की ओर तेज प्रगति होगी।",
weekly:"सप्ताह में करियर में उन्नति संभव है।",
monthly:"इस महीने आर्थिक मजबूती और सम्मान मिलेगा।"},
{id:"kumbha", name:"कुंभ", symbol:"♒",
today:"आज नवीन विचार सफल होंगे। सामाजिक कार्य अच्छे रहेंगे।",
tomorrow:"कल दोस्तों और समूह से मदद मिलेगी।",
weekly:"इस सप्ताह नेटवर्किंग और नए संपर्क फायदेमंद होंगे।",
monthly:"महीने में मानवता की सेवा से पुण्य और सफलता दोनों मिलेंगे।"},
{id:"meena", name:"मीन", symbol:"♓",
today:"आज रचनात्मकता चरम पर रहेगी। अंतर्ज्ञान मजबूत होगा।",
tomorrow:"कल आध्यात्मिक शांति मिलेगी।",
weekly:"सप्ताह में कल्पना शक्ति से अच्छे परिणाम आएंगे।",
monthly:"इस महीने प्रेम और अंतर्ज्ञान से जीवन सुंदर बनेगा।"}
];
let currentIndex = 0;
let currentTab = "today";
function createStars() {
const container = document.getElementById('stars');
for (let i = 0; i < 35; i++) {
const star = document.createElement('span');
star.className = 'star';
star.textContent = ['✨','★','🌟'][Math.floor(Math.random()*3)];
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.fontSize = (Math.random() * 14 + 8) + 'px';
star.style.animationDelay = '-' + Math.random() * 3 + 's';
container.appendChild(star);
}
}
function renderSigns() {
const container = document.getElementById('signs-scroll');
container.innerHTML = '';
zodiacSigns.forEach((sign, index) => {
const div = document.createElement('div');
div.className = `sign-item ${index === currentIndex ? 'active' : ''}`;
div.innerHTML = `
<div class="sign-symbol">${sign.symbol}</div>
<div class="sign-name">${sign.name}</div>
`;
div.onclick = () => {
currentIndex = index;
document.querySelectorAll('.sign-item').forEach(el => el.classList.remove('active'));
div.classList.add('active');
renderPrediction();
};
container.appendChild(div);
});
}
function renderPrediction() {
const sign = zodiacSigns[currentIndex];
document.getElementById('big-symbol').textContent = sign.symbol;
document.getElementById('sign-name-big').innerHTML = `${sign.name} राशि`;
const textEl = document.getElementById('horoscope-text');
textEl.innerHTML = `<p>${sign[currentTab]}</p>`;
}
function initTabs() {
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentTab = btn.getAttribute('data-tab');
renderPrediction();
});
});
}
function initGadget() {
createStars();
renderSigns();
renderPrediction();
initTabs();
console.log('%c🌙 राशिफल गैजेट लोड हो चुका है | Fully Offline', 'color:#ffd700; font-size:14px;');
}
// Load the gadget
window.onload = initGadget;
</script>
