-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9fb8c06
commit 7509424
Showing
7 changed files
with
409 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
window.addEventListener('unload', function () { | ||
// Send a synchronous GET request to the server to clear the session | ||
var xhr = new XMLHttpRequest(); | ||
xhr.open('POST', '/clear_session', true); // Synchronous request | ||
xhr.send(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,293 @@ | ||
@import url("https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,900&display=swap"); | ||
|
||
body, | ||
html { | ||
font-family: Red Hat Display, sans-serif; | ||
font-weight: 400; | ||
line-height: 1.25em; | ||
letter-spacing: 0.025em; | ||
color: #333; | ||
background: #7084d1; | ||
margin: 50px 40px 0; | ||
} | ||
|
||
::-webkit-scrollbar { | ||
width: 5px; | ||
background-color: whitesmoke; | ||
} | ||
|
||
|
||
::-webkit-scrollbar-thumb:hover { | ||
background: slategray; | ||
} | ||
|
||
|
||
::-webkit-scrollbar-thumb { | ||
background: slategray; | ||
border-radius: 10px; | ||
} | ||
|
||
::-webkit-scrollbar-thumb:active { | ||
background: darkslategray; | ||
} | ||
|
||
::-webkit-scrollbar-track { | ||
background: whitesmoke; | ||
} | ||
|
||
.center { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
height: 76vh; | ||
} | ||
|
||
.pic { | ||
width: 3.5rem; | ||
height: 3.5rem; | ||
background-size: cover; | ||
background-position: center; | ||
border-radius: 50%; | ||
} | ||
|
||
.contact { | ||
position: relative; | ||
margin-bottom: 1rem; | ||
padding-left: 5rem; | ||
height: 4.5rem; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
} | ||
|
||
.contact .pic { | ||
position: absolute; | ||
left: 0; | ||
} | ||
|
||
.contact .name { | ||
font-weight: 500; | ||
margin-bottom: 0.125rem; | ||
font-size: 1.3rem; | ||
} | ||
|
||
.contact .message, | ||
.contact .seen { | ||
font-size: 0.9rem; | ||
color: #999; | ||
} | ||
|
||
.contact .badge { | ||
box-sizing: border-box; | ||
position: absolute; | ||
width: 1.5rem; | ||
height: 1.5rem; | ||
text-align: center; | ||
font-size: 0.9rem; | ||
padding-top: 0.125rem; | ||
border-radius: 1rem; | ||
top: 0; | ||
left: 2.5rem; | ||
background: #333; | ||
color: white; | ||
} | ||
|
||
|
||
.chat { | ||
position: relative; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-evenly; | ||
width: 78rem; | ||
height: 40rem; | ||
z-index: 2; | ||
box-sizing: border-box; | ||
border-radius: 1rem; | ||
background: white; | ||
box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 0rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5); | ||
} | ||
|
||
.chat .contact.bar { | ||
|
||
flex-shrink: 0; | ||
margin: 1rem; | ||
box-sizing: border-box; | ||
} | ||
|
||
.chat .messages { | ||
padding: 1rem; | ||
background: #F7F7F7; | ||
flex-shrink: 2; | ||
overflow-y: auto; | ||
box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.05), inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05); | ||
height: -webkit-fill-available | ||
} | ||
|
||
.chat .messages .time { | ||
font-size: 0.8rem; | ||
background: #EEE; | ||
padding: 0.25rem 1rem; | ||
border-radius: 2rem; | ||
color: #999; | ||
width: -webkit-fit-content; | ||
width: -moz-fit-content; | ||
width: fit-content; | ||
margin: 0 auto; | ||
} | ||
|
||
.chat .messages .message { | ||
box-sizing: border-box; | ||
padding: 0.5rem 1rem; | ||
margin: 1rem; | ||
background: #FFF; | ||
border-radius: 1.125rem 1.125rem 1.125rem 0; | ||
min-height: 2.25rem; | ||
width: -webkit-fit-content; | ||
width: -moz-fit-content; | ||
width: fit-content; | ||
max-width: 66%; | ||
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.chat .messages .message.parker { | ||
margin: 1rem 1rem 1rem auto; | ||
border-radius: 1.125rem 1.125rem 0 1.125rem; | ||
background: #333; | ||
color: white; | ||
} | ||
|
||
.chat .messages .message .typing { | ||
display: inline-block; | ||
width: 0.8rem; | ||
height: 0.8rem; | ||
margin-right: 0rem; | ||
box-sizing: border-box; | ||
background: #ccc; | ||
border-radius: 50%; | ||
} | ||
|
||
.chat .messages .message .typing.typing-1 { | ||
-webkit-animation: typing 3s infinite; | ||
animation: typing 3s infinite; | ||
} | ||
|
||
.chat .messages .message .typing.typing-2 { | ||
-webkit-animation: typing 3s 250ms infinite; | ||
animation: typing 3s 250ms infinite; | ||
} | ||
|
||
.chat .messages .message .typing.typing-3 { | ||
-webkit-animation: typing 3s 500ms infinite; | ||
animation: typing 3s 500ms infinite; | ||
} | ||
|
||
.chat .input { | ||
box-sizing: border-box; | ||
flex-basis: 4rem; | ||
flex-shrink: 0; | ||
display: flex; | ||
align-items: center; | ||
padding: 1rem 0.5rem 1rem; | ||
} | ||
|
||
.chat .input button { | ||
font-size: 1.5rem; | ||
margin-right: 1rem; | ||
color: #666; | ||
cursor: pointer; | ||
transition: color 200ms; | ||
border: none; | ||
background: none; | ||
} | ||
|
||
.chat .input button:hover { | ||
color: #333; | ||
} | ||
|
||
.chat .input input { | ||
border: 2px solid slategrey; | ||
background-image: none; | ||
background-color: white; | ||
padding: 0.7rem 1rem; | ||
margin-right: 1rem; | ||
border-radius: 1.125rem; | ||
flex-grow: 2; | ||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.2); | ||
font-family: Red Hat Display, sans-serif; | ||
font-weight: 400; | ||
letter-spacing: 0.025em; | ||
} | ||
|
||
input:focus { | ||
outline: none; | ||
border: none; | ||
} | ||
|
||
|
||
.chat .input input:placeholder { | ||
color: #999; | ||
} | ||
|
||
@-webkit-keyframes typing { | ||
|
||
0%, | ||
75%, | ||
100% { | ||
transform: translate(0, 0.25rem) scale(0.9); | ||
opacity: 0.5; | ||
} | ||
|
||
25% { | ||
transform: translate(0, -0.25rem) scale(1); | ||
opacity: 1; | ||
} | ||
} | ||
|
||
@keyframes typing { | ||
|
||
0%, | ||
75%, | ||
100% { | ||
transform: translate(0, 0.25rem) scale(0.9); | ||
opacity: 0.5; | ||
} | ||
|
||
25% { | ||
transform: translate(0, -0.25rem) scale(1); | ||
opacity: 1; | ||
} | ||
} | ||
|
||
.pic.stark { | ||
background-image: url("./logo.png"); | ||
} | ||
|
||
footer { | ||
background-color: black; | ||
color: aliceblue; | ||
/* display: flex; | ||
flex-direction: column; */ | ||
width: 100%; | ||
z-index: 9; | ||
margin-top: 5.3vh; | ||
position: absolute; | ||
right: 0; | ||
line-height: 1.8; | ||
left: 0; | ||
padding-top: 1.2rem; | ||
padding-bottom: 1.2rem; | ||
text-align: center; | ||
} | ||
|
||
footer a { | ||
color: #F7F7F7; | ||
font-weight: bold; | ||
} | ||
|
||
@media screen and (max-width:1250px) { | ||
.pic { | ||
width: 2.5rem; | ||
height: 2.5rem; | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" | ||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" | ||
crossorigin="anonymous" referrerpolicy="no-referrer" /> | ||
<link rel="stylesheet" href="{{ url_for('static', filename = 'style.css') }}"> | ||
{% block head %}{% endblock %} | ||
</head> | ||
|
||
<body> | ||
{% block body %}{% endblock %} | ||
<script type="text/javascript" src="{{ url_for('static', filename = 'script.js') }}"></script> | ||
<script> | ||
window.addEventListener('beforeunload', function (event) { | ||
// Use AJAX to call a route in your Flask app | ||
var xhr = new XMLHttpRequest(); | ||
xhr.open('GET', '/clear-session', false); | ||
xhr.send(); | ||
}); | ||
</script> | ||
|
||
</body> | ||
<footer> | ||
Project by | ||
<br><a href="https://github.com/lokendarjangid" target="_blank"><i class="fa-brands fa-github"></i> Lokendar Jangid ,</a> | ||
<a href="https://github.com/ErfanAalam" target="_blank"><i class="fa-brands fa-github"></i> Erfan Aalam</a> | ||
<br> | ||
UI design by <a href="https://github.com/codeintrovert" target="_blank"><i class="fa-brands fa-github"></i> | ||
CodeIntrovert</a> | ||
|
||
</footer> | ||
|
||
</html> |
Oops, something went wrong.