234 lines
10 KiB
JavaScript
234 lines
10 KiB
JavaScript
import { useState } from 'react';
|
|
|
|
const HoroscopeGenerator = () => {
|
|
const [dob, setDob] = useState('');
|
|
const [showHoroscope, setShowHoroscope] = useState(false);
|
|
|
|
const rasiPositions = [
|
|
{ id: 1, label: 'Rasi', position: 'top-left' },
|
|
{ id: 2, label: 'Rasi', position: 'top-center-left' },
|
|
{ id: 3, label: 'Rasi', position: 'top-center-right' },
|
|
{ id: 4, label: 'Rasi', position: 'top-right' },
|
|
{ id: 5, label: 'Rasi', position: 'middle-left' },
|
|
{ id: 6, label: 'Rasi', position: 'middle-right' },
|
|
{ id: 7, label: 'Rasi', position: 'bottom-left' },
|
|
{ id: 8, label: 'Rasi', position: 'bottom-center-left' },
|
|
{ id: 9, label: 'Rasi', position: 'bottom-center-right' },
|
|
{ id: 10, label: 'Rasi', position: 'bottom-right' },
|
|
];
|
|
|
|
const navamsaPositions = [
|
|
{ id: 1, label: 'Navamsam', position: 'top-left' },
|
|
{ id: 2, label: 'Navamsam', position: 'top-center-left' },
|
|
{ id: 3, label: 'Navamsam', position: 'top-center-right' },
|
|
{ id: 4, label: 'Navamsam', position: 'top-right' },
|
|
{ id: 5, label: 'Navamsam', position: 'middle-left' },
|
|
{ id: 6, label: 'Navamsam', position: 'middle-right' },
|
|
{ id: 7, label: 'Navamsam', position: 'bottom-left' },
|
|
{ id: 8, label: 'Navamsam', position: 'bottom-center-left' },
|
|
{ id: 9, label: 'Navamsam', position: 'bottom-center-right' },
|
|
{ id: 10, label: 'Navamsam', position: 'bottom-right' },
|
|
];
|
|
|
|
const zodiacSigns = [
|
|
{ name: 'Aries', emoji: '♈' },
|
|
{ name: 'Taurus', emoji: '♉' },
|
|
{ name: 'Gemini', emoji: '♊' },
|
|
{ name: 'Cancer', emoji: '♋' },
|
|
{ name: 'Leo', emoji: '♌' },
|
|
{ name: 'Virgo', emoji: '♍' },
|
|
{ name: 'Libra', emoji: '♎' },
|
|
{ name: 'Scorpio', emoji: '♏' },
|
|
{ name: 'Sagittarius', emoji: '♐' },
|
|
{ name: 'Capricorn', emoji: '♑' },
|
|
{ name: 'Aquarius', emoji: '♒' },
|
|
{ name: 'Pisces', emoji: '♓' }
|
|
];
|
|
|
|
const getZodiacSign = (date) => {
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
|
|
if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return 0;
|
|
if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return 1;
|
|
if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return 2;
|
|
if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return 3;
|
|
if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return 4;
|
|
if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return 5;
|
|
if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return 6;
|
|
if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return 7;
|
|
if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return 8;
|
|
if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return 9;
|
|
if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return 10;
|
|
return 11;
|
|
};
|
|
|
|
const handleGenerate = () => {
|
|
if (dob) {
|
|
setShowHoroscope(true);
|
|
}
|
|
};
|
|
|
|
const userZodiacIndex = dob ? getZodiacSign(new Date(dob)) : -1;
|
|
|
|
const ChartBox = ({ label, onClick }) => (
|
|
<div
|
|
onClick={onClick}
|
|
className="bg-white border border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors min-h-[60px]"
|
|
>
|
|
<svg className="w-5 h-5 text-gray-600 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" strokeWidth="2"/>
|
|
<line x1="12" y1="8" x2="12" y2="16" strokeWidth="2"/>
|
|
<line x1="8" y1="12" x2="16" y2="12" strokeWidth="2"/>
|
|
</svg>
|
|
<span className="text-[10px] font-medium text-gray-700 text-center">{label}</span>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<div className="max-w-[1400px] mx-auto p-4">
|
|
{/* Header */}
|
|
<div className="text-center py-4 ">
|
|
<h1 className="text-[24px] font-semibold text-gray-800">
|
|
Astrology / Horoscope
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Date Input Section */}
|
|
<div className="py-6 w-full max-w-[400px] mx-auto">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Birth Date
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="date"
|
|
value={dob}
|
|
onChange={(e) => setDob(e.target.value)}
|
|
className="w-full px-4 py-3 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-[950px] mx-auto'>
|
|
|
|
<div>
|
|
|
|
{/* Add Rasi Section */}
|
|
<div className="py-6">
|
|
<h2 className="text-base font-semibold text-gray-800 mb-4">
|
|
Add Rasi
|
|
</h2>
|
|
|
|
{/* Rasi Chart Grid */}
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{/* Top Row - 4 boxes */}
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
|
|
{/* Middle Row - Left box, Center image, Right box */}
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<div className="col-span-2 row-span-2 flex items-center justify-center">
|
|
<div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg">
|
|
<img
|
|
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad1'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(240,240,240);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23grad1)'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M 0,-80 L 20,-20 L 80,-20 L 30,20 L 50,80 L 0,40 L -50,80 L -30,20 L -80,-20 L -20,-20 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%23FF6B6B'/%3E%3Ctext x='0' y='5' font-size='20' text-anchor='middle' fill='white' font-family='Arial'%3E♈%3C/text%3E%3C/g%3E%3C/svg%3E"
|
|
alt="Horoscope Chart"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
|
|
{/* Middle Row 2 - Left box continues, Right box continues */}
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
|
|
{/* Bottom Row - 4 boxes */}
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
<ChartBox label="Rasi" onClick={() => {}} />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
{/* Add Navamsam Section */}
|
|
<div className="py-6">
|
|
<h2 className="text-base font-semibold text-gray-800 mb-4">
|
|
Add Navamsam
|
|
</h2>
|
|
|
|
{/* Navamsam Chart Grid */}
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{/* Top Row - 4 boxes */}
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
|
|
{/* Middle Row - Left box, Center image, Right box */}
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<div className="col-span-2 row-span-2 flex items-center justify-center">
|
|
<div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg">
|
|
<img
|
|
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad2'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(240,240,240);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23grad2)'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M 0,-80 L 20,-20 L 80,-20 L 30,20 L 50,80 L 0,40 L -50,80 L -30,20 L -80,-20 L -20,-20 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%2366BB6A'/%3E%3Ctext x='0' y='5' font-size='20' text-anchor='middle' fill='white' font-family='Arial'%3E♉%3C/text%3E%3C/g%3E%3C/svg%3E"
|
|
alt="Navamsam Chart"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
|
|
{/* Middle Row 2 */}
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
|
|
{/* Bottom Row - 4 boxes */}
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
<ChartBox label="Navamsam" onClick={() => {}} />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Working Hours Button */}
|
|
<div className="pb-6 flex justify-center w-full my-5">
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={!dob}
|
|
className="w-[fit-content] px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white py-4 rounded-lg font-semibold text-base transition-colors shadow-md"
|
|
>
|
|
Working Hours
|
|
</button>
|
|
</div>
|
|
|
|
{/* Result Display */}
|
|
{showHoroscope && userZodiacIndex >= 0 && (
|
|
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg w-full max-w-[300px] mx-auto">
|
|
<div className="text-center">
|
|
<div className="text-4xl mb-2">{zodiacSigns[userZodiacIndex].emoji}</div>
|
|
<div className="text-lg font-bold text-gray-800">
|
|
Your Zodiac Sign: {zodiacSigns[userZodiacIndex].name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HoroscopeGenerator; |