StudentQRSystem/add.html at main · Rafananz/StudentQRSystem · 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
<!DOCTYPE html>
<html>
<head>
    <title>Add Student — Student Management System</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>

<header class="site-header">
    <div class="logo">🎓 <span>Student</span>QR System</div>
</header>

<div class="page">
    <div class="page-title">Add / Edit Student</div>
    <div class="page-subtitle">Fill in the student information below and save to generate a QR code.</div>

    <div class="card">
        <form id="studentForm">

            <div class="form-section">
                <div class="form-section-title">Student Photo</div>
                <div class="form-grid full">
                    <div class="form-group">
                        <label for="photo">Student Photo</label>
                        <input type="file" id="photo" accept="image/*">
                        <img id="photoPreview" src="" alt="Preview" style="display:none; margin-top:10px; width:150px; height:150px; object-fit:cover; border-radius:8px; border:1px solid #ccc;">
                        <button type="button" id="removePhotoBtn" class="btn btn-outline" style="display:none; margin-top:8px;">🗑️ Remove Photo</button>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="form-section-title">Student Identification</div>
                <div class="form-grid full">
                    <div class="form-group">
                        <label for="id">Student ID</label>
                        <input type="text" id="id" placeholder="e.g. 2024-00123" required>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="form-section-title">Personal Information</div>
                <div class="form-grid">
                    <div class="form-group">
                        <label for="fname">First Name</label>
                        <input type="text" id="fname" placeholder="First Name" required>
                    </div>
                    <div class="form-group">
                        <label for="lname">Last Name</label>
                        <input type="text" id="lname" placeholder="Last Name" required>
                    </div>
                    <div class="form-group">
                        <label for="mname">Middle Name</label>
                        <input type="text" id="mname" placeholder="Middle Name">
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" id="address" placeholder="House No., Street, Barangay, City">
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="form-section-title">Academic Information</div>
                <div class="form-grid">
                    <div class="form-group">
                        <label for="year">Grade</label>
                        <input type="text" id="year" placeholder="e.g. 12" required>
                    </div>
                    <div class="form-group">
                        <label for="section">Section</label>
                        <input type="text" id="section" placeholder="e.g. Section A" required>
                    </div>
                    <div class="form-group">
                        <label for="school">School</label>
                        <input type="text" id="school" placeholder="e.g. Jose Rizal High School">
                    </div>
                </div>
            </div>

            <div class="form-section">
    <div class="form-section-title">Contact Information</div>
    <div class="form-grid">
        <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" id="email" placeholder="email@school.edu">
        </div>
        <div class="form-group">
            <label for="adviser">Adviser</label>
            <input type="text" id="adviser" placeholder="Adviser's Full Name">
        </div>
        <div class="form-group">
            <label for="guardianName">Guardian Name</label>
            <input type="text" id="guardianName" placeholder="Guardian's Full Name">
        </div>
        <div class="form-group">
            <label for="emergencycontact">Emergency Contact Number</label>
            <input type="text" id="emergencycontact" placeholder="09XX-XXX-XXXX">
        </div>
    </div>
</div>
            <div class="form-actions">
                <button type="button" class="btn btn-outline" onclick="window.location='index.html'">Cancel</button>
                <button type="submit" class="btn btn-primary">💾 Save Student</button>
            </div>

        </form>
    </div>
</div>

<!-- QR Modal -->
<div id="qrModal">
    <div id="qrBox">
        <div class="modal-header">
            <h2>🎓 Student QR Code Generated</h2>
            <p>Scan to view student profile</p>
        </div>
        <div id="qrcode"></div>
        <div class="modal-actions">
            <button class="btn btn-success" onclick="window.print()">🖨️ Print QR</button>
            <button class="btn btn-secondary" id="closeBtn">Close</button>
        </div>
    </div>
</div>

<script type="module" src="js/add.js"></script>
</body>
</html>