+103 -4

system/public/bills.aesthetic.computer/index.html

reviewed

··· 134 134 margin-bottom: 0.5em; 135 135 } 136 136 137 137 + /* Primary tabs */ 138 138 + .bill-tabs { 139 139 + display: grid; 140 140 + grid-template-columns: repeat(2, minmax(0, 1fr)); 141 141 + gap: 0; 142 142 + margin-bottom: 1.2em; 143 143 + border: 1px solid var(--box-border); 144 144 + background: var(--box-bg); 145 145 + overflow: hidden; 146 146 + } 147 147 + 148 148 + .bill-tab { 149 149 + appearance: none; 150 150 + border: none; 151 151 + border-right: 1px solid var(--box-border); 152 152 + background: transparent; 153 153 + color: var(--dim); 154 154 + padding: 0.8em 0.6em; 155 155 + font-family: 'YWFT Processing', 'Berkeley Mono Variable', monospace; 156 156 + font-size: 0.95em; 157 157 + letter-spacing: 0.03em; 158 158 + cursor: pointer; 159 159 + transition: background 0.2s, color 0.2s; 160 160 + } 161 161 + .bill-tab:last-child { border-right: none; } 162 162 + .bill-tab:hover { background: var(--box-bg); color: var(--text); } 163 163 + 164 164 + .bill-tab[data-view-target="income"] { color: var(--green); } 165 165 + .bill-tab[data-view-target="needs"] { color: var(--red); } 166 166 + 167 167 + .bill-tab[data-view-target="income"].active { 168 168 + background: rgba(107, 203, 119, 0.14); 169 169 + color: var(--green); 170 170 + box-shadow: inset 0 -2px 0 0 var(--green); 171 171 + } 172 172 + 173 173 + .bill-tab[data-view-target="needs"].active { 174 174 + background: rgba(239, 68, 68, 0.14); 175 175 + color: var(--red); 176 176 + box-shadow: inset 0 -2px 0 0 var(--red); 177 177 + } 178 178 + 179 179 + .bill-section[hidden] { display: none !important; } 180 180 + 137 181 /* Give link */ 138 182 .give-bumper { 139 183 display: inline-block; ··· 393 437 .goal-split { 394 438 margin-top: 0.8em; 395 439 display: grid; 396 396 - grid-template-columns: repeat(3, minmax(0, 1fr)); 440 440 + grid-template-columns: repeat(4, minmax(0, 1fr)); 397 441 gap: 0.45em; 398 442 } 399 443 .goal-item { ··· 420 464 .goal-item-mac .goal-item-value { color: var(--pink); } 421 465 .goal-item-framework .goal-item-value { color: var(--cyan); } 422 466 .goal-item-buffer .goal-item-value { color: var(--gold); } 467 467 + .goal-item-claude .goal-item-value { color: var(--red); } 423 468 424 469 body.light-mode .goal-item { 425 470 background: rgba(255, 255, 255, 0.55); ··· 516 561 .header-row { flex-wrap: wrap; gap: 0.5em; } 517 562 .header-left { gap: 0.4em; } 518 563 .subtitle { font-size: 0.7em; } 564 564 + .bill-tab { font-size: 0.82em; padding: 0.7em 0.5em; } 519 565 .stats { grid-template-columns: 1fr 1fr; } 520 566 .stat-value { font-size: 1.4em; } 521 567 .net-flow { grid-template-columns: 1fr; gap: 0.3em; padding: 0.8em; } ··· 601 647 602 648 <hr class="section-divider"> 603 649 650 650 + <div class="bill-tabs" role="tablist" aria-label="Bills sections"> 651 651 + <button class="bill-tab" type="button" data-view-target="income" role="tab" aria-selected="false">Income</button> 652 652 + <button class="bill-tab active" type="button" data-view-target="needs" role="tab" aria-selected="true">Needs</button> 653 653 + </div> 654 654 + 655 655 + <section class="bill-section" data-view="needs"> 656 656 + 604 657 <!-- Actions --> 605 658 <h2>priority actions</h2> 606 659 607 660 <div class="goal-focus"> 608 661 <div class="goal-kicker">Current goal</div> 609 609 - <div class="goal-title">replace broken laptops and restore reliable daily development</div> 610 610 - <div class="goal-amount">$2,310 target</div> 611 611 - <p class="goal-sub">Money given right now goes directly to these replacements and setup costs.</p> 662 662 + <div class="goal-title">replace broken laptops + restore Claude Code access for reliable daily development</div> 663 663 + <div class="goal-amount">$2,410 target</div> 664 664 + <p class="goal-sub">Money given right now goes directly to laptop replacements, setup costs, and restoring Claude access.</p> 612 665 <div class="goal-split"> 613 666 <div class="goal-item goal-item-mac"> 614 667 <div class="goal-item-label">macbook-neo</div> ··· 624 677 <div class="goal-item-label">tax + setup buffer</div> 625 678 <div class="goal-item-value">$211</div> 626 679 <div class="goal-item-note">Adapters, tax, setup margin</div> 680 680 + </div> 681 681 + <div class="goal-item goal-item-claude"> 682 682 + <div class="goal-item-label">claude code max</div> 683 683 + <div class="goal-item-value">$100</div> 684 684 + <div class="goal-item-note">Overdue; access currently locked</div> 627 685 </div> 628 686 </div> 629 687 </div> ··· 660 718 <tr><td>framework-12</td><td>DIY i5-1334U, 32GB DDR5, 1TB NVMe, Linux (no Windows license)</td><td class="money">~$1300</td><td class="hide-mobile">Framework config math: $699 base + $405 (32GB) + $196 (1TB).</td></tr> 661 719 <tr style="color: var(--pink);"><td>wishlist subtotal</td><td>before tax/accessories</td><td class="money">~$2099</td><td class="hide-mobile">Funding target for replacements.</td></tr> 662 720 <tr><td>wishlist target (+10%)</td><td>tax + adapters + setup margin</td><td class="money">~$2310</td><td class="hide-mobile">10% buffer on subtotal for checkout reality.</td></tr> 721 721 + <tr><td>claude code max restore</td><td>overdue subscription (locked out)</td><td class="money">$100</td><td class="hide-mobile">Immediate tooling access restore.</td></tr> 722 722 + <tr style="color: var(--red);"><td>current goal total</td><td>wishlist target + claude access</td><td class="money">~$2410</td><td class="hide-mobile">What incoming support is currently earmarked for.</td></tr> 663 723 </tbody> 664 724 </table> 665 725 <div class="card"> ··· 679 739 <p><strong>8.</strong> Evaluate cost reduction plan — legacy-2016 + Redis + downgrades (~$107/mo savings)</p> 680 740 </div> 681 741 742 742 + </section> 743 743 + 744 744 + <section class="bill-section" data-view="income"> 745 745 + 682 746 <hr class="section-divider"> 683 747 684 748 <!-- ═══════════════════════════════════════════════════ --> ··· 753 817 </table> 754 818 </div> 755 819 </details> 820 820 + 821 821 + </section> 822 822 + 823 823 + <section class="bill-section" data-view="needs"> 756 824 757 825 <hr class="section-divider"> 758 826 ··· 904 972 </div> 905 973 </details> 906 974 975 975 + </section> 976 976 + 907 977 <div class="footer"> 908 978 <span id="footer-date">...</span> 909 979 <span><a href="https://sitemap.aesthetic.computer">sitemap</a> · <a href="https://aesthetic.computer/docs">docs</a> · <a href="https://aesthetic.computer/list">list</a></span> ··· 930 1000 document.getElementById('title').onclick = () => { 931 1001 location.href = 'https://aesthetic.computer'; 932 1002 }; 1003 1003 + 1004 1004 + // Primary bills tabs 1005 1005 + const billTabs = Array.from(document.querySelectorAll('.bill-tab')); 1006 1006 + const billSections = Array.from(document.querySelectorAll('.bill-section')); 1007 1007 + 1008 1008 + function setBillsView(view) { 1009 1009 + billTabs.forEach((tab) => { 1010 1010 + const active = tab.dataset.viewTarget === view; 1011 1011 + tab.classList.toggle('active', active); 1012 1012 + tab.setAttribute('aria-selected', active ? 'true' : 'false'); 1013 1013 + }); 1014 1014 + 1015 1015 + billSections.forEach((section) => { 1016 1016 + section.hidden = section.dataset.view !== view; 1017 1017 + }); 1018 1018 + 1019 1019 + try { localStorage.setItem('bills:view', view); } catch (_) {} 1020 1020 + } 1021 1021 + 1022 1022 + billTabs.forEach((tab) => { 1023 1023 + tab.addEventListener('click', () => { 1024 1024 + setBillsView(tab.dataset.viewTarget); 1025 1025 + }); 1026 1026 + }); 1027 1027 + 1028 1028 + const savedBillsView = (() => { 1029 1029 + try { return localStorage.getItem('bills:view'); } catch (_) { return null; } 1030 1030 + })(); 1031 1031 + setBillsView(savedBillsView === 'income' || savedBillsView === 'needs' ? savedBillsView : 'needs'); 933 1032 934 1033 // Footer date 935 1034 document.getElementById('footer-date').textContent =

+6 -4

system/public/kidlisp.com/buy.html

reviewed

··· 414 414 415 415 /* ── Tabs ── */ 416 416 .tabs { 417 417 - display: flex; 418 418 - align-items: center; 417 417 + display: grid; 418 418 + grid-template-columns: repeat(2, minmax(0, 1fr)); 419 419 + align-items: stretch; 419 420 gap: 0; 420 421 padding: 0; 421 422 background: var(--bg2); 422 423 border-bottom: 1px solid var(--border); 423 424 overflow: hidden; 425 425 + width: 100%; 424 426 } 425 427 .tab { 426 426 - flex: 1 1 50%; 428 428 + width: 100%; 427 429 min-width: 0; 428 430 padding: 18px 12px; 429 431 font-family: var(--font-fun); ··· 642 644 643 645 <div class="tabs"> 644 646 <button class="tab active" data-tab="fresh">Shop</button> 645 645 - <button class="tab" data-tab="albums">Keepers</button> 647 647 + <button class="tab" data-tab="albums">Buyers</button> 646 648 </div> 647 649 648 650 <div class="grid" id="grid">