permit-bearings/check.html at main · ghzhost/permit-bearings · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="referrer" content="no-referrer">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' http://127.0.0.1:8787 http://localhost:8787 https://tb4ekoqybhbxbrbn447ln5ad3e0arlwx.lambda-url.us-west-2.on.aws; form-action 'self'; base-uri 'none'">
<meta name="permit-ai-service" content="http://127.0.0.1:8787,https://tb4ekoqybhbxbrbn447ln5ad3e0arlwx.lambda-url.us-west-2.on.aws">
<title>Check a project | Permit Bearings</title>
<meta name="description" content="Use structured project facts to see candidate California ADU, JADU, and SB 9 permit routes, cited sources, and questions for local staff.">
<meta property="og:title" content="Check a project | Permit Bearings">
<meta property="og:description" content="See candidate housing-permit routes from a bounded prototype rule set.">
<meta property="og:type" content="website">
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/california-design-system.css?v=20260809b">
<link rel="stylesheet" href="assets/site.css?v=20260810a">
</head>
<body data-page="project">
<div id="skip-to-content">
  <a class="skip-link" href="#mainContent">Skip to main content</a>
</div>

<header class="site-header">
  <div class="header-inner">
    <div class="site-identity">
      <a class="brand" href="index.html" aria-label="Permit Bearings home">
        Permit Bearings
      </a>
      <span class="prototype-label">Prototype</span>
    </div>
    <nav class="site-nav" aria-label="Primary">
      <a href="check.html" aria-current="page">Start</a>
      <a href="evidence.html">Sources &amp; limits</a>
      <a href="review.html">For staff</a>
    </nav>
    <details class="mobile-menu">
      <summary>Sections</summary>
      <nav class="mobile-nav" aria-label="Mobile primary">
        <a href="check.html" aria-current="page">Start</a>
        <a href="evidence.html">Sources &amp; limits</a>
        <a href="review.html">For staff</a>
      </nav>
    </details>
  </div>
</header>

<main id="mainContent">
  <header class="tool-hero">
    <div class="page-shell tool-hero-grid">
      <div class="project-hero-copy">
        <p class="eyebrow">Applicant project guide</p>
        <h1>Check a housing project</h1>
        <p class="lede" id="t-tagline">Find a candidate route. See the sources
          behind it. Take open questions to staff.</p>
        <ca-shout class="boundary-note" color="yellow" role="note">
          <p><strong>This checks a limited encoded rule set.</strong> It does not
            retrieve parcel data, verify your answers, reproduce a jurisdiction’s
            complete checklist, or decide whether the project will be approved.</p>
        </ca-shout>
      </div>
      <figure class="project-hero-visual" aria-hidden="true">
        <img src="assets/illustrations/project-check-path.webp" alt=""
          width="1152" height="768" loading="lazy" decoding="async">
      </figure>
    </div>
  </header>

  <div class="page-shell tool-main">
    <section class="tool-section" id="screen" aria-labelledby="screenHeading">
      <div class="tool-shell">
        <div class="tool-heading-row">
          <h2 id="screenHeading" tabindex="-1">About your project</h2>
          <button class="nav-button ghost ca-button ca-button-outline"
            id="langToggle" type="button">
            Español
          </button>
        </div>
        <p class="translation-scope" id="translationScope">The language choice
          applies to the applicant form and pathway results. The deadline tool
          and source records remain in English.</p>
        <p class="sample-entry" id="sampleEntry">
          <a id="sampleLink" href="check.html?sample=adu">Open a hypothetical
            detached ADU example</a>
          <span id="sampleSummary">Made-up project facts run through the
            same screening logic as any other answers.</span>
        </p>
        <ca-shout class="notice hidden" color="yellow" id="projectRehearsal">
          <strong>Source-change rehearsal applied:</strong> records linked to
          Gov. Code § 66321 will appear stale and withhold action-oriented
          explanation copy. <a href="check.html">Return to recorded source
          status</a>.
        </ca-shout>

        <ca-shout class="notice sample-notice hidden"
          id="projectSampleNotice" role="note" aria-labelledby="sampleLabel"
          tabindex="-1">
          <p><strong id="sampleLabel">Example project.</strong>
            <span id="sampleNotice">These made-up Woodland ADU facts were
              screened with the same rules as your answers. They do not
              describe a real property.</span></p>
          <p class="sample-actions"><a id="sampleResult" href="#resultsHeading" hidden>
              View this sample result</a>
            <a id="sampleClear" href="check.html">Clear the example and check
              another project</a></p>
        </ca-shout>

        <div id="aiAssist" class="ai-assist-region"></div>

        <form id="intake" novalidate>
          <fieldset class="intake-stage" data-intake-stage="place">
            <legend><span class="intake-step" id="intakeStepPlace">Step 1 of 3 · Place</span>
              <span id="t-juris">Where is the property?</span></legend>
            <ca-field>
              <input id="jurisInput" name="jurisdiction_name" list="jurisList"
                autocomplete="off" aria-labelledby="t-juris"
                aria-describedby="jurisHelp jurisStatus" required
                placeholder="Type any California city or county…">
              <datalist id="jurisList"></datalist>
              <p class="small" id="jurisHelp">Choose a suggestion, or enter the
                exact city or county name.</p>
              <p class="small" id="jurisStatus" role="status" aria-live="polite"
                aria-atomic="true"></p>
            </ca-field>
          </fieldset>

          <fieldset class="intake-stage" data-intake-stage="project">
            <legend><span class="intake-step" id="intakeStepProject">Step 2 of 3 · Project</span>
              <span id="t-project">What are you proposing?</span></legend>
            <div id="typeRadios"></div>
          </fieldset>

          <div id="projectQuestions" class="conditional-intake" hidden></div>
          <button class="ca-button" type="submit" id="t-submit" disabled>Check candidate pathways</button>

          <details class="jurisdiction-profile ca-box" id="jurisdictionProfile"
            aria-labelledby="jurisdictionProfileHeading" hidden></details>
        </form>

        <p id="resultStatus" class="visually-hidden" role="status"
          aria-live="polite" aria-atomic="true"></p>
        <div id="dataLoadError" class="hidden"></div>
        <div id="results"></div>
      </div>
    </section>

    <section class="tool-section clock-section" aria-labelledby="clockHeading">
      <h2 class="visually-hidden" id="clockHeading">Check ADU review dates</h2>
      <details class="optional-tool" id="clocks">
        <summary>
          <span class="optional-tool-label">Optional tool</span>
          <span class="optional-tool-title">Check ADU review dates</span>
          <span class="optional-tool-summary">Estimate a conditional 60-day
            date after checking a candidate route.</span>
        </summary>
        <div class="optional-tool-body">
          <p class="section-intro" id="clockHelp">Enter the date the agency received
            the application. If both statements are true, this tool will show the
            conditional 60-day date.</p>

          <div class="clock-form">
            <ca-field class="clock-date">
              <label for="recvDate">
                <span>Date the agency received the application</span>
                <input type="date" id="recvDate" aria-describedby="clockHelp clockLimit">
              </label>
            </ca-field>
            <fieldset class="clock-conditions">
              <legend>For the 60-day date, confirm both statements</legend>
              <ca-field><label><input type="checkbox" id="clockComplete">
                  The agency said the application was complete when it was
                  received.</label></ca-field>
              <ca-field><label><input type="checkbox" id="clockExisting">
                  A single-family or multifamily home already existed on the
                  lot.</label></ca-field>
            </fieldset>
            <p class="clock-limit" id="clockLimit"><strong>15-business-day
              completeness date:</strong> This prototype cannot calculate it
              without the agency’s closure calendar.</p>
            <button class="ca-button" id="clockBtn" type="button">Check dates</button>
            <p id="clockStatus" class="visually-hidden" role="status"
              aria-live="polite" aria-atomic="true"></p>
            <div id="clockResults"></div>
          </div>
        </div>
      </details>
    </section>
  </div>
</main>

<footer class="site-footer">
  <div class="footer-inner">
    <p>Decision support only. This is not legal advice or a substitute for a
      jurisdiction’s review. Applicant answers stay in this browser and are
      not stored by the public demo.</p>
    <div class="footer-links">
      <a href="evidence.html">Methods and limits</a>
      <a href="review.html">Review local rules</a>
    </div>
  </div>
</footer>

<script src="data/demo-data.js?v=20260810a" defer></script>
<script src="assets/demo.js?v=20260810a" defer></script>
<script src="assets/ai.js?v=20260810a" defer></script>
</body>
</html>