neuron-technologies/neuron-web
2
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

iMessage-style bubbles, integrated chat input, 3-column return layout

Browse Source 
Chat messages are now proper left/right bubbles. Input bar lives inside
the chat window with a top border separator. On return visit, manifesto
goes left, chat center, values/waitlist right in a full-width grid.
This commit is contained in:
Will Anderson
2026-04-28 18:58:09 -05:00
parent e5a5666dd7
commit 686ab1ee2f
1 changed files with 188 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/landing.html
+89 -26
View File
@@ -145,19 +145,25 @@
/* ── Chat ── */
.chat-container {
max-height: 420px;
overflow-y: auto;
.chat-window {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(13,13,20,0.07), 0 0 0 1px rgba(13,13,20,0.02);
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: 1.25rem;
}
.chat-container {
flex: 1;
max-height: 380px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1rem;
padding: 1rem 1rem 0.5rem;
scroll-behavior: smooth;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 1px 6px rgba(13,13,20,0.06), 0 0 0 1px rgba(13,13,20,0.02);
}
.chat-container::-webkit-scrollbar { width: 3px; }
.chat-container::-webkit-scrollbar-track { background: transparent; }
@@ -213,13 +219,13 @@
user-select: none;
}
.chat-msg-body { min-width: 0; }
.chat-msg-body { min-width: 0; flex: none; }
/* hide labels — position is enough */
.chat-msg-label { display: none; }
.chat-msg-text {
display: inline-block;
display: block;
font-size: 0.95rem;
line-height: 1.6;
padding: 0.55rem 0.85rem;
@@ -240,7 +246,17 @@
border-bottom-right-radius: 4px;
}
.chat-input-area { margin-top: 0.25rem; }
.chat-input-area {
border-top: 1px solid var(--border);
padding: 0.65rem 1rem;
}
.chat-input-area .input-row { margin-top: 0; }
.chat-input-area .text-input {
border-bottom: none;
padding: 0.25rem 0;
font-size: 0.95rem;
}
.chat-input-area .text-input:focus { border-color: transparent; }
/* ── Phase 2 greeting ── */
@@ -311,6 +327,39 @@
color: var(--text);
}
/* Phase 3 three-column layout */
.phase3-grid {
display: grid;
grid-template-columns: 1fr 420px 1fr;
gap: 2.5rem;
align-items: start;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
max-width: 1200px;
padding: 0 2rem;
box-sizing: border-box;
}
.phase3-left {
padding-top: 0.5rem;
}
.phase3-center {
/* center column */
}
.phase3-right {
padding-top: 0.5rem;
}
@media (max-width: 900px) {
.phase3-grid {
grid-template-columns: 1fr;
width: 100%;
left: auto;
transform: none;
padding: 0;
}
}
.manifesto {
font-size: 1rem;
line-height: 1.85;
@@ -435,7 +484,7 @@
gap: 0.5rem;
align-items: flex-end;
align-self: flex-start;
margin-bottom: 0.25rem;
padding: 0.25rem 1rem 0.5rem;
}
.typing-indicator.active { display: flex; }
.typing-indicator-avatar {
@@ -515,6 +564,7 @@
<!-- PHASE 2: One message from Neuron -->
<div class="phase" id="phase2">
<div class="chat-window">
<div class="chat-container" id="chat-container"></div>
<div class="typing-indicator" id="typing-indicator">
<div class="typing-indicator-avatar"><img src="/assets/neuron-icon.png" alt=""></div>
@@ -532,8 +582,8 @@
</div>
</div>
<!-- Quiet footer — shown after Neuron goes silent -->
<div id="quiet-footer" style="display:none;opacity:0;transition:opacity 900ms ease;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)">
<p style="font-size:0.85rem;color:var(--t3);margin-bottom:1rem">Leave your email and I'll find you when it's time.</p>
<div id="quiet-footer" style="display:none;opacity:0;transition:opacity 900ms ease;border-top:1px solid var(--border);padding:1rem 1rem 0.75rem">
<p style="font-size:0.85rem;color:var(--t3);margin-bottom:0.75rem">Leave your email and I'll find you when it's time.</p>
<div class="input-row">
<input class="text-input" id="quiet-email" type="email" placeholder="your@email.com" autocomplete="email">
<button class="arrow-btn" id="quiet-email-submit" aria-label="Send">
@@ -545,6 +595,7 @@
<button class="phone-skip" id="quiet-skip">no thanks</button>
</div>
</div>
</div>
<!-- PHASE 2b: Email collection -->
<div class="phase" id="phase2b">
@@ -571,8 +622,26 @@
<!-- PHASE 3: Return — 5 exchanges then manifesto + waitlist -->
<div class="phase" id="phase3">
<!-- Revealed after 5 exchanges (or immediately on confirmation) -->
<div id="phase3-content" style="display:none;opacity:0;transition:opacity 700ms ease;">
<div class="phase3-grid">
<!-- Left: manifesto -->
<div class="phase3-left">
<p class="manifesto">
The company that gave you free search built the most powerful ad-targeting machine in history. The one that promised to connect the world optimized it for outrage — because outrage drives engagement, and engagement drives revenue. The one that gave everyone a voice sold that attention to the highest bidder. These aren't accidents. They're the business model.<br><br>
Every free product is the same transaction: something useful in exchange for something you didn't know you were selling — your attention, your behavior, your future choices. The product is always "free." The price is always you.<br><br>
Now AI is doing the same thing — faster and deeper. Your queries train their models. Your thought patterns become datasets. The way you reason, what you struggle with, what you're afraid of — it's all captured. You get a useful tool. They get a map of your mind.<br><br>
Neuron is a direct rejection of that model. It runs on your machine. <strong>Your memory never leaves.</strong> I don't sell data, serve ads, or profile you. The only thing I sell is the software — and once you have it, it's yours.
</p>
</div>
<!-- Center: headline + chat -->
<div class="phase3-center">
<h2 class="phase3-headline" id="phase3-headline"></h2>
<div class="chat-window">
<div class="chat-container" id="return-chat-container"></div>
<div class="typing-indicator" id="return-typing-indicator">
<div class="typing-indicator-avatar"><img src="/assets/neuron-icon.png" alt=""></div>
@@ -589,19 +658,11 @@
</button>
</div>
</div>
</div>
</div>
<!-- Revealed after 5 exchanges (or immediately on confirmation) -->
<div id="phase3-content" style="display:none;opacity:0;transition:opacity 700ms ease;">
<div class="divider" style="margin-top:2.5rem"></div>
<p class="manifesto">
The company that gave you free search built the most powerful ad-targeting machine in history. The one that promised to connect the world optimized it for outrage — because outrage drives engagement, and engagement drives revenue. The one that gave everyone a voice sold that attention to the highest bidder. These aren't accidents. They're the business model.<br><br>
Every free product is the same transaction: something useful in exchange for something you didn't know you were selling — your attention, your behavior, your future choices. The product is always "free." The price is always you.<br><br>
Now AI is doing the same thing — faster and deeper. Your queries train their models. Your thought patterns become datasets. The way you reason, what you struggle with, what you're afraid of — it's all captured. You get a useful tool. They get a map of your mind.<br><br>
Neuron is a direct rejection of that model. It runs on your machine. <strong>Your memory never leaves.</strong> I don't sell data, serve ads, or profile you. The only thing I sell is the software — and once you have it, it's yours.
</p>
<!-- Right: values + waitlist + share -->
<div class="phase3-right">
<div class="values-section">
<p class="values-title">Local first</p>
<div class="positions-grid">
@@ -669,7 +730,9 @@
<span id="copy-label">Copy link</span>
</button>
</div>
</div><!-- /phase3-right -->
</div><!-- /phase3-grid -->
</div><!-- /phase3-content -->
</div><!-- /phase3 -->