pennywise/options.html at main · shivam-ajmera/pennywise · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="./css/options.css">
  <title>Pennywise Settings</title>
  <script src="./js/ical.min.js"></script>
</head>
<body>
  <div class="settings-container">
    <div class="section">
      <h1>1. Upload your calendar</h1>
      <p>Enter a link to your class schedule (iCal address ending with .ics):</p>
      <div id="help-instructions">
        <li>For Google Calendar: Settings > Select a calendar > Integrate calendar > Copy 'Public address in iCal format'</li>
        <li>For UWaterloo students: Visit <a href="https://portal.uwaterloo.ca/#/calendar">Portal Calendar</a> > Click on the 3 dots > Export Calendar</li>
      </div>
      <!-- <input type="file" id="calendar-file" accept=".ics"> -->
      <input type="text" id="calendar-url" placeholder="Enter .ics file URL">
      <button type="button" id="uploadBtn">Upload schedule</button>
      <p id="upload-message"></p>
    </div>

    <div class="section">
      <h1>2. Enter all keywords to search for</h1>
      <div class="suggestions-container">
        <span>Suggestions (Click to add):</span>
        <div id="suggestions"></div>
      </div>
      <input type="text" id="nameInput" placeholder="Keyword to match (eg: 'P 101' in SMP 101)">
      <button id="addNameBtn">Add Keyword</button>
      <table id="name-table">
        <thead>
            <th>Keyword</th>
            <th>Number of Matches found in calendar</th>
            <th>Action</th>
        </thead>
      </table>
    </div>

    <div class="section">
      <h1>3. Enter your tuition cost for the uploaded schedule</h1>
      <input type="number" id="tuitionInput" placeholder="Input your total tuition for calendar (eg: 5000)" min="0">
      <button id="tuitionBtn">Submit</button>
      <p id="tuition-result"></p>
    </div>

    <div class="section">
      <label>
        <input type="checkbox" id="toggleNewTab"> Enable new tab with your class cost overview and calendar for quick access.
    </label>
    </div>

    <div class="section">
      <h1>Default Time View (for new tab)</h1>
      <label><input type="radio" name="defaultTimeRange" value="on" id="day">Per Day</label>
      <label><input type="radio" name="defaultTimeRange" value="off" id="night">Per Month</label>
    </div>

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