Skullwanderer/marksmaster-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Module Registration | MarksMaster Pro</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12</head>13<body class="bg-gray-900 text-white">14 <!-- Header Component -->15 <custom-header></custom-header>16 17 <!-- Main Content -->18 <main class="container mx-auto px-4 py-8">19 <div class="mb-8">20 <h1 class="text-3xl font-bold mb-2">Module Registration</h1>21 <p class="text-gray-400">Register new modules for the Diploma in IT program</p>22 </div>23 24 <!-- Module Registration Form -->25 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">26 <div class="bg-gray-800 rounded-lg p-6 shadow-lg">27 <h2 class="text-xl font-semibold mb-6">Register New Module</h2>28 <form id="moduleForm">29 <div class="mb-6">30 <label class="form-label">Module Code</label>31 <input type="text" class="form-input" placeholder="DIT101" required>32 </div>33 34 <div class="mb-6">35 <label class="form-label">Module Name</label>36 <input type="text" class="form-input" placeholder="Database Systems" required>37 </div>38 39 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">40 <div>41 <label class="form-label">Credits</label>42 <input type="number" class="form-input" min="1" max="30" value="15" required>43 </div>44 <div>45 <label class="form-label">Semester</label>46 <select class="form-input" required>47 <option>Semester 1</option>48 <option>Semester 2</option>49 <option>Semester 3</option>50 </select>51 </div>52 </div>53 54 <div class="mb-6">55 <label class="form-label">Assessment Weightage</label>56 <div class="grid grid-cols-2 gap-4">57 <div>58 <label class="form-label text-sm">Coursework (%)</label>59 <input type="number" class="form-input" min="0" max="100" value="40" required>60 </div>61 <div>62 <label class="form-label text-sm">Exam (%)</label>63 <input type="number" class="form-input" min="0" max="100" value="60" required>64 </div>65 </div>66 </div>67 68 <div class="mb-6">69 <label class="form-label">Pass Mark</label>70 <input type="number" class="form-input" min="0" max="100" value="40" required>71 </div>72 73 <div class="mb-6">74 <label class="form-label">Description</label>75 <textarea class="form-input" rows="3" placeholder="Brief description of the module..."></textarea>76 </div>77 78 <button type="submit" class="btn-primary w-full flex items-center justify-center gap-2">79 <i data-feather="plus-circle"></i>80 Register Module81 </button>82 </form>83 </div>84 85 <!-- Module List -->86 <div class="bg-gray-800 rounded-lg p-6 shadow-lg">87 <div class="flex justify-between items-center mb-6">88 <h2 class="text-xl font-semibold">Active Modules</h2>89 <div class="relative">90 <input type="text" class="form-input pl-10" placeholder="Search modules...">91 <i data-feather="search" class="absolute left-3 top-3 text-gray-500"></i>92 </div>93 </div>94 95 <div class="space-y-4">96 <div class="border border-gray-700 rounded-lg p-4">97 <div class="flex justify-between">98 <h3 class="font-semibold">Database Systems</h3>99 <span class="badge badge-pass">Active</span>100 </div>101 <p class="text-gray-400 text-sm mt-1">DIT101 • 15 Credits • Semester 1</p>102 <div class="flex justify-between mt-3 text-sm">103 <span>Coursework: 40%</span>104 <span>Exam: 60%</span>105 <span>Pass: 40%</span>106 </div>107 </div>108 109 <div class="border border-gray-700 rounded-lg p-4">110 <div class="flex justify-between">111 <h3 class="font-semibold">Web Development</h3>112 <span class="badge badge-pass">Active</span>113 </div>114 <p class="text-gray-400 text-sm mt-1">DIT102 • 15 Credits • Semester 1</p>115 <div class="flex justify-between mt-3 text-sm">116 <span>Coursework: 50%</span>117 <span>Exam: 50%</span>118 <span>Pass: 40%</span>119 </div>120 </div>121 122 <div class="border border-gray-700 rounded-lg p-4">123 <div class="flex justify-between">124 <h3 class="font-semibold">Network Security</h3>125 <span class="badge badge-pass">Active</span>126 </div>127 <p class="text-gray-400 text-sm mt-1">DIT103 • 15 Credits • Semester 2</p>128 <div class="flex justify-between mt-3 text-sm">129 <span>Coursework: 30%</span>130 <span>Exam: 70%</span>131 <span>Pass: 40%</span>132 </div>133 </div>134 135 <div class="border border-gray-700 rounded-lg p-4">136 <div class="flex justify-between">137 <h3 class="font-semibold">Software Engineering</h3>138 <span class="badge badge-pass">Active</span>139 </div>140 <p class="text-gray-400 text-sm mt-1">DIT104 • 15 Credits • Semester 2</p>141 <div class="flex justify-between mt-3 text-sm">142 <span>Coursework: 40%</span>143 <span>Exam: 60%</span>144 <span>Pass: 40%</span>145 </div>146 </div>147 </div>148 </div>149 </div>150 </main>151 152 <!-- Footer Component -->153 <custom-footer></custom-footer>154 155 <script src="components/header.js"></script>156 <script src="components/footer.js"></script>157 <script src="script.js"></script>158 <script>feather.replace();</script>159</body>160</html>