-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
174 lines (169 loc) · 10.7 KB
/
Copy pathindex.html
File metadata and controls
174 lines (169 loc) · 10.7 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Training Search Portal</title>
<meta name="description" content="Search and discover training courses, labs, and certifications.">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23ee0000'/><text x='50%25' y='55%25' dominant-baseline='central' text-anchor='middle' fill='white' font-size='18' font-weight='bold' font-family='sans-serif'>T</text></svg>">
</head>
<body>
<!-- Header -->
<header class="app-header" role="banner">
<div class="header-inner">
<a href="index.html" class="app-logo" aria-label="Training Search Portal Home">
<div class="logo-icon" aria-hidden="true">T</div>
<span class="app-title">Training Search Portal</span>
</a>
<div class="header-actions">
<div class="resources-dropdown">
<button id="resources-toggle" class="header-link" aria-expanded="false" aria-controls="resources-panel" title="Resources for Content Creators">
Resources
<svg class="resources-chevron" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div id="resources-panel" class="resources-panel" role="region" aria-label="Resources for Content Creators">
<div class="resource-card">
<h3 class="resource-title">Open Training with RCB</h3>
<p class="resource-desc">A collaborative platform for SMEs to create and share technical training content.</p>
<a href="https://source.redhat.com/departments/products_and_global_engineering/whats_new_from_products_and_portfolio/open_training_program" class="resource-link" target="_blank" rel="noopener noreferrer">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3.5 2.5h6v6m0-6l-7 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
<div class="resource-card">
<h3 class="resource-title">Rapid Course Builder</h3>
<p class="resource-desc">AI-powered tool that helps SMEs transform learning objectives into structured courses.</p>
<a href="https://videos.learning.redhat.com/playlist/dedicated/1_77janw6f/1_cutm4ecz" class="resource-link" target="_blank" rel="noopener noreferrer">
Watch demos
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3.5 2.5h6v6m0-6l-7 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
<div class="resource-card">
<h3 class="resource-title">Create Training Content</h3>
<p class="resource-desc">Ready to build a course? Submit an Open Training request to get started.</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSepUaRiRdyA3PEzLP8w59reAsKRe19dL3ewpJGvJ7Gbggt-xg/viewform" class="resource-link resource-link--cta" target="_blank" rel="noopener noreferrer">
Submit request
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2 6h8m-3-3l3 3-3 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
</div>
<button id="theme-toggle" class="btn-theme" title="Toggle dark mode" aria-label="Toggle dark mode">
<span class="theme-dark" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 2a6 6 0 108 8c-3.3 0-6-2.7-6-6 0-1.1.3-2.1.7-3A5.9 5.9 0 006 2z" stroke="currentColor" stroke-width="1.2"/></svg>
</span>
<span class="theme-light" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.5v2m0 9v2m-4.6-10.9l1.4 1.4m6.4 6.4l1.4 1.4M1.5 8h2m9 0h2M3.4 12.6l1.4-1.4m6.4-6.4l1.4-1.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
</span>
</button>
</div>
</div>
</header>
<main class="app-container" role="main">
<!-- Search section -->
<section class="search-section" aria-label="Search training catalog">
<div class="search-wrapper">
<div class="search-input-wrap">
<span class="search-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.45 4.39l3.08 3.08a.75.75 0 11-1.06 1.06l-3.08-3.08A7 7 0 012 9z" fill="currentColor"/></svg>
</span>
<input
type="search"
id="search-input"
placeholder="Search training by title, product, or description..."
autocomplete="off"
aria-label="Search training catalog"
>
<button id="search-clear" aria-label="Clear search" title="Clear search">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4.5 4.5l7 7m0-7l-7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
</div>
<button id="advanced-toggle" aria-expanded="false" aria-controls="advanced-panel">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 2h13L9 8.5V13l-2 1V8.5L1.5 2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
<span class="toggle-text">Advanced Search</span>
</button>
</div>
<div class="search-hint" aria-hidden="true">Press <kbd>/</kbd> to focus search</div>
<!-- Advanced Search Panel -->
<div id="advanced-panel" class="advanced-panel" role="region" aria-label="Advanced search filters">
<div class="advanced-inner">
<div class="filter-grid">
<div class="filter-group">
<div class="filter-checkbox">
<input type="checkbox" id="filter-show-all" aria-label="Show all trainings">
<span onclick="document.getElementById('filter-show-all').click()">Show All Trainings</span>
</div>
</div>
<div class="filter-group">
<label for="filter-status">Internal Status</label>
<select id="filter-status" aria-label="Filter by status">
<option value="Published" selected>Published</option>
</select>
</div>
<div class="filter-group">
<label for="filter-product">Product</label>
<select id="filter-product" aria-label="Filter by product">
<option value="">All Products</option>
</select>
</div>
<div class="filter-group">
<label for="filter-tech-level">Technical Level</label>
<select id="filter-tech-level" aria-label="Filter by technical level">
<option value="">All Levels</option>
</select>
</div>
<div class="filter-group">
<label for="filter-sort">Sort By</label>
<select id="filter-sort" aria-label="Sort results">
<option value="relevance">Relevance</option>
<option value="duration-asc">Duration (Shortest)</option>
<option value="duration-desc">Duration (Longest)</option>
<option value="date-newest">Date (Newest)</option>
<option value="date-oldest">Date (Oldest)</option>
</select>
</div>
</div>
</div>
</div>
</section>
<!-- Results bar -->
<div class="results-bar">
<span id="result-count" aria-live="polite"></span>
</div>
<!-- Results container -->
<section id="results-container" aria-label="Search results" aria-live="polite">
</section>
</main>
<!-- Scripts — order matters: utilities first, then modules, then app controller -->
<script src="utils.js"></script>
<script src="csv-parser.js"></script>
<script src="search.js"></script>
<script src="ui.js"></script>
<script src="app.js"></script>
<script>
(function() {
var btn = document.getElementById('resources-toggle');
var panel = document.getElementById('resources-panel');
btn.addEventListener('click', function(e) {
e.stopPropagation();
var open = panel.classList.toggle('open');
btn.setAttribute('aria-expanded', open);
});
document.addEventListener('click', function(e) {
if (!panel.contains(e.target) && !btn.contains(e.target)) {
panel.classList.remove('open');
btn.setAttribute('aria-expanded', 'false');
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && panel.classList.contains('open')) {
panel.classList.remove('open');
btn.setAttribute('aria-expanded', 'false');
btn.focus();
}
});
})();
</script>
</body>
</html>