From db56a1529d3832f41089138f9c44fc893af1e1ba Mon Sep 17 00:00:00 2001 From: Andrew Trieu Date: Fri, 3 Feb 2023 10:23:41 +0200 Subject: [PATCH] Add basic HTML files --- assets/default.png | Bin 0 -> 5929 bytes chat.html | 49 +++++ css/style.css | 390 ++++++++++++++++++++++++++++++++++++++ home.html | 117 ++++++++++++ js/password-visibility.js | 14 ++ js/search-visibility.js | 14 ++ login.html | 37 ++++ register.html | 51 +++++ 8 files changed, 672 insertions(+) create mode 100644 assets/default.png create mode 100644 chat.html create mode 100644 css/style.css create mode 100644 home.html create mode 100644 js/password-visibility.js create mode 100644 js/search-visibility.js create mode 100644 login.html create mode 100644 register.html diff --git a/assets/default.png b/assets/default.png new file mode 100644 index 0000000000000000000000000000000000000000..c4ee4c66d692b7bf2fbfc45082ad2724e732031d GIT binary patch literal 5929 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 literal 0 HcmV?d00001 diff --git a/chat.html b/chat.html new file mode 100644 index 0000000..8657715 --- /dev/null +++ b/chat.html @@ -0,0 +1,49 @@ + + + + ChatLine - Real-time Messaging App + + + + + + + +
+
+
+ + Profile photo +
+ User +

Active now

+
+
+
+
+
+

+ This is an outgoing message. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam facilis fugiat reiciendis adipisci iste assumenda error nemo quos nisi asperiores officiis voluptatibus, cumque laudantium. Praesentium aperiam rerum quisquam voluptate tempore! +

+
+
+
+ Profile photo +
+

+ This is an incoming message. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consectetur illo nam! Veritatis odio consectetur delectus doloribus dolores rem, hic, id molestias odit cupiditate laboriosam, facere commodi eius officia repudiandae? +

+
+
+
+
+ + +
+
+
+ + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7648f8a --- /dev/null +++ b/css/style.css @@ -0,0 +1,390 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto:400,700"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + font-family: "Roboto", sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #f4f4f4; +} + +.wrapper { + background: #fff; + width: 450px; + border-radius: 16px; + box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.3), + 0 32px 64px -48px rgba(0, 0, 0, 0.5); +} + +/* Form */ + +.form { + padding: 25px 30px; +} + +.form header { + font-size: 25px; + font-weight: 600; + padding-bottom: 10px; + border-bottom: 1px solid #e6e6e6; +} + +.form form { + margin: 20px 0; +} + +.form form .error { + color: #721c24; + padding: 8px 10px; + text-align: center; + border-radius: 5px; + background: #f8d7da; + border: 1px solid #f5c6cb; + margin-bottom: 10px; +} + +.form form .names { + display: flex; +} + +.form .names .field:first-child { + margin-right: 10px; +} + +.form .names .field:last-child { + margin-left: 10px; +} + +.form form .field { + display: flex; + margin-bottom: 10px; + flex-direction: column; + position: relative; +} + +.form form .field label { + margin-bottom: 2px; +} + +.form form .field input { + height: 40px; + width: 100%; + font-size: 16px; + padding: 0 10px; + border-radius: 5px; + border: 1px solid #ccc; + outline-color: #333; +} + +.form form .image { + margin-bottom: 10px; +} + +.form form .image input { + font-size: 17px; +} + +.form form .button input { + height: 45px; + border: none; + color: #fff; + font-size: 17px; + background: #333; + border-radius: 5px; + cursor: pointer; + margin-top: 13px; + width: 100%; +} + +.form form .field i { + position: absolute; + right: 15px; + top: 70%; + color: #ccc; + cursor: pointer; + transform: translateY(-50%); +} + +.form form .field i.active::before { + color: #333; + content: "\f070"; +} + +.form .link { + text-align: center; + margin: 10px 0; + font-size: 17px; +} + +.form .link a { + color: #333; +} + +.form .link a:hover { + text-decoration: underline; +} + +/* Home area */ +.user { + padding: 25px 30px; +} + +.user header, +.users a { + display: flex; + align-items: center; + padding-bottom: 20px; + justify-content: space-between; + border-bottom: 1px solid #e6e6e6; + position: relative; +} + +.wrapper img { + object-fit: cover; + border-radius: 50%; +} + +:is(.user, .users) .content { + display: flex; + align-items: center; +} + +.user header .content img { + width: 50px; + height: 50px; +} + +:is(.user, .users) .details { + margin-left: 15px; + align-items: center; + color: #333; +} + +.user header .details span { + font-size: 20px; + font-weight: 600; +} + +.user header .logout { + color: #fff; + background: #333; + font-size: 17px; + padding: 8px 15px; + border-radius: 5px; +} + +.user .search { + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} + +.user .search .text { + font-size: 18px; +} + +.user .search input.active { + opacity: 1; + pointer-events: auto; +} + +.user .search input { + position: absolute; + height: 45px; + width: calc(100% - 50px); + border: 1px solid #ccc; + padding: 0 10px; + font-size: 16px; + border-radius: 40px 0 0 40px; + outline: none; + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} + +.user .search button.active { + color: #fff; + background: #333; + outline: none; + border-radius: 0 40px 40px 0; +} + +.user .search button { + width: 45px; + height: 45px; + border-radius: 40px; + border: none; + outline: 1px solid #ccc; + cursor: pointer; + color: #333; + background: #fff; + transition: all 0.3s ease; +} + +.users { + max-height: 500px; + overflow-y: auto; +} + +.users a { + padding-right: 15px; + margin-bottom: 15px; + page-break-after: 10px; + border-bottom-color: #e6e6e6; +} + +.users a .content img { + width: 40px; + height: 40px; + object-fit: cover; + border-radius: 50%; +} + +.users a .content p { + color: #676767; +} + +.users .details span { + font-size: 18px; + font-weight: 600; +} + +.users a .status-dot { + font-size: 12px; + color: forestgreen; +} + +.users a .status-dot .offline { + font-size: 12px; + color: gray; +} + +.users a:last-child { + margin-bottom: 0; + border-bottom: none; +} + +/* Chat area */ +.chat-area header { + display: flex; + align-items: center; + padding: 20px 30px; +} + +.chat-area header img { + width: 50px; + height: 50px; + object-fit: cover; + border-radius: 50%; + margin: 0 15px; +} + +.chat-area header .back-icon { + font-size: 20px; + cursor: pointer; + color: #333; +} + +.chat-area header .details span { + font-size: 20px; + font-weight: 600; +} + +.chat-box { + max-height: 500px; + overflow-y: auto; + background: #f4f4f4; + padding: 10px 30px 20px 30px; + box-shadow: inset 0 32px 32px -32px rgba(0, 0, 0, 5%), + inset 0 -32px 32px -32px rgba(0, 0, 0, 5%); +} + +.chat-box .chat { + margin: 15px 0; +} + +.chat-box .chat p { + word-wrap: break-word; + padding: 10px 15px; + box-shadow: 0 32px 32px -32px rgba(0, 0, 0, 5%), + 0 -32px 32px -32px rgba(0, 0, 0, 5%); +} + +.chat-box .post { + display: flex; +} + +.post .details { + margin-left: auto ; + max-width: calc(100% - 100px); +} + +.post .details p { + background: #333; + color: #fff; + border-radius: 15px 15px 0 15px; + +} + +.chat-box .get { + display: flex; + align-items: flex-end; + margin-top: 15px; +} + +.get img { + width: 30px; + height: 30px; + object-fit: cover; + border-radius: 50%; +} + +.get .details { + margin-left: 10px; + margin-right: auto; + max-width: calc(100% - 100px); +} + +.get .details p { + background: lightgray; + color: black; + border-radius: 15px 15px 15px 0; +} + +.chat-area .message-input { + display: flex; + padding: 20px 30px; + justify-content: space-between; +} + +.message-input input{ + height: 40px; + width: calc(100% - 50px); + font-size: 15px; + border: 1px solid #ccc; + padding: 0 15px; + border-radius: 40px 0 0 40px; + outline: none; +} + +.message-input button { + font-size: 20px; + width: 50px; + height: 40px; + border-radius: 0 40px 40px 0; + border: none; + outline: none; + cursor: pointer; + color: #fff; + background: #333; +} \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..1ca0d0d --- /dev/null +++ b/home.html @@ -0,0 +1,117 @@ + + + + ChatLine - Real-time Messaging App + + + + + + + +
+
+
+
+ Profile photo +
+ User +

Active now

+
+
+ Logout +
+
+ + Who do you want to chat with? + + + +
+
+ +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ + +
+ Profile photo +
+ Friend #1 +

This is a test message

+
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/js/password-visibility.js b/js/password-visibility.js new file mode 100644 index 0000000..cdc887e --- /dev/null +++ b/js/password-visibility.js @@ -0,0 +1,14 @@ +const passwordField = document.querySelector( + ".form .field input[type='password']" +); +toggleButton = document.querySelector(".form .field i"); + +toggleButton.onclick = () => { + if (passwordField.type === "password") { + passwordField.type = "text"; + toggleButton.classList.add("active"); + } else { + passwordField.type = "password"; + toggleButton.classList.remove("active"); + } +}; diff --git a/js/search-visibility.js b/js/search-visibility.js new file mode 100644 index 0000000..7b13604 --- /dev/null +++ b/js/search-visibility.js @@ -0,0 +1,14 @@ +const searchElement = document.querySelector(".user .search"); + +const searchBar = document.querySelector(".user .search input"); +const searchButton = document.querySelector(".user .search button"); + +searchElement.onmouseover = () => { + searchButton.classList.toggle("active"); + searchBar.classList.toggle("active"); +} + +searchElement.onmouseout = () => { + searchButton.classList.remove("active"); + searchBar.classList.remove("active"); +} diff --git a/login.html b/login.html new file mode 100644 index 0000000..52b0e32 --- /dev/null +++ b/login.html @@ -0,0 +1,37 @@ + + + + ChatLine - Real-time Messaging App + + + + + + + +
+
+
Login to ChatLine
+
+
Error
+
+
+ + +
+
+ + + +
+
+ +
+
+
+
Don't have an account? Register now!
+
+
+ + + \ No newline at end of file diff --git a/register.html b/register.html new file mode 100644 index 0000000..b4d34c8 --- /dev/null +++ b/register.html @@ -0,0 +1,51 @@ + + + + ChatLine - Real-time Messaging App + + + + + + + +
+
+
Join us at ChatLine!
+
+
Error
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
+
+
Already have an account? Login now!
+
+
+ + + \ No newline at end of file