From 9d706987e8f5b59fc97b285b47a35ac49f391205 Mon Sep 17 00:00:00 2001 From: Mansi Mishra Date: Sat, 30 Oct 2021 20:24:58 +0530 Subject: [PATCH 1/6] Update index.html --- client/public/index.html | 54 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/client/public/index.html b/client/public/index.html index de0b1b5..e29910f 100755 --- a/client/public/index.html +++ b/client/public/index.html @@ -14,6 +14,60 @@ + +
+ + +
+ + +
+ +
+ + +
+ Part of #100Days100Projects +
+ From 6eb9cab74d53b35e38cdec29392d6519d4194ea6 Mon Sep 17 00:00:00 2001 From: Mansi Mishra Date: Sat, 30 Oct 2021 20:26:07 +0530 Subject: [PATCH 2/6] Update index.css --- client/src/index.css | 225 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) diff --git a/client/src/index.css b/client/src/index.css index 22f8f18..4b8d2c0 100755 --- a/client/src/index.css +++ b/client/src/index.css @@ -3,3 +3,228 @@ body { padding: 0; font-family: sans-serif; } +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #fafafa; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + transition: background 0.2s linear; +} + +body.dark { + background: #292C35; +} + +.checkbox { + opacity: 0; + position: right; +} + +.label { + background-color: #111; + border-radius: 50px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px; + position: relative; + height: 26px; + width: 50px; + transform: scale(1.5); +} + +.label .ball { + background-color: #fff; + border-radius: 50%; + position: absolute; + top: 2px; + left: 2px; + height: 22px; + width: 22px; + transform: translateX(0px); + transition: transform 0.2s linear; +} + +.checkbox:checked + .label .ball { + transform: translateX(24px); +} + + +.fa-moon { + color: #f1c40f; +} + +.fa-sun { + color: #f39c12; +} + + +/* SOCIAL PANEL CSS */ +.social-panel-container { + position: fixed; + right: 0; + bottom: 80px; + transform: translateX(100%); + transition: transform 0.4s ease-in-out; +} + +.social-panel-container.visible { + transform: translateX(-10px); +} + +.social-panel { + background-color: #fff; + border-radius: 16px; + box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); + border: 5px solid #001F61; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: 'Muli'; + position: relative; + height: 169px; + width: 370px; + max-width: calc(100% - 10px); +} + +.social-panel button.close-btn { + border: 0; + color: #97A5CE; + cursor: pointer; + font-size: 20px; + position: absolute; + top: 5px; + right: 5px; +} + +.social-panel button.close-btn:focus { + outline: none; +} + +.social-panel p { + background-color: #001F61; + border-radius: 0 0 10px 10px; + color: #fff; + font-size: 14px; + line-height: 18px; + padding: 2px 17px 6px; + position: absolute; + top: 0; + left: 50%; + margin: 0; + transform: translateX(-50%); + text-align: center; + width: 235px; +} + +.social-panel p i { + margin: 0 5px; +} + +.social-panel p a { + color: #FF7500; + text-decoration: none; +} + +.social-panel h4 { + margin: 20px 0; + color: #97A5CE; + font-family: 'Muli'; + font-size: 14px; + line-height: 18px; + text-transform: uppercase; +} + +.social-panel ul { + display: flex; + list-style-type: none; + padding: 0; + margin: 0; +} + +.social-panel ul li { + margin: 0 10px; +} + +.social-panel ul li a { + border: 1px solid #DCE1F2; + border-radius: 50%; + color: #001F61; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + height: 50px; + width: 50px; + text-decoration: none; +} + +.social-panel ul li a:hover { + border-color: #FF6A00; + box-shadow: 0 9px 12px -9px #FF6A00; +} + +.floating-btn { + border-radius: 26.5px; + background-color: #001F61; + border: 1px solid #001F61; + box-shadow: 0 16px 22px -17px #03153B; + color: #fff; + cursor: pointer; + font-size: 8px; + line-height: 20px; + padding: 12px 20px; + position: fixed; + bottom: 20px; + right: 20px; + z-index: 999; +} + +.floating-btn:hover { + background-color: #ffffff; + color: #001F61; +} + +.floating-btn:focus { + outline: none; +} + +.floating-text { + background-color: #001F61; + border-radius: 10px 10px 0 0; + color: #fff; + font-family: 'Muli'; + padding: 7px 15px; + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + text-align: center; + z-index: 998; +} + +.floating-text a { + color: #FF7500; + text-decoration: none; +} + +@media screen and (max-width: 480px) { + + .social-panel-container.visible { + transform: translateX(0px); + } + + .floating-btn { + right: 10px; + } +} From daabb9ba953195b6e3074f7815c5152930f7b547 Mon Sep 17 00:00:00 2001 From: Mansi Mishra Date: Sat, 30 Oct 2021 20:26:48 +0530 Subject: [PATCH 3/6] Update index.js --- client/src/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/client/src/index.js b/client/src/index.js index e0a64cf..0044522 100755 --- a/client/src/index.js +++ b/client/src/index.js @@ -26,6 +26,23 @@ const app = ( ); +const chk = document.getElementById('chk'); +chk.addEventListener('change', () => { + document.body.classList.toggle('dark'); +}); + +// SOCIAL PANEL JS +const floating_btn = document.querySelector('.floating-btn'); +const close_btn = document.querySelector('.close-btn'); +const social_panel_container = document.querySelector('.social-panel-container'); + +floating_btn.addEventListener('click', () => { + social_panel_container.classList.toggle('visible') +}); + +close_btn.addEventListener('click', () => { + social_panel_container.classList.remove('visible') +}); ReactDOM.render(app, document.getElementById('root')); // registerServiceWorker(); From 8b1aa7fa419c5b0dcf728394c09dd1206592331f Mon Sep 17 00:00:00 2001 From: Mansi Mishra Date: Sat, 30 Oct 2021 20:36:19 +0530 Subject: [PATCH 4/6] Update index.html --- client/public/index.html | 44 +--------------------------------------- 1 file changed, 1 insertion(+), 43 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index e29910f..37bf159 100755 --- a/client/public/index.html +++ b/client/public/index.html @@ -24,49 +24,7 @@ - - - - -
- Part of #100Days100Projects -
+ From ad36259be6d63123faf1fb140a8def17e4334680 Mon Sep 17 00:00:00 2001 From: Mansi Mishra Date: Sat, 30 Oct 2021 20:37:35 +0530 Subject: [PATCH 5/6] Update index.css --- client/src/index.css | 161 ------------------------------------------- 1 file changed, 161 deletions(-) diff --git a/client/src/index.css b/client/src/index.css index 4b8d2c0..113bb97 100755 --- a/client/src/index.css +++ b/client/src/index.css @@ -67,164 +67,3 @@ body.dark { color: #f39c12; } - -/* SOCIAL PANEL CSS */ -.social-panel-container { - position: fixed; - right: 0; - bottom: 80px; - transform: translateX(100%); - transition: transform 0.4s ease-in-out; -} - -.social-panel-container.visible { - transform: translateX(-10px); -} - -.social-panel { - background-color: #fff; - border-radius: 16px; - box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); - border: 5px solid #001F61; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-family: 'Muli'; - position: relative; - height: 169px; - width: 370px; - max-width: calc(100% - 10px); -} - -.social-panel button.close-btn { - border: 0; - color: #97A5CE; - cursor: pointer; - font-size: 20px; - position: absolute; - top: 5px; - right: 5px; -} - -.social-panel button.close-btn:focus { - outline: none; -} - -.social-panel p { - background-color: #001F61; - border-radius: 0 0 10px 10px; - color: #fff; - font-size: 14px; - line-height: 18px; - padding: 2px 17px 6px; - position: absolute; - top: 0; - left: 50%; - margin: 0; - transform: translateX(-50%); - text-align: center; - width: 235px; -} - -.social-panel p i { - margin: 0 5px; -} - -.social-panel p a { - color: #FF7500; - text-decoration: none; -} - -.social-panel h4 { - margin: 20px 0; - color: #97A5CE; - font-family: 'Muli'; - font-size: 14px; - line-height: 18px; - text-transform: uppercase; -} - -.social-panel ul { - display: flex; - list-style-type: none; - padding: 0; - margin: 0; -} - -.social-panel ul li { - margin: 0 10px; -} - -.social-panel ul li a { - border: 1px solid #DCE1F2; - border-radius: 50%; - color: #001F61; - font-size: 20px; - display: flex; - justify-content: center; - align-items: center; - height: 50px; - width: 50px; - text-decoration: none; -} - -.social-panel ul li a:hover { - border-color: #FF6A00; - box-shadow: 0 9px 12px -9px #FF6A00; -} - -.floating-btn { - border-radius: 26.5px; - background-color: #001F61; - border: 1px solid #001F61; - box-shadow: 0 16px 22px -17px #03153B; - color: #fff; - cursor: pointer; - font-size: 8px; - line-height: 20px; - padding: 12px 20px; - position: fixed; - bottom: 20px; - right: 20px; - z-index: 999; -} - -.floating-btn:hover { - background-color: #ffffff; - color: #001F61; -} - -.floating-btn:focus { - outline: none; -} - -.floating-text { - background-color: #001F61; - border-radius: 10px 10px 0 0; - color: #fff; - font-family: 'Muli'; - padding: 7px 15px; - position: fixed; - bottom: 0; - left: 50%; - transform: translateX(-50%); - text-align: center; - z-index: 998; -} - -.floating-text a { - color: #FF7500; - text-decoration: none; -} - -@media screen and (max-width: 480px) { - - .social-panel-container.visible { - transform: translateX(0px); - } - - .floating-btn { - right: 10px; - } -} From 91be896813ec16dd710ef7af2d0d8458cd605d30 Mon Sep 17 00:00:00 2001 From: Mansi Mishra Date: Sat, 30 Oct 2021 20:38:13 +0530 Subject: [PATCH 6/6] Update index.js --- client/src/index.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/client/src/index.js b/client/src/index.js index 0044522..b49bd3a 100755 --- a/client/src/index.js +++ b/client/src/index.js @@ -32,17 +32,6 @@ chk.addEventListener('change', () => { document.body.classList.toggle('dark'); }); -// SOCIAL PANEL JS -const floating_btn = document.querySelector('.floating-btn'); -const close_btn = document.querySelector('.close-btn'); -const social_panel_container = document.querySelector('.social-panel-container'); -floating_btn.addEventListener('click', () => { - social_panel_container.classList.toggle('visible') -}); - -close_btn.addEventListener('click', () => { - social_panel_container.classList.remove('visible') -}); ReactDOM.render(app, document.getElementById('root')); // registerServiceWorker();