~

yuh19027 · Mar 3, 2020 · c7cf713 · c7cf713
1 parent acc883e
commit c7cf713
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 13 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/aoligei.m4a b/aoligei.m4a
diff --git a/css/profile.css b/css/profile.css
@@ -0,0 +1,21 @@
+header{
+    background-color: #3e2fae;
+    min-height: 40vh
+}
+header a img{
+    display: block;
+    padding: 20px;
+
+}
+header .profile{
+    display: block;
+    margin: 0 auto;
+    text-align: center;
+    padding-top: 20px;
+}
+header p{
+    text-align: center;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+}
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
diff --git a/imgs/back.png b/imgs/back.png
diff --git a/imgs/more.png b/imgs/more.png
diff --git a/imgs/profile-img.png b/imgs/profile-img.png
diff --git a/imgs/profile.png b/imgs/profile.png
diff --git a/index.html b/index.html
@@ -4,13 +4,17 @@
         <meta charset="utf-8">
         <meta name="theme-color" content="#f00" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>DMD 3440 - Room of Chat</title>
+        <title>Welcome to Chatmate!</title>
         <link href="main.css?version=2" rel="stylesheet">
         <link rel="manifest" href="manifest.json?version=2">
     </head>
     <body>
 
-        <header><h1>Sending messages as <span id="usernameInput" contenteditable="true">{UserName}</span></h1></header>
+        <header>
+            <a><img src="imgs/more.png" alt="Menu Icon" height = 20px width = 30px></a>
+            <h1>Welcome to Chatmate! &nbsp<span id="usernameInput" contenteditable="true">{UserName}</span></h1>
+            <a href="profile.html"><img src="imgs/profile.png" alt="Profile Icon" height = 30px width = 25px></a>
+        </header>
         <div id="chatBox"></div>
         <div id="chatInput">
             <input id="newMsg" type="text" placeholder="type a message!">

diff --git a/main.css b/main.css
@@ -3,20 +3,26 @@
 }
 
 body {
-    background-color: rgb(32, 49, 88);
+    background-color: #3e2fae;
     color:#fff;
     font-family: Arial, Helvetica, sans-serif;
 }
 
+header{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
 #chatBox {
     width:100%;
     position:absolute;
     bottom:70px;
-    top:60px;
+    top:80px;
     right:0px;
     left:0px;
-    background:#eee;
-    border:1px solid #333;
+    background:#fff;
+
     color:#000;
     padding:15px;
 }
@@ -26,22 +32,38 @@ body {
     left:0px;
     bottom:0;
     width:100%;
-    background-color:#ccc;
+    background-color:#eee;
     display: flex;
     justify-content: space-between;
     height: 70px;
+    padding: 10px;
+
 
 }
 
 #chatInput input {
     width:100%;
-    text-indent: 15px;
+    text-indent: 10px;
+    background-color: #eee;
+    border-radius: 15px;
+    border:2px solid #3e2fae;
+    margin-right: 10px;
+
 }
 
 #chatInput button {
     margin:0px 0px;
     padding:0px 10px;
-    background-color:#333;
+    background-color:#3e2fae;
     color:#fff;
-    border:1px solid #333;
+    border-radius: 15px;
+}
+
+p{
+    background-color: #3e2fae;
+    margin-right: 20%;
+    border-radius: 10px;
+    text-align: left;
+    padding: 5px 20px;
+    color: white;
 }
diff --git a/main.js b/main.js
@@ -14,7 +14,7 @@ if ('serviceWorker' in navigator) {
   let allMessages = [];
   let chatBox = document.querySelector("#chatBox");
   let newMsgInput = document.querySelector("#newMsg");
-  let userName = localStorage.getItem('userName') || "me";
+  let userName = localStorage.getItem('userName') || "Yucheng";
   let notifSound = 'notification.mp3';
   let notifSoundElement = new Audio(notifSound);
   let usernameInput = document.querySelector("#usernameInput");

diff --git a/manifest.json b/manifest.json
@@ -14,8 +14,8 @@
       }
     ],
     "start_url": "index.html",
-    "background_color": "#f00",
-    "theme_color": "#f00",
+    "background_color": "#3e2fae",
+    "theme_color": "#3e2fae",
     "display": "fullscreen"
   }
 
diff --git a/profile.html b/profile.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="css/profile.css" rel="stylesheet">
+    <link rel="manifest" href="manifest.json?version=2">
+    <title>Profile</title>
+</head>
+<body>
+    <header>
+        <a href="index.html"><img src="imgs/back.png" alt="Back Icon" height = 40px weight = 40px></a>
+        <img class="profile" src="imgs/profile-img.png" alt="headshot" height = 100px weight = 100px>
+        <p><strong>Yucheng Hang</strong></p>
+    </header>
+</body>
+</html>