diff --git a/src/App.css b/src/App.css index a8665fe5e..21d914b8b 100644 --- a/src/App.css +++ b/src/App.css @@ -29,6 +29,13 @@ header .headerin .logo { padding-left: 120px; } +@media only screen and (max-width:600px) { + header .headerin .logo { + position: relative; + right: 115px; + } +} + /* ************ */ /* ** FOOTER ** */ @@ -137,6 +144,38 @@ footer #cookieData .closebtn { float: right; } +@media only screen and (max-width:500px) { + footer { + height: 320px; + } + footer .footerin .w40 { + align-items: center; + position: relative; + height: auto; + width: 800px; + bottom: 80px; + left: 73px; + white-space: nowrap; + } + footer .footerin .w30 { + position: relative; + text-align: center; + top: 100px; + right: 130px; + } + footer .footerin .w30 .links { + line-height: 26px; + } + footer .footerin h3 { + font-size: larger; + } + footer .footerin button { + width: 175px; + height: 37px; + border-radius: 5px; + } +} + /* ***************** */ /* ** COPYRIGHT ** */ @@ -175,6 +214,7 @@ footer #cookieData .closebtn { color: #252759; opacity: 1; } + #cookieData .cookie-title img { width: 30px; height: 30px; @@ -193,26 +233,31 @@ footer #cookieData .closebtn { display: block; line-height: 0; } + #cookieData { padding: 20px; - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ } + #cookieData::-webkit-scrollbar { display: none; } -#cookieData p, -#cookieData div { +#cookieData p, #cookieData div { text-align: left; font-size: 14px; letter-spacing: 0; opacity: 1; color: #707070; } + #CookieDeclarationChangeConsent { padding: 20px 0; } + #CookieDeclarationChangeConsent a { background-color: #0455bf; color: #fff; @@ -243,7 +288,7 @@ footer #cookieData .closebtn { padding: 80px 0; background-repeat: no-repeat; background-position: center; - background-size: 100%; + background-size: 100% 100%; background-image: url('https://d2vgampz89jm7o.cloudfront.net/Hero+Image-Half+Blur.png'); background-color: rgba(0, 0, 0, 0.53); background-blend-mode: darken; @@ -318,6 +363,31 @@ footer #cookieData .closebtn { line-height: 30px; } +@media only screen and (max-width: 600px) { + #banner { + height: 460px; + } + #banner .banner-in h1 { + font-family: 'Lato', sans-serif; + font-size: 32px; + font-weight: normal; + color: #fff; + margin: 4px; + padding: 2px; + } + #banner .banner-in p { + font-size: 20px; + font-weight: normal; + color: #fff; + margin: 3px; + padding: 5px; + font-family: 'Montserrat', sans-serif; + text-align: center; + max-width: 560px; + line-height: 42px; + } +} + /* ************ */ /* ** SEARCH ** */ @@ -463,8 +533,7 @@ footer #cookieData .closebtn { color: #151515; } -#search .search-in .results .content .location address, -#search .search-in .results .content .location p { +#search .search-in .results .content .location address, #search .search-in .results .content .location p { font-size: 16px; font-weight: normal; font-style: normal; @@ -479,8 +548,7 @@ footer #cookieData .closebtn { padding: 10px 20px 27px 20px; } -#search .search-in .results .content .location address i, -#search .search-in .results .content .location p i { +#search .search-in .results .content .location address i, #search .search-in .results .content .location p i { font-size: 20px; color: #2f97f2; margin-right: 10px; @@ -554,3 +622,147 @@ footer #cookieData .closebtn { background-size: 100px 100px; background-position: center; } + +@media only screen and (max-width:600px) { + #search .noresults .text h2 { + font-size: 14px; + white-space: nowrap; + font-weight: bold; + } +} + +/* ************ */ + +/* ** ResponnsiveContents ** */ + +/* ************ */ + +#Work { + font-family: 'Montserrat', sans-serif; + text-align: center; + justify-content: center; + height: 35px; + margin: 22px 0 20px 0; + font-weight: bolder; + color: #252759; + font-size: 28px; +} + +#Sick { + height: 240px; + padding: 10px; + text-align: center; + box-shadow: 1px 0 0px -5px #000; + font-weight: bold; + font-size: 18px; + color: #252759; +} + +#Form { + height: 240px; + padding: 10px; + text-align: center; + box-shadow: 1px 0 10px -5px #000; + font-weight: bold; + font-size: 18px; + color: #252759; +} + +#Taxi { + height: 240px; + padding: 10px; + text-align: center; + box-shadow: 1px 0 10px -5px #000; + font-weight: bold; + font-size: 18px; + color: #252759; +} + +#Ward { + height: 240px; + padding: 10px; + text-align: center; + box-shadow: 1px 0 10px -5px #000; + font-weight: bold; + font-size: 18px; + color: #252759; +} + +#t1, #t2, #t3, #t4 { + height: 45px; + font-size: 18px; + text-align: center; + padding: 15px 20px 15px 20px; + background-color: rgb(231, 231, 231); + font-family: 'Montserrat', sans-serif; + color: #252759; + font-weight: bold; + line-height: 23px; + display: none; + animation: animatedrop 0.9s; +} + +#icons, #layer_1 { + height: 120px; + width: 120px; + margin: 18px; +} + +@media only screen and (max-width:600px) { + #t1, #t2, #t3, #t4 { + height: 70px; + font-size: 13px; + font: #252759; + } + #Sick { + height: 210px; + font-size: 16px; + padding: 25px; + } + #Form { + height: 210px; + font-size: 16px; + padding: 27px; + } + #Taxi { + height: 210px; + font-size: 16px; + } + #Ward { + height: 210px; + font-size: 16px; + } + #icons, #layer_1 { + height: 80px; + width: 80px; + margin: 18px; + } +} + +.arrow { + border: solid black; + border-width: 0 8px 8px 0; + height: 12px; + width: 12px; + display: inline-block; + padding: 3px; + margin: 20px; + border-radius: 5px; +} + +.down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + cursor: pointer; +} + +@keyframes animatedrop { + 0% { + height: 0px; + opacity: 0; + } + 100% { + height: 45px; + opacity: 1; + } +} \ No newline at end of file diff --git a/src/components/responsiveness/ResponsiveComponents.jsx b/src/components/responsiveness/ResponsiveComponents.jsx new file mode 100644 index 000000000..318bcdacc --- /dev/null +++ b/src/components/responsiveness/ResponsiveComponents.jsx @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import Data from "./responsive-data.json"; + +export default class ResponsiveComponents extends Component { + constructor() { + super(); + this.state = { + data: Data, + }; + } + render() { + return ( +
+

hello

+
+ ); + } +} diff --git a/src/components/responsiveness/responsive-data.json b/src/components/responsiveness/responsive-data.json new file mode 100644 index 000000000..7dbda3078 --- /dev/null +++ b/src/components/responsiveness/responsive-data.json @@ -0,0 +1,25 @@ +{ + "items": + [ + { + "img": "sick", + "caption": "XCOV19 helps ill patients find hospitals and assess symptoms", + "dropdown": "As of July 13, India’s total for coronavirus Cases topped 878,000, including 23,000 deaths." + }, + { + "img": "form", + "caption": "XCOV19 requests patient data and completes pre-assessment in tandem with the HMS", + "dropdown": "4,300 Indians die every day due to lack of access to poor quality of healthcare." + }, + { + "img": "taxi", + "caption": "Patient arrives at the hospital", + "dropdown": "Government spending on healthcare falls below ₹2,000 per person, highlighting a need for technology efficiency and lean process." + }, + { + "img": "ward", + "caption": "Hospital admits patient in hassle-free process", + "dropdown": "In Mumbai, 99% of intensive care beds were full in July. Delhi needs 10 times the current available amount of expected cases." + } +] +} \ No newline at end of file diff --git a/src/components/responsiveness/svg-components/Form.jsx b/src/components/responsiveness/svg-components/Form.jsx new file mode 100644 index 000000000..7e7289474 --- /dev/null +++ b/src/components/responsiveness/svg-components/Form.jsx @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; + +export default class Form extends Component { + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} + +{ + /* */ +} diff --git a/src/components/responsiveness/svg-components/Sick.jsx b/src/components/responsiveness/svg-components/Sick.jsx new file mode 100644 index 000000000..0013eaf5e --- /dev/null +++ b/src/components/responsiveness/svg-components/Sick.jsx @@ -0,0 +1,70 @@ +import React, { Component } from 'react'; + +export default class Sick extends Component { + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} diff --git a/src/components/responsiveness/svg-components/Taxi.jsx b/src/components/responsiveness/svg-components/Taxi.jsx new file mode 100644 index 000000000..5e2be2acf --- /dev/null +++ b/src/components/responsiveness/svg-components/Taxi.jsx @@ -0,0 +1,125 @@ +import React, { Component } from 'react' + +export default class Taxi extends Component { + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} diff --git a/src/components/responsiveness/svg-components/Ward.jsx b/src/components/responsiveness/svg-components/Ward.jsx new file mode 100644 index 000000000..dfa7156ad --- /dev/null +++ b/src/components/responsiveness/svg-components/Ward.jsx @@ -0,0 +1,45 @@ +import React, { Component } from 'react' + +export default class Ward extends Component { + render() { + return ( + + + + + + + + + + + + + + + + ); + } +} diff --git a/src/containers/Home.jsx b/src/containers/Home.jsx index 454f649c8..19f613924 100644 --- a/src/containers/Home.jsx +++ b/src/containers/Home.jsx @@ -2,6 +2,13 @@ import React, { Component } from 'react'; import MetaTags from 'react-meta-tags'; import { Redirect } from 'react-router-dom'; import MaindHOC from '../components/MainHOC'; +import ResponsiveComponents from '../components/responsiveness/ResponsiveComponents'; +import Taxi from '../components/responsiveness/svg-components/Taxi'; +import Ward from '../components/responsiveness/svg-components/Ward'; +import Sick from '../components/responsiveness/svg-components/Sick'; +import Form from '../components/responsiveness/svg-components/Form'; + + class Home extends Component { constructor(props) { @@ -13,6 +20,42 @@ class Home extends Component { }; } + responsive1 = () => { + var x = document.getElementById("t1"); + if (x.style.display === "none") { + x.style.display = "block"; + } else { + x.style.display = "none"; + } + } + + responsive2 = () => { + var x = document.getElementById("t2"); + if (x.style.display === "none") { + x.style.display = "block"; + } else { + x.style.display = "none"; + } + } + + responsive3 = () => { + var x = document.getElementById("t3"); + if (x.style.display === "none") { + x.style.display = "block"; + } else { + x.style.display = "none"; + } + } + + responsive4 = () => { + var x = document.getElementById("t4"); + if (x.style.display === "none") { + x.style.display = "block"; + } else { + x.style.display = "none"; + } + } + getLocation = () => { if (window.navigator && window.navigator.geolocation) { navigator.geolocation.getCurrentPosition( @@ -68,6 +111,55 @@ class Home extends Component { +
+ How It Works +
+
+
+ +

XCOV19 helps ill patients find hospitals and assess symptom

+ +
+
+

+ As of July 13, India’s total for coronavirus Cases topped 878,000, including 23,000 deaths. +

+
+ +
+
+

XCOV19 requests patient data and completes pre-assessment in tandem with the HMS

+ +
+
+

+ 4,300 Indians die every day due to lack of access to poor quality of healthcare. +

+
+
+ +

Patient arrives at Hospital

+ +
+
+
+

+ Government spending on healthcare falls below ₹2,000 per person, + highlighting a need for technology efficiency and lean process +

+
+
+ +

Hospital admits patient in hasle-free process

+ +
+
+

+ In Mumbai, 99% of intensive care beds were full in July. + Delhi needs 10 times the current available amount of expected cases. +

+
+
); } diff --git a/src/images/form.svg b/src/images/form.svg new file mode 100644 index 000000000..a66e99f7d --- /dev/null +++ b/src/images/form.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/sick.svg b/src/images/sick.svg new file mode 100644 index 000000000..fe501a642 --- /dev/null +++ b/src/images/sick.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/taxi.svg b/src/images/taxi.svg new file mode 100644 index 000000000..3c26b0c2e --- /dev/null +++ b/src/images/taxi.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/ward.svg b/src/images/ward.svg new file mode 100644 index 000000000..07aec3d5a --- /dev/null +++ b/src/images/ward.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +