pen-plus/index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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 active">Home</a>
                <a href="resources.html" class="nav-link">All Resources</a>
                <a href="updates.html" class="nav-link">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>
        <!-- Hero search -->
        <section class="hero-search">
            <div class="container">
                <h2 class="hero-heading">Find clinical resources</h2>
                <p class="hero-text">Search across protocols, training guides, data tools, and more for PEN-Plus NCD programs</p>
                <div class="search-bar search-bar-hero">
                    <svg class="search-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                    <input
                        type="text"
                        id="heroSearch"
                        class="search-input"
                        placeholder="Search by name, category, or keyword..."
                        autocomplete="off"
                    >
                    <button id="heroSearchClear" class="search-clear" hidden aria-label="Clear search">&times;</button>
                </div>
                <div id="heroSearchResults" class="hero-search-results" hidden>
                    <div id="heroResultsList" class="hero-results-list"></div>
                    <a href="resources.html" class="hero-results-link">View all resources &rarr;</a>
                </div>
            </div>
        </section>

        <!-- Quick stats -->
        <section class="stats-bar">
            <div class="container">
                <div class="stats-row">
                    <div class="stat-item">
                        <span class="stat-number" id="statTotal">—</span>
                        <span class="stat-label">Resources</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="statCategories">—</span>
                        <span class="stat-label">Categories</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="statLanguages">—</span>
                        <span class="stat-label">Languages</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="statTypes">—</span>
                        <span class="stat-label">File Types</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Category cards -->
        <section class="section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">Browse by Category</h2>
                    <a href="resources.html" class="section-link">View all &rarr;</a>
                </div>
                <div id="categoryCards" class="category-grid">
                    <!-- Populated by JS -->
                </div>
                <div id="homepageLoading" class="loading-state">
                    <div class="spinner"></div>
                    <p>Loading resources...</p>
                </div>
                <div id="homepageEmpty" class="empty-state" hidden>
                    <h3>No resources synced yet</h3>
                    <p>The resource catalog is empty. Run the <strong>Sync Drive Resources</strong> workflow from the Actions tab to populate it.</p>
                </div>
            </div>
        </section>

        <!-- Recent updates -->
        <section class="section section-alt">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">Recently Updated</h2>
                    <a href="updates.html" class="section-link">View all updates &rarr;</a>
                </div>
                <div id="recentUpdates" class="recent-updates-list">
                    <!-- Populated by JS -->
                </div>
            </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>