new pages and linking

css/chats.css

@@ -0,0 +1,247 @@
+/* Chats page - Two column layout: chat list + active chat window */
+
+/* Full width layout */
+.layout > div[style*="flex:1"] {
+  margin: 0 !important;
+  max-width: 100% !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+
+.chats-main {
+  flex: 1;
+  padding: 20px 32px;
+  background: transparent;
+}
+
+/* Chat container (flex, two columns) */
+.chat-container {
+  display: flex;
+  gap: 24px;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  overflow: hidden;
+  height: calc(100vh - 120px); /* Adjust based on topbar height */
+  min-height: 500px;
+}
+
+/* LEFT COLUMN: Chat list */
+.chat-list {
+  width: 320px;
+  border-right: 1px solid #eef2f7;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.chat-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eef2f7;
+}
+.chat-list-header h2 {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin: 0;
+}
+.new-chat-btn {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  color: #3b82f6;
+  cursor: pointer;
+}
+
+.chat-list-items {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chat-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+  border-bottom: 1px solid #f0f2f5;
+}
+.chat-item:hover {
+  background: #f8fafc;
+}
+.chat-item.active {
+  background: #eef2ff;
+  border-left: 3px solid #3b82f6;
+}
+
+.chat-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.chat-item-info {
+  flex: 1;
+  min-width: 0;
+}
+.chat-name {
+  font-weight: 700;
+  font-size: 0.95rem;
+  margin-bottom: 4px;
+}
+.chat-last-msg {
+  font-size: 0.8rem;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-time {
+  font-size: 0.7rem;
+  color: #94a3b8;
+}
+
+/* RIGHT COLUMN: Active chat */
+.chat-active {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 24px;
+  border-bottom: 1px solid #eef2f7;
+}
+.chat-avatar-large {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.chat-header-info {
+  flex: 1;
+}
+.chat-header-name {
+  font-weight: 700;
+  font-size: 1rem;
+}
+.chat-header-status {
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.online-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #10b981;
+  border-radius: 50%;
+}
+
+/* Chat messages area */
+.chat-messages {
+  flex: 1;
+  padding: 20px 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: #fafcff;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+.message.received {
+  align-items: flex-start;
+}
+.message.sent {
+  align-items: flex-end;
+  margin-left: auto;
+}
+.message-bubble {
+  padding: 10px 14px;
+  border-radius: 18px;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  background: #f1f5f9;
+  color: #1e293b;
+}
+.message.sent .message-bubble {
+  background: var(--gradient);
+  color: white;
+}
+.message-time {
+  font-size: 0.7rem;
+  color: #94a3b8;
+  margin-top: 4px;
+  padding: 0 8px;
+}
+
+/* Input area */
+.chat-input-area {
+  display: flex;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid #eef2f7;
+  background: #fff;
+}
+.chat-input-area input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 30px;
+  font-size: 0.9rem;
+  outline: none;
+}
+.chat-input-area input:focus {
+  border-color: #3b82f6;
+}
+.send-btn {
+  background: var(--gradient);
+  border: none;
+  padding: 0 24px;
+  border-radius: 30px;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+.send-btn:hover {
+  opacity: 0.85;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .chats-main {
+    padding: 16px;
+  }
+  .chat-list {
+    width: 280px;
+  }
+}
+@media (max-width: 640px) {
+  .chat-container {
+    flex-direction: column;
+    height: auto;
+  }
+  .chat-list {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #eef2f7;
+  }
+  .chat-active {
+    height: 500px;
+  }
+}

css/sidebar.css

@@ -2,6 +2,7 @@
   Sidebar styles for OnlyPrompt
   - modern soft card look
   - responsive: full sidebar on desktop, icon-only on smaller screens
+  - logout button appears directly after the last menu item with separator line
 */
 
 .sidebar-shell {
@@ -37,9 +38,9 @@
   display: none;
 }
 
-/* Navigation */
+/* Navigation – normal block layout, no flex grow */
 .sidebar {
-  flex: 1;
+  /* No flex:1 – keeps navigation at its natural height */
 }
 
 .sidebar ul {
@@ -92,11 +93,11 @@
   border-left: 3px solid #3b82f6;
 }
 
-/* Bottom logout area */
+/* Bottom logout area – directly after the menu, with separator line */
 .sidebar-bottom {
-  margin-top: 16px;
+  margin-top: 16px;          /* Small gap above the separator */
-  padding-top: 16px;
   border-top: 1px solid #eef2f7;
+  padding-top: 16px;
 }
 
 .sidebar-logout {

html/chats.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OnlyPrompt - Chats</title>
+  <link rel="stylesheet" href="../css/variables.css">
+  <link rel="stylesheet" href="../css/base.css">
+  <link rel="stylesheet" href="../css/sidebar.css">
+  <link rel="stylesheet" href="../css/login.css">
+  <link rel="stylesheet" href="../css/topbar.css">
+  <link rel="stylesheet" href="../css/chats.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+</head>
+<body>
+  <div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
+    
+    <div id="sidebar-container"></div>
+
+    <div style="flex:1; display: flex; flex-direction: column;">
+      
+      <div id="topbar-container"></div>
+
+      <main class="chats-main">
+        <!-- Chat Container: Left column (list) + Right column (active chat) -->
+        <div class="chat-container">
+          
+          <!-- Left Column: Chat Overview -->
+          <div class="chat-list">
+            <div class="chat-list-header">
+              <h2>Messages</h2>
+              <button class="new-chat-btn"><i class="bi bi-pencil-square"></i></button>
+            </div>
+            <div class="chat-list-items">
+              <!-- Chat Entry 1 (active) -->
+              <div class="chat-item active">
+                <img src="../images/content/creator2.png" alt="Alex Chen" class="chat-avatar">
+                <div class="chat-item-info">
+                  <div class="chat-name">Alex Chen</div>
+                  <div class="chat-last-msg">Hey Sarah! Really loved your last video on minimalism...</div>
+                </div>
+                <div class="chat-time">10:17 AM</div>
+              </div>
+              <!-- Chat Entry 2 -->
+              <div class="chat-item">
+                <img src="../images/content/creator3.png" alt="Mia Wong" class="chat-avatar">
+                <div class="chat-item-info">
+                  <div class="chat-name">Mia Wong</div>
+                  <div class="chat-last-msg">Thanks for the prompt tips! They worked perfectly.</div>
+                </div>
+                <div class="chat-time">Yesterday</div>
+              </div>
+              <!-- Chat Entry 3 -->
+              <div class="chat-item">
+                <img src="../images/content/creator4.png" alt="Tom Rivera" class="chat-avatar">
+                <div class="chat-item-info">
+                  <div class="chat-name">Tom Rivera</div>
+                  <div class="chat-last-msg">Let's schedule a call for the collab?</div>
+                </div>
+                <div class="chat-time">Yesterday</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Column: Active Chat (with Alex Chen) -->
+          <div class="chat-active">
+            <div class="chat-header">
+              <img src="../images/content/creator2.png" alt="Alex Chen" class="chat-avatar-large">
+              <div class="chat-header-info">
+                <div class="chat-header-name">Alex Chen</div>
+                <div class="chat-header-status"><span class="online-dot"></span> Online</div>
+              </div>
+            </div>
+            <div class="chat-messages">
+              <!-- Message from Alex -->
+              <div class="message received">
+                <div class="message-bubble">Hey Sarah! Really loved your last video on minimalism. Quick question about your workspace layout?</div>
+                <div class="message-time">10:15 AM</div>
+              </div>
+              <!-- Reply from Sarah -->
+              <div class="message sent">
+                <div class="message-bubble">Thanks Alex! Appreciate it. Yes, happy to share! The desk is from Article, and the shelving unit is custom-built. Highly recommend a clean setup!</div>
+                <div class="message-time">10:16 AM</div>
+              </div>
+              <!-- Alex replies -->
+              <div class="message received">
+                <div class="message-bubble">Thanks so much! Your aesthetic is exactly what I'm aiming for. Can't wait for your next piece!</div>
+                <div class="message-time">10:17 AM</div>
+              </div>
+              <!-- Sarah replies -->
+              <div class="message sent">
+                <div class="message-bubble">Awesome! Let me know if you need more tips. Enjoy the process! 😊</div>
+                <div class="message-time">10:18 AM</div>
+              </div>
+            </div>
+            <div class="chat-input-area">
+              <input type="text" placeholder="Type your message...">
+              <button class="send-btn">Send</button>
+            </div>
+          </div>
+
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <script>
+    fetch('../html/sidebar.html')
+      .then(r => r.text())
+      .then(data => {
+        document.getElementById('sidebar-container').innerHTML = data;
+        // Remove 'active' from all sidebar links
+        document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
+          link.classList.remove('active');
+        });
+        // Set 'active' on the Chats link (4th link, index 3)
+        const chatsLink = document.querySelectorAll('#sidebar-container .sidebar li a')[3];
+        if (chatsLink) chatsLink.classList.add('active');
+      });
+
+    fetch('../html/topbar.html')
+      .then(r => r.text())
+      .then(data => document.getElementById('topbar-container').innerHTML = data);
+  </script>
+</body>
+</html>

html/community.html

@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="../css/sidebar.css">
   <link rel="stylesheet" href="../css/login.css">
   <link rel="stylesheet" href="../css/topbar.css">
-  <link rel="stylesheet" href="../css/creators.css">
+  <link rel="stylesheet" href="../css/community.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 </head>
 <body>

html/dashboard.html

@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="../css/sidebar.css">
   <link rel="stylesheet" href="../css/login.css">
   <link rel="stylesheet" href="../css/topbar.css">
-  <link rel="stylesheet" href="../css/feed.css">
+  <link rel="stylesheet" href="../css/dashboard.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 </head>
 <body>
@@ -53,7 +53,7 @@
             <div class="post-content">
               <h3 class="post-title">Conceptual Landscape Art</h3>
               <p class="post-description">Enchanting, vintage, antique vibes. A journey through surreal landscapes.</p>
-              <img src="../images/content/post1.png" alt="Conceptual Landscape" class="post-image">
+              <img src="../images/content/feed1.png" alt="Conceptual Landscape" class="post-image">
             </div>
             <!-- Like, Comment, Share, Save Buttons -->
             <div class="post-actions">
@@ -77,7 +77,7 @@
             <div class="post-content">
               <h3 class="post-title">Minimalist Logo Design</h3>
               <p class="post-description">Clean, modern, minimalist logo for tech startups.</p>
-              <img src="../images/content/post2.png" alt="Minimalist Logo" class="post-image">
+              <img src="../images/content/feed2.png" alt="Minimalist Logo" class="post-image">
             </div>
             <!-- Like, Comment, Share, Save Buttons -->
             <div class="post-actions">
@@ -101,7 +101,7 @@
             <div class="post-content">
               <h3 class="post-title">Futuristic Cityscape</h3>
               <p class="post-description">Cyberpunk neon city with flying cars and rain.</p>
-              <img src="../images/content/post1.png" alt="Cityscape" class="post-image">
+              <img src="../images/content/feed3.png" alt="Cityscape" class="post-image">
             </div>
             <!-- Like, Comment, Share, Save Buttons -->
             <div class="post-actions">
@@ -125,7 +125,7 @@
             <div class="post-content">
               <h3 class="post-title">Watercolor Pet Portrait</h3>
               <p class="post-description">Soft watercolor style, cute pet portrait.</p>
-              <img src="../images/content/post2.png" alt="Watercolor Pet" class="post-image">
+              <img src="../images/content/feed4.png" alt="Watercolor Pet" class="post-image">
             </div>
             <!-- Like, Comment, Share, Save Buttons -->
             <div class="post-actions">

html/sidebar.html

@@ -55,6 +55,13 @@
           <span class="nav-text">My Profile</span>
         </a>
       </li>
+
+      <li>
+        <a href="create.html">
+          <i class="bi bi-plus-circle-fill icon-blue"></i>
+          <span class="nav-text">Create New</span>
+        </a>
+      </li>
     </ul>
   </nav>