diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..17c08a5 Binary files /dev/null and b/.DS_Store differ diff --git a/TermsOfService.html b/TermsOfService.html new file mode 100644 index 0000000..203f413 --- /dev/null +++ b/TermsOfService.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + Terms Of Service + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/about.html b/about.html index 9ec366d..ae1cf93 100644 --- a/about.html +++ b/about.html @@ -14,7 +14,7 @@ - OCRadar: About + About @@ -33,7 +33,7 @@
- +

OCRadar

@@ -51,18 +51,18 @@

OCRadar

Overview

+ +
-

OCRadar is an innovative solution designed to revolutionize
- the detection of oral cancer. Harnessing the power of artificial
- intelligence and machine learning, OCRadar offers a
- sophisticated tool for both medical professionals and the general
- public, facilitating early detection and improving the chances of
+

OCRadar is an innovative solution designed to revolutionize + the detection of oral cancer. Harnessing the power of artificial + intelligence and machine learning, OCRadar offers a + sophisticated tool for both medical professionals and the general + public, facilitating early detection and improving the chances of successful treatment.

-
-

Benefits

@@ -110,8 +110,17 @@

OCRadar

-
-

Footer ^^

+
+

App Store Connect

+
+ +
+

Copyright © Apple Inc. All Rights Reserved.

+

|

+ Terms of Service + | + Privacy Policy +
diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..50ee724 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,853 @@ +* {box-sizing: border-box;} + +/* ~~~~~~~~~~~~~~~ basic css ~~~~~~~~~~~~~~~ */ +body { + overflow: overlay; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background-color: rgba(0, 0, 0); +} + +/* ~~~~~~~~~~~~~~~ header ~~~~~~~~~~~~~~~ */ +.sticky { + position: -webkit-sticky; + position: sticky; + top: 0; +} + +.header { + display: block; + overflow: hidden; + background-color: rgba(0, 0, 0); + padding: 10px 10px 10px 10px; +} + +.header a { + float: left; + color: rgb(255, 255, 255); + text-align: center; + padding: 12px 12px 12px 12px; + text-decoration: none; + font-size: 18px; + line-height: 25px; + border-radius: 4px; +} + +.header h4 { + margin:0px; + float: left; + color: rgb(241, 241, 241); + text-align: center; + padding: 15px 12px 12px 12px; + text-decoration: none; + font-size: 24px; + line-height: 25px; + border-radius: 4px; + } + +.logo { + width: 30px; + height: 30px; +} + +.logos { + width: 54px; + height: 54px; +} + +.header a.logo { + font-size: 25px; + font-weight: bold; +} + +.header a:hover { + background-color: #4c454e; + color: rgb(255, 255, 255); +} + +.header-right { + float: right; +} + +@media screen and (max-width: 500px) { + .header a { + float: none; + display: block; + text-align: left; + } + + .header h4 { + float: none; + display: block; + text-align: left; + } + + .header-right { + float: none; + } +} + +/* ~~~~~~~~~~~~~~~ scrollbar ~~~~~~~~~~~~~~~ */ +/* width */ +::-webkit-scrollbar { + width: 3px; + background: rgb(0, 0, 0); +} + +/* handle */ +::-webkit-scrollbar-thumb { + background: rgba(240, 233, 242, 0.4); +} + +::-webkit-scrollbar-thumb:hover { + background: #bfb5be; +} + +/* ~~~~~~~~~~~~~~~ beginning of first pg ~~~~~~~~~~~~~~~ */ +.main-text-heading { + overflow: hidden; + position: relative +} + +.headline { + position: absolute; + padding: 0px 35px 1px 95px; + top: -80px; + float: left; + line-height: 80px; + font-size: 105px; + color: rgba(241, 241, 241, 0.879); + animation: smooth-appear 2s; +} + +.text { + position: absolute; + padding: 225px 25px 5px 95px; + float: left; + text-align: left; + line-height: 30px; + color:rgba(213, 213, 213, 0.815); + font-size: 21px; + animation: fade-in 4s 0s; +} + +@keyframes smooth-appear { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@keyframes fade-in { + 0% {opacity: 0;} + 25% {opacity: 0;} + 100% {opacity: 1;} +} + +.bground { + position: static; + width: 1300px; + overflow: hidden; +} + +.img-wrapper { + &:before { + content: ""; + background-image: linear-gradient( + rgba(0,0,0, 0) 0%, + rgba(0,0,0,0) 20%, + rgba(0,0,0,0.4) 80%, + rgba(0, 0, 0, 0.7) 90%, + rgba(0, 0, 0, 0.9) 95%, + rgba(0,0,0,1) 100% + ); + } +} + +@media screen and (max-width: 975px) { + .text { + font-size: 18px; + padding: 210px 25px 5px 95px; + line-height: 27px; + } + .headline { + font-size: 85px; + line-height: 70px; + top: -60px; + } +} + +@media screen and (max-width: 790px) { + .text { + font-size: 16px; + padding: 170px 25px 5px 95px; + line-height: 23px; + } + .headline { + font-size: 60px; + line-height: 50px; + top: -15px; + } +} + +@media screen and (max-width: 625px) { + .text { + font-size: 16px; + padding: 150px 25px 5px 75px; + } + .headline { + font-size: 40px; + padding: 35px 35px 1px 75px; + line-height: 35px; + } +} + +@media screen and (max-width: 500px) { + .text { + font-size: 14px; + padding: 140px 25px 5px 45px; + } + .headline { + font-size: 35px; + padding: 35px 35px 1px 45px; + line-height: 35px; + } +} + +@media screen and (min-width: 1300px) { + .text { + font-size: 25px; + padding: 285px 25px 5px 95px; + line-height: 37px; + } + .headline { + font-size: 115px; + padding: 0px 35px 1px 95px; + line-height: 90px; + } + .bground { + width: 100vw; + } +} + +/* ~~~~~~~~~~~~~~~ footer ~~~~~~~~~~~~~~~ */ +.footer1 { + overflow: hidden; + display: block; + bottom: 0; + width: 100%; + height: 200px; + background-color: rgb(0, 0, 0); + color: rgb(144, 144, 144); + text-align: left; + padding: 45px 0px 45px 0px; + position: relative; +} + +.footer2 { + padding: 0px 0px 30px 45px; + color: rgb(144, 144, 144); +} + +.footer-line { + background-color: rgb(144, 144, 144); + height: 1.5px; + width: 90%; + margin-left: 5%; +} + +.footer3 { + padding: 30px 20px 0px 45px; + color: rgb(144, 144, 144); +} + +.centerthefooter { + display: flex; +} + +@media screen and ((max-width: 650px)) { + .footer1 { + padding: 30px 0; + height: 250px + } + + .footer2 { + text-align: center; + padding: 0 20px 20px; + } + + .centerthefooter { + flex-direction: column; + align-items: center; + padding-top: 20px; + } + + .footer3 { + padding: 10px 0; + text-align: center; + } + + .footer3:nth-child(2), + .footer3:nth-child(4) { + display: none; + } +} + +/* ~~~~~~~~~~~~~~~ Back to Top Button ~~~~~~~~~~~~~~~ */ +#myBtn { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + border: none; + outline: none; + background-color: rgba(29, 22, 58, 0.422); + color: white; + cursor: pointer; + padding: 15px; + border-radius: 5px; + font-size: 15px; + width: 40px; + height: 40px; + box-sizing: border-box; + line-height: 0px; +} + +p { + margin: 0; +} + +#myBtn:hover { + background-color: #8e3d74; /* Add a dark-grey background on hover */ +} + +/* ~~~~~~~~~~~~~~~ font: poppins ~~~~~~~~~~~~~~~ */ +.poppins-thin { + font-family: "Poppins", sans-serif; + font-weight: 101; + font-style: normal; + } + + .poppins-extralight { + font-family: "Poppins", sans-serif; + font-weight: 200; + font-style: normal; + } + + .poppins-light { + font-family: "Poppins", sans-serif; + font-weight: 300; + font-style: normal; + } + + .poppins-regular { + font-family: "Poppins", sans-serif; + font-weight: 400; + font-style: normal; + } + + .poppins-medium { + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; + } + + .poppins-semibold { + font-family: "Poppins", sans-serif; + font-weight: 600; + font-style: normal; + } + + .poppins-bold { + font-family: "Poppins", sans-serif; + font-weight: 700; + font-style: normal; + } + + .poppins-extrabold { + font-family: "Poppins", sans-serif; + font-weight: 800; + font-style: normal; + } + + .poppins-black { + font-family: "Poppins", sans-serif; + font-weight: 900; + font-style: normal; + } + + .poppins-thin-italic { + font-family: "Poppins", sans-serif; + font-weight: 100; + font-style: italic; + } + + .poppins-extralight-italic { + font-family: "Poppins", sans-serif; + font-weight: 200; + font-style: italic; + } + + .poppins-light-italic { + font-family: "Poppins", sans-serif; + font-weight: 300; + font-style: italic; + } + + .poppins-regular-italic { + font-family: "Poppins", sans-serif; + font-weight: 400; + font-style: italic; + } + + .poppins-medium-italic { + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: italic; + } + + .poppins-semibold-italic { + font-family: "Poppins", sans-serif; + font-weight: 600; + font-style: italic; + } + + .poppins-bold-italic { + font-family: "Poppins", sans-serif; + font-weight: 700; + font-style: italic; + } + + .poppins-extrabold-italic { + font-family: "Poppins", sans-serif; + font-weight: 800; + font-style: italic; + } + + .poppins-black-italic { + font-family: "Poppins", sans-serif; + font-weight: 900; + font-style: italic; + } + +/* ~~~~~~~~~~~~~~~ font: belanosima ~~~~~~~~~~~~~~~ */ +.lato-thin { + font-family: "Lato", sans-serif; + font-weight: 100; + font-style: normal; +} + +.lato-light { + font-family: "Lato", sans-serif; + font-weight: 300; + font-style: normal; +} + +.lato-regular { + font-family: "Lato", sans-serif; + font-weight: 400; + font-style: normal; +} + +.lato-bold { + font-family: "Lato", sans-serif; + font-weight: 700; + font-style: normal; +} + +.lato-black { + font-family: "Lato", sans-serif; + font-weight: 900; + font-style: normal; +} + +.lato-thin-italic { + font-family: "Lato", sans-serif; + font-weight: 100; + font-style: italic; +} + +.lato-light-italic { + font-family: "Lato", sans-serif; + font-weight: 300; + font-style: italic; +} + +.lato-regular-italic { + font-family: "Lato", sans-serif; + font-weight: 400; + font-style: italic; +} + +.lato-bold-italic { + font-family: "Lato", sans-serif; + font-weight: 700; + font-style: italic; +} + +.lato-black-italic { + font-family: "Lato", sans-serif; + font-weight: 900; + font-style: italic; +} + +/* sf pro */ +@font-face { + font-family: "San Francisco"; + font-weight: 400; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff"); +} + +/* ---------------------------------------------------------------------------------------------------- */ +/* about: line animation */ +.animated-line { + width:5px; + height: 3500px; + border-radius: 10px; + overflow:hidden; + background: rgb(0, 0, 0, 0); + position: absolute; + left: 250px; + top: 275px; +} + +.animated-line::before { + content:''; + display:block; + width:5px; + height:1000px; + background:rgb(241, 235, 241, 0.5); + position:absolute; + animation: animate 5s ease-in-out infinite; +} + +@keyframes animate { + 0% { top: -100%; } + 50% { top: 0; } + 100% { top: 100%; } +} + +/*--about pg--*/ +.beg { + overflow: hidden; + position: relative; +} + +.beg-part { + overflow: hidden; + position: absolute; + color: white; + top: 150px; + left: 225px; +} + +/*--overview + paragraph + phone img--*/ +.beg-head { + padding: 0px 0px 0px 0px; + animation: smooth-appear 2s; + font-size: 80px; +} + +.beg-text { + padding: 10px 0px 150px 100px; + animation: fade-in 4s 0s; + font-size: 21px; + color: rgba(213, 213, 213, 0.815); + width: 800px; + position: relative; +} + +.phone { + float: right; + position: relative; + top: 0px; + right: 15px; + width: 175px; + animation: fade-in 6s 0s; +} + +/*--benefits + text--*/ +.beg-head2 { + padding: 75px 0px 0px 100px; + animation: fade-in 3s 0s; + font-size: 55px; + text-align: center; + color: rgb(215, 215, 215); +} + +.beg-text2 { + padding: 25px 0px 100px 100px; + animation: fade-in 6s 0s; + font-size: 21px; + color: rgba(230, 230, 230, 0.815); + display: flex; +} + +.first { + margin: 15px; + background-color: rgba(36, 26, 50, 0.25); + float: left; + width: 290px; + border-radius: 10px; + position: static; + padding: 0px 10px 0px 10px; + text-align: center; + vertical-align: middle; + border-color: rgb(109, 109, 109); + border-width: 1px; + border-style: solid; +} + +.second { + margin: 15px; + background-color: rgba(36, 26, 50, 0.25); + width: 290px; + border-radius: 10px; + position: static; + padding: 0px 10px 0px 10px; + text-align: center; + vertical-align: middle; + border-color: rgb(109, 109, 109); + border-width: 1px; + border-style: solid; +} + +.third { + margin: 15px; + background-color: rgba(36, 26, 50, 0.25); + float: right; + width: 290px; + border-radius: 10px; + position: static; + padding: 0px 10px 0px 10px; + text-align: center; + vertical-align: middle; + border-color: rgb(109, 109, 109); + border-width: 1px; + border-style: solid; +} + +.p1 { + padding: 10px 0px 0px 0px; +} + +.p2 { + padding: 25px 0px 0px 0px; +} + +/*--Key Features + paragraph--*/ +.beg-head3 { + padding: 200px 0px 0px 100px; + animation: fade-in 3s 0s; + font-size: 55px; + text-align: center; + color: rgb(215, 215, 215); +} + +h4 {margin:0;} + +h6 {font-size: 30px;} + +.beg-text3 { + margin-right: -20px; + padding: 10px 0px 150px 125px; + animation: fade-in 4s 0s; + font-size: 21px; + color: rgba(213, 213, 213); + width: 1000px; +} + +/*--responsive--*/ +@media screen and (max-width: 1400px) { + .animated-line { + left: 150px; + top: 250px; + } + .beg-part { + left: 125px; + top: 125px; + } +} + +@media screen and (max-width: 1275px) { + .beg-head { + font-size: 70px; + } + .beg-text { + font-size: 18px; + width: 650px; + } + .phone { + width: 150px; + right: 100px; + } + .beg-head2 { + font-size: 45px; + padding: 50px 0px 0px 25px; + } + .beg-text2 { + font-size: 18px; + } + .first { + width: 235px; + } + .second { + width: 235px; + } + .third { + width: 235px; + } + .beg-head3 { + font-size: 45px; + padding: 200px 0px 0px 25px; + } + .h6 { + font-size: 22px; + } + .beg-text3 { + font-size: 18px; + padding: 10px 100px 150px 125px; + } +} + +@media screen and (max-width: 1125px) { + .animated-line { + left: 100px; + top: 200px; + } + .beg-part { + left: 75px; + top: 75px; + } +} + +@media screen and (max-width: 1050px) { + .beg-text { + width: 600px; + } + .phone { + right: 75px; + } + .beg-head2 { + padding: 50px 0px 0px 375px; + text-align: left; + } + .first { + margin: 5px; + } + .second { + margin: 5px; + } + .third { + margin: 5px; + } + .beg-text3 { + width: 900px; + } +} + +@media screen and (max-width: 950px) { + .phone { + opacity: 0.5; + top: -75px; + right: 175px; + } + .beg-head { + font-size: 60px; + } + .beg-head2 { + padding: 15px 0px 0px 100px; + } + .beg-text2 { + display: block; + } + .first { + width: 250px; + height: 225px; + position: absolute; + } + .second { + width: 250px; + height: 225px; + position: absolute; + top: 675px; + left: 250px; + } + .third { + padding: 20px 10px 0px 10px; + width: 250px; + height: 225px; + position: absolute; + top: 835px; + left: 400px; + } + .beg-head3 { + padding: 600px 0px 0px 100px; + text-align: left; + } + .beg-text3 { + width: 750px; + } +} + +@media screen and (max-width: 825px) { + .beg-head { + font-size: 50px; + padding: 20px 0px 0px 0px; + } + .beg-text { + font-size: 16px; + } + .beg-head2 { + font-size: 35px; + } + .beg-text2 { + font-size: 16px; + } + .first { + height: 215px; + width: 230px; + } + .second { + left: 200px; + height: 215px; + width: 230px; + top: 625px; + } + .third { + left: 315px; + height: 215px; + width: 230px; + top: 765px; + } + .beg-head3 { + font-size: 35px; + } + h6 {font-size: 22px;} + .beg-text3 { + font-size: 16px; + width: 675px; + margin-right: -10px; + } +} +@media screen and (max-width: 710px) { + +} + +/*-- contact us pg --*/ +.googleforms { + overflow: hidden; + display: block; + text-align: center; + margin-left: 10%; + margin-right:25%; + width: 75%; +} + +@media screen and (max-width: 1000px) { + .googleforms { + margin-left: 0%; + width: 100%; + } +} diff --git a/assets/img/3dbackground.jpg b/assets/img/3dbackground.jpg new file mode 100644 index 0000000..9d2a1ce Binary files /dev/null and b/assets/img/3dbackground.jpg differ diff --git a/assets/img/3dbackground2.jpg b/assets/img/3dbackground2.jpg new file mode 100644 index 0000000..e8da4db Binary files /dev/null and b/assets/img/3dbackground2.jpg differ diff --git a/assets/img/3dbackground3.jpg b/assets/img/3dbackground3.jpg new file mode 100644 index 0000000..0899975 Binary files /dev/null and b/assets/img/3dbackground3.jpg differ diff --git a/assets/img/3dbackground4.jpg b/assets/img/3dbackground4.jpg new file mode 100644 index 0000000..c20f889 Binary files /dev/null and b/assets/img/3dbackground4.jpg differ diff --git a/assets/img/OCRadarLogo.png b/assets/img/OCRadarLogo.png new file mode 100644 index 0000000..8c31c5a Binary files /dev/null and b/assets/img/OCRadarLogo.png differ diff --git a/assets/img/phone.png b/assets/img/phone.png new file mode 100644 index 0000000..791f903 Binary files /dev/null and b/assets/img/phone.png differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..f461640 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,26 @@ +/* ~~~~~~~~~~~~~~~ Go to Top Button ~~~~~~~~~~~~~~~ */ +// When the user scrolls down 20px from the top of the document, show the button +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) { + document.getElementById("myBtn").style.display = "block"; + } else { + document.getElementById("myBtn").style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera + +} + +/* +- frontend +- react js + - hooks functions + - everything in one +- javascript framework +*/ \ No newline at end of file diff --git a/contact.html b/contact.html index 10dd5ac..61196ab 100644 --- a/contact.html +++ b/contact.html @@ -14,7 +14,7 @@ - OCRadar: Contact Us + Contact Us @@ -36,7 +36,7 @@
- +

OCRadar

@@ -46,5 +46,27 @@

OCRadar

Contact Us
+ +
+ +
+ + +
+

App Store Connect

+
+ +
+

Copyright © Apple Inc. All Rights Reserved.

+

|

+ Terms of Service + | + Privacy Policy +
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 2a26222..ed43231 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@
- +

OCRadar

@@ -65,9 +65,18 @@
A new way to
detect oral cancer
- -
-

Footer ^^

+ +
+

App Store Connect

+
+ +
+

Copyright © Apple Inc. All Rights Reserved.

+

|

+ Terms of Service + | + Privacy Policy +
diff --git a/privacy.html b/privacy.html new file mode 100644 index 0000000..9c90b17 --- /dev/null +++ b/privacy.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + Privacy Policy + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/readme.md b/readme.md deleted file mode 100644 index 30d74d2..0000000 --- a/readme.md +++ /dev/null @@ -1 +0,0 @@ -test \ No newline at end of file