|
|
@@ -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>
|
Toby Chui
