Covid-19 Ampel

This is HTML based widget to show the incidences of German Landkreise for SARS-CoV-2 (COVID-19) infections. Cases of the last 7 days per 100,000 inhabitants are shown. These is used in Germany to define levels for secure each other.

Live App

▶ https://covid-ampel.vercel.app/

Use "Add to Homescreen" to add the app to the homescreen of your smartphone.

Using additional Apps the Covid-19 Ampel could also be integrated as widget into

• iOS and
• Android:

Development

Project setup

For development you have to install node.js initially.

This project is based on vue.js V3.

Install initially all dependencies:

npm install

Start development server with hot code replacement

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Development Requirements

• node.js

Used Libraries and Tools

• vue.js 3: https://v3.vuejs.org/
• Vant - Mobile UI Components built on Vue: https://youzan.github.io/vant/next
• ArcGis REST-Service of RKI data: https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0
• striped css background: https://stripesgenerator.com/
• danaymic font size on iOS respecting system settings: https://ind.ie/labs/blog/dynamic-type-support/
• some SVG icons of https://github.com/tabler/tabler-icons
• vue-crono: https://github.com/BrianRosamilia/vue-crono
• purgeCSS: https://purgecss.com/guides/vue.html
• vue-pwa-asset-generator: https://github.com/jcalixte/vue-pwa-asset-generator#readme

Author

Stephan Strittmatter