unishare/posts.html at main · sofia177/unishare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UniShare — My Posts</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/posts.css">
</head>
<body>
    <svg style="display: none" xmlns="http://www.w3.org/2000/svg">
        <!-- Same SVG symbols as index.html -->
        <symbol id="ic-file" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <path d="M11 2H5a1 1 0 00-1 1v14a1 1 0 001 1h10a1 1 0 001-1V7l-5-5z"/>
            <path d="M11 2v5h5"/>
        </symbol>
        <symbol id="ic-plus" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="10" y1="4" x2="10" y2="16"/>
            <line x1="4" y1="10" x2="16" y2="10"/>
        </symbol>
        <symbol id="ic-star" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <path d="M10 2l2.4 5h5.1l-4.1 3.2 1.5 5.3L10 12.5l-4.9 2.9 1.5-5.3L2.5 7h5.1L10 2z"/>
        </symbol>
        <symbol id="ic-chat" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <path d="M2 4a1 1 0 011-1h14a1 1 0 011 1v9a1 1 0 01-1 1H6l-4 4V4z"/>
        </symbol>
        <symbol id="ic-heart" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/>
        </symbol>
        <symbol id="ic-download" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <path d="M10 3v10M6 9l4 4 4-4M4 17h12"/>
        </symbol>
        <symbol id="ic-cap" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <path d="M10 4L2 8l8 4 8-4-8-4z"/>
            <path d="M5 10v4c0 1.1 2.24 2 5 2s5-.9 5-2v-4"/>
        </symbol>
        <symbol id="ic-settings" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <circle cx="10" cy="10" r="3"/>
            <path d="M10 1v2M10 17v2M3.05 3.05l1.41 1.41M15.54 15.54l1.41 1.41M1 10h2M17 10h2M3.05 16.95l1.41-1.41M15.54 4.46l1.41-1.41"/>
        </symbol>
        <symbol id="ic-search" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6">
            <circle cx="9" cy="9" r="5.5"/>
            <path d="M13.5 13.5L17 17"/>
        </symbol>
    </svg>

    <nav class="navbar">
        <a class="navbar-brand" href="index.html">
            <div class="logo-icon">U</div>
            UniShare
        </a>
        <div class="navbar-search">
            <svg class="icon search-icon" width="14" height="14"><use href="#ic-search"/></svg>
            <input type="text" placeholder="Search posts..." id="globalSearch">
        </div>
        <div class="navbar-actions">
            <div class="db-status-dot" id="dbStatusDot"></div>
            <button class="btn-login" id="loginBtn" onclick="window.location.href='login.html'">
                <svg class="icon" width="14" height="14"><use href="#ic-cap"/></svg>
                Sign in
            </button>
            <div id="userMenu" style="display: none; align-items: center; gap: 12px">
                <span id="userWelcome" style="font-size: 12px; color: rgba(255, 255, 255, 0.8)"></span>
                <div style="position: relative">
                    <img class="navbar-avatar" id="navAvatar" src="" alt="avatar" onclick="toggleDropdown()" />
                    <div id="userDropdown" style="display: none; position: absolute; right: 0; top: 44px; background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); min-width: 170px; z-index: 200; border: 1px solid var(--border);">
                        <div style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--navy);" id="dropdownName"></div>
                        <a onclick="window.location.href='posts.html'; closeDropdown();" style="display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text); text-decoration: none;">
                            <svg class="icon" width="14" height="14"><use href="#ic-file"/></svg>
                            My Posts
                        </a>
                        <a onclick="window.location.href='favorites.html'; closeDropdown();" style="display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text); text-decoration: none;">
                            <svg class="icon" width="14" height="14"><use href="#ic-star"/></svg>
                            Favorites
                        </a>
                        <a onclick="logout(); closeDropdown();" style="display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--red); text-decoration: none;">
                            <svg class="icon" width="14" height="14" style="color: var(--red)"><use href="#ic-logout"/></svg>
                            Logout
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="nav-tabs">
        <div class="nav-tab" data-page="home" onclick="window.location.href='index.html'">Home</div>
        <div class="nav-tab active" data-page="posts">Posts</div>
        <div class="nav-tab" data-page="favorites" onclick="window.location.href='favorites.html'">Favorites</div>
        <div class="nav-tab" id="adminTab" data-page="admin" onclick="window.location.href='admin.html'">Admin</div>
    </div>

    <div id="mainContent">
        <div class="page-container">
            <div class="layout-2col">
                <aside class="sidebar">
                    <div class="sidebar-title">My Content</div>
                    <button class="btn-create" onclick="showCreatePostModal()">+ New Post</button>
                </aside>
                <main>
                    <div class="content-header">
                        <div>Your Posts</div>
                    </div>
                    <div class="posts-grid list-view" id="myPostsGrid">
                        <div class="loading"><div class="spinner"></div></div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <div id="postModal" style="display: none;">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title" id="postModalTitle"></span>
                <button onclick="closePostModal()" class="modal-close">&times;</button>
            </div>
            <div id="postModalContent"></div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script src="js/login.js"></script>
    <script src="js/posts.js"></script>
</body>
</html>