Skip to content

Update index.html #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gbowne1 merged 2 commits into from
Feb 20, 2026
Merged

Update index.html #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c8a107d
Update index.html
gbowne1 Feb 16, 2026
356997a
Update package.json
gbowne1 Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 12 additions & 259 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,11 @@
<html lang="en">

<head>
<!-- ================= BASIC META ================= -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff" />

<!-- ================= SECURITY (CSP) ================= -->
<meta http-equiv="Content-Security-Policy" content="
<head>
<!-- ================= BASIC META ================= -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff" />

<!-- ================= SECURITY (CSP) ================= -->
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self';
script-src 'self' https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com;
Expand All @@ -30,43 +18,33 @@
frame-ancestors 'none';
" />

<!-- ================= SEO ================= -->
<title>DevStream | Live Coding & Game Development</title>
<meta name="description"
content="DevStream is a live streaming platform for developers, coders, and game creators." />
<meta name="description" content="DevStream is a live streaming platform for developers, coders, and game creators." />
<meta name="keywords" content="live coding, game development, programming, software, streaming" />
<meta name="author" content="DevStream" />

<!-- ================= OPEN GRAPH ================= -->
<meta property="og:title" content="DevStream" />
<meta property="og:description" content="Stream live coding, software development, and game dev sessions." />
<meta property="og:type" content="website" />
<meta property="og:image" content="/src/assets/images/banner.jpg" />

<!-- ================= TWITTER ================= -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="DevStream" />
<meta name="twitter:description" content="Live coding and game development streams." />
<meta name="twitter:image" content="/src/assets/images/banner.jpg" />

<!-- ================= PWA ================= -->
<link rel="manifest" href="/manifest.json" />

<!-- ================= ICONS & STYLES ================= -->
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet" />

<link rel="stylesheet" href="/src/css/style.css" />
</head>

<body class="bg-light">

<!-- ================= HEADER ================= -->
<header class="sticky-top bg-white shadow-sm">
<div class="container d-flex justify-content-between align-items-center py-3">
<a href="/" class="text-decoration-none text-dark">
Expand All @@ -78,11 +56,7 @@ <h1 class="h4 mb-0">DevStream</h1>
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Browse</a></li>
<li class="nav-item"><a href="#" class="nav-link">Schedule</a></li>
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Browse</a></li>
<li class="nav-item"><a href="#" class="nav-link">Schedule</a></li>
<li class="nav-item"><a href="/go-live.html" class="nav-link text-danger fw-bold"><i
class="fas fa-video me-1"></i>Go Live</a></li>
<li class="nav-item"><a href="/go-live.html" class="nav-link text-danger fw-bold"><i class="fas fa-video me-1"></i>Go Live</a></li>
<li class="nav-item"><a href="/watch.html" class="nav-link"><i class="fas fa-eye me-1"></i>Watch</a></li>

<li class="nav-item">
Expand All @@ -92,8 +66,7 @@ <h1 class="h4 mb-0">DevStream</h1>
</li>

<li class="nav-item">
<button id="drawerToggle" class="btn btn-sm btn-outline-success" aria-label="Open category menu"
aria-expanded="false" aria-controls="categoryDrawer">
<button id="drawerToggle" class="btn btn-sm btn-outline-success" aria-label="Open category menu" aria-expanded="false" aria-controls="categoryDrawer">
<i class="fas fa-bars"></i>
</button>
</li>
Expand All @@ -113,9 +86,7 @@ <h1 class="h4 mb-0">DevStream</h1>
</div>
</header>

<!-- ================= CATEGORY DRAWER ================= -->
<aside id="categoryDrawer" class="position-fixed top-0 start-0 h-100 bg-dark text-white p-4 shadow-lg overflow-auto"
aria-hidden="true">
<aside id="categoryDrawer" class="position-fixed top-0 start-0 h-100 bg-dark text-white p-4 shadow-lg overflow-auto" aria-hidden="true">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="h5 mb-0">Categories</h2>
<button id="drawerClose" class="btn btn-sm btn-light" aria-label="Close menu">
Expand All @@ -133,202 +104,28 @@ <h2 class="h5 mb-0">Categories</h2>
</ul>
</aside>

<!-- Drawer Overlay -->
<div id="drawerOverlay" class="position-fixed top-0 start-0 w-100 h-100 bg-black bg-opacity-50 d-none"></div>

<!-- ================= MAIN ================= -->
<main class="container mt-4">

<!-- Streams -->
<section aria-labelledby="live-heading">
<h2 id="live-heading" class="h4 mb-4">Live Streams</h2>

<!-- Search -->
<div class="input-group mb-4">
<input type="search" id="searchInput" class="form-control" placeholder="Search streams..."
aria-label="Search streams" />
<input type="search" id="searchInput" class="form-control" placeholder="Search streams..." aria-label="Search streams" />
<button id="clearSearch" class="btn btn-outline-secondary d-none" aria-label="Clear search">
<i class="fas fa-times"></i>
"
/>

<!-- ================= SEO ================= -->
<title>DevStream | Live Coding & Game Development</title>
<meta
name="description"
content="DevStream is a live streaming platform for developers, coders, and game creators."
/>
<meta
name="keywords"
content="live coding, game development, programming, software, streaming"
/>
<meta name="author" content="DevStream" />

<!-- ================= OPEN GRAPH ================= -->
<meta property="og:title" content="DevStream" />
<meta
property="og:description"
content="Stream live coding, software development, and game dev sessions."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="/src/assets/images/banner.jpg" />

<!-- ================= TWITTER ================= -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="DevStream" />
<meta
name="twitter:description"
content="Live coding and game development streams."
/>
<meta name="twitter:image" content="/src/assets/images/banner.jpg" />

<!-- ================= PWA ================= -->
<link rel="manifest" href="/manifest.json" />

<!-- ================= ICONS & STYLES ================= -->
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>

<link
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css"
rel="stylesheet"
/>

<link rel="stylesheet" href="/src/css/style.css" />
</head>

<body class="bg-light">
<!-- ================= HEADER ================= -->
<header class="sticky-top bg-white shadow-sm">
<div
class="container d-flex justify-content-between align-items-center py-3"
>
<a href="/" class="text-decoration-none text-dark">
<h1 class="h4 mb-0">DevStream</h1>
</a>

<nav aria-label="Main navigation">
<ul class="nav align-items-center gap-3">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Browse</a></li>
<li class="nav-item"><a href="#" class="nav-link">Schedule</a></li>

<li class="nav-item">
<button
id="themeToggle"
class="btn btn-sm btn-outline-secondary"
aria-label="Toggle theme"
>
<i class="fas fa-moon"></i>
</button>
</li>

<li class="nav-item">
<button
id="drawerToggle"
class="btn btn-sm btn-outline-success"
aria-label="Open category menu"
aria-expanded="false"
aria-controls="categoryDrawer"
>
<i class="fas fa-bars"></i>
</button>
</li>
</ul>
</nav>
</div>
</header>

<!-- ================= CATEGORY DRAWER ================= -->
<aside
id="categoryDrawer"
class="position-fixed top-0 start-0 h-100 bg-dark text-white p-4 shadow-lg overflow-auto"
aria-hidden="true"
>
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="h5 mb-0">Categories</h2>
<button
id="drawerClose"
class="btn btn-sm btn-light"
aria-label="Close menu"
>
&times;
</button>
</div>

<ul class="list-unstyled">
<li>
<a class="d-block py-2 px-3 text-white text-decoration-none" href="#"
>Game Development</a
>
</li>
<li>
<a class="d-block py-2 px-3 text-white text-decoration-none" href="#"
>Web Development</a
>
</li>
<li>
<a class="d-block py-2 px-3 text-white text-decoration-none" href="#"
>Software Development</a
>
</li>
<li>
<a class="d-block py-2 px-3 text-white text-decoration-none" href="#"
>Mobile Development</a
>
</li>
<li>
<a class="d-block py-2 px-3 text-white text-decoration-none" href="#"
>Cybersecurity</a
>
</li>
<li>
<a class="d-block py-2 px-3 text-white text-decoration-none" href="#"
>Leetcode & Co-working</a
>
</li>
</ul>
</aside>

<!-- Drawer Overlay -->
<div
id="drawerOverlay"
class="position-fixed top-0 start-0 w-100 h-100 bg-black bg-opacity-50 d-none"
></div>

<!-- ================= MAIN ================= -->
<main class="container mt-4">
<!-- Streams -->
<section aria-labelledby="live-heading">
<h2 id="live-heading" class="h4 mb-4">Live Streams</h2>

<!-- Search -->
<div class="input-group mb-4">
<input
type="search"
id="searchInput"
class="form-control"
placeholder="Search streams..."
aria-label="Search streams"
/>
<button
id="clearSearch"
class="btn btn-outline-secondary d-none"
aria-label="Clear search"
>
<i class="fas fa-times"></i>
</button>
<div id="streamGrid" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div id="loadingState" class="text-center py-5">
<div class="spinner-border text-primary" role="status"></div>
<p class="mt-3 text-muted">Loading live streams...</p>
</div>
</div>
</section>

<!-- Popular Tags -->
<section class="mt-5">
<h2 class="h5 mb-3">Popular Tags</h2>
<div id="popularTags" class="d-flex flex-wrap gap-2">
Expand All @@ -342,57 +139,13 @@ <h2 class="h5 mb-3">Popular Tags</h2>

</main>

<!-- ================= FOOTER ================= -->
<footer class="text-center py-4 mt-5 border-top bg-light">
<p class="mb-0 text-muted">&copy; 2025 DevStream. All rights reserved.</p>
</footer>

<!-- ================= SCRIPTS ================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script type="module" src="/src/js/main.js"></script>

</body>

</html>

<!-- Stream Grid -->
<div
id="streamGrid"
class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"
>
<div id="loadingState" class="text-center py-5">
<div class="spinner-border text-primary" role="status"></div>
<p class="mt-3 text-muted">Loading live streams...</p>
</div>
</div>
</section>

<!-- Popular Tags -->
<section class="mt-5">
<h2 class="h5 mb-3">Popular Tags</h2>
<div id="popularTags" class="d-flex flex-wrap gap-2">
<span class="badge bg-primary tag-filter">JavaScript</span>
<span class="badge bg-primary tag-filter">Python</span>
<span class="badge bg-primary tag-filter">Rust</span>
<span class="badge bg-success tag-filter">English</span>
<span class="badge bg-light text-dark border tag-filter">Linux</span>
</div>
</section>
</main>

<!-- ================= FOOTER ================= -->
<footer class="text-center py-4 mt-5 border-top bg-light">
<p class="mb-0 text-muted">&copy; 2025 DevStream. All rights reserved.</p>
</footer>

<!-- ================= SCRIPTS ================= -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>

<script type="module" src="/src/js/main.js"></script>
</body>
</html>
</html>
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,8 @@
"node-media-server": "^4.2.4",
"obs-websocket-js": "^5.0.7",
"socket.io": "^4.8.3",
"socket.io-client": "^4.8.3"
"socket.io-client": "^4.8.3",
"jsonwebtoken": "^9.0.3",
"mongoose": "^9.1.5",
"morgan": "^1.10.1"
},
"devDependencies": {
Expand Down
Loading