Spaces:
Sleeping
Sleeping
| <html><head><base href="https:/nptel-score-calculator/"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NPTEL Score Calculator | Hacker's Edition</title> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| background-color: #001a00; | |
| color: #00ff00; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| background-color: #002200; | |
| border: 2px solid #00ff00; | |
| border-radius: 10px; | |
| padding: 20px; | |
| max-width: 600px; | |
| width: 100%; | |
| box-shadow: 0 0 20px rgba(0, 255, 0, 0.2); | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| text-shadow: 0 0 5px #00ff00; | |
| } | |
| .input-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| input[type="number"] { | |
| width: 100%; | |
| padding: 5px; | |
| background-color: #001a00; | |
| border: 1px solid #00ff00; | |
| color: #00ff00; | |
| font-family: inherit; | |
| } | |
| button { | |
| background-color: #004400; | |
| color: #00ff00; | |
| border: none; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| font-family: inherit; | |
| font-size: 16px; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #006600; | |
| } | |
| #result { | |
| margin-top: 20px; | |
| padding: 10px; | |
| border: 1px solid #00ff00; | |
| background-color: #001a00; | |
| } | |
| .terminal { | |
| position: relative; | |
| padding: 20px; | |
| background-color: #001100; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| overflow: hidden; | |
| } | |
| .terminal::before { | |
| content: "> Sai Somnath Rachamadugu"; | |
| display: block; | |
| margin-bottom: 10px; | |
| color: #00aa00; | |
| } | |
| .terminal::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| rgba(0, 255, 0, 0.03) 0px, | |
| rgba(0, 255, 0, 0.03) 1px, | |
| transparent 1px, | |
| transparent 2px | |
| ); | |
| pointer-events: none; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: 20px; | |
| background-color: #00ff00; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @media (max-width: 480px) { | |
| .input-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="terminal"> | |
| <h1>NPTEL Score Calculator</h1> | |
| <p>Enter your weekly scores below (0-100):</p> | |
| </div> | |
| <div class="input-container"> | |
| <input type="number" id="week1" min="0" max="100" placeholder="Week 1"> | |
| <input type="number" id="week2" min="0" max="100" placeholder="Week 2"> | |
| <input type="number" id="week3" min="0" max="100" placeholder="Week 3"> | |
| <input type="number" id="week4" min="0" max="100" placeholder="Week 4"> | |
| <input type="number" id="week5" min="0" max="100" placeholder="Week 5"> | |
| <input type="number" id="week6" min="0" max="100" placeholder="Week 6"> | |
| <input type="number" id="week7" min="0" max="100" placeholder="Week 7"> | |
| <input type="number" id="week8" min="0" max="100" placeholder="Week 8"> | |
| </div> | |
| <button onclick="calculateScore()">Calculate Score</button> | |
| <button onclick="resetFields()">Reset</button> | |
| <div id="result"></div> | |
| </div> | |
| <script> | |
| function calculateScore() { | |
| const scores = []; | |
| let totalScore = 0; | |
| let validScores = 0; | |
| for (let i = 1; i <= 8; i++) { | |
| const score = parseInt(document.getElementById(week${i}).value); | |
| if (!isNaN(score) && score >= 0 && score <= 100) { | |
| scores.push(score); | |
| totalScore += score; | |
| validScores++; | |
| } | |
| } | |
| if (validScores === 0) { | |
| document.getElementById('result').innerHTML = "Please enter at least one valid score."; | |
| return; | |
| } | |
| let finalScore; | |
| if (validScores === 8) { | |
| finalScore = (totalScore / 800) * 25; | |
| } else if (validScores === 7) { | |
| finalScore = (totalScore / 700) * 25; | |
| } else { | |
| document.getElementById('result').innerHTML = "Please enter scores for either 7 or 8 weeks."; | |
| return; | |
| } | |
| const passed = finalScore >= 10; | |
| const resultColor = passed ? "#00ff00" : "#ff0000"; | |
| document.getElementById('result').innerHTML = ` | |
| <p>Total Score: ${totalScore}</p> | |
| <p>Final Score (out of 25): ${finalScore.toFixed(2)}</p> | |
| <p style="color: ${resultColor}"> | |
| ${passed ? "Congratulations! You have passed." : "Sorry, you have failed. Better luck next time!"} | |
| </p> | |
| <span class="cursor"></span> | |
| `; | |
| } | |
| function resetFields() { | |
| for (let i = 1; i <= 8; i++) { | |
| document.getElementById(week${i}).value = ""; | |
| } | |
| document.getElementById('result').innerHTML = ""; | |
| } | |
| </script> | |
| </body></html> |