klimatbil / klimatbil.com Goto Github PK

It should be replaced with a web safe font to prevent downloading unnessecary fonts. Currently, it assumes that it is a web safe font, which it is not, which means some devices will see it while others will not.

It can't simply be put as display: hidden when the modal drawer is out of view, because it animates out, so either I have to wait about 0.2 sec before hiding it, or make it not interactable somehow

(How many trees will this plant?)

Screenshot:

Online image optimizing is very easy, I think I used this website for the background.

Try to get all images about 150kb

This should just notify the users that their information is not stored anywhere except for the amount of trees they've planted and their emails. The emails will not be used to send any information.

🇸🇪 - integritetspolicy

It currently just redirects and shows you a javascript object.
Since it's a form POST action I don't think there's a way to fetch anything in it.. so I will probably need some javascript code to process the form and then fetch the result & load that.

• Register sevice worker
• Probably other things :p

• Hamburger menu
• Branding (title, subtitle, logo)
• Big compensate button
• Payment options

This means that you can scroll down slightly on mobile. The landing page needs to be scaled to the viewport height, not the browser's height. I believe this can be done with javascript and then have 100vh as a fallback.

You cannot tab through the most important parts of the site, like hamburger menu, purchase button etc. Should be fixed for people that navigate through tab.

https://stripe.com/docs/api/customers/create

#78 gives some very good insight in how the script can be refactored.
Solve any merge conflicts and follow the new standard.

Should contain social media links and contact email.

It's still using it's temp design

https://realfavicongenerator.net/favicon_checker?protocol=https&site=klimatbil.com

https://developers.google.com/search/docs/data-types/social-profile

Nothing seems to break our implementation but it should be double checked before migrating. https://stripe.com/docs/upgrades#2019-02-19

The black transparent div that closes the modal drawer gets highlighted in blue on android in chrome.

This will have to be done before September 2019.
Read more here: https://stripe.com/docs/payments/payment-intents

Can this actually be done?

No media queries so it just stays one size. Could be pretty easily fixed by changing the font size depending on the view width.

• Add manual tree counter with animation
• Automate the counter

Could be automated by having another webtask that just adds the trees_planted to the total if the stripe payment goes through.

The website then needs to do a GET request to that webtask or something to get the count.

"Distrubition" should be spelled "distribution".

Webtask.io has very limited support and documentation. I personally think webtask.io has a high probability of being shut down in the near future.

AWS Lambda should be a more viable solution.

AWS Lambda pricing
Serverless stripe with AWS Lambda article

• Landing page
  • Banner
  • Compensate button
  • Short description about the concept
  • Short description about the project the money goes to
  • Short description about the company? Maybe?
• Navigation
  • Redesign (maybe go from modal drawer to a pop down menu?)
  • Navigation buttons to all html files except for tack.html
  • Animate the hamburger menu logo
• About us page
  • Banner
  • Longer description about the company and who we are
  • Long description about One Tree Planted, the project, and the company
  • Contact information
• Compensation page
  • Add css to all the inputs
• Calculation methology page
  • Header image
  • Detailed calculation method
  • Two examples in dropdowns
  • Open source link
• Thank you page
  • Add social media links, maybe "share" buttons
  • Contact email
• Footer
  • Contact email
  • Social media buttons

Especially useful for colors

AddThis is very slow compared to the rest of the website

Currently stored in description, not good.
https://stripe.com/docs/charges#storing-information-in-metadata

The amount of fuel that has been offset can probably be stored in the customer metadata

• Write comments for all rulesets
• Reorder properties to appear in alphabetical order
• Remove unecessary code & rewrite messy classes

Allow members to also pay with swish.

This needs to be done through a file called _redirect. More info on netlify.

Should warn that the website is not built for desktops/large tablets so the experience might suffer, and recommend using a mobile device.

Should only happen on main screen, probably like a small toaster notif that is easy to close

Not highest priority, but it should be resolved before launching.

For example, add a badge with something like this (made with shields.io)

Also more information about the project, images from onetreeplanted, etc
And get the actual logo for onetreeplanted

Currently all meta descriptions are the same (not recommended by google)

• Add information
• Add styling

Either download fonts and load them from a "resources" folder or use fonts that already exsist rather than using non-default fonts.