├── screenshots ├── about.png ├── sick.png ├── at-home.png ├── landing.png ├── syptomes.png ├── banner-img.jpg ├── statistics.png └── protect-yourself.png ├── README.md ├── assets ├── mask.svg ├── cough.svg ├── patient.svg ├── fever.svg ├── lung.svg ├── gloves.svg ├── bacteria.svg ├── undraw_home_cinema_l7yl.svg ├── undraw_wash_hands_nwl2.svg ├── undraw_healthy_habit_bh5w.svg ├── undraw_social_girl_562b.svg ├── undraw_community_8nwl.svg ├── undraw_chilling_8tii.svg └── undraw_book_lover_mkck.svg ├── js └── main.js ├── css └── style.css ├── statistics.html ├── sick.html ├── at-home.html ├── protect-yourself.html ├── index.html └── about.html /screenshots/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/about.png -------------------------------------------------------------------------------- /screenshots/sick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/sick.png -------------------------------------------------------------------------------- /screenshots/at-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/at-home.png -------------------------------------------------------------------------------- /screenshots/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/landing.png -------------------------------------------------------------------------------- /screenshots/syptomes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/syptomes.png -------------------------------------------------------------------------------- /screenshots/banner-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/banner-img.jpg -------------------------------------------------------------------------------- /screenshots/statistics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/statistics.png -------------------------------------------------------------------------------- /screenshots/protect-yourself.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oussamabouchikhi/COVID19/HEAD/screenshots/protect-yourself.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # COVID19 2 | ![](https://img.shields.io/badge/Hosted%20by-Team%20Open%20Minds-blue)

3 | My project for the online hackathon under the theme COVID19 4 | 5 | ## Screenshots 6 | ![](screenshots/symptomes.png)
7 | ![](screenshots/about.png)
8 | ![](screenshots/protect-yourself.png)
9 | ![](screenshots/statistics.png)
10 | ![](screenshots/landing.png) 11 | ![](screenshots/sick.png) 12 | ![](screenshots/at-home.png)
13 | 14 | ## Tools & Languages 15 | - HTML5 16 | - CSS3 17 | - Javascript 18 | - Assets are from [undraw](https://undraw.co/illustrations) & [flaticon](https://www.flaticon.com/) 19 | - [COVID API](https://thevirustracker.com/) corona virus statistics api 20 | - [VSCode](https://code.visualstudio.com/) as a text editor 21 | 22 | ## Contributing 23 | Pull requests are welcome feel free to ```fork``` this repo. 24 | 25 | ## License 26 | This project is open sourced under the [MIT](https://opensource.org/licenses/MIT) license. 27 | -------------------------------------------------------------------------------- /assets/mask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | 2 | /********************* CORONA VIRUS STATISTICS API *********************/ 3 | /*** GET JSON DATA USING AJAX ***/ 4 | var getDzInfo = new XMLHttpRequest(); 5 | 6 | getDzInfo.open('GET', 'https://thevirustracker.com/free-api?countryTotal=DZ'); 7 | 8 | // When data loads 9 | getDzInfo.onload = function () { 10 | 11 | // parse the respone text to javascript object 12 | var data = JSON.parse(getDzInfo.responseText); 13 | console.log(data); 14 | console.log(data.countrydata[0]); 15 | console.log(data.countrydata[0].total_cases); 16 | 17 | const countrydata = data.countrydata[0]; 18 | 19 | document.getElementById('total_cases').innerHTML = countrydata.total_cases; 20 | document.getElementById('total_recovered').innerHTML = countrydata.total_recovered; 21 | document.getElementById('total_unresolved').innerHTML = countrydata.total_unresolved; 22 | document.getElementById('total_deaths').innerHTML = countrydata.total_deaths; 23 | document.getElementById('total_new_cases_today').innerHTML = countrydata.total_new_cases_today; 24 | document.getElementById('total_new_deaths_today').innerHTML = countrydata.total_new_deaths_today; 25 | document.getElementById('total_active_cases').innerHTML = countrydata.total_active_cases; 26 | document.getElementById('total_serious_cases').innerHTML = countrydata.total_serious_cases; 27 | 28 | } 29 | 30 | getDzInfo.send(); -------------------------------------------------------------------------------- /assets/cough.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/patient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | background 5 | 6 | 7 | 8 | Layer 1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /assets/fever.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* Global */ 2 | .primary-color { 3 | color: #02C26A; 4 | } 5 | 6 | section { 7 | height: auto; 8 | padding: 20px 10px; 9 | overflow: hidden; 10 | } 11 | /* Global */ 12 | 13 | /* Navbar */ 14 | 15 | /* Navbar */ 16 | nav { 17 | background-color: #02C26A !important; 18 | } 19 | 20 | nav .navbar-toggler{ 21 | border-color: #FFF !important; 22 | } 23 | 24 | /* Navbar */ 25 | 26 | /* Banner */ 27 | @import url('https://fonts.googleapis.com/css?family=Dosis:800&display=swap'); 28 | section#banner h1 { 29 | 30 | color: #02C26A; 31 | font-size: 50px; 32 | font-family: 'Dosis', sans-serif; 33 | 34 | } 35 | /* Banner */ 36 | 37 | /* About */ 38 | section#about { 39 | 40 | } 41 | /* About */ 42 | 43 | /* Symptoms */ 44 | @media screen and (min-width: 480px) { 45 | section#symptomes { 46 | height: 700px; 47 | } 48 | } 49 | 50 | 51 | section#symptomes ul li{ 52 | color: #02C26A; 53 | } 54 | 55 | section#symptomes p:last-of-type { 56 | margin-bottom: 10px; 57 | } 58 | 59 | section#symptomes .button { 60 | 61 | display: inline-block; 62 | background-color: #02C26A; 63 | color: #fff; 64 | padding: 10px 25px; 65 | outline: none; 66 | text-decoration: none; 67 | /* border: none; */ 68 | border: 2px solid #fff; 69 | border-radius: 5px; 70 | transition: all .3s ease-in-out; 71 | } 72 | 73 | section#symptomes .button:hover { 74 | background-color: #fff; 75 | color: #02C26A; 76 | border: 2px solid #02C26A; 77 | cursor: pointer; 78 | } 79 | /* Symptoms */ 80 | 81 | /* Footer */ 82 | #footer { 83 | background-color: #02C26A; 84 | color: #fff; 85 | padding: 10px 20px; 86 | } 87 | /* Footer */ 88 | 89 | /***** sick page *****/ 90 | 91 | section .green-num { 92 | color: #02C26A; 93 | font-size: 120px; 94 | font-family: 'Dosis', sans-serif; 95 | } 96 | 97 | 98 | /***** statistics page *****/ 99 | 100 | @media screen and (min-width: 480px) { 101 | section#stat-cards { 102 | min-height: 509px; 103 | } 104 | } 105 | section#stat-cards div.card { 106 | background-color: #02C26A !important; 107 | color: #fff !important; 108 | } 109 | 110 | section#stat-cards h1, 111 | section#stat-cards h2 112 | { 113 | color: #02C26A; 114 | } 115 | -------------------------------------------------------------------------------- /assets/lung.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/gloves.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /statistics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Statistics 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | 43 |
44 |
45 | 46 |

Statistics

47 | 48 | 49 |

General Statistics

50 |
51 | 52 |
53 |
54 |
55 |
Total Cases
56 |

90

57 |
58 |
59 |
60 | 61 |
62 |
63 |
64 |
Total Recovering
65 |

9

66 |
67 |
68 |
69 | 70 |
71 |
72 |
73 |
Total Unresolved
74 |

32

75 |
76 |
77 |
78 | 79 |
80 |
81 |
82 |
Total Deaths
83 |

32

84 |
85 |
86 |
87 | 88 |
89 | 90 |

Today Statistics

91 |
92 | 93 |
94 |
95 |
96 |
Affected
97 |

90

98 |
99 |
100 |
101 | 102 |
103 |
104 |
105 |
Today Deads
106 |

9

107 |
108 |
109 |
110 | 111 |
112 |
113 |
114 |
Active Cases
115 |

32

116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 |
Serious Cases
124 |

32

125 |
126 |
127 |
128 | 129 |
130 |
131 |
132 | 133 | 134 | 135 | 136 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /sick.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | COVID19 12 | 13 | 14 | 15 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
45 |

1- Stay at home

46 |

47 | Stay at home and lock yourself in an isolated 48 | room to avoid infecting peaple outside or 49 | your family at home. 50 |

51 |
52 |
53 |
54 |
55 | virus 56 |
57 |
58 |
59 |
60 | 61 | 62 | 63 |
64 |
65 |
66 |
67 |

2- Wear mask and gloves

68 |

69 | wear mask and gloves so that docotors when 70 | will reach you at home can't be affected. 71 |

72 |
73 |
74 |
75 |
76 | virus 77 |
78 |
79 | virus 80 |
81 |
82 |
83 |
84 | 85 | 86 | 87 |
88 |
89 |
90 |
91 |

3- Call the support

92 |

93 | Consider calling the green number 3030 94 | which the government has made specially 95 | to fight corona virus. 96 |

97 |
98 |
99 |
100 |
101 |

3030

102 |
103 |
104 |
105 |
106 | 107 | 108 | 109 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /at-home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | COVID19 12 | 13 | 14 | 15 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
45 |

1- Watch Movies

46 |

47 | You can watch movies, serises, tv shows, sports or 48 | even documentary videos on your pc or your tv. 49 |

50 |
51 |
52 | virus 53 |
54 |
55 |
56 |
57 | 58 | 59 | 60 |
61 |
62 |
63 |
64 |

2- Home workout

65 |

66 | Home workouts can help be in a good health 67 | and prevent from stress which can cauze a 68 | weakness to your immune system. 69 |

70 |
71 |
72 | virus 73 |
74 |
75 |
76 |
77 | 78 | 79 | 80 |
81 |
82 |
83 |
84 |

3- Social media hangout

85 |

86 | You can text or video call your friends via social media 87 | such as Facebook, Instagram or Twitter. 88 |

89 |
90 |
91 | virus 92 |
93 |
94 |
95 |
96 | 97 | 98 | 99 |
100 |
101 |
102 |
103 |

4- Reading books

104 |

105 | Reading a book is very important to improve 106 | our culture. If you don't have any books at 107 | home don't worry there are many websites 108 | that offers free pdf e-books in all categories 109 | so what are waiting for start now. 110 |

111 |
112 |
113 | virus 115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /assets/bacteria.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /protect-yourself.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | COVID19 12 | 13 | 14 | 15 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
45 |

what should we do all

46 |

47 | Since we don't have a vaccine for Corona, we have to socially engineer our behaviour, 48 | to act like a social vaccine. This simply means two things:
49 | 1- Not getting infected
50 | 2- Not infecting others
51 |

52 |
53 |
54 |
55 |
56 | 57 | 58 | 59 |
60 |
61 |
62 |
63 |

1- Wash your hands

64 |

65 | Although it sounds trivial, the very best thing you can do is wash your hands. The soap 66 | is actually a powerfull tool. The Corona virus is encased in what is basically a layer of fat 67 | soap breaks that fat apart and leaves it unable to inflect you. it also makes your hands 68 | slippery, and with the mechanical motions of washing, viruses are ripped away. 69 | To do it properly, wash your hands as if you've just cut up some jalapenos and want to put 70 | in your contact lenses next. 71 |

72 |
73 |
74 | virus 75 |
76 |
77 |
78 |
79 | 80 | 81 | 82 |
83 |
84 |
85 |
86 |

2- Social distancing

87 |

88 | The next thing is social distancing, which is not a nice experience, but a nice thing to do. 89 | This means: no hugging, no handshakes. 90 |

91 |
92 |
93 | virus 94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 |
102 |
103 |
104 |
105 |

3- Stay at home

106 |

107 | if you can stay at home, stay at home to protect those who need to be out for society to 108 | functions. from doctors to cashiers, or police officers. You depend on all of them, they all 109 | depend on you to not get sick.
110 | And here are some stuff to do if your at home. 111 |

112 | Things todo if you're at home > 113 |
114 |
115 | virus 116 |
117 |
118 |
119 |
120 | 121 | 122 | 123 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | COVID19 12 | 13 | 14 | 15 | 38 | 39 | 40 | 41 | 55 | 56 | 57 | 58 |
59 |
60 |
61 |
62 |

What is a virus?

63 |

64 | A virus is a collection of genetic material 65 | (DNA or RNA) inside a protein shell. There is 66 | much scientific debate about whether viruses 67 | are alive. Like living creatures, they carry 68 | genes and evolve. But they are unable to 69 | reproduce on their own and must infect living 70 | cells and hijack cellular machinery 71 | (such as ribosomes) in order to copy themselves. 72 | Though viruses are tiny, they are fierce. Influenza (the flu) alone has killed tens of millions of humans in the last 100 years. 73 |

74 |
75 |
76 | virus 77 |
78 |
79 |
80 |
81 | 82 | 83 | 84 |
85 |
86 |

Watch for symptoms

87 |
88 |
89 |
90 |
91 | cough 92 |

Cough

93 |
94 |
95 | fever 96 |

Fever

97 |
98 |
99 |
100 | headache 101 |

Headache

102 |
103 |
104 | lung 105 |

Hard breath

106 |
107 |
108 |
109 |
110 |

111 | Reported illnesses have ranged from mild symptoms to severe illness and death for confirmed coronavirus disease 2019 (COVID-19) cases. 112 | The following symptoms may appear 2-14 days after exposure.

113 |
    114 |
  • Fever
  • 115 |
  • Cough
  • 116 |
  • Headache
  • 117 |
  • Shortness of breath
  • 118 |
119 |

120 | This is based on what has been seen previously as the incubation period of MERS-CoV viruses. 121 |

122 | What to do if you are sick 123 | How to protect yourself 124 |
125 |
126 |
127 |
128 | 129 | 130 | 131 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | COVID19 12 | 13 | 14 | 15 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
45 |

What actually happens when it infects a human

46 |

47 | in december 2019 the chinese authorities notified the world that a virus was spreding their communities 48 | in the following months, it spread to other countries, with cases doubling within days. 49 | This virus is Severe Acute Respiratory Syndrome-Realated Coronavirus 2 that causes the 50 | disease called Covid-19 and that everyone simply calls coronavirus.


51 | Corona may spread via surfaces, but it still uncertain how long it can survive on them. 52 | its main way of spreading seems to be droplet infection when peaple cough, or if you 53 | touch someone who's ill then your face, say rubbing your eyes or nose. 54 | the virus starts its journey here, and then hitches a ride as a stowaway deeper into the body 55 | its destinations are the interstines, the spleen or the lungs, where it can have the 56 | most dramatic effect.
57 | Even just a few corona viruses can cause quite a dramatic situation. 58 | The lungs are lined with billions of epithelial cells.These are yhe border cells of your 59 | body, lining your organs and mucosa waiting to be infected. 60 | Corona connects to a specific receptor on its victim's membranes to inject its genetic material. 61 | The cell, ignorant of what's heppening, executes the new instructions, which are pretty 62 | simple: copy and reassemble It fills up with more and more copies of the original virus 63 | until it reaches a critical point and receives one final order, self-destruct. 64 | The cell sort of melts away, releasing new corona particles ready to attack more cells. 65 | The number of infected cells grows exponentially.
66 | After about 10 days, millions of body cSells are infected , and billions of viruses swarmed the lungs. 67 | The virus has not caused too much damage yet, but corona is now going to release 68 | a real beast on you, your own immune system. The immune system, while there to protect 69 | you, can actually be pretty dangerous to yourself and needs tight regulation. And as 70 | immune cells pour into the lungs to fight the virus, Corona infects some of them 71 | and creates confusion. Cells have neither ears nor eyes, they communicate mostly 72 | via protein called cytokines. Nearly every important immune reaction is controlled by them. 73 | Corona causes infected cells to overreact and yell bloody murder.
74 | In a sense, it puts the immune system into a fighting frenzy and sends way more soldiers than it should, wasting 75 | its resources and causing damage. Two kinds of cells in particular wreak havoc. 76 | First, neutrophils, which are great at killing stuff, including our cells. As they arrive 77 | in their thousands, they start pumping out enzymes that destroy as many friends as enemies. 78 | The other important type of cells that go into a frenzy are killer T-cells, which usually 79 | order infected cells to commit controlled suicide. Confused as they are, they start ordering 80 | healthy cells to kill themselves too. The more and more immune cells arrive, the more 81 | damage they do, and more healthy lung tissue they kill. This might get so bas that it can 82 | cause permanent irreversible damage, that leads to life long disabilities.
83 | In most cases, the immune system slowly regains control it killsthe infected cells, intercepts the viruses 84 | trying to infect new ones and cleans up the battelfield. Recovery beginns. The majority 85 | of peaple infected by Corona will get through it with relatively mild symptoms. But many 86 | cases become severe or even critical. We dont know the percentage because not all cases 87 | have been identified, but its safe to say that there is a lot more than with the flu.
88 | In more severe cases, Millions of epithelial cells have died and with them, the lungs' protective 89 | lining is gone. That means that the Alveoli tiny air sacs via which breathing occurs 90 | can be infected by bacteria that aren't usually a big problem. Patients get pneumonia. 91 | Respiration becomes hard or even fails, and patients need ventilators to survive.


92 | The immune system has fought at full capacity for weeks and made millions of antiviral 93 | weapons. And as thousands of bacteria rapidly multiply, it is overwhelmed. They enter 94 | the blood and overrun the body, if this happens, death is very likely.
95 | The Corona virus is often compared to the flu, but actually, it's much more dangerous. 96 |

97 |
98 |
99 |
100 |
101 | 102 | 103 | 104 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /assets/undraw_home_cinema_l7yl.svg: -------------------------------------------------------------------------------- 1 | home_cinema -------------------------------------------------------------------------------- /assets/undraw_wash_hands_nwl2.svg: -------------------------------------------------------------------------------- 1 | wash_hands -------------------------------------------------------------------------------- /assets/undraw_healthy_habit_bh5w.svg: -------------------------------------------------------------------------------- 1 | healthy_habit -------------------------------------------------------------------------------- /assets/undraw_social_girl_562b.svg: -------------------------------------------------------------------------------- 1 | social_girl -------------------------------------------------------------------------------- /assets/undraw_community_8nwl.svg: -------------------------------------------------------------------------------- 1 | community -------------------------------------------------------------------------------- /assets/undraw_chilling_8tii.svg: -------------------------------------------------------------------------------- 1 | chilling -------------------------------------------------------------------------------- /assets/undraw_book_lover_mkck.svg: -------------------------------------------------------------------------------- 1 | book lover --------------------------------------------------------------------------------