supervisor-notes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supervisor Notes | Research Portal</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@极3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        .sidebar {
            transition: all 0.3s ease;
        }
        .note-card {
            transition: all 0.3s ease;
        }
        .note-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 hidden md:block">
            <div class="p-4">
                <div class="flex items-center space-x-3">
                    <i data-feather="book-open" class="w-8极8"></i>
                    <h1 class="text-xl font-bold">Research Portal</h1>
                </div>
                <div class="mt-8">
                    <div class="px-4 py-2 bg-indigo-800 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                <i data-feather="user"></i>
                            </div>
                            <div>
                                <p class="font-medium">PhD Student</p>
                                <p class="text-xs text-indigo-300">Computer Science</p>
                            </div>
                        </div>
                    </div>
                </div>
                <nav class="mt-8">
                    <div class="space-y-2">
                        <a href="index.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg">
                            <i data-feather="home"></i>
                            <span>Dashboard</span>
                        </a>
                        <a href="my-papers.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg">
                            <i data-feather="file-text"></极>
                            <span>My Papers</span>
                        </a>
                        <极 href="references.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg">
                            <i data-feather="bookmark"></i>
                            <span>References</span>
                        </a>
                        <a href="journals.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg">
                            <i data-feather="book"></i>
                            <span>Journals</span>
                        </a>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg">
                            <i data-feather="calendar"></i>
                            <span>Timeline</span>
                        </a>
                        <a href="supervisor-notes.html" class="flex items-center space-x-3 px-4 py-3 bg-indigo-800 rounded-lg">
                            <i data-feather="message-square"></i>
                            <span>Supervisor Notes</span>
                        </a>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-极 rounded-lg">
                            <i data-feather="settings"></i>
                            <span>Settings</span>
                        </a>
                    </div>
                </nav>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 overflow-auto">
            <!-- Header -->
            <header class="bg-white shadow-sm">
                <div class="px-6 py-4 flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <button class="md极idden">
                            <i data-feather="menu"></i>
                        </button>
                        <h1 class="text-xl font-semibold text-gray-800">Supervisor Notes</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            <input type="text" placeholder="Search notes..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <button class="flex items-center space-x-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
                            <i data-feather="plus" class="w-4 h-4"></i>
                            <span>New Note</span>
                        </button>
                    </div>
                </div>
            </header>

            <!-- Main Content -->
            <main class="p-6">
                <!-- Filters -->
                <div class="bg-white p-4 rounded-xl shadow-sm mb-6">
                    <div class="flex flex-wrap items-center gap-4">
                        <div class="flex items-center space-x-2">
                            <span class="text-sm font-medium">Status:</span>
                            <select class="border rounded-lg px-3 py-2 text-sm">
                                <option>All Status</option>
                                <option>Unread</option>
                                <option>Read</option>
                                <option>Action Required</option>
                                <option>Completed</option>
                            </select>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-sm font-medium">Paper:</span>
                            <select class="border rounded-lg px-3 py-2 text-sm">
                                <option>All Papers</option>
                                <option>Deep Learning Approaches for NLP</option>
                                <option>Transformer Models Survey</option>
                                <option>Sentiment Analysis Techniques</option>
                                <option>AI Ethics in Research</option>
                            </select>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-sm font-medium">Sort by:</span>
                            <select class="border rounded-lg px-3 py-2 text-sm">
                                <option>Most Recent</option>
                                <option>Oldest</option>
                                <option>Priority</option>
                                <option>Paper Title</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Notes Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Note Card 1 -->
                    <div class="note-card bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Action Required</span>
                                <div class="text-xs text-gray-500">2 hours ago</div>
                            </div>
                            <h3 class="font-bold text-lg mb-2">Introduction Section Revision</h3>
                            <p class="text-sm text-gray-500 mb-4">Deep Learning Approaches for NLP</p>
                            <p class="text-sm text-gray-600 mb-4">The introduction needs to better contextualize the research gap. Please expand on the limitations of current approaches before presenting your contribution.</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor">
                                    <span class="text-xs text-gray-500">Dr. Sarah Johnson</span>
                                </div>
                                <button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Mark as Read</button>
                            </div>
                        </div>
                    </div>

                    <!-- Note Card 2 -->
                    <div class="note-card bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Completed</span>
                                <div class="text-xs text-gray-500">1 day ago</div>
                            </div>
                            <h3 class="font-bold text-lg mb-2">Methodology Approval</h3>
                            <p class="text-sm text-gray-500 mb-4">Transformer Models Survey</p>
                            <p class="text-sm text-gray-600 mb-4">The methodology section looks solid. The experimental design is appropriate for addressing your research questions. You can proceed with data collection.</p>
                            <div class="flex items-center justify-between">
                                <div class极flex items-center space-x-2">
                                    <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor">
                                    <span class="text-xs text-gray-500">Dr. Sarah Johnson</span>
                                </div>
                                <button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Reply</button>
                            </div>
                        </div>
                    </div>

                    <!-- Note Card 3 -->
                    <div class="note-card bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Unread</span>
                                <div class="text-xs text-gray-500">3 days ago</div>
                            </div>
                            <h3 class="font-bold text-lg mb-2">Conference Recommendation</h3>
                            <p class="text-sm text-gray-500 mb-4">General Advice</p>
                            <p class="text-sm text-gray-600 mb-4">I recommend submitting your work to ACL 2024. The deadline is in two months, which gives us enough time to prepare a strong submission.</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor">
                                    <span class="text-xs text-gray-500">Dr. Sarah Johnson</span>
                                </div>
                                <button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Mark as Read</button>
                            </div>
                        </div>
                    </div>

                    <!-- Note Card 4 -->
                    <div class="note-card bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Action Required</span>
                                <div class="text-xs text-gray-500">4 days ago</div>
                            </div>
                            <h3 class="font-bold text-lg mb-2">Literature Update</h3>
                            <p class="text-sm text-gray-500 mb-4">Sentiment Analysis Techniques</p>
                            <p class极text-sm text-gray-600 mb-4">Please include the recent paper by Smith et al. (2023) on transformer-based sentiment analysis in your literature review. It's highly relevant to your work.</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor">
                                    <span class="text-xs text-gray-500">Dr. Sarah Johnson</span>
                                </div>
                                <button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Mark as Read</button>
                            </div>
                        </div>
                    </div>

                    <!-- Note Card 5 -->
                    <div class="note-card bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Completed</span>
                                <div class="text-xs text-gray-500">1 week ago</div>
                            </div>
                            <h3 class="font-bold text-lg mb-2">Meeting Feedback</h3>
                            <p class="text-sm text-gray-500 mb-4">AI Ethics in Research</p>
                            <p class="text-sm text-gray-600 mb-4">Excellent progress in yesterday's meeting. The ethical framework you've developed is comprehensive. Let's schedule another meeting once you've applied it to your case studies.</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor">
                                    <span class="text-xs text-gray-500">Dr. Sarah Johnson</span>
                                </div>
                                <button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Reply</button>
                            </div>
                        </div>
                    </div>

                    <!-- Note Card 6 -->
                    <div class="note-card bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Unread</span>
                                <div class="text-xs text-gray-500">2 weeks ago</div>
                            </div>
                            <h3 class="font-bold text-lg mb-2">Journal Recommendation</h3>
                            <p class="text-sm text-gray-500 mb-4">Deep Learning Approaches for NLP</p>
                            <p class="text-sm text-gray-600 mb-4">Based on the current state of your paper, I recommend targeting IEEE Transactions on Pattern Analysis and Machine Intelligence. Their scope aligns well with your contributions.</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg极 alt="Supervisor">
                                    <span class="text-xs text-gray-500">Dr. Sarah Johnson</span>
                                </div>
                                <button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Mark as Read</button>
                            </div>
                        </div>
                    </div>

                    <!-- Add New Note Card -->
                    <div class="note-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl flex items-center justify-center cursor-pointer hover:border-indigo-400 hover:bg-indigo-50 transition-colors">
                        <div class="text-center p-6">
                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i data-feather="plus" class="text-indigo-600"></i>
                            </div>
                            <h3 class="font-medium text-gray-700">Add New Note</h3>
                            <p class="text-sm text-gray-500 mt-1">Record a new supervisor note</p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>AOS.init();</script>
    <script>feather.replace();</script>
</body>
</html>