<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Political History of Nepal</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 2rem;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.navbar h1 {
color: #2c3e50;
font-size: 2rem;
text-align: center;
font-weight: bold;
}
.section {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
margin: 2rem 0;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.section-title {
font-size: 1.8rem;
margin-bottom: 1.5rem;
color: #2c3e50;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
.intro-section {
text-align: center;
}
.image-placeholder {
width: 200px;
height: 150px;
background: linear-gradient(45deg, #ff9a9e, #fecfef);
border: 3px solid #ddd;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-style: italic;
color: #666;
transition: all 0.3s ease;
cursor: pointer;
}
.image-placeholder:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.card {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 15px;
padding: 1.5rem;
color: white;
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.card-image {
width: 100%;
height: 120px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-style: italic;
backdrop-filter: blur(5px);
}
.card-description {
font-size: 0.9rem;
line-height: 1.4;
opacity: 0.9;
}
.historical-section .image-placeholder {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #a8edea, #fed6e3);
}
.constitution-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.constitution-card {
background: linear-gradient(135deg, #fa709a, #fee140);
border-radius: 12px;
padding: 1rem;
color: white;
text-align: center;
transition: all 0.3s ease;
}
.constitution-card:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.constitution-card .card-image {
height: 100px;
background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.navbar {
padding: 1rem;
}
.navbar h1 {
font-size: 1.5rem;
}
.section {
padding: 1rem;
}
.section-title {
font-size: 1.4rem;
}
.card-grid {
grid-template-columns: 1fr;
}
.constitution-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.loading-text {
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar fade-in">
<h1>नेपाल</h1>
</nav>
<!-- Introduction Section -->
<section class="section intro-section fade-in">
<h2 class="section-title">Introducing Our Constitution</h2>
<div class="image-placeholder" onclick="showImageModal('Constitution Image')">
<span>Image Section</span>
</div>
<p class="loading-text">Click on images to view full content</p>
</section>
<!-- Political History Section -->
<section class="section fade-in">
<h2 class="section-title">Political History of Nepal</h2>
<div class="card-grid">
<div class="card" onclick="showHistoryCard('Early Period')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>Early Period</strong><br>
Ancient kingdoms and the formation of early Nepalese states, including the Licchavi and Malla periods.
</div>
</div>
<div class="card" onclick="showHistoryCard('Unification')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>Unification Era</strong><br>
Prithvi Narayan Shah's conquest and the establishment of modern Nepal in the 18th century.
</div>
</div>
<div class="card" onclick="showHistoryCard('Rana Rule')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>Rana Oligarchy</strong><br>
104 years of Rana family rule (1846-1951) and its impact on Nepal's development.
</div>
</div>
<div class="card" onclick="showHistoryCard('Democracy')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>Democratic Movements</strong><br>
The struggle for democracy, people's movements, and the path to constitutional monarchy.
</div>
</div>
</div>
</section>
<!-- Historical Development Section -->
<section class="section historical-section fade-in">
<h2 class="section-title">Historical Development</h2>
<div style="text-align: center;">
<div class="image-placeholder" onclick="showImageModal('Historical Development')">
<span>Image</span>
</div>
<p style="margin-top: 1rem; color: #666; font-style: italic;">
Nepal's journey through various political systems, from ancient kingdoms to modern federal democratic republic,
showcasing the evolution of governance, culture, and society over millennia.
</p>
</div>
</section>
<!-- Six Constitutions Section -->
<section class="section fade-in">
<h2 class="section-title">Six Constitutions</h2>
<div class="constitution-grid">
<div class="constitution-card" onclick="showConstitutionInfo('1948')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>1948 Constitution</strong><br>
First written constitution
</div>
</div>
<div class="constitution-card" onclick="showConstitutionInfo('1951')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>1951 Interim</strong><br>
Post-Rana period constitution
</div>
</div>
<div class="constitution-card" onclick="showConstitutionInfo('1959')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>1959 Constitution</strong><br>
Parliamentary democracy
</div>
</div>
<div class="constitution-card" onclick="showConstitutionInfo('1962')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>1962 Constitution</strong><br>
Panchayat system
</div>
</div>
<div class="constitution-card" onclick="showConstitutionInfo('1990')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>1990 Constitution</strong><br>
Constitutional monarchy
</div>
</div>
<div class="constitution-card" onclick="showConstitutionInfo('2015')">
<div class="card-image">
<span>Image</span>
</div>
<div class="card-description">
<strong>2015 Constitution</strong><br>
Federal democratic republic
</div>
</div>
</div>
</section>
</div>
<script>
// Add fade-in animation on scroll
function animateOnScroll() {
const elements = document.querySelectorAll('.fade-in');
elements.forEach((element, index) => {
element.style.animationDelay = `${index * 0.1}s`;
});
}
// Interactive functions
function showImageModal(title) {
alert(`Loading ${title}...\n\nThis would typically open a modal with detailed information and images about ${title}.`);
}
function showHistoryCard(period) {
const descriptions = {
'Early Period': 'The ancient period of Nepal includes the Kirata, Licchavi, and Malla dynasties. The Licchavis (c. 400-750 CE) established trade relations with India and Tibet, while the Malla period (c. 1200-1769 CE) saw the flourishing of art, architecture, and culture in the Kathmandu Valley.',
'Unification': 'Prithvi Narayan Shah began his conquest in 1743 and unified the small kingdoms into modern Nepal by 1769. His vision of Nepal as a "yam between two boulders" (referring to British India and Qing China) shaped Nepal\'s foreign policy for centuries.',
'Rana Rule': 'Jung Bahadur Rana established hereditary rule in 1846 after the Kot Massacre. The Ranas served as Prime Ministers while keeping the Shah kings as figureheads. This period saw isolation from the outside world but also preserved Nepal\'s independence.',
'Democracy': 'The 1950 revolution ended Rana rule. The 1990 People\'s Movement (Jana Andolan) established multiparty democracy. The 2006 People\'s Movement II led to the abolition of monarchy and establishment of a federal democratic republic.'
};
alert(`${period}\n\n${descriptions[period]}`);
}
function showConstitutionInfo(year) {
const constitutions = {
'1948': 'Nepal\'s first written constitution, prepared by Padma Shamsher but never implemented due to opposition from conservatives.',
'1951': 'Interim Government Act that ended Rana rule and established a constitutional monarchy with King Tribhuvan.',
'1959': 'Established parliamentary democracy with B.P. Koirala as the first elected Prime Minister, but was suspended in 1960.',
'1962': 'Introduced the Panchayat system by King Mahendra, establishing a party-less political system.',
'1990': 'Restored multiparty democracy after the People\'s Movement, establishing constitutional monarchy.',
'2015': 'Current constitution establishing Nepal as a federal democratic republic with seven provinces.'
};
alert(`Constitution of ${year}\n\n${constitutions[year]}`);
}
// Initialize animations
document.addEventListener('DOMContentLoaded', () => {
animateOnScroll();
});
// Add smooth scrolling behavior
document.documentElement.style.scrollBehavior = 'smooth';
</script>
</body>
</html>
