sam/Beam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Sam
2026-06-10 11:51:56 -05:00
commit 66ba338b81
57 changed files with 5509 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
priv/networks/cs/website/index.html Normal file
View File

@@ -0,0 +1,460 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Captured Sun</title>
<link rel="icon" href="/_/logo.svg">
<style>
@font-face {
font-family: 'IMFell';
src: url('/_/IMFell/IMFell.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
*, *::before, *::after { box-sizing: border-box; }
body {
overflow: hidden;
margin: 0;
padding: 0;
background: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
img {
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
a:visited {
color: inherit;
}
@keyframes rotate-stars {
0% { transform: rotate(0deg) translateX(0); }
25% { transform: rotate(90deg) translateX(50px); }
50% { transform: rotate(180deg) translateX(0); }
75% { transform: rotate(270deg) translateX(-50px); }
100% { transform: rotate(360deg) translateX(0); }
}
.stars {
display: block;
height: auto;
position: absolute;
animation: rotate-stars 950s linear infinite;
transform-origin: center center;
top: -550px;
width: 1600px;
z-index: 0;
}
.moon {
position: fixed;
z-index: 2;
width: 100vw;
left: 0px;
bottom: 0px; /* seam overlap — tweak to taste */
}
.atlas {
position: fixed;
left: 50%;
bottom: -100px;
transform: translateX(-50%);
width: 85vw;
height: auto;
z-index: 3;
pointer-events: none;
}
.atlas img { display: block; width: 100%; height: auto; }
.nav {
position: fixed;
bottom: 440px; left: 0; right: 0;
display: flex; justify-content: center; gap: 18px;
z-index: 4;
}
.btn {
padding: 12px 20px;
border-radius: 11px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
font-family: 'IMFell';
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
0 8px 24px rgba(0, 0, 0, 0.25);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-red {
background: rgba(220, 38, 38, 0.30);
color: #d06868;
border: 0.5px solid rgba(254, 202, 202, 0.05);
}
.btn-orange {
background: rgba(234, 88, 12, 0.30);
color: #d79d5a;
border: 0.5px solid rgba(254, 215, 170, 0.05);
}
.btn-yellow {
background: rgba(234, 179, 8, 0.30);
color: #d0c04b;
border: 0.5px solid rgba(254, 240, 138, 0.05);
}
.menu {
position: fixed;
border-radius: 11px;
overflow: hidden;
z-index: 10;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
0 8px 24px rgba(0, 0, 0, 0.25);
transition:
top 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
left 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
width 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
height 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
border-radius 460ms cubic-bezier(0.32, 0.72, 0.20, 1);
visibility: hidden;
pointer-events: none;
font-family: 'IMFell';
}
.menu.is-active { visibility: visible; pointer-events: auto; }
.menu-red { background: rgba(220, 38, 38, 0.30); color: #fab2b2; border: 0.5px solid rgba(254, 202, 202, 0.05); }
.menu-orange { background: rgba(234, 88, 12, 0.30); color: #d79d5a; border: 0.5px solid rgba(254, 215, 170, 0.05); }
.menu-yellow { background: rgba(234, 179, 8, 0.30); color: #d0c04b; border: 0.5px solid rgba(254, 240, 138, 0.05); }
.menu-close {
position: absolute;
top: 18px; right: 18px;
width: 36px; height: 36px;
border-radius: 50%;
border: 0.5px solid rgba(255, 255, 255, 0.10);
background: rgba(0, 0, 0, 0.20);
color: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 180ms ease, background 150ms ease;
z-index: 2;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.menu-close:hover { background: rgba(0, 0, 0, 0.35); }
.menu.is-open .menu-close { opacity: 1; }
.menu-inner {
padding: 72px 56px 56px;
opacity: 0;
transform: translateY(8px);
transition: opacity 220ms ease, transform 220ms ease;
height: 100%;
overflow-y: auto;
color: inherit;
}
.menu.is-open .menu-inner {
opacity: 1;
transform: translateY(0);
transition-delay: 280ms;
}
.menu h2 {
margin: 0 0 24px;
font-size: 36px;
font-weight: 400;
letter-spacing: 0.02em;
}
.menu p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 16px;
line-height: 1.65;
margin: 0 0 16px;
max-width: 62ch;
}
.link-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.link-list a {
display: block;
padding: 16px 18px;
background: rgba(0, 0, 0, 0.15);
border: 0.5px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: inherit;
text-decoration: none;
transition: background 150ms ease, transform 150ms ease;
}
.link-list a:hover { background: rgba(0, 0, 0, 0.30); transform: translateY(-1px); }
.link-list .label { display: block; font-size: 17px; }
.link-list .desc {
display: block;
font-size: 13px;
opacity: 0.7;
margin-top: 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.contact-form {
display: grid;
gap: 16px;
max-width: 560px;
}
.contact-form label {
display: grid;
gap: 6px;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
}
.contact-form input,
.contact-form textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 15px;
color: #f0e6c8;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.50);
border: 0.5px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
outline: none;
transition: border-color 150ms ease, background 150ms ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(240, 230, 200, 0.35); }
.contact-form input:focus,
.contact-form textarea:focus {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(0, 0, 0, 0.65);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .submit {
justify-self: end;
margin-top: 4px;
padding: 12px 26px;
border-radius: 10px;
border: 0.5px solid rgba(254, 240, 138, 0.10);
background: rgba(234, 179, 8, 0.40);
color: inherit;
font-family: 'IMFell';
font-size: 16px;
letter-spacing: 0.04em;
cursor: pointer;
transition: transform 120ms ease, background 120ms ease;
}
.contact-form .submit:hover { background: rgba(234, 179, 8, 0.55); transform: translateY(-1px); }
@media (max-width: 768px) {
.space {
position: absolute;
transform: translate(-50%, 0);
top: 0px;
display:none;
width: 1200px;
}
.moon {
display: none;
}
.stars {
display: none;
}
.atlas {
top: -200px;
width: 1000px;
}
.nav {
bottom: 1vh
}
.menu-red {
color: rgb(255, 255, 255) !important
}
.menu-inner { padding: 64px 28px 28px; }
.menu h2 { font-size: 28px; }
}
</style>
</head>
<body style="cursor: default">
<img class="stars" src="/_/stars.png" alt="">
<img class="moon" src="/_/moon.png" alt="">
<picture class="atlas">
<source media="(max-width: 768px)" srcset="/_/atlasmobile.png">
<img src="/_/atlas.webp" alt="">
</picture>
<nav class="nav">
<button class="btn btn-red">About</button>
<!-- <button class="btn btn-orange">Our Work</button> -->
<button class="btn btn-orange">Contact Us</button>
</nav>
<div class="menu menu-red" id="menu-about">
<button class="menu-close" aria-label="Close">X</button>
<div class="menu-inner">
<h2>About</h2>
<p><i>All energy comes from the sun. To think is to capture, freeze, and reflect it.</i></p>
<p>Captured Sun was founded in 2022, to answer a simple question: what would the operating system look like if it was rearranged for the modern day?</p>
<p>The answer we have found is <a style="color: inherit;" href="https://frm.so" target="_blank">Forum</a>: the Community Operating System.</p>
<p>In concert with Forum, we are happy to accept certain consulting jobs with people or organizations that need custom solutions. If that's you, feel free to reach out.</p>
</div>
</div>
<div class="menu menu-orange" id="menu-work">
<button class="menu-close" aria-label="Close">X</button>
<div class="menu-inner">
<h2>Our Work</h2>
<ul class="link-list">
<li><a href="https://apple.com" target="_blank" rel="noopener"><span class="label">Apple</span><span class="desc">Product launch microsite</span></a></li>
<li><a href="https://vercel.com" target="_blank" rel="noopener"><span class="label">Vercel</span><span class="desc">Edge runtime documentation</span></a></li>
<li><a href="https://linear.app" target="_blank" rel="noopener"><span class="label">Linear</span><span class="desc">Marketing site redesign</span></a></li>
<li><a href="https://figma.com" target="_blank" rel="noopener"><span class="label">Figma</span><span class="desc">Plugin gallery</span></a></li>
<li><a href="https://stripe.com" target="_blank" rel="noopener"><span class="label">Stripe</span><span class="desc">Developer onboarding flow</span></a></li>
<li><a href="https://railway.com" target="_blank" rel="noopener"><span class="label">Railway</span><span class="desc">Pricing page experiments</span></a></li>
<li><a href="https://anthropic.com" target="_blank" rel="noopener"><span class="label">Anthropic</span><span class="desc">Research publication template</span></a></li>
<li><a href="https://notion.so" target="_blank" rel="noopener"><span class="label">Notion</span><span class="desc">Template marketplace</span></a></li>
</ul>
</div>
</div>
<div class="menu menu-orange" id="menu-contact">
<button class="menu-close" aria-label="Close"><span>X</span></button>
<div class="menu-inner">
<h2>Contact Us</h2>
<form class="contact-form" novalidate onsubmit="return handleContactSubmit(event, this)">
<label>Name <input type="text" name="name" placeholder="Your name" required></label>
<label>Email <input type="email" name="email" placeholder="you@example.com"></label>
<label>Phone <input type="tel" name="phone" placeholder="+1 555 123 4567"></label>
<label>Message <textarea name="message" placeholder="Tell us about your project..." required></textarea></label>
<button class="submit" type="submit">Send Message</button>
</form>
</div>
</div>
<script>
function handleContactSubmit(event, form) {
event.preventDefault();
var email = form.email.value.trim();
var phone = form.phone.value.trim();
if (!email && !phone) {
form.email.setCustomValidity('Provide an email or a phone number.');
form.email.reportValidity();
return false;
}
form.email.setCustomValidity('');
if (!form.checkValidity()) { form.reportValidity(); return false; }
form.reset();
return false;
}
(function () {
var pairs = [
{ btn: document.querySelector('.btn-red'), menu: document.getElementById('menu-about') },
{ btn: document.querySelector('.btn-orange'), menu: document.getElementById('menu-contact') }
];
var active = null;
var FINAL_RADIUS = '18px';
function applyRect(menu, rect) {
menu.style.top = rect.top + 'px';
menu.style.left = rect.left + 'px';
menu.style.width = rect.width + 'px';
menu.style.height = rect.height + 'px';
menu.style.borderRadius = '11px';
}
function applyFinal(menu) {
menu.style.top = '10vh';
menu.style.left = '10vw';
menu.style.width = '80vw';
menu.style.height = '80vh';
menu.style.borderRadius = FINAL_RADIUS;
}
function openMenu(pair) {
if (active) closeMenu();
var btn = pair.btn, menu = pair.menu;
if (menu._closeTimer) { clearTimeout(menu._closeTimer); menu._closeTimer = null; }
var rect = btn.getBoundingClientRect();
menu.style.transition = 'none';
applyRect(menu, rect);
menu.classList.add('is-active');
void menu.offsetHeight;
menu.style.transition = '';
btn.style.visibility = 'hidden';
applyFinal(menu);
menu.classList.add('is-open');
active = pair;
}
function closeMenu() {
if (!active) return;
var btn = active.btn, menu = active.menu;
var rect = btn.getBoundingClientRect();
applyRect(menu, rect);
menu.classList.remove('is-open');
if (menu._closeTimer) clearTimeout(menu._closeTimer);
menu._closeTimer = setTimeout(function () {
menu.classList.remove('is-active');
btn.style.visibility = '';
menu._closeTimer = null;
}, 460);
active = null;
}
pairs.forEach(function (pair) {
pair.btn.addEventListener('click', function (e) {
e.stopPropagation();
openMenu(pair);
});
pair.menu.addEventListener('click', function (e) { e.stopPropagation(); });
pair.menu.querySelector('.menu-close').addEventListener('click', function (e) {
e.stopPropagation();
closeMenu();
});
});
document.addEventListener('click', function () {
if (active) closeMenu();
});
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && active) closeMenu();
});
window.addEventListener('resize', function () {
if (!active) return;
applyFinal(active.menu);
});
})();
</script>
</body>
</html>