mirror of
https://github.com/Start9Labs/start9.com.git
synced 2026-03-26 02:11:55 +00:00
demo
This commit is contained in:
Matt Hill
@@ -6,7 +6,7 @@ const slinkity = require("slinkity");
|
||||
|
||||
// for 404 callback
|
||||
const fs = require("fs");
|
||||
const NOT_FOUND_PATH = "_site/404.html";
|
||||
const NOT_FOUND_PATH = "_site/public/404.html";
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/proxy.pac");
|
||||
|
||||
1
package-lock.json
generated
1
package-lock.json
generated
@@ -34,6 +34,7 @@
|
||||
"integrity": "sha512-03ER4zukR6BgwppI5DHRE11lc+8B0fWsBrqacVWo3o49QkdEFXnEWjhyI9qd9LrPlgQHK2/MYyxuOvNwecyCLQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@11ty/dependency-tree": "^2.0.1",
|
||||
"@11ty/eleventy-utils": "^1.0.1",
|
||||
|
||||
64
src/040PrivateDemo.njk
Normal file
64
src/040PrivateDemo.njk
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "Private Demo: StartOS 0.4.0"
|
||||
layout: layouts/peripheral.njk
|
||||
---
|
||||
|
||||
<link rel="stylesheet" href="/@root/src/assets/styles/private-demo.scss"/>
|
||||
|
||||
<div class="demo-page">
|
||||
<div class="scanlines"></div>
|
||||
|
||||
<div class="invite-card">
|
||||
<div class="card-border"></div>
|
||||
|
||||
<div class="card-header">
|
||||
<span class="badge">Private Event</span>
|
||||
<h1>StartOS <span class="glow">0.4.0</span></h1>
|
||||
<p class="subtitle">Live Demonstration</p>
|
||||
</div>
|
||||
|
||||
<div class="divider"><span></span></div>
|
||||
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">What</div>
|
||||
<p>A live demo of <strong>StartOS 0.4.0</strong> and <strong>StartTunnel</strong>, plus a sneak peek at <strong>StartWRT</strong> and the <strong>Start9 Router</strong>.</p>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">When</div>
|
||||
<p><strong>Friday, March 27, 2026</strong><br/>10:00 AM Mountain Time<br/>Duration: ~1 hour + optional Q&A</p>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">Where</div>
|
||||
<p>Self-hosted on StartOS<br/><a href="https://meet.start9.com/040PrivateDemo">meet.start9.com/040PrivateDemo</a></p>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">Who</div>
|
||||
<p><strong>Matt Hill</strong>, founder of Start9.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"><span></span></div>
|
||||
|
||||
<div class="info-block">
|
||||
<h2>What to Expect</h2>
|
||||
<p>Sit back and enjoy the show. No participation is required or expected. After the demo, stick around for Q&A.</p>
|
||||
<p>For privacy, you are encouraged to <strong>use a nym</strong> (pseudonym) when joining.</p>
|
||||
</div>
|
||||
|
||||
<div class="info-block">
|
||||
<h2>Limited Capacity</h2>
|
||||
<p>To ensure smooth operation, capacity is limited to <strong>100 participants</strong>, first come first served.</p>
|
||||
</div>
|
||||
|
||||
<div class="divider"><span></span></div>
|
||||
|
||||
<div class="info-block contact">
|
||||
<p>Questions? Email <a href="mailto:matthill@start9.com">matthill@start9.com</a> or reach out to Matt directly in chat.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
{% include "svgs/workmark.svg" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
351
src/assets/styles/private-demo.scss
Normal file
351
src/assets/styles/private-demo.scss
Normal file
@@ -0,0 +1,351 @@
|
||||
// ── Cyberpunk palette ──
|
||||
$neon-cyan: #00fff0;
|
||||
$neon-magenta: #ff2a6d;
|
||||
$neon-purple: #b537f2;
|
||||
$neon-blue: #05d9e8;
|
||||
$dark-bg: #0a0a12;
|
||||
$card-bg: rgba(10, 10, 22, 0.85);
|
||||
$border-color: rgba(0, 255, 240, 0.15);
|
||||
|
||||
// Hide site chrome — this page is a standalone invitation
|
||||
header, #menu, footer, .banner {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
overflow-x: hidden !important;
|
||||
background-color: $dark-bg !important;
|
||||
}
|
||||
$text-dim: #a8b2d1;
|
||||
$text-bright: #e6f1ff;
|
||||
|
||||
// ── Scanline overlay ──
|
||||
.scanlines {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 255, 240, 0.015) 2px,
|
||||
rgba(0, 255, 240, 0.015) 4px
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page wrapper ──
|
||||
.demo-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba($neon-purple, 0.08) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba($neon-cyan, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 100%, rgba($neon-magenta, 0.05) 0%, transparent 40%),
|
||||
$dark-bg;
|
||||
}
|
||||
|
||||
// ── Invite card ──
|
||||
.invite-card {
|
||||
position: relative;
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
background: $card-bg;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
padding: 3.5rem 3rem;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow:
|
||||
0 0 40px rgba($neon-cyan, 0.05),
|
||||
inset 0 0 60px rgba($neon-cyan, 0.02);
|
||||
|
||||
// Corner accents
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-color: $neon-cyan;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
border-width: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Card border glow animation ──
|
||||
.card-border {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient($card-bg, $card-bg) padding-box,
|
||||
linear-gradient(135deg, $neon-cyan, transparent 40%, transparent 60%, $neon-magenta) border-box;
|
||||
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Header section ──
|
||||
.card-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
font-family: var(--f-button, monospace);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
color: $neon-cyan;
|
||||
border: 1px solid rgba($neon-cyan, 0.3);
|
||||
padding: 0.4rem 1.6rem;
|
||||
margin-bottom: 2rem;
|
||||
background: rgba($neon-cyan, 0.05);
|
||||
text-shadow: 0 0 10px rgba($neon-cyan, 0.5);
|
||||
}
|
||||
|
||||
.demo-page .invite-card h1 {
|
||||
font-family: var(--f-bold, sans-serif);
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.1;
|
||||
color: $text-bright;
|
||||
display: inline-block !important;
|
||||
margin: 0 0 0.3rem !important;
|
||||
padding: 0 !important;
|
||||
width: auto !important;
|
||||
text-align: center !important;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
.glow {
|
||||
color: $neon-cyan;
|
||||
text-shadow: 0 0 20px rgba($neon-cyan, 0.6), 0 0 40px rgba($neon-cyan, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--f-button, monospace);
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
color: $neon-magenta;
|
||||
font-weight: 700;
|
||||
margin: 0.4rem 0 1.5rem;
|
||||
text-shadow: 0 0 12px rgba($neon-magenta, 0.4);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: $text-dim;
|
||||
max-width: 46ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// ── Divider ──
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2rem 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba($neon-cyan, 0.25),
|
||||
rgba($neon-magenta, 0.25),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Detail grid ──
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid rgba($neon-cyan, 0.08);
|
||||
background: rgba($neon-cyan, 0.02);
|
||||
border-radius: 2px;
|
||||
transition: border-color 0.3s ease, background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($neon-cyan, 0.2);
|
||||
background: rgba($neon-cyan, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-family: var(--f-button, monospace);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
color: $neon-cyan;
|
||||
margin-bottom: 0.6rem;
|
||||
text-shadow: 0 0 8px rgba($neon-cyan, 0.3);
|
||||
}
|
||||
|
||||
.detail-item p {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.7;
|
||||
color: $text-dim;
|
||||
margin: 0;
|
||||
|
||||
strong {
|
||||
color: $text-bright;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $neon-cyan;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba($neon-cyan, 0.3);
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $neon-cyan;
|
||||
text-shadow: 0 0 8px rgba($neon-cyan, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Info blocks ──
|
||||
.info-block {
|
||||
text-align: left;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--f-button, monospace);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: $neon-magenta;
|
||||
margin-bottom: 0.75rem;
|
||||
text-shadow: 0 0 8px rgba($neon-magenta, 0.3);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
color: $text-dim;
|
||||
margin: 0 0 0.75rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $text-bright;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $neon-cyan;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba($neon-cyan, 0.3);
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $neon-cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: $text-dim;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Footer logo ──
|
||||
.card-footer {
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
|
||||
path[fill="#F0F0F0"] {
|
||||
fill: #f0f0f0;
|
||||
}
|
||||
|
||||
path[fill="#FF4961"] {
|
||||
fill: #ff4961;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Responsive ──
|
||||
@media only screen and (max-width: 600px) {
|
||||
.demo-page {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.invite-card {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user