-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
148 lines (148 loc) · 3.51 KB
/
popup.html
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
<!DOCTYPE html>
<html>
<head>
<title>BU Nexus</title>
<link rel="stylesheet" href="index.css" />
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="popup">
<div
class="
w-full
py-2
bg-blue-200
flex
items-center
justify-center
text-md
font-bold
"
>
BUNexus Extension
</div>
<div
id="firstPage"
class="w-full h-full flex items-center justify-center flex-col"
>
<p class="w-2/3 mb-2">Before we grab your data we need your BU ID:</p>
<div
id="BUID"
class="
flex
w-2/3
items-center
justify-center
h-10
rounded-sm
px-3
my-2
border
rounded-sm
border-gray-500
focus-within:border-blue-500
group
"
>
<span class="font-bold">U</span>
<input
id="buidinput"
type="number"
autofocus
class="bg-transparent w-full focus:outline-none text-gray-700"
/>
</div>
<p class="text-red-500 text-sm w-2/3 hidden" id="wrongBUID">
ERR: Please make sure your BU ID is correct.
</p>
<button
id="clickIt"
class="
w-2/3
h-10
border border-gray-500
cursor-pointer
rounded-sm
bg-transparent
hover:text-green-700
hover:border-green-500
hover:font-bold
transition-colors
delay-100
focus:outline-none
mt-2
"
>
Grab data
</button>
</div>
<div
id="loading"
class="w-full h-full flex items-center justify-center flex-col hidden"
>
<div id="loading-spinner"></div>
<p class="text-center w-full mt-2">Grabbing your classes...</p>
</div>
<div
id="confirmData"
class="w-full h-full flex items-center justify-center flex-col hidden"
>
<p class="info w-2/3 mb-1">This is the data we will save:</p>
<p id="savedBUID" class="w-2/3 mb-1"></p>
<p id="classesLabel" class="w-2/3 mb-1 text-blue-500 font-bold">
Classes:
</p>
<div
id="allClasses"
class="
w-2/3
overflow-y-hidden overflow-x-auto
mb-3
flex
items-center
p-1
pr-0
"
></div>
<button
id="confirmButton"
class="
w-2/3
h-10
border border-gray-500
cursor-pointer
rounded-sm
bg-transparent
hover:text-green-700
hover:border-green-500
hover:font-bold
transition-colors
delay-100
focus:outline-none
"
>
Accept
</button>
<button
class="
cursor-pointer
border-none
bg-transparent
text-blue-500 text-sm
mt-1
text-left
w-2/3
hover:text-blue-700
"
id="retry"
>
Are the classes wrong? Retry
</button>
</div>
</div>
</body>
<script src="content.js"></script>
</html>