|
|
@@ -14,16 +14,90 @@
|
|
|
<title>Message</title>
|
|
|
<style>
|
|
|
body{
|
|
|
- overflow: hidden;
|
|
|
- background-color: white;
|
|
|
+ background-color: rgb(250, 250, 250);
|
|
|
}
|
|
|
|
|
|
+ #banner{
|
|
|
+ background: rgb(74,179,255);
|
|
|
+ background: linear-gradient(153deg, rgba(74,179,255,1) 0%, rgba(182,183,247,1) 52%, rgba(133,87,255,1) 100%);
|
|
|
+ padding: 1.2em;
|
|
|
+ -webkit-border-bottom-right-radius: 20px;
|
|
|
+ -webkit-border-bottom-left-radius: 20px;
|
|
|
+ -moz-border-radius-bottomright: 20px;
|
|
|
+ -moz-border-radius-bottomleft: 20px;
|
|
|
+ border-bottom-right-radius: 20px;
|
|
|
+ border-bottom-left-radius: 20px;
|
|
|
+ margin-bottom: 0.4em;
|
|
|
+ }
|
|
|
+
|
|
|
+ #banner h2{
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .latestMessage{
|
|
|
+ color: rgb(43, 40, 40);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chatroom{
|
|
|
+ cursor: pointer;
|
|
|
+ transition: opacity 0.1s ease-in-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chatroom:hover{
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <h1>Hello World</h1>
|
|
|
+ <div id="banner">
|
|
|
+ <div class="ui container">
|
|
|
+ <h2>Message</h2>
|
|
|
+
|
|
|
+ <div class="ui fluid small icon input">
|
|
|
+ <input type="text" placeholder="Search">
|
|
|
+ <i class="circular search link icon"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="chatHistoryList" class="ui container">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
+ <br><br>
|
|
|
<script>
|
|
|
-
|
|
|
+ function initUserList(){
|
|
|
+ $.get("../system/users/list", function(data){
|
|
|
+ console.log(data);
|
|
|
+ data.forEach(function(user){
|
|
|
+ let username = user[0];
|
|
|
+ let usericon = user[2];
|
|
|
+ if (usericon == ""){
|
|
|
+ usericon = "img/noicon.png";
|
|
|
+ }
|
|
|
+ $("#chatHistoryList").append(`<div class="ui message chatroom">
|
|
|
+ <div class="ui feed">
|
|
|
+ <div class="event">
|
|
|
+ <div class="label" style="padding-top: 0.3em;">
|
|
|
+ <img src="${usericon}">
|
|
|
+ </div>
|
|
|
+ <div class="content" style="margin-top: 0; position: relative;">
|
|
|
+ <div class="summary">
|
|
|
+ <h3 style="margin-bottom: 0; font-size: 1.2em;">${username}</h3>
|
|
|
+ <small class="latestMessage">
|
|
|
+ Loresm ipsum dolor sit amet, consectetur adipiscing e...
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+ <div class="date" style="position: absolute; right: 0;top:0;">
|
|
|
+ 5 min
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`);
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ initUserList();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
Toby Chui
