ztimson/291st
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Compare commits

base: ztimson:7dda34ec19f24eaa1a92e0359771ce03ff1f175a
Branches Tags
ztimson:master
ztimson:2.0.0 ztimson:1.0.0
...
compare: ztimson:master
Branches Tags
ztimson:master
ztimson:2.0.0 ztimson:1.0.0

3 Commits
7dda34ec19 ... master

Author SHA1 Message Date
ztimson
28851c5da5 Added missing theming and meta tags
All checks were successful
Build and publish / Build Container (push) Successful in 9s
Details
Build and publish / Deploy Container (push) Successful in 3s
Details
2026-06-15 12:42:12 -04:00
ztimson
04b302625f Fixed mobile layout
All checks were successful
Build and publish / Build Container (push) Successful in 7s
Details
Build and publish / Deploy Container (push) Successful in 3s
Details
2026-06-14 21:50:44 -04:00
ztimson
3098886938 Connect momentum
All checks were successful
Build and publish / Build Container (push) Successful in 10s
Details
Build and publish / Deploy Container (push) Successful in 12s
Details
2026-06-12 02:42:58 -04:00
1 changed files with 90 additions and 37 deletions
Expand all files Collapse all files

81
public/index.html
View File

@@ -1,13 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>291st JTF</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="291st Joint Task Force"> <!-- momentum:meta -->
<meta name="author" content="Zak Timson">
<title>291st JTF</title>
<link href="https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Roboto:wght@300;400;500&family=Share+Tech+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Roboto:wght@300;400;500&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<script src="login.mjs" type="module" defer></script> <script src="login.mjs" type="module" defer></script>
<!-- momentum:theme -->
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -17,6 +21,10 @@
--dark: #202225; --dark: #202225;
--black: #000; --black: #000;
--max-w: 1100px; --max-w: 1100px;
--theme-primary: var(--red);
--theme-primary-contrast: white;
--theme-accent: var(--red);
--theme-accent-contrast: white;
} }
html, body { html, body {
@@ -35,17 +43,21 @@
z-index: 100; z-index: 100;
background: var(--dark); background: var(--dark);
border-bottom: 2px solid var(--red); border-bottom: 2px solid var(--red);
}
nav .inner {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 0.25rem; gap: 0.25rem;
padding: 0 1rem; padding: 0 2rem;
} }
nav a { nav a {
color: #aaa; color: #aaa;
text-decoration: none; text-decoration: none;
padding: 1rem 1.25rem; padding: 0.75rem 0.75rem;
font-size: 0.9rem; font-size: 0.8rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
@@ -61,7 +73,7 @@
.inner { .inner {
max-width: var(--max-w); max-width: var(--max-w);
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0;
} }
.section-wrap { .section-wrap {
@@ -120,7 +132,6 @@
/* ── MISSION SET ── */ /* ── MISSION SET ── */
#mission-set { background: #0a0a0a; } #mission-set { background: #0a0a0a; }
/* Force 3 cols, drop to 2 then 1 on smaller screens */
.services-grid { .services-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@@ -138,7 +149,10 @@
.service-card { .service-card {
background: var(--dark); background: var(--dark);
border-top: 3px solid transparent; border-top: 3px solid transparent;
padding: 1.5rem; padding: 1.25rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: border-color 0.2s, transform 0.2s; transition: border-color 0.2s, transform 0.2s;
} }
@@ -147,7 +161,16 @@
transform: translateY(-3px); transform: translateY(-3px);
} }
.service-card .icon { font-size: 1.6rem; margin-bottom: 0.5rem; } .service-card .icon {
font-size: 1.6rem;
flex-shrink: 0;
}
.service-card .text {
display: flex;
flex-direction: column;
}
.service-card .title { font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; } .service-card .title { font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; }
.service-card .desc { font-size: 0.82rem; color: #888; line-height: 1.5; } .service-card .desc { font-size: 0.82rem; color: #888; line-height: 1.5; }
@@ -170,14 +193,22 @@
.op-item.upcoming { border-left-color: #4caf50; } .op-item.upcoming { border-left-color: #4caf50; }
.op-item .op-date { .op-item .op-date {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.75rem; font-size: 0.75rem;
color: #888; color: #888;
white-space: nowrap; white-space: nowrap;
padding-top: 0.2rem; padding-top: 0.2rem;
min-width: 90px; min-width: 110px;
font-family: 'Share Tech Mono', monospace; font-family: 'Share Tech Mono', monospace;
} }
.op-item .op-date .op-time {
color: var(--red);
font-size: 0.7rem;
}
.op-item .op-title { font-weight: 500; margin-bottom: 0.25rem; } .op-item .op-title { font-weight: 500; margin-bottom: 0.25rem; }
.op-item .op-desc { font-size: 0.85rem; color: #aaa; } .op-item .op-desc { font-size: 0.85rem; color: #aaa; }
@@ -328,10 +359,12 @@
<jtf-login></jtf-login> <jtf-login></jtf-login>
<nav id="main-nav"> <nav id="main-nav">
<div class="inner">
<a href="#about">About</a> <a href="#about">About</a>
<a href="#mission-set">Mission Set</a> <a href="#mission-set">Mission Set</a>
<a href="#operations">Operations</a> <a href="#operations">Operations</a>
<a href="#discord">Discord</a> <a href="#discord">Discord</a>
</div>
</nav> </nav>
<!-- ABOUT --> <!-- ABOUT -->
@@ -359,37 +392,49 @@
<div class="services-grid"> <div class="services-grid">
<div class="service-card"> <div class="service-card">
<div class="icon">🎮</div> <div class="icon">🎮</div>
<div class="text">
<div class="title">Wide Mission Set</div> <div class="title">Wide Mission Set</div>
<div class="desc">Solo, Shooters, Strategy and MMO's</div> <div class="desc">Solo, Shooters, Strategy and MMO's</div>
</div> </div>
</div>
<div class="service-card"> <div class="service-card">
<div class="icon">📅</div> <div class="icon">📅</div>
<div class="text">
<div class="title">Weekly Operations</div> <div class="title">Weekly Operations</div>
<div class="desc">Maintain high readiness at all times.</div> <div class="desc">Maintain high readiness at all times.</div>
</div> </div>
</div>
<div class="service-card"> <div class="service-card">
<div class="icon">🖥️</div> <div class="icon">🖥️</div>
<div class="text">
<div class="title">24/7 Servers</div> <div class="title">24/7 Servers</div>
<div class="desc">Requisition servers for any game.</div> <div class="desc">Requisition servers for any game.</div>
</div> </div>
</div>
<div class="service-card"> <div class="service-card">
<div class="icon">🔒</div> <div class="icon">🔒</div>
<div class="text">
<div class="title">VPN Access</div> <div class="title">VPN Access</div>
<div class="desc">Private VPN access for members.</div> <div class="desc">Private VPN access for members.</div>
</div> </div>
</div>
<div class="service-card"> <div class="service-card">
<div class="icon">🎬</div> <div class="icon">🎬</div>
<div class="text">
<div class="title">Private Media Server</div> <div class="title">Private Media Server</div>
<div class="desc">REDACTED</div> <div class="desc">REDACTED</div>
</div> </div>
</div>
<div class="service-card"> <div class="service-card">
<div class="icon">🌎</div> <div class="icon">🌎</div>
<div class="text">
<div class="title">North American</div> <div class="title">North American</div>
<div class="desc">EDT timezone — All regions welcome</div> <div class="desc">EDT timezone — All regions welcome</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- OPERATIONS --> <!-- OPERATIONS -->
<section id="operations"> <section id="operations">
@@ -452,6 +497,12 @@
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a> | Built with <a href="https://momentum.zakscode.com" target="_blank">Momentum</a></p> Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a> | Built with <a href="https://momentum.zakscode.com" target="_blank">Momentum</a></p>
</footer> </footer>
<script type="module">
import {Momentum} from 'https://291st.com/momentum.mjs';
const momentum = window.momentum = new Momentum('https://291st.com', {app: 'Website'});
const session = momentum.auth.readSession();
</script>
<script> <script>
// ── DYNAMIC OPS (newest first) ── // ── DYNAMIC OPS (newest first) ──
function getSundayOps() { function getSundayOps() {
@@ -467,7 +518,6 @@
const upcomingDate = (day === 0 && now < todayEnd) ? lastSunday : new Date(lastSunday); const upcomingDate = (day === 0 && now < todayEnd) ? lastSunday : new Date(lastSunday);
if (!(day === 0 && now < todayEnd)) upcomingDate.setDate(lastSunday.getDate() + 7); if (!(day === 0 && now < todayEnd)) upcomingDate.setDate(lastSunday.getDate() + 7);
// newest first: upcoming, then prev 1, then prev 2
const ops = [ const ops = [
{ date: upcomingDate, upcoming: true }, { date: upcomingDate, upcoming: true },
]; ];
@@ -488,13 +538,16 @@
const item = document.createElement('div'); const item = document.createElement('div');
item.className = 'op-item' + (op.upcoming ? ' upcoming' : ''); item.className = 'op-item' + (op.upcoming ? ' upcoming' : '');
item.innerHTML = ` item.innerHTML = `
<div class="op-date">${fmtDate(op.date)}</div> <div class="op-date">
<span>${fmtDate(op.date)}</span>
<span class="op-time">14:30 – 18:30 EDT</span>
</div>
<div> <div>
<div class="op-title"> <div class="op-title">
Weekly Operation — Sunday Afternoon Weekly Operation — Sunday Afternoon
${op.upcoming ? `<span class="badge badge-upcoming">Upcoming</span>` : ''} ${op.upcoming ? `<span class="badge badge-upcoming">Upcoming</span>` : ''}
</div> </div>
<div class="op-desc">14:30 – 18:30 EDT | ${op.upcoming ? 'All squads report in, game TBD' : 'Operation Complete'}</div> <div class="op-desc">${op.upcoming ? 'All squads report in, game TBD' : 'Operation Complete'}</div>
</div> </div>
`; `;
list.appendChild(item); list.appendChild(item);