Skip to content

Match setup screens to the approved compact mockup #1389

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

Merged
sridharkalaibala merged 1 commit into from
Oct 16, 2026
Merged

Match setup screens to the approved compact mockup #1389

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
31 changes: 15 additions & 16 deletions src/install-wizard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,6 +730,7 @@
<div class="wizard-container">
<div class="wizard-header">
<img src="../builds/512-posnic.png" alt="Posnic" class="wizard-logo">
<span class="setup-brand">Posnic</span>
<p>Point of Sale that never goes down</p>
</div>

Expand Down Expand Up @@ -804,6 +805,7 @@ <h2>Let’s set up your shop</h2>
<button type="button" class="simple-option" id="chooseLocalBtn"><strong>Set up offline</strong><small>Community edition. No cloud account needed.</small></button>
</div>
<div hidden><a id="signupLink"></a><a id="choosePairLink"></a></div>
<div class="setup-footer" aria-hidden="true"></div>
</div>

<div class="form-section" id="stepCloud" style="display:none;">
Expand Down Expand Up @@ -836,28 +838,27 @@ <h3 style="margin:0 0 8px;">Choose how to continue</h3>

<!-- Quick local setup: one form, everything else defaulted -->
<div class="form-section" id="stepQuick" style="display: none;">
<h2>🏪 Set Up Your Shop</h2>
<h2>Create your offline shop</h2>
<p class="simple-intro">Your account and business data stay on this computer.</p>
<div class="form-group">
<label>Business Name <span class="required">*</span></label>
<label for="qBusinessName">Shop name</label>
<input type="text" id="qBusinessName" autocomplete="organization" placeholder="e.g. Sri Ganesh Stores">
</div>
<div class="form-group">
<label>Business Address</label>
<input type="text" id="qAddress" autocomplete="street-address" placeholder="Shop no, street, city (optional)">
</div>
<div class="form-row">
<div class="form-group">
<label>Your Email (login) <span class="required">*</span></label>
<label for="qEmail">Login email</label>
<input type="email" id="qEmail" autocomplete="username">
</div>
<div class="form-group">
<label>Password <span class="required">*</span></label>
<label for="qPassword">Password</label>
<input type="password" id="qPassword" autocomplete="new-password" minlength="8" placeholder="Minimum 8 characters">
</div>
</div>
<details id="offlineDetails"><summary>Optional shop details</summary>
<div class="form-group"><label for="qAddress">Business address</label><input type="text" id="qAddress" autocomplete="street-address" placeholder="Shop no, street, city"></div>
<div class="form-row">
<div class="form-group">
<label>Business Type</label>
<label for="qBusinessType">Business type</label>
<select id="qBusinessType">
<option value="supermarket" selected>🛒 Supermarket / Kirana Store</option>
<option value="textile">🧵 Textile / Garment Shop</option>
Expand All @@ -868,22 +869,20 @@ <h2>🏪 Set Up Your Shop</h2>
<option value="icecream">🍦 Ice Cream Parlour</option>
</select>
</div>
<div class="form-group" style="display:flex;align-items:end;">
<div class="form-group" hidden>
<label style="display:flex;align-items:center;cursor:pointer;margin:0 0 10px 0;">
<input type="checkbox" id="qDemoData" style="width:18px;height:18px;margin-right:8px;cursor:pointer;">
Load sample data
</label>
</div>
</div>
</details>
<div id="qError" style="display:none;color:#dc3545;margin:8px 0;"></div>
<p class="setup-note">Starts empty, without demo data. You can connect to cloud later in Settings.</p>
<div class="btn-container">
<button type="button" class="btn btn-secondary" id="qBackBtn">← Back</button>
<button type="button" class="btn btn-primary" id="qCreateBtn">Create My Store →</button>
<button type="button" class="btn btn-secondary" id="qBackBtn">Back</button>
<button type="button" class="btn btn-primary" id="qCreateBtn">Create shop</button>
</div>
<p style="font-size:12px;color:#94a3b8;margin-top:14px;">
Database security and daily backups are configured automatically.
You can change any of this later in Settings.
</p>
</div>

<!-- Setup progress: staged, Windows-installer style -->
Expand Down
49 changes: 48 additions & 1 deletion src/simple-setup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,57 @@ body.desktop-window .wizard-container .btn-primary { background: #086fa7 !import
#stepCloud summary { color: #176da5; cursor: pointer; }
#stepCloud details .form-group { margin-top: 16px; }
[data-simple-hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
:root[data-window-theme="dark"] {
.simple-intro, .simple-option small, .simple-check small { color: #bac6d2; }
.simple-option { border-color: #424b56; }
.simple-shop, .simple-note { background: #2b323c; color: #edf2f7; }
#stepCloud summary, .simple-link { color: #91cff8; }
}
@media (max-width: 480px) { .wizard-body { padding: 20px; } }

/* Match the approved card and footer across every step, including transitions. */
body.desktop-window[data-desktop-window="setup"] { display: flex; flex-direction: column; align-items: center; padding: 28px 20px; font: 14px/1.5 'Segoe UI', sans-serif; }
.wizard-container { margin: auto; flex-shrink: 0; }
.wizard-header { padding: 20px 28px; }
.wizard-header::after { color: var(--w-muted); }
.wizard-header .wizard-logo { display: none; }
.setup-brand { font-size: 23px; font-weight: 600; letter-spacing: .5px; color: #146da8; }
.wizard-body { padding: 30px 28px 0; }
.wizard-body .form-section { margin: 0; min-height: 0; }
.wizard-body .form-section h2 { font-size: 25px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; padding: 0; border: 0; color: var(--w-text); }
.simple-intro { color: var(--w-muted); margin-bottom: 22px; }
.desktop-window[data-desktop-window="setup"] .wizard-container button { min-height: 42px; font-size: 14px !important; font-weight: 400 !important; }
.desktop-window .wizard-container .simple-option { position: relative; padding: 18px 42px 18px 18px; }
.simple-option::after { content: '\2192'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.simple-option strong { font-weight: 600; }
.simple-option small, .simple-check small { font-size: 12px; color: var(--w-muted); }
.desktop-window .wizard-container .simple-option:first-child { border-color: #146da8 !important; }
.simple-shop, .simple-note { background: var(--w-raised); color: var(--w-text); }
.simple-shop small, #existingSyncNote, .setup-note { color: var(--w-muted); font-size: 13px; }
.desktop-window[data-desktop-window="setup"] .wizard-container .simple-link { background: transparent !important; border: 0 !important; color: #146da8 !important; padding: 7px 0; min-height: 34px; }
.wizard-container details { margin: 18px 0; }
.wizard-container summary { color: #146da8; cursor: pointer; }
.wizard-container details .form-group { margin-top: 16px; }
.wizard-container .field-hint, #cloudSignupLink { font-size: 12px; color: var(--w-muted); }
.wizard-container .form-group label { font-size: 14px; font-weight: 400; }
.wizard-container input:not([type="checkbox"]), .wizard-container select { min-height: 44px; }
.wizard-container .form-section > .btn-container, .setup-footer { margin: 28px -28px 0; padding: 17px 28px; border-top: 1px solid var(--w-border); background: var(--w-raised); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.wizard-container .btn-container .btn { flex: 0 1 auto; letter-spacing: 0; }
.wizard-container #browserWait .btn-container { margin-top: 12px; flex-wrap: wrap; }
.wizard-container #stepQuick > .form-row { grid-template-columns: 1fr; gap: 0; }
.setup-note { margin: 16px 0 0; }
#stepProgress { padding-bottom: 28px; min-height: 300px; }
#stepRecovery #recoveryCodes { color: var(--w-text); background: var(--w-raised) !important; }
#stepRecovery > p, #qProgSub, #qProgPct { color: var(--w-muted) !important; }
#qProgText { color: var(--w-text) !important; }
#simpleSetupError:empty { display: none; }
:root[data-window-theme="dark"] .setup-brand,
:root[data-window-theme="dark"] .wizard-container summary,
:root[data-window-theme="dark"] .wizard-container .simple-link { color: #91cff8 !important; }
@media (max-width: 480px) {
body.desktop-window[data-desktop-window="setup"] { padding: 16px 10px; }
.wizard-header { padding: 18px; }
.wizard-body { padding: 24px 18px 0; }
.wizard-body .form-section h2 { font-size: 22px; }
.wizard-container .form-section > .btn-container, .setup-footer { margin-left: -18px; margin-right: -18px; padding: 15px 18px; }
}
Loading