pen-plus/updates.html at main · kategage/pen-plus · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recent Updates - PEN-Plus Clinical Resource Hub</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="header-content">
                <h1 class="site-title">PEN-Plus Clinical Resource Hub</h1>
                <p class="site-subtitle">Clinical tools and training materials for severe non-communicable disease care in low-resource settings</p>
            </div>
            <nav class="site-nav">
                <a href="index.html" class="nav-link">Home</a>
                <a href="resources.html" class="nav-link">All Resources</a>
                <a href="updates.html" class="nav-link active">Updates</a>
                <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false" title="Toggle dark mode">
                    <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
                    <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
                </button>
            </nav>
        </div>
    </header>

    <main class="container main-content">
        <section class="page-heading">
            <h2>Recent Updates</h2>
            <p>Resources sorted by most recently modified, showing the latest changes across all categories</p>
        </section>

        <section class="updates-filter-bar">
            <div class="filter-group">
                <label for="updatesTimeFilter">Show</label>
                <select id="updatesTimeFilter" class="filter-select">
                    <option value="7">Last 7 days</option>
                    <option value="30" selected>Last 30 days</option>
                    <option value="90">Last 90 days</option>
                    <option value="all">All time</option>
                </select>
            </div>
            <span id="updatesCount" class="results-count"></span>
        </section>

        <section class="results-section">
            <div id="updatesList" class="updates-list">
                <!-- Updates rendered here by JS -->
            </div>
            <div id="noUpdates" class="no-results" hidden>
                <p>No resources were modified in this time period.</p>
            </div>
            <div id="loadingState" class="loading-state">
                <div class="spinner"></div>
                <p>Loading recent updates...</p>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <p class="footer-brand">PEN-Plus Clinical Resource Hub</p>
                <p class="footer-description">Resources synced from <a href="https://drive.google.com/drive/folders/1AJ596cpxzQDUo685nR7Q1pM2d6dcGGgQ" target="_blank" rel="noopener">Google Drive</a></p>
                <p class="footer-meta">Last synced: <span id="lastSynced">—</span> &middot; Total resources: <span id="totalResources">—</span></p>
            </div>
        </div>
    </footer>

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