~

yuh19027 · May 1, 2020 · 1e95955 · 1e95955
1 parent 4dfa6d7
commit 1e95955
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 8 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/chatmate-app.xd b/chatmate-app.xd
diff --git a/css/groupchat.css b/css/groupchat.css
@@ -0,0 +1,37 @@
+body{
+    background-color: darkslateblue;
+    width: 90vw;
+    height: 100vh;
+    margin: 0 auto;
+}
+
+#searchMsg{
+    width:100%;
+    text-indent: 50px;
+    height: 30px;
+    background-color: #ffffff;
+    border-radius: 15px;
+	border:2px solid #f9d861;
+	font-family: 'Josefin Sans', sans-serif;
+    margin-left: 20px;
+}
+
+.flex-box{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 5vh;
+}
+
+h2{
+    color: white;
+    font-family: 'Josefin Sans', sans-serif;
+}
+
+h4{
+    font-family: 'Josefin Sans', sans-serif;
+    color: black;
+    background-color: #f9d861;
+    border-radius: 15px;
+    padding: 15px 10px;
+}
diff --git a/groupchat.html b/groupchat.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="css/groupchat.css" rel="stylesheet">
+    <link rel="manifest" href="manifest.json?version=2">
+    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+    <title>Group Chats</title>
+</head>
+<body>
+    <div class="flex-box">
+        <a href="index.html">
+            <img src="imgs/backbutton.png" height = 35px width = 20px>
+        </a>
+        <input id="searchMsg" type="text" placeholder="Search">
+    </div>
+    <div>
+        <h2>Channels</h2>
+        <a href="index.html"><h4>DMD3440 Chat Room</h4></a>
+        <h4>DMD3470 Scripting</h4>
+    </div>
+
+    <div>
+        <h2>Contacts</h2>
+        <h4>Joel Salisbury</h4>
+    </div>
+
+
+</body>
+</html>
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
diff --git a/imgs/back.png b/imgs/back.png
diff --git a/imgs/back.svg b/imgs/back.svg
diff --git a/imgs/backbutton.png b/imgs/backbutton.png
diff --git a/imgs/sendbutton.svg b/imgs/sendbutton.svg
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <header>
-            <a><img src="imgs/more.png" alt="Menu Icon" height = 20px width = 30px></a>
+            <a href="groupchat.html"><img src="imgs/more.png" alt="Menu Icon" height = 20px width = 30px></a>
             <p class=>
                 <h2>DMD3440 Chat Room</h2>
             </p>
@@ -27,6 +27,7 @@
         <div id="chatBox"></div>
         <div id="chatInput">
             <input id="newMsg" type="text" placeholder="type a message!">
+            <svg id="sendBtn" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 527.56 527.56"><defs><style>.cls-1{fill:#999;}</style></defs><polygon class="cls-1" points="176.9 367.81 204.08 316.52 361.7 205.66 176.86 302.19 176.9 367.81"/><path class="cls-1" d="M283.47,23C137.78,23,19.68,141.05,19.68,286.73s118.1,263.78,263.79,263.78,263.78-118.1,263.78-263.78S429.15,23,283.47,23ZM443.84,205.53,326.18,380A12.53,12.53,0,0,1,310,384.07l-47.15-24.48L198,415.87a12.53,12.53,0,0,1-20.73-9.41l-.38-91.88-70.24-36.66a12.52,12.52,0,0,1,3.19-23.34l321-68.3a12.52,12.52,0,0,1,13,19.25Z" transform="translate(-19.68 -22.95)"/></svg>
             <button id="sendBtn">Send</button>
         </div>
 
@@ -45,7 +46,8 @@
         <script src="firebase-config.js"></script>
         <script src="register-sw.js"></script>
 
-        <script src="https://cdn.jsdelivr.net/gh/joelsalisbury/firebase-chat-3440/firebase-chat-functions.js"></script>
+        <script src="https://cdn.jsdelivr.net/gh/joelsalisbury/firebase-chat-3440@1.2/firebase-chat-functions.js"></script>
+
         <script src="main.js?version=2"></script>
     </body>
 </html>
diff --git a/main.css b/main.css
@@ -37,12 +37,15 @@ header{
 } */
 
 #chatBox p.user-message {
-	display: inline-block;
-	padding: 7px 10px;
+    float: right;
+    display: inline-block;
+    margin-top: 10px;
+    padding: 7px 10px;
+    margin-bottom: 5px;
 	background-color:#3e2fae;
 	color: white;
 	border-radius: 10px 0px 10px 10px;
-	float: right;
+
   }
 
 #chatBox p.other-message {
@@ -53,7 +56,8 @@ header{
 }
 
 #chatBox h4.user-name{
-	text-align: right;
+    text-align: right;
+    padding-top: 50px;
 }
 
 #chatInput {
@@ -88,6 +92,10 @@ header{
     color:#fff;
     border-radius: 15px;
 }
+#chatInput button:focus{
+    background-color: #f9d861;
+
+}
 
 header p{
     background-color: #3e2fae;
@@ -121,4 +129,7 @@ h4{
 .time-date{
 	font-size: 0.7em;
 	color: #707070;
+}
+.input{
+	text-align: left;
 }
diff --git a/profile.html b/profile.html
@@ -22,8 +22,10 @@
     </header>
 
     <div class="input">
-        <p>Username: <input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
-        <p>Status: <input type="text" placeholder="Status Message" name="StatusMessage" id="statusInput"></p>
+        <p>Username</p>
+        <input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
+        <p>Status</p>
+        <input type="text" placeholder="Status Message" name="StatusMessage" id="statusInput">
         <p><input type="file" id="profilePicInput" name="profilePicInput"></p>
         <button id="profileSaveInput">Submit</button>
     </div>