WesternTechnologies/cali_scraper
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
kfj001 committed 2026-09-06 10:18:26 -07:00
commit 5f2db08b43
100 files changed
+16985
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

design/wireframes/anon-dashboard.html
+286
View File
@@ -0,0 +1,286 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Legislative Dashboard — Anonymous overview (wireframe)</title>
<style>
/* --- Design tokens: government-appropriate, calm, high contrast (WCAG AA) --- */
:root{
--ink:#1a1a1a; --muted:#5b5b5b; --paper:#ffffff; --surface:#f4f5f7;
--border:#d5d9df; --border-strong:#b8bfc9;
--accent:#0b5394; --accent-ink:#08345f;
--success:#1e7e34; --warn:#8a5a00; --danger:#b3261e;
--asm:#2f5aa7; --sen:#7a3b8f; /* chip tints only, never page fill */
--ring:0 0 0 2px #fff, 0 0 0 4px var(--accent);
--font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
--radius:4px; /* restrained, not rounded-everywhere */
--shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
--maxw:1160px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
font-family:var(--font-ui); color:var(--ink); background:var(--surface);
font-size:15px; line-height:1.5; text-wrap:pretty;
}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--accent-ink)}
h1,h2,h3{line-height:1.2; margin:0}
:where(a,button,[tabindex]):focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6em 1em;z-index:10}
.skip:focus{left:8px;top:8px}
/* --- Layout scaffold --- */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;
background:var(--paper);border-bottom:1px solid var(--border);padding:10px 20px}
.wordmark{font-weight:700;font-size:17px;letter-spacing:.2px;white-space:nowrap}
.wordmark small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
nav.main{display:flex;gap:18px;margin-left:4px}
nav.main a{color:var(--ink);text-decoration:none;font-weight:500}
nav.main a:hover{text-decoration:underline}
.spacer{flex:1}
.signin{background:var(--accent);color:#fff;font-weight:600;border:none;border-radius:var(--radius);
padding:8px 14px;font-size:14px;cursor:pointer;min-height:36px}
.signin:hover{background:var(--accent-ink)}
.shell{max-width:var(--maxw);margin:0 auto;padding:18px 20px 64px}
/* --- Status / freshness band --- */
.fresh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--paper);
border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow)}
.fresh .badge{font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border);
border-radius:999px;padding:2px 10px}
.fresh .ok{color:var(--success)} .fresh .pend{color:var(--warn)}
.fresh .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.dot.g{background:var(--success)} .dot.y{background:var(--warn)}
.refresh{margin-left:auto;font-size:13px;color:var(--muted)}
h1.page{font-size:22px;margin:18px 0 4px}
.lede{color:var(--muted);max-width:70ch;margin:0 0 16px}
/* --- Controls bar --- */
.controls{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
padding:10px 12px;margin-bottom:16px;box-shadow:var(--shadow)}
.controls label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.controls input[type=search]{min-width:280px;padding:7px 10px;font-size:14px;
border:1px solid var(--border-strong);border-radius:var(--radius)}
.controls select{padding:7px 8px;font-size:14px;border:1px solid var(--border-strong);
border-radius:var(--radius);background:#fff}
.chipfilter{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--border-strong);
background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--ink)}
.fchip:hover{border-color:var(--accent)}
.fchip .n{color:var(--muted);font-variant-numeric:tabular-nums}
/* --- Grid: main + aside --- */
.grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
/* --- Day group + bill rows (the Monitor list) --- */
.dayhead{display:flex;align-items:baseline;gap:10px;margin:22px 0 8px}
.dayhead h2{font-size:16px}
.dayhead .count{color:var(--muted);font-size:13px}
.rows{border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);
overflow:hidden;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:30px 88px 1fr auto;gap:12px;align-items:start;
padding:12px 14px;border-top:1px solid var(--border)}
.row:first-child{border-top:0}
.chamber{text-align:center;font-size:10px;font-weight:700;padding:2px 0;border-radius:3px;letter-spacing:.5px}
.chamber.asm{background:rgba(47,90,167,.12);color:var(--asm)}
.chamber.sen{background:rgba(122,59,143,.12);color:var(--sen)}
.blnum{font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--ink)}
.blnum a{color:inherit;text-decoration:none;display:block}
.blnum small{display:block;color:var(--muted);font-family:var(--font-ui);font-weight:500;font-size:12px}
.body .title{font-weight:600;margin:0 0 2px}
.meta{color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center}
.meta time{font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag{font-size:11px;color:var(--ink);background:var(--surface);border:1px solid var(--border);
border-radius:999px;padding:2px 8px}
.tags .n{color:var(--muted)}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.side .where{font-size:12px;color:var(--muted)}
.view{display:inline-block;font-size:13px;font-weight:600;text-decoration:none}
@media(max-width:560px){
.row{grid-template-columns:30px 1fr;gap:8px}
.chamber span{display:none}
.side{grid-column:2/3;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:8px;white-space:normal}
}
/* --- Unlock affordance (anon only) — value-stated, non-annoying, not a modal --- */
.unlock{border:1px dashed var(--border-strong);border-radius:var(--radius);
padding:14px 16px;margin:0 0 16px;background:#fbf7ef}
.unlock h3{font-size:15px;margin:0 0 4px}
.unlock p{margin:0 0 10px;color:var(--muted);font-size:14px;max-width:62ch}
.unlock .cta{background:#fff;border:1px solid var(--accent);color:var(--accent);
font-weight:600;border-radius:var(--radius);padding:7px 14px;cursor:pointer;min-height:36px}
.unlock .cta:hover{background:var(--accent);color:#fff}
/* --- Aside cards --- */
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
padding:14px;box-shadow:var(--shadow);margin-bottom:16px}
.card h3{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 10px}
.topline{display:flex;justify-content:space-between;align-items:baseline;
padding:7px 0;border-top:1px solid var(--border);font-size:14px}
.topline:first-of-type{border-top:0}
.topline .n{font-variant-numeric:tabular-nums;color:var(--muted)}
footer{max-width:var(--maxw);margin:0 auto;padding:20px;color:var(--muted);font-size:12px;
border-top:1px solid var(--border)}
.wf-note{position:fixed;right:12px;bottom:12px;background:var(--ink);color:#fff;
font-size:11px;padding:5px 9px;border-radius:3px;opacity:.9;font-family:var(--font-mono)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="top">
<div class="wordmark">CA Legislature<small>Upcoming legislation</small></div>
<nav class="main" aria-label="Primary">
<a href="#main">Dashboard</a><a href="#">Legislators</a><a href="#">Bills</a>
</nav>
<div class="spacer"></div>
<button class="signin" type="button">Sign in / register</button>
</header>
<main id="main" class="shell">
<!-- Freshness / status band -->
<section class="fresh" aria-label="Data freshness">
<span><span class="dot g"></span><b style="font-weight:600">Assembly</b> <span class="ok">updated 2026-09-05</span></span>
<span class="badge"><span class="pend">Senate</span> — pending today</span>
<span class="badge">Session 2025–2026</span>
<span class="refresh">Source: leginfo / daily files · <a href="https://leginfo.legislature.ca.gov" target="_blank" rel="noopener">source</a></span>
</section>
<h1 class="page">Upcoming legislation</h1>
<p class="lede">A chronological view of what comes up next on the California Assembly and Senate calendars — committee hearings and floor action, with the subject matter of each bill. Set your ZIP to pin your legislators and topics to the top.</p>
<!-- Unlock affordance: names the value, no dark pattern, no modal-on-arrival -->
<section class="unlock" aria-labelledby="unlock-h">
<h3 id="unlock-h">Make this dashboard work for you</h3>
<p>Enter your ZIP code to find your State Senate and Assembly members, then mark them “watched” and choose the topics you care about. Bills they’re involved in float to the top of your personal view. No account required to browse — sign in only to save it.</p>
<button class="cta" type="button">Set my ZIP →</button>
</section>
<!-- Controls bar (personalization-lite for anon) -->
<section class="controls" aria-label="Filters">
<label>Search
<input type="search" placeholder="bill title, author, keyword… ⌘K" aria-label="Search bills">
</label>
<label>Chamber
<select aria-label="Chamber"><option>Both</option><option>Assembly</option><option>Senate</option></select>
</label>
<label>Date range
<select aria-label="Date range"><option>Upcoming</option><option>This week</option><option>This month</option><option>All</option></select>
</label>
<label>Sort
<select aria-label="Sort"><option>Earliest</option><option>Latest</option><option>Relevance</option></select>
</label>
<div class="chipfilter" style="align-self:flex-end;gap:6px">
<button class="fchip" type="button">Waste <span class="n">42</span></button>
<button class="fchip" type="button">Education <span class="n">188</span></button>
<button class="fchip" type="button">Health <span class="n">214</span></button>
<button class="fchip" type="button">Housing <span class="n">97</span></button>
</div>
</section>
<div class="grid">
<!-- MAIN: the Monitor list, grouped by day -->
<div>
<section aria-label="Events on September 7, 2026">
<div class="dayhead"><h2>Mon, Sep 7, 2026</h2><span class="count">14 items · 6 committee hearings · 8 floor items</span></div>
<div class="rows">
<article class="row">
<div class="chamber asm" title="Assembly"><span class="sr">Assembly</span>A<br>AS</div>
<div class="blnum"><a href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260AB28" target="_blank" rel="noopener">AB&nbsp;28</a><small>A · Schiavo et al.</small></div>
<div class="body">
<p class="title">Waste: requires statewide recycling standards and reporting</p>
<div class="meta"><time datetime="09:30">9:30am</time> · <span>Committee of Resources and Water</span> · <span>S. Capitol, Rm 444</span></div>
<div class="tags"><span class="tag">Waste <span class="n">· 42</span></span><span class="tag">Environment</span></div>
</div>
<div class="side"><span class="where">Rm 444</span><a class="view" href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260AB28" target="_blank" rel="noopener">View →</a></div>
</article>
<article class="row">
<div class="chamber sen" title="Senate"><span class="sr">Senate</span>S<br>SE</div>
<div class="blnum"><a href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260SB795" target="_blank" rel="noopener">SB&nbsp;795</a><small>S · Riu</small></div>
<div class="body">
<p class="title">Health: establishes a community health worker program</p>
<div class="meta"><time>10:00am</time> · <span>Committee of Health</span> · <span>S. Capitol, Rm 1340</span></div>
<div class="tags"><span class="tag">Health <span class="n">· 214</span></span><span class="tag">Housing</span></div>
</div>
<div class="side"><span class="where">Rm 1340</span><a class="view" href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260SB795" target="_blank" rel="noopener">View →</a></div>
</article>
<article class="row">
<div class="chamber asm" title="Assembly"><span class="sr">Assembly</span>A<br>AS</div>
<div class="blnum"><a target="_blank" rel="noopener" href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260AB300">AB&nbsp;300</a><small>A · Chen</small></div>
<div class="body">
<p class="title">Education: modernizes K-12 career-technical standards</p>
<div class="meta"><time>1:30pm</time> · <span>Committee of Education</span> · <span>S. Capitol, Rm 1080</span></div>
<div class="tags"><span class="tag">Education <span class="n">· 188</span></span></div>
</div>
<div class="side"><span class="where">Rm 1080</span><a class="view" href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260AB300" target="_blank" rel="noopener">View →</a></div>
</article>
<article class="row">
<div class="chamber asm" title="Assembly"><span class="sr">Assembly</span>A<br>AS</div>
<div class="blnum">—<small>Floor action</small></div>
<div class="body">
<p class="title">Assembly Floor — item 14, supplement 2</p>
<div class="meta"><time>Upon Call of the Chair</time> · <span>A-SAC Assembly Chamber</span></div>
<div class="tags"><span class="tag">Fiscal</span></div>
</div>
<div class="side"><span class="where">Floor</span><a class="view" href="#" >View →</a></div>
</article>
</div>
</section>
<section aria-label="Events on September 8, 2026">
<div class="dayhead"><h2>Tue, Sep 8, 2026</h2><span class="count">31 items</span></div>
<div class="rows">
<article class="row">
<div class="chamber sen" title="Senate"><span class="sr">Senate</span>S<br>SE</div>
<div class="blnum"><a target="_blank" rel="noopener" href="https://leginfo.legislature.ca.gov/faces/billNavClient.xhtml?bill_id=202520260SB42">SB&nbsp;42</a><small>S · Nguyen</small></div>
<div class="body">
<p class="title">Housing: expands affordable housing bond authority</p>
<div class="meta"><time>9:00am</time> · <span>Committee of Housing</span> · <span>S. Capitol, Rm 1012</span></div>
<div class="tags"><span class="tag">Housing <span class="n">· 97</span></span><span class="tag">Taxation</span></div>
</div>
<div class="side"><span class="where">Rm 1012</span><a class="view" href="#" >View →</a></div>
</article>
</div>
</section>
</div>
<!-- ASIDE: secondary, opt-in teaser -->
<aside aria-label="Top topics this session">
<section class="card">
<h3>Top subject-matter this session</h3>
<div class="topline"><button type="button">Health</button><span class="n">214 bills</span></div>
<div class="topline"><button type="button">Education</button><span class="n">188 bills</span></div>
<div class="topline"><button type="button">Housing</button><span class="n">97 bills</span></div>
<div class="topline"><button type="button">Waste</button><span class="n">42 bills</span></div>
<p style="margin:10px 0 0;font-size:12px;color:var(--muted)">Click a topic to filter. <a href="#">Sign in to pin topics to your dashboard →</a></p>
</section>
<section class="card">
<h3>About this data</h3>
<p style="margin:0;font-size:13px;color:var(--muted)">Heard from the California Assembly &amp; Senate daily files via <a href="https://leginfo.legislature.ca.gov" target="_blank" rel="noopener">leginfo</a>. “Upcoming” = future-dated, not-yet-acted events. <a href="#">How is this computed? →</a></p>
</section>
</aside>
</div>
</main>
<footer>
CA Legislature · Upcoming legislation — a free public service. Senate data pending today. · <a href="#">Accessibility</a> · <a href="#">Privacy</a> · <a href="#">How “upcoming” is computed</a>
</footer>
<span class="wf-note">wireframe · 01 anonymous dashboard</span>
</body>
</html>