-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (120 loc) · 4.25 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Student ID</title>
<link rel="icon" href="favicon.png" type="image/png" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
rel="stylesheet"
/>
<link href="./css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner" class="banner top full">
<p>
This web page is to be used for instructional purposes. The data entered
is stored as meta data with your image on the course's Cloudinary
account. We ask that you don't share the link to this site publicly. You
can remove your data from this page by supplying the first name and last
name associated with your picture. This will open your email app and it
will be forwarded to training for deletion.
</p>
<p>
To delete your image and data from this page, provide first name and
last name used to create Student id:
<input type="text" id="delete-fname" placeholder="First Name" />
<input type="text" id="delete-lname" placeholder="Last name" />
<button type="button" id="delete-btn">Delete</button>
</p>
<a class="close-msg" href="#">OK</a>
</div>
<h1>
<span id="course-title">Fundamentals For Developers</span>
<span id="course-date">August 2020</span>
</h1>
<h2>Create a Badge</h2>
<form class="form-inline">
<label for="fname">First name:</label><br />
<input
type="text"
id="fname"
name="fname"
value=""
size="12"
maxlength="11"
placeholder="First name"
/><br />
<label for="lname">Last name:</label><br />
<input
type="text"
id="lname"
name="lname"
value=""
size="12"
maxlength="11"
placeholder="Last name"
/><br />
<label for="title">Title:</label><br />
<input
type="text"
id="title"
name="title"
value=""
size="12"
maxlength="22"
placeholder="Title"
/><br />
<label for="org">Organization:</label><br />
<input
type="text"
id="org"
name="org"
value=""
size="12"
maxlength="22"
placeholder="Organization"
/><br />
<br />
<label for="bgcolor">Background color:</label><br />
<!-- <input type="text" id="fcolor" name="fcolor" value="" size="12" maxlength="22" placeholder="Favorite color"><br> -->
<div class="color-container">
<input type="radio" name="bgcolor" id="y1" value="FFD4C4" />
<label class="color" for="y1"><span class="y1"></span></label>
<input type="radio" name="bgcolor" id="y2" value="F7BC00" />
<label class="color" for="y2"><span class="y2"></span></label>
<input type="radio" name="bgcolor" id="y3" value="FF5050" />
<label class="color" for="y3"><span class="y3"></span></label>
<input type="radio" name="bgcolor" id="b1" value="B6D2FF" />
<label class="color" for="b1"><span class="b1"></span></label>
<input type="radio" name="bgcolor" id="b2" value="3448C5" />
<label class="color" for="b2"><span class="b2"></span></label>
<input type="radio" name="bgcolor" id="b3" value="0C163B" />
<label class="color" for="b3"><span class="b3"></span></label>
</div>
<button id="upload" type="button">Upload Image</button>
</form>
<div class="child-page-listing">
<h2>Badge Gallery</h2>
<div id="gallery" class="grid-container"></div>
<!-- end grid container -->
</div>
<script src="./js/lodash.min.js" type="text/javascript"></script>
<script src="./js/cloudinary-core.js" type="text/javascript"></script>
<script
src="https://widget.cloudinary.com/v2.0/global/all.js"
type="text/javascript"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/toastify-js"
></script>
<script src="./js/upload.js"></script>
</body>
</html>