From e0a19d04593aa10ae749f19422c82c019ae07b5e Mon Sep 17 00:00:00 2001 From: tanmayiitj Date: Sun, 12 Dec 2021 19:44:22 +0530 Subject: [PATCH] bugs resolved --- cs/chatButton.css | 168 ++++++++++++++++++++++++++++++++++++++++++++++ cs/chatButton.js | 39 +++++++++++ cs/img/person.jpg | Bin 0 -> 6880 bytes cs/index.html | 43 ++++++++++++ cs/index.php | 6 +- 5 files changed, 255 insertions(+), 1 deletion(-) create mode 100644 cs/chatButton.css create mode 100644 cs/chatButton.js create mode 100644 cs/img/person.jpg create mode 100644 cs/index.html diff --git a/cs/chatButton.css b/cs/chatButton.css new file mode 100644 index 0000000..6e5414c --- /dev/null +++ b/cs/chatButton.css @@ -0,0 +1,168 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +button{ + border:none; + outline: none; + cursor: pointer; +} + +body{ + font-family: Arial, Helvetica, sans-serif; + /* background-color: #9a3131; + display: flex; + justify-content: center; + height: 100vh; + width: 100%; */ +} + +/* section{ + max-width: 1100px; + margin: auto; + text-align: center; + padding: 0 1rem; +} */ +.chat-btn{ + position: fixed; + right:50px; + bottom: 50px; + background: dodgerblue; + color: white; + width:60px; + height: 60px; + border-radius: 50%; + opacity: 0.8; + transition: opacity 0.3s; + box-shadow: 0 5px 5px rgba(0,0,0,0.4); +} + +.chat-btn:hover, .submit:hover, #emoji-btn:hover{ + opacity: 1; +} + +.chat-popup{ + display: none; + position: fixed; + bottom:80px; + right:120px; + height: 400px; + width: 300px; + background-color: white; + /* display: flex; */ + flex-direction: column; + justify-content: space-between; + padding: 0.75rem; + box-shadow: 5px 5px 5px rgba(0,0,0,0.4); + border-radius: 10px; +} + +.show{ + display: flex; +} + +.chat-area{ + height: 80%; + overflow-y: auto; + overflow-x: hidden; +} + +.income-msg{ + display: flex; + align-items: center; +} + +.avatar{ + width:45px; + height: 45px; + border-radius: 50%; + object-fit: cover; +} + +.income-msg .msg{ + background-color: dodgerblue; + color: white; + padding:0.5rem; + border-radius: 25px; + margin-left: 1rem; + box-shadow: 0 2px 5px rgba(0,0,0,0.4); +} + +/* .badge{ + position: absolute; + width: 30px; + height: 30px; + background-color: red; + color:white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + top:-10px; + right: -10px; +} */ + + +.input-area{ + position: relative; + display: flex; + justify-content: center; +} + +input[type="text"]{ + width:100%; + border: 1px solid #ccc; + font-size: 1rem; + border-radius: 5px; + height: 2.2rem; +} + +#emoji-btn{ + position: absolute; + font-size: 1.2rem; + background: transparent; + right: 50px; + top:2px; + opacity:0.5; +} + +.submit{ + padding: 0.25rem 0.5rem; + margin-left: 0.5rem; + background-color: green; + color:white; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + opacity: 0.7; +} + + +.out-msg{ + display: flex; + justify-content: flex-end; + align-items: center; +} +.my-msg{ + display: flex; + justify-content: flex-end; + margin: 0.75rem; + padding: 0.5rem; + background-color: #ddd; + border-radius: 25px; + box-shadow: 0 2px 5px rgba(0,0,0,0.4); + word-break: break-all; +} + + +@media (max-width:500px){ + + .chat-popup{ + bottom: 120px; + right:10%; + width: 80vw; + } +} \ No newline at end of file diff --git a/cs/chatButton.js b/cs/chatButton.js new file mode 100644 index 0000000..a90bbaf --- /dev/null +++ b/cs/chatButton.js @@ -0,0 +1,39 @@ +const popup = document.querySelector('.chat-popup'); +const chatBtn = document.querySelector('.chat-btn'); +const submitBtn = document.querySelector('.submit'); +const chatArea = document.querySelector('.chat-area'); +const inputElm = document.querySelector('input'); +const emojiBtn = document.querySelector('#emoji-btn'); +const picker = new EmojiButton(); + + +// Emoji selection +window.addEventListener('DOMContentLoaded', () => { + + picker.on('emoji', emoji => { + document.querySelector('input').value += emoji; + }); + + emojiBtn.addEventListener('click', () => { + picker.togglePicker(emojiBtn); + }); + }); + +// chat button toggler + +chatBtn.addEventListener('click', ()=>{ + popup.classList.toggle('show'); +}) + +// send msg +submitBtn.addEventListener('click', ()=>{ + let userInput = inputElm.value; + let lenghtInput = inputElm.value.length; + if(lenghtInput!=0){ + let temp = `
+ ${userInput} +
`; + chatArea.insertAdjacentHTML("beforeend", temp); + inputElm.value = ''; + } +}) \ No newline at end of file diff --git a/cs/img/person.jpg b/cs/img/person.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4ddb1e8ded5e78d216f0f52aa0d11bcfd0a5f6c1 GIT binary patch literal 6880 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 literal 0 HcmV?d00001 diff --git a/cs/index.html b/cs/index.html new file mode 100644 index 0000000..894297d --- /dev/null +++ b/cs/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + +
+ +
+
+
+ + Hi, How can I help you? +
+
+ +
+ + + +
+
+
+ + + + + + \ No newline at end of file diff --git a/cs/index.php b/cs/index.php index f1e9715..577809e 100644 --- a/cs/index.php +++ b/cs/index.php @@ -1,6 +1,7 @@ + Student Wellbeing Committee - IIT Jodhpur @@ -396,4 +397,7 @@ class="fb-xfbml-parse-ignore"> \ No newline at end of file +?> +