1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="theme-color" content="#030913"> 7 <title>Contact | Claremont, NH Weather</title> 8 <style> 9 :root { 10 --bg: #020711; 11 --bg2: #061426; 12 --panel: rgba(4, 18, 34, .92); 13 --panel2: rgba(6, 28, 50, .92); 14 --line: #168fd8; 15 --blue: #29b6ff; 16 --cyan: #79ddff; 17 --green: #43ed72; 18 --red: #ff4055; 19 --text: #f4f9ff; 20 --muted: #9db5c9; 21 --shadow: 0 12px 40px rgba(0,0,0,.38); 22 --radius: 13px; 23 } 24 25 * { box-sizing: border-box; } 26 html { color-scheme: dark; } 27 28 body { 29 margin: 0; 30 min-height: 100vh; 31 color: var(--text); 32 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 33 background: 34 radial-gradient(circle at 50% -20%, rgba(0, 128, 230, .18), transparent 38%), 35 radial-gradient(circle at 10% 35%, rgba(0, 81, 155, .12), transparent 32%), 36 linear-gradient(150deg, #01040a 0%, #04101f 48%, #020711 100%); 37 background-attachment: fixed; 38 } 39 40 body::before { 41 content: ""; 42 position: fixed; 43 inset: 0; 44 pointer-events: none; 45 opacity: .18; 46 background-image: 47 linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), 48 linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); 49 background-size: 32px 32px; 50 mask-image: linear-gradient(to bottom, black, transparent 90%); 51 } 52 53 button, a, input, textarea { font: inherit; } 54 55 .page-shell { 56 position: relative; 57 width: min(1180px, calc(100% - 28px)); 58 margin: 0 auto; 59 padding: 18px 0 42px; 60 } 61 62 .site-header { text-align: center; padding: 0 10px 10px; } 63 64 .site-logo { 65 display: block; 66 width: min(100%, 980px); 67 height: auto; 68 margin: 0 auto; 69 } 70 71 .top-menu { 72 display: flex; 73 flex-wrap: wrap; 74 justify-content: center; 75 align-items: center; 76 gap: 7px; 77 width: min(1180px, 100%); 78 margin: 13px auto 0; 79 padding: 8px; 80 border: 1px solid rgba(41,182,255,.46); 81 border-radius: 11px; 82 background: linear-gradient(180deg, rgba(7,31,53,.91), rgba(2,13,25,.94)); 83 box-shadow: 0 0 18px rgba(18,153,255,.10), inset 0 1px 0 rgba(255,255,255,.04); 84 } 85 86 .top-menu-link { 87 display: inline-flex; 88 align-items: center; 89 justify-content: center; 90 min-height: 38px; 91 padding: 7px 13px; 92 border: 1px solid rgba(121,221,255,.34); 93 border-radius: 7px; 94 color: #eaf6ff; 95 background: rgba(8,38,64,.66); 96 text-decoration: none; 97 font-size: .78rem; 98 font-weight: 900; 99 letter-spacing: .025em; 100 text-transform: uppercase; 101 white-space: nowrap; 102 transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; 103 } 104 105 .top-menu-link:hover, 106 .top-menu-link:focus-visible, 107 .top-menu-link.active { 108 border-color: var(--green); 109 color: #ffffff; 110 outline: none; 111 background: rgba(20,78,70,.72); 112 box-shadow: 0 0 12px rgba(67,237,114,.25); 113 } 114 115 .contact-panel { 116 overflow: hidden; 117 width: min(760px, 100%); 118 margin: 24px auto 0; 119 border: 1px solid var(--line); 120 border-radius: var(--radius); 121 background: linear-gradient(155deg, var(--panel2), var(--panel)); 122 box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); 123 } 124 125 .panel-title { 126 margin: 0; 127 padding: 11px 16px; 128 text-align: center; 129 color: #f2f8ff; 130 font-size: 1rem; 131 font-weight: 900; 132 text-transform: uppercase; 133 letter-spacing: .045em; 134 background: linear-gradient(180deg, rgba(14,59,100,.82), rgba(5,28,51,.86)); 135 border-bottom: 1px solid var(--line); 136 } 137 138 .contact-body { padding: 22px; } 139 140 .intro { 141 margin: 0 0 20px; 142 color: #dce9f4; 143 line-height: 1.55; 144 text-align: center; 145 } 146 147 .form-grid { display: grid; gap: 15px; } 148 .field { display: grid; gap: 6px; } 149 .field label { color: var(--cyan); font-size: .79rem; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; } 150 151 .field input, 152 .field textarea { 153 width: 100%; 154 border: 1px solid rgba(121,221,255,.38); 155 border-radius: 8px; 156 padding: 11px 12px; 157 color: white; 158 background: rgba(0,7,15,.72); 159 outline: none; 160 transition: border-color .2s ease, box-shadow .2s ease; 161 } 162 163 .field input:focus, 164 .field textarea:focus { 165 border-color: var(--blue); 166 box-shadow: 0 0 0 3px rgba(41,182,255,.12); 167 } 168 169 .field textarea { min-height: 180px; resize: vertical; line-height: 1.45; } 170 171 .form-note { color: var(--muted); font-size: .76rem; line-height: 1.45; } 172 173 .submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; } 174 175 .submit-button, 176 .home-button { 177 display: inline-flex; 178 align-items: center; 179 justify-content: center; 180 min-height: 44px; 181 padding: 10px 18px; 182 border: 1px solid var(--blue); 183 border-radius: 8px; 184 color: white; 185 background: linear-gradient(180deg, rgba(15,79,126,.95), rgba(4,35,62,.96)); 186 text-decoration: none; 187 font-weight: 900; 188 text-transform: uppercase; 189 letter-spacing: .035em; 190 cursor: pointer; 191 } 192 193 .submit-button:hover, 194 .submit-button:focus-visible, 195 .home-button:hover, 196 .home-button:focus-visible { 197 border-color: var(--green); 198 outline: none; 199 box-shadow: 0 0 12px rgba(67,237,114,.25); 200 } 201 202 .status { 203 margin: 0 0 18px; 204 padding: 12px 14px; 205 border-radius: 8px; 206 text-align: center; 207 font-weight: 800; 208 line-height: 1.4; 209 } 210 211 .status.success { border: 1px solid rgba(67,237,114,.6); color: #dffff0; background: rgba(67,237,114,.10); } 212 .status.error { border: 1px solid rgba(255,64,85,.6); color: #ffe3e7; background: rgba(255,64,85,.10); } 213 214 .website-field { 215 position: absolute !important; 216 left: -10000px !important; 217 width: 1px !important; 218 height: 1px !important; 219 overflow: hidden !important; 220 opacity: 0 !important; 221 pointer-events: none !important; 222 } 223 224 .site-footer { margin-top: 22px; text-align: center; color: var(--muted); font-size: .75rem; } 225 226 @media (max-width: 760px) { 227 .page-shell { width: min(100% - 14px, 1180px); padding-top: 10px; } 228 .top-menu { gap: 6px; padding: 7px; } 229 .top-menu-link { min-height: 42px; padding: 8px 11px; font-size: .72rem; } 230 .contact-body { padding: 17px 14px; } 231 } 232 </style> 233</head> 234<body> 235 <main class="page-shell"> 236 <header class="site-header"> 237 <a href="index.html" aria-label="Return to Claremont NH Weather home page"> 238 <img class="site-logo" src="claremont_logo_top.png" alt="ClaremontNHWeather.com"> 239 </a> 240 241 <nav class="top-menu" aria-label="Weather detail pages"> 242 <a class="top-menu-link" href="index.html">Home</a> 243 <a class="top-menu-link" href="currentconditions8.html">Current Conditions</a> 244 <a class="top-menu-link" href="forecast8.html">Forecast</a> 245 <a class="top-menu-link" href="aqi8.html">Air Quality</a> 246 <a class="top-menu-link" href="astronomy8.html">Solar / Lunar</a> 247 <a class="top-menu-link" href="lightning8.html">Lightning</a> 248 <a class="top-menu-link" href="spaceweather8.html">Space Weather</a> 249 <a class="top-menu-link" href="severestorm8.html">Severe Storm Risk</a> 250 <a class="top-menu-link active" href="contact.php" aria-current="page">Contact</a> 251 </nav> 252 </header> 253 254 <section class="contact-panel" aria-labelledby="contactTitle"> 255 <h1 class="panel-title" id="contactTitle">Contact Claremont NH Weather</h1> 256 <div class="contact-body"> 257 258 <p class="intro">Use this form for questions, comments, weather-station feedback, or website issues. Your email address is used only so a reply can be sent to you.</p> 259 260 <form class="form-grid" action="processcontact.php" method="post" accept-charset="UTF-8"> 261 <input type="hidden" name="contact_token" value="9a6dca07354b7a1be778bb1faf991da4d38b7bf8"> 262 263 <div class="website-field" aria-hidden="true"> 264 <label for="website">Leave this field empty</label> 265 <input type="text" id="website" name="website" tabindex="-1" autocomplete="off"> 266 </div> 267 268 <div class="field"> 269 <label for="name">Your Name</label> 270 <input type="text" id="name" name="name" maxlength="100" autocomplete="name" required> 271 </div> 272 273 <div class="field"> 274 <label for="email">Your Email</label> 275 <input type="email" id="email" name="email" maxlength="180" autocomplete="email" required> 276 </div> 277 278 <div class="field"> 279 <label for="subject">Subject</label> 280 <input type="text" id="subject" name="subject" maxlength="120" required> 281 </div> 282 283 <div class="field"> 284 <label for="message">Message</label> 285 <textarea id="message" name="message" maxlength="5000" required></textarea> 286 </div> 287 288 <div class="form-note">Spam protection is built into this form. Your destination email address is not published in this page's HTML or JavaScript.</div> 289 290 <div class="submit-row"> 291 <button class="submit-button" type="submit">Send Message</button> 292 <a class="home-button" href="index.html">Return Home</a> 293 </div> 294 </form> 295 </div> 296 </section> 297 298 <footer class="site-footer">ClaremontNHWeather.com</footer> 299 </main> 300</body> 301</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.