common-council-searchable/index.html at main · CityofSyracuse/common-council-searchable · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Common Councilor Lookup</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <main class="wrap">
      <header class="hero">
        <h1 class="title">
          <span class="title-gold">Common Councilor</span>
          <span class="title-break">Lookup</span>
        </h1>
      </header>

      <section class="steps-panel" aria-label="How to use this tool">
        <div class="steps">
          <div class="step">
            <div class="step-num">1</div>
            <div class="step-body">
              <div class="step-title">Enter your address</div>
              <div class="step-text">
               Use your house number and street name.
                <span class="example">201 E Jefferson St</span>
              </div>
            </div>
          </div>

          <div class="step">
            <div class="step-num">2</div>
            <div class="step-body">
              <div class="step-title">Choose your address</div>
              <div class="step-text">Select the right street if more than one match appears.</div>
            </div>
          </div>

          <div class="step">
            <div class="step-num">3</div>
            <div class="step-body">
              <div class="step-title">View your councilor</div>
              <div class="step-text">See your district, ward, and Common Councilor contact.</div>
            </div>
          </div>
        </div>
      </section>

      <section class="search-card" aria-label="Search">
        <label class="sr-only" for="search-input">Enter an address</label>

        <div class="search-row">
          <div class="input-wrap">
            <input
              id="search-input"
              type="text"
              autocomplete="off"
              placeholder="Enter an address "
            />
          </div>

          <button id="search-btn" class="btn btn-search" type="button">
            Search
          </button>
        </div>
      </section>

      <section id="spotlight" class="spotlight" aria-label="Your result" hidden>
        <div class="spotlight-card">
          <div class="spotlight-head">
            <div class="spotlight-title">
              Your Common Councilor is
              <span id="spotlight-title-name" class="spotlight-title-name"></span>
            </div>
            <div class="spotlight-address" id="spotlight-address"></div>
          </div>

          <div class="spotlight-chips">
            <div class="chip">
              <span class="chip-label">District</span>
              <span class="chip-value" id="spotlight-district"></span>
            </div>
            <div class="chip">
              <span class="chip-label">Ward</span>
              <span class="chip-value" id="spotlight-ward"></span>
            </div>
          </div>

          <div class="spotlight-actions">
            <a
              id="spotlight-contact-link"
              class="btn btn-contact"
              href="https://www.syr.gov/Departments/Common-Council/Councilors"
              target="_blank"
              rel="noopener"
            >
              Contact
            </a>
          </div>
        </div>
      </section>

      <section id="results" class="results" aria-label="Search results" hidden>
        <div id="suggestion-message" class="message" hidden></div>
        <div id="no-results" class="message error" hidden></div>
        <div id="load-error" class="message error" hidden></div>

        <div class="table-wrap">
          <table class="sc-table" aria-label="Matching council districts">
            <thead>
              <tr>
                <th scope="col">Address</th>
                <th scope="col">District</th>
                <th scope="col">Ward</th>
                <th scope="col">Councilor</th>
              </tr>
            </thead>
            <tbody id="results-tbody"></tbody>
          </table>
        </div>
      </section>
    </main>

    <script src="data.js"></script>
    <script src="data2.js"></script>
    <script src="parcel_lookup_data.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>