Repository navigation
Expand file tree
/
Copy pathabout.html
More file actions
325 lines (308 loc) · 20.2 KB
/
Copy pathabout.html
File metadata and controls
325 lines (308 loc) · 20.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#060d18">
<title>About — THE COLD FRONT</title>
<meta name="description" content="About THE COLD FRONT: the independent Chicago Bears winter-football fan site. The builder, their other projects, donation addresses, and the socials.">
<meta property="og:title" content="About — THE COLD FRONT">
<meta property="og:type" content="website">
<meta property="og:url" content="https://coldfronthq.com/about.html">
<meta property="og:image" content="https://coldfronthq.com/img/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="THE COLD FRONT — Chicago Bears × Midwest Winter Football">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@kshot9000">
<meta name="twitter:title" content="About — THE COLD FRONT">
<meta name="twitter:description" content="About THE COLD FRONT: the independent Chicago Bears winter-football fan site. The builder, their other projects, donation addresses, and the socials.">
<meta name="twitter:image" content="https://coldfronthq.com/img/og-image.png">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="manifest" href="manifest.webmanifest">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Cold Front">
<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=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css?v=1.191.0">
<link rel="stylesheet" href="css/experience.css?v=1.199.0">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3316742664595468"
crossorigin="anonymous"></script>
</head>
<body>
<canvas id="snow" aria-hidden="true"></canvas>
<div class="weather-strip" data-cf-weather aria-label="Chicago field conditions"></div>
<header class="site-head">
<div class="wrap">
<a class="brand" href="index.html" aria-label="THE COLD FRONT — home">
<svg class="mark" viewBox="0 0 48 48" aria-hidden="true">
<rect x="1.5" y="1.5" width="45" height="45" rx="10" fill="#101F33" stroke="#5C7A99" stroke-opacity="0.55"/>
<g fill="#C83803">
<ellipse cx="24" cy="29.5" rx="7.6" ry="6.1"/>
<ellipse cx="13.4" cy="21" rx="3.4" ry="4.5" transform="rotate(-18 13.4 21)"/>
<ellipse cx="20.4" cy="15.6" rx="3.6" ry="4.9" transform="rotate(-6 20.4 15.6)"/>
<ellipse cx="28.6" cy="15.6" rx="3.6" ry="4.9" transform="rotate(6 28.6 15.6)"/>
<ellipse cx="35.6" cy="21" rx="3.4" ry="4.5" transform="rotate(18 35.6 21)"/>
</g>
<line x1="8" y1="40.5" x2="40" y2="40.5" stroke="#E8541E" stroke-width="2.4" stroke-linecap="round"/>
<path d="M12 40.5 h6 l-3 -6 z" fill="#E8541E"/>
<path d="M21 40.5 h6 l-3 -6 z" fill="#E8541E"/>
<path d="M30 40.5 h6 l-3 -6 z" fill="#E8541E"/>
</svg>
<span class="name">The Cold Front<small>Chicago Bears × Midwest Winter</small></span>
</a>
<button class="nav-toggle" aria-label="Toggle menu"><svg class="nt-icon" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><line class="nt-bar nt-top" x1="4" y1="7" x2="20" y2="7"/><line class="nt-bar nt-mid" x1="4" y1="12" x2="20" y2="12"/><line class="nt-bar nt-bot" x1="4" y1="17" x2="20" y2="17"/></svg></button>
<nav class="nav" aria-label="Main">
<a href="index.html">Home</a>
<a href="news.html">News</a>
<a href="games.html">Games</a>
<a href="highlights.html">Highlights</a>
<a href="stats.html">Stats</a>
<a href="odds.html">Odds</a>
<a href="injuries.html">Injuries</a>
<a href="practice.html">Practice</a>
<a href="team.html">Team</a>
<a href="about.html">About</a>
<a href="https://x.com/kshot9000" target="_blank" rel="noopener" aria-label="My X profile"><span aria-hidden="true">𝕏</span><span class="nav-x-label">@kshot9000</span></a>
</nav>
</div>
</header>
<main>
<div class="wrap">
<div class="page-intro">
<div class="eyebrow">About the hub</div>
<h1>The All-in-One Bears Fan Hub</h1>
<p><b>THE COLD FRONT</b> is an independent Chicago Bears fan hub — news, injuries, betting odds, game stats & schedule, roster, and practice intel in one place. Built for Midwest football energy (Soldier Field cold, lake wind, orange & blue grit) without the fluff. No accounts, no backend — it runs in your browser and degrades gracefully when the network goes whiteout. Unofficial. Not NFL- or Bears-affiliated.</p>
</div>
<div id="snap-meta" class="card pad-lg" style="margin-bottom:18px" aria-live="polite"></div>
<div class="callout info" id="why-cold-front" style="margin-top:8px">
<b>Why Cold Front?</b> One tab for the whole Bears week — practice whispers on Wednesday, the wire on Friday, kickoff wind on Sunday, film on Monday. Built because the feeds we love live in six different apps, and lake-effect football deserves a home that feels like Chicago: navy, orange, steel, and snow that never quite stops.
</div>
<div class="photo-band north-ave" aria-label="North Avenue Beach skyline" style="margin:8px 0 18px">
<div class="photo-band-bg" aria-hidden="true"></div>
<div class="photo-band-inner">
<div class="photo-band-copy">
<div class="eyebrow" style="margin:0 0 6px">North Avenue Beach</div>
<p class="band-line">City from the sand. Front from the lake.</p>
<p>Chicago skyline from the beach — the same lakefront that shapes every cold Sunday.</p>
</div>
<div class="photo-band-art" aria-hidden="true">
<img class="art-mark lg" src="img/paw-mark.svg" alt="" width="110" height="110" decoding="async">
</div>
</div>
</div>
<div class="photo-band river" aria-label="Chicago River at night">
<div class="photo-band-bg" aria-hidden="true"></div>
<div class="photo-band-inner">
<div class="photo-band-copy">
<div class="eyebrow" style="margin:0 0 6px">City of big shoulders</div>
<p class="band-line">Built for Chicago cold</p>
<p>Night river, lake wind, stadium stone.</p>
</div>
<div class="photo-band-art" aria-hidden="true">
<img class="art-mark lg" src="img/paw-mark.svg" alt="">
<img class="art-mark" src="img/jersey-54.svg" alt="">
</div>
</div>
</div>
<div class="city-strip city-strip-4" aria-label="Chicago city photography">
<div class="city-tile t-skyline">
<picture class="city-tile-pic">
<source media="(max-width: 700px)" srcset="img/chicago-skyline-night-sm.webp" type="image/webp">
<img class="city-tile-img" src="img/chicago-skyline-night.webp" alt="" width="1600" height="984" loading="lazy" decoding="async">
</picture>
<span class="city-tile-label">Skyline</span>
</div>
<div class="city-tile t-bean">
<picture class="city-tile-pic">
<source media="(max-width: 700px)" srcset="img/chicago-downtown-night-sm.webp" type="image/webp">
<img class="city-tile-img" src="img/chicago-downtown-night.webp" alt="" width="1600" height="1068" loading="lazy" decoding="async">
</picture>
<span class="city-tile-label">Millennium Park</span>
</div>
<div class="city-tile t-theatre">
<picture class="city-tile-pic">
<source media="(max-width: 700px)" srcset="img/chicago-night-alt-sm.webp" type="image/webp">
<img class="city-tile-img" src="img/chicago-night-alt.webp" alt="" width="1600" height="1068" loading="lazy" decoding="async">
</picture>
<span class="city-tile-label">Chicago Theatre</span>
</div>
<div class="city-tile t-lincoln-park">
<picture class="city-tile-pic">
<source media="(max-width: 700px)" srcset="img/chicago-lincoln-park-night-sm.webp" type="image/webp">
<img class="city-tile-img" src="img/chicago-lincoln-park-night.webp" alt="" width="1600" height="1065" loading="lazy" decoding="async">
</picture>
<span class="city-tile-label">Lincoln Park night</span>
</div>
</div>
<p class="photo-credit">Photo credits: Unsplash (skyline, Cloud Gate / Bean dusk, Chicago Theatre, downtown night, Navy Pier, Lincoln Park night) · Wikimedia Commons (Soldier Field, Chicago River night, lakefront winter, CTA L, Buckingham Fountain, Marina City) · field photography: U.S. Navy (CPO Alan Haraf) and U.S. Army Reserve (416th Theater Engineer Command), public domain, plus Moses8910 (CC BY-SA 4.0) for the stadium-skyline aerial. Mobile loads lighter webps via <code><picture></code>. Marks are original Cold Front SVGs — never NFL logos. See <a href="img/ATTRIBUTION.txt">img/ATTRIBUTION.txt.</a></p>
<!-- Builder -->
<div class="section-head">
<h2>Built by</h2>
<span class="tag">the human behind the snow</span>
<span class="rule"></span>
</div>
<div class="grid grid-2">
<div class="card pad-lg">
<div class="eyebrow">X / Twitter</div>
<h3 style="font-size:22px"><a href="https://x.com/kshot9000" target="_blank" rel="noopener" data-cf-x-handle>@kshot9000</a></h3>
<p class="dim" style="font-size:14px;margin-top:8px">Developer, degen, and self-appointed weather forecaster for Uptown. Posts about the projects below, the chains they live on, and — on Sundays — whatever the front did to the scoreboard.</p>
<div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap">
<a class="btn primary small" href="https://x.com/kshot9000" target="_blank" rel="noopener">𝕏 Follow on X ↗</a>
<a class="btn small" href="https://github.com/Kshot3000" target="_blank" rel="noopener">GitHub ↗</a>
</div>
</div>
<div class="card pad-lg">
<div class="eyebrow">Site facts</div>
<ul style="display:grid;gap:8px;font-size:14px;margin-top:6px">
<li>🧊 <b style="color:var(--snow)">Theme:</b> Midwest winter football — cold fronts, lake effect, crunchers.</li>
<li>📡 <b style="color:var(--snow)">Data:</b> ESPN league wire, Polymarket, Open-Meteo weather — all keyless, all in-browser.</li>
<li>🔌 <b style="color:var(--snow)">Offline:</b> every feed you've seen once caches to this device for the whiteouts.</li>
<li>🚫 <b style="color:var(--snow)">Not affiliated</b> with the NFL, the Chicago Bears, or any bookmaker. Fan-made, stats-checked, weather-obsessed.</li>
</ul>
</div>
</div>
<!-- Donations -->
<div class="section-head" id="donate">
<h2>Keep the lights on</h2>
<span class="tag">crypto donations · same wallets as the other sites</span>
<span class="rule"></span>
</div>
<p class="dim" style="max-width:640px;font-size:14px;margin-bottom:16px">
Hosting, data, and development cost real money — and in this economy, so does the coffee for the 6 a.m. practice watch. If the site saves you a tab or starts a bet-board argument, a little crypto goes a long way. These are the same public wallets from my other projects. Double-check before you send — crypto can't be un-sent.
</p>
<div class="grid grid-3" id="don-grid"></div>
<!-- Privacy -->
<div class="section-head" id="privacy">
<h2>Privacy</h2>
<span class="tag">short version</span>
<span class="rule"></span>
</div>
<p class="dim" style="max-width:640px;font-size:14px;margin-bottom:10px">
This is a static fan site — there are no accounts, no tracking profiles, and nothing you type here is sent anywhere except the provider you asked for (paste a data key and it goes only to that API; the rest stays in your browser's local storage on your device). When display ads are enabled, our ad partner (e.g. Google AdSense) may use cookies to serve and measure ads; you can opt out of personalized ads in your <a href="https://myaccount.google.com/data-and-privacy" target="_blank" rel="noopener">Google ad settings</a>. Questions? Reach me at <a href="https://x.com/kshot9000" target="_blank" rel="noopener">@kshot9000.</a>
</p>
<!-- Projects -->
<div class="section-head">
<h2>Other projects</h2>
<span class="tag">from the same desk</span>
<span class="rule"></span>
</div>
<div class="grid grid-2" id="proj-grid"></div>
<!-- Socials -->
<div class="section-head">
<h2>All the socials</h2>
<span class="tag">mine + the Bears'</span>
<span class="rule"></span>
</div>
<div class="social-grid" id="all-socials"></div>
<!-- Data sources (BYO-key upgrades) -->
<div class="section-head" id="data-sources">
<h2>Optional data sources</h2>
<span class="tag">BYO-key upgrades · stored only in this browser</span>
<span class="rule"></span>
</div>
<p class="dim" style="max-width:640px;font-size:14px;margin-bottom:16px">
Everything above is keyless and works out of the box. For deeper stats, available injury reports, or a fully independent second wire, drop a free key into a box below. It lives in this browser's local storage only — it's never written to the site or shared, and it's sent only to that provider.
</p>
<div class="grid grid-3">
<div class="card pad-lg">
<div class="eyebrow">API-Sports · free tier</div>
<h3 style="font-size:20px">Extra stats + injury reports</h3>
<p class="dim" style="font-size:13.5px;margin-top:8px">When a key is set, the <a href="stats.html">stats</a> and <a href="injuries.html">injury</a> panels switch to full-season player stats and available injury reports; coverage depends on the provider. Usage and coverage depend on your plan.</p>
<div class="key-box" style="margin-top:14px">
<input id="apisports-key" type="password" autocomplete="off" spellcheck="false" placeholder="Paste your API-Sports key…" aria-label="API-Sports key">
<button class="btn small" id="apisports-save" type="button">Save key</button>
<button class="btn small" id="apisports-clear" type="button">Clear</button>
</div>
<p class="dim" id="apisports-state" style="font-size:12.5px;margin-top:10px"></p>
<a class="btn small" href="https://www.api-sports.io/" target="_blank" rel="noopener" style="margin-top:12px">Get a free API-Sports key ↗</a>
</div>
<div class="card pad-lg">
<div class="eyebrow">Odds API · free tier</div>
<h3 style="font-size:20px">Full Vegas board</h3>
<p class="dim" style="font-size:13.5px;margin-top:8px">The <a href="odds.html">odds page</a> already asks for a key right where it's used (subject to your plan). It stays in this browser, same as everything else — no need to set it here.</p>
<div class="dim" style="font-size:12.5px;margin-top:14px;line-height:1.5">
<b>Enterprise feeds</b> — Sportradar, Opta/Stats Perform, LSports, SportsDataIO — are real-time, low-latency feeds priced for production. They're documented as BYO-key options in the <a href="https://github.com/Kshot3000/ColdFront/blob/main/README.md" target="_blank" rel="noopener">README</a> rather than hard-wired into a static fan site.
</div>
</div>
<div class="card pad-lg">
<div class="eyebrow">TheSportsDB · free tier</div>
<h3 style="font-size:20px">A second, independent wire</h3>
<p class="dim" style="font-size:13.5px;margin-top:8px">When a key is set, <a href="games.html">standings</a>, the <a href="team.html">roster</a>, and the <a href="games.html">schedule</a> can read a completely different provider if the league wire is ever unreachable. Different company, different CDN — the site keeps working either way.</p>
<div class="key-box" style="margin-top:14px">
<input id="tsdb-key" type="password" autocomplete="off" spellcheck="false" placeholder="Paste your TheSportsDB key…" aria-label="TheSportsDB key">
<button class="btn small" id="tsdb-save" type="button">Save key</button>
<button class="btn small" id="tsdb-clear" type="button">Clear</button>
</div>
<p class="dim" id="tsdb-state" style="font-size:12.5px;margin-top:10px"></p>
<a class="btn small" href="https://www.thesportsdb.com/api" target="_blank" rel="noopener" style="margin-top:12px">Get a free TheSportsDB key ↗</a>
</div>
</div>
<div class="callout info" style="margin-top:30px">
<b>Colophon:</b> hand-rolled HTML/CSS/JS, no build step, no tracker, no cookie. Fonts from Google (with system fallbacks), layered snowfall with a pause control, weather from Open-Meteo, football from the league wire, and the market from Polymarket. Source is on GitHub — fork it, fix it, tell the Bears.
</div>
</div>
</main>
<footer class="site-foot">
<div class="wrap">
<div class="foot-grid">
<div>
<div class="foot-brand">
<svg class="mark" viewBox="0 0 48 48" aria-hidden="true">
<rect x="1.5" y="1.5" width="45" height="45" rx="10" fill="#101F33" stroke="#5C7A99" stroke-opacity="0.55"/>
<g fill="#C83803">
<ellipse cx="24" cy="29.5" rx="7.6" ry="6.1"/>
<ellipse cx="13.4" cy="21" rx="3.4" ry="4.5" transform="rotate(-18 13.4 21)"/>
<ellipse cx="20.4" cy="15.6" rx="3.6" ry="4.9" transform="rotate(-6 20.4 15.6)"/>
<ellipse cx="28.6" cy="15.6" rx="3.6" ry="4.9" transform="rotate(6 28.6 15.6)"/>
<ellipse cx="35.6" cy="21" rx="3.4" ry="4.5" transform="rotate(18 35.6 21)"/>
</g>
<line x1="8" y1="40.5" x2="40" y2="40.5" stroke="#E8541E" stroke-width="2.4" stroke-linecap="round"/>
<path d="M12 40.5 h6 l-3 -6 z" fill="#E8541E"/>
<path d="M21 40.5 h6 l-3 -6 z" fill="#E8541E"/>
<path d="M30 40.5 h6 l-3 -6 z" fill="#E8541E"/>
</svg>
<span class="name">The Cold Front</span>
</div>
<p class="foot-note">Independent fan project. Not affiliated with or endorsed by the NFL, the Chicago Bears, or any broadcaster. Odds are informational — 18+/21+ where legal. Data: ESPN, Polymarket, Open-Meteo. When a feed is unreachable, the page falls back to the last good snapshot saved on your device.</p>
</div>
<div>
<h3>Site</h3>
<ul>
<li><a href="news.html">News wire</a></li>
<li><a href="games.html">Games & scoreboard</a></li>
<li><a href="highlights.html">Game highlights</a></li>
<li><a href="stats.html">Stats</a></li>
<li><a href="odds.html">Odds & markets</a></li>
<li><a href="injuries.html">Injury report</a></li>
<li><a href="practice.html">Practice & facility</a></li>
<li><a href="team.html">Roster</a></li>
<li><a href="about.html">About / donate</a></li>
</ul>
</div>
<div>
<h3>Bears socials</h3>
<ul data-cf-socials></ul>
</div>
</div>
<div class="foot-bottom">
<p class="foot-credit">© <span data-cf-year>2026</span> THE COLD FRONT · fan-made in the Midwest with 🧊 · built by <a href="https://x.com/kshot9000" target="_blank" rel="noopener" data-cf-x-handle>@kshot9000</a></p>
<button type="button" class="prl-chip" data-cf-copy="btc" title="Copy the BTC tip address">
<span class="prl-gem" aria-hidden="true">₿</span>
<span class="prl-label">Tip the build · BTC</span>
<code class="prl-addr" aria-hidden="true">3GnR…8vZK</code>
<span class="prl-status" role="status">Copy</span>
</button>
</div>
</div>
</footer>
<script src="js/common.js?v=1.197.0"></script>
<script src="js/snow.js?v=1.137.0"></script>
<script src="js/api.js?v=1.127.0"></script>
<script src="js/about.js?v=1.48.0"></script>
</body>
</html>