AMPERRA CHARGING COMPANY - WEBSITE FILES ======================================== For uploading, see UPLOAD-WITH-FILEZILLA.txt alongside this file. Everything below is about the site itself. WHAT IS IN public_html ---------------------- index.html The whole site. All the text lives in here. thanks.html Confirmation page, used only for visitors who have JavaScript switched off. favicon.ico Browser tab icon. robots.txt Lets search engines index the site. .htaccess Apache settings. Only does anything on Apache hosting (cPanel and similar). Harmless everywhere else, so you can leave it or delete it. assets/fonts/ Suisse Intl Light, Regular and Medium as .woff2. assets/img/ Logos, the four logo quadrants used in the hero animation, the founder photo, favicons and the image that shows when the link is shared. There is no database and no server code. Any host will run this. Upload the contents of public_html so that index.html sits at the top level of the web folder, with the assets folder beside it. ========================================================= STEP 1 - TURN THE FORM ON. DO THIS FIRST. ========================================================= The form is handled by FormSubmit (formsubmit.co). It is free, it has no sign-up, no account and no monthly limit that matters at this size. It takes every request and emails it to info@amperra.com, and it emails the person a thank-you message back automatically. Nothing arrives until you activate it once. It takes two minutes. 1. Put the site online first. FormSubmit will not activate from a file opened on your own computer, only from a real web address. 2. Open the live site, fill in the form and send a test request. 3. The page will say the email address needs confirming. That is expected on the very first send. 4. Open info@amperra.com. There is an email from FormSubmit with a button to confirm. Click it. Check the spam folder if it is not in the inbox. 5. Send one more test request. This one lands in info@amperra.com, and the address you typed into the form receives the thank-you message. That is it. It keeps working from then on. ========================================================= STEP 2 - TWO SMALL THINGS TO FINISH AFTER ACTIVATION ========================================================= a) HIDE THE EMAIL ADDRESS FROM THE PAGE SOURCE. When you confirm in step 1, FormSubmit also gives you a random code to use instead of the address, so that info@amperra.com is not sitting in the page for address harvesters to scrape. Open index.html, find this line near the form: action="https://formsubmit.co/info@amperra.com" and replace the address with the code you were given: action="https://formsubmit.co/a1b2c3d4e5f6g7h8" Requests still go to the same inbox. Worth doing. b) POINT THE FALLBACK PAGE AT YOUR REAL DOMAIN. Also in index.html, just above the form: Change amperra.com to whatever the live domain turns out to be. This only affects visitors with JavaScript switched off, which is very few people, so it is not urgent. Everyone else sees the confirmation appear on the page without it reloading. ========================================================= STEP 3 - PUT YOUR DOMAIN IN THE SHARING TAGS ========================================================= Near the top of index.html, under a comment that says SET YOUR DOMAIN: Change amperra.com in both to the real domain. These two have to be complete web addresses, not shortened paths. WhatsApp, LinkedIn and Facebook will not show the preview picture otherwise, and a link to the site will paste as bare text. If you want to see what the preview looks like before announcing anything, paste the address into: https://www.linkedin.com/post-inspector/ It also clears LinkedIn's saved copy, which is useful if you change the picture later and the old one keeps appearing. ========================================================= CHANGING WHAT THE EMAILS SAY ========================================================= All of it sits in a block of hidden lines just above the form in index.html, marked FORMSUBMIT SETTINGS. action="..." Where requests are delivered. Change the address here and nowhere else. _subject The subject line of the email you receive. _autoresponse The message the sender gets back automatically. Edit the wording freely. Keep it inside the quotes. _template Set to "table", which lays the request out as a tidy table. Remove the line for a plain text email. _captcha Set to "false". Leave it alone. Turning it on breaks the on-page confirmation. _next The fallback page described above. There is also a hidden field named _honey. It is a trap for spam bots, which fill it in while real people never see it. Leave it where it is. To change where it says "Requests go to info@amperra.com" under the button, search index.html for that sentence. ========================================================= IF FORMSUBMIT EVER STOPS SUITING YOU ========================================================= The form is ordinary HTML, so moving it is a one line change. Web3Forms and Formspree both work the same way: sign up, get a URL or key, and put it in the action attribute. Nothing else in the page needs touching. ========================================================= STILL TO SORT OUT BEFORE LAUNCH ========================================================= 1. INSTAGRAM LINK. In the footer the Instagram link is href="#" because the URL supplied was a duplicate of the LinkedIn one. Replace it with the real profile. LinkedIn and Facebook are already live. 2. THE CORRIDOR TOWNS. The strip listing Walvis Bay through to Ondangwa reflects the mapping plan, not confirmed live sites. Edit or remove it before publishing if that is misleading. 3. THE FOUNDER PHOTO. assets/img/founder.jpg is cropped out of the Ford Philanthropy fellowship card, so it carries that graphic's lighting and colour. A plain studio headshot would sit better. Save the new one over the same filename and nothing else needs changing. 4. THE NEW ERA ARTICLE LINK. In the press list, the New Era link uses a redirect style address (?p=384711). Swap it for the clean article address when you have it. ========================================================= EDITING THE TEXT ========================================================= Open index.html in any plain text editor. Everything a visitor reads is between the
and
tags, in plain English. Colours and fonts are defined at the top of the file, in the block that starts with :root{ Fuchsia Blue #644DF7 Cinder #000213 Athens Gray #E2E6EB Typeface is Suisse Intl throughout, loaded from assets/fonts/. If you move the site to another host, keep the assets folder next to index.html or the fonts and logos will not load.