Skip to content

prototype: Start a community wizard (ports the app's /start flow) #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abullaisi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

prototype: Start a community wizard (ports the app's /start flow) #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion prototype/SPEC.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Sources of truth (read before building):
## Hard rules (violations = rejected)

1. **No raw hex colors, no new CSS files.** If a screen truly needs a local style, max ~15 lines in a `<style>` block using ONLY the CSS custom properties, with a comment `/* candidate for promotion */`.
2. **No em dashes (—) anywhere in copy.** Use periods, commas, or colons.
2. **No em dashes anywhere in copy.** Use periods, commas, or colons.
3. **One primary button per card.** Secondary actions use `class="ghost"`.
4. All numbers that can column-align use existing classes (`.balance`, `.alloc-amt`, `.stat-value`) or inherit `tabular-nums` from them.
5. Copy tone: simple, concrete, benefits before features, 8th grade reading level. No "leverage", "unlock" is allowed ONLY as the product's literal verb (unlocking benefits), no "seamless", no "robust".
Expand Down Expand Up @@ -186,3 +186,13 @@ The Mobbin patterns are now working features, not visual dressing. New state lay
- All interactive elements work with the simulated state (connect, pay, reset).
- Zero raw hex, zero em dashes, valid HTML.
- Links between screens use relative hrefs exactly as named above.

## Screen 8: `start.html` (Start a community)

PRD creator onboarding acceptance: a connected creator can name a community, simulate the on-chain claim, and reach the live state.

- Wallet guard card: if no wallet is connected, show only a centered prompt with one primary "Connect wallet (demo)" button that calls `K.connect()` before the flow begins.
- Stepper: Welcome starts active, Brand becomes active after the welcome action, and Live becomes active after creation. Completed steps use checkmarks and each line lights when its left step is done.
- Welcome card: `.num-label` (`10 WELCOME`), "Get paid for what you publish", three benefit lines, one primary "Create my community" button, and the free-to-start signing hint.
- Brand card: `.num-label` (`11 BRAND`), a required community name input, optional description, logo hint, and one primary submit button. Submission simulates wallet confirmation, stores `k_creator_brand`, and logs "Community created" through `K.logActivity`.
- Live card (`.card.center`): `.num-label` (`12 LIVE`), the saved community name, one primary link to partner.html, and one ghost link to dashboard.html.
2 changes: 1 addition & 1 deletion prototype/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ <h1 class="headline">Single subscription.<span class="gold">Multiple benefits.</
<h2>Have premium resources?</h2>
<p class="hint">Publish Learning resources and Digital assets for members. Earn payout straight to your wallet anytime. It's free to start and takes just a few minutes.</p>
<div class="row tight">
<a class="btn ghost" href="#" title="Partner onboarding, placeholder in this prototype">Become a partner</a>
<a class="btn ghost" href="start.html">Start a community</a>
</div>
</div>

Expand Down
180 changes: 180 additions & 0 deletions prototype/start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Komunify · Start a community</title>
<link rel="icon" type="image/png" href="logo-mark.png">
<link rel="stylesheet" href="styles.css?v=5">
<style>
/* candidate for promotion */
textarea {
background: var(--color-bg-input);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-md);
padding: var(--space-3);
color: var(--color-content-primary);
font: inherit;
resize: vertical;
}
textarea:focus { outline: none; border-color: var(--color-border-accent); }
</style>
</head>
<body>
<main class="shell">
<div class="topbar">
<a class="logo" href="index.html"><img src="logo-mark.png" alt="" class="logo-mark">Komunify</a>

@coderabbitai coderabbitai Bot Jul 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Align logo markup with the shared page skeleton.

The logo link includes an inline <img...> tag, which deviates from the SPEC.md shared page skeleton that dictates the topbar markup must remain identical on every screen.

🛠️ Proposed fix 
-    <a class="logo" href="index.html"><img src="logo-mark.png" alt="" class="logo-mark">Komunify</a>
+    <a class="logo" href="index.html">Komunify</a>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a class="logo" href="index.html"><img src="logo-mark.png" alt="" class="logo-mark">Komunify</a>
<a class="logo" href="index.html">Komunify</a>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@prototype/start.html` at line 26, Update the logo anchor in the shared topbar
markup to match the SPEC.md page skeleton exactly, removing the inline img
element and preserving the consistent logo link structure used across screens.

<nav class="topbar-nav">
<a href="index.html">Connect</a>
<a href="subscribe.html">Subscribe</a>
<a href="benefits.html">Benefits</a>
<a href="dashboard.html">Dashboard</a>
<a href="traction.html">Traction</a>
<code id="topbar-wallet" class="hidden"></code>
</nav>
</div>

<div class="pay-col">
<section class="card center hidden" id="guard-card">
<h2>Connect a wallet first</h2>
<p class="hint">Connect your testnet wallet to claim a community in this demo.</p>
<button id="connect-btn" type="button">Connect wallet (demo)</button>
</section>

<div class="stepper" id="wizard-stepper">
<div class="step active" id="step-1"><span class="step-dot">1</span><span class="step-name">Welcome</span></div>
<div class="step-line" id="line-1"></div>
<div class="step todo" id="step-2"><span class="step-dot">2</span><span class="step-name">Brand</span></div>
<div class="step-line" id="line-2"></div>
<div class="step todo" id="step-3"><span class="step-dot">3</span><span class="step-name">Live</span></div>
</div>

<section class="card" id="welcome-card">
<div class="num-label"><span class="num">10</span> WELCOME</div>
<h2>Get paid for what you publish</h2>
<div class="benefit-line">
<span><strong>Earn on every read</strong><br><span class="hint">Members support your work when they read it.</span></span>
</div>
<div class="benefit-line">
<span><strong>Your work stays yours</strong><br><span class="hint">You keep control of your name, ideas, and content.</span></span>
</div>
<div class="benefit-line">
<span><strong>Cash out anytime</strong><br><span class="hint">Send your earnings to your wallet when you are ready.</span></span>
</div>
<button id="welcome-next" type="button">Create my community</button>
<p class="hint">Free to start. You will sign one quick transaction to claim your community on-chain.</p>
</section>

<section class="card hidden" id="brand-card">
<div class="num-label"><span class="num">11</span> BRAND</div>
<h2>Name your community</h2>
<form id="brand-form">
<label>Community name
<input id="community-name" type="text" required autocomplete="organization">
</label>
<label>Description
<textarea id="community-description" rows="4"></textarea>
</label>
<p class="hint">Logo optional, image under 512 KB.</p>
<div><button id="create-btn" type="submit">Create my community</button></div>
</form>
</section>

<section class="card center hidden" id="live-card">
<div class="num-label"><span class="num">12</span> LIVE</div>
<h2>You are live</h2>
<p><span id="live-name">Your community</span> is now on komunify.</p>

@coderabbitai coderabbitai Bot Jul 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Capitalize the brand name.

Ensure the brand name is consistently capitalized.

📝 Proposed fix 
-      <p><span id="live-name">Your community</span> is now on komunify.</p>
+      <p><span id="live-name">Your community</span> is now on Komunify.</p>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p><span id="live-name">Your community</span> is now on komunify.</p>
<p><span id="live-name">Your community</span> is now on Komunify.</p>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@prototype/start.html` at line 86, Update the brand text in the paragraph
containing the live-name span to use the consistently capitalized “Komunify”
form instead of “komunify”.

<a class="btn" href="partner.html">View your public page →</a>
<a class="btn ghost" href="dashboard.html">Go to dashboard →</a>
</section>
</div>

<footer>
<a href="#" id="reset-proto">Reset demo</a>
</footer>
Comment on lines +92 to +94

@coderabbitai coderabbitai Bot Jul 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Restore missing footer text to match the shared skeleton.

The footer is missing the standard text prefix defined in the SPEC.md shared page skeleton. This omission breaks the expected global visual design contract.

🛠️ Proposed fix 
   <footer>
+    <span class="label">Prototype</span> · Komunify on Stellar testnet ·
     <a href="#" id="reset-proto">Reset demo</a>
   </footer>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<footer>
<a href="#" id="reset-proto">Reset demo</a>
</footer>
<footer>
<span class="label">Prototype</span> · Komunify on Stellar testnet ·
<a href="#" id="reset-proto">Reset demo</a>
</footer>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@prototype/start.html` around lines 92 - 94, Update the footer containing the
reset-proto link to restore the standard text prefix specified by the shared
page skeleton in SPEC.md, while preserving the existing “Reset demo” link.

</main>

<script src="app.js?v=5"></script>
<script>
(function () {
var guardCard = document.getElementById("guard-card");
var stepper = document.getElementById("wizard-stepper");
var cards = [
document.getElementById("welcome-card"),
document.getElementById("brand-card"),
document.getElementById("live-card")
];

function setStep(current) {
[1, 2, 3].forEach(function (num) {
var state = num < current ? "done" : (num === current ? "active" : "todo");
var step = document.getElementById("step-" + num);
step.className = "step " + state;
step.querySelector(".step-dot").textContent = state === "done" ? "✓" : num;
});
document.getElementById("line-1").className = "step-line" + (current > 1 ? " lit" : "");
document.getElementById("line-2").className = "step-line" + (current > 2 ? " lit" : "");
}

function showStep(current) {
cards.forEach(function (card, index) {
card.classList.toggle("hidden", index !== current - 1);
});
setStep(current);
}

document.getElementById("reset-proto").addEventListener("click", function (e) {
e.preventDefault();
K.reset();
location.href = "index.html";
});

document.getElementById("connect-btn").addEventListener("click", function () {
K.connect();
location.reload();
});

if (!K.wallet) {
guardCard.classList.remove("hidden");
stepper.classList.add("hidden");
cards.forEach(function (card) { card.classList.add("hidden"); });
return;
}

document.getElementById("welcome-next").addEventListener("click", function () {
showStep(2);
document.getElementById("community-name").focus();
});

document.getElementById("brand-form").addEventListener("submit", function (e) {
e.preventDefault();
var input = document.getElementById("community-name");
var name = input.value.trim();
if (!name) {
input.setCustomValidity("Enter a community name.");
input.reportValidity();
return;
}
input.setCustomValidity("");

var createBtn = document.getElementById("create-btn");
createBtn.disabled = true;
createBtn.textContent = "Check your wallet…";

window.setTimeout(function () {
localStorage.setItem("k_creator_brand", name);
K.logActivity("Community created", name);
document.getElementById("live-name").textContent = localStorage.getItem("k_creator_brand") || "Your community";
showStep(3);
}, 1200);
});

document.getElementById("community-name").addEventListener("input", function () {
this.setCustomValidity("");
});

showStep(1);
})();
</script>
</body>
</html>
Loading