-
Notifications
You must be signed in to change notification settings - Fork 0
/
add-edit-post.html
132 lines (115 loc) · 4.48 KB
/
add-edit-post.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Add edit post</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Font awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<!-- Use font Rubik -->
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet" />
<!-- Internal CSS -->
<link rel="stylesheet" href="/styles/main.css" />
<link rel="stylesheet" href="/styles/post-detail.css" />
<link rel="stylesheet" href="/styles/add-edit-post.css" />
</head>
<body>
<header>
<!-- Navigation
- Please note that we use an empty item to make sure that we always have 3 flex-items
so logo is at centered, and the left and the right item can be optional by leaving it empty
-->
<nav class="top-nav shadow-sm py-3">
<div class="container">
<ul class="nav justify-content-between align-items-center">
<li class="nav-item">
<a class="nav__link" href=".">
<img class="nav__logo" src="images/logo.svg" alt="Logo Nordic Coder" />
</a>
</li>
<li class="nav-item">
<a id="goToDetailPageLink" class="nav__link" href="#"></a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section id="postHeroImage" class="hero"></section>
<section class="post-detail">
<div class="container">
<div class="post-detail-main shadow-sm">
<div class="post-title-wrapper">
<h1 id="postDetailTitle">Add edit a post</h1>
<p>
<small class="text-muted"
>Please enter the following information and submit then.</small
>
</p>
</div>
<form id="postForm" class="post-form">
<div class="form-group">
<label for="postTitle">Title</label>
<input
type="text"
class="form-control"
name="title"
placeholder="Eg: Learning JS is fun"
/>
<div class="invalid-feedback">
Ooops! Please write a nice title for your post >.<
</div>
</div>
<div class="form-group">
<label for="postAuthor">Author</label>
<input
type="text"
class="form-control"
name="author"
placeholder="Eg: Paul Nguyen"
/>
<div class="invalid-feedback">Please enter author of this post!</div>
</div>
<div class="form-group">
<label for="postDescription">Description</label>
<textarea class="form-control" name="description" rows="3"></textarea>
</div>
<div class="form-group">
<label for="postChangeImage">Image</label>
<small id="passwordHelpBlock" class="form-text text-muted">
We're using
<a href="https://picsum.photos">Picsum service</a> to get a random image.
</small>
<button type="button" id="postChangeImage" class="btn btn-dark">
Change post image
</button>
</div>
<div class="text-center">
<button class="btn btn-primary"><i class="fas fa-save mr-1"></i> Save</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer class="text-center text-muted py-3">
<small>Created by Po with <i class="fas fa-heart"></i></small>
</footer>
<!-- Scripts should be placed here to prevent blocking render UI -->
<script type="module" src="/js/add-edit-post.js"></script>
</body>
</html>