<!DOCTYPE html>
<html lang=”hi”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>उत्तराखंड ओपन स्कूलिंग – परिणाम प्रबंधन प्रणाली</title>
<!– फॉन्ट अवेसम और गूगल फॉन्ट्स –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css”>
<link href=”https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap” rel=”stylesheet”>
<!– चार्ट.जेएस –>
<script src=”https://cdn.jsdelivr.net/npm/chart.js”></script>
<!– एनिमेट.सीएसएस –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css”>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Poppins’, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* एनिमेटेड बैकग्राउंड */
body::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(‘data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwMCIgaGVpZ2h0PSI5MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiIGZ4PSI1MCUiIGZ5PSI1MCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNmZmZmZmY7c3RvcC1vcGFjaXR5Oi4wMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2ZmZmZmZjtzdG9wLW9wYWNpdHk6MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0wIDBoMTQwMHY5MDBIMHoiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=’);
opacity: 0.5;
z-index: 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 1;
}
/* हेडर सेक्शन */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: slideInDown 1s ease;
}
.board-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.board-logo {
display: flex;
align-items: center;
gap: 20px;
}
.logo-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: white;
transform: rotate(10deg);
transition: transform 0.3s ease;
}
.logo-icon:hover {
transform: rotate(0deg) scale(1.1);
}
.board-title h1 {
font-size: 2.5em;
font-weight: 800;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.2;
}
.board-title p {
color: #666;
font-size: 1.1em;
letter-spacing: 1px;
}
.board-stats {
display: flex;
gap: 30px;
}
.stat-item {
text-align: center;
padding: 15px 25px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 20px;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.stat-item i {
font-size: 30px;
margin-bottom: 10px;
}
.stat-item span {
font-size: 1.5em;
font-weight: 700;
display: block;
}
/* क्लास सेलेक्टर */
.class-selector {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.class-btn {
padding: 15px 40px;
border: none;
border-radius: 50px;
font-size: 1.2em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
color: #333;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.class-btn::before {
content: ”;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.class-btn:hover::before {
width: 300px;
height: 300px;
}
.class-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
/* मुख्य कार्ड */
.main-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: fadeInUp 1s ease;
}
.class-badge {
display: inline-block;
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
margin-bottom: 30px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
font-size: 1.2em;
}
/* फॉर्म सेक्शन */
.form-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.form-group {
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
font-size: 0.95em;
}
.form-group i {
position: absolute;
left: 15px;
bottom: 15px;
color: #667eea;
font-size: 1.2em;
}
.form-group input {
width: 100%;
padding: 15px 15px 15px 45px;
border: 2px solid #e0e0e0;
border-radius: 15px;
font-size: 16px;
transition: all 0.3s ease;
background: white;
font-family: ‘Poppins’, sans-serif;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 5px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
/* विषय सेक्शन */
.subjects-section {
margin-top: 40px;
}
.subjects-section h2 {
font-size: 1.8em;
color: #333;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.subject-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
}
.subject-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 20px;
padding: 25px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
animation: fadeIn 0.5s ease;
}
.subject-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.subject-card h3 {
color: #333;
margin-bottom: 20px;
font-size: 1.3em;
padding-bottom: 10px;
border-bottom: 2px solid #667eea;
}
.subject-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
margin-bottom: 15px;
align-items: center;
}
.subject-name {
font-weight: 500;
color: #555;
padding: 10px;
background: white;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.subject-row input {
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 14px;
transition: all 0.3s ease;
background: white;
}
.subject-row input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* बटन ग्रुप */
.button-group {
display: flex;
gap: 20px;
margin-top: 40px;
flex-wrap: wrap;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 18px 35px;
border-radius: 15px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: linear-gradient(135deg, #f093fb, #f5576c);
color: white;
border: none;
padding: 18px 35px;
border-radius: 15px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3);
}
.btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(240, 147, 251, 0.4);
}
/* रिजल्ट कार्ड */
.result-card {
background: white;
border-radius: 30px;
padding: 40px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
margin-top: 30px;
position: relative;
overflow: hidden;
animation: zoomIn 0.5s ease;
}
.result-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
}
.result-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 3px solid #f0f0f0;
}
.result-header h2 {
font-size: 2.2em;
font-weight: 700;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
}
.result-class {
display: inline-block;
padding: 8px 30px;
border-radius: 50px;
font-weight: 600;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 1.1em;
}
.student-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
padding: 25px;
border-radius: 20px;
}
.info-item {
text-align: center;
padding: 15px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.info-item label {
display: block;
font-weight: 500;
color: #666;
margin-bottom: 8px;
font-size: 0.9em;
}
.info-item span {
display: block;
font-size: 1.2em;
font-weight: 600;
color: #333;
}
/* मार्क्स टेबल */
.marks-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
margin-bottom: 30px;
}
.marks-table th {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 15px;
font-weight: 600;
border-radius: 10px;
}
.marks-table td {
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
}
.marks-table tr:hover td {
background: linear-gradient(135deg, #f5f7fa, #e9ecef);
transform: scale(1.02);
transition: all 0.3s ease;
}
/* टोटल सेक्शन */
.total-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.total-box, .percentage-box, .grade-box {
padding: 25px;
border-radius: 20px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
animation: pulse 2s infinite;
}
.total-box {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.percentage-box {
background: linear-gradient(135deg, #f093fb, #f5576c);
}
.grade-box {
background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.total-box p, .percentage-box p, .grade-box p {
font-size: 1.2em;
margin-bottom: 10px;
opacity: 0.9;
}
.total-box h3, .percentage-box h3, .grade-box h3 {
font-size: 2.5em;
font-weight: 700;
}
/* चार्ट कंटेनर */
.chart-container {
margin-top: 40px;
padding: 20px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* नोटिफिकेशन */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
padding: 20px 30px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
transform: translateX(400px);
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 1000;
display: flex;
align-items: center;
gap: 15px;
font-weight: 500;
}
.notification.show {
transform: translateX(0);
}
.notification i {
font-size: 30px;
}
/* लोडिंग एनिमेशन */
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
display: none;
}
.loading.show {
display: flex;
}
.loader {
width: 80px;
height: 80px;
border: 5px solid #f3f3f3;
border-top: 5px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* फ्लोटिंग एक्शन बटन */
.fab {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 30px;
cursor: pointer;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
transition: all 0.3s ease;
z-index: 100;
border: none;
}
.fab:hover {
transform: scale(1.1) rotate(90deg);
}
@media (max-width: 768px) {
.board-header {
flex-direction: column;
text-align: center;
}
.board-logo {
flex-direction: column;
}
.board-stats {
flex-wrap: wrap;
justify-content: center;
}
.subject-row {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
.total-section {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!– लोडिंग ओवरले –>
<div class=”loading” id=”loading”>
<div class=”loader”></div>
</div>
<!– नोटिफिकेशन –>
<div class=”notification” id=”notification”>
<i class=”fas fa-check-circle”></i>
<span id=”notificationMessage”>डेटा सफलतापूर्वक सेव हो गया है!</span>
</div>
<!– फ्लोटिंग एक्शन बटन –>
<button class=”fab” onclick=”window.scrollTo({top: 0, behavior: ‘smooth’})”>
<i class=”fas fa-arrow-up”></i>
</button>
<div class=”container”>
<!– हेडर सेक्शन –>
<div class=”header animate__animated animate__slideInDown”>
<div class=”board-header”>
<div class=”board-logo”>
<div class=”logo-icon”>
<i class=”fas fa-university”></i>
</div>
<div class=”board-title”>
<h1>उत्तराखंड ओपन स्कूलिंग</h1>
<p>UTTARAKHAND OPEN SCHOOLING (UKOS)</p>
</div>
</div>
<div class=”board-stats”>
<div class=”stat-item”>
<i class=”fas fa-users”></i>
<span id=”totalStudents”>0</span>
<small>कुल छात्र</small>
</div>
<div class=”stat-item”>
<i class=”fas fa-chart-line”></i>
<span id=”avgPercentage”>0%</span>
<small>औसत प्रतिशत</small>
</div>
</div>
</div>
</div>
<!– क्लास सेलेक्टर –>
<div class=”class-selector”>
<button class=”class-btn highschool active” onclick=”switchClass(‘highschool’)” id=”btnHighschool”>
<i class=”fas fa-school”></i> हाई स्कूल (कक्षा 10)
</button>
<button class=”class-btn intermediate” onclick=”switchClass(‘intermediate’)” id=”btnIntermediate”>
<i class=”fas fa-graduation-cap”></i> इंटरमीडिएट (कक्षा 12)
</button>
</div>
<!– इनपुट फॉर्म सेक्शन –>
<div class=”main-card” id=”inputForm”>
<div class=”class-badge” id=”classBadge”>
<i class=”fas fa-school”></i> हाई स्कूल (कक्षा 10)
</div>
<!– स्टूडेंट डिटेल्स –>
<div class=”form-section”>
<div class=”form-group”>
<label><i class=”fas fa-user-graduate”></i> छात्र का नाम</label>
<i class=”fas fa-user”></i>
<input type=”text” id=”studentName” placeholder=”जैसे: राहुल कुमार”>
</div>
<div class=”form-group”>
<label><i class=”fas fa-user-tie”></i> पिता का नाम</label>
<i class=”fas fa-user”></i>
<input type=”text” id=”fatherName” placeholder=”जैसे: राजेश कुमार”>
</div>
<div class=”form-group”>
<label><i class=”fas fa-user”></i> माता का नाम</label>
<i class=”fas fa-user”></i>
<input type=”text” id=”motherName” placeholder=”जैसे: सीता देवी”>
</div>
<div class=”form-group”>
<label><i class=”fas fa-calendar-alt”></i> जन्म तिथि</label>
<i class=”fas fa-calendar”></i>
<input type=”date” id=”dob”>
</div>
<div class=”form-group”>
<label><i class=”fas fa-id-card”></i> रोल नंबर</label>
<i class=”fas fa-hashtag”></i>
<input type=”text” id=”rollNumber” placeholder=”जैसे: UKOS/2024/1025″>
</div>
<div class=”form-group”>
<label><i class=”fas fa-calendar”></i> सत्र</label>
<i class=”fas fa-calendar-alt”></i>
<input type=”text” id=”session” placeholder=”जैसे: 2024-2025″ value=”2024-2025″>
</div>
</div>
<!– हाई स्कूल विषय –>
<div class=”subjects-section” id=”highschoolSubjects”>
<h2><i class=”fas fa-book-open”></i> हाई स्कूल (कक्षा 10) विषय</h2>
<div class=”subject-grid”>
<div class=”subject-card”>
<h3><i class=”fas fa-language”></i> भाषा विषय</h3>
<div class=”subject-row”>
<span class=”subject-name”>हिंदी</span>
<input type=”number” id=”high_hindi_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_hindi_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>अंग्रेजी</span>
<input type=”number” id=”high_english_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_english_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>संस्कृत</span>
<input type=”number” id=”high_sanskrit_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_sanskrit_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
</div>
<div class=”subject-card”>
<h3><i class=”fas fa-calculator”></i> मुख्य विषय</h3>
<div class=”subject-row”>
<span class=”subject-name”>गणित</span>
<input type=”number” id=”high_math_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_math_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>विज्ञान</span>
<input type=”number” id=”high_science_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_science_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>सामाजिक विज्ञान</span>
<input type=”number” id=”high_social_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_social_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
</div>
<div class=”subject-card”>
<h3><i class=”fas fa-paint-brush”></i> अतिरिक्त विषय</h3>
<div class=”subject-row”>
<span class=”subject-name”>ड्राइंग/चित्रकला</span>
<input type=”number” id=”high_drawing_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_drawing_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>शारीरिक शिक्षा</span>
<input type=”number” id=”high_physical_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”high_physical_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
</div>
</div>
</div>
<!– इंटरमीडिएट विषय –>
<div class=”subjects-section” id=”intermediateSubjects” style=”display: none;”>
<h2><i class=”fas fa-flask”></i> इंटरमीडिएट (कक्षा 12) – विज्ञान संकाय</h2>
<div class=”subject-grid”>
<div class=”subject-card”>
<h3><i class=”fas fa-language”></i> भाषा विषय</h3>
<div class=”subject-row”>
<span class=”subject-name”>हिंदी</span>
<input type=”number” id=”inter_hindi_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”inter_hindi_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>अंग्रेजी</span>
<input type=”number” id=”inter_english_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”inter_english_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
</div>
<div class=”subject-card”>
<h3><i class=”fas fa-flask”></i> मुख्य विषय (विज्ञान)</h3>
<div class=”subject-row”>
<span class=”subject-name”>भौतिक विज्ञान (Physics)</span>
<input type=”number” id=”inter_physics_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”inter_physics_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>रसायन विज्ञान (Chemistry)</span>
<input type=”number” id=”inter_chemistry_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”inter_chemistry_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>जीव विज्ञान (Biology)</span>
<input type=”number” id=”inter_biology_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”inter_biology_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
<div class=”subject-row”>
<span class=”subject-name”>गणित (Mathematics)</span>
<input type=”number” id=”inter_math_obtained” placeholder=”प्राप्तांक” min=”0″ max=”100″ value=”0″>
<input type=”number” id=”inter_math_total” placeholder=”अधिकतम” min=”0″ max=”100″ value=”100″>
</div>
</div>
</div>
</div>
<!– बटन ग्रुप –>
<div class=”button-group”>
<button class=”btn-primary” onclick=”saveData()”>
<i class=”fas fa-save”></i> डेटा सेव करें
</button>
<button class=”btn-primary” onclick=”showResult()”>
<i class=”fas fa-chart-bar”></i> रिजल्ट दिखाएं
</button>
<button class=”btn-secondary” onclick=”clearForm()”>
<i class=”fas fa-eraser”></i> फॉर्म साफ करें
</button>
<button class=”btn-secondary” onclick=”exportAsPDF()”>
<i class=”fas fa-file-pdf”></i> PDF डाउनलोड
</button>
</div>
</div>
<!– रिजल्ट कार्ड –>
<div class=”result-card” id=”resultCard”>
<div class=”result-header”>
<h2>उत्तराखंड ओपन स्कूलिंग</h2>
<p class=”result-class” id=”resultClassBadge”>हाई स्कूल (कक्षा 10)</p>
</div>
<div class=”student-info” id=”studentInfo”>
<!– स्टूडेंट की जानकारी यहां दिखेगी –>
</div>
<table class=”marks-table” id=”marksTable”>
<thead>
<tr>
<th>विषय (Subject)</th>
<th>प्राप्तांक (Obtained)</th>
<th>अधिकतम (Max)</th>
</tr>
</thead>
<tbody id=”marksBody”>
<!– विषय और अंक यहां दिखेंगे –>
</tbody>
</table>
<div class=”total-section” id=”totalSection”>
<!– टोटल, परसेंटेज और ग्रेड यहां दिखेंगे –>
</div>
<!– चार्ट कंटेनर –>
<div class=”chart-container”>
<canvas id=”resultChart”></canvas>
</div>
</div>
</div>
<script>
// ग्लोबल वेरिएबल्स
let currentClass = ‘highschool’;
let resultChart = null;
let studentsList = [];
// पेज लोड होने पर सेव डेटा लोड करें
window.onload = function() {
loadSavedData();
updateStats();
};
function switchClass(className) {
currentClass = className;
document.getElementById(‘btnHighschool’).classList.remove(‘active’);
document.getElementById(‘btnIntermediate’).classList.remove(‘active’);
const classBadge = document.getElementById(‘classBadge’);
const highschoolSubjects = document.getElementById(‘highschoolSubjects’);
const intermediateSubjects = document.getElementById(‘intermediateSubjects’);
const resultClassBadge = document.getElementById(‘resultClassBadge’);
if (className === ‘highschool’) {
document.getElementById(‘btnHighschool’).classList.add(‘active’);
classBadge.innerHTML = ‘<i class=”fas fa-school”></i> हाई स्कूल (कक्षा 10)’;
highschoolSubjects.style.display = ‘block’;
intermediateSubjects.style.display = ‘none’;
resultClassBadge.innerHTML = ‘हाई स्कूल (कक्षा 10)’;
} else {
document.getElementById(‘btnIntermediate’).classList.add(‘active’);
classBadge.innerHTML = ‘<i class=”fas fa-graduation-cap”></i> इंटरमीडिएट (कक्षा 12) – विज्ञान’;
highschoolSubjects.style.display = ‘none’;
intermediateSubjects.style.display = ‘block’;
resultClassBadge.innerHTML = ‘इंटरमीडिएट (कक्षा 12) – विज्ञान’;
}
loadSavedData();
}
function saveData() {
showLoading();
const studentData = {
class: currentClass,
name: document.getElementById(‘studentName’).value,
fatherName: document.getElementById(‘fatherName’).value,
motherName: document.getElementById(‘motherName’).value,
dob: document.getElementById(‘dob’).value,
rollNumber: document.getElementById(‘rollNumber’).value,
session: document.getElementById(‘session’).value,
timestamp: new Date().toISOString(),
subjects: []
};
if (currentClass === ‘highschool’) {
studentData.subjects = [
{ name: ‘हिंदी’, obtained: parseInt(document.getElementById(‘high_hindi_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_hindi_total’).value) || 100 },
{ name: ‘अंग्रेजी’, obtained: parseInt(document.getElementById(‘high_english_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_english_total’).value) || 100 },
{ name: ‘संस्कृत’, obtained: parseInt(document.getElementById(‘high_sanskrit_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_sanskrit_total’).value) || 100 },
{ name: ‘गणित’, obtained: parseInt(document.getElementById(‘high_math_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_math_total’).value) || 100 },
{ name: ‘विज्ञान’, obtained: parseInt(document.getElementById(‘high_science_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_science_total’).value) || 100 },
{ name: ‘सामाजिक विज्ञान’, obtained: parseInt(document.getElementById(‘high_social_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_social_total’).value) || 100 },
{ name: ‘ड्राइंग’, obtained: parseInt(document.getElementById(‘high_drawing_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_drawing_total’).value) || 100 },
{ name: ‘शारीरिक शिक्षा’, obtained: parseInt(document.getElementById(‘high_physical_obtained’).value) || 0, total: parseInt(document.getElementById(‘high_physical_total’).value) || 100 }
];
} else {
studentData.subjects = [
{ name: ‘हिंदी’, obtained: parseInt(document.getElementById(‘inter_hindi_obtained’).value) || 0, total: parseInt(document.getElementById(‘inter_hindi_total’).value) || 100 },
{ name: ‘अंग्रेजी’, obtained: parseInt(document.getElementById(‘inter_english_obtained’).value) || 0, total: parseInt(document.getElementById(‘inter_english_total’).value) || 100 },
{ name: ‘भौतिक विज्ञान’, obtained: parseInt(document.getElementById(‘inter_physics_obtained’).value) || 0, total: parseInt(document.getElementById(‘inter_physics_total’).value) || 100 },
{ name: ‘रसायन विज्ञान’, obtained: parseInt(document.getElementById(‘inter_chemistry_obtained’).value) || 0, total: parseInt(document.getElementById(‘inter_chemistry_total’).value) || 100 },
{ name: ‘जीव विज्ञान’, obtained: parseInt(document.getElementById(‘inter_biology_obtained’).value) || 0, total: parseInt(document.getElementById(‘inter_biology_total’).value) || 100 },
{ name: ‘गणित’, obtained: parseInt(document.getElementById(‘inter_math_obtained’).value) || 0, total: parseInt(document.getElementById(‘inter_math_total’).value) || 100 }
];
}
// पुराने डेटा को नए डेटा से बदलें (ओवरराइट करें)
localStorage.setItem(‘currentStudent’, JSON.stringify(studentData));
// छात्रों की लिस्ट में सेव करें
const savedStudents = localStorage.getItem(‘allStudents’);
let allStudents = savedStudents ? JSON.parse(savedStudents) : [];
// अगर इसी रोल नंबर का पुराना डेटा है तो उसे हटाएं
allStudents = allStudents.filter(s => s.rollNumber !== studentData.rollNumber);
// नया डेटा जोड़ें
allStudents.push(studentData);
// सभी छात्रों को सेव करें
localStorage.setItem(‘allStudents’, JSON.stringify(allStudents));
hideLoading();
showNotification(‘डेटा सफलतापूर्वक सेव हो गया है!’);
updateStats();
showResult();
}
function loadSavedData() {
const savedData = localStorage.getItem(‘currentStudent’);
if (savedData) {
const data = JSON.parse(savedData);
if (data.class !== currentClass) {
switchClass(data.class);
}
document.getElementById(‘studentName’).value = data.name || ”;
document.getElementById(‘fatherName’).value = data.fatherName || ”;
document.getElementById(‘motherName’).value = data.motherName || ”;
document.getElementById(‘dob’).value = data.dob || ”;
document.getElementById(‘rollNumber’).value = data.rollNumber || ”;
document.getElementById(‘session’).value = data.session || ‘2024-2025’;
if (data.subjects) {
data.subjects.forEach(subject => {
const subjectName = subject.name;
if (subjectName === ‘हिंदी’) {
if (data.class === ‘highschool’) {
document.getElementById(‘high_hindi_obtained’).value = subject.obtained;
document.getElementById(‘high_hindi_total’).value = subject.total;
} else {
document.getElementById(‘inter_hindi_obtained’).value = subject.obtained;
document.getElementById(‘inter_hindi_total’).value = subject.total;
}
} else if (subjectName === ‘अंग्रेजी’) {
if (data.class === ‘highschool’) {
document.getElementById(‘high_english_obtained’).value = subject.obtained;
document.getElementById(‘high_english_total’).value = subject.total;
} else {
document.getElementById(‘inter_english_obtained’).value = subject.obtained;
document.getElementById(‘inter_english_total’).value = subject.total;
}
} else if (subjectName === ‘संस्कृत’) {
document.getElementById(‘high_sanskrit_obtained’).value = subject.obtained;
document.getElementById(‘high_sanskrit_total’).value = subject.total;
} else if (subjectName === ‘गणित’ && data.class === ‘highschool’) {
document.getElementById(‘high_math_obtained’).value = subject.obtained;
document.getElementById(‘high_math_total’).value = subject.total;
} else if (subjectName === ‘गणित’ && data.class === ‘intermediate’) {
document.getElementById(‘inter_math_obtained’).value = subject.obtained;
document.getElementById(‘inter_math_total’).value = subject.total;
} else if (subjectName === ‘विज्ञान’) {
document.getElementById(‘high_science_obtained’).value = subject.obtained;
document.getElementById(‘high_science_total’).value = subject.total;
} else if (subjectName === ‘सामाजिक विज्ञान’) {
document.getElementById(‘high_social_obtained’).value = subject.obtained;
document.getElementById(‘high_social_total’).value = subject.total;
} else if (subjectName === ‘ड्राइंग’) {
document.getElementById(‘high_drawing_obtained’).value = subject.obtained;
document.getElementById(‘high_drawing_total’).value = subject.total;
} else if (subjectName === ‘शारीरिक शिक्षा’) {
document.getElementById(‘high_physical_obtained’).value = subject.obtained;
document.getElementById(‘high_physical_total’).value = subject.total;
} else if (subjectName === ‘भौतिक विज्ञान’) {
document.getElementById(‘inter_physics_obtained’).value = subject.obtained;
document.getElementById(‘inter_physics_total’).value = subject.total;
} else if (subjectName === ‘रसायन विज्ञान’) {
document.getElementById(‘inter_chemistry_obtained’).value = subject.obtained;
document.getElementById(‘inter_chemistry_total’).value = subject.total;
} else if (subjectName === ‘जीव विज्ञान’) {
document.getElementById(‘inter_biology_obtained’).value = subject.obtained;
document.getElementById(‘inter_biology_total’).value = subject.total;
}
});
}
}
}
function showResult() {
const savedData = localStorage.getItem(‘currentStudent’);
if (!savedData) {
showNotification(‘कोई डेटा सेव नहीं है!’, ‘error’);
return;
}
const data = JSON.parse(savedData);
// स्टूडेंट इंफो दिखाएं
document.getElementById(‘studentInfo’).innerHTML = `
<div class=”info-item”><label>रोल नंबर</label><span>${data.rollNumber || ‘—’}</span></div>
<div class=”info-item”><label>छात्र का नाम</label><span>${data.name || ‘—’}</span></div>
<div class=”info-item”><label>पिता का नाम</label><span>${data.fatherName || ‘—’}</span></div>
<div class=”info-item”><label>माता का नाम</label><span>${data.motherName || ‘—’}</span></div>
<div class=”info-item”><label>जन्म तिथि</label><span>${data.dob ? new Date(data.dob).toLocaleDateString(‘hi-IN’) : ‘—’}</span></div>
<div class=”info-item”><label>सत्र</label><span>${data.session || ‘2024-2025’}</span></div>
`;
// मार्क्स टेबल
const marksBody = document.getElementById(‘marksBody’);
marksBody.innerHTML = ”;
let totalObtained = 0;
let totalMax = 0;
data.subjects.forEach(subject => {
totalObtained += subject.obtained;
totalMax += subject.total;
marksBody.innerHTML += `
<tr>
<td>${subject.name}</td>
<td>${subject.obtained}</td>
<td>${subject.total}</td>
</tr>
`;
});
const percentage = totalMax > 0 ? ((totalObtained / totalMax) * 100).toFixed(2) : 0;
let grade = ”;
let gradeColor = ”;
if (percentage >= 90) { grade = ‘A+’; gradeColor = ‘#4CAF50’; }
else if (percentage >= 80) { grade = ‘A’; gradeColor = ‘#8BC34A’; }
else if (percentage >= 70) { grade = ‘B+’; gradeColor = ‘#FFC107’; }
else if (percentage >= 60) { grade = ‘B’; gradeColor = ‘#FF9800’; }
else if (percentage >= 50) { grade = ‘C+’; gradeColor = ‘#FF5722’; }
else if (percentage >= 40) { grade = ‘C’; gradeColor = ‘#F44336’; }
else if (percentage >= 33) { grade = ‘D’; gradeColor = ‘#D32F2F’; }
else { grade = ‘F’; gradeColor = ‘#B71C1C’; }
document.getElementById(‘totalSection’).innerHTML = `
<div class=”total-box”><p>कुल प्राप्तांक</p><h3>${totalObtained} / ${totalMax}</h3></div>
<div class=”percentage-box”><p>प्रतिशत</p><h3>${percentage}%</h3></div>
<div class=”grade-box” style=”background: ${gradeColor}”><p>ग्रेड</p><h3>${grade}</h3></div>
`;
// चार्ट अपडेट करें
updateChart(data.subjects);
}
function updateChart(subjects) {
if (resultChart) {
resultChart.destroy();
}
const ctx = document.getElementById(‘resultChart’).getContext(‘2d’);
resultChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: subjects.map(s => s.name),
datasets: [{
label: ‘प्राप्तांक’,
data: subjects.map(s => s.obtained),
backgroundColor: ‘rgba(102, 126, 234, 0.5)’,
borderColor: ‘rgba(102, 126, 234, 1)’,
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
legend: { display: true, position: ‘top’ },
title: { display: true, text: ‘विषयवार प्राप्तांक’ }
},
scales: {
y: { beginAtZero: true, max: 100 }
}
}
});
}
function updateStats() {
const allStudents = JSON.parse(localStorage.getItem(‘allStudents’) || ‘[]’);
document.getElementById(‘totalStudents’).innerText = allStudents.length;
if (allStudents.length > 0) {
let totalPercentage = 0;
allStudents.forEach(student => {
let totalObtained = student.subjects.reduce((sum, sub) => sum + sub.obtained, 0);
let totalMax = student.subjects.reduce((sum, sub) => sum + sub.total, 0);
totalPercentage += (totalObtained / totalMax) * 100;
});
const avgPercentage = (totalPercentage / allStudents.length).toFixed(2);
document.getElementById(‘avgPercentage’).innerText = avgPercentage + ‘%’;
}
}
function clearForm() {
document.getElementById(‘studentName’).value = ”;
document.getElementById(‘fatherName’).value = ”;
document.getElementById(‘motherName’).value = ”;
document.getElementById(‘dob’).value = ”;
document.getElementById(‘rollNumber’).value = ”;
const inputs = document.querySelectorAll(‘input[type=”number”]’);
inputs.forEach(input => input.value = ‘0’);
showNotification(‘फॉर्म साफ कर दिया गया है’);
}
function exportAsPDF() {
showNotification(‘PDF डाउनलोड शुरू हो रहा है…’);
// PDF डाउनलोड का कोड यहां जोड़ा जा सकता है
// इसके लिए आपको एक लाइब्रेरी (jsPDF) इम्पोर्ट करनी होगी
}
function showLoading() {
document.getElementById(‘loading’).classList.add(‘show’);
setTimeout(() => hideLoading(), 1000);
}
function hideLoading() {
document.getElementById(‘loading’).classList.remove(‘show’);
}
function showNotification(message, type = ‘success’) {
const notification = document.getElementById(‘notification’);
const messageSpan = document.getElementById(‘notificationMessage’);
messageSpan.innerText = message;
if (type === ‘error’) {
notification.style.background = ‘linear-gradient(135deg, #f093fb, #f5576c)’;
} else {
notification.style.background = ‘linear-gradient(135deg, #4facfe, #00f2fe)’;
}
notification.classList.add(‘show’);
setTimeout(() => {
notification.classList.remove(‘show’);
}, 3000);
}
// डेटा डिलीट न होने देने के लिए प्रीवेंट डिफॉल्ट
window.addEventListener(‘beforeunload’, function(e) {
// डेटा सेव रहेगा, कुछ नहीं होगा
});
</script>
</body>
</html>