-
Notifications
You must be signed in to change notification settings - Fork 0
/
view_note.html
318 lines (287 loc) · 14.3 KB
/
view_note.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Article | IWORDER</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- TinyMCE -->
<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'textarea',
branding: false,
plugins: "wordcount",
statusbar: true,
toolbar: 'bold italic',
menubar: false
});
</script>
</head>
<body>
<!-- The Article Section -->
<section id="article">
<!-- Article Fixed Top Nav -->
<div class="container article-nav">
<div class="row">
<div class="col-xs-12 col-xs-offset-0">
<a href="hub.html" class="hub-ico">
<i class="fas fa-users" style="font-size:35px;"></i>
</a>
<!-- This only appears if the user is a facilitator -->
<!-- The icon turn solid when it is recommended by changing "far" to "fas" -->
<a href="recommendation-page.html" class="recommended-ico">
<i class="far fa-thumbs-up" style="font-size: 35px;"></i>
</a>
</div>
</div>
</div>
<div class="container article-content">
<div class="row">
<div class="art col-md-8 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<!-- Article Head -->
<div class="article-head">
<div class="article-head-title">
<p class="title">
A Door Ajar
</p>
<p class="stats">
<span>
<i class="far fa-clock"></i>6 minutes ago
</span>
<span class="seperate">
<i class="fas fa-circle"></i>
</span>
<span>
<i class="fas fa-comments"></i>39 comments
</span>
</p>
</div>
<div class="article-head-author">
<img src="img/portrait1.jpg" class="img-responsive img-circle"alt="Profile Picture">
<p class="author">
<span class="name">
<a href="profile.html">Jane Iworder</a>
</span>
<br>
<span class="level">
GreenHorn
</span>
</p>
<p class="author-action">
<span class="follow">
<a href="#follow">
<i class="fas fa-plus"></i>Follow
</a>
</span>
<!-- This following should be used when following -->
<!-- <span class="following">
<a href="#unfollow">
<i class="fas fa-check"></i>Following
</a>
</span> -->
</p>
</div>
</div><!-- End of the Article Head -->
<!-- Article Body -->
<div class="article-body">
<!-- Article Content -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, veritatis aut saepe provident tempora ex quidem. Accusantium quasi debitis natus, quae ipsum nihil eaque consequuntur qui nostrum assumenda consectetur obcaecati voluptatum fugit vel dolorem quam magnam veniam deleniti! Error vel quos dolor, eos veritatis cum natus mollitia corporis. Ratione odit facere rerum mollitia maxime magni illum sint tenetur. Excepturi earum, ullam non! Hic odit totam dignissimos quaerat voluptates et, sed officiis explicabo aspernatur. Quae dolorem expedita, fuga, alias officia sunt asperiores! Error labore, magnam atque consequuntur dolorum asperiores quidem quo deserunt optio tempora iusto ducimus facere distinctio rerum aut explicabo. Hic est amet laboriosam, omnis maxime dolorum assumenda, necessitatibus dolor. Atque ex provident accusantium earum nesciunt ipsa nulla totam exercitationem laudantium quasi nisi eius molestias adipisci, excepturi expedita quidem maxime laboriosam blanditiis velit corporis mollitia ipsam reiciendis eaque asperiores. Maxime dolorem quam debitis omnis, a possimus assumenda? Sapiente facere veniam magnam quia saepe omnis maiores, deleniti officia, sit nam veritatis explicabo, maxime ex molestias dolorum distinctio! Suscipit delectus eligendi quam dolor magni nulla eius quia distinctio atque temporibus praesentium neque facilis sunt reiciendis eveniet accusantium dolore ratione repellendus rem labore commodi officiis, tempore. Modi numquam beatae aliquid quae eaque incidunt assumenda cum ipsum, blanditiis ab repellendus suscipit, earum quas, ut veniam consectetur labore! Esse quia excepturi est consectetur doloribus, dicta similique fugit, voluptatum deserunt inventore commodi nulla ad quidem possimus ullam obcaecati iure sint ratione nihil dolor temporibus magni expedita accusantium. Velit fugit minima, obcaecati soluta cum, maxime itaque mollitia architecto ipsum cupiditate voluptate, labore blanditiis dolore! Repellat inventore quam dicta! Adipisci optio sed sequi quis, voluptates reprehenderit dolorem, eligendi sint tempora unde, vero beatae assumenda maiores minus! At sapiente nisi sunt aut assumenda et suscipit accusamus veritatis iure, minus illum, error, ducimus ab eius expedita quisquam, quam quod sed iusto adipisci! Tenetur eveniet iste nesciunt, optio dolor animi voluptatum obcaecati nobis repellat amet ut ipsam laborum, sunt quos voluptatem sint voluptate explicabo facere atque adipisci labore rerum aliquid commodi. Cupiditate hic obcaecati dolor culpa asperiores aliquam molestias totam est, praesentium in veritatis, ullam quasi saepe exercitationem molestiae, consequatur soluta doloremque sequi mollitia placeat laboriosam, quod voluptatum ut incidunt! Commodi vitae, cupiditate eius, ab minima ex debitis recusandae asperiores eligendi soluta quo eos voluptatem ipsa illo aliquid? Nostrum similique deserunt corporis exercitationem dolor! Ratione soluta eaque repellendus! Quae sunt, rem deleniti neque quas est, fuga suscipit, sequi velit doloribus assumenda totam dignissimos tenetur! Vero modi, voluptates repellat cumque deleniti, deserunt illo. Quia enim laudantium ratione temporibus, commodi nulla tempore illum accusamus dolore beatae. Voluptatum natus, nemo dignissimos aspernatur dolorum vel accusantium vero voluptates pariatur reprehenderit iste explicabo molestiae facere enim cupiditate quisquam magnam, maiores reiciendis nisi veniam. Harum nostrum doloremque sint culpa mollitia placeat natus ex necessitatibus minus? Dolorum officia corrupti at, quo molestias et repellendus necessitatibus vel ducimus consectetur dolore officiis obcaecati aspernatur sequi ad quae architecto quasi soluta iusto non quisquam culpa. Illum numquam dignissimos eius, harum dolorum dolor expedita deserunt, vero illo cupiditate laudantium exercitationem ab corrupti.
<div class="tag" style="color: #666;font-size: 14px;padding: 20px 3px;">
<p style="display: inline-block;float: left;width: 50%;">
<i class="fas fa-tag" style="margin-right: 5px;"></i>
<span>
poetry, comedy, fiction
</span>
</p>
<p class="text-right" style="display: inline-block;float: left;width: 50%;">
<span>
<!-- This is only shown when viewing others posts -->
<i class="fa fa-flag"></i>Flag
</span>
<span>
<!-- this is only shown when viewing personal post -->
<i class="far fa-thumbs-up"></i>Request review
</span>
</p>
<div class="clearfix"></div>
</div>
</div><!-- End of the Article Body -->
<!-- Article Footer => Comments and Reviews -->
<section class="article-footer">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#comment-section" aria-controls="comment-section" role="tab" data-toggle="tab">Comment</a>
</li>
</ul>
</div>
</div>
<!-- row containing the tabs contents -->
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<!-- Comments Section -->
<div role="tabpanel" class="tab-pane fade in active" id="comment-section">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<form action="" method="" style="padding-top: 5px;">
<div class="form-group">
<textarea name="comment" id="place_comment" rows="4" class="form-control"></textarea>
</div>
<div class="">
<button type="submit" class="btn btn-success pull-right">Make Comment</button>
</div>
</form>
</div>
</div>
</div><!-- End of Comment section-->
<!-- Reviews Sections -->
</div><!-- End of Tab Content -->
</div>
</div>
<!-- List of all Comments and Reviews -->
<div id="commentAndReviews">
<!-- This is displayed when there are no comments/reviews on the post -->
<div class="comment review" style="border-top: 1px solid #ccc;">
<div class="" style="font-size: 14px;padding: 5px 10px;">
No comments/ reviews yet.
<br>
Be the first to <a href="#commentAndReviews" style="color: #356B44;">review</a> this
</div>
</div>
<div class="comment">
<div class="comment-author">
<img src="img/portrait1.jpg" class="img-responsive img-circle" alt="Profile Picture">
<p class="author">
<span class="name">
<a href="profile.html">Jane Iworder</a>
(@janyworder) said:
</span>
<br>
<span class="level">
GreenHorn
<i class="fas fa-circle"></i>
4 reviews
</span>
</p>
</div>
<div class="comment-detail">
comment text Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nesciunt impedit voluptas, nulla minus vitae.
</div>
<div class="comment-stats">
<i class="far fa-clock"></i> 6 minutes ago
</div>
</div>
<div class="comment review">
<div class="comment-author">
<img src="img/portrait1.jpg" class="img-responsive img-circle" alt="Profile Picture">
<p class="author">
<span class="name">
<a href="profile.html">Jane Iworder</a>
(@janyworder) wrote a review:
</span>
<br>
<span class="level">
GreenHorn
<i class="fas fa-circle"></i>
4 reviews
</span>
</p>
</div>
<div class="comment-detail">
comment text Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nesciunt impedit voluptas, nulla minus vitae.
</div>
<div class="comment-stats">
<i class="far fa-clock"></i> 6 minutes ago
</div>
</div>
</div>
</section><!-- End of the Article Footer -->
</div>
<!-- THe side bar -->
<aside id="sidebar" class="col-md-4 visible-md visible-lg">
<div class="cont">
<div class="discover-posts" style="border-top: 0px solid #eee;padding-top: 0px;">
<div class="row">
<h3 class="title" style="padding-top: 0px;">Discover</h3>
<div class="article-cont">
<div class="col-md-4">
<img src="img/portrait1.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-8">
<p class="title">A Door Ajar</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, illum </p>
<p class="stat">Jane Iworder <i class="fas fa-circle" style="font-size: 4px;vertical-align: middle;"></i> Poetry</p>
</div>
</div>
<div class="article-cont">
<div class="col-md-4">
<img src="img/portrait1.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-8">
<p class="title">A Door Ajar</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, illum </p>
<p class="stat">Jane Iworder <i class="fas fa-circle" style="font-size: 4px;vertical-align: middle;"></i> Poetry</p>
</div>
</div>
<div class="article-cont">
<div class="col-md-4">
<img src="img/portrait1.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-8">
<p class="title">A Door Ajar</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, illum </p>
<p class="stat">Jane Iworder <i class="fas fa-circle" style="font-size: 4px;vertical-align: middle;"></i> Poetry</p>
</div>
</div>
<div class="article-cont">
<div class="col-md-4">
<img src="img/portrait1.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-8">
<p class="title">A Door Ajar</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, illum </p>
<p class="stat">Jane Iworder <i class="fas fa-circle" style="font-size: 4px;vertical-align: middle;"></i> Poetry</p>
</div>
</div>
<div class="article-cont">
<div class="col-md-4">
<img src="img/portrait1.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-8">
<p class="title">A Door Ajar</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, illum </p>
<p class="stat">Jane Iworder <i class="fas fa-circle" style="font-size: 4px;vertical-align: middle;"></i> Poetry</p>
</div>
</div>
<div class="article-cont">
<div class="col-md-4">
<img src="img/portrait1.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-8">
<p class="title">A Door Ajar</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, illum </p>
<p class="stat">Jane Iworder <i class="fas fa-circle" style="font-size: 4px;vertical-align: middle;"></i> Poetry</p>
</div>
</div>
</div>
</div>
<p class="seperator">
<a href="hub.html">Show more</a>
</p>
</div>
</aside>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>