gator/founders-break
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The Founder's Break: event site for foundersbreak.onetouch.studio

Browse source
This commit is contained in:
Devin Willis 2026-08-26 14:11:34 -04:00
commit b359a9a5be
No known key found for this signature in database
GPG key ID: 3776B3C5AFF3FFEA
8 changed files with 907 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
README.md Normal file
View file

@ -0,0 +1,52 @@
# The Founder's Break
Event site for the weekly UF startup pool social at Silver Q, Gainesville.
Hosted by OneTouch Studio at **https://foundersbreak.onetouch.studio**.
Corben EJS site. There is no build step: `deploy_site` copies this repo verbatim.
```
site.config.js all schedule, venue and copy data
views/index.ejs the single page, including the next-date logic
public/css/style.css brand tokens lifted from onetouch.studio
public/js/main.js nav state, scroll reveal, RSVP submit
public/assets/ the recurring .ics
public/images/ logo and favicon
```
## The date is never hard-coded
`views/index.ejs` computes the next occurrence at render time from
`weekday` + `firstEvent` in `site.config.js`, so the page is correct on every
load without anyone touching it. After 9:00 PM on an event night it rolls to
the following week.
## Cancelling a week
Add the ISO date to `cancelled` in `site.config.js` and redeploy:
```js
cancelled: ["2026-11-26"], // Thanksgiving
```
The page then skips that Thursday, shows a notice naming the cancelled date,
and points at the next one that is actually happening. The `.ics` in
`public/assets/` is a plain weekly recurrence and does not know about
cancellations, so send the newsletter a heads-up too.
## Deploying
```
bulk_upload_git owner=gator repo=founders-break
deploy_site id=4ae63819-3f63-4fea-b0de-eb1e5befe607 repo=gator/founders-break mode=ejs
```
Nothing redeploys itself. Every edit needs the deploy step.
## RSVPs
The form POSTs to `/forms/rsvp`, which the Corben sites renderer stores in
`site_form_submissions` and announces as a `form.submitted` event. Read them
with `get_site_form_submissions`. JavaScript submits it in place; without
JavaScript the plain POST falls back to `/?rsvp=ok` and the page shows the
same confirmation.

40
public/assets/founders-break.ics Normal file
View file

@ -0,0 +1,40 @@
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//OneTouch Studio//The Founder's Break//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
X-WR-CALNAME:The Founder's Break
BEGIN:VTIMEZONE
TZID:America/New_York
BEGIN:DAYLIGHT
TZOFFSETFROM:-0500
TZOFFSETTO:-0400
TZNAME:EDT
DTSTART:19700308T020000
RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU
END:DAYLIGHT
BEGIN:STANDARD
TZOFFSETFROM:-0400
TZOFFSETTO:-0500
TZNAME:EST
DTSTART:19701101T020000
RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU
END:STANDARD
END:VTIMEZONE
BEGIN:VEVENT
UID:founders-break-weekly@foundersbreak.onetouch.studio
DTSTAMP:20260826T180000Z
DTSTART;TZID=America/New_York:20260827T190000
DTEND;TZID=America/New_York:20260827T210000
RRULE:FREQ=WEEKLY;BYDAY=TH
SUMMARY:The Founder's Break
LOCATION:Silver Q\, Gainesville\, FL
URL:https://foundersbreak.onetouch.studio
DESCRIPTION:UF startup pool social. Every Thursday\, 7 to 9 PM at Silver Q.
Zero pool skills required. Free\, 18+. Bring your ideas and a valid ID.\n\n
Hosted by OneTouch Studio. Details and RSVP: https://foundersbreak.onetouch.
studio
STATUS:CONFIRMED
TRANSP:TRANSPARENT
END:VEVENT
END:VCALENDAR

341
public/css/style.css Normal file
View file

@ -0,0 +1,341 @@
/* The Founder's Break
Brand tokens are lifted verbatim from onetouch.studio/public/css/variables.css
so this page reads as part of the same studio. One accent (emerald), one theme
(dark), and a two-step radius scale: surfaces 14px, controls 10px. */
:root {
--bg: #06060b;
--bg2: #0c0c14;
--surface: rgba(255, 255, 255, 0.03);
--surface2: rgba(255, 255, 255, 0.05);
--accent: #10b981;
--accent2: #34d399;
--accent3: #059669;
--text: #f1f0ff;
--muted: #8b89a6;
--fine: #9c9ab5; /* smallest text: lifted off --muted2 to clear WCAG AA */
--border: rgba(16, 185, 129, 0.12);
--border-hover: rgba(16, 185, 129, 0.35);
--hairline: rgba(255, 255, 255, 0.08);
--on-accent: #04140f; /* near-black on emerald. White scores 3.9:1 and fails AA. */
--r-surface: 14px;
--r-control: 10px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--shell: 1200px;
--gut: 2.5rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
color-scheme: dark;
scroll-behavior: smooth;
scroll-padding-top: 84px;
}
body {
background: var(--bg);
color: var(--text);
font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -0.02em; line-height: 1.15; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent2); }
:focus-visible {
outline: 2px solid var(--accent2);
outline-offset: 3px;
border-radius: 4px;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--accent); color: var(--on-accent);
padding: 0.7rem 1.1rem; border-radius: 0 0 var(--r-control) 0; font-weight: 600;
}
.skip:focus { left: 0; }
/* ── Navigation ───────────────────────────────────────────── */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 100;
height: 64px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--gut);
background: rgba(6, 6, 11, 0.72);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--border);
transition: background 0.3s var(--ease);
}
.nav.scrolled { background: rgba(6, 6, 11, 0.95); }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand-mark { opacity: 0.9; flex: none; }
.brand-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 1.9rem; }
.nav-link {
color: var(--muted); text-decoration: none; font-size: 0.875rem; font-weight: 500;
white-space: nowrap; transition: color 0.2s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-cta {
background: var(--accent); color: var(--on-accent);
padding: 0.5rem 1.15rem; border-radius: var(--r-control);
font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap;
transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-cta:hover { background: var(--accent2); }
.nav-cta:active { transform: translateY(1px); }
/* ── Buttons ──────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.85rem 1.9rem; border-radius: var(--r-control);
font-family: inherit; font-size: 0.95rem; font-weight: 600;
text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent3));
color: var(--on-accent);
box-shadow: 0 4px 22px rgba(16, 185, 129, 0.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--border-hover); color: var(--accent2); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(1px); }
.btn-block { width: 100%; margin-top: 0.4rem; }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.72; }
.btn[aria-busy="true"]::after {
content: ""; width: 15px; height: 15px; margin-left: 0.6rem;
border: 2px solid rgba(4, 20, 15, 0.3); border-top-color: var(--on-accent);
border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Hero: asymmetric split ───────────────────────────────── */
.hero {
max-width: var(--shell); margin: 0 auto;
min-height: 100dvh;
display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 4rem; align-items: center;
padding: calc(64px + 3rem) var(--gut) 4rem;
}
.eyebrow {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--accent2); margin-bottom: 1.1rem;
}
.hero h1 {
font-size: clamp(2.6rem, 6.2vw, 4.5rem);
font-weight: 700; line-height: 1.02;
}
.hero-sub {
margin-top: 1.5rem; max-width: 46ch;
font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }
.hero-figure { position: relative; }
.hero-figure img {
width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
border-radius: var(--r-surface); border: 1px solid var(--hairline);
}
.hero-figure::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: var(--r-surface);
background: linear-gradient(190deg, transparent 55%, rgba(6, 6, 11, 0.5));
}
/* ── Details: display-value strip ─────────────────────────── */
.details { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut) 6rem; }
.notice {
margin-bottom: 1.6rem; padding: 0.85rem 1.15rem;
border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: var(--r-control); background: var(--surface);
color: var(--text); font-size: 0.92rem;
}
.detail-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.detail { padding: 2rem 1.6rem; }
.detail + .detail { border-left: 1px solid var(--hairline); }
.detail dt {
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 0.55rem;
}
.detail dd {
font-family: "Space Grotesk", sans-serif; font-weight: 600;
font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.25;
}
.detail dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-hover); }
.detail dd a:hover { color: var(--accent2); }
.detail-foot {
display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
margin-top: 1.4rem; font-size: 0.9rem; color: var(--muted);
}
.detail-foot .is-live { color: var(--accent2); font-weight: 600; }
.ics { color: var(--accent2); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
.ics:hover { border-bottom-color: var(--accent2); }
/* ── Pitch: full-bleed editorial band ─────────────────────── */
.pitch {
position: relative; isolation: isolate;
padding: 8rem var(--gut);
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.pitch::before {
content: ""; position: absolute; inset: 0; z-index: -2;
background-image: var(--pitch-image);
background-size: cover; background-position: center;
}
.pitch::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(6, 6, 11, 0.88), rgba(6, 6, 11, 0.94));
}
.pitch-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.pitch h2 {
font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 700;
text-wrap: balance;
}
.pitch p { margin-top: 1.5rem; color: var(--muted); font-size: 1.05rem; }
.pitch-kicker { color: var(--text) !important; font-weight: 600; }
/* ── What to expect: bento ────────────────────────────────── */
.expect { max-width: var(--shell); margin: 0 auto; padding: 7rem var(--gut); }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; margin-bottom: 2.6rem; }
.bento {
display: grid; gap: 1rem;
grid-template-columns: 1.15fr 1fr 1fr;
grid-template-rows: auto auto;
}
.cell {
border: 1px solid var(--hairline); border-radius: var(--r-surface);
overflow: hidden; background: var(--surface);
}
.cell-photo { grid-row: span 2; border-color: transparent; background: none; }
.cell-photo img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.cell-text { padding: 2rem 1.9rem; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.cell-text:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.cell-tint {
background:
radial-gradient(120% 130% at 100% 0%, rgba(16, 185, 129, 0.16), transparent 62%),
var(--surface);
}
.cell-wide { grid-column: span 2; }
.cell-text h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 0.65rem; }
.cell-text p { color: var(--muted); font-size: 0.96rem; max-width: 52ch; }
/* ── RSVP ─────────────────────────────────────────────────── */
.rsvp { padding: 0 var(--gut) 7rem; }
.rsvp-panel {
max-width: 580px; margin: 0 auto; padding: 2.8rem;
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-surface);
}
.rsvp-panel h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; }
.rsvp-sub { margin-top: 0.8rem; color: var(--muted); font-size: 0.96rem; }
form { margin-top: 2rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.3rem; }
.field label { font-size: 0.87rem; font-weight: 600; color: var(--text); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input {
font-family: inherit; font-size: 0.98rem;
padding: 0.8rem 0.95rem; color: var(--text);
background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-control);
transition: border-color 0.2s var(--ease);
}
.field input::placeholder { color: var(--fine); }
.field input:hover { border-color: rgba(255, 255, 255, 0.16); }
.field input:focus { border-color: var(--accent); outline: 2px solid var(--accent2); outline-offset: 2px; }
.field-help { font-size: 0.8rem; color: var(--fine); }
.field-error { font-size: 0.8rem; color: #fca5a5; display: none; }
.field.has-error input { border-color: #f87171; }
.field.has-error .field-error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 0.9rem; font-size: 0.88rem; color: #fca5a5; min-height: 1.2em; }
.fine { margin-top: 0.9rem; font-size: 0.78rem; color: var(--fine); text-align: center; }
.rsvp-done h3 { font-size: 1.4rem; font-weight: 700; }
.rsvp-done p { margin: 0.8rem 0 1.2rem; color: var(--muted); }
/* ── Footer ───────────────────────────────────────────────── */
.foot {
border-top: 1px solid var(--hairline);
padding: 3.2rem var(--gut);
max-width: var(--shell); margin: 0 auto;
display: flex; flex-wrap: wrap; gap: 1.4rem 2rem;
align-items: center; justify-content: space-between;
}
.foot-line { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.02rem; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; align-items: center; font-size: 0.87rem; }
.foot-meta a { color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); }
.foot-meta a:hover { color: var(--accent2); }
.foot-host { display: inline-flex; align-items: center; gap: 0.5rem; }
.foot-host img { opacity: 0.7; }
/* ── Scroll reveal ────────────────────────────────────────── */
/* Only hides when JS is running, so a failed script never eats the page. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in {
opacity: 1; transform: none;
transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1000px) {
.hero { grid-template-columns: 1fr; gap: 2.8rem; min-height: 0; padding-top: calc(64px + 2.5rem); }
.hero-figure { order: -1; }
.hero-figure img { aspect-ratio: 16 / 10; }
.bento { grid-template-columns: 1fr 1fr; }
.cell-photo { grid-row: auto; grid-column: span 2; }
.cell-photo img { min-height: 220px; max-height: 320px; }
.cell-wide { grid-column: span 2; }
}
@media (max-width: 760px) {
:root { --gut: 1.25rem; }
.nav-link { display: none; }
.detail-grid { grid-template-columns: 1fr 1fr; }
.detail { padding: 1.4rem 1.1rem; }
.detail:nth-child(odd) { border-left: 0; }
.detail:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
.bento { grid-template-columns: 1fr; }
.cell-photo, .cell-wide { grid-column: auto; }
.pitch { padding: 5rem var(--gut); }
.expect { padding: 5rem var(--gut); }
.rsvp-panel { padding: 1.9rem 1.4rem; }
.foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

16
public/images/favicon.svg Normal file
View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<!-- OneTouch Studio's mark, cropped to the cube and ring so it still reads at 16px. -->
<rect width="64" height="64" rx="14" fill="#06060b"/>
<g transform="translate(32 32)" fill="none" stroke="#10b981" stroke-linecap="round" stroke-linejoin="round">
<circle cx="0" cy="0" r="23" stroke-width="2.5"/>
<g transform="scale(0.62)" stroke-width="4.5">
<polygon points="0,-34 30,-14 0,6 -30,-14"/>
<polygon points="0,6 30,-14 30,20 0,40 -30,20 -30,-14"/>
<line x1="0" y1="-34" x2="0" y2="6"/>
<line x1="0" y1="6" x2="0" y2="40"/>
<line x1="-30" y1="-14" x2="-30" y2="20"/>
<line x1="30" y1="-14" x2="30" y2="20"/>
</g>
<circle cx="0" cy="-23" r="3.4" fill="#10b981" stroke="none"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 834 B

37
public/images/onetouch-studio.svg Normal file
View file

@ -0,0 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 672" width="672" height="672">
<g transform="translate(336 336)">
<!-- target rings -->
<circle cx="0" cy="0" r="160" fill="none" stroke="#FFFFFF" stroke-width="5.5"/>
<circle cx="0" cy="0" r="223" fill="none" stroke="#FFFFFF" stroke-width="7.5"/>
<circle cx="0" cy="0" r="279" fill="none" stroke="#FFFFFF" stroke-width="5.5"/>
<!-- central wireframe cube -->
<g transform="scale(0.72)" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<polygon points="0,-34 30,-14 0,6 -30,-14"/>
<polygon points="0,6 30,-14 30,20 0,40 -30,20 -30,-14"/>
<line x1="0" y1="-34" x2="0" y2="6"/>
<line x1="0" y1="6" x2="0" y2="40"/>
<line x1="-30" y1="-14" x2="-30" y2="20"/>
<line x1="30" y1="-14" x2="30" y2="20"/>
</g>
<!-- nodes aligned to circle tangents -->
<!-- top node on outer ring -->
<circle cx="0" cy="-279" r="9" fill="#FFFFFF"/>
<!-- right node on middle ring -->
<circle cx="223" cy="0" r="9" fill="#FFFFFF"/>
<!-- bottom node on middle ring -->
<circle cx="0" cy="223" r="9" fill="#FFFFFF"/>
<!-- upper-left small node on outer ring -->
<circle cx="-197.28" cy="-197.28" r="6.5" fill="#FFFFFF"/>
<!-- lower-right small node on inner ring -->
<circle cx="113.14" cy="113.14" r="5.5" fill="#FFFFFF"/>
<!-- tiny tangent ticks to emphasize engineered orbital placement -->
<line x1="-12" y1="-279" x2="12" y2="-279" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>
<line x1="223" y1="-12" x2="223" y2="12" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>
<line x1="-12" y1="223" x2="12" y2="223" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>
<line x1="-205.76" y1="-188.80" x2="-188.80" y2="-205.76" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
<line x1="108.19" y1="118.09" x2="118.09" y2="108.19" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

119
public/js/main.js Normal file
View file

@ -0,0 +1,119 @@
/* The Founder's Break - nav state, scroll reveal, RSVP submit.
No scroll listeners: nav state and reveal both ride IntersectionObserver. */
(function () {
"use strict";
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ── Nav background once the page has moved off the top ── */
var nav = document.getElementById("nav");
var sentinel = document.createElement("div");
sentinel.style.cssText = "position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none";
document.body.prepend(sentinel);
new IntersectionObserver(function (entries) {
nav.classList.toggle("scrolled", !entries[0].isIntersecting);
}).observe(sentinel);
/* ── Scroll reveal: sequences sections in as they arrive ── */
var reveals = document.querySelectorAll(".reveal");
if (reduceMotion) {
reveals.forEach(function (el) { el.classList.add("in"); });
} else {
var io = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry, i) {
if (!entry.isIntersecting) return;
var delay = Math.min(i, 4) * 70;
setTimeout(function () { entry.target.classList.add("in"); }, delay);
obs.unobserve(entry.target);
});
}, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });
reveals.forEach(function (el) { io.observe(el); });
}
/* ── RSVP ── */
var form = document.getElementById("rsvp-form");
if (!form) return;
var submit = document.getElementById("rsvp-submit");
var status = document.getElementById("form-status");
var done = document.getElementById("rsvp-done");
var nameField = document.getElementById("f-name");
var emailField = document.getElementById("f-email");
function setError(input, message) {
var field = input.closest(".field");
field.classList.toggle("has-error", Boolean(message));
var slot = field.querySelector(".field-error");
if (slot) slot.textContent = message || "";
input.setAttribute("aria-invalid", message ? "true" : "false");
}
function validate() {
var ok = true;
if (!nameField.value.trim()) { setError(nameField, "We need a name to put on the list."); ok = false; }
else setError(nameField, "");
var email = emailField.value.trim();
if (!email) { setError(emailField, "We need an email to send the reminder to."); ok = false; }
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) { setError(emailField, "That email does not look right."); ok = false; }
else setError(emailField, "");
return ok;
}
[nameField, emailField].forEach(function (input) {
input.addEventListener("input", function () {
if (input.closest(".field").classList.contains("has-error")) validate();
});
});
form.addEventListener("submit", function (event) {
event.preventDefault();
status.textContent = "";
if (!validate()) {
form.querySelector(".has-error input").focus();
return;
}
submit.setAttribute("aria-busy", "true");
var payload = new URLSearchParams();
new FormData(form).forEach(function (value, key) {
if (key !== "_redirect") payload.append(key, value);
});
fetch(form.action, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
Accept: "application/json",
},
body: payload.toString(),
})
.then(function (res) {
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json().catch(function () { return { ok: true }; });
})
.then(function (body) {
if (body && body.ok === false) throw new Error(body.error || "rejected");
showDone();
})
.catch(function () {
submit.removeAttribute("aria-busy");
status.textContent =
"That did not go through. Try again, or email contact@onetouch.studio and we will add you by hand.";
});
});
function showDone() {
form.hidden = true;
done.hidden = false;
done.setAttribute("tabindex", "-1");
done.focus({ preventScroll: true });
}
/* No-JS fallback lands back here with ?rsvp=ok after the plain form POST. */
if (new URLSearchParams(window.location.search).get("rsvp") === "ok") showDone();
})();

64
site.config.js Normal file
View file

@ -0,0 +1,64 @@
// The Founder's Break - foundersbreak.onetouch.studio
//
// The event recurs weekly, so nothing here is a one-off date. index.ejs computes
// the next occurrence at render time from `weekday` + `firstEvent`, minus anything
// listed in `cancelled`. To skip a week (holiday, venue closed, whatever), add the
// ISO date to `cancelled` and redeploy. Do not hand-edit dates anywhere else.
module.exports = {
name: "The Founder's Break",
tagline: "UF Startup Pool Social",
description:
"A weekly pool social for the people building things in Gainesville. Every Thursday at Silver Q.",
// Schedule
timezone: "America/New_York",
weekday: 4, // 0 = Sunday, 4 = Thursday
firstEvent: "2026-08-27",
startTime: "7:00 PM",
endTime: "9:00 PM",
endHour24: 21, // after this hour on event day, the page rolls to next week
cancelled: [
// "2026-11-26", // example: Thanksgiving
],
// Venue
venue: "Silver Q",
city: "Gainesville",
mapUrl: "https://www.google.com/maps/search/?api=1&query=Silver+Q+Gainesville+FL",
entry: "Free, 18+",
// Host
host: {
name: "OneTouch Studio",
url: "https://onetouch.studio",
email: "contact@onetouch.studio",
},
url: "https://foundersbreak.onetouch.studio",
// Images live in the Corben image library rather than the repo so the repo
// stays text-only and the CDN serves them.
images: {
hero: "https://nyc3.digitaloceanspaces.com/corben-sites/images/c23ea202-5442-41b4-9a1b-1586e81c50eb/23832ce5-0ef3-4fb3-96d5-f8de938e47b1/hero.jpg",
breakShot:
"https://nyc3.digitaloceanspaces.com/corben-sites/images/c23ea202-5442-41b4-9a1b-1586e81c50eb/0b5cd98c-b31a-4d09-980f-d31da5873a53/break-shot.jpg",
napkin:
"https://nyc3.digitaloceanspaces.com/corben-sites/images/c23ea202-5442-41b4-9a1b-1586e81c50eb/eb54a5f7-a30e-4a7a-b3cb-0beb5eff43ff/napkin.jpg",
},
expect: [
{
title: "Cross-disciplinary hustle",
body: "Meet your next co-founder, bounce ideas off business minds, and connect with technical creators.",
},
{
title: "Zero pressure",
body: "No formal pitches, no entry fees, no name tags. Grab a cue, talk shop, make things happen.",
},
{
title: "A real community",
body: "Be part of the movement putting Gainesville's startup scene on the map.",
},
],
};

238
views/index.ejs Normal file
View file

@ -0,0 +1,238 @@
<%
/* ---- Next occurrence -------------------------------------------------
All arithmetic happens on a UTC Date that carries the *Eastern calendar
date*, never a wall-clock instant. That keeps day-of-week and day-adding
correct across DST without needing a timezone library. */
const TZ = site.timezone || "America/New_York";
const now = new Date();
const todayISO = new Intl.DateTimeFormat("en-CA", {
timeZone: TZ, year: "numeric", month: "2-digit", day: "2-digit",
}).format(now);
const hourET = Number(
new Intl.DateTimeFormat("en-US", { timeZone: TZ, hour: "2-digit", hourCycle: "h23" }).format(now)
) % 24;
const toDate = (iso) => { const [y, m, d] = iso.split("-").map(Number); return new Date(Date.UTC(y, m - 1, d)); };
const isoOf = (dt) => dt.toISOString().slice(0, 10);
let next = toDate(todayISO);
const first = toDate(site.firstEvent);
if (next < first) next = first;
while (next.getUTCDay() !== site.weekday) next.setUTCDate(next.getUTCDate() + 1);
if (isoOf(next) === todayISO && hourET >= (site.endHour24 || 21)) next.setUTCDate(next.getUTCDate() + 7);
const cancelled = site.cancelled || [];
let skippedWeek = null;
// Keep the FIRST skipped date: with two cancellations in a row the notice
// should name the soonest one people were expecting, not the last one.
while (cancelled.includes(isoOf(next))) {
if (!skippedWeek) skippedWeek = isoOf(next);
next.setUTCDate(next.getUTCDate() + 7);
}
const nextISO = isoOf(next);
const isTonight = nextISO === todayISO;
const fmtDate = (opts) => new Intl.DateTimeFormat("en-US", Object.assign({ timeZone: "UTC" }, opts)).format(next);
const nextLong = fmtDate({ weekday: "long", month: "long", day: "numeric" });
const nextShort = fmtDate({ weekday: "short", month: "short", day: "numeric" });
const weekdayName = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", weekday: "long" }).format(next);
const heroLine = isTonight
? `Tonight at ${site.venue}, ${site.startTime} to ${site.endTime}. Grab a cue and meet the people building things in ${site.city}.`
: `Every ${weekdayName} at ${site.venue}, ${site.startTime} to ${site.endTime}. The next one is ${nextLong}.`;
const details = [
{ label: "When", value: `Every ${weekdayName}` },
{ label: "Time", value: `${site.startTime} to ${site.endTime}` },
{ label: "Where", value: `${site.venue}, ${site.city}`, href: site.mapUrl },
{ label: "Entry", value: site.entry },
];
%><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= site.name %> | <%= site.tagline %></title>
<meta name="description" content="<%= site.description %>">
<meta name="theme-color" content="#06060b">
<meta property="og:type" content="website">
<meta property="og:title" content="<%= site.name %>">
<meta property="og:description" content="<%= site.description %>">
<meta property="og:image" content="<%= site.images.hero %>">
<meta property="og:url" content="<%= site.url %>">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="preload" as="image" href="<%= site.images.hero %>">
<!-- Gates the scroll-reveal styles on JS being alive, so a blocked or failed
main.js leaves the page fully readable instead of blank. -->
<script>document.documentElement.className += " js";</script>
<script type="application/ld+json">
<%- JSON.stringify({
"@context": "https://schema.org",
"@type": "Event",
name: site.name,
description: site.description,
startDate: `${nextISO}T19:00:00-04:00`,
endDate: `${nextISO}T21:00:00-04:00`,
eventSchedule: { "@type": "Schedule", repeatFrequency: "P1W", byDay: "https://schema.org/Thursday", startTime: "19:00", endTime: "21:00" },
eventStatus: "https://schema.org/EventScheduled",
eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
location: { "@type": "Place", name: site.venue, address: { "@type": "PostalAddress", addressLocality: site.city, addressRegion: "FL", addressCountry: "US" } },
organizer: { "@type": "Organization", name: site.host.name, url: site.host.url },
isAccessibleForFree: true,
image: [site.images.hero],
url: site.url,
}) %>
</script>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="nav" id="nav">
<a class="brand" href="/">
<img class="brand-mark" src="/images/onetouch-studio.svg" alt="" width="26" height="26">
<span class="brand-name"><%= site.name %></span>
</a>
<nav class="nav-right" aria-label="Primary">
<a class="nav-link" href="#details">Details</a>
<a class="nav-link" href="#expect">What to expect</a>
<a class="nav-cta" href="#rsvp">RSVP</a>
</nav>
</header>
<main id="main">
<!-- Hero: asymmetric split, copy left / photograph right -->
<section class="hero">
<div class="hero-copy">
<p class="eyebrow"><%= site.tagline %></p>
<h1><%= site.name %></h1>
<p class="hero-sub"><%= heroLine %></p>
<div class="hero-actions">
<a class="btn btn-primary" href="#rsvp">RSVP</a>
<a class="btn btn-ghost" href="#expect">What to expect</a>
</div>
</div>
<figure class="hero-figure">
<img src="<%= site.images.hero %>" width="1536" height="1024" fetchpriority="high"
alt="Four people talking beside a lit pool table in a dark bar.">
</figure>
</section>
<!-- Details: display-value strip, vertical hairlines only -->
<section class="details" id="details">
<% if (skippedWeek) { %>
<p class="notice" role="status">No Break on <%= new Intl.DateTimeFormat("en-US", { timeZone: "UTC", month: "long", day: "numeric" }).format(toDate(skippedWeek)) %>. Back on <%= nextLong %>.</p>
<% } %>
<dl class="detail-grid reveal">
<% details.forEach(function (d) { %>
<div class="detail">
<dt><%= d.label %></dt>
<dd><% if (d.href) { %><a href="<%= d.href %>" target="_blank" rel="noopener"><%= d.value %></a><% } else { %><%= d.value %><% } %></dd>
</div>
<% }) %>
</dl>
<p class="detail-foot">
<span<% if (isTonight) { %> class="is-live"<% } %>><%= isTonight ? "Happening tonight" : `Next: ${nextShort}` %></span>
<a class="ics" href="/assets/founders-break.ics">Add the whole series to your calendar</a>
</p>
</section>
<!-- Pitch: full-bleed editorial band over the break shot -->
<section class="pitch" style="--pitch-image: url('<%= site.images.breakShot %>')">
<div class="pitch-inner reveal">
<h2>We are building Gainesville's startup culture, one terrible pool shot at a time.</h2>
<p>Whether you are an engineer, a designer, a business strategist, or just an ambitious person driven to build things from the ground up, this is your crowd.</p>
<p class="pitch-kicker">Zero pool skills required. Seriously. We are here to build startups, not run the table.</p>
</div>
</section>
<!-- What to expect: bento, four cells, one photographic -->
<section class="expect" id="expect">
<h2 class="section-title reveal">What to expect</h2>
<div class="bento">
<figure class="cell cell-photo reveal">
<img src="<%= site.images.napkin %>" width="1024" height="1024" loading="lazy"
alt="Three students laughing over a napkin sketch at the rail of a pool table.">
</figure>
<% site.expect.forEach(function (item, i) { %>
<div class="cell cell-text<%= i === 2 ? " cell-wide" : "" %><%= i === 1 ? " cell-tint" : "" %> reveal">
<h3><%= item.title %></h3>
<p><%= item.body %></p>
</div>
<% }) %>
</div>
</section>
<!-- RSVP -->
<section class="rsvp" id="rsvp">
<div class="rsvp-panel reveal">
<h2>RSVP for <%= isTonight ? "tonight" : nextLong %></h2>
<p class="rsvp-sub">Not required, but it helps us know how many tables to hold. We will email you a reminder the day before.</p>
<form id="rsvp-form" method="POST" action="/forms/rsvp" novalidate>
<input type="hidden" name="_redirect" value="/?rsvp=ok#rsvp">
<input type="hidden" name="event_date" value="<%= nextISO %>">
<p class="hp" aria-hidden="true"><label>Leave this empty<input type="text" name="company_website" tabindex="-1" autocomplete="off"></label></p>
<div class="field">
<label for="f-name">Name</label>
<input id="f-name" name="name" type="text" autocomplete="name" required>
<p class="field-error" id="e-name"></p>
</div>
<div class="field">
<label for="f-email">Email</label>
<input id="f-email" name="email" type="email" autocomplete="email" inputmode="email" required>
<p class="field-help">For the weekly reminder. Nothing else.</p>
<p class="field-error" id="e-email"></p>
</div>
<div class="field">
<label for="f-building">What are you building? <span class="opt">Optional</span></label>
<input id="f-building" name="building" type="text" autocomplete="off">
<p class="field-help">A few words is plenty. It helps us introduce you to the right people.</p>
</div>
<button class="btn btn-primary btn-block" type="submit" id="rsvp-submit">RSVP</button>
<p class="form-status" id="form-status" role="status" aria-live="polite"></p>
<p class="fine">One email a week at most. Unsubscribe any time.</p>
</form>
<div class="rsvp-done" id="rsvp-done" hidden>
<h3>You are on the list.</h3>
<p>See you <%= isTonight ? "tonight" : nextLong %> at <%= site.venue %>, <%= site.startTime %>. Bring your ideas and a valid ID.</p>
<a class="ics" href="/assets/founders-break.ics">Add the whole series to your calendar</a>
</div>
</div>
</section>
</main>
<footer class="foot">
<p class="foot-line">Bring your ideas and a valid ID.</p>
<div class="foot-meta">
<a class="foot-host" href="<%= site.host.url %>" target="_blank" rel="noopener">
<img src="/images/onetouch-studio.svg" alt="" width="20" height="20">
<span>Hosted by <%= site.host.name %></span>
</a>
<a href="mailto:<%= site.host.email %>"><%= site.host.email %></a>
<a href="<%= site.mapUrl %>" target="_blank" rel="noopener"><%= site.venue %>, <%= site.city %></a>
</div>
</footer>
<script src="/js/main.js" defer></script>
</body>
</html>