.wisely-action-box { background: #fdfaf5; border: 2px solid #5d4037; border-radius: 12px; padding: 20px; font-family: sans-serif; max-width: 450px; margin: 20px auto; }
.action-header { text-align: center; }
.input-group { display: flex; gap: 5px; margin-top: 15px; }
#user-address { flex: 1; padding: 10px; border-radius: 5px; border: 1px solid #ccc; }
#action-btn { background: #ff6f00; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; }
.rep-card { background: white; padding: 15px; border-radius: 8px; margin-top: 10px; border: 1px solid #ddd; }
.rep-name { font-weight: bold; color: #2e1a05; margin: 0; }
.rep-office { font-size: 12px; color: #777; text-transform: uppercase; margin-bottom: 8px; }
.btn-small { display: inline-block; padding: 8px 12px; border-radius: 4px; text-decoration: none; font-size: 13px; color: white; margin-right: 5px; margin-top: 5px; }
.call-btn { background: #2e7d32; }
.email-btn { background: #1565c0; }
async function findReps() {
const address = document.getElementById(‘user-address’).value;
const apiKey = ‘AIzaSyDuAZiCJe3-rmZHTZBGalEO6QUAdXDe6ow’; //
const resultDiv = document.getElementById(‘action-result’);
const listDiv = document.getElementById(‘reps-list’);
const spinner = document.getElementById(‘loading-spinner’);
if(!address) return alert(“Please enter an address.”);
spinner.style.display = ‘block’;
resultDiv.style.display = ‘none’;
listDiv.innerHTML = ”;
try {
const response = await fetch(`https://www.googleapis.com/civicinfo/v2/representatives?address=${encodeURIComponent(address)}&key=${apiKey}`);
const data = await response.json();
if(data.officials) {
// We only show the top 3 (usually Federal/State) for simplicity
data.offices.slice(0, 5).forEach(office => {
office.officialIndices.forEach(index => {
const rep = data.officials[index];
const phone = rep.phones ? rep.phones[0] : null;
const email = rep.emails ? rep.emails[0] : null;
const card = document.createElement(‘div’);
card.className = ‘rep-card’;
card.innerHTML = `
${office.name}
${rep.name} (${rep.party || ‘N/A’})
${phone ? `
📞 Call` : ”}
${email ? `
✉️ Email` : ”}
`;
listDiv.appendChild(card);
});
});
resultDiv.style.display = ‘block’;
} else {
alert(“No representatives found for this location.”);
}
} catch (error) {
console.error(error);
alert(“Error connecting to the API.”);
} finally {
spinner.style.display = ‘none’;
}
}
Communalift LLC 