Skip to content

Commit cfc404c

Browse files
ShubhangShubhang
committed
aight
1 parent 580b425 commit cfc404c

File tree

4 files changed

+160
-47
lines changed

4 files changed

+160
-47
lines changed

Diff for: ‎package-lock.json

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"author": "",
1111
"license": "ISC",
1212
"dependencies": {
13+
"bootstrap": "^5.2.3",
1314
"ejs": "^3.1.9",
1415
"express": "^4.18.2",
1516
"socket.io": "^4.6.1"

Diff for: ‎public/styles.css

+128-44
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,129 @@
1+
/* Reset styles */
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
18
body {
2-
font-family: Arial, sans-serif;
3-
margin: 0;
4-
padding: 0;
5-
}
6-
7-
#chat {
8-
display: flex;
9-
flex-direction: column;
10-
height: 100vh;
11-
}
12-
13-
#messages {
14-
flex-grow: 1;
15-
list-style: none;
16-
margin: 0;
17-
overflow-y: scroll;
18-
padding: 20px;
19-
}
20-
21-
li {
22-
margin-bottom: 10px;
23-
}
24-
25-
#message-form {
26-
background-color: #f5f5f5;
27-
display: flex;
28-
padding: 10px;
29-
}
30-
31-
#message-input {
32-
border: none;
33-
flex-grow: 1;
34-
padding: 10px;
35-
}
36-
37-
button {
38-
background-color: #007bff;
39-
border: none;
40-
color: white;
41-
cursor: pointer;
42-
font-weight: bold;
43-
padding: 10px 15px;
44-
}
45-
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10+
font-size: 16px;
11+
line-height: 1.4;
12+
background-color: #f7f7f7;
13+
}
14+
15+
/* Header styles */
16+
header {
17+
background-color: #fff;
18+
padding: 1rem;
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
23+
position: sticky;
24+
top: 0;
25+
z-index: 10;
26+
}
27+
28+
header h1 {
29+
font-size: 2rem;
30+
font-weight: bold;
31+
color: #444;
32+
margin-right: 2rem;
33+
}
34+
35+
header .channels {
36+
display: flex;
37+
align-items: center;
38+
}
39+
40+
header label {
41+
font-weight: bold;
42+
margin-right: 1rem;
43+
}
44+
45+
header select {
46+
padding: 0.5rem 1rem;
47+
border-radius: 0.5rem;
48+
background-color: #f2f2f2;
49+
border: none;
50+
font-size: 1.1rem;
51+
}
52+
53+
/* Main content styles */
54+
main {
55+
max-width: 800px;
56+
margin: 0 auto;
57+
padding: 2rem;
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
}
62+
63+
#chat {
64+
margin-top: 2rem;
65+
width: 100%;
66+
max-width: 600px;
67+
border-radius: 0.5rem;
68+
background-color: #fff;
69+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
70+
overflow: hidden;
71+
}
72+
73+
#messages {
74+
list-style: none;
75+
margin: 0;
76+
padding: 1rem;
77+
overflow-y: scroll;
78+
height: 300px;
79+
}
80+
81+
#message-form {
82+
display: flex;
83+
justify-content: space-between;
84+
align-items: center;
85+
background-color: #f2f2f2;
86+
padding: 1rem;
87+
border-top: 1px solid #e2e2e2;
88+
}
89+
90+
#message-input {
91+
flex-grow: 1;
92+
margin-right: 1rem;
93+
padding: 0.5rem 1rem;
94+
border-radius: 0.5rem;
95+
border: none;
96+
font-size: 1.1rem;
97+
background-color: #fff;
98+
}
99+
100+
button[type='submit'] {
101+
padding: 0.5rem 1rem;
102+
border-radius: 0.5rem;
103+
background-color: #4caf50;
104+
color: #fff;
105+
font-weight: bold;
106+
border: none;
107+
cursor: pointer;
108+
transition: background-color 0.3s ease;
109+
}
110+
111+
button[type='submit']:hover {
112+
background-color: #388e3c;
113+
}
114+
115+
/* Message styles */
116+
.message {
117+
display: flex;
118+
margin-bottom: 0.5rem;
119+
padding: 0.5rem 1rem;
120+
}
121+
122+
.sender {
123+
font-weight: bold;
124+
margin-right: 0.5rem;
125+
}
126+
127+
.text {
128+
flex-grow: 1;
129+
}

Diff for: ‎views/index.ejs

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Anonymous Chat</title>
7-
<style>
8-
/* Add your custom styles here */
9-
</style>
7+
<link rel="stylesheet" href="/styles.css" />
8+
109
</head>
1110
<body>
1211
<div>

0 commit comments

Comments
 (0)