From 37482286ec98728a5c90dedca5d29bb38014a4b8 Mon Sep 17 00:00:00 2001 From: kuldeep55567 Date: Mon, 15 May 2023 09:11:05 +0530 Subject: [PATCH] Made responsiveness of pages and fixed UI --- public/css/call.css | 277 ++++++------------------ public/home_page.js | 1 - public/images/cam.png | Bin 0 -> 766 bytes public/images/mike.png | Bin 0 -> 688 bytes public/index.css | 99 ++++++++- public/index.html | 58 ++--- public/scripts/call.js | 417 +++++++++++------------------------- public/scripts/dashboard.js | 2 +- public/scripts/index.js | 3 - public/signup.html | 4 - public/videochat.html | 208 +++--------------- 11 files changed, 339 insertions(+), 730 deletions(-) delete mode 100644 public/home_page.js create mode 100644 public/images/cam.png create mode 100644 public/images/mike.png diff --git a/public/css/call.css b/public/css/call.css index bef469d..d4e61d9 100644 --- a/public/css/call.css +++ b/public/css/call.css @@ -1,250 +1,95 @@ -* { - padding: 0; - margin: 0; +body { + background-color: #FAFAFA; + color: white; + font-family: 'Poppins', sans-serif; } -html { - color: var(--color-black); -} -#topcover{ - background-color:aliceblue; + +#logo { width: 100%; } -#toppest { - max-width: 1200px; - text-align: end; - background-color:aliceblue; - margin: auto; - height: 30px; -} -#toppest h3 { - font-size: 16px; - color: var(--color-grey); - padding-top: 5px; -} -nav { - display: flex; - max-width: 1200px; +#logoDiv { + width: 12%; margin: auto; - justify-content: space-between; - margin-top: 20px; + margin-top: 25px; + /* border: 1px solid wheat; */ } -nav img { - width: 200px; -} -:root { - --color-white: #ffff; - --color-light: #f4f4f4; - --color-dark: #525252; - --color-black: #0B3558; - --color-primary: #006BFF; - --color-primary-light: rgba(28, 99, 242, 0.12); - --color-success: #22c857; - --color-warning: #ffce31; - --color-grey: rgb(71, 103, 136); +#videoDiv { + display: grid; + width: 80%; + margin: auto; + margin-top: 40px; + justify-content: space-between; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: auto; + gap: 5px; + place-items: center; + /* border: 1px solid white; */ } -#top_nav { - display: flex; - align-items: center; - gap: 50px; - font-size: 16px; - font-weight: 700; +video { + width: 99%; + height: 99%; + object-fit: cover; + border: 2px solid #a7a1a1; + border-radius: 2%; } -#acc_btn { +#controls { display: flex; + justify-content: center; align-items: center; } -#my_ac_btn { - border-radius: 5px; - background-color: var(--color-primary); - color: var(--color-light); - font-size: 20px; - border: none; - padding: 5px; - padding-inline: 8px; - font-weight: 600; - margin-left: 10px; - cursor: pointer; -} -.dialWrapper { - width: 50%; - display: flex; - flex-direction: column; -} -.dialNumpadHWrapper { - display: flex; - flex-direction: row; - justify-content: center; - align-items: stretch; -} -.dialNumber { - display: flex; - width: 100px; +.icon { + width: 50px; height: 50px; - align-items: center; - justify-content: center; cursor: pointer; } -.incomingWrapper { - width: 300px; - display: flex; - flex-direction: column; -} -.itemWrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} -.actionButton{ - display: flex; - width: 100px; +#hide-audio { + width: 50px; height: 50px; - align-items: center; - justify-content: center; cursor: pointer; - font-size: 27px; - font-weight: 600; - color: var(--color-light); - background-color: var(--color-primary); - border-radius: 10px; - border: 2px solid var(--color-primary); -} -.actionButton:nth-child(2){ - color: red; - background-color: var(--color-light); - width: 50px; - border-radius: 50%; - margin-left: 100px; - border: 2px solid red; + background-color: white; + border-radius: 100%; + padding: 8px; + margin: 10px; margin-top: 40px; + border: 1px solid #a7a1a1; } -.actionButton:nth-child(1){ - color: green; - background-color: var(--color-light); +#hide-video { width: 50px; - border-radius: 50%; - border: 2px solid green; - margin-top: 40px; - -} -.dialActionButton { - display: flex; - width: 80px; - height: 40px; - align-items: center; - justify-content: center; - font-size:27px; + height: 50px; cursor: pointer; - font-weight: 600; - color: var(--color-light); - background-color: var(--color-primary); - border-radius: 10px; - border: 2px solid var(--color-primary); -} -#errorMessage { - color: red; -} -input{ - width: 450px; - border-radius: 5px; - border: 2px solid var(--color-primary); -} -::placeholder{ - color: var(--color-primary); -} -#answer{ -} -.itemWrapper > h2{ - font-size: 35px; - text-align: center; - width: 520px; -} -#callfor{ - display: flex; + background-color: white; + border-radius: 100%; + padding: 8px; + margin: 10px; + margin-top: 40px; + border: 1px solid #a7a1a1; } -#callfor h1{ - font-size: 70px; - margin-top: 20px; - color: #0c69eb; +#hangup { + background-color: white; + border-radius: 100%; + padding: 8px; + margin-top: 40px; + border: 1px solid #a7a1a1; } - -/* Footer Part */ - -#bye{ - display: flex; - justify-content: space-evenly; -width: 100%; -background-color: var(--color-black); -color: var(--color-light); -position: fixed; -bottom: 0; -height: 30px; -font-weight: 600; -} -#social{ - display: flex; - width: 10%; - justify-content: space-between; -} -.pops{ - font-size: 12px; - background-color: rgb(220, 235, 248); - padding: 3px; - border-radius: 12px; - color: var(--color-primary); -} -#eng h3{ - font-size: 16px; -} -#bye p{ - font-size: 16px; -} -#userInfo h1{ - font-size: 40px; - color: var(--color-grey); -} -#nameHere{ - font-size: 40px; - color: var(--color-primary); -} -#incoming i{ -color: var(--color-primary); -} -#incoming { - font-size: 40px; - color: var(--color-dark); -} -#otherUserNameC{ -font-size: 30px; +#hangup:hover, #hide-audio:hover, #hide-video:hover{ + background-color: #eeebeb; } -#oncall{ - font-size: 30px; -} -#callings{ - font-size: 40px; - color: var(--color-dark); -} -#call{ - width: 100%; -} -.dialActionButton{ -} -.dialNumber{ - padding-left: 40%; -} -#timer{ - font-size: 30px; + +h1{ + color: black; text-align: center; } -#otherUserNameC{ - font-size: 30px; + +#logoDiv{ + width: 20%; + margin: auto; } \ No newline at end of file diff --git a/public/home_page.js b/public/home_page.js deleted file mode 100644 index 8b13789..0000000 --- a/public/home_page.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/images/cam.png b/public/images/cam.png new file mode 100644 index 0000000000000000000000000000000000000000..d800e4a4397ddf96b3f360a3dd15ef940981a112 GIT binary patch literal 766 zcmVJQ{{96fYKr6`3%s_ZAA18n z2r%MzbuEr0ypR`S4_%`PaNh?O&S`khb$7%aw4ns@c)J<>OlDEthZeXRcgR^r!Hc%m zGhjr3+l>U=t1}PZc)&ogC{5(^%fxZESn{#}-y#<9HEeL(+q=dBXD#rtTxYa?XL7X0 ziyuoqzd9H?9=TV@LCNK|mijx+p5RMGDWTcm(%rqvlBX?c|Ekfv013inv;36FtQYcG z)m;23K%w*^@_dp6OlPwz1vq8NVx1bH1l%cyyk4tV(Q$T8_w;0vAYd|=TQ20uVB4If zMkoP=k^tac&0@fr^5=?i2^jC|TPnbi0FzDD2qA#HRu=HIj({V+G4qA|9JPS=ot;Z8 zc}&QOkTpV$fS2WfgEa~jXUL7gG>9sEMSwWYE+NNTtPyS(@PL7`gcHAqI`G5-+k9g> z1Q?52fF+09s1Z(p0AB>yA3XPsnKuQjs4O}bxDjReSOnNVA|8~s7uP*%flDpSy?&_yA?r&2(LqT_6~0sdO^O24?!TmS$707*qoM6N<$g1&oDf&c&j literal 0 HcmV?d00001 diff --git a/public/images/mike.png b/public/images/mike.png new file mode 100644 index 0000000000000000000000000000000000000000..56d873456dc1b64fca683868719fdf2e4bfe191a GIT binary patch literal 688 zcmV;h0#E&kP)R)8OHtZWuz%n7J>ss6CzMF zAp%7cA~2*8m@GuBkjDggCgf4ic6$+bp<4^hIWQFXl#2M=F=pAUjXb@G2%K_b-5hSN z)b?@k4v>xRl{k(o&X&Y6h5VUg^?xL_8qx(B@!A@LcK~?m-RTc`_DeY&xR{MgqUf*} zl_vvtK*+P6nDNZs8690Iz=J---*Wwls)M9Jf>xVp3X zeVWzkIw41Za9I{8Gpr{f<{)ryHYx#A~ZoTW^*UArA`h-4o&Jm$U5B z3zw~wyfSCpH?elVDFPu62+-=0_(Y00y9EB9IDhB2m}IVF24W; WJ|JVMgh+w_0000 - @@ -18,42 +17,53 @@ - -

English

- - - + +

Easy

scheduling

ahead

-

Calendly is your scheduling automation platform for eliminating the back-and-forth emails for finding the +

MeetEase is your scheduling automation platform for eliminating the back-and-forth emails for finding the perfect time — and so much more.

-
@@ -274,7 +284,7 @@

Get started in seconds