team-25/teacher.html at main · ideathon-2023/team-25 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Punjab Engineering College - Teacher Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #121212; /* Dark background color */
      color: #ffffff; /* White text color */
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      background-color: #1e1e1e; /* Dark container background color */
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
      max-width: 600px;
      width: 90%;
      text-align: center;
      animation: fadeIn 1s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    h1 {
      margin-bottom: 20px;
      font-size: 32px;
    }

    h2 {
      margin-bottom: 40px;
      font-size: 24px;
    }

    .attendance {
      margin-bottom: 40px;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    label {
      font-size: 18px;
      margin-bottom: 5px;
    }

    select,
    button {
      background-color: #3f51b5; /* Change select and button color if desired */
      color: #ffffff; /* White text color */
      border: none;
      border-radius: 4px;
      padding: 10px 20px;
      font-size: 16px;
      margin: 10px;
      width: 100%;
    }

    button {
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #1a237e; /* Change button hover color if desired */
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Welcome to Punjab Engineering College</h1>
    <p id="greeting">Hi, Teacher</p>
    <div class="attendance">
      <h2>Mark Attendance</h2>
      <form onsubmit="markAttendance(event)">
        <label for="sid">Select SID:</label>
        <select id="sid">
          <option value="101">101</option>
          <option value="102">102</option>
          <option value="103">103</option>
          <option value="104">104</option>
          <option value="105">105</option>
          <!-- Add more SIDs as needed -->
        </select>
        <label for="status">Attendance Status:</label>
        <select id="status">
          <option value="present">Present</option>
          <option value="absent">Absent</option>
        </select>
        <button type="submit">Submit</button>
      </form>
    </div>
    <button onclick="redirectToHome()">Logout</button>
  </div>

  <script>
    function markAttendance(event) {
      event.preventDefault();
      const selectedSID = document.getElementById('sid').value;
      const attendanceStatus = document.getElementById('status').value;
      // Logic to update attendance for selectedSID
      // You can use AJAX or other server-side methods to save the data
      alert(`Attendance for SID ${selectedSID} is marked as ${attendanceStatus}.`);
    }

    function redirectToHome() {
      window.location.href = 'index.html';
    }
  </script>
</body>

</html>