# Phase 1: Floating Contact Icons — Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Add fixed floating WhatsApp and email icons to the bottom corners of all HTML pages, persisting across Swup page transitions.

**Architecture:** Icons placed directly before `</body>` in every HTML file — outside both `.orb-wrapper` and `#orb-dynamic-content`. Swup only swaps `#orb-dynamic-content` (confirmed in `js/main.js:44`), so anything outside that container persists across navigation. Both links carry `data-no-swup` to prevent Swup interception. Inline SVGs — no external image dependency.

**Tech Stack:** HTML, CSS. No JavaScript required.

---

## Chunk 1: CSS + Icon HTML

### Task 1: Add floating icon CSS to `css/style.css`

**Files:**
- Modify: `css/style.css` (append at end)

- [ ] **Step 1: Append the following CSS block to the very end of `css/style.css`**

```css
/* =====================================================
   FLOATING CONTACT ICONS
   ===================================================== */
.orb-float-contact {
  position: fixed;
  bottom: 28px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(30, 24, 18, 0.88);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(197, 118, 66, 0.4);
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.orb-float-contact:hover {
  background: #C57642;
  border-color: #C57642;
  transform: scale(1.1);
}

.orb-float-contact svg {
  width: 22px;
  height: 22px;
  fill: #C57642;
  transition: fill 0.25s;
  display: block;
}

.orb-float-contact:hover svg {
  fill: #fff;
}

.orb-float-whatsapp { left: 24px; }
.orb-float-email    { right: 24px; }

@media (max-width: 600px) {
  .orb-float-contact {
    width: 40px;
    height: 40px;
    bottom: 20px;
  }
  .orb-float-contact svg { width: 20px; height: 20px; }
  .orb-float-whatsapp { left: 16px; }
  .orb-float-email    { right: 16px; }
}
```

- [ ] **Step 2: Verify** — open `css/style.css`, scroll to bottom, confirm `.orb-float-contact` block is present with no syntax errors.

---

### Task 2: Add floating icons to all HTML pages

**Files:**
- Modify: all `.html` files in the project root

The icon HTML snippet must be inserted just before `</body>` in every file.
The WhatsApp number `27848163655` is already embedded (confirmed from `contact-2.html:158`).

**Icon HTML snippet (same for every file):**
```html
<!-- Floating Contact Icons -->
<a href="https://wa.me/27848163655?text=Hi%20LushaWill%2C%20I%27d%20love%20to%20enquire%20about%20a%20dress."
   target="_blank" rel="noopener"
   class="orb-float-contact orb-float-whatsapp"
   data-no-swup
   aria-label="Chat on WhatsApp">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
</a>
<a href="contact-2.html"
   class="orb-float-contact orb-float-email"
   data-no-swup
   aria-label="Send us an email">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  </svg>
</a>
```

- [ ] **Step 1: Run the following Python script from the project root to insert the snippet into all HTML files**

Save this as a temporary file `_add_icons.py` in the project root, run it, then delete it:

```python
import os
import re

SNIPPET = '''
<!-- Floating Contact Icons -->
<a href="https://wa.me/27848163655?text=Hi%20LushaWill%2C%20I%27d%20love%20to%20enquire%20about%20a%20dress."
   target="_blank" rel="noopener"
   class="orb-float-contact orb-float-whatsapp"
   data-no-swup
   aria-label="Chat on WhatsApp">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
</a>
<a href="contact-2.html"
   class="orb-float-contact orb-float-email"
   data-no-swup
   aria-label="Send us an email">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  </svg>
</a>
'''

root = '.'
html_files = [f for f in os.listdir(root) if f.endswith('.html')]
updated = []

for fname in html_files:
    path = os.path.join(root, fname)
    with open(path, 'r', encoding='utf-8') as f:
        content = f.read()
    if 'orb-float-contact' in content:
        print(f'SKIP (already has icons): {fname}')
        continue
    if '</body>' not in content:
        print(f'SKIP (no </body> tag): {fname}')
        continue
    new_content = content.replace('</body>', SNIPPET + '\n</body>', 1)
    with open(path, 'w', encoding='utf-8') as f:
        f.write(new_content)
    updated.append(fname)
    print(f'UPDATED: {fname}')

print(f'\nDone. Updated {len(updated)} files.')
```

Run it:
```bash
cd C:/xampp/htdocs/lushawillupgrade
python _add_icons.py
```

Expected output: `UPDATED: about-3.html` ... (one line per file) ... `Done. Updated 16 files.`

- [ ] **Step 2: Delete the temporary script**

```bash
rm _add_icons.py
```

- [ ] **Step 3: Verify in browser**

Open `http://localhost/lushawillupgrade/home.html` and check:
- WhatsApp icon visible bottom-left (gold circle, WhatsApp logo)
- Email icon visible bottom-right (gold circle, envelope logo)
- Hover turns background gold, icon white
- Click WhatsApp: opens `wa.me` link in new tab with pre-filled message
- Click email: navigates to `contact-2.html`

Then navigate to `collections.html` (via the site nav) and verify:
- Icons are still present (Swup did not remove them)
- Icons are still positioned correctly

Repeat for `serenity01.html` and `gloriousbloomcamelliagb01.html`.

- [ ] **Step 4: Commit**

```bash
git add css/style.css *.html
git commit -m "feat: add floating WhatsApp and email icons to all pages"
git push
```

---

### Task 3: Note for contact-2.html email icon

The email icon on `contact-2.html` itself links back to `contact-2.html` (self-link). This is intentional — the behaviour is consistent with all other pages. No change needed.

---

## Post-Phase Checklist

- [ ] All 16 HTML files have the icon snippet before `</body>`
- [ ] Icons visible and styled correctly on desktop and mobile
- [ ] Icons persist across Swup page transitions
- [ ] `_add_icons.py` temp script deleted
- [ ] Changes committed and pushed to `staging`
- [ ] **Update spec:** mark Phase 1 complete in `docs/superpowers/specs/2026-03-28-lushawill-admin-portal-design.md`