diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..7cc594e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,206 @@ +/* General Styles */ +body { + font-family: 'Inter', sans-serif; + background-color: #F0F2F5; + margin: 0; + height: 100vh; + overflow: hidden; +} + +.chat-container { + display: flex; + height: 100%; +} + +.btn-icon { + border-radius: 50%; + width: 40px; + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; +} + +/* Conversations Pane */ +.conversations-pane { + width: 360px; + background-color: #fff; + border-right: 1px solid #ddd; + display: flex; + flex-direction: column; +} + +.ch-header { + padding: 1rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ddd; +} + +.ch-search .form-control:focus { + box-shadow: none; +} + +.ch-list { + overflow-y: auto; + flex-grow: 1; +} + +.ch-item { + display: flex; + align-items: center; + padding: 0.75rem 1.5rem; + cursor: pointer; + transition: background-color 0.2s; +} + +.ch-item:hover { + background-color: #f5f5f5; +} + +.ch-item.active { + background-color: #e7f3ff; +} + +.ch-item-avatar { + position: relative; + margin-right: 1rem; +} + +.ch-item-avatar img { + width: 56px; + height: 56px; + border-radius: 50%; +} + +.online-dot { + position: absolute; + bottom: 2px; + right: 2px; + width: 12px; + height: 12px; + background-color: #31a24c; + border: 2px solid #fff; + border-radius: 50%; +} + +.ch-item-content { + flex-grow: 1; + overflow: hidden; +} + +.ch-item-title { + display: flex; + justify-content: space-between; +} + +.ch-item-time { + font-size: 0.8rem; +} + +.ch-item-preview { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.9rem; +} + +/* Chat Window Pane */ +.chat-window-pane { + flex-grow: 1; + display: flex; + flex-direction: column; + background-color: #F0F2F5; +} + +.chat-header { + display: flex; + align-items: center; + padding: 0.75rem 1.5rem; + background-color: #fff; + border-bottom: 1px solid #ddd; +} + +.chat-body { + flex-grow: 1; + padding: 1.5rem; + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.message { + display: flex; + margin-bottom: 1rem; + max-width: 60%; +} + +.message-bubble { + padding: 0.75rem 1rem; + border-radius: 16px; + font-size: 0.95rem; +} + +.message.received { + align-self: flex-start; +} + +.message.received .message-bubble { + background-color: #fff; + color: #212529; +} + +.message.sent { + align-self: flex-end; +} + +.message.sent .message-bubble { + background-image: linear-gradient(to right, #007bff, #00C6FF); + color: #fff; +} + +.chat-footer { + padding: 1rem 1.5rem; + background-color: #fff; + display: flex; + align-items: center; +} + +.chat-footer .form-control { + border-radius: 20px; + background-color: #F0F2F5; + border: none; +} + +.chat-footer .form-control:focus { + box-shadow: none; + background-color: #e9ecef; +} + +/* Responsive */ +@media (max-width: 768px) { + .conversations-pane { + width: 100%; + position: absolute; + left: 0; + top: 0; + bottom: 0; + z-index: 10; + transition: transform 0.3s ease-in-out; + transform: translateX(0); + } + + .chat-window-pane { + display: none; /* Hidden by default on mobile */ + } + + /* Add class to show chat window and hide conversations */ + .chat-container.show-chat .conversations-pane { + transform: translateX(-100%); + } + .chat-container.show-chat .chat-window-pane { + display: flex; + } +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..62267bd --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,37 @@ +document.addEventListener('DOMContentLoaded', function() { + const conversationItems = document.querySelectorAll('.ch-item'); + const chatHeaderName = document.getElementById('chat-header-name'); + const chatHeaderImg = document.getElementById('chat-header-img'); + + conversationItems.forEach(item => { + item.addEventListener('click', function() { + // Remove active class from all items + conversationItems.forEach(i => i.classList.remove('active')); + + // Add active class to the clicked item + this.classList.add('active'); + + // Update chat header + const name = this.dataset.name; + const imgSrc = this.dataset.img; + + if (chatHeaderName) { + chatHeaderName.textContent = name; + } + if (chatHeaderImg) { + chatHeaderImg.src = imgSrc; + } + + // On mobile, this would also trigger showing the chat pane + document.querySelector('.chat-container').classList.add('show-chat'); + }); + }); + + // Example of how to go back on mobile (you'd need a back button in the chat header) + // const backButton = document.getElementById('back-to-conversations'); + // if(backButton) { + // backButton.addEventListener('click', () => { + // document.querySelector('.chat-container').classList.remove('show-chat'); + // }); + // } +}); diff --git a/index.php b/index.php index 7205f3d..07ad361 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,127 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Chatify + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+ +
+
+

Chats

+ +
+
+
+ + +
+
+
+ +
+
+ Alice +
+
+
+
+ Alice + 15m +
+

You: Sure, sounds good! See you then.

+
+
+ +
+
+ Bob +
+
+
+ Bob + 1h +
+

Thanks for the update.

+
+
+ +
+
+ Charlie +
+
+
+
+ Charlie + 3h +
+

Haha, that's hilarious! 😂

+
+
+
+
+ + +
+
+
+ Alice +
+
+
+

Alice

+

Active now

+
+
+ + +
+
+
+ +
+
Hey, are we still on for lunch tomorrow?
+
+ +
+
Hey! Absolutely. 1pm at the usual spot?
+
+ +
+
Perfect!
+
+
+
I might be a few minutes late, wrapping up a meeting.
+
+ +
+
No worries at all.
+
+
+
Sure, sounds good! See you then.
+
+
+
+ + + +
+
-
- + + + - + \ No newline at end of file