Embed

<div id="bhcoc-dashboard">
<style>
  #bhcoc-dashboard {
    --copper: #7A3E1D;
    --copper-dark: #56290F;
    --copper-soft: rgba(122, 62, 29, 0.08);
    --gold: #C9A15A;
    --paper: #FAF7F2;
    --card: #FFFFFF;
    --ink: #2B2420;
    --ink-muted: #8A7F73;
    --line: #ECE4D8;
    --live: #D14B3B;

    box-sizing: border-box;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 640px;
    margin: 0 auto;
    padding: max(28px, env(safe-area-inset-top)) 18px calc(56px + env(safe-area-inset-bottom));
  }
  #bhcoc-dashboard *, #bhcoc-dashboard *::before, #bhcoc-dashboard *::after {
    box-sizing: border-box;
  }
  #bhcoc-dashboard .bhcoc-fade {
    opacity: 0;
    transform: translateY(10px);
    animation: bhcoc-fade-in 0.5s ease forwards;
  }
  @keyframes bhcoc-fade-in {
    to { opacity: 1; transform: translateY(0); }
  }

  #bhcoc-dashboard .bhcoc-header {
    text-align: center;
    margin-bottom: 26px;
    animation-delay: 0s;
  }
  #bhcoc-dashboard .bhcoc-logo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    box-shadow: 0 8px 20px -8px rgba(43, 36, 32, 0.35);
    margin-bottom: 14px;
  }
  #bhcoc-dashboard .bhcoc-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 0;
    color: var(--ink);
  }
  #bhcoc-dashboard .bhcoc-tagline {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 5px 0 0;
    font-style: italic;
  }

  #bhcoc-dashboard .bhcoc-live {
    background: linear-gradient(135deg, var(--copper) 0%, var(--copper-dark) 100%);
    border-radius: 18px;
    padding: 22px 20px;
    color: #fff;
    text-align: center;
    box-shadow: 0 14px 30px -14px rgba(86, 41, 15, 0.55);
    margin-bottom: 22px;
    animation-delay: 0.05s;
  }
  #bhcoc-dashboard .bhcoc-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
  }
  #bhcoc-dashboard .bhcoc-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-muted);
    display: inline-block;
  }
  #bhcoc-dashboard .bhcoc-live-dot.is-live {
    background: #ff6b57;
    box-shadow: 0 0 0 0 rgba(255, 107, 87, 0.6);
    animation: bhcoc-pulse 1.6s ease-out infinite;
  }
  @keyframes bhcoc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 87, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 107, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 87, 0); }
  }
  #bhcoc-dashboard .bhcoc-live-headline {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
  }
  #bhcoc-dashboard .bhcoc-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--copper-dark);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.15s ease;
  }
  #bhcoc-dashboard .bhcoc-live-btn.bhcoc-outline {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  #bhcoc-dashboard .bhcoc-live-btn:active {
    transform: scale(0.96);
  }

  #bhcoc-dashboard .bhcoc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-bottom: 24px;
    animation-delay: 0.1s;
  }
  #bhcoc-dashboard .bhcoc-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(43, 36, 32, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  #bhcoc-dashboard .bhcoc-tile:active {
    transform: scale(0.96);
    box-shadow: 0 1px 2px rgba(43, 36, 32, 0.04);
  }
  #bhcoc-dashboard .bhcoc-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--copper-soft);
    color: var(--copper);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
  }
  #bhcoc-dashboard .bhcoc-tile-icon svg {
    width: 21px;
    height: 21px;
  }
  #bhcoc-dashboard .bhcoc-tile-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
  }

  #bhcoc-dashboard .bhcoc-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 18px 6px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(43, 36, 32, 0.04);
    animation-delay: 0.15s;
  }
  #bhcoc-dashboard .bhcoc-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 0 0 8px;
    color: var(--copper-dark);
  }
  #bhcoc-dashboard .bhcoc-card-title svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }
  #bhcoc-dashboard .bhcoc-announce-item {
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }
  #bhcoc-dashboard .bhcoc-announce-item:first-child {
    border-top: none;
  }
  #bhcoc-dashboard .bhcoc-empty,
  #bhcoc-dashboard .bhcoc-skeleton-text {
    font-size: 13.5px;
    color: var(--ink-muted);
    font-style: italic;
    padding: 12px 0;
  }

  #bhcoc-dashboard .bhcoc-footer {
    text-align: center;
    animation-delay: 0.2s;
  }
  #bhcoc-dashboard .bhcoc-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--copper);
    color: var(--copper);
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.1px;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  #bhcoc-dashboard .bhcoc-browse-btn:active {
    transform: scale(0.96);
    background: var(--copper-soft);
  }
  #bhcoc-dashboard .bhcoc-browse-btn svg {
    width: 15px;
    height: 15px;
  }
</style>

  <header class="bhcoc-header bhcoc-fade">
    <img class="bhcoc-logo" src="https://marvelous-halva-940fc1.netlify.app/icons/icon-192.png" alt="Bush Hills Church of Christ">
    <h1 class="bhcoc-title">Bush Hills Church of Christ</h1>
    <p class="bhcoc-tagline">The Friendliest Church on this side of Heaven</p>
  </header>

  <section id="bhcoc-dash-live" class="bhcoc-live bhcoc-fade">
    <div class="bhcoc-live-badge"><span class="bhcoc-live-dot"></span><span class="bhcoc-live-status-text">Checking</span></div>
    <div class="bhcoc-live-headline">Checking live status…</div>
  </section>

  <nav class="bhcoc-grid bhcoc-fade">
    <a href="/notes" class="bhcoc-tile">
      <span class="bhcoc-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5V4.5A1.5 1.5 0 0 1 5.5 3H16l4 4v12.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19.5z"/><path d="M16 3v4h4"/><path d="M8 12h8M8 16h5"/></svg></span>
      <span class="bhcoc-tile-label">Sermon Notes</span>
    </a>
    <a href="/donate" class="bhcoc-tile">
      <span class="bhcoc-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></span>
      <span class="bhcoc-tile-label">Give</span>
    </a>
    <a href="/about/our-message" class="bhcoc-tile">
      <span class="bhcoc-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5.3S4 4 7.5 4 12 5.3 12 5.3v14.4S10 18.4 7.5 18.4 2 19.7 2 19.7V5.3z"/><path d="M22 5.3S20 4 16.5 4 12 5.3 12 5.3v14.4s2-1.3 4.5-1.3 5.5 1.3 5.5 1.3V5.3z"/></svg></span>
      <span class="bhcoc-tile-label">Our Message</span>
    </a>
    <a href="/about/resources" class="bhcoc-tile">
      <span class="bhcoc-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5V5a1 1 0 0 1 1-1h3v16"/><path d="M9 4h6v16"/><path d="M15 4.3l4 .9v14.8l-4-.9"/></svg></span>
      <span class="bhcoc-tile-label">Resources</span>
    </a>
    <a href="/about/leadership" class="bhcoc-tile">
      <span class="bhcoc-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.8 19c0-3 2.8-5.2 6.2-5.2S15.2 16 15.2 19"/><circle cx="17" cy="8.6" r="2.4"/><path d="M15.6 13.9c2.5.4 4.2 2.3 4.2 5.1"/></svg></span>
      <span class="bhcoc-tile-label">Leadership</span>
    </a>
    <a href="/contact-us" class="bhcoc-tile">
      <span class="bhcoc-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="M3.2 6.5l8.8 6.4 8.8-6.4"/></svg></span>
      <span class="bhcoc-tile-label">Contact</span>
    </a>
  </nav>

  <section class="bhcoc-card bhcoc-fade">
    <h2 class="bhcoc-card-title">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10a6 6 0 0 1 12 0c0 4 1.5 5.5 2 6H4c.5-.5 2-2 2-6z"/><path d="M9.5 19a2.5 2.5 0 0 0 5 0"/></svg>
      Announcements
    </h2>
    <div id="bhcoc-dash-announcements">
      <div class="bhcoc-skeleton-text">Loading…</div>
    </div>
  </section>

  <footer class="bhcoc-footer bhcoc-fade">
    <a href="/?app_full=1" class="bhcoc-browse-btn">
      Browse full site
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>
    </a>
  </footer>

</div>
<script>
(function () {
  var LIVE_WORKER = 'https://bhcoclivecheck-98db.braxvisuals.workers.dev/';
  var ANNOUNCEMENTS_WORKER = 'https://fragrant-dream-ef85.braxvisuals.workers.dev/list';

  var liveSection = document.getElementById('bhcoc-dash-live');
  var liveDot = liveSection.querySelector('.bhcoc-live-dot');
  var liveStatusText = liveSection.querySelector('.bhcoc-live-status-text');
  var liveHeadline = liveSection.querySelector('.bhcoc-live-headline');

  function renderLive(isLive) {
    liveDot.classList.toggle('is-live', !!isLive);
    if (isLive) {
      liveStatusText.textContent = 'Live';
      liveHeadline.textContent = 'Service is live right now';
      liveSection.insertAdjacentHTML('beforeend', '<a href="/service-stream" class="bhcoc-live-btn">Watch Now</a>');
    } else {
      liveStatusText.textContent = 'Offline';
      liveHeadline.textContent = 'Not live right now';
      liveSection.insertAdjacentHTML('beforeend', '<a href="/service-stream" class="bhcoc-live-btn bhcoc-outline">Visit Live Stream page</a>');
    }
  }

  fetch(LIVE_WORKER)
    .then(function (res) { return res.json(); })
    .then(function (data) { renderLive(data && data.isLive); })
    .catch(function () { renderLive(false); });

  var announceBox = document.getElementById('bhcoc-dash-announcements');
  fetch(ANNOUNCEMENTS_WORKER)
    .then(function (res) { return res.json(); })
    .then(function (data) {
      var announcements = (data && data.announcements) || [];
      if (!announcements.length) {
        announceBox.innerHTML = '<div class="bhcoc-empty">No announcements right now — check back soon!</div>';
        return;
      }
      announceBox.innerHTML = '';
      announcements.slice(0, 3).forEach(function (a) {
        var item = document.createElement('div');
        item.className = 'bhcoc-announce-item';
        item.textContent = a.cleaned_text;
        announceBox.appendChild(item);
      });
    })
    .catch(function () {
      announceBox.innerHTML = '<div class="bhcoc-empty">Announcements unavailable right now.</div>';
    });
})();
</script>

Bush Hills Church of Christ

Create a modern, welcoming church landing page for Bush Hills Church of Christ in Birmingham, Alabama.

The page should highlight:

A large hero banner with a warm welcome message and a call-to-action button (“Plan Your Visit” / “Service Times”).

Service times clearly displayed for Sunday (9:00 AM Bible Study, 10:00 AM Worship, 3:00 PM Ladies’ Bible Study – 1st Sunday only) and Wednesday (6:00 PM Bible Study in-house & virtual).

An “About Us / Our Mission” section explaining that the church’s mission is to worship, love, honor, and glorify God through scripture, prayer, fellowship, and service.

A “New Here?” section welcoming visitors and explaining what to expect.

Ministries & programs such as Bible Studies, Youth, and Community Outreach.

An “Online Giving” section with a donation button.

An “Events” section where updates and activities can be posted.

A footer with address (1400 4th Avenue West, Birmingham, AL 35208), phone ((205) 780-5108), and a Google Map embed.

The design should feel clean, modern, and easy to navigate, with warm tones and images that reflect faith, fellowship, and community.