Hugging Face's logo

Spaces:
Behxlder
/
chatty-mcmessageface
Running

App Files Community
Behxlder commited on
Commit
f215f7a
·
verified ·
1 Parent(s): f57d350

make it minimalistic and stylish

Browse files
Files changed (4) hide show
  1. components/navbar.js +6 -7
  2. index.html +4 -4
  3. script.js +4 -4
  4. style.css +22 -22
components/navbar.js CHANGED
@@ -5,9 +5,10 @@ class CustomNavbar extends HTMLElement {
5
  <style>
6
  .navbar {
7
  background-color: white;
8
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 
9
  }
10
- .search-input {
11
  transition: all 0.3s ease;
12
  }
13
  .search-input:focus {
@@ -18,13 +19,11 @@ class CustomNavbar extends HTMLElement {
18
  color: #6366f1;
19
  }
20
  </style>
21
- <nav class="navbar px-4 py-3 flex items-center justify-between border-b border-gray-200">
22
  <div class="flex items-center">
23
- <h1 class="text-xl font-bold text-indigo-600">Chatty</h1>
24
- <span class="ml-1 text-xl font-bold text-gray-800">McMessageFace</span>
25
  </div>
26
-
27
- <div class="relative hidden md:block">
28
  <input type="text" placeholder="Search..." class="search-input w-32 bg-gray-100 rounded-full py-1 px-4 pl-8 focus:outline-none focus:ring-1 focus:ring-indigo-500">
29
  <i data-feather="search" class="absolute left-2 top-2 text-gray-400"></i>
30
  </div>
 
5
  <style>
6
  .navbar {
7
  background-color: white;
8
+ border-bottom: 1px solid rgba(0,0,0,0.05);
9
+ height: 64px;
10
  }
11
+ .search-input {
12
  transition: all 0.3s ease;
13
  }
14
  .search-input:focus {
 
19
  color: #6366f1;
20
  }
21
  </style>
22
+ <nav class="navbar px-6 flex items-center justify-between">
23
  <div class="flex items-center">
24
+ <h1 class="text-lg font-semibold text-gray-900">Messages</h1>
 
25
  </div>
26
+ <div class="relative hidden md:block">
 
27
  <input type="text" placeholder="Search..." class="search-input w-32 bg-gray-100 rounded-full py-1 px-4 pl-8 focus:outline-none focus:ring-1 focus:ring-indigo-500">
28
  <i data-feather="search" class="absolute left-2 top-2 text-gray-400"></i>
29
  </div>
index.html CHANGED
@@ -9,11 +9,11 @@
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  </head>
12
- <body class="bg-gray-100 h-screen">
13
  <custom-navbar></custom-navbar>
14
- <div class="container mx-auto px-4 py-6 h-[calc(100%-80px)]">
15
- <div class="bg-white rounded-lg shadow-lg h-full flex flex-col">
16
- <!-- Chat header -->
17
  <div class="border-b border-gray-200 p-4 flex items-center">
18
  <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
19
  <i data-feather="user"></i>
 
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  </head>
12
+ <body class="bg-gray-50 h-screen">
13
  <custom-navbar></custom-navbar>
14
+ <div class="container mx-auto px-4 py-6 h-[calc(100%-64px)]">
15
+ <div class="bg-white rounded-2xl shadow-sm h-full flex flex-col border border-gray-100">
16
+ <!-- Chat header -->
17
  <div class="border-b border-gray-200 p-4 flex items-center">
18
  <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
19
  <i data-feather="user"></i>
script.js CHANGED
@@ -14,12 +14,12 @@ document.addEventListener('DOMContentLoaded', function() {
14
 
15
  if (msg.isOutgoing) {
16
  messageDiv.innerHTML = `
17
- <div class="max-w-xs lg:max-w-md bg-indigo-500 text-white rounded-lg p-3">
18
- <p>${msg.content}</p>
19
  <p class="text-xs text-indigo-200 mt-1">${msg.timestamp}</p>
20
  </div>
21
- <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs ml-2">
22
- ME
23
  </div>
24
  `;
25
  } else {
 
14
 
15
  if (msg.isOutgoing) {
16
  messageDiv.innerHTML = `
17
+ <div class="max-w-xs lg:max-w-md bg-gray-900 text-white rounded-lg p-3">
18
+ <p>${msg.content}</p>
19
  <p class="text-xs text-indigo-200 mt-1">${msg.timestamp}</p>
20
  </div>
21
+ <div class="w-8 h-8 rounded-full bg-gray-900 flex items-center justify-center text-white text-xs ml-2">
22
+ ME
23
  </div>
24
  `;
25
  } else {
style.css CHANGED
@@ -1,38 +1,38 @@
1
- /* Custom scrollbar for messages */
2
- #messages::-webkit-scrollbar {
3
- width: 6px;
4
- }
5
 
6
- #messages::-webkit-scrollbar-track {
7
- background: #f1f1f1;
8
- border-radius: 10px;
9
  }
10
 
11
  #messages::-webkit-scrollbar-thumb {
12
- background: #c1c1c1;
13
- border-radius: 10px;
14
  }
15
 
16
- #messages::-webkit-scrollbar-thumb:hover {
17
- background: #a1a1a1;
 
 
18
  }
19
- /* Animation for new messages */
20
- @keyframes fadeIn {
21
- from { opacity: 0; transform: translateY(10px); }
22
- to { opacity: 1; transform: translateY(0); }
 
 
23
  }
24
 
 
25
  .message {
26
- animation: fadeIn 0.3s ease-out;
27
  }
28
 
29
- /* Message input focus state */
30
- #messageInput:focus {
31
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
32
  }
33
 
34
- /* Send button animation */
35
- button[type="submit"]:active {
36
- transform: scale(0.95);
37
  }
38
  }
 
 
 
 
 
1
 
2
+ /* Custom scrollbar */
3
+ #messages::-webkit-scrollbar {
4
+ width: 4px;
5
  }
6
 
7
  #messages::-webkit-scrollbar-thumb {
8
+ background: rgba(0,0,0,0.1);
9
+ border-radius: 2px;
10
  }
11
 
12
+ /* Message bubbles */
13
+ .max-w-xs, .max-w-md {
14
+ border-radius: 12px;
15
+ padding: 10px 14px;
16
  }
17
+
18
+ /* Input styling */
19
+ #messageInput {
20
+ border-radius: 20px;
21
+ background: rgba(0,0,0,0.02);
22
+ border: 1px solid rgba(0,0,0,0.05);
23
  }
24
 
25
+ /* Smooth animations */
26
  .message {
27
+ transition: all 0.2s ease;
28
  }
29
 
30
+ /* Minimal buttons */
31
+ button {
32
+ transition: all 0.2s ease;
33
  }
34
 
35
+ button:hover {
36
+ background: rgba(0,0,0,0.02) !important;
 
37
  }
38
  }