This repository has been archived by the owner on Jun 1, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathCommentExample.html
179 lines (175 loc) · 10.5 KB
/
CommentExample.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
<!--
==============================+===============================================================
@ File Name : CommentExample.html
@ Author : jopemachine
@ Team : team ⓒ EV for 2019 BottomUp
@ Created Date : 2019-07-03, 09:17:24
@ Desc :
@ 댓글 창 스타일을 확인하기 위한 예제 파일입니다.
==============================+===============================================================
-->
<!DOCTYPE html>
<html lang="kr" dir="ltr">
<head>
<title>EV Comments</title>
<meta charset="utf-8">
<!-- 반응형 웹페이지를 위한 viewport 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Bootstrap 스타일 시트를 적용. min이 붙은 것은 난독화 파일이기 때문.-->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/comment.css">
<link rel="stylesheet" href="./css/EV-Style.css">
</head>
<body>
<div id="EV-Container" class="container">
<!-- 현재 댓글의 갯수, 로그인 되어 있는 ID를 나타내는 NavBar -->
<header id="EV-nav">
<ul>
<li id="EV-CommentNumber" class="nav-tab">Comments</li>
<li style="float:right;"><img id="connectedUser-Avatar" class="comment-avatar" width="25px" height="25px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile"></li>
</ul>
</header>
<!-- 댓글 창들의 모음 컨테이너 -->
<div>
<div id="EV-UserInputArea">
<!-- Avatar (셋팅된 프로필 사진) -->
<!-- 댓글 입력 창 -->
<div class="textarea-outer col-sm-12">
<span id="Textarea-placeholder">여기에 텍스트를 입력하세요..</span>
<div id="CommentArea" class="alignLeft" width="100%" tabindex="0" role="textbox" aria-multiline="true" contenteditable="PLAINTEXT-ONLY" data-role="editable" class="text-right" title="Join the discussion..."></div>
</div>
<div id="EV-Buttons">
<ul>
<li><b>B</b></li>
<li><i>I</i></li>
<li><u>U</u></li>
<li><s>S</s></li>
<li id="post-button">제출</li>
</ul>
</div>
</div>
<hr>
<!-- 댓글 -->
<div id="EV-comment">
<ul>
<li class="row comment comment-positive01">
<img class="comment-avatar rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment">
<span class="comment-userID">jopebot</span>
<span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span>
<br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-positive02">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-positive03">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-positive04">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-positive05">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-negative01">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-negative02">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-negative03">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다. 댓글입글입글입글입니다.댓글입니다.댓글입니다.<b>댓글입니다.</b>댓글입니다.댓글입니다.댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-negative04">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다. 댓글입니다.댓글입니다.댓글입니다.<b>댓글입니다.</b>댓글입니다.댓글입니다.댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
<hr>
<li class="row comment comment-negative05">
<img class="comment-avatar col-1.5 rounded-circle" width="48px" height="48px" class="img-fluid rounded-circle" src="img/userDefaultProfile.svg" alt="Image For User Profile">
<div class="comment col-10">
<span class="comment-userID">jopebot</span><span style="color: #777777; font-size: 12px;"> 2019-07-06, 16:24</span><br>
<p class="comment-content">댓글입니다. 댓글입글입글입글입니다.댓글입니다.댓글입니다.<b>댓글입니다.</b>댓글입니다.댓글입니다.댓글입니다.</p>
<span><img src="./img/trash-2.svg" width="16px" height="16px"></span>
<span><img src="./img/edit.svg" width="16px" height="16px"></span>
</div>
</li>
</ul>
</div>
</div>
<hr>
<footer id="EV-Footer">
<p style="padding-top: 7px;">© 2019 Team EV</p>
</footer>
</div>
</body>
<!-- 제이쿼리 자바스크립트 추가하기 -->
<script src="./lib/jquery-3.2.1.min.js"></script>
<!-- Popper 자바스크립트 추가하기 -->
<script src="./lib/popper.min.js"></script>
<!-- 부트스트랩 자바스크립트 추가하기 -->
<script src="./lib/bootstrap.min.js"></script>
<!-- MDB 라이브러리 추가하기 -->
<script src="./lib/mdb.min.js"></script>
<!-- 커스텀 자바스크립트 추가하기 -->
<script src="./js/comment.js"></script>
</html>