Skip to content

Commit bafc85a

Browse files
luanmeiniubiluanmeiniubi
committed
add feedback button, update welcome.html
1 parent 6666a55 commit bafc85a

10 files changed

Lines changed: 182 additions & 86 deletions

File tree

‎assets/images/Home.png‎

-588 Bytes
Loading

‎assets/images/feedback.png‎

1.45 KB
Loading

‎assets/images/need-help.png‎

2.4 KB
Loading

‎index.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
77
<title>OLI Torus Launchpad</title>
88
<link rel="stylesheet" href="style.css" />
9+
<link rel="stylesheet" href="temp-hide.css">
910
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
1011
</head>
1112
<body>
@@ -14,11 +15,12 @@
1415
<button id="menu-toggle" class="menu-toggle">☰</button>
1516

1617
<a href="/" class="brand" aria-label="OLI Torus Launchpad (home)">
17-
<img src="assets/images/logo.png" alt="" class="brand-logo" aria-hidden="true" />
18-
<span class="brand-oli">OLI</span>
19-
<span class="brand-torus">Torus</span>
20-
<span class="brand-sub">Launchpad</span>
21-
</a>
18+
<img src="assets/images/logo.png" alt="" class="brand-logo" aria-hidden="true" />
19+
<span class="brand-oli">OLI</span>
20+
<span class="brand-torus">Torus</span>
21+
<span class="brand-sub">Launchpad</span>
22+
</a>
23+
2224
<a href="https://proton.oli.cmu.edu/" class="open-torus" target="_blank">LAUNCH TORUS</a>
2325
</div>
2426
<div class="header-right">
@@ -31,12 +33,17 @@
3133
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
3234
</svg>
3335
</a>
36+
<a href="https://forms.gle/3ta7TqVyWjRdgTmx9"
37+
target="_blank"
38+
class="feedback-btn"
39+
aria-label="Feedback">
40+
<img src="assets/images/feedback.png" alt="Feedback" class="feedback-icon" />
41+
</a>
3442

3543
<button class="home-btn" aria-label="Home" data-page="pages/introduction/logging-in.html">
36-
<svg class="home-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white">
37-
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
38-
</svg>
39-
</button>
44+
<img src="assets/images/home.png" alt="Home" class="home-icon" />
45+
</button>
46+
4047
</div>
4148
</header>
4249

@@ -121,7 +128,6 @@
121128
</div>
122129
<ul class="submenu">
123130
<li data-page="pages/develop-your-course/learning-objectives.html"><span>Learning Objectives</span></li>
124-
<li data-page="pages/develop-your-course/create-learning-objectives.html"><span>Create Learning Objectives</span></li>
125131
<li data-page="pages/develop-your-course/create-sub-objectives.html"><span>Create Sub-Objectives</span></li>
126132
<li data-page="pages/develop-your-course/create-containers.html"><span>Create Containers</span></li>
127133
<li data-page="pages/develop-your-course/create-a-page.html"><span>Create a Page</span></li>

‎main.js‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
11
// main.js
22
console.log('main.js loaded');
33

4+
5+
46
(function () {
57
// --- small DOM helpers ---
68
const $all = (sel, root = document) => Array.from(root.querySelectorAll(sel));
79
const $ = (sel, root = document) => root.querySelector(sel);
810

11+
// =============================================================
12+
// Load welcome page by default on first visit
13+
// =============================================================
14+
window.addEventListener("DOMContentLoaded", () => {
15+
const content = document.querySelector(".content");
16+
if (content) {
17+
fetch("pages/introduction/welcome.html")
18+
.then(r => r.text())
19+
.then(html => {
20+
content.innerHTML = html;
21+
// Optionally highlight the matching menu item
22+
const li = document.querySelector('.submenu li[data-page="pages/welcome.html"]');
23+
if (li) {
24+
document.querySelectorAll(".submenu li.selected").forEach(el => el.classList.remove("selected"));
25+
li.classList.add("selected");
26+
}
27+
})
28+
.catch(err => console.error("Error loading welcome page:", err));
29+
}
30+
});
31+
32+
33+
934
// clean up badges in the sidebar so text isn’t duplicated in labels
1035
document.querySelectorAll('.submenu .badge').forEach(badge => {
1136
if (!badge.hasAttribute('data-label')) {
@@ -14,21 +39,24 @@ console.log('main.js loaded');
1439
}
1540
badge.setAttribute('aria-hidden', 'true');
1641
});
42+
43+
function setActiveMenuItem(li) {
44+
document.querySelectorAll('.submenu li.selected').forEach(el => el.classList.remove('selected'));
45+
if (li) li.classList.add('selected');
46+
}
1747

1848
// Enable in-panel SPA navigation for data-page elements inside .content too
1949
document.addEventListener('click', function (event) {
2050
const target = event.target.closest('[data-page]');
2151
if (!target) return;
52+
setActiveMenuItem(target);
2253

2354
// Prevent full page reload
2455
event.preventDefault();
2556

2657
const page = target.getAttribute('data-page');
2758
if (!page) return;
28-
29-
// Highlight selected state if you want
30-
document.querySelectorAll('.submenu li').forEach(li => li.classList.remove('selected'));
31-
59+
3260
// Load the HTML into the main content area
3361
fetch(page)
3462
.then(response => response.text())

‎pages/develop-your-course/create-learning-objectives.html‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎pages/develop-your-course/practice-page-options.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Create a New Project</title>
7+
8+
<!-- Existing site styles (includes .video-container, .title-bar, .page-content) -->
9+
<link rel="stylesheet" href="./style.css" />
10+
11+
<!-- Optional: silence favicon 404 in dev -->
12+
<link rel="icon" href="data:,">
13+
</head>
14+
<body>
15+
16+
<div class="video-container">
17+
<video
18+
controls
19+
preload="metadata"
20+
playsinline
21+
style="width:100%;height:auto;display:block;background:#000;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);"
22+
>
23+
<!-- UPDATE THIS: video file -->
24+
<source src="./assets/videos/develop-your-course/practice-page-options.mp4" type="video/mp4" />
25+
26+
<!-- UPDATE THIS: captions file -->
27+
<track
28+
src="./assets/captions/develop-your-course/practice-page-options.vtt"
29+
kind="subtitles"
30+
srclang="en"
31+
label="English"
32+
default
33+
/>
34+
35+
Your browser does not support the video tag.
36+
</video>
37+
38+
<!-- UPDATE THIS: video title -->
39+
<div class="title-bar">
40+
Practice Page Options
41+
</div>
42+
43+
<div class="page-content">
44+
<p>Text</p>
45+
</div>
46+
</div>
47+
48+
</body>
49+
</html>

‎pages/introduction/welcome.html‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Welcome to OLI Torus Launchpad</title>
5+
<title>Welcome to OLI Torus Launchpad!</title>
66
<style>
77
:root {
88
--bg1:#3657f0;
@@ -26,7 +26,7 @@
2626
justify-content: center;
2727
align-items: flex-start;
2828
background: linear-gradient(135deg, var(--bg1), var(--bg2));
29-
padding-top: 60px;
29+
padding-top: 15px;
3030
padding-bottom: 60px;
3131
box-sizing: border-box;
3232
}
@@ -198,39 +198,53 @@ <h2 class="subheading">
198198

199199
<section class="vertical-cards" aria-label="Learn about the Launchpad">
200200
<div class="info-card">
201-
<img src="assets/icons/sidebar.png" alt="Pick Your Role" />
201+
<img src="assets/images/pick-your-role.png" alt="Pick Your Role" />
202202
<div class="info-text">
203203
<h2>Pick Your Role</h2>
204-
<p> Head to the Home Page and choose your role: each role opens a tailored section of tutorials designed for your specific needs.</p>
204+
<p> Head to the <strong>Home Page</strong> and choose your role: each role opens a different section of tutorials designed for your specific needs.</p>
205205
</div>
206206
</div>
207207

208208
<div class="info-card">
209-
<img src="assets/icons/sidebar.png" alt="Sidebar icon" />
209+
<img src="assets/images/explore-topics.png" alt="Sidebar icon" />
210210
<div class="info-text">
211211
<h2>Explore Topics</h2>
212-
<p>Use the sidebar on the left to browse tutorials by role and topic.</p>
212+
<p>Use the <strong>Sidebar</strong> on the left to browse video tutorials by role and task.</p>
213213
</div>
214214
</div>
215215

216216
<div class="info-card">
217-
<img src="assets/icons/search.png" alt="Search icon" />
217+
<img src="assets/images/search-features.png" alt="Search icon" />
218218
<div class="info-text">
219219
<h2>Search Features</h2>
220-
<p>Type keywords in the search bar to instantly find related tutorials.</p>
220+
<p>Type keywords in the <strong>Search Bar</strong> on the top bar to instantly find related video tutorials.</p>
221221
</div>
222222
</div>
223223

224224
<div class="info-card">
225-
<img src="assets/icons/pip.png" alt="Picture-in-Picture icon" />
225+
<img src="assets/images/picture-in-picture.png" alt="Picture-in-Picture icon" />
226226
<div class="info-text">
227227
<h2>Try Picture-in-Picture</h2>
228228
<p>
229-
Use the Picture-in-Picture feature to keep videos floating on your screen as you build or edit your course. This lets you learn and apply steps side by side without switching tabs.
229+
Use the <strong>Picture-in-Picture</strong> feature to keep videos floating on your screen as you build or edit your course. No need to switch between tabs!
230230
</p>
231231
</div>
232232
</div>
233+
234+
<div class="info-card">
235+
<img src="assets/images/need-help.png" alt="Need Help or Have Feedback" />
236+
<div class="info-text">
237+
<h2>Need Help or Have Feedback?</h2>
238+
<p>
239+
If something doesn’t work as expected, or you’d like to suggest a tutorial topic,
240+
click the <strong>Feedback</strong> button on the top bar to let us know.
241+
</p>
242+
</div>
243+
</div>
244+
233245
</section>
246+
247+
234248

235249
</div>
236250
</section>

0 commit comments

Comments
 (0)