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

32
frontend/routes/chat.html
View File

@@ -10,22 +10,28 @@
</head> </head>
<body> <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">
<input id="recipient" autocomplete="off" placeholder="Enter recipient"/> <form id="recipientForm">
<button type="submit">Set recipient</button> <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="">
<input id="input" autocomplete="off" placeholder="Enter message"/>
<form id="form" action=""> <p id="messageBox"></p>
<input id="input" autocomplete="off" placeholder="Enter message"/> <button type="submit">Send</button>
<p id="messageBox"></p> <button type="button" id="settings" onclick="document.location.href='/settings';">Settings</button>
<button type="submit">Send</button> </form>
<button type="button" id="settings" onclick="document.location.href='/settings';">Settings</button> </div>
</form> </div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/static/js/chat.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 { body, html, form, button, input {
font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 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 { body {
margin: 0; margin: 0;
padding-bottom: 3rem; padding: 0;
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
height: 100vh;
} }
#form, #recipientForm { .container {
background: rgba(30, 30, 30, 0.95);
padding: 0.5rem;
display: flex; display: flex;
align-items: center; height: 100vh;
box-sizing: border-box;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
z-index: 1000;
} }
#form { .sidebar {
position: fixed; width: 150px;
bottom: 0; background-color: #1e1e1e;
left: 0; padding: 1rem;
right: 0; overflow-y: auto;
} }
#recipientForm { .sidebar h2 {
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;
color: #e0e0e0; color: #e0e0e0;
margin-bottom: 1rem;
} }
#input:focus, #recipient:focus { #contacts {
outline: none; list-style-type: none;
border-color: #1a73e8; padding: 0;
} }
button { #contacts > li {
font-family: "Lucida Console"; color: white;
background-color: #2c7a2e; padding: 0.5rem;
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;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
#form #recipientForm:hover { #contacts > li:hover {
background-color: #155bb5; background-color: #2c2c2c;
} }
#settings { .chat-area {
background-color: #1a73e8; flex-grow: 1;
display: flex;
flex-direction: column;
height: 100vh;
} }
#settings:hover { #recipientForm {
background-color: #1a73e8; background: rgba(30, 30, 30, 0.95);
} padding: 0.5rem;
#error { display: flex;
color: red; align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
} }
#messages { #messages {
font-weight: lighter; flex-grow: 1;
overflow-y: auto;
padding: 1rem;
list-style-type: none; list-style-type: none;
margin: 5rem 0 3rem 0; margin: 0;
padding: 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
} }
#messages > li { #messages > li {
@@ -122,17 +80,54 @@ button:hover {
background: #2c7a2e; 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 { #input, #recipient {
text-align: center; border: 1px solid #555;
font-size: 20px; padding: 0.5rem 1rem;
flex-grow: 1;
border-radius: 20px;
margin-right: 0.5rem;
font-size: 1rem;
background-color: #1f1f1f;
color: #e0e0e0; 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 { #messageBox {
color: red; color: red;
} margin: 0 10px;
#contacts > li {
color: white;
} }