Trang chủ Khám phá Trợ giúp
Đăng nhập
TC
/
arozos
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

Added UI for message

Toby Chui 2 năm trước cách đây
mục cha
7961ddc376
commit
de519acd5c
3 tập tin đã thay đổi với 98 bổ sung và 2 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 96 0
      web/Message/chat.html
  2. 2 2
      web/Message/index.html
  3. BIN
      web/img/desktop/bg/default/2.jpg

+ 96 - 0
web/Message/chat.html
Xem Tập Tin 

@@ -0,0 +1,96 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="UTF-8">
 
+		<meta name="apple-mobile-web-app-capable" content="yes" />
 
+		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
 
+		<meta name="theme-color" content="#4b75ff">
 
+		<link rel="stylesheet" href="../script/semantic/semantic.min.css">
 
+		<script src="../script/jquery.min.js"></script>
 
+		<script src="../script/ao_module.js"></script>
 
+		<script src="../script/semantic/semantic.min.js"></script>
 
+		<link rel="icon" type="image/png" href="img/module_icon.png">
 
+		<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
 
+		<title>Message</title>
 
+		<style>
 
+			body{
 
+                background-color: rgb(250, 250, 250);
 
+			}  
+
 
+            .chatdialog{
 
+                width: 100%;
 
+                display: flex;
 
+                padding-top: 0.4em;
 
+            }   
+
 
+            .self.chatdialog{
 
+                justify-content: end;
 
+            }
 
+
 
+            .other.chatdialog{
 
+                justify-content: start;
 
+            }
 
+
 
+            .chatbubble{
 
+                max-width: 70%;
 
+            }
 
+
 
+            .self.chatdialog .chatbubble{
 
+                background: rgb(98,135,254);
 
+                background: linear-gradient(120deg, rgba(98,135,254,1) 37%, rgba(67,202,231,1) 100%); 
+                
+                color: white;
 
+            }
 
+
 
+            .other.chatdialog .chatbubble{
 
+                
+            }
 
+
 
+            .chatbubble{
 
+                display: inline-block !important;
 
+                padding: 7px !important;
 
+                padding-left: 12px !important;
 
+                padding-right: 12px !important;
 
+            }
 
+
 
+            .chatbubble p{
 
+                margin-right: 2em;
 
+            }
 
+
 
+            .chatbubble .timestamp{
 
+                float: right;
 
+            }
 
+            .chatbubble .timestampWrapper{
 
+                height: 1em;
 
+            }
 
+            
+		</style>
 
+	</head>
 
+	<body>
 
+        <br>
 
+		<div id="chatroom" class="ui text container">
 
+			<div class="self chatdialog">
 
+                <div class="ui segment chatbubble">
 
+                    <p>Hello World! How are you today?</p>
 
+                    <div class="timestampWrapper">
 
+                        <small class="timestamp">4 Jan 14:25</small>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="other chatdialog">
 
+                <div class="ui segment chatbubble">
 
+                    <p>Good, thanks!</p>
 
+                    <div class="timestampWrapper">
 
+                        <small class="timestamp">4 Jan 14:25</small>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+		</div>
 
+		<div class="ui divider"></div>
 
+		<br><br>
 
+		<script>
 
+			
+		</script>
 
+	</body>
 
+</html>

+ 2 - 2
web/Message/index.html
Xem Tập Tin 

@@ -84,11 +84,11 @@
 
 								<div class="summary">

 								<div class="summary">

 									<h3 style="margin-bottom: 0; font-size: 1.2em;">${username}</h3>

 									<h3 style="margin-bottom: 0; font-size: 1.2em;">${username}</h3>

 									<small class="latestMessage">

 									<small class="latestMessage">

-										Loresm ipsum dolor sit amet, consectetur adipiscing e...

+										(No Message)

 									</small>

 									</small>

 								</div>

 								</div>

 								<div class="date" style="position: absolute; right: 0;top:0;">

 								<div class="date" style="position: absolute; right: 0;top:0;">

-									5 min

+									Offline

 								</div>

 								</div>

 							</div>

 							</div>

 							</div>

 							</div>

BIN
web/img/desktop/bg/default/2.jpg
Xem Tập Tin