<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>जन्मकुंडली विवरण फॉर्म - आधुनिक डिज़ाइन (सुधारित)</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Hind+Gaza:wght@400;600&display=swap" rel="stylesheet">
<style>
/* CSS: Puraana design barkaraar rakha gaya hai */
:root {
--primary-color: #ff9800; /* नारंगी/केसरिया */
--secondary-color: #4caf50; /* हरा */
--bg-color: #fce4ec; /* हल्का गुलाबी पृष्ठभूमि */
--card-color: #ffffff;
--text-color: #333;
}
body {
font-family: 'Poppins', 'Hind Gaza', sans-serif;
background-color: var(--bg-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 550px;
background: var(--card-color);
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: var(--primary-color);
margin-bottom: 30px;
font-size: 2em;
border-bottom: 3px solid var(--primary-color);
padding-bottom: 10px;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--text-color);
font-size: 1.05em;
}
input[type="text"],
input[type="date"],
input[type="time"],
select {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
font-size: 1em;
transition: border-color 0.3s;
}
input:focus, select:focus {
border-color: var(--secondary-color);
outline: none;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
button {
display: block;
width: 100%;
padding: 14px;
background-color: var(--secondary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 1.2em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s;
}
button:hover {
background-color: #388e3c;
transform: translateY(-2px);
}
small {
color: #777;
display: block;
margin-top: 5px;
font-size: 0.9em;
}
/* आवश्यक (*) संकेत */
label::after {
content: " *";
color: red;
}
/* परिणाम संदेश के लिए */
#resultMessage {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
background-color: #fff3e0; /* हल्का नारंगी */
border: 1px solid var(--primary-color);
color: #e65100;
text-align: center;
font-weight: 600;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>जन्मकुंडली के लिए विवरण 🕉️</h1>
<form id="horoscopeForm" action="#" method="POST">
<div class="form-group">
<label for="name">पूरा नाम</label>
<input type="text" id="name" name="name" required placeholder="जैसे: रवि कुमार">
</div>
<div class="form-group">
<label for="dob">जन्म तिथि</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="tob">जन्म समय (स्थानीय समय)</label>
<input type="time" id="tob" name="tob" required>
<small>कृपया 24-घंटे के प्रारूप का उपयोग करें (उदाहरण: शाम 4:30 बजे के लिए 16:30)।</small>
</div>
<div class="form-group">
<label for="pob">जन्म स्थान (शहर और राज्य/देश)</label>
<input type="text" id="pob" name="pob" required placeholder="जैसे: वाराणसी, उत्तर प्रदेश">
</div>
<div class="form-group">
<label for="zodiac">अपनी राशि चुनें</label>
<select id="zodiac" name="zodiac" **required**> <option value="">-- अपनी राशि चुनें --</option>
<option value="Aries">मेष (Aries)</option>
<option value="Taurus">वृषभ (Taurus)</option>
<option value="Gemini">मिथुन (Gemini)</option>
<option value="Cancer">कर्क (Cancer)</option>
<option value="Leo">सिंह (Leo)</option>
<option value="Virgo">कन्या (Virgo)</option>
<option value="Libra">तुला (Libra)</option>
<option value="Scorpio">वृश्चिक (Scorpio)</option>
<option value="Sagittarius">धनु (Sagittarius)</option>
<option value="Capricorn">मकर (Capricorn)</option>
<option value="Aquarius">कुम्भ (Aquarius)</option>
<option value="Pisces">मीन (Pisces)</option>
</select>
</div>
<div class="form-group">
<label for="address">वर्तमान पता/शहर (वैकल्पिक)</label>
<input type="text" id="address" name="address" placeholder="वर्तमान शहर का नाम">
<small>यह विकल्प अनिवार्य नहीं है।</small>
</div>
<button type="submit">जन्मकुंडली प्राप्त करें</button>
</form>
<div id="resultMessage"></div>
</div>
<script>
// JavaScript: Form submission ko handle karne ke liye
document.getElementById('horoscopeForm').addEventListener('submit', function(event) {
// Form ko default roop se submit hone se rokein
event.preventDefault();
const resultDiv = document.getElementById('resultMessage');
// Yahan data collection ka ek udaharan diya gaya hai
const name = document.getElementById('name').value;
const dob = document.getElementById('dob').value;
const tob = document.getElementById('tob').value;
const pob = document.getElementById('pob').value;
const zodiac = document.getElementById('zodiac').value;
// Jab Rashi anivarya hai, to yeh message tabhi dikhega jab sabhi fields bhari hongi
resultDiv.style.display = 'block';
resultDiv.innerHTML = `
✅ **सफलता!** धन्यवाद, **${name}**। आपका डेटा सफलतापूर्वक एकत्र किया गया है।
<br>
आपकी चुनी हुई राशि: **${zodiac}**
<br><br>
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>पूरी कुंडली प्राप्त करें</title>
<style>
/* CSS: Sirf button ko design karne ke liye */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center; /* Button ko center mein laaye */
align-items: center; /* Vertically center kare */
min-height: 100vh; /* Poori screen ki height use kare */
margin: 0;
padding: 20px;
}
.full-horoscope-button {
/* Button ka neela rang aur padding */
background-color: #007bff; /* Bright Blue */
color: white;
padding: 18px 30px; /* Bada aur aakarshak dikhane ke liye padding */
/* Text aur design */
font-size: 1.5em; /* Font size bada kare */
font-weight: 700; /* Bold font */
text-decoration: none; /* Agar anchor tag (link) ho to line na aaye */
border: none;
border-radius: 10px; /* Kinare gol (rounded) kare */
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4); /* Halke shadow se 3D effect de */
transition: background-color 0.3s ease, transform 0.2s; /* Hover effect ke liye transition */
}
.full-horoscope-button:hover {
background-color: #0056b3; /* Hover karne par gehra neela rang */
transform: translateY(-3px); /* Button ko halka sa upar uthaye */
}
</style>
</head>
<body>
<button class="full-horoscope-button" onclick="alert('Ab aapko agle page par bhej diya jayega jahan aapki kundli ki ganana hogi.')">
जन्मकुंडली यहाँ से प्राप्त करें 🚀
</button>
</body>
</html>
`;
});
</script>
</body>
</html>
Comments
Post a Comment