daveadmin/dobetternorge-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bump dashboard + pricing typography to readable desktop scale

Browse Source 
Cards, status row, account bar, and pricing tiers were rendering at
.78–.94rem with 18–20px padding — felt microscopic on 1440+ viewports.
Lift every token ~12–15% and widen card padding so the Crimson Pro /
IBM Plex editorial character reads as intended.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
davegilligan
2026-05-24 16:58:23 +02:00
parent f609da6ad7
commit 302bb44f70
3 changed files with 303 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard.php
+43 -43
View File
@@ -227,9 +227,9 @@ $langSuffix = $uiLang !== 'en' ? '?lang=' . urlencode($uiLang) : '';
/* card footer links always sit above the div onclick */
.dash-card-footer a,
.dash-card-footer button { position: relative; z-index: 1; }
.dash-card-footer { padding-top: 0.65rem; margin-top: auto; border-top: 1px solid rgba(0,0,0,.07); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dash-card-footer { padding-top: 0.85rem; margin-top: auto; border-top: 1px solid rgba(0,0,0,.07); display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
/* pill badges on acct bar */
.dash-tier-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid currentColor; flex-shrink: 0; }
.dash-tier-badge { display: inline-flex; align-items: center; font-size: .82rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid currentColor; flex-shrink: 0; }
</style>
</head>
<body data-authenticated="true" class="lt-app">
@@ -258,68 +258,68 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
?>
<!-- ── Account overview bar ─────────────────────────────────────── -->
<div style="background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.9rem 1.25rem; margin:0 0 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;">
<div style="background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1.1rem 1.5rem; margin:0 0 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;">
<div style="display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0;">
<span class="dash-tier-badge" style="background:<?= $tierLabel[1] ?>; color:<?= $tierLabel[2] ?>;"><?= htmlspecialchars($tierLabel[0]) ?></span>
<?php if (!empty($dashDetail['trial_active'])): ?>
<span class="dash-tier-badge" style="background:#fef3c7; color:#92400e;"><?= htmlspecialchars(sprintf($dl['trial_badge'], (int)$dashDetail['trial_days_remaining'])) ?></span>
<?php endif; ?>
<span style="font-size:.95rem; font-weight:700; color:#00205B; white-space:nowrap;"><?= number_format($eff) ?> <?= $uiLang === 'no' ? 'kred.' : 'credits' ?></span>
<span style="color:#9ca3af; font-size:.8rem; white-space:nowrap;"><?= (int)$dashDetail['balance'] ?> <?= $uiLang === 'no' ? 'månedlige' : 'monthly' ?> · <?= (int)$dashDetail['bonus_balance'] ?> <?= $uiLang === 'no' ? 'forhåndsbetalt' : 'prepaid' ?></span>
<span style="font-size:1.08rem; font-weight:700; color:#00205B; white-space:nowrap;"><?= number_format($eff) ?> <?= $uiLang === 'no' ? 'kred.' : 'credits' ?></span>
<span style="color:#9ca3af; font-size:.92rem; white-space:nowrap;"><?= (int)$dashDetail['balance'] ?> <?= $uiLang === 'no' ? 'månedlige' : 'monthly' ?> · <?= (int)$dashDetail['bonus_balance'] ?> <?= $uiLang === 'no' ? 'forhåndsbetalt' : 'prepaid' ?></span>
<?php if ($dashNextBilling): ?>
<span style="color:#6b7280; font-size:.8rem; white-space:nowrap;"><?= htmlspecialchars($dl[$dashNextBillingKey]) ?>: <strong style="color:#374151;"><?= htmlspecialchars($dashNextBilling) ?></strong></span>
<span style="color:#6b7280; font-size:.92rem; white-space:nowrap;"><?= htmlspecialchars($dl[$dashNextBillingKey]) ?>: <strong style="color:#374151;"><?= htmlspecialchars($dashNextBilling) ?></strong></span>
<?php endif; ?>
<?php if ($dashEmail): ?>
<span style="color:#d1d5db; font-size:.8rem; white-space:nowrap; display:none;" class="dash-email-sep">·</span>
<span style="color:#9ca3af; font-size:.8rem; white-space:nowrap;"><?= htmlspecialchars($dl['signed_in_as']) ?>: <strong style="color:#374151;"><?= htmlspecialchars($dashEmail) ?></strong></span>
<span style="color:#d1d5db; font-size:.92rem; white-space:nowrap; display:none;" class="dash-email-sep">·</span>
<span style="color:#9ca3af; font-size:.92rem; white-space:nowrap;"><?= htmlspecialchars($dl['signed_in_as']) ?>: <strong style="color:#374151;"><?= htmlspecialchars($dashEmail) ?></strong></span>
<?php endif; ?>
</div>
<div style="display:flex; align-items:center; gap:.5rem; flex-shrink:0; flex-wrap:wrap;">
<?php if ($isPaid): ?>
<a href="/billing.php" style="color:#6b7280; font-size:.8rem; text-decoration:none; border:1px solid #e5e7eb; padding:5px 12px; border-radius:7px; white-space:nowrap;"><?= htmlspecialchars($dl['manage_plan']) ?></a>
<a href="/billing.php" style="color:#6b7280; font-size:.92rem; text-decoration:none; border:1px solid #e5e7eb; padding:7px 14px; border-radius:7px; white-space:nowrap;"><?= htmlspecialchars($dl['manage_plan']) ?></a>
<?php else: ?>
<a href="/pricing.php" style="background:#00205B; color:#fff; font-size:.8rem; font-weight:700; text-decoration:none; padding:5px 12px; border-radius:7px; white-space:nowrap;"><?= htmlspecialchars($dl['upgrade_plan']) ?> →</a>
<a href="/pricing.php" style="background:#00205B; color:#fff; font-size:.92rem; font-weight:700; text-decoration:none; padding:7px 14px; border-radius:7px; white-space:nowrap;"><?= htmlspecialchars($dl['upgrade_plan']) ?> →</a>
<?php endif; ?>
<a href="/pricing.php#topup" style="background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; font-size:.8rem; font-weight:600; text-decoration:none; padding:5px 12px; border-radius:7px; white-space:nowrap;"><?= htmlspecialchars($dl['top_up']) ?> →</a>
<a href="/pricing.php#topup" style="background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; font-size:.92rem; font-weight:600; text-decoration:none; padding:7px 14px; border-radius:7px; white-space:nowrap;"><?= htmlspecialchars($dl['top_up']) ?> →</a>
</div>
</div>
<!-- ── Status cards row ─────────────────────────────────────────── -->
<section class="dashboard-status-row" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin:0 0 1.25rem;">
<div class="status-card" style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.1rem 1.25rem;">
<p style="margin:0; color:#6b7280; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('credits_available', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:1.8rem; font-weight:700; color:#00205B;"><?= number_format($eff, 0, ',', ' ') ?></p>
<p style="margin:0; color:#6b7280; font-size:.85rem;"><?= (int)$dashDetail['balance'] ?> <?= htmlspecialchars(dbnToolsT('credits_monthly', $uiLang)) ?> · <?= (int)$dashDetail['bonus_balance'] ?> <?= $uiLang === 'no' ? 'forhåndsbetalte' : 'prepaid' ?> · <a href="/billing.php"><?= htmlspecialchars(dbnToolsT('details_link', $uiLang)) ?></a></p>
<section class="dashboard-status-row" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.1rem; margin:0 0 1.25rem;">
<div class="status-card" style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.3rem 1.5rem;">
<p style="margin:0; color:#6b7280; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('credits_available', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:2rem; font-weight:700; color:#00205B;"><?= number_format($eff, 0, ',', ' ') ?></p>
<p style="margin:0; color:#6b7280; font-size:.95rem;"><?= (int)$dashDetail['balance'] ?> <?= htmlspecialchars(dbnToolsT('credits_monthly', $uiLang)) ?> · <?= (int)$dashDetail['bonus_balance'] ?> <?= $uiLang === 'no' ? 'forhåndsbetalte' : 'prepaid' ?> · <a href="/billing.php"><?= htmlspecialchars(dbnToolsT('details_link', $uiLang)) ?></a></p>
</div>
<?php if ($isPaid): ?>
<a class="status-card" href="/min-sak.php" style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.1rem 1.25rem; text-decoration:none; color:inherit;">
<p style="margin:0; color:#6b7280; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('my_case', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:1.4rem; font-weight:700; color:#00205B;"><?= htmlspecialchars(dbnToolsT('build_your_case', $uiLang)) ?> →</p>
<a class="status-card" href="/min-sak.php" style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.3rem 1.5rem; text-decoration:none; color:inherit;">
<p style="margin:0; color:#6b7280; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('my_case', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:1.55rem; font-weight:700; color:#00205B;"><?= htmlspecialchars(dbnToolsT('build_your_case', $uiLang)) ?> →</p>
<?php
$used = (int)$dashDetail['storage_used_bytes'];
$quota = (int)$dashDetail['storage_quota_bytes'];
$usedMb = $used > 0 ? round($used / 1048576, 1) : 0;
$quotaMb = $quota > 0 ? round($quota / 1048576, 0) : 0;
?>
<p style="margin:0; color:#6b7280; font-size:.85rem;"><?= $usedMb ?> MB / <?= $quotaMb ?> MB</p>
<p style="margin:0; color:#6b7280; font-size:.95rem;"><?= $usedMb ?> MB / <?= $quotaMb ?> MB</p>
</a>
<?php else: ?>
<a class="status-card" href="/pricing.php" style="background:linear-gradient(135deg,#00205B,#003478); color:#fff; border-radius:10px; padding:1.1rem 1.25rem; text-decoration:none;">
<p style="margin:0; opacity:.85; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('build_your_case', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:1.4rem; font-weight:700;"><?= htmlspecialchars(dbnToolsT('upload_documents', $uiLang)) ?> →</p>
<p style="margin:0; opacity:.85; font-size:.85rem;"><?= htmlspecialchars(dbnToolsT('upgrade_from_plus', $uiLang)) ?></p>
<a class="status-card" href="/pricing.php" style="background:linear-gradient(135deg,#00205B,#003478); color:#fff; border-radius:10px; padding:1.3rem 1.5rem; text-decoration:none;">
<p style="margin:0; opacity:.85; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('build_your_case', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:1.55rem; font-weight:700;"><?= htmlspecialchars(dbnToolsT('upload_documents', $uiLang)) ?> →</p>
<p style="margin:0; opacity:.85; font-size:.95rem;"><?= htmlspecialchars(dbnToolsT('upgrade_from_plus', $uiLang)) ?></p>
</a>
<?php endif; ?>
<a id="corpusSummaryCard" class="status-card" href="/dashboard/" style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.1rem 1.25rem; text-decoration:none; color:inherit; display:block;">
<p style="margin:0; color:#6b7280; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('my_corpus', $uiLang)) ?></p>
<a id="corpusSummaryCard" class="status-card" href="/dashboard/" style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1.3rem 1.5rem; text-decoration:none; color:inherit; display:block;">
<p style="margin:0; color:#6b7280; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;"><?= htmlspecialchars(dbnToolsT('my_corpus', $uiLang)) ?></p>
<p id="corpusDocCount" style="margin:.35rem 0 0; font-size:1.4rem; font-weight:700; color:#00205B;">—</p>
<p id="corpusUpdated" style="margin:0; color:#6b7280; font-size:.85rem;"><?= htmlspecialchars(dbnToolsT('open_corpus', $uiLang)) ?> →</p>
<p id="corpusUpdated" style="margin:0; color:#6b7280; font-size:.95rem;"><?= htmlspecialchars(dbnToolsT('open_corpus', $uiLang)) ?> →</p>
</a>
<?php if ($showSurveyCta): ?>
<a class="status-card" href="https://dobetternorge.no/survey.php" style="background:#fef3c7; color:#92400e; border-radius:10px; padding:1.1rem 1.25rem; text-decoration:none;">
<p style="margin:0; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; opacity:.85;"><?= htmlspecialchars(dbnToolsT('earn_credits_eyebrow', $uiLang)) ?></p>
<a class="status-card" href="https://dobetternorge.no/survey.php" style="background:#fef3c7; color:#92400e; border-radius:10px; padding:1.3rem 1.5rem; text-decoration:none;">
<p style="margin:0; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; opacity:.85;"><?= htmlspecialchars(dbnToolsT('earn_credits_eyebrow', $uiLang)) ?></p>
<p style="margin:.35rem 0 0; font-size:1.2rem; font-weight:700;"><?= htmlspecialchars(dbnToolsT('survey_btn', $uiLang)) ?> →</p>
<p style="margin:0; font-size:.85rem; opacity:.85;"><?= htmlspecialchars(dbnToolsT('survey_cta_text', $uiLang)) ?></p>
<p style="margin:0; font-size:.95rem; opacity:.85;"><?= htmlspecialchars(dbnToolsT('survey_cta_text', $uiLang)) ?></p>
</a>
<?php endif; ?>
</section>
@@ -337,16 +337,16 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
onclick="location.href='<?= $wbUrl ?>'"
onkeydown="if(event.key==='Enter'||event.key===' ')location.href='<?= $wbUrl ?>'">
<div style="display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem; flex-wrap:wrap;">
<span style="font-size:1.5rem; line-height:1; flex-shrink:0;" aria-hidden="true">🗂️</span>
<span style="font-size:1rem; font-weight:700; color:#111827; flex:1; min-width:0;"><?= htmlspecialchars($workbench['label']) ?></span>
<span style="font-size:1.7rem; line-height:1; flex-shrink:0;" aria-hidden="true">🗂️</span>
<span style="font-size:1.08rem; font-weight:700; color:#111827; flex:1; min-width:0;"><?= htmlspecialchars($workbench['label']) ?></span>
<code onclick="event.stopPropagation();" data-copy-slug="dbn.case_workbench_plan"
title="<?= htmlspecialchars($dl['mcp_copy_slug']) ?>"
style="font-size:.68rem; background:#f1f5f9; border:1px solid #e2e8f0; color:#64748b; padding:1px 7px; border-radius:4px; cursor:pointer; white-space:nowrap; flex-shrink:0;">dbn.case_workbench_plan</code>
style="font-size:.78rem; background:#f1f5f9; border:1px solid #e2e8f0; color:#64748b; padding:3px 9px; border-radius:4px; cursor:pointer; white-space:nowrap; flex-shrink:0;">dbn.case_workbench_plan</code>
</div>
<p style="margin:0; font-size:.84rem; color:#4b5563; line-height:1.5;"><?= htmlspecialchars($workbench['description']) ?></p>
<p style="margin:0; font-size:.98rem; color:#4b5563; line-height:1.55;"><?= htmlspecialchars($workbench['description']) ?></p>
<div class="dash-card-footer">
<a href="<?= $wbUrl ?>" onclick="event.stopPropagation();"
style="margin-left:auto; color:#00205B; font-size:.82rem; font-weight:700; text-decoration:none; white-space:nowrap;">
style="margin-left:auto; color:#00205B; font-size:.94rem; font-weight:700; text-decoration:none; white-space:nowrap;">
<?= htmlspecialchars(dbnToolsT('enter_workbench', $uiLang)) ?> →
</a>
</div>
@@ -363,28 +363,28 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
onclick="location.href='<?= $cardUrl ?>'"
onkeydown="if(event.key==='Enter'||event.key===' ')location.href='<?= $cardUrl ?>'">
<div style="display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem; flex-wrap:wrap;">
<span style="font-size:1.5rem; line-height:1; flex-shrink:0;" aria-hidden="true"><?= $emoji ?></span>
<span style="font-size:1rem; font-weight:700; color:#111827; flex:1; min-width:0;"><?= htmlspecialchars($item['label']) ?></span>
<span style="font-size:1.7rem; line-height:1; flex-shrink:0;" aria-hidden="true"><?= $emoji ?></span>
<span style="font-size:1.08rem; font-weight:700; color:#111827; flex:1; min-width:0;"><?= htmlspecialchars($item['label']) ?></span>
<?php if ($mcpSlug): ?>
<code onclick="event.stopPropagation();" data-copy-slug="<?= htmlspecialchars($mcpSlug) ?>"
title="<?= htmlspecialchars($dl['mcp_copy_slug']) ?>"
style="font-size:.68rem; background:#f1f5f9; border:1px solid #e2e8f0; color:#64748b; padding:1px 7px; border-radius:4px; cursor:pointer; white-space:nowrap; flex-shrink:0;"><?= htmlspecialchars($mcpSlug) ?></code>
style="font-size:.78rem; background:#f1f5f9; border:1px solid #e2e8f0; color:#64748b; padding:3px 9px; border-radius:4px; cursor:pointer; white-space:nowrap; flex-shrink:0;"><?= htmlspecialchars($mcpSlug) ?></code>
<?php endif; ?>
</div>
<p style="margin:0; font-size:.84rem; color:#4b5563; line-height:1.5;"><?= htmlspecialchars($item['description']) ?></p>
<p style="margin:0; font-size:.98rem; color:#4b5563; line-height:1.55;"><?= htmlspecialchars($item['description']) ?></p>
<div class="dash-card-footer">
<?php if ($docs): ?>
<a href="<?= htmlspecialchars($docs[0] . $langSuffix) ?>" onclick="event.stopPropagation();"
style="color:#00205B; font-size:.78rem; font-weight:600; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['about_link']) ?></a>
style="color:#00205B; font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['about_link']) ?></a>
<span style="color:#d1d5db;" aria-hidden="true">·</span>
<a href="<?= htmlspecialchars($docs[1] . $langSuffix) ?>" onclick="event.stopPropagation();"
style="color:#374151; font-size:.78rem; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['guide_link']) ?></a>
style="color:#374151; font-size:.88rem; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['guide_link']) ?></a>
<span style="color:#d1d5db;" aria-hidden="true">·</span>
<a href="<?= htmlspecialchars($docs[2] . $langSuffix) ?>" onclick="event.stopPropagation();"
style="color:#374151; font-size:.78rem; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['tech_link']) ?></a>
style="color:#374151; font-size:.88rem; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['tech_link']) ?></a>
<?php endif; ?>
<a href="<?= $cardUrl ?>" onclick="event.stopPropagation();"
style="margin-left:auto; color:#00205B; font-size:.82rem; font-weight:700; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['open_tool']) ?> →</a>
style="margin-left:auto; color:#00205B; font-size:.94rem; font-weight:700; text-decoration:none; white-space:nowrap;"><?= htmlspecialchars($dl['open_tool']) ?> →</a>
</div>
</div>
<?php endforeach; ?>