Add member welcome modal and promote public login CTAs
- dashboard.php: welcome overlay modal on first visit, shows all 10 tool tips in a 2-col grid; localStorage key dbn-welcome-v1-seen persists dismiss; "Don't show again" checkbox (default checked); backdrop+Escape close without persisting - index.php: Sign in / Join free buttons added to sticky nav; access gate section moved from page bottom to immediately after hero so login CTAs are the first thing a visitor sees without scrolling; gate card titles enlarged and top-border accent added for visual weight - tools.css: .wlc-* welcome modal styles; .lt-nav__btn-signin/join nav CTA button styles; .lt-gate--prominent and .lt-gate__card-title--large Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -103,7 +103,8 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
|
||||
<a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode . '&return=' . urlencode($returnPath)) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
<a href="#access" class="lt-nav__cta"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
<a href="<?= htmlspecialchars($toolsLogin) ?>" class="lt-nav__btn-signin"><?= htmlspecialchars(dbnToolsT('sign_in', $uiLang)) ?></a>
|
||||
<a href="<?= htmlspecialchars($registerUrl) ?>" class="lt-nav__btn-join">Join free →</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -134,6 +135,52 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php if (!$isAuthed): ?>
|
||||
<section id="access" class="lt-access lt-gate lt-gate--prominent" aria-labelledby="ltGateTitle">
|
||||
<div class="lt-gate__grid">
|
||||
|
||||
<div class="lt-gate__card lt-gate__card--member">
|
||||
<p class="lt-gate__card-eyebrow">Do Better Norge</p>
|
||||
<h2 class="lt-gate__card-title lt-gate__card-title--large" id="ltGateTitle"><?= htmlspecialchars(dbnToolsT('member_card_title', $uiLang)) ?></h2>
|
||||
<p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('member_card_note', $uiLang)) ?></p>
|
||||
<a class="lt-access-btn" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
<details class="fallback-login">
|
||||
<summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary>
|
||||
<form id="passcodeForm" class="passcode-form">
|
||||
<label for="loginEmail"><?= htmlspecialchars(dbnToolsT('email', $uiLang)) ?></label>
|
||||
<input id="loginEmail" name="email" type="email" autocomplete="username email" required>
|
||||
<label for="loginPassword"><?= htmlspecialchars(dbnToolsT('password', $uiLang)) ?></label>
|
||||
<div class="passcode-row">
|
||||
<input id="loginPassword" name="password" type="password" autocomplete="current-password" required>
|
||||
<button type="submit"><?= htmlspecialchars(dbnToolsT('sign_in', $uiLang)) ?></button>
|
||||
</div>
|
||||
<p id="gateStatus" class="form-status" role="status" aria-live="polite"></p>
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="lt-gate__card lt-gate__card--register">
|
||||
<p class="lt-gate__card-eyebrow">Free membership</p>
|
||||
<h2 class="lt-gate__card-title lt-gate__card-title--large"><?= htmlspecialchars(dbnToolsT('register_card_title', $uiLang)) ?></h2>
|
||||
<p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('register_card_note', $uiLang)) ?></p>
|
||||
<a class="lt-register-btn lt-register-btn--google" href="<?= htmlspecialchars($registerUrl . '?method=google') ?>">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
|
||||
<path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z" fill="#4285F4"/>
|
||||
<path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z" fill="#34A853"/>
|
||||
<path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z" fill="#FBBC05"/>
|
||||
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58Z" fill="#EA4335"/>
|
||||
</svg>
|
||||
<?= htmlspecialchars(dbnToolsT('register_google', $uiLang)) ?>
|
||||
</a>
|
||||
<a class="lt-register-btn lt-register-btn--email" href="<?= htmlspecialchars($registerUrl) ?>">
|
||||
<?= htmlspecialchars(dbnToolsT('register_email', $uiLang)) ?>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Why-ours feature strip -->
|
||||
<section class="lt-why-strip">
|
||||
<div class="lt-why-strip__inner">
|
||||
@@ -220,52 +267,6 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php if (!$isAuthed): ?>
|
||||
<section id="access" class="lt-access lt-gate" aria-labelledby="ltGateTitle">
|
||||
<div class="lt-gate__grid">
|
||||
|
||||
<div class="lt-gate__card lt-gate__card--member">
|
||||
<p class="lt-gate__card-eyebrow">Do Better Norge</p>
|
||||
<h2 class="lt-gate__card-title" id="ltGateTitle"><?= htmlspecialchars(dbnToolsT('member_card_title', $uiLang)) ?></h2>
|
||||
<p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('member_card_note', $uiLang)) ?></p>
|
||||
<a class="lt-access-btn" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
|
||||
<details class="fallback-login">
|
||||
<summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary>
|
||||
<form id="passcodeForm" class="passcode-form">
|
||||
<label for="loginEmail"><?= htmlspecialchars(dbnToolsT('email', $uiLang)) ?></label>
|
||||
<input id="loginEmail" name="email" type="email" autocomplete="username email" required>
|
||||
<label for="loginPassword"><?= htmlspecialchars(dbnToolsT('password', $uiLang)) ?></label>
|
||||
<div class="passcode-row">
|
||||
<input id="loginPassword" name="password" type="password" autocomplete="current-password" required>
|
||||
<button type="submit"><?= htmlspecialchars(dbnToolsT('sign_in', $uiLang)) ?></button>
|
||||
</div>
|
||||
<p id="gateStatus" class="form-status" role="status" aria-live="polite"></p>
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="lt-gate__card lt-gate__card--register">
|
||||
<p class="lt-gate__card-eyebrow">Free membership</p>
|
||||
<h2 class="lt-gate__card-title"><?= htmlspecialchars(dbnToolsT('register_card_title', $uiLang)) ?></h2>
|
||||
<p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('register_card_note', $uiLang)) ?></p>
|
||||
<a class="lt-register-btn lt-register-btn--google" href="<?= htmlspecialchars($registerUrl . '?method=google') ?>">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
|
||||
<path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z" fill="#4285F4"/>
|
||||
<path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z" fill="#34A853"/>
|
||||
<path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z" fill="#FBBC05"/>
|
||||
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58Z" fill="#EA4335"/>
|
||||
</svg>
|
||||
<?= htmlspecialchars(dbnToolsT('register_google', $uiLang)) ?>
|
||||
</a>
|
||||
<a class="lt-register-btn lt-register-btn--email" href="<?= htmlspecialchars($registerUrl) ?>">
|
||||
<?= htmlspecialchars(dbnToolsT('register_email', $uiLang)) ?>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
</main>
|
||||
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
||||
<script src="assets/js/tools.js" defer></script>
|
||||
|
||||
Reference in New Issue
Block a user