changes to ui

met18001 · Feb 25, 2020 · bf77a19 · bf77a19
1 parent c2e3b05
commit bf77a19
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 9 deletions.
diff --git a/css/main.css b/css/main.css
@@ -2,9 +2,18 @@
     box-sizing: border-box;
 }
 body{
-    background-color:pink;
-    color: black;
-    font-family: Arial, Helvetica, sans-serif;
+    background-color: white;
+    color: black ;
+    font-family: 'Advent Pro';
+}
+h1{
+    text-align: center;
+    text-align: center;
+    background-color: lightcoral;
+    padding: 1em;
+    border-radius: 40px;
+    color: white;
+    font-size: 15px;
 }
 #chatBox{
     width: 100%;
@@ -18,11 +27,30 @@ body{
     position: fixed;
     bottom: 0px;
     width: 100%;
-    background-color: purple;
+    background-color: lightcoral;
     display: -webkit-box;
     display: flex;
     -webkit-box-pack: justify;
             justify-content: space-between;
-    height: 70px;
-
-}
+    height: 80px;  
+    padding: .5em;
+    border-radius: 30px;
+}
+#sendBtn{
+    font-family: 'Advent Pro';
+    background-color: lightcyan;
+    border: lightcoral;
+    border-radius: 30px;
+}
+#newMsg{
+    font-family: 'Advent Pro';
+    background-color: lightcyan;
+    border: lightcoral;
+    border-radius: 30px;
+}
+#sendBtn:hover{
+    background-color: lightseagreen;
+}
+p{
+text-align: center;
+}
diff --git a/img/logo57.png b/img/logo57.png
diff --git a/img/notif.mp3 b/img/notif.mp3
diff --git a/index.html b/index.html
@@ -8,14 +8,17 @@
         <title>Mobile App Development Room Chat</title>
         <link href="css/main.css" rel="stylesheet">
         <link rel="manifest" href="manifest.json">
+        <link rel="apple-touch-icon" href="img/logo57.png.png"/>
+        <link href="https://fonts.googleapis.com/css?family=Advent+Pro&display=swap" rel="stylesheet">
     </head>
     <body>
 
-        <header><h1>Welcome to Meira's Mobile App Development Chat Room!</h1></header>
+        <header><h1>~Meira's Mobile App Chat Room~</h1></header>
+
 
         <div id="chatBox">
         <div id="chatInput">
-            <input type="Text" id="newMsg" placeholder="Type a Messege!">
+            <input type="Text" id="newMsg" placeholder=" Type a Messege!">
             <button id="sendBtn">Send messege</button>
         </div>
 

diff --git a/js/main.js b/js/main.js
@@ -58,3 +58,9 @@ document.querySelector("#sendBtn").addEventListener('click', function(){
   });
 
 
+  // function playSound("img/notif.mp3"){
+  //   var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
+  //   var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
+  //   var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
+  //   document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
+  // }