slawk0/web-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added contacts list ;) (i love cloude)

Browse Source
This commit is contained in:
slawk0
2024-09-10 21:41:51 +02:00
parent 9b6ccf7384
commit 20899cfa23
2 changed files with 99 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/routes/chat.html
View File

@@ -10,22 +10,28 @@
</head>
<body>
<ul id="contacts"></ul>
<div class="container">
<div class="sidebar">
<h2>Contacts</h2>
<ul id="contacts"></ul>
</div>
<form id="recipientForm">
<div class="chat-area">
<form id="recipientForm">
<input id="recipient" autocomplete="off" placeholder="Enter recipient"/>
<button type="submit">Set recipient</button>
</form>
</form>
<ul id="messages"></ul>
<ul id="messages"></ul>
<form id="form" action="">
<form id="form" action="">
<input id="input" autocomplete="off" placeholder="Enter message"/>
<p id="messageBox"></p>
<button type="submit">Send</button>
<button type="button" id="settings" onclick="document.location.href='/settings';">Settings</button>
</form>
</form>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/static/js/chat.js"></script>

165
frontend/stylesheet/chat.css
View File

@@ -1,112 +1,70 @@
/* CSS BY chatGPT ( */
body, html, form, button, input {
font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
}
#input::placeholder, #recipient::placeholder {
font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
color: #999;
}
body {
margin: 0;
padding-bottom: 3rem;
padding: 0;
background-color: #121212;
color: #e0e0e0;
height: 100vh;
}
#form, #recipientForm {
background: rgba(30, 30, 30, 0.95);
padding: 0.5rem;
.container {
display: flex;
align-items: center;
box-sizing: border-box;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
z-index: 1000;
height: 100vh;
}
#form {
position: fixed;
bottom: 0;
left: 0;
right: 0;
.sidebar {
width: 150px;
background-color: #1e1e1e;
padding: 1rem;
overflow-y: auto;
}
#recipientForm {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#input, #recipient {
border: 1px solid #555;
padding: 0.5rem 1rem;
flex-grow: 1;
border-radius: 20px;
margin-right: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s ease;
background-color: #1f1f1f;
.sidebar h2 {
color: #e0e0e0;
margin-bottom: 1rem;
}
#input:focus, #recipient:focus {
outline: none;
border-color: #1a73e8;
#contacts {
list-style-type: none;
padding: 0;
}
button {
font-family: "Lucida Console";
background-color: #2c7a2e;
color: #e0e0e0;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 10px;
}
button:hover {
background-color: #368f39;
}
#form #recipientForm {
background: #1a73e8; /
border: none;
padding: 0.5rem 1rem;
margin: 0.25rem;
border-radius: 20px;
color: #e0e0e0;
font-size: 1rem;
#contacts > li {
color: white;
padding: 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
#form #recipientForm:hover {
background-color: #155bb5;
#contacts > li:hover {
background-color: #2c2c2c;
}
#settings {
background-color: #1a73e8;
.chat-area {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100vh;
}
#settings:hover {
background-color: #1a73e8;
}
#error {
color: red;
#recipientForm {
background: rgba(30, 30, 30, 0.95);
padding: 0.5rem;
display: flex;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
}
#messages {
font-weight: lighter;
flex-grow: 1;
overflow-y: auto;
padding: 1rem;
list-style-type: none;
margin: 5rem 0 3rem 0;
padding: 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin: 0;
}
#messages > li {
@@ -122,17 +80,54 @@ button:hover {
background: #2c7a2e;
}
#form {
background: rgba(30, 30, 30, 0.95);
padding: 0.5rem;
display: flex;
align-items: center;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
p {
text-align: center;
font-size: 20px;
#input, #recipient {
border: 1px solid #555;
padding: 0.5rem 1rem;
flex-grow: 1;
border-radius: 20px;
margin-right: 0.5rem;
font-size: 1rem;
background-color: #1f1f1f;
color: #e0e0e0;
}
#input:focus, #recipient:focus {
outline: none;
border-color: #1a73e8;
}
button {
background-color: #2c7a2e;
color: #e0e0e0;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 10px;
}
button:hover {
background-color: #368f39;
}
#settings {
background-color: #1a73e8;
}
#settings:hover {
background-color: #155bb5;
}
#messageBox {
color: red;
}
#contacts > li {
color: white;
margin: 0 10px;
}