142 lines
9.3 KiB
Plaintext
142 lines
9.3 KiB
Plaintext
I have a multi-page HTML website template (downloaded via HTTrack or similar).
|
||
The goal is to convert it into a clean, single-page website for a local service
|
||
business. Work through the following tasks in order. Use Linux/Bash tools (sed,
|
||
grep, python) — not PowerShell.
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 1 — FULL AUDIT
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
1a. List every HTML page and identify which are inner/detail pages we can drop.
|
||
1b. List all CSS and JS files in /assets. Confirm they are local — not CDN.
|
||
1c. Scan ALL files for any external cloud-hosted resources:
|
||
- Google Fonts @import in CSS
|
||
- CDN links in HTML (cdnjs, jsdelivr, unpkg, googleapis, etc.)
|
||
Download every external CSS/JS/font file locally and update the references.
|
||
1d. Map every unique section across all pages using the HTML comment labels
|
||
(e.g. "Banner Area", "Services Area", "Team Area") and list them.
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 2 — SECTION MAP & DECISION
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Present a table of every section found with a KEEP / DROP recommendation for a
|
||
single-page local service business. The minimum sections to keep are:
|
||
|
||
KEEP:
|
||
- Hero / Banner (headline, subtext, CTA button)
|
||
- Services (3–6 service cards)
|
||
- How It Works / Work Process (3 steps)
|
||
- FAQ accordion
|
||
- Contact info (phone, address, hours) + map
|
||
- Footer or minimal copyright bar
|
||
|
||
DROP (unless client provides content):
|
||
- Team / Staff grid
|
||
- Portfolio / Projects gallery
|
||
- Blog / News
|
||
- Testimonial slider (keep only if client has real reviews)
|
||
- Subscribe / Newsletter
|
||
- Pricing plans
|
||
- Separate About, Services-details, Blog-details, Projects-details pages
|
||
|
||
Wait for confirmation before proceeding, or proceed with recommended minimum.
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 3 — BUILD SINGLE index.html
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Work only on index.html. Remove all other .html files from scope.
|
||
|
||
3a. Remove all HTTrack mirror comments and ALL HTML comments from the file.
|
||
3b. Remove the entire navbar (header nav, mobile menu drawer, sidebar popup,
|
||
search overlay, overlay divs). Keep only logo if present.
|
||
3c. Remove all sections not in the KEEP list above.
|
||
3d. Remove the Subscribe / Newsletter section.
|
||
3e. Convert all CTA buttons ("Get a Quote", "Read More", "View More") to direct
|
||
phone call actions: href="tel:PHONENUMBER" with label "Call Now".
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 4 — CLIENT DETAILS
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Replace ALL placeholder contact info and branding throughout the entire file
|
||
(title, meta, header, contact section, footer, sidebar, copyright):
|
||
|
||
Company name : [CLIENT COMPANY NAME]
|
||
Phone : [PHONE] → also update all tel: href values
|
||
Address : [ADDRESS]
|
||
Hours : [HOURS]
|
||
Email : [EMAIL or remove]
|
||
|
||
Grep for ALL of these patterns after replacing to confirm none remain:
|
||
- Old phone numbers
|
||
- Old addresses (street names, city, country)
|
||
- Old email addresses
|
||
- Template author name / theme name in meta tags
|
||
- Copyright year / template brand name in footer
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 5 — PLACEHOLDER TEXT SWEEP
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Scan and replace every piece of template/dummy copy. Grep for:
|
||
lorem, ipsum, proin, nullam, phasellus, nec aliquet, molestie, feugiat,
|
||
euismod, aenean, dignissim, placeholder, "Plumbers provide essential",
|
||
"install, repair, and maint", "Website Lounged", "submit your report",
|
||
"New customization options", "Expanded compatibility", "Ask Question",
|
||
any generic job titles unrelated to the business (e.g. "Co Founder",
|
||
"Marketing Coordinator", "Development Manager")
|
||
|
||
For every match, write real copy based on the client's business, city, and
|
||
service type. Replace ALL identical repeated descriptions with unique text.
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 6 — BROKEN LINK CLEANUP
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Grep for every href pointing to a .html page or external URL:
|
||
- Internal .html links (about.html, services.html, blog-*.html, etc.)
|
||
→ replace with # or relevant anchor (#services, #faq, #contact)
|
||
- Social media placeholder links (facebook.com/, twitter.com/ generic)
|
||
→ replace with # until client provides real profile URLs
|
||
- Google Maps placeholder links
|
||
→ replace with real coordinates link
|
||
- Privacy/Terms links pointing to non-existent pages → replace with #
|
||
- Any remaining index2.html, 404-error.html, contact-two.html → remove
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 7 — MAP (Leaflet + Esri World Light Gray)
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Replace any existing map iframe or map section with a Leaflet.js map.
|
||
Download Leaflet locally (no CDN at runtime):
|
||
- assets/css/leaflet.css
|
||
- assets/js/leaflet.js
|
||
(from https://unpkg.com/leaflet@1.9.4/dist/)
|
||
|
||
Place the map in the RIGHT column of the contact section, replacing the
|
||
contact form. Left column keeps phone, address, and hours.
|
||
|
||
Map config:
|
||
- Tile provider : Esri World Light Gray (minimal, Apple Maps-like aesthetic)
|
||
URL: https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/
|
||
World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}
|
||
- Marker : custom red CSS circle via L.divIcon (no default blue pin)
|
||
html: '<div style="width:16px;height:16px;background:#e52222;
|
||
border:3px solid #fff;border-radius:50%;
|
||
box-shadow:0 2px 8px rgba(229,34,34,0.5);"></div>'
|
||
- scrollWheelZoom: false (better UX on scrollable page)
|
||
- Popup on marker: company name, address, clickable phone number
|
||
- Map height: 430px, border-radius: 10px
|
||
- Coordinates: [LAT, LNG] from client address
|
||
|
||
Add leaflet.css in <head>. Add leaflet.js + inline init script just before
|
||
</body>. Use single-quoted JS strings to avoid HTML quote escaping issues.
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
TASK 8 — FINAL VERIFICATION
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
Run a final grep pass and confirm ZERO matches for:
|
||
✗ Any .html page links (except index.html logo link)
|
||
✗ Placeholder/lorem text
|
||
✗ Old phone/address/email
|
||
✗ Template brand names (theme author, demo site URL)
|
||
✗ HTML comments
|
||
✗ CDN/cloud JS or CSS links (except tile server URLs which are runtime)
|
||
✗ Generic social media links (href="https://facebook.com/")
|
||
✗ Broken section titles unrelated to the business
|