8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Hillstation Fact</title>
<style>
body {
font-family: system-ui, sans-serif;
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: white;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 2rem;
border-radius: 16px;
max-width: 400px;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
button {
background: #4CAF50;
border: none;
padding: 12px 24px;
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
margin-top: 1rem;
}
button:hover { background: #45a049; }
#fact { margin-top: 1.5rem; line-height: 1.6; }
</style>
</head>
<body>
<div class="card">
<h2>🏔️ Hillstation Fact Generator</h2>
<p>Click for an unknown fact about Indian hillstations</p>
<button onclick="showFact()">New Fact</button>
<div id="fact"></div>
</div>
<script>
const facts = [
"Ponmudi, Kerala: Hairpin bend #9 was widened in the 1940s so British officers could turn their Rolls-Royce without reversing.",
"Kotagiri, Tamil Nadu: It gets both Southwest and Northeast monsoons. Two monsoons, one hillstation.",
"Matheran, Maharashtra: The only automobile-free hillstation in Asia. You reach the top by toy train or on horseback.",
"Yercaud, Tamil Nadu: Has a naturally occurring lake fed by springs called 'Yeri' + 'Kaadu' = Lake Forest.",
"Coorg, Karnataka: Grows wild orange trees in coffee estates. The British called it 'Scotland of India' for the mist."
];
function showFact() {
const randomIndex = Math.floor(Math.random() * facts.length);
document.getElementById('fact').innerHTML = facts[randomIndex];
}
// Show one fact on load
showFact();
</script>
</body>
</html>
No comments:
Post a Comment