-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (68 loc) · 3.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Adding Font Awesome starter kit -->
<script src="https://kit.fontawesome.com/11bce01b7f.js" crossorigin="anonymous"></script>
<!-- Adding Bootswatch theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/pulse/bootstrap.min.css"
integrity="sha384-t87SWLASAVDfD3SOypT7WDQZv9X6r0mq1lMEc6m1/+tAVfCXosegm1BvaIiQm3zB" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<title>StudyLinks</title>
</head>
<body>
<div class="container mt-2">
<h1 class="text-center text-primary p-2">
<i class="fas fa-link"></i>
My Study Links
</h1>
<!-- <div class="alert alert-danger">Alert Message</div> -->
<form id="links-form">
<div class="form-group">
<label for="topic">Study Topic</label>
<input type="text" class="form-control" id="topic" aria-describedby="TextHelp" placeholder="Enter study topic"
required>
<small id="TextHelp" class="form-text text-muted">Example: Containerization</small>
</div>
<div class="form-group">
<label for="slink">Study Link</label>
<input type="text" class="form-control" id="slink" aria-describedby="URLHelp" placeholder="Enter any valid hyperlink"
required
pattern="^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$">
<small id="URLHelp" class="form-text text-muted">Example: https://www.docker.com/resources/what-container</small>
</div>
<div class="form-group">
<label for="content-type">Content Type</label>
<select class="form-control" id="content-type">
<option value="blog">Blog/Article</option>
<option value="video">Youtube Video</option>
<option value="official">Official Website</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Add Link</button>
</form>
<div class="table-responsive">
<table class="table table-sm table-hover mt-4">
<thead>
<tr>
<th scope="col">Study Topic</th>
<th scope="col">Study Link</th>
<th scope="col">Content Type</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="links-table-body">
<!-- <tr>
<td>${link.topic}</td>
<td><a href="${link.study_link}" target="_blank">${link.study_link}</a></td>
<td>${link.study_type}</td>
<td><button class="btn btn-danger btn-sm delete">X</button></td>
</tr> -->
</tbody>
</table>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>