diff --git a/.DS_Store b/.DS_Store index f767596..9a685a5 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/aoligei.m4a b/aoligei.m4a new file mode 100644 index 0000000..fea0669 Binary files /dev/null and b/aoligei.m4a differ diff --git a/css/profile.css b/css/profile.css new file mode 100644 index 0000000..0c1d389 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/imgs/.DS_Store b/imgs/.DS_Store new file mode 100644 index 0000000..7ac7d5d Binary files /dev/null and b/imgs/.DS_Store differ diff --git a/imgs/back.png b/imgs/back.png new file mode 100644 index 0000000..7090789 Binary files /dev/null and b/imgs/back.png differ diff --git a/imgs/more.png b/imgs/more.png new file mode 100644 index 0000000..35e67ca Binary files /dev/null and b/imgs/more.png differ diff --git a/imgs/profile-img.png b/imgs/profile-img.png new file mode 100644 index 0000000..0745872 Binary files /dev/null and b/imgs/profile-img.png differ diff --git a/imgs/profile.png b/imgs/profile.png new file mode 100644 index 0000000..d14e842 Binary files /dev/null and b/imgs/profile.png differ diff --git a/index.html b/index.html index 7fdbe38..2478308 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,17 @@ - DMD 3440 - Room of Chat + Welcome to Chatmate! -

Sending messages as {UserName}

+
+ Menu Icon +

Welcome to Chatmate!  {UserName}

+ Profile Icon +
diff --git a/main.css b/main.css index 0086299..cdf6c73 100644 --- 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; } \ No newline at end of file diff --git a/main.js b/main.js index 0d21f61..ef8f3b1 100644 --- 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 index c98c45c..8a3c5f5 100644 --- 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" } \ No newline at end of file diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..ae7788b --- /dev/null +++ b/profile.html @@ -0,0 +1,17 @@ + + + + + + + + Profile + + +
+ Back Icon + headshot +

Yucheng Hang

+
+ + \ No newline at end of file