Spaces:

Bton
/

edupulse-brainybubbles-edition

Running

App Files Files Community

Bton commited on Nov 10, 2025

Commit

9edca49

verified ·

1 Parent(s): 263e1d9

Generate an HTML, CSS, and JavaScript high-fidelity prototype based on the following 3-panel user flow from the provided screenshot.

Browse files

The prototype is for a "Piazza Redesign" (a university Q&A site). The tone of all placeholder text should be professional, clean, and academic.

Global Elements (Persistent on all screens):

Header: A div containing the course title "CS1101" and three div elements styled as "stat boxes" for "All Questions," "Active Users," and "Average Wait Time."

Left Navigation Sidebar: A <nav> element with a ul (list) of links:

"All Questions" (This is the default active link)

"Unanswered (25)" (Styled as a sub-item or badge under "All Questions")

"My Posts"

"Recent"

"Following"

A sub-section labeled "Popular Tags" containing a button styled as a tag for "HW3".

Panel 1: Default View & Post Creation

Summary: This is the default screen the user sees. The "All Questions" link is active, and the main content area shows a "create post" form.

Widgets:

The "All Questions" link in the nav should have an active class (e.g., a yellow background).

The main content area should have a search input widget at the top with placeholder text "Search Questions...".

Below the search, display a <form> element. This form must contain:

A text input widget for "Title" (placeholder: "Lorem ipsum dolor sit amet...").

A textarea widget for "Body" (placeholder: "Lorem ipsum dolor sit amet...").

A text input widget for "Tags" (placeholder: "Lorem, ipsum, dolor").

A button widget with the text "Submit".

Transition 1 -> 2: Submitting the Post

User Action: User clicks the "Submit" button from Panel 1.

Transition:

The <form> in the main content area should disappear (a simple fade-out animation is preferred).

The text of the "Unanswered" badge in the left nav must be updated by JavaScript from "(25)" to "(26)".

The main content area should now display a list of posts (a ul). The top item in this new list should be a li representing the "User's Post" (as seen in Panel 2).

Panel 2: Post Submitted (Confirmation View)

Summary: This screen confirms the post is submitted by showing it in the "All Questions" feed and updating the "Unanswered" count.

Widgets:

The "All Questions" link remains active.

The "Unanswered" badge now shows "(26)".

The main content area shows the "Search Questions..." search input and, below it, a ul list of posts, with "User's Post" at the top.

Transition 2 -> 3: Checking Responses

User Action: User clicks the "My Posts" link in the left navigation sidebar.

Transition:

The active class (yellow background) must move from the "All Questions" link to the "My Posts" link.

The content in the main content area (the "All Questions" feed) should be completely replaced by a new layout.

Panel 3: Viewing a Response

Summary: This screen shows a master-detail view of the user's posts and their responses.

Widgets:

The "My Posts" link is now active.

The main content area should be a two-column (master-detail) layout.

Master Column (left): A ul list of the user's posts. The top post should be highlighted (selected) and include a small badge or text indicating "New Response."

Detail Column (right): This div displays the content of the selected post. It should contain:

The "Title" of the post.

The "Body" of the post.

The "Tags" of the post.

A new section labeled "Response" which contains placeholder text and icons for "Instructor" and "Peer" responses.

Files changed (3) hide show

index.html +121 -44
script.js +184 -67
style.css +129 -34

index.html CHANGED Viewed

@@ -3,69 +3,146 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EduPulse - Student Q&A Platform</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="components/navbar.js"></script>
-    <script src="components/sidebar.js"></script>
-    <script src="components/post-card.js"></script>
-    <script src="components/trending-sidebar.js"></script>
 </head>
 <body class="bg-gray-50">
-    <custom-navbar></custom-navbar>
-    <div class="flex flex-col md:flex-row gap-6 p-4 max-w-7xl mx-auto">
-        <custom-sidebar></custom-sidebar>
-        <main class="flex-1">
-            <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-yellow-500 flex items-center">
-                    <div class="bg-yellow-100 p-3 rounded-full mr-4">
-                        <i data-feather="alert-circle" class="text-yellow-600"></i>
                     </div>
-                    <div>
-                        <div class="text-sm text-gray-500">Unresponded</div>
-                        <div class="text-xl font-bold">12</div>
                     </div>
-                </div>
-                <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-500 flex items-center">
-                    <div class="bg-blue-100 p-3 rounded-full mr-4">
-                        <i data-feather="activity" class="text-blue-600"></i>
                     </div>
-                    <div>
-                        <div class="text-sm text-gray-500">Active Now</div>
-                        <div class="text-xl font-bold">24</div>
                     </div>
                 </div>
-                <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-green-500 flex items-center">
-                    <div class="bg-green-100 p-3 rounded-full mr-4">
-                        <i data-feather="clock" class="text-green-600"></i>
                     </div>
-                    <div>
-                        <div class="text-sm text-gray-500">Avg Wait Time</div>
-                        <div class="text-xl font-bold">18 min</div>
                     </div>
                 </div>
-            </div>
-            <div class="mb-6 relative">
-                <input type="text" placeholder="Search questions..." class="w-full p-4 pl-12 rounded-xl border border-gray-200 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                <i data-feather="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
-            </div>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="posts-container">
-                <!-- Post cards will be inserted here by JavaScript -->
-            </div>
-        </main>
-        <custom-trending-sidebar></custom-trending-sidebar>
     </div>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Piazza Redesign - CS1101</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gray-50">
+    <div class="container mx-auto p-4 max-w-7xl">
+        <!-- Header -->
+        <header class="bg-white rounded-lg shadow-sm p-4 mb-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-2xl font-bold text-gray-800">CS1101</h1>
+                <div class="flex space-x-4">
+                    <div class="stat-box bg-blue-50 border-l-4 border-blue-500">
+                        <div class="text-sm text-gray-600">All Questions</div>
+                        <div class="text-xl font-bold">142</div>
                     </div>
+                    <div class="stat-box bg-green-50 border-l-4 border-green-500">
+                        <div class="text-sm text-gray-600">Active Users</div>
+                        <div class="text-xl font-bold">24</div>
                     </div>
+                    <div class="stat-box bg-purple-50 border-l-4 border-purple-500">
+                        <div class="text-sm text-gray-600">Avg Wait Time</div>
+                        <div class="text-xl font-bold">18 min</div>
                     </div>
+                </div>
+            </div>
+        </header>
+        <div class="flex gap-6">
+            <!-- Left Navigation Sidebar -->
+            <nav class="w-64 bg-white rounded-lg shadow-sm p-4 h-fit sticky top-4">
+                <ul class="space-y-1">
+                    <li>
+                        <a href="#" class="nav-item active" id="all-questions-link">
+                            <i data-feather="inbox" class="w-4 h-4"></i>
+                            <span>All Questions</span>
+                        </a>
+                        <a href="#" class="nav-subitem ml-8" id="unanswered-link">
+                            <i data-feather="help-circle" class="w-4 h-4"></i>
+                            <span>Unanswered (<span id="unanswered-count">25</span>)</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-item" id="my-posts-link">
+                            <i data-feather="user" class="w-4 h-4"></i>
+                            <span>My Posts</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-item">
+                            <i data-feather="clock" class="w-4 h-4"></i>
+                            <span>Recent</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-item">
+                            <i data-feather="bookmark" class="w-4 h-4"></i>
+                            <span>Following</span>
+                        </a>
+                    </li>
+                </ul>
+                <div class="mt-8">
+                    <h3 class="text-sm font-medium text-gray-500 mb-2 flex items-center">
+                        <i data-feather="tag" class="w-4 h-4 mr-2"></i>
+                        Popular Tags
+                    </h3>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="tag">HW3</span>
+                        <span class="tag">Midterm</span>
+                        <span class="tag">Project</span>
                     </div>
                 </div>
+            </nav>
+            <!-- Main Content Area -->
+            <main class="flex-1" id="main-content">
+                <!-- Panel 1: Default View & Post Creation -->
+                <div id="panel-1">
+                    <div class="search-container mb-6">
+                        <input type="text" placeholder="Search Questions..." class="search-input">
+                        <i data-feather="search" class="search-icon"></i>
                     </div>
+                    <form id="post-form" class="bg-white rounded-lg shadow-sm p-6">
+                        <h2 class="text-xl font-bold mb-4">Create New Post</h2>
+                        <div class="mb-4">
+                            <label for="post-title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
+                            <input type="text" id="post-title" placeholder="Lorem ipsum dolor sit amet..." class="form-input">
+                        </div>
+                        <div class="mb-4">
+                            <label for="post-body" class="block text-sm font-medium text-gray-700 mb-1">Body</label>
+                            <textarea id="post-body" rows="5" placeholder="Lorem ipsum dolor sit amet..." class="form-textarea"></textarea>
+                        </div>
+                        <div class="mb-6">
+                            <label for="post-tags" class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
+                            <input type="text" id="post-tags" placeholder="Lorem, ipsum, dolor" class="form-input">
+                        </div>
+                        <button type="submit" class="submit-btn">Submit</button>
+                    </form>
+                </div>
+                <!-- Panel 2: Post Submitted (Hidden by default) -->
+                <div id="panel-2" class="hidden">
+                    <div class="search-container mb-6">
+                        <input type="text" placeholder="Search Questions..." class="search-input">
+                        <i data-feather="search" class="search-icon"></i>
                     </div>
+                    <ul id="posts-list" class="space-y-4">
+                        <!-- Posts will be inserted here by JavaScript -->
+                    </ul>
                 </div>
+                <!-- Panel 3: Viewing Responses (Hidden by default) -->
+                <div id="panel-3" class="hidden">
+                    <div class="flex gap-6">
+                        <!-- Master Column -->
+                        <div class="w-1/3">
+                            <h2 class="text-xl font-bold mb-4">My Posts</h2>
+                            <ul id="my-posts-list" class="space-y-2">
+                                <!-- User posts will be inserted here by JavaScript -->
+                            </ul>
+                        </div>
+                        <!-- Detail Column -->
+                        <div class="flex-1 bg-white rounded-lg shadow-sm p-6">
+                            <div id="post-detail">
+                                <!-- Post detail will be inserted here by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
     </div>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,82 +1,199 @@
-// Simulate live stats updates
-function updateDashboardStats() {
-    const unrespondedEl = document.querySelector('.border-yellow-500 + div .text-xl');
-    const activeEl = document.querySelector('.border-blue-500 + div .text-xl');
-    const waitTimeEl = document.querySelector('.border-green-500 + div .text-xl');
-    // Random fluctuations to make stats feel alive
-    const newUnresponded = Math.max(5, Math.min(20, 12 + Math.floor(Math.random() * 5) - 2));
-    const newActive = Math.max(15, Math.min(35, 24 + Math.floor(Math.random() * 7) - 3));
-    const newWaitTime = Math.max(5, Math.min(30, 18 + Math.floor(Math.random() * 10) - 5));
-    unrespondedEl.textContent = newUnresponded;
-    activeEl.textContent = newActive;
-    waitTimeEl.textContent = `${newWaitTime} min`;
-}
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize stats
-    updateDashboardStats();
-    setInterval(updateDashboardStats, 15000);
-    // Mock data - in a real app this would come from an API
-const posts = [
         {
             id: 1,
-            title: "How to solve the differential equation in HW3?",
-            content: "I'm stuck on problem 3b where we need to find the general solution...",
-            tags: ["Math", "Homework"],
-            status: "unanswered",
-            responses: 0,
-            upvotes: 5,
-            confidence: 20,
-            author: "Jane D.",
-            time: "2 hours ago"
-        },
-        {
-            id: 2,
-            title: "Best resources for learning React hooks?",
-            content: "Looking for good tutorials beyond the official documentation...",
-            tags: ["Programming", "React"],
-            status: "answered",
             responses: 3,
-            upvotes: 12,
-            confidence: 80,
-            author: "John S.",
-            time: "1 day ago"
         },
         {
-            id: 3,
-            title: "Lab report format requirements",
-            content: "Are there specific formatting guidelines for the biology lab reports?",
-            tags: ["Biology", "Lab"],
-            status: "unanswered",
             responses: 1,
-            upvotes: 3,
-            confidence: 40,
-            author: "Alex M.",
-            time: "30 minutes ago"
         }
     ];
-    const postsContainer = document.getElementById('posts-container');
-    posts.forEach(post => {
-        const postCard = document.createElement('custom-post-card');
-        postCard.setAttribute('post', JSON.stringify(post));
-        postsContainer.appendChild(postCard);
     });
-    // Simulate live updates
-    setInterval(() => {
-        const randomPost = Math.floor(Math.random() * posts.length);
-        const upvoteChange = Math.floor(Math.random() * 3);
-        posts[randomPost].upvotes += upvoteChange;
-        const postElements = document.querySelectorAll('custom-post-card');
-        postElements[randomPost].setAttribute('post', JSON.stringify(posts[randomPost]));
-    }, 10000);
-});
-// Filter functionality would be added here

+```javascript
 document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const postForm = document.getElementById('post-form');
+    const panel1 = document.getElementById('panel-1');
+    const panel2 = document.getElementById('panel-2');
+    const panel3 = document.getElementById('panel-3');
+    const postsList = document.getElementById('posts-list');
+    const myPostsList = document.getElementById('my-posts-list');
+    const postDetail = document.getElementById('post-detail');
+    const unansweredCount = document.getElementById('unanswered-count');
+    const allQuestionsLink = document.getElementById('all-questions-link');
+    const myPostsLink = document.getElementById('my-posts-link');
+    const unansweredLink = document.getElementById('unanswered-link');
+    // Sample data
+    const samplePosts = [
         {
             id: 1,
+            title: "Understanding recursion in binary trees",
+            body: "I'm having trouble understanding how recursion works with binary tree traversal. Can someone explain the base case and recursive case?",
+            tags: ["Recursion", "Binary Trees", "Data Structures"],
             responses: 3,
+            isMine: false,
+            hasNewResponse: false
         },
         {
+            id: 2,
+            title: "Clarification on HW3 problem 2",
+            body: "The problem statement says we need to implement a function with O(n) time complexity, but I'm not sure what approach to take.",
+            tags: ["Homework", "Algorithms"],
             responses: 1,
+            isMine: false,
+            hasNewResponse: false
         }
     ];
+    let userPosts = [];
+    // Form submission
+    postForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const title = document.getElementById('post-title').value;
+        const body = document.getElementById('post-body').value;
+        const tags = document.getElementById('post-tags').value.split(',').map(tag => tag.trim());
+        // Create new post
+        const newPost = {
+            id: Date.now(),
+            title,
+            body,
+            tags,
+            responses: 0,
+            isMine: true,
+            hasNewResponse: false
+        };
+        // Add to user posts
+        userPosts.unshift(newPost);
+        // Update UI
+        updateUnansweredCount();
+        showPanel2(newPost);
+        // Reset form
+        postForm.reset();
+    });
+    // Navigation
+    allQuestionsLink.addEventListener('click', function(e) {
+        e.preventDefault();
+        setActiveNav(allQuestionsLink);
+        showPanel1();
     });
+    myPostsLink.addEventListener('click', function(e) {
+        e.preventDefault();
+        setActiveNav(myPostsLink);
+        showPanel3();
+    });
+    // Helper functions
+    function updateUnansweredCount() {
+        const currentCount = parseInt(unansweredCount.textContent);
+        unansweredCount.textContent = currentCount + 1;
+    }
+    function setActiveNav(activeElement) {
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        activeElement.classList.add('active');
+    }
+    function showPanel1() {
+        panel1.classList.remove('hidden');
+        panel2.classList.add('hidden');
+        panel3.classList.add('hidden');
+    }
+    function showPanel2(newPost) {
+        // Add fade out animation to form
+        postForm.classList.add('fade-out');
+        setTimeout(() => {
+            panel1.classList.add('hidden');
+            panel2.classList.remove('hidden');
+            // Add sample posts + new post to the list
+            postsList.innerHTML = '';
+            // Add new post first
+            addPostToPanel2(newPost);
+            // Add sample posts
+            samplePosts.forEach(post => {
+                addPostToPanel2(post);
+            });
+            // Reset form animation
+            postForm.classList.remove('fade-out');
+        }, 300);
+    }
+    function addPostToPanel2(post) {
+        const postItem = document.createElement('li');
+        postItem.className = 'post-card';
+        postItem.innerHTML = `
+            <h3 class="text-lg font-bold mb-2">${post.title}</h3>
+            <p class="text-gray-600 mb-3">${post.body}</p>
+            <div class="flex flex-wrap gap-2 mb-3">
+                ${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+            </div>
+            <div class="flex justify-between text-sm text-gray-500">
+                <span>${post.responses} ${post.responses === 1 ? 'response' : 'responses'}</span>
+                <span>Just now</span>
+            </div>
+        `;
+        postsList.prepend(postItem);
+    }
+    function showPanel3() {
+        panel1.classList.add('hidden');
+        panel2.classList.add('hidden');
+        panel3.classList.remove('hidden');
+        // Populate user posts
+        myPostsList.innerHTML = '';
+        userPosts.forEach((post, index) => {
+            const postItem = document.createElement('li');
+            postItem.className = `post-card cursor-pointer ${index === 0 ? 'selected' : ''}`;
+            postItem.innerHTML = `
+                <h3 class="text-lg font-bold mb-2">${post.title}</h3>
+                ${post.hasNewResponse ? '<span class="new-response-badge inline-block mb-2">New Response</span>' : ''}
+                <div class="flex flex-wrap gap-2 mb-2">
+                    ${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+                </div>
+                <div class="text-sm text-gray-500">
+                    ${post.responses} ${post.responses === 1 ? 'response' : 'responses'}
+                </div>
+            `;
+            postItem.addEventListener('click', () => {
+                document.querySelectorAll('.post-card').forEach(card => {
+                    card.classList.remove('selected');
+                });
+                postItem.classList.add('selected');
+                showPostDetail(post);
+            });
+            myPostsList.appendChild(postItem);
+        });
+        // Show detail of first post
+        if (userPosts.length > 0) {
+            showPostDetail(userPosts[0]);
+        }
+    }
+    function showPostDetail(post) {
+        postDetail.innerHTML = `
+            <h2 class="text-2xl font-bold mb-4">${post.title}</h2>
+            <div class="prose max-w-none mb-6">
+                <p>${post.body}</p>
+            </div>
+            <div class="flex flex-wrap gap-2 mb-8">
+                ${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+            </div>
+            <h3 class="text-xl font-bold mb-4">Responses</h3>
+            <div class="space-y-6">
+                <div class="response-card">
+                    <div class="flex items-start mb-2">
+                        <div class="bg-blue-100 p-2 rounded-full mr-3">
+                            <i data-feather="user-check" class="text-blue-600 w-5 h-5"></i>
+                        </div>
+                        <div>
+                            <h4

style.css CHANGED Viewed

@@ -1,54 +1,149 @@
-:root {
-    --primary: #4f46e5;
-    --secondary: #10b981;
-    --danger: #ef4444;
-    --warning: #f59e0b;
-    --success: #10b981;
 }
-.unanswered-post {
-    border-left: 4px solid var(--warning);
 }
-.answered-post {
-    border-left: 4px solid var(--success);
 }
 .post-card {
-    transition: all 0.2s ease;
 }
 .post-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
-/* Dashboard stats bubbles */
-.dashboard-stat {
-    transition: all 0.3s ease;
-}
-.dashboard-stat:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
-.confidence-meter {
-    height: 6px;
-    border-radius: 3px;
-    background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 50%, var(--success) 100%);
 }
-.confidence-indicator {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    border: 2px solid white;
-    position: absolute;
-    top: -3px;
-    transform: translateX(-50%);
 }
-@media (max-width: 768px) {
-    .sidebar {
-        display: none;
-    }
 }

+/* Base Styles */
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }
+/* Header & Stats */
+.stat-box {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    min-width: 140px;
 }
+/* Navigation */
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 0.375rem;
+    color: #4b5563;
+    transition: all 0.2s;
 }
+.nav-item:hover {
+    background-color: #f3f4f6;
+    color: #111827;
+}
+.nav-item.active {
+    background-color: #fef3c7;
+    color: #92400e;
+    font-weight: 500;
+}
+.nav-subitem {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem 0.5rem 2rem;
+    border-radius: 0.375rem;
+    color: #4b5563;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+.nav-subitem:hover {
+    background-color: #f3f4f6;
+    color: #111827;
+}
+/* Tags */
+.tag {
+    display: inline-block;
+    background-color: #e0e7ff;
+    color: #4f46e5;
+    font-size: 0.75rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+}
+/* Search */
+.search-container {
+    position: relative;
+}
+.search-input {
+    width: 100%;
+    padding: 0.75rem 1rem 0.75rem 2.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+}
+.search-input:focus {
+    outline: none;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+.search-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+}
+/* Form Elements */
+.form-input, .form-textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    transition: all 0.2s;
+}
+.form-input:focus, .form-textarea:focus {
+    outline: none;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+.submit-btn {
+    background-color: #4f46e5;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+.submit-btn:hover {
+    background-color: #4338ca;
+}
+/* Posts */
 .post-card {
+    background-color: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    transition: all 0.2s;
 }
 .post-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
+.post-card.selected {
+    border-left: 4px solid #4f46e5;
+    background-color: #f5f3ff;
 }
+.new-response-badge {
+    background-color: #fef3c7;
+    color: #92400e;
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
 }
+/* Animations */
+.fade-out {
+    animation: fadeOut 0.3s forwards;
 }
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
 }