Awesome
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
<img src="https://raw.githubusercontent.com/stritti/covid-ampel-widget/main/public/help/IMG_6911.jpg" width="240" alt="Covid-19 Ampel-Widget" /> <img src="https://raw.githubusercontent.com/stritti/covid-ampel-widget/main/public/help/android-covid-19-ampel-widget.png" width=240/>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