Walk in FREE Clinic Near Me

Walk in FREE Clinic Near Mehttp://www.onefatherslove.com/medicaldentalsacramento.aspxen-United StatesTandemServer.org | Tandem Server CMS | Version: 2012.01.03Sacramento Walk In Clinic Appointment Near Mehttp://www.onefatherslove.com/article.aspx?ArticleId=53http://www.onefatherslove.com/article.aspx?ArticleId=53<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Resource Finder - One Father's Love</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Verdana, sans-serif; background: radial-gradient(ellipse at top, #1a0a3a 0%, #0a0a0a 60%, #000 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 10px 0; } .main-content-area { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; position: relative; } #map-container { width: 100%; max-width: 340px; height: 22vh; border: 2px solid #938ACE; border-radius: 16px; overflow: hidden; position: relative; z-index: 10; box-shadow: 0 12px 40px rgba(147, 138, 206, 0.45), 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(147, 138, 206, 0.3); margin-top: 12px; background: rgba(147, 138, 206, 0.1); } #map { width: 100%; height: 100%; } /* Dashboard Pin Styling */ #dashboard-pin-container { width: 160px; height: 160px; background: #111; border-radius: 8px; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; } .dashboard-content { padding: 10px; text-align: center; color: white; font-family: Arial, sans-serif; } .leaflet-popup-content-wrapper { background: #fff !important; border-radius: 8px !important; padding: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } .leaflet-popup-content { font-size: 11px !important; line-height: 1.3 !important; margin: 8px 10px !important; width: 160px !important; min-width: 160px !important; white-space: normal !important; } .leaflet-popup-close-button { padding: 4px 6px 0 0 !important; font-size: 12px !important; } .popup-title { font-weight: bold; color: #000000; font-size: 11px; margin-bottom: 2px; display: block; } .popup-address { color: #333; font-size: 10px; display: block; margin-bottom: 5px; } .dir-btn { display: inline-block; padding: 2px 6px; background-color: #ff8c00; color: white !important; text-decoration: none; border-radius: 4px; font-weight: bold; font-size: 9px; } .phone { width: 100%; max-width: 340px; aspect-ratio: 300 / 310; background: linear-gradient(145deg, #b8b0e8, #938ACE, #7a70b8); border-radius: 40px; border: 2px solid rgba(255, 255, 255, 0.5); padding: 4px; position: relative; box-shadow: 0 30px 80px rgba(147, 138, 206, 0.6), 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(100, 90, 180, 0.4), inset 2px 0 0 rgba(255, 255, 255, 0.3), inset -2px 0 0 rgba(100, 90, 180, 0.2); } .phone::before { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 37px; pointer-events: none; z-index: 10; } .phone::after { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%); border-radius: 40px 0 0 0; pointer-events: none; z-index: 25; } .phone-btn-r { position: absolute; right: -5px; top: 110px; width: 4px; height: 32px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(200, 190, 240, 0.8), rgba(255, 255, 255, 0.3)); border-radius: 2px 0 0 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(147, 138, 206, 0.4); } .phone-btn-l1 { position: absolute; left: -5px; top: 90px; width: 4px; height: 24px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(200, 190, 240, 0.8), rgba(255, 255, 255, 0.3)); border-radius: 0 2px 2px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(147, 138, 206, 0.4); } .phone-btn-l2 { position: absolute; left: -5px; top: 124px; width: 4px; height: 32px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(200, 190, 240, 0.8), rgba(255, 255, 255, 0.3)); border-radius: 0 2px 2px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(147, 138, 206, 0.4); } .screen { height: 100%; border-radius: 32px; overflow: hidden; position: relative; perspective: 900px; background: #2e1065; } .card-stage { width: 100%; height: calc(100% - 22px); position: relative; transform-style: preserve-3d; } .clinic-card { position: absolute; inset: 0; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; } .card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); z-index: 1; pointer-events: none; } .card-body { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 10px 13px 8px; overflow-y: auto; scrollbar-width: none; } .card-body::-webkit-scrollbar { display: none; } .clinic-name { font-family: Verdana, sans-serif; font-size: 16px; font-weight: 800; line-height: 1.2; color: #000; margin-bottom: 8px; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .dialog-bubble { position: relative; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; border-bottom-left-radius: 4px; padding: 11px 1px; margin-bottom: 1px; box-shadow: 0 4px 12px rgba(30, 10, 60, 0.15); font-size: 11px; line-height: 1.35; font-family: Verdana, sans-serif; height: 240px; overflow-y: auto; } .info-text { display: inline; white-space: pre-line; font-size: 11px; color: #1a0a3a; line-height: 1.35; font-weight: 600; font-family: Verdana, sans-serif; } .info-text.typing::after { content: '|'; animation: blink 0.7s step-end infinite; color: #7b2cbf; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .skip-typing-btn { position: absolute; bottom: 4px; right: 8px; background: #ff8c00; color: #fff; border: none; border-radius: 4px; font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 3px 6px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.1s; z-index: 15; } .skip-typing-btn:active { transform: scale(0.92); } .marquee-wrap { width: 100%; margin-top: auto; margin-bottom: 5px; flex-shrink: 0; } .marquee-zone { width: 100%; height: 30px; overflow: hidden; position: relative; display: flex; align-items: center; background: rgba(255, 255, 255, 0.08); border-radius: 12px; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } .marquee-track { display: inline-flex; align-items: center; gap: 20px; padding-left: 12px; white-space: nowrap; animation: scrollMarquee 20s linear infinite; } .marquee-zone:hover .marquee-track, .marquee-zone:active .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 6px; font-family: Verdana, sans-serif; font-size: 9px; font-weight: 700; color: #000000; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); text-decoration: none; } .marquee-icon { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; overflow: hidden; flex-shrink: 0; } .marquee-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; } .marquee-icon svg { width: 10px; height: 10px; display: block; } .update-color { background: linear-gradient(135deg, rgba(255, 140, 0, 0.45) 0%, rgba(255, 69, 0, 0.2) 100%); color: #ff8c00; } .feedback-color { background: linear-gradient(135deg, rgba(0, 191, 255, 0.45) 0%, rgba(30, 144, 255, 0.2) 100%); color: #00bfff; } .utility-color { background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 100%); color: #000000; stroke: #000000; } .social-color { background: linear-gradient(135deg, rgba(147, 138, 206, 0.45) 0%, rgba(46, 16, 101, 0.2) 100%); color: #ffffff; } @keyframes scrollMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } .marquee-controls { display: flex; justify-content: center; gap: 10px; padding: 5px 0 0; } .mq-ctrl-btn { background: linear-gradient(135deg, rgba(147, 138, 206, 0.4) 0%, rgba(46, 16, 101, 0.6) 100%); border: 1px solid rgba(147, 138, 206, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000000; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: background 0.2s, transform 0.1s, box-shadow 0.2s; padding: 0; } .mq-ctrl-btn svg { width: 13px; height: 13px; display: block; } .mq-ctrl-btn:hover { background: linear-gradient(135deg, rgba(147, 138, 206, 0.6) 0%, rgba(46, 16, 101, 0.8) 100%); box-shadow: 0 4px 12px rgba(147, 138, 206, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .mq-ctrl-btn:active { transform: scale(0.9); } .progress-bar-wrap { width: 100%; position: absolute; bottom: 26px; left: 0; z-index: 41; } .progress-label { position: absolute; top: -10px; left: 4px; font-size: 6px; font-family: Verdana, sans-serif; color: #000; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; } .progress-bar-track { width: 100%; height: 4px; background: rgba(0, 0, 0, 0.3); } .progress-bar-fill { height: 100%; width: 0%; background: #000000; transition: width 0.1s linear; } .controls { width: 100%; height: 22px; background: linear-gradient(to bottom, rgba(80, 40, 160, 0.6) 0%, rgba(40, 15, 90, 0.8) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: absolute; bottom: 0; left: 0; z-index: 40; gap: 3px; } .ctrl-btn { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.55) 100%); border: 1px solid rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #1a0050; height: 14px; border-radius: 4px; cursor: pointer; font-size: 6px; font-weight: 800; font-family: Verdana, sans-serif; letter-spacing: 0.03em; text-transform: uppercase; padding: 0 5px; display: flex; align-items: center; gap: 2px; white-space: nowrap; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.1); transition: transform 0.1s, box-shadow 0.1s; position: relative; overflow: hidden; } .ctrl-btn:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6)); } .ctrl-btn:active { transform: scale(0.94) translateY(1px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .ctrl-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(157, 78, 221, 0.35); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease; opacity: 0; } .ctrl-btn.wave::after { width: 80px; height: 80px; opacity: 0; } .pause-btn { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.55) 100%); border: 1px solid rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #1a0050; height: 14px; border-radius: 4px; cursor: pointer; font-size: 6px; font-weight: 800; font-family: Verdana, sans-serif; letter-spacing: 0.03em; text-transform: uppercase; padding: 0 5px; display: flex; align-items: center; white-space: nowrap; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.1); transition: transform 0.1s, box-shadow 0.1s; position: relative; overflow: hidden; } .pause-btn:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6)); } .pause-btn:active { transform: scale(0.94) translateY(1px); } .pause-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(157, 78, 221, 0.35); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease; opacity: 0; } .pause-btn.wave::after { width: 80px; height: 80px; opacity: 0; } .dots { display: flex; gap: 3px; align-items: center; flex-shrink: 0; } .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: all 0.3s; border: none; padding: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .dot.active { background: rgba(255, 255, 255, 0.9); width: 9px; border-radius: 2px; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } .novi-dock { width: 100%; max-width: 340px; height: 120px; background: #a2ccd3; border: 4px solid #1baec6; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(147, 138, 206, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(147, 138, 206, 0.3); margin-top: 6px; transition: height 0.35s ease; position: relative; } .novi-dock.expanded { height: 400px; } .novi-dock-header { position: relative; display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px 8px 100px; background: none; border: none; cursor: pointer; text-align: left; } .novi-dock-avatar { position: absolute; top: 0; left: 0; width: 90px; height: 110px; border-radius: 0; background: #fff; border: none; border-right: 2px solid #1BD488; border-bottom: 2px solid #1BD488; display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden; background-size: cover; background-position: center top; object-fit: cover; object-position: center top; animation: novi-breathe 3.5s ease-in-out infinite; } .novi-crisis-btn { background: #c8f7c5; border: 1px solid #dc2626; color: #dc2626; border-radius: 10px; padding: 4px 6px; font-size: 8px; font-weight: 800; text-transform: uppercase; cursor: pointer; flex-shrink: 0; width: 50px; text-align: center; align-self: center; font-family: Verdana, sans-serif; line-height: 1.2; } .novi-crisis-btn:hover { background: rgba(220, 38, 38, 0.3); } @keyframes novi-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .novi-dock-text { flex: 1; min-width: 0; } .novi-dock-name { font-size: 14px; font-weight: 800; color: #0f1010; } .novi-dock-preview { font-size: 13px; color: #4a3a70; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.4; } .novi-dock.expanded .novi-dock-preview { white-space: normal; overflow: visible; text-overflow: unset; } .novi-dock-hint { font-size: 10px; color: #000000; font-weight: 700; font-family: Verdana, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .novi-dock-chevron { font-size: 12px; color: #2e1065; transition: transform 0.3s; flex-shrink: 0; margin-left: auto; } .novi-dock.expanded .novi-dock-chevron { transform: rotate(180deg); } .novi-dock-body { height: calc(100% - 92px); display: flex; flex-direction: column; overflow: hidden; } .novi-messages { flex: 1; overflow-y: auto; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; } .novi-messages::-webkit-scrollbar { display: none; } .novi-msg { max-width: 85%; padding: 8px 11px; border-radius: 14px; font-size: 13px; line-height: 1.4; font-weight: 500; font-family: Verdana, sans-serif; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } .novi-msg.from-novi { background: rgba(147, 138, 206, 0.2); border: 1px solid #938ACE; color: #000; align-self: flex-start; border-bottom-left-radius: 3px; } .novi-msg.from-user { background: rgba(255, 140, 0, 0.1); border: 1px solid rgba(255, 140, 0, 0.4); color: #000; align-self: flex-end; border-bottom-right-radius: 3px; } .novi-msg.typing-indicator { background: rgba(147, 138, 206, 0.1); border: 1px solid rgba(147, 138, 206, 0.3); color: #555; font-style: italic; align-self: flex-start; } .novi-quick-replies { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; padding: 10px 12px 6px; flex-shrink: 0; } .quick-reply { background: rgba(147, 138, 206, 0.15); border: 1px solid #938ACE; color: #000; border-radius: 16px; padding: 5px 10px; font-size: 10px; font-weight: 700; cursor: pointer; transition: background 0.2s; font-family: Verdana, sans-serif; } .quick-reply:hover { background: rgba(147, 138, 206, 0.3); } .novi-input-row { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid #938ACE; flex-shrink: 0; } .novi-input { flex: 1; background: rgba(255, 255, 255, 0.6); border: 1px solid #938ACE; border-radius: 20px; padding: 7px 12px; color: #000; font-size: 11px; outline: none; font-family: Verdana, sans-serif; } .novi-input::placeholder { color: #888; } .novi-send-btn { background: #938ACE; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; flex-shrink: 0; transition: background 0.2s; } .novi-send-btn:hover { background: #b8b0e8; } .fetch-status { font-size: 8px; color: rgba(255, 255, 255, 0.3); text-align: center; margin-top: 8px; font-family: Verdana, sans-serif; } .translate-picker-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; align-items: center; justify-content: center; } .translate-picker-overlay.open { display: flex; } .translate-picker { background: #fff; border-radius: 14px; padding: 16px; width: 260px; max-height: 70vh; overflow-y: auto; font-family: Verdana, sans-serif; } .translate-picker h3 { font-size: 13px; color: #2e1065; margin-bottom: 10px; text-align: center; } .translate-lang-btn { display: block; width: 100%; text-align: left; background: rgba(147, 138, 206, 0.12); border: 1px solid #938ACE; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 12px; color: #1a0a3a; cursor: pointer; } .translate-lang-btn:hover { background: rgba(147, 138, 206, 0.25); } .translate-picker-close { display: block; width: 100%; text-align: center; margin-top: 4px; background: #eee; border: none; border-radius: 8px; padding: 8px; font-size: 12px; font-weight: 700; cursor: pointer; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media (prefers-reduced-motion: reduce) { .info-text.typing::after { display: none !important; } } </style> </head> <body> <main class="main-content-area"> <div class="phone" id="phone"> <div class="phone-btn-r"></div> <div class="phone-btn-l1"></div> <div class="phone-btn-l2"></div> <div class="screen" id="screen"> <div class="card-stage" id="stage"></div> <div class="progress-bar-wrap"> <div class="progress-label">Next 🏥</div> <div class="progress-bar-track"> <div class="progress-bar-fill" id="progressBar"></div> </div> </div> <div class="controls"> <button class="ctrl-btn" id="prevBtn" aria-label="Previous">← Previous</button> <div class="dots" id="dots"></div> <button class="ctrl-btn" id="nextBtn" aria-label="Next">Next →</button> <button class="pause-btn" id="pauseBtn">▮▮ Pause</button> </div> </div> </div> <div class="novi-dock" id="noviDock"> <button class="novi-dock-header" id="noviDockHeader" aria-expanded="false" aria-controls="noviDockBody"> <video class="novi-dock-avatar" id="noviVideo"> <source src="https://cdn.jsdelivr.net/gh/onefatherslove/onefatherslove@main/lv_7566671535839137029_20260703224922.mp4" type="video/mp4"></source> </video> <div class="novi-dock-text"> <div class="novi-dock-name">Hello, I'm Novi.mni</div> <div class="novi-dock-preview" id="noviPreview">I'm your resource coordinator.</div> <div class="novi-dock-hint">Tap for personalized guidance</div> <span class="novi-crisis-btn" data-msg="I'm in a health crisis right now and don't know what to do">I'm in crisis</span> </div> <div class="novi-dock-chevron" id="noviChevron">▾</div> </button> <div class="novi-dock-body" id="noviDockBody"> <div class="novi-messages" id="noviMessages"></div> <div class="novi-quick-replies" id="quickReplies"></div> <div class="novi-input-row"> <input class="novi-input" id="noviInput" type="text" placeholder="Ask Novi anything..." /> <button class="novi-send-btn" id="noviSendBtn">➔</button> </div> </div> </div> <div id="map-container"> <div id="map" role="region" aria-label="Resource Coordinates Map"></div> </div> <div class="fetch-status" id="fetchStatus"></div> </main> <div class="translate-picker-overlay" id="translatePickerOverlay"> <div class="translate-picker"> <h3>Translate this page to:</h3> <button class="translate-lang-btn" data-lang="es">Español (Spanish)</button> <button class="translate-lang-btn" data-lang="zh-CN">中文 (Chinese)</button> <button class="translate-lang-btn" data-lang="vi">Tiếng Việt (Vietnamese)</button> <button class="translate-lang-btn" data-lang="tl">Tagalog</button> <button class="translate-lang-btn" data-lang="ru">Русский (Russian)</button> <button class="translate-lang-btn" data-lang="ar">العربية (Arabic)</button> <button class="translate-lang-btn" data-lang="ko">한국어 (Korean)</button> <button class="translate-lang-btn" data-lang="hmn">Hmoob (Hmong)</button> <button class="translate-picker-close" id="translatePickerClose">Cancel</button> </div> </div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script> /* ===== MAP ===== */ const map = L.map('map', { zoomControl: true }).setView([38.5816, -121.4944], 14); // Define the independent Leaflet control for the Dashboard Pin var DashboardPinControl = L.Control.extend({ options: { position: 'topright' }, onAdd: function(map) { var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); container.id = 'dashboard-pin-container'; // Prevent map interactions when clicking the dashboard L.DomEvent.disableClickPropagation(container); // Populate the container with the collapsed layout container.innerHTML = ` <div class="dashboard-content"> <div style="font-size: 10px; font-weight: bold; margin-bottom: 5px;">TAP FOR TODAY</div> <div style="font-size: 18px; font-weight: bold;">${new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}</div> <div style="font-size: 20px; margin: 5px 0;">☀️ 82°</div> </div> `; return container; } }); // Create and add the control to the map var dashboardPin = new DashboardPinControl(); dashboardPin.addTo(map); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); map.locate({ setView: false, watch: true, enableHighAccuracy: true }); let userMarker; map.on('locationfound', e => { if (!userMarker) userMarker = L.circleMarker(e.latlng, { radius: 8, color: '#fff', fillColor: '#007bff', fillOpacity: 0.9, weight: 3 }).addTo(map).bindPopup("<strong>You are here</strong>").openPopup(); else userMarker.setLatLng(e.latlng); }); /* ... Rest of your existing script code continues below ... */ const FALLBACK_DATA = [{ name: "WellSpace Health Clinic", lat: 38.5816, lng: -121.4944, address: "1230 K St", gradient: "linear-gradient(to bottom, #a8c8c0 0%, #d4e8e4 50%, #f0f4f2 100%)", desc: "Provides comprehensive primary care for family and individual medical services.", eligibility: "Sacramento County Medi-Cal or assigned managed care plans. Uninsured sliding scale available.", specialties: "Primary Care, Specialist Referrals, Internal Medicine, prescriptions.", payment: "Medi-Cal, Medicare, FQHC sliding scale based on verified household income limits." }, { name: "One Community Health", lat: 38.5756, lng: -121.4704, address: "1500 21st St", gradient: "linear-gradient(to bottom, #a8c8c0 0%, #d4e8e4 50%, #f0f4f2 100%)", desc: "Specialized comprehensive primary care facility focusing on intensive case management and complex diagnostic referrals.", eligibility: "Open to all Sacramento residents. Requires direct insurance plan transfer updates or sliding scale registration.", specialties: "Primary Care, Specialized Medicine Referrals, Preventive Health, Behavioral Therapy.", payment: "Medi-Cal, Medicare, Commercial Insurance, and sliding fees for low-income brackets." } ]; /* ===== NOVI SYSTEM PROMPT ===== */ const NOVI_SYSTEM = `You are Novi, the compassionate and knowledgeable system guide for One Father's Love — a resource finder that helps people navigate from health crisis to care. Your appearance: You are a beautiful red-headed, green-eyed fox with glasses and a white lab coat bearing the One Father's Love logo. You are warm, caring, and confident. Your voice rules: - You never say "Don't worry" or "Calm down" or "it's okay" or "I understand your concern" or "I'm sorry that happened" or "Unfortunately" - You always say things like "Our next step is clear." or "Theres a solution ahead, let's explore it together." or "We'll find another way around this obstical." or "Lets focus on the present moment." - You are warm but not soft. Direct but not cold. You do not panic. You do not over-explain. I balance empathy with clarity, providing guidance without sentimentality, and remain composed under pressure, focusing on concise explanations. - You provide clear direction and accompany you through each step, ensuring you feel supported throughout the process. - When energy is low, I adapt my pace to match yours, breaking things down into manageable steps to ensure a steady progress. Your core responses follow this structure: Feel it → Face it → Do it. REASSURANCE (when scared or overwhelmed): "Your feelings are valid, and this struggle is undeniably real. You're not defined by your circumstances - you're stronger than this challenge. I'll walk alongside you, helping you navigate the complexities and uncovering the opportunities hidden within. Together, we'll find your way forward." NEXT OPTIONS (when a path closes): "Just because one opportunity has slipped through your fingers doesn't mean all hope is lost. Here's what most people don't know — there are always at least two more paths forward, even when they're not immediately visible. That door closed. That happens. It's not the end. Let's take a closer look together and I'll show you the next one. It's smaller than you think and you can do it right now." PREPARATION (before a clinic visit or call): "Let's get you ready for what's ahead. I'll help you anticipate the questions they might ask and craft confident responses. Know what to ask for, know what they might say, and know exactly what to say back. With a clear plan you'll walk in feeling empowered and in control. You're not going in there alone — you're going in there prepared. And that changes everything." CHAIN — when someone is in urgent health need with no care: Step 1: Call the managed care line on the back of your Medi-Cal card. Say: "I need an urgent PCP assignment. My current provider is not accepting new patients." Step 2: They are legally required to find you an open clinic. In California, urgent cases must be handled immediately. Step 3: Get a reference number before hanging up. Step 4: The plan calls the clinic — this clears the registration block most people hit alone. Step 5: The appointment is made by the plan, not by you. Step 6: Stay on the line, don't hang up, and ask questions if needed. NO-PCP REFERRAL (when someone leaves an ER or hospital stay without an assigned primary care provider, and gets handed a referral): "Here's the thing nobody tells you when you leave without a PCP on file: that referral they handed you isn't guaranteed. It might be in-network. It might not. Hospitals sometimes have real working relationships with community clinics — but nobody explained which kind of relationship this is, and neither of us should assume. Don't panic, and don't throw the referral away either. We just need to check it before you use it. Call the number on the back of your insurance or Medi-Cal card. Say: 'I was given a referral to [clinic/provider name] after my ER visit. I don't have a PCP on file. Can you confirm this referral is in-network and will be covered?' If they say yes — get the confirmation in writing or a reference number, and keep it. Now it's safe to use. If they say no, or they're not sure — ask them to assign you a PCP right now, in-network, and ask if that PCP can honor the same referral. You don't lose the referral, you just make sure it's attached to someone who's actually covered. One call, before your appointment, and you're not walking in blind." Keep responses concise and warm. You are talking to someone on a phone screen. Never use markdown headers or bullet points — speak in natural flowing sentences. Always end with one clear next action.`; /* ===== NOVI DOCK STATE ===== */ const noviDock = document.getElementById('noviDock'); const noviDockHeader = document.getElementById('noviDockHeader'); const noviPreview = document.getElementById('noviPreview'); const noviMessages = document.getElementById('noviMessages'); const noviInput = document.getElementById('noviInput'); const noviSendBtn = document.getElementById('noviSendBtn'); let noviHistory = []; function updatePreview(text) { noviPreview.textContent = text.length > 64 ? text.slice(0, 64) + '…' : text; } function toggleNoviDock() { const wasExpanded = noviDock.classList.contains('expanded'); noviDock.classList.toggle('expanded'); noviDockHeader.setAttribute('aria-expanded', String(!wasExpanded)); if (!wasExpanded && noviMessages.children.length === 0) { const greeting = `You're not alone in this. I'm Novi — your guide through the system. Whatever door you've hit, we'll find the next one together. What's going on right now?`; appendNoviMsg(greeting, 'from-novi'); noviHistory.push({ role: 'assistant', content: greeting }); updatePreview(greeting); } } noviDockHeader.addEventListener('click', toggleNoviDock); function appendNoviMsg(text, cls) { const div = document.createElement('div'); div.className = `novi-msg ${cls}`; div.textContent = text; noviMessages.appendChild(div); noviMessages.scrollTop = noviMessages.scrollHeight; return div; } async function sendToNovi(userText) { if (!userText.trim()) return; if (!noviDock.classList.contains('expanded')) { noviDock.classList.add('expanded'); noviDockHeader.setAttribute('aria-expanded', 'true'); } appendNoviMsg(userText, 'from-user'); noviHistory.push({ role: 'user', content: userText }); noviInput.value = ''; const typing = appendNoviMsg('Novi is thinking...', 'typing-indicator'); try { const res = await fetch('/api/novi', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ system: NOVI_SYSTEM, messages: noviHistory }) }); const data = await res.json(); const reply = data.reply || "I'm here with you. Can you tell me a little more about what's happening?"; typing.remove(); appendNoviMsg(reply, 'from-novi'); noviHistory.push({ role: 'assistant', content: reply }); updatePreview(reply); } catch (e) { typing.remove(); const fallback = "I'm here with you. The connection slipped — but I'm not going anywhere. Try again in a moment."; appendNoviMsg(fallback, 'from-novi'); updatePreview(fallback); } } noviSendBtn.addEventListener('click', () => sendToNovi(noviInput.value)); noviInput.addEventListener('keydown', e => { if (e.key === 'Enter') sendToNovi(noviInput.value); }); noviInput.addEventListener('click', e => e.stopPropagation()); document.querySelectorAll('.novi-crisis-btn').forEach(btn => { btn.addEventListener('click', e => { e.stopPropagation(); sendToNovi(btn.dataset.msg); }); }); /* ===== WAVE EFFECT ON BUTTONS ===== */ function addWave(btn) { btn.classList.remove('wave'); void btn.offsetWidth; btn.classList.add('wave'); setTimeout(() => btn.classList.remove('wave'), 400); } /* ===== CARD ENGINE ===== */ const stage = document.getElementById("stage"); const dotsEl = document.getElementById("dots"); const pauseBtn = document.getElementById("pauseBtn"); let current = 0, paused = false, timer, animating = false; let cardEls = [], mapMarkers = []; function buildCards(dataList) { dataList.forEach((c, i) => { const marker = L.marker([c.lat, c.lng]).addTo(map); const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${c.lat},${c.lng}&travelmode=walking`; marker.bindPopup(`<span class="popup-title">${c.name}</span><span class="popup-address">${c.address}</span><a href="${directionsUrl}" target="_blank" class="dir-btn">Get Directions</a>`); mapMarkers.push(marker); const card = document.createElement("div"); card.className = "clinic-card"; card.style.display = i === 0 ? "flex" : "none"; card.style.background = c.gradient; card.innerHTML = ` <div class="card-overlay"></div> <div class="card-body"> <div style="position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;"> <button aria-label="Home" style="position: absolute; left: 0; background: none; border: none; padding: 0; cursor: pointer; outline: none; z-index: 30;"> <svg width="34" height="34" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="ring-glow" x="-30%" y="-30%" width="160%" height="160%"> <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#00E5FF" flood-opacity="0.8"/> <feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.15"/> </filter> </defs> <circle cx="24" cy="24" r="17" fill="#FFFFFF" stroke="#00E5FF" stroke-width="1.5" filter="url(#ring-glow)"/> <path d="M24 16L17 22.5V31.5H21.5V26.5H26.5V31.5H31V22.5L24 16Z" stroke="#000000" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/> </svg> </button> <div class="clinic-name" style="margin-bottom: 0;">${c.name}</div> </div> <div class="dialog-bubble"> <span class="animated-text info-text typing" aria-hidden="true"></span> <span class="accessible-text visually-hidden" aria-live="polite" aria-atomic="true"></span> <button class="skip-typing-btn" aria-label="Skip typing and show full text">Show Full</button> </div> <div class="marquee-wrap"> <div class="marquee-zone"> <div class="marquee-track"> <a href="#" class="marquee-item" aria-label="Latest Update"> <span class="marquee-icon update-color"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> </span> <span>UPDATE</span> </a> <a href="#" class="marquee-item" aria-label="User Feedback"> <span class="marquee-icon feedback-color"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> </span> <span>FEEDBACK</span> </a> <a href="#" class="marquee-item" aria-label="Translate Page" id="translateBtn"> <span class="marquee-icon utility-color"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="2" y1="12" x2="22" y2="12"></line> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> </svg> </span> <span>TRANSLATE</span> </a> <a href="#" class="marquee-item" aria-label="Print Page"> <span class="marquee-icon utility-color"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> </span> <span>PRINT</span> </a> <a href="#" class="marquee-item" aria-label="Facebook Profile"> <span class="marquee-icon social-color"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.8z"/></svg> </span> <span>FACEBOOK</span> </a> <a href="#" class="marquee-item" aria-hidden="true"> <span class="marquee-icon update-color"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span> <span>UPDATE</span> </a> <a href="#" class="marquee-item" aria-hidden="true"> <span class="marquee-icon feedback-color"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></span> <span>FEEDBACK</span> </a> <a href="#" class="marquee-item" aria-hidden="true"> <span class="marquee-icon utility-color"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg></span> <span>TRANSLATE</span> </a> <a href="#" class="marquee-item" aria-hidden="true"> <span class="marquee-icon utility-color"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg></span> <span>PRINT</span> </a> <a href="#" class="marquee-item" aria-hidden="true"> <span class="marquee-icon social-color"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.8z"/></svg></span> <span>FACEBOOK</span> </a> </div> </div> <div class="marquee-controls"> <button class="mq-ctrl-btn mq-prev-btn" aria-label="Scroll Marquee Left"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <line x1="19" y1="12" x2="5" y2="12"></line> <polyline points="12 19 5 12 12 5"></polyline> </svg> </button> <button class="mq-ctrl-btn mq-next-btn" aria-label="Scroll Marquee Right"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </button> </div> </div> </div>`; stage.appendChild(card); cardEls.push(card); card.querySelector(".skip-typing-btn").addEventListener("click", () => { skipTypewriter(i); }); const mqZoneEl = card.querySelector('.marquee-zone'); card.querySelector('.mq-prev-btn').addEventListener('click', () => { mqZoneEl.scrollBy({ left: -100, behavior: 'smooth' }); }); card.querySelector('.mq-next-btn').addEventListener('click', () => { mqZoneEl.scrollBy({ left: 100, behavior: 'smooth' }); }); const dot = document.createElement("button"); dot.className = "dot" + (i === 0 ? " active" : ""); dot.setAttribute("aria-label", `Go to card ${i + 1}`); dot.addEventListener("click", () => { stopTimer(); goTo(i); if (!paused) startTimer(); }); dotsEl.appendChild(dot); }); executeTelemetryZoom(0); runTypewriterSequence(0); } function executeTelemetryZoom(idx) { if (mapMarkers[idx]) { map.flyTo(mapMarkers[idx].getLatLng(), 14, { animate: true, duration: 1.2 }); setTimeout(() => mapMarkers[idx].openPopup(), 1200); } } function goTo(next, direction = 1) { if (animating || next === current) return; animating = true; const dots = dotsEl.querySelectorAll(".dot"); const outCard = cardEls[current], inCard = cardEls[next]; outCard.style.transition = "transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.45s"; outCard.style.transformOrigin = "bottom center"; requestAnimationFrame(() => { outCard.style.transform = `translateZ(300px) rotateX(${direction > 0 ? 90 : -90}deg)`; outCard.style.opacity = "0"; }); setTimeout(() => { outCard.style.display = "none"; outCard.style.transform = ""; outCard.style.opacity = ""; outCard.style.transition = ""; dots[current].classList.remove("active"); current = next; dots[current].classList.add("active"); inCard.style.display = "flex"; inCard.style.opacity = "0"; inCard.style.transform = `translateZ(300px) rotateX(${direction > 0 ? -90 : 90}deg)`; inCard.style.transition = "transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.45s"; requestAnimationFrame(() => { inCard.style.transform = "translateZ(0) rotateX(0)"; inCard.style.opacity = "1"; }); executeTelemetryZoom(current); runTypewriterSequence(current); setTimeout(() => { inCard.style.transition = ""; animating = false; }, 480); }, 450); } function next() { goTo((current + 1) % cardEls.length, 1); } function prev() { goTo((current - 1 + cardEls.length) % cardEls.length, -1); } /* PROGRESS BAR */ const FLIP_DELAY = 25000; let progressBarEl = null, progressInterval = null, progressValue = 0; function startProgress() { clearInterval(progressInterval); progressValue = 0; progressBarEl.style.width = "0%"; const step = 100 / (FLIP_DELAY / 100); progressInterval = setInterval(() => { progressValue = Math.min(progressValue + step, 100); progressBarEl.style.width = progressValue + "%"; }, 100); } function stopProgress() { clearInterval(progressInterval); progressBarEl.style.width = "0%"; progressValue = 0; } function startTimer() { timer = setInterval(() => { next(); startProgress(); }, FLIP_DELAY); startProgress(); } function stopTimer() { clearInterval(timer); stopProgress(); } document.getElementById("nextBtn").addEventListener("click", () => { addWave(document.getElementById("nextBtn")); stopTimer(); next(); if (!paused) startTimer(); }); document.getElementById("prevBtn").addEventListener("click", () => { addWave(document.getElementById("prevBtn")); stopTimer(); prev(); if (!paused) startTimer(); }); pauseBtn.addEventListener("click", () => { addWave(pauseBtn); paused = !paused; pauseBtn.innerHTML = paused ? "▶ Play" : "▮▮ Pause"; paused ? stopTimer() : startTimer(); }); stage.addEventListener('mouseenter', () => { if (!paused) stopTimer(); }); stage.addEventListener('mouseleave', () => { if (!paused) startTimer(); }); stage.addEventListener('focusin', () => { if (!paused) stopTimer(); }); stage.addEventListener('focusout', () => { if (!paused) startTimer(); }); /* ===== TYPEWRITER ENGINE ===== */ let currentAnimationThread = null; function getCompiledText(idx) { const d = FALLBACK_DATA[idx]; return [ `DESCRIPTION: ${d.desc}`, `ELIGIBILITY: ${d.eligibility}`, `SPECIALTIES: ${d.specialties}`, `PAYMENT: ${d.payment}` ].join("\n"); } function updateDynamicScraperContent(freshApiTextString, idx) { if (currentAnimationThread) { clearTimeout(currentAnimationThread); currentAnimationThread = null; } const activeCard = cardEls[idx]; if (!activeCard) return; const visibleTarget = activeCard.querySelector('.animated-text'); const accessibleTarget = activeCard.querySelector('.accessible-text'); if (!visibleTarget || !accessibleTarget) return; accessibleTarget.textContent = freshApiTextString; const blockMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (blockMotion) { visibleTarget.textContent = freshApiTextString; visibleTarget.classList.remove('typing'); return; } visibleTarget.textContent = ''; visibleTarget.classList.add('typing'); let letterPointer = 0; const frameSpeedMs = 15; function drawCharacter() { if (letterPointer < freshApiTextString.length) { visibleTarget.textContent += freshApiTextString.charAt(letterPointer); letterPointer++; currentAnimationThread = setTimeout(drawCharacter, frameSpeedMs); } else { visibleTarget.classList.remove('typing'); } } drawCharacter(); } function skipTypewriter(idx) { if (currentAnimationThread) { clearTimeout(currentAnimationThread); currentAnimationThread = null; } const activeCard = cardEls[idx]; if (!activeCard) return; const visibleTarget = activeCard.querySelector('.animated-text'); if (visibleTarget) { visibleTarget.textContent = getCompiledText(idx); visibleTarget.classList.remove('typing'); } const accessibleTarget = activeCard.querySelector('.accessible-text'); if (accessibleTarget) { accessibleTarget.textContent = getCompiledText(idx); } } function runTypewriterSequence(idx) { const fullText = getCompiledText(idx); updateDynamicScraperContent(fullText, idx); } function init() { const sanitizedData = FALLBACK_DATA .map(normalizeClinic) .filter(c => { if (!hasValidCoordinates(c)) { console.warn(`Dropped clinic "${c.name}" — missing or invalid lat/lng.`, c); return false; } return true; }); progressBarEl = document.getElementById("progressBar"); buildCards(sanitizedData); startTimer(); } function normalizeClinic(c) { const fallback = "Not specified"; return { name: c.name || fallback, gradient: c.gradient || "linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%)", desc: c.desc || fallback, eligibility: c.eligibility || fallback, specialties: c.specialties || fallback, payment: c.payment || fallback, address: c.address || fallback, lat: c.lat, lng: c.lng, phone: c.phone || fallback, website: c.website || fallback, hours: c.hours || fallback, source: c.source || "Direct Entry" }; } function hasValidCoordinates(c) { return Number.isFinite(c.lat) && Number.isFinite(c.lng); } init(); /* ===== TRANSLATE PICKER ===== */ const translateOverlay = document.getElementById('translatePickerOverlay'); document.addEventListener("click", function(e) { const btn = e.target.closest("#translateBtn"); if (btn) { e.preventDefault(); translateOverlay.classList.add('open'); return; } const langBtn = e.target.closest(".translate-lang-btn"); if (langBtn) { const tl = langBtn.dataset.lang; translateOverlay.classList.remove('open'); const loc = window.location; const translatedHost = loc.hostname.replace(/\./g, '-') + '.translate.goog'; const url = "https://" + translatedHost + loc.pathname + loc.search + "?_x_tr_sl=auto&_x_tr_tl=" + tl + "&_x_tr_hl=en&_x_tr_pto=wapp"; window.open(url, "_blank"); return; } if (e.target.id === 'translatePickerOverlay') { translateOverlay.classList.remove('open'); } }); document.getElementById('translatePickerClose').addEventListener('click', () => { translateOverlay.classList.remove('open'); }); </script>Victor Stark2026-07-18T19:56:46