Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Student Personality Analysis</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| </head> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: #f4f6f8; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .container { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .main-content { | |
| flex: 2; | |
| background: #ffffff; | |
| padding: 20px; | |
| border-radius: 6px; | |
| } | |
| .sidebar { | |
| flex: 1; | |
| background: #ffffff; | |
| padding: 20px; | |
| border-radius: 6px; | |
| } | |
| h1, h3 { | |
| margin-bottom: 15px; | |
| } | |
| /* ---------- FORM STYLING ---------- */ | |
| form label { | |
| display: block; | |
| margin-top: 10px; | |
| font-weight: bold; | |
| } | |
| form input { | |
| width: 100%; | |
| padding: 8px; | |
| margin-top: 5px; | |
| box-sizing: border-box; | |
| } | |
| button { | |
| margin-top: 15px; | |
| padding: 10px; | |
| width: 100%; | |
| background: #007bff; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| } | |
| button:hover { | |
| background: #0056b3; | |
| } | |
| /* ---------- TABLE STYLING ---------- */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 10px; | |
| } | |
| table, th, td { | |
| border: 1px solid #333; | |
| } | |
| th, td { | |
| padding: 8px; | |
| text-align: center; | |
| } | |
| th { | |
| background: #eaeaea; | |
| } | |
| /* ---------- RESULT BOX ---------- */ | |
| .result-box { | |
| border: 1px solid #333; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| background: #f9f9f9; | |
| } | |
| a { | |
| display: inline-block; | |
| margin-top: 10px; | |
| text-decoration: none; | |
| color: #007bff; | |
| } | |
| </style> | |
| <body> | |
| <div class="container"> | |
| <!-- Main Content: Form and Result --> | |
| <div class="main-content"> | |
| <div> | |
| <h1>Student Personality Analysis</h1> | |
| </div> | |
| <% if (result) { %> | |
| <div class="result-box"> | |
| <h3>Analysis Result</h3> | |
| <p><strong>Student Name:</strong> <%= result.name %></p> | |
| <p><strong>Average Marks:</strong> <%= result.avg %></p> | |
| <p> | |
| <strong>Grade Achieved:</strong> | |
| <span><%= result.grade %></span> | |
| </p> | |
| <p><strong>Personality Trait:</strong> <%= result.trait %></p> | |
| <br /> | |
| <a href="/">Analyze Another Student</a> | |
| </div> | |
| <% } %> | |
| <div> | |
| <h3>Enter Marks</h3> | |
| <form action="/result" method="post"> | |
| <label for="name">Student Name</label> | |
| <input | |
| type="text" | |
| name="name" | |
| placeholder="Enter Name" | |
| required | |
| /> | |
| <br> | |
| <label for="sub1">Subject 1 Marks</label> | |
| <input | |
| type="number" | |
| name="sub1" | |
| placeholder="0-100" | |
| min="0" | |
| max="100" | |
| required | |
| /> | |
| <br> | |
| <label for="sub2">Subject 2 Marks</label> | |
| <input | |
| type="number" | |
| name="sub2" | |
| placeholder="0-100" | |
| min="0" | |
| max="100" | |
| required | |
| /> | |
| <br> | |
| <label for="sub3">Subject 3 Marks</label> | |
| <input | |
| type="number" | |
| name="sub3" | |
| placeholder="0-100" | |
| min="0" | |
| max="100" | |
| required | |
| /> | |
| <br> | |
| <button type="submit">Analyze Personality</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="sidebar"> | |
| <div> | |
| <h3>Recent Analysis</h3> | |
| <% if (history && history.length > 0) { %> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Sub1</th> | |
| <th>Sub2</th> | |
| <th>Sub3</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <% history.forEach(function(h) { %> | |
| <tr> | |
| <td><%= h.name %></td> | |
| <td><%= h.subject1 %></td> | |
| <td><%= h.subject2 %></td> | |
| <td><%= h.subject3 %></td> | |
| </tr> | |
| <% }); %> | |
| </tbody> | |
| </table> | |
| <% } else { %> | |
| <p>No history yet.</p> | |
| <% } %> | |
| </div> | |
| <div> | |
| <h3>Grade Rules</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Range</th> | |
| <th>Grade</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <% rules.forEach(function(r) { %> | |
| <tr> | |
| <td><%= r.min_avg %> - <%= r.max_avg %></td> | |
| <td><%= r.grade %></td> | |
| </tr> | |
| <% }); %> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div> | |
| <h3>Personality Traits</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Grade</th> | |
| <th>Trait</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <% traits.forEach(function(t) { %> | |
| <tr> | |
| <td><%= t.grade %></td> | |
| <td><%= t.trait %></td> | |
| </tr> | |
| <% }); %> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |