├── 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 | 
3 | My project for the online hackathon under the theme COVID19
4 |
5 | ## Screenshots
6 | 
7 | 
8 | 
9 | 
10 | 
11 | 
12 | 
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 |
--------------------------------------------------------------------------------
/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 |
90
57 |9
66 |32
75 |32
84 |90
98 |9
107 |32
116 |32
125 |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 |69 | wear mask and gloves so that docotors when 70 | will reach you at home can't be affected. 71 |
72 |93 | Consider calling the green number 3030 94 | which the government has made specially 95 | to fight corona virus. 96 |
97 |47 | You can watch movies, serises, tv shows, sports or 48 | even documentary videos on your pc or your tv. 49 |
50 |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 |86 | You can text or video call your friends via social media 87 | such as Facebook, Instagram or Twitter. 88 |
89 |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 |
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 |
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 |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 |
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 |
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 |Cough
93 |Fever
97 |Headache
102 |Hard breath
106 |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 |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 |
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 |