refactor: simplify UI to basic design

public/css/style.css

@@ -1,126 +1,42 @@
-:root {
-  --glass-bg: rgba(255, 255, 255, 0.15);
-  --glass-border: rgba(255, 255, 255, 0.2);
-  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-  --text-color: #333;
-  --primary-color: #4a90e2;
-}
-
 body {
-  margin: 0;
-  padding: 0;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding-top: 50px;
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
-  max-width: 1200px;
-  width: 95%;
-}
-
-.main-content {
-  flex: 2;
-  min-width: 300px;
-}
-
-.sidebar {
-  flex: 1;
-  min-width: 300px;
-}
-
-.glass-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 15px;
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-  padding: 25px;
-  margin-bottom: 25px;
-}
-
-h2,
-h3 {
-  margin-top: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-form label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
+  font-family: sans-serif;
+  padding: 20px;
+  background-color: #fff;
+  color: #000;
 }
 
-form input {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 15px;
-  border-radius: 8px;
-  border: none;
-  background: rgba(255, 255, 255, 0.9);
-  box-sizing: border-box;
-  font-size: 16px;
+h1, h2, h3 {
+  margin-top: 20px;
 }
 
-button {
+table {
   width: 100%;
-  padding: 12px;
-  background: #ff7e5f;
-  background: linear-gradient(to right, #feb47b, #ff7e5f);
-  border: none;
-  border-radius: 8px;
-  color: white;
-  font-size: 18px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-button:hover {
-  transform: scale(1.02);
+  border-collapse: collapse;
+  margin-bottom: 20px;
 }
 
-.result-box {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  padding: 20px;
-  border-left: 5px solid #4cd137;
+table, th, td {
+  border: 1px solid #000;
 }
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  overflow: hidden;
+th, td {
+  padding: 8px;
+  text-align: left;
 }
 
-th,
-td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+input, button {
+  padding: 5px;
+  margin-bottom: 10px;
 }
 
-th {
-  background-color: rgba(0, 0, 0, 0.2);
+.container {
+  max-width: 800px;
+  margin: 0 auto;
 }
 
-.badge {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.2);
-  font-size: 0.9em;
+.result-box {
+  border: 1px solid #000;
+  padding: 10px;
+  margin: 20px 0;
+  background-color: #f0f0f0;
 }

views/index.ejs

@@ -9,8 +9,8 @@
     <div class="container">
       <!-- Main Content: Form and Result -->
       <div class="main-content">
-        <div class="glass-card">
-          <h1>🎓 Student Personality Analysis</h1>
+        <div>
+          <h1>Student Personality Analysis</h1>
           <p>
             Enter marks to determine personality traits based on academic
             performance.
@@ -18,23 +18,21 @@
         </div>
 
         <% if (result) { %>
-        <div class="glass-card result-box">
-          <h3>🎯 Analysis Result</h3>
+        <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 class="badge"><%= result.grade %></span>
+            <span><%= result.grade %></span>
           </p>
           <p><strong>Personality Trait:</strong> <%= result.trait %></p>
           <br />
-          <a href="/" style="color: #fff; text-decoration: underline"
-            >Analyze Another Student</a
-          >
+          <a href="/">Analyze Another Student</a>
         </div>
         <% } %>
 
-        <div class="glass-card">
+        <div>
           <h3>Enter Marks</h3>
           <form action="/result" method="post">
             <label for="name">Student Name</label>
@@ -44,6 +42,7 @@
               placeholder="e.g. Inderjeet"
               required
             />
+            <br>
 
             <label for="sub1">Subject 1 Marks (0-100)</label>
             <input
@@ -54,6 +53,7 @@
               max="100"
               required
             />
+            <br>
 
             <label for="sub2">Subject 2 Marks (0-100)</label>
             <input
@@ -64,6 +64,7 @@
               max="100"
               required
             />
+            <br>
 
             <label for="sub3">Subject 3 Marks (0-100)</label>
             <input
@@ -74,6 +75,7 @@
               max="100"
               required
             />
+            <br>
 
             <button type="submit">Analyze Personality</button>
           </form>
@@ -82,8 +84,8 @@
 
       <!-- Sidebar: Reference Tables & History -->
       <div class="sidebar">
-        <div class="glass-card">
-          <h3>📜 Recent Analysis History</h3>
+        <div>
+          <h3>Recent Analysis History</h3>
           <% if (history && history.length > 0) { %>
           <table>
             <thead>
@@ -110,8 +112,8 @@
           <% } %>
         </div>
 
-        <div class="glass-card">
-          <h3>📊 Grade Rules</h3>
+        <div>
+          <h3>Grade Rules</h3>
           <table>
             <thead>
               <tr>
@@ -130,8 +132,8 @@
           </table>
         </div>
 
-        <div class="glass-card">
-          <h3>🧠 Personality Traits</h3>
+        <div>
+          <h3>Personality Traits</h3>
           <table>
             <thead>
               <tr>