Skip to content

Commit dffc8d8

Browse files
YashDalwaniYashDalwani
committed
added dark mode support and placeholders for products
1 parent 875e725 commit dffc8d8

6 files changed

Lines changed: 252 additions & 31 deletions

File tree

‎app.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,5 +237,31 @@ function renderVideo(pid, vid) {
237237
if (active) active.scrollIntoView({ block: "nearest" });
238238
}
239239

240+
// Dark mode toggle — persists in localStorage
241+
function initDarkMode() {
242+
const saved = localStorage.getItem("theme");
243+
if (saved === "dark") document.documentElement.setAttribute("data-theme", "dark");
244+
updateToggleIcon();
245+
}
246+
function updateToggleIcon() {
247+
const btn = document.getElementById("darkToggle");
248+
if (!btn) return;
249+
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
250+
btn.querySelector(".toggle-icon").textContent = isDark ? "☀️" : "🌙";
251+
btn.title = isDark ? "Switch to light mode" : "Switch to dark mode";
252+
}
253+
document.getElementById("darkToggle").addEventListener("click", () => {
254+
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
255+
if (isDark) {
256+
document.documentElement.removeAttribute("data-theme");
257+
localStorage.setItem("theme", "light");
258+
} else {
259+
document.documentElement.setAttribute("data-theme", "dark");
260+
localStorage.setItem("theme", "dark");
261+
}
262+
updateToggleIcon();
263+
});
264+
initDarkMode();
265+
240266
window.addEventListener("hashchange", render);
241267
render();

‎data.js‎

Lines changed: 118 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,124 @@ const PRODUCTS = [
1919
icon: "",
2020
iconSvg: "icons/icon-14-live.svg",
2121
videos: [
22-
{ id: "live-1", title: "Getting Started with BrowserStack Live", youtubeId: "", duration: "",
22+
{ id: "live-1", title: "BrowserStack Live - Bookmark URLs", youtubeId: "", duration: "",
23+
description: "Learn how to save and manage URLs for quick access during your live testing sessions.",
24+
docs: [], links: [] },
25+
{ id: "live-2", title: "BrowserStack Live - Bug Reporting", youtubeId: "", duration: "",
26+
description: "Discover how to capture and report bugs directly to your project management tools while testing.",
27+
docs: [], links: [] },
28+
{ id: "live-3", title: "BrowserStack Live - Multi Device Testing", youtubeId: "", duration: "",
29+
description: "Learn how to test your website simultaneously or seamlessly across multiple devices and browsers.",
30+
docs: [], links: [] },
31+
{ id: "live-4", title: "BrowserStack Live - Accessibility Testing on Desktop Browsers", youtubeId: "", duration: "",
32+
description: "Understand how to evaluate your website's accessibility features on various desktop browsers.",
33+
docs: [], links: [] },
34+
{ id: "live-5", title: "BrowserStack Live - Accessibility Testing on Mobile Browsers", youtubeId: "", duration: "",
35+
description: "Learn the steps to perform comprehensive accessibility checks on mobile browsers.",
36+
docs: [], links: [] },
37+
{ id: "live-6", title: "BrowserStack Live - Download Files and Images from Real Devices", youtubeId: "", duration: "",
38+
description: "See how to download and verify files or images directly from remote real devices.",
39+
docs: [], links: [] },
40+
{ id: "live-7", title: "BrowserStack Live - File Download", youtubeId: "", duration: "",
41+
description: "Learn how to test and validate file download functionalities on different browsers and devices.",
42+
docs: [], links: [] },
43+
{ id: "live-8", title: "BrowserStack Live - Image Injection", youtubeId: "", duration: "",
44+
description: "Discover how to inject images into device cameras to test upload workflows or scanning features.",
45+
docs: [], links: [] },
46+
{ id: "live-9", title: "BrowserStack Live - Network Monitoring", youtubeId: "", duration: "",
47+
description: "Understand how to monitor network traffic and analyze requests during your testing sessions.",
48+
docs: [], links: [] },
49+
{ id: "live-10", title: "BrowserStack Live - Network Throttling", youtubeId: "", duration: "",
50+
description: "Learn how to simulate different network speeds, like 3G or offline modes, to test app performance.",
51+
docs: [], links: [] },
52+
{ id: "live-11", title: "BrowserStack Live - QR Code and Barcode Scanning", youtubeId: "", duration: "",
53+
description: "See how to test QR code and barcode scanning features using real device cameras.",
54+
docs: [], links: [] },
55+
{ id: "live-12", title: "BrowserStack Live - Record a Session", youtubeId: "", duration: "",
56+
description: "Learn how to record your interactive testing sessions for easier debugging and team sharing.",
57+
docs: [], links: [] },
58+
{ id: "live-13", title: "BrowserStack Live - SIM for OTP/Message Testing", youtubeId: "", duration: "",
59+
description: "Discover how to use real SIM cards to test SMS and OTP workflows on remote devices.",
60+
docs: [], links: [] },
61+
{ id: "live-14", title: "BrowserStack Live - Testing Apple Pay Workflows on iOS Devices", youtubeId: "", duration: "",
62+
description: "Understand how to validate Apple Pay integrations and payment workflows on real iOS devices.",
63+
docs: [], links: [] },
64+
{ id: "live-15", title: "BrowserStack Live - Testing Audio Input", youtubeId: "", duration: "",
65+
description: "Learn how to test voice search, voice notes, and other audio input functionalities.",
66+
docs: [], links: [] },
67+
{ id: "live-16", title: "BrowserStack Live - Testing Google Pay Workflows on Android-Chrome Devices", youtubeId: "", duration: "",
68+
description: "See how to test Google Pay integrations and payment flows on real Android devices using Chrome.",
69+
docs: [], links: [] },
70+
{ id: "live-17", title: "BrowserStack Live - Test Internal Networks", youtubeId: "", duration: "",
71+
description: "Discover how to securely test local, staging, and internal websites using BrowserStack Local.",
72+
docs: [], links: [] },
73+
{ id: "live-18", title: "BrowserStack Live - Timezone Specific Testing", youtubeId: "", duration: "",
74+
description: "Learn how to simulate different geographical timezones to test localized date and time features.",
75+
docs: [], links: [] },
76+
{ id: "live-19", title: "BrowserStack Live - Upload Files", youtubeId: "", duration: "",
77+
description: "Understand how to test file upload functionalities from a remote device's local storage.",
78+
docs: [], links: [] },
79+
{ id: "live-20", title: "BrowserStack Live - Test Across Resolutions", youtubeId: "", duration: "",
80+
description: "See how to verify your website's responsiveness by testing across various screen resolutions.",
81+
docs: [], links: [] },
82+
],
83+
},
84+
{
85+
id: "app-live",
86+
name: "App Live",
87+
tagline: "Interactive application testing on real devices",
88+
icon: "",
89+
iconSvg: "icons/icon-10.svg",
90+
videos: [
91+
{ id: "applive-1", title: "Getting Started with BrowserStack App Live", youtubeId: "", duration: "",
92+
description: "Learn how to start an interactive browser testing session on real browsers and devices using BrowserStack Live.",
93+
docs: [], links: [] },
94+
],
95+
},
96+
{
97+
id: "automate",
98+
name: "Automate",
99+
tagline: "Browser test automation infrastructure",
100+
icon: "",
101+
iconSvg: "icons/icon-13.svg",
102+
videos: [
103+
{ id: "automate-1", title: "Getting Started with BrowserStack Automate", youtubeId: "", duration: "",
104+
description: "Learn how to start an interactive browser testing session on real browsers and devices using BrowserStack Live.",
105+
docs: [], links: [] },
106+
],
107+
},
108+
{
109+
id: "app-automate",
110+
name: "App Automate",
111+
tagline: "Automated mobile app testing on real devices",
112+
icon: "",
113+
iconSvg: "icons/icon-09.svg",
114+
videos: [
115+
{ id: "app-automate-1", title: "Getting Started with BrowserStack App Automate", youtubeId: "", duration: "",
116+
description: "Learn how to start an interactive browser testing session on real browsers and devices using BrowserStack Live.",
117+
docs: [], links: [] },
118+
],
119+
},
120+
{
121+
id: "test-management",
122+
name: "Test Management",
123+
tagline: "Next-gen Test Management with AI",
124+
icon: "",
125+
iconSvg: "icons/icon-11.svg",
126+
videos: [
127+
{ id: "test-management-1", title: "Getting Started with BrowserStack Test Management", youtubeId: "", duration: "",
128+
description: "Learn how to start an interactive browser testing session on real browsers and devices using BrowserStack Live.",
129+
docs: [], links: [] },
130+
],
131+
},
132+
{
133+
id: "accessibility",
134+
name: "Accessibility Testing",
135+
tagline: "Test WCAG and ADA Compliance",
136+
icon: "",
137+
iconSvg: "icons/icon-06.svg",
138+
videos: [
139+
{ id: "accessibility-1", title: "Getting Started with BrowserStack Accessibility Testing", youtubeId: "", duration: "",
23140
description: "Learn how to start an interactive browser testing session on real browsers and devices using BrowserStack Live.",
24141
docs: [], links: [] },
25142
],

0 commit comments

Comments
 (0)