Add websites-for-local-bussiness.txt
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
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
|
||||
Reference in New Issue
Block a user