UPSASRS/new-request.html at main · majorie-jubiril/UPSASRS · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UPSASRS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- PLATFORM HEADER -->
  <div id="header-placeholder"></div>

  <div class="container new-request-page">

    <!-- REQUEST CONTEXT ROW -->
    <div class="request-header-row">
      <div class="request-context">
        <span class="back-arrow">←</span>
        <div>
          <h3>Request Type</h3>
          <p id="stepIndicator">Step 1 of 5</p>
        </div>
      </div>

      <button id="continueBtn" class="primary-btn" disabled>
        Continue
      </button>
    </div>

    <!-- PROGRESS INDICATOR -->
    <div class="progress-steps">
      <div class="step-dot"></div>
      <div class="step-dot"></div>
      <div class="step-dot"></div>
      <div class="step-dot"></div>
      <div class="step-dot"></div>
    </div>

    <!-- TRACKING PANEL -->
    <div id="trackingPanel" class="tracking hidden">
      <h3>Request Status</h3>
      <div id="statusStepper" class="stepper"></div>
      <p id="statusMessage"></p>

      <div id="paymentStatusCard" class="status-card hidden">
        <h4>Payment</h4>
        <p id="paymentText">No payment yet</p>
        <span id="paymentBadge"></span>
      </div>

      <div id="deliveryStatusCard" class="status-card hidden">
        <h4>Delivery</h4>
        <p id="deliveryText"></p>
      </div>
    </div>

    <!-- STEP 1 -->
    <div id="step1" class="step">

      <div class="request-panel">

        <h2>Select Request Type</h2>

        <div class="request-options-container">

          <!-- CARD -->
          <div class="request-card" data-type="transcript">
            <div class="icon">📄</div>
            <div class="card-content">
              <h4>Transcript Request</h4>
              <p>Official academic transcript</p>
            </div>
          </div>

          <div class="request-card" data-type="introductory_letter">
            <div class="icon">📘</div>
            <div class="card-content">
              <h4>Introductory Letter</h4>
              <p>Letter of introduction</p>
            </div>
          </div>

          <div class="request-card" data-type="attestation">
            <div class="icon">🎓</div>
            <div class="card-content">
              <h4>Attestation Letter</h4>
              <p>Letter of attestation</p>
            </div>
          </div>

          <div class="request-card" data-type="id_card">
            <div class="icon">🪪</div>
            <div class="card-content">
              <h4>ID Card Replacement</h4>
              <p>Student ID replacement</p>
            </div>
          </div>

          <div class="request-card" data-type="english_proficiency">
            <div class="icon">🌍</div>
            <div class="card-content">
              <h4>English Proficiency Letter</h4>
              <p>Proof of English proficiency</p>
            </div>
          </div>

          <div class="request-card" data-type="remarking">
            <div class="icon">📝</div>
            <div class="card-content">
              <h4>Remarking of Scripts</h4>
              <p>Request for script review</p>
            </div>
          </div>

          <div class="request-card" data-type="refund">
            <div class="icon">💰</div>
            <div class="card-content">
              <h4>Request for Refund</h4>
              <p>Fee refund request</p>
            </div>
          </div>

        </div> <!-- ✅ request-options-container -->

      </div> <!-- ✅ request-panel -->

    </div> <!-- ✅ step1 -->

    <!-- STEP 2 -->
    <div id="step2" class="step hidden">
      <h2>Request Details</h2>

      <div id="formContainer"></div>

      <div class="actions">
        <button id="backBtn">Back</button>
        <button id="nextBtn" disabled>Continue</button>
      </div>
    </div>

    <!-- STEP 3 -->
    <div id="step3" class="step hidden">
      <h2>Review & Submit</h2>

      <div id="summary"></div>

      <p><em>Please review your details and ensure your uploaded disbursement slip is correct before submitting.</em></p>

      <div class="actions">
        <button id="backToStep4Btn">Back</button>
        <button id="submitBtn">Confirm & Submit Request</button>
      </div>
    </div>

    <!-- STEP 4 -->
    <div id="step4" class="step hidden">
      <h2>Payment & Proof Upload</h2>

      <p>Please complete payment via UFIS and upload disbursement slip.</p>

      <a href="https://student.upsa-ufis.com/#/auth/login" target="_blank" id="ufisLink">
        Go to UFIS Payment Portal
      </a>

      <br><br>

      <label>Upload Disbursement Slip</label>
      <input type="file" id="disbursementSlip">

      <br><br>

      <button id="submitFinalBtn" disabled>Submit Request</button>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>