diff --git a/client/src/App.css b/client/src/App.css index e26a5277..520a56e5 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,6 +1,6 @@ /*! Todo Application - CSS Version 0.5.3 Copyright 2021 */ @import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&display=swap'); * { margin: 0; padding: 0; @@ -157,7 +157,7 @@ label { user-select: none; } color: #FFF; background-color: rgb(252, 52, 52); } -.oauth-box:hover { opacity: 1; transform: scale(1.009); } +.oauth-box:hover { opacity: 1; transform: scale(1.02); } .oauth-box:visited { color: #FFF; } .oauth-box svg { display: inline-block; @@ -902,6 +902,28 @@ blockquote em {font-style: italic;} .large { font-size: 60px; } .center-object { margin: auto; max-width: 70%; } .justify-center { justify-content: center; } +.text-animation { + font-size: 40px; + color: #1a73e8; + letter-spacing: 2px; + font-family: 'Noto Sans', sans-serif; +} +.cursor { + width: 3px; + height: 60px; + display: inline-block; + background-color: #1a73e8; + animation: blink .75s step-end infinite; +} +.none { display: none !important; } +@keyframes blink { + from, to { + background-color: transparent; + } + 50% { + background-color: #1a73e8; + } +} @keyframes octocat-wave { 0%,100%{transform:rotate(0)} 20%,60%{transform:rotate(-25deg)} @@ -963,6 +985,7 @@ blockquote em {font-style: italic;} .footer__socialBtn { width: 75%; } .btn__outline { width: 50%; margin-top: 20px; } .privacy-policy { margin: 0 20px; } + .center-object { max-width: 100%; } } @media only screen and (max-width: 600px) { .animation__message { width: 100%; height: auto; } diff --git a/client/src/App.min.css b/client/src/App.min.css index 6c3eccd6..5e1f4599 100644 --- a/client/src/App.min.css +++ b/client/src/App.min.css @@ -1 +1 @@ -/*! Todo Application - CSS Version 0.5.3 Copyright 2021 */@import url(https://fonts.googleapis.com/css2?family=Chilanka&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap);*{margin:0;padding:0}body{margin:0;padding:0;min-height:100vh;min-width:300px;color:#212121;background-color:#fff;scroll-behavior:smooth;transition:all .4s;-webkit-tap-highlight-color:transparent;font-family:Chilanka,sans-serif}body.dark{color:#fff!important;background-color:#212121!important}a:visited{color:#212121}body.dark a,body.dark a:visited{color:#fff}body.dark tbody tr:nth-child(odd){background-color:#3a3a3a;transition:all .4s}body.dark tbody tr:hover{background-color:#333;transition:all .4s}body.dark .btn__outline{color:#7bb4ff;border:2px solid #7bb4ff}body.dark .btn__outline:hover{background-color:#7bb4ff;color:#fff}body.dark .btn__outline:focus,body.dark .solid{border-color:#7bb4ff;background-color:#66a8ff;color:#fff}body.dark .about,body.dark .btn__changeMode,body.dark .contact,body.dark .form__contact,body.dark .navbar,body.dark .projects__card,body.dark select{background-color:#333}body.dark .MuiSelect-root,body.dark .btn__scrollTop,body.dark .closeBtn,body.dark .contact__sendBtn,body.dark .footer,body.dark .get_in_touch,body.dark .main__button,body.dark .navbar a,body.dark .navbar__logo,body.dark .projects__detail,body.dark .toggleNavbar button,body.dark blockquote,body.dark input,body.dark label,body.dark select,body.dark svg,body.dark textarea{color:#fff!important}body.dark .animation__underline:after,body.dark .bar1,body.dark .bar2,body.dark .bar3,body.dark .contact__body .animation__underline:after,body.dark .loading div:after,body.dark .modal__body .animation__underline:after,body.dark .navbar .animation__underline:after{background:#fff}body.dark .modal__closeBtn,body.dark .modal__container,body.dark .otp input{background-color:#333;color:#fff}body.dark .blue-text,body.dark .link,body.dark .main__title,body.dark .projects__viewMore{color:#79c3ff!important}body.dark .link:focus{color:#5cb5ff!important}body.dark .otp input{border-color:#3b3939}body.dark .navbar{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}body.dark .footer{background-color:#191919}body.dark .contact__onFocus{background:#fff}body.dark .projects__viewMore{border-color:#79c3ff}body.dark .btn-config .MuiButtonBase-root{color:#e7e7e7}body.dark ::-webkit-calendar-picker-indicator{filter:invert(1)}body.dark .main__button{box-shadow:2px 1000px 1px #212121 inset}body.dark .projects__viewMore:hover{background-color:#79c3ff;color:#212121}body.dark .footer__socialBtn a:hover svg{color:#fff!important}body.dark .footer__socialBtn a svg{color:rgb(66 133 244)!important}body.dark .main__divider{background-image:linear-gradient(315deg,#0cbaba 0,#f400eb 74%)}body.dark .loader{background-color:rgba(114,114,114,.61)}body.dark .form__contact{box-shadow:0 1px 2px 0 rgb(0 0 0 / 60%),0 1px 3px 1px rgb(0 0 0 / 30%)}body.dark .btn__label{background-color:#333;color:#fff;border-style:solid;border-color:#333}body.dark .btn__value{background-color:#fff;border-color:#fff;border-style:solid;color:#333}body.dark .MuiInput-underline:after{border-bottom:2px solid #fff!important}body.dark .MuiInput-underline:hover:not(.Mui-disabled):before{border-bottom:1px solid #7c7c7c!important}.MuiSvgIcon-root{color:#212121}a,button{user-select:none;cursor:pointer}label{user-select:none}.monospace{font-weight:lighter;font-family:'Roboto Mono',monospace}.privacy-policy{font-family:'Noto Sans JP',sans-serif;margin:auto 150px;padding-top:100px;transition:all .4s}.inline{display:inline}.oauth-container{display:relative;width:100%;text-align:center;margin:20px 0}.oauth-box{display:flex;width:100%;outline:0;border:none;opacity:.9;border-radius:5px;transition:all .3s;text-decoration:none}.github{color:#fff;background-color:#000}.google{color:#fff;background-color:rgb(66 133 244)}.primary{color:#fff;background-color:rgb(66 133 244)}.danger{color:#fff;background-color:#fc3434}.oauth-box:hover{opacity:1;transform:scale(1.009)}.oauth-box:visited{color:#fff}.oauth-box svg{display:inline-block;margin-top:auto;margin-bottom:auto;padding:10px}.oauth-box p{font-size:18px;display:inline-block;margin-top:auto;margin-bottom:auto;width:100%}#javascript__required{text-align:center;color:#a6d400;margin:0 auto 50px auto;width:80%;max-width:978px;position:relative;z-index:10001}.success{color:#12d600;margin-right:5px}.danger{color:#fc3434;margin-right:5px}.button{font-size:18px}.flex{display:flex!important;flex-wrap:wrap}.flex p{flex:50%}.m-5{margin:5px!important}.m-10{margin:10px!important}.p-12{padding:12px!important}.pt-180{padding-top:180px!important}.ml-10{margin-left:10px!important}.mr-10{margin-right:10px!important}.mt-10{margin-top:10px!important}.mt-20{margin-top:20px!important}.mt-30{margin-top:30px!important}.mt-40{margin-top:40px!important}.mb-10{margin-bottom:10px!important}.mb-20{margin-bottom:20px!important}.mb-40{margin-bottom:40px!important}.ml-40{margin-left:40px!important}.ml-60{margin-left:60px!important}.ul-ml40 li{margin-left:40px!important}.ul-mb10 li{margin-bottom:10px!important}.full-width{width:100%!important}.no-border,.no-border tr td{border:none!important}.no-outline{outline:0!important}.oauth-box span#disconnect{display:none!important}.oauth-box:hover span#connect{display:none!important}.oauth-box:hover span#disconnect{display:inline!important}.disabled,.disabled:hover{cursor:auto;opacity:.7}.loader{position:fixed;background-color:rgba(255,255,255,.61);width:100%;height:100%;padding-top:42vh;z-index:1000}.spin-container{position:relative;width:50px;margin-right:auto;margin-left:auto;border-radius:15px}.loading{display:inline-block;position:relative;width:100px;height:100px}.loading div{animation:loading 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:40px 40px}.loading div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#000;margin:-4px 0 0 -4px}.loading div:nth-child(1){animation-delay:-36ms}.loading div:nth-child(1):after{top:63px;left:63px}.loading div:nth-child(2){animation-delay:-72ms}.loading div:nth-child(2):after{top:68px;left:56px}.loading div:nth-child(3){animation-delay:-108ms}.loading div:nth-child(3):after{top:71px;left:48px}.loading div:nth-child(4){animation-delay:-144ms}.loading div:nth-child(4):after{top:72px;left:40px}.loading div:nth-child(5){animation-delay:-.18s}.loading div:nth-child(5):after{top:71px;left:32px}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}::-webkit-scrollbar{height:5px;width:10px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.navbar{position:fixed;overflow:hidden;top:0;width:100%;min-width:300px;z-index:99;transition:all .4s;background-color:#fff;box-shadow:0 1px 2px 0 rgba(60,64,67,.302),0 2px 6px 2px rgba(60,64,67,.149)}.navbar a{color:#212121;text-decoration:none;font-weight:700;padding:18px 20px}.navbar__menu{display:block;float:right}.navbar__logo{float:left;font-size:17px;padding:22px 20px!important}.navbar .description{display:none}.toggleNavbar{display:none;position:absolute;top:0;right:0;padding-top:7px}.close{position:absolute;right:50px}.closeBtn{border:none;outline:0;background-color:transparent;position:absolute;right:20px;font-size:25px}.message__error{color:#fff;padding:15px;margin:20px 15px;font-weight:700;border-radius:10px;transition:all .4s;background-color:red}.required{color:red}.animation__underline{text-decoration:none;display:inline-block;padding:5px;position:relative}.animation__underline:hover:after{width:100%;left:0}.animation__underline:after{bottom:0;content:"";display:block;height:3px;left:50%;position:absolute;background:#212121;transition:width .3s ease 0s,left .3s ease 0s;width:0}.btn__changeMode{position:fixed;border-radius:100%;transition:box-shadow .5s;background:#1a73e8;bottom:4vh;right:2vw;padding:15px;outline:0;border:none;color:#fff;z-index:2}.btn__changeMode:hover{box-shadow:0 0 11px #9c9b98}.main{margin:auto 30px;padding-top:100px;transition:all .4s}.main__title{text-align:center;font-size:50px;color:#1976d2;transition:all .4s}.btn__outline{width:30%;margin:auto;height:auto;display:block;color:#1a73e8;font-size:20px;font-weight:700;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:transparent;border:2px solid #1a73e8;margin-top:50px}.btn__outline:hover{background-color:#1976d2;color:#fff}.btn__outline:focus{background-color:#116dc9;color:#fff}.green__text{color:#23c739}.badges{position:absolute;bottom:10px;width:100%;z-index:-1}.badges a{margin-left:10px}.badges button{padding:2px;transition:all .4s}.responsive-table{overflow-x:auto}.bold{font-weight:700}.main__table{width:100%;margin-top:40px;border-collapse:collapse;transition:margin .4s}.main__table td:nth-child(1){max-width:30vw;overflow-x:auto}td,th{width:auto;padding:10px;text-align:left;border-bottom:1px solid}tbody tr:nth-child(odd){background:#ececec}tbody tr:hover{background-color:#e7e5e5;transition:all .4s}.btn__value{background-color:#1a73e8;color:#fff;border-style:solid;border-color:#1a73e8}.animation__message{display:block;margin-left:auto;margin-right:auto;width:auto}.about{display:block;background-color:#1a73e8;transition:all .4s}.body__container{display:flex}.body__about,.body__aboutLeft,.body__aboutRight{display:flex;flex:.1;flex-direction:column;color:#fff;padding:20px;text-align:center}.body__aboutLeft,.body__aboutRight{font-size:250px}.body__about{margin:auto;flex:.8;width:50%;color:#fff}.projects{margin:100px 10px}.projects h1{text-align:center}.projects__container{display:grid;grid-template-columns:auto auto auto;margin-bottom:50px;padding:10px}.projects__card{position:relative;height:50px;margin:10px;padding:15px 10px;display:inline-block;background-color:#fff;border-radius:10px;border:1px solid #212121;transition:all .3s;box-sizing:border-box}.projects__card:hover{background-color:#f0f0f0;height:170px}.projects__title{font-weight:700;font-size:20px}.projects__description{opacity:0}.projects__card:hover .projects__description{opacity:1}.projects__detail{opacity:0;float:right;border:none;outline:0;background:0 0;cursor:pointer}.projects__card:hover .projects__detail{opacity:1}.projects__detail:hover{color:#1a73e8!important}.isCentered{text-align:center}.label{display:inline-block;color:#fff;font-size:15px;padding:5px 10px;border-radius:50px}.priority{background-color:#e04040}.secondary{background-color:#ff7301}.important{background-color:#762cff}.do-later{background-color:green}.btn-config:nth-child(1){margin-right:10px}.btn-config .MuiButtonBase-root{color:#333;z-index:1}.modal{left:0;top:0;width:100%;height:100%;overflow:auto;position:fixed;transition:all .5s;z-index:999;background-color:rgb(0 0 0 / 50%);box-shadow:0 1px 3px 0 rgb(60 64 67 / 30%),0 4px 8px 3px rgb(60 64 67 / 15%)}.modal__bodyBtn{display:inline-block;width:100%;margin:auto;color:#1a73e8;font-size:20px;font-weight:700;text-align:center;padding-top:15px;padding-bottom:15px;transition:all .4s;text-decoration:none;background-color:none;border:2px solid #1a73e8}.modal__bodyBtn:hover{background-color:#1976d2;color:#fff}.modal__container{width:80%;padding:15px;margin:5% auto;margin-bottom:3%;border-radius:10px;background-color:#fff}.modal__title{display:block;padding:10px;font-weight:700;text-align:center;border-bottom:1px solid}.modal__closeBtn{float:right;opacity:1;font-size:30px;cursor:pointer}.modal__closeBtn:hover{opacity:.7;text-decoration:none}.showBackground{opacity:1;visibility:visible}.hideBackground{opacity:0;visibility:hidden}.showModal{animation:grow .15s ease-in forwards}.closeModal{animation:shrink .2s ease-out forwards}.hiddenModal{opacity:0;visibility:hidden}.float-right{float:right}.modal__body{padding:10px;text-decoration:none}.modal__bodyImg{display:block;width:100%}select{width:100%;padding:13px;outline:0;background-color:inherit}.contact{position:relative;margin:auto 50px;margin-bottom:-50px;border-radius:10px;color:#fff;background-color:#838dd3;transition:all .4s}.contact__container{display:grid;grid-template-columns:auto auto;padding:10px}.contact__body,.contact__me{padding:15px}.contact__body .animation__underline:after{background-color:#fff}.contact__body a{color:#fff}.contact__btn{display:inline-block;width:50%;margin:auto;height:auto;color:#fff;font-size:20px;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:none;border:2px solid #fff}.contact__btn:hover{background-color:#fff;color:#212121}.get_in_touch{text-align:center}img{max-width:100%!important;object-fit:cover!important;transition:all .4s}.contact__form{padding:15px}.contact__infoField{position:relative;font-weight:700;display:block;width:100%}.contact__infoField .contact__inputField{width:100%;border:none;display:block;resize:none;outline:0;padding:10px;font-size:20px;box-sizing:border-box;background-color:transparent!important;border-bottom:1px solid #7c7c7c}.datepicker>.MuiFormControl-root{width:100%!important;margin-top:1.5px}.MuiInput-underline:after{border-bottom:2px solid #1a73e8!important}.MuiInput-underline:not(.Mui-disabled):before{border-bottom:1px solid #7c7c7c!important}.MuiInput-underline:hover:not(.Mui-disabled):before{border-bottom:1px solid #7c7c7c!important}.datepicker>.MuiFormControl-root>.MuiInput-underline{text-decoration:none;padding:5px;position:relative}.MuiInput-underline:after{transition:all .35s!important}.notifications{position:fixed;bottom:15px;left:15px;width:300px;max-width:calc(100% - 30px);z-index:1001}.notification{background-color:#fff;border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);color:#fff;font-size:16px;padding:15px 20px;line-height:20px;margin-bottom:15px;animation:grow .5s ease-in forwards}.notification.hide{animation:shrink .3s ease-out forwards}.no-bot{opacity:0;position:absolute;top:0;left:0;height:0;width:0;z-index:-1}.blue-text{color:#1a73e8}.notification-success{background-color:#55b559}.notification-warning{background-color:#fc0;color:#000}.notification-danger{background-color:#f55145}.contact__onFocus{width:0;bottom:0;left:50%;height:2px;position:absolute;display:inline-block;background:#1a73e8;transition:width .35s ease 0s,left .35s ease 0s}.contact__infoField .contact__inputField:focus+.contact__onFocus{width:100%;left:0}#form{width:60%;padding-top:100px;padding-bottom:10px;margin-left:auto;margin-right:auto;transition:all .4s}.form__contact{display:block;margin:0 20px;margin-bottom:40px;padding:40px 20px 10px 20px;border-radius:10px;transition:all .4s;background-color:#f1f1f1;box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15)}.form__container{width:100%;display:grid;grid-template-columns:auto auto}.contact__sendBtn{width:auto;display:inline-block;outline:0;margin:auto;margin-top:30px;height:auto;color:#1a73e8;font-size:20px;text-align:center;padding:15px 25px;transition:all .4s;border-radius:10px;text-decoration:none;background-color:transparent;border:2px solid #1a73e8}.solid{background-color:#1976d2;color:#fff}.contact__sendBtn:hover{background-color:#1976d2;color:#fff}.contact__sendBtn:focus{background-color:#116dc9;color:#fff}.footer{z-index:-1;padding:70px 20px 20px 20px;color:#fff;font-weight:700;background-color:#1a73e8;transition:all .4s}.footer__socialBtn{display:grid;grid-template-columns:auto auto;width:100%;margin:auto}.footer__socialBtn a{width:100%;margin:auto;display:inline-block;width:40px;height:40px;color:#1a73e8;text-align:center;transition:all .4s;padding-top:10px;padding-left:5px;padding-right:5px;border-radius:100%;text-decoration:none;background-color:none;border:2px solid #1a73e8}.footer__socialBtn a:hover{background-color:#1a73e8;color:#fff}.footer__copyright{margin-top:40px;width:100%;text-align:center}.content__transition{display:none}.content__fadeIn{opacity:0;visibility:hidden;transform:translateY(20vh);transition:opacity .6s ease-out,transform 1.2s ease-out;will-change:opacity,visibility}.visible{opacity:1;transform:none;visibility:visible}.message{margin:40px auto}.g-recaptcha{display:inline-block}.unverified path{color:#f40!important}.verified path{color:#42c431!important}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}.show-password{user-select:none;text-align:center}.container-bar{display:inline-block}.bar1,.bar2,.bar3{width:20px;height:1.75px;background-color:#333;margin:4.5px 0;transition:.4s}.bar1{margin-top:none!important}.closeIcon .bar1{-webkit-transform:rotate(-45deg) translate(-9px,9px);transform:rotate(-45deg) translate(-5px,5px)}.closeIcon .bar2{opacity:0}.closeIcon .bar3{-webkit-transform:rotate(45deg) translate(-2px,0);transform:rotate(45deg) translate(-3px,-4px)}blockquote{display:block;background:rgb(255 229 100 / 30%);padding:15px 20px 15px 10px;margin:0 20px 20px;position:relative;font-size:16px;line-height:1.2;color:#000;text-align:left;border-left:7px solid #ffe564}blockquote a{text-decoration:none;background:#eee;cursor:pointer;padding:0 3px;color:#c76c0c}blockquote a:hover{color:#666}blockquote em{font-style:italic}.block{display:block!important}.small{font-size:14px}.full td{width:70%;text-align:left}.view-eye{float:right;margin-top:-42px!important;position:relative;z-index:1;cursor:pointer}.view-eye svg{font-size:.7em;color:#212121}.length{float:right;right:10px;margin-top:5px;font-size:12px;font-weight:lighter;position:absolute;color:#949494;font-family:Verdana,Geneva,Tahoma,sans-serif}.info-title{font-size:20px;font-weight:700;margin-left:10px}.link{text-decoration:none;font-weight:700}.link:focus{color:#004aac!important}.link:visited{color:#00f}.link-btn{color:#00f;border:none;cursor:pointer;font-size:15px;font-family:inherit;background:0 0!important;font-weight:700!important}.otp input{margin:3px;width:40px;height:40px;font-size:20px;text-align:center;border-radius:5px;border-style:solid;border-color:#f1f1f1}.otp input:focus{color:#3f4254;background-color:#ebedf3;border-color:#1a73e8!important;outline:0;transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.large{font-size:60px}.center-object{margin:auto;max-width:70%}.justify-center{justify-content:center}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes grow{from{opacity:0;visibility:hidden;transform:scale(.8)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes shrink{to{opacity:0;visibility:hidden;transform:scale(.8)}}@media only screen and (max-width:1024px){.body__aboutLeft,.body__aboutRight{display:none}.body__about{flex:1}#form{width:70%}}@media only screen and (max-width:900px){.body__aboutLeft,.body__aboutRight{font-size:320px}.projects__container{grid-template-columns:auto auto}.privacy-policy{margin:0 100px}}@media only screen and (max-width:768px){.navbar a{display:block;float:none;text-align:center}.navbar .icons{display:none}.navbar .description{display:inline-flex}.navbar__menu{display:none;float:none}.github-corner{display:none}.toggleNavbar{display:block}.main__divider{width:60%}.main__button{width:40%}.body__aboutLeft,.body__aboutRight{flex:.5!important}.projects__container{grid-template-columns:auto}.contact{margin:auto 25px -70px 25px}.contact__me{padding:10px;text-align:center}.contact__container{grid-template-columns:auto}.modal__container{margin:5% auto}#form{width:100%}.form__container{grid-template-columns:auto}.footer__socialBtn{width:75%}.btn__outline{width:50%;margin-top:20px}.privacy-policy{margin:0 20px}}@media only screen and (max-width:600px){.animation__message{width:100%;height:auto}.btn__outline{width:65%}.privacy-policy{margin:0 15px}.flex p{flex:100%}.flex p button{margin-left:0!important;margin-right:0!important;margin-top:10px!important}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}@media only screen and (max-width:480px){.main__divider{width:80%}.main__button{width:50%}.footer__socialBtn{width:100%}.btn__outline{width:85%}.badges{position:relative;margin-top:30px}} \ No newline at end of file +/*! Todo Application - CSS Version 0.5.3 Copyright 2021 */@import url(https://fonts.googleapis.com/css2?family=Chilanka&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&display=swap);*{margin:0;padding:0}body{margin:0;padding:0;min-height:100vh;min-width:300px;color:#212121;background-color:#fff;scroll-behavior:smooth;transition:all .4s;-webkit-tap-highlight-color:transparent;font-family:Chilanka,sans-serif}body.dark{color:#fff!important;background-color:#212121!important}a:visited{color:#212121}body.dark a,body.dark a:visited{color:#fff}body.dark tbody tr:nth-child(odd){background-color:#3a3a3a;transition:all .4s}body.dark tbody tr:hover{background-color:#333;transition:all .4s}body.dark .btn__outline{color:#7bb4ff;border:2px solid #7bb4ff}body.dark .btn__outline:hover{background-color:#7bb4ff;color:#fff}body.dark .btn__outline:focus,body.dark .solid{border-color:#7bb4ff;background-color:#66a8ff;color:#fff}body.dark .about,body.dark .btn__changeMode,body.dark .contact,body.dark .form__contact,body.dark .navbar,body.dark .projects__card,body.dark select{background-color:#333}body.dark .MuiSelect-root,body.dark .btn__scrollTop,body.dark .closeBtn,body.dark .contact__sendBtn,body.dark .footer,body.dark .get_in_touch,body.dark .main__button,body.dark .navbar a,body.dark .navbar__logo,body.dark .projects__detail,body.dark .toggleNavbar button,body.dark blockquote,body.dark input,body.dark label,body.dark select,body.dark svg,body.dark textarea{color:#fff!important}body.dark .animation__underline:after,body.dark .bar1,body.dark .bar2,body.dark .bar3,body.dark .contact__body .animation__underline:after,body.dark .loading div:after,body.dark .modal__body .animation__underline:after,body.dark .navbar .animation__underline:after{background:#fff}body.dark .modal__closeBtn,body.dark .modal__container,body.dark .otp input{background-color:#333;color:#fff}body.dark .blue-text,body.dark .link,body.dark .main__title,body.dark .projects__viewMore{color:#79c3ff!important}body.dark .link:focus{color:#5cb5ff!important}body.dark .otp input{border-color:#3b3939}body.dark .navbar{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}body.dark .footer{background-color:#191919}body.dark .contact__onFocus{background:#fff}body.dark .projects__viewMore{border-color:#79c3ff}body.dark .btn-config .MuiButtonBase-root{color:#e7e7e7}body.dark ::-webkit-calendar-picker-indicator{filter:invert(1)}body.dark .main__button{box-shadow:2px 1000px 1px #212121 inset}body.dark .projects__viewMore:hover{background-color:#79c3ff;color:#212121}body.dark .footer__socialBtn a:hover svg{color:#fff!important}body.dark .footer__socialBtn a svg{color:rgb(66 133 244)!important}body.dark .main__divider{background-image:linear-gradient(315deg,#0cbaba 0,#f400eb 74%)}body.dark .loader{background-color:rgba(114,114,114,.61)}body.dark .form__contact{box-shadow:0 1px 2px 0 rgb(0 0 0 / 60%),0 1px 3px 1px rgb(0 0 0 / 30%)}body.dark .btn__label{background-color:#333;color:#fff;border-style:solid;border-color:#333}body.dark .btn__value{background-color:#fff;border-color:#fff;border-style:solid;color:#333}body.dark .MuiInput-underline:after{border-bottom:2px solid #fff!important}body.dark .MuiInput-underline:hover:not(.Mui-disabled):before{border-bottom:1px solid #7c7c7c!important}.MuiSvgIcon-root{color:#212121}a,button{user-select:none;cursor:pointer}label{user-select:none}.monospace{font-weight:lighter;font-family:'Roboto Mono',monospace}.privacy-policy{font-family:'Noto Sans JP',sans-serif;margin:auto 150px;padding-top:100px;transition:all .4s}.inline{display:inline}.oauth-container{display:relative;width:100%;text-align:center;margin:20px 0}.oauth-box{display:flex;width:100%;outline:0;border:none;opacity:.9;border-radius:5px;transition:all .3s;text-decoration:none}.github{color:#fff;background-color:#000}.google{color:#fff;background-color:rgb(66 133 244)}.primary{color:#fff;background-color:rgb(66 133 244)}.danger{color:#fff;background-color:#fc3434}.oauth-box:hover{opacity:1;transform:scale(1.02)}.oauth-box:visited{color:#fff}.oauth-box svg{display:inline-block;margin-top:auto;margin-bottom:auto;padding:10px}.oauth-box p{font-size:18px;display:inline-block;margin-top:auto;margin-bottom:auto;width:100%}#javascript__required{text-align:center;color:#a6d400;margin:0 auto 50px auto;width:80%;max-width:978px;position:relative;z-index:10001}.success{color:#12d600;margin-right:5px}.danger{color:#fc3434;margin-right:5px}.button{font-size:18px}.flex{display:flex!important;flex-wrap:wrap}.flex p{flex:50%}.m-5{margin:5px!important}.m-10{margin:10px!important}.p-12{padding:12px!important}.pt-180{padding-top:180px!important}.ml-10{margin-left:10px!important}.mr-10{margin-right:10px!important}.mt-10{margin-top:10px!important}.mt-20{margin-top:20px!important}.mt-30{margin-top:30px!important}.mt-40{margin-top:40px!important}.mb-10{margin-bottom:10px!important}.mb-20{margin-bottom:20px!important}.mb-40{margin-bottom:40px!important}.ml-40{margin-left:40px!important}.ml-60{margin-left:60px!important}.ul-ml40 li{margin-left:40px!important}.ul-mb10 li{margin-bottom:10px!important}.full-width{width:100%!important}.no-border,.no-border tr td{border:none!important}.no-outline{outline:0!important}.oauth-box span#disconnect{display:none!important}.oauth-box:hover span#connect{display:none!important}.oauth-box:hover span#disconnect{display:inline!important}.disabled,.disabled:hover{cursor:auto;opacity:.7}.loader{position:fixed;background-color:rgba(255,255,255,.61);width:100%;height:100%;padding-top:42vh;z-index:1000}.spin-container{position:relative;width:50px;margin-right:auto;margin-left:auto;border-radius:15px}.loading{display:inline-block;position:relative;width:100px;height:100px}.loading div{animation:loading 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:40px 40px}.loading div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#000;margin:-4px 0 0 -4px}.loading div:nth-child(1){animation-delay:-36ms}.loading div:nth-child(1):after{top:63px;left:63px}.loading div:nth-child(2){animation-delay:-72ms}.loading div:nth-child(2):after{top:68px;left:56px}.loading div:nth-child(3){animation-delay:-108ms}.loading div:nth-child(3):after{top:71px;left:48px}.loading div:nth-child(4){animation-delay:-144ms}.loading div:nth-child(4):after{top:72px;left:40px}.loading div:nth-child(5){animation-delay:-.18s}.loading div:nth-child(5):after{top:71px;left:32px}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}::-webkit-scrollbar{height:5px;width:10px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.navbar{position:fixed;overflow:hidden;top:0;width:100%;min-width:300px;z-index:99;transition:all .4s;background-color:#fff;box-shadow:0 1px 2px 0 rgba(60,64,67,.302),0 2px 6px 2px rgba(60,64,67,.149)}.navbar a{color:#212121;text-decoration:none;font-weight:700;padding:18px 20px}.navbar__menu{display:block;float:right}.navbar__logo{float:left;font-size:17px;padding:22px 20px!important}.navbar .description{display:none}.toggleNavbar{display:none;position:absolute;top:0;right:0;padding-top:7px}.close{position:absolute;right:50px}.closeBtn{border:none;outline:0;background-color:transparent;position:absolute;right:20px;font-size:25px}.message__error{color:#fff;padding:15px;margin:20px 15px;font-weight:700;border-radius:10px;transition:all .4s;background-color:red}.required{color:red}.animation__underline{text-decoration:none;display:inline-block;padding:5px;position:relative}.animation__underline:hover:after{width:100%;left:0}.animation__underline:after{bottom:0;content:"";display:block;height:3px;left:50%;position:absolute;background:#212121;transition:width .3s ease 0s,left .3s ease 0s;width:0}.btn__changeMode{position:fixed;border-radius:100%;transition:box-shadow .5s;background:#1a73e8;bottom:4vh;right:2vw;padding:15px;outline:0;border:none;color:#fff;z-index:2}.btn__changeMode:hover{box-shadow:0 0 11px #9c9b98}.main{margin:auto 30px;padding-top:100px;transition:all .4s}.main__title{text-align:center;font-size:50px;color:#1976d2;transition:all .4s}.btn__outline{width:30%;margin:auto;height:auto;display:block;color:#1a73e8;font-size:20px;font-weight:700;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:transparent;border:2px solid #1a73e8;margin-top:50px}.btn__outline:hover{background-color:#1976d2;color:#fff}.btn__outline:focus{background-color:#116dc9;color:#fff}.green__text{color:#23c739}.badges{position:absolute;bottom:10px;width:100%;z-index:-1}.badges a{margin-left:10px}.badges button{padding:2px;transition:all .4s}.responsive-table{overflow-x:auto}.bold{font-weight:700}.main__table{width:100%;margin-top:40px;border-collapse:collapse;transition:margin .4s}.main__table td:nth-child(1){max-width:30vw;overflow-x:auto}td,th{width:auto;padding:10px;text-align:left;border-bottom:1px solid}tbody tr:nth-child(odd){background:#ececec}tbody tr:hover{background-color:#e7e5e5;transition:all .4s}.btn__value{background-color:#1a73e8;color:#fff;border-style:solid;border-color:#1a73e8}.animation__message{display:block;margin-left:auto;margin-right:auto;width:auto}.about{display:block;background-color:#1a73e8;transition:all .4s}.body__container{display:flex}.body__about,.body__aboutLeft,.body__aboutRight{display:flex;flex:.1;flex-direction:column;color:#fff;padding:20px;text-align:center}.body__aboutLeft,.body__aboutRight{font-size:250px}.body__about{margin:auto;flex:.8;width:50%;color:#fff}.projects{margin:100px 10px}.projects h1{text-align:center}.projects__container{display:grid;grid-template-columns:auto auto auto;margin-bottom:50px;padding:10px}.projects__card{position:relative;height:50px;margin:10px;padding:15px 10px;display:inline-block;background-color:#fff;border-radius:10px;border:1px solid #212121;transition:all .3s;box-sizing:border-box}.projects__card:hover{background-color:#f0f0f0;height:170px}.projects__title{font-weight:700;font-size:20px}.projects__description{opacity:0}.projects__card:hover .projects__description{opacity:1}.projects__detail{opacity:0;float:right;border:none;outline:0;background:0 0;cursor:pointer}.projects__card:hover .projects__detail{opacity:1}.projects__detail:hover{color:#1a73e8!important}.isCentered{text-align:center}.label{display:inline-block;color:#fff;font-size:15px;padding:5px 10px;border-radius:50px}.priority{background-color:#e04040}.secondary{background-color:#ff7301}.important{background-color:#762cff}.do-later{background-color:green}.btn-config:nth-child(1){margin-right:10px}.btn-config .MuiButtonBase-root{color:#333;z-index:1}.modal{left:0;top:0;width:100%;height:100%;overflow:auto;position:fixed;transition:all .5s;z-index:999;background-color:rgb(0 0 0 / 50%);box-shadow:0 1px 3px 0 rgb(60 64 67 / 30%),0 4px 8px 3px rgb(60 64 67 / 15%)}.modal__bodyBtn{display:inline-block;width:100%;margin:auto;color:#1a73e8;font-size:20px;font-weight:700;text-align:center;padding-top:15px;padding-bottom:15px;transition:all .4s;text-decoration:none;background-color:none;border:2px solid #1a73e8}.modal__bodyBtn:hover{background-color:#1976d2;color:#fff}.modal__container{width:80%;padding:15px;margin:5% auto;margin-bottom:3%;border-radius:10px;background-color:#fff}.modal__title{display:block;padding:10px;font-weight:700;text-align:center;border-bottom:1px solid}.modal__closeBtn{float:right;opacity:1;font-size:30px;cursor:pointer}.modal__closeBtn:hover{opacity:.7;text-decoration:none}.showBackground{opacity:1;visibility:visible}.hideBackground{opacity:0;visibility:hidden}.showModal{animation:grow .15s ease-in forwards}.closeModal{animation:shrink .2s ease-out forwards}.hiddenModal{opacity:0;visibility:hidden}.float-right{float:right}.modal__body{padding:10px;text-decoration:none}.modal__bodyImg{display:block;width:100%}select{width:100%;padding:13px;outline:0;background-color:inherit}.contact{position:relative;margin:auto 50px;margin-bottom:-50px;border-radius:10px;color:#fff;background-color:#838dd3;transition:all .4s}.contact__container{display:grid;grid-template-columns:auto auto;padding:10px}.contact__body,.contact__me{padding:15px}.contact__body .animation__underline:after{background-color:#fff}.contact__body a{color:#fff}.contact__btn{display:inline-block;width:50%;margin:auto;height:auto;color:#fff;font-size:20px;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:none;border:2px solid #fff}.contact__btn:hover{background-color:#fff;color:#212121}.get_in_touch{text-align:center}img{max-width:100%!important;object-fit:cover!important;transition:all .4s}.contact__form{padding:15px}.contact__infoField{position:relative;font-weight:700;display:block;width:100%}.contact__infoField .contact__inputField{width:100%;border:none;display:block;resize:none;outline:0;padding:10px;font-size:20px;box-sizing:border-box;background-color:transparent!important;border-bottom:1px solid #7c7c7c}.datepicker>.MuiFormControl-root{width:100%!important;margin-top:1.5px}.MuiInput-underline:after{border-bottom:2px solid #1a73e8!important}.MuiInput-underline:not(.Mui-disabled):before{border-bottom:1px solid #7c7c7c!important}.MuiInput-underline:hover:not(.Mui-disabled):before{border-bottom:1px solid #7c7c7c!important}.datepicker>.MuiFormControl-root>.MuiInput-underline{text-decoration:none;padding:5px;position:relative}.MuiInput-underline:after{transition:all .35s!important}.notifications{position:fixed;bottom:15px;left:15px;width:300px;max-width:calc(100% - 30px);z-index:1001}.notification{background-color:#fff;border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);color:#fff;font-size:16px;padding:15px 20px;line-height:20px;margin-bottom:15px;animation:grow .5s ease-in forwards}.notification.hide{animation:shrink .3s ease-out forwards}.no-bot{opacity:0;position:absolute;top:0;left:0;height:0;width:0;z-index:-1}.blue-text{color:#1a73e8}.notification-success{background-color:#55b559}.notification-warning{background-color:#fc0;color:#000}.notification-danger{background-color:#f55145}.contact__onFocus{width:0;bottom:0;left:50%;height:2px;position:absolute;display:inline-block;background:#1a73e8;transition:width .35s ease 0s,left .35s ease 0s}.contact__infoField .contact__inputField:focus+.contact__onFocus{width:100%;left:0}#form{width:60%;padding-top:100px;padding-bottom:10px;margin-left:auto;margin-right:auto;transition:all .4s}.form__contact{display:block;margin:0 20px;margin-bottom:40px;padding:40px 20px 10px 20px;border-radius:10px;transition:all .4s;background-color:#f1f1f1;box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15)}.form__container{width:100%;display:grid;grid-template-columns:auto auto}.contact__sendBtn{width:auto;display:inline-block;outline:0;margin:auto;margin-top:30px;height:auto;color:#1a73e8;font-size:20px;text-align:center;padding:15px 25px;transition:all .4s;border-radius:10px;text-decoration:none;background-color:transparent;border:2px solid #1a73e8}.solid{background-color:#1976d2;color:#fff}.contact__sendBtn:hover{background-color:#1976d2;color:#fff}.contact__sendBtn:focus{background-color:#116dc9;color:#fff}.footer{z-index:-1;padding:70px 20px 20px 20px;color:#fff;font-weight:700;background-color:#1a73e8;transition:all .4s}.footer__socialBtn{display:grid;grid-template-columns:auto auto;width:100%;margin:auto}.footer__socialBtn a{width:100%;margin:auto;display:inline-block;width:40px;height:40px;color:#1a73e8;text-align:center;transition:all .4s;padding-top:10px;padding-left:5px;padding-right:5px;border-radius:100%;text-decoration:none;background-color:none;border:2px solid #1a73e8}.footer__socialBtn a:hover{background-color:#1a73e8;color:#fff}.footer__copyright{margin-top:40px;width:100%;text-align:center}.content__transition{display:none}.content__fadeIn{opacity:0;visibility:hidden;transform:translateY(20vh);transition:opacity .6s ease-out,transform 1.2s ease-out;will-change:opacity,visibility}.visible{opacity:1;transform:none;visibility:visible}.message{margin:40px auto}.g-recaptcha{display:inline-block}.unverified path{color:#f40!important}.verified path{color:#42c431!important}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}.show-password{user-select:none;text-align:center}.container-bar{display:inline-block}.bar1,.bar2,.bar3{width:20px;height:1.75px;background-color:#333;margin:4.5px 0;transition:.4s}.bar1{margin-top:none!important}.closeIcon .bar1{-webkit-transform:rotate(-45deg) translate(-9px,9px);transform:rotate(-45deg) translate(-5px,5px)}.closeIcon .bar2{opacity:0}.closeIcon .bar3{-webkit-transform:rotate(45deg) translate(-2px,0);transform:rotate(45deg) translate(-3px,-4px)}blockquote{display:block;background:rgb(255 229 100 / 30%);padding:15px 20px 15px 10px;margin:0 20px 20px;position:relative;font-size:16px;line-height:1.2;color:#000;text-align:left;border-left:7px solid #ffe564}blockquote a{text-decoration:none;background:#eee;cursor:pointer;padding:0 3px;color:#c76c0c}blockquote a:hover{color:#666}blockquote em{font-style:italic}.block{display:block!important}.small{font-size:14px}.full td{width:70%;text-align:left}.view-eye{float:right;margin-top:-42px!important;position:relative;z-index:1;cursor:pointer}.view-eye svg{font-size:.7em;color:#212121}.length{float:right;right:10px;margin-top:5px;font-size:12px;font-weight:lighter;position:absolute;color:#949494;font-family:Verdana,Geneva,Tahoma,sans-serif}.info-title{font-size:20px;font-weight:700;margin-left:10px}.link{text-decoration:none;font-weight:700}.link:focus{color:#004aac!important}.link:visited{color:#00f}.link-btn{color:#00f;border:none;cursor:pointer;font-size:15px;font-family:inherit;background:0 0!important;font-weight:700!important}.otp input{margin:3px;width:40px;height:40px;font-size:20px;text-align:center;border-radius:5px;border-style:solid;border-color:#f1f1f1}.otp input:focus{color:#3f4254;background-color:#ebedf3;border-color:#1a73e8!important;outline:0;transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.large{font-size:60px}.center-object{margin:auto;max-width:70%}.justify-center{justify-content:center}.text-animation{font-size:40px;color:#1a73e8;letter-spacing:2px;font-family:'Noto Sans',sans-serif}.cursor{width:3px;height:60px;display:inline-block;background-color:#1a73e8;animation:blink .75s step-end infinite}.none{display:none!important}@keyframes blink{from,to{background-color:transparent}50%{background-color:#1a73e8}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes grow{from{opacity:0;visibility:hidden;transform:scale(.8)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes shrink{to{opacity:0;visibility:hidden;transform:scale(.8)}}@media only screen and (max-width:1024px){.body__aboutLeft,.body__aboutRight{display:none}.body__about{flex:1}#form{width:70%}}@media only screen and (max-width:900px){.body__aboutLeft,.body__aboutRight{font-size:320px}.projects__container{grid-template-columns:auto auto}.privacy-policy{margin:0 100px}}@media only screen and (max-width:768px){.navbar a{display:block;float:none;text-align:center}.navbar .icons{display:none}.navbar .description{display:inline-flex}.navbar__menu{display:none;float:none}.github-corner{display:none}.toggleNavbar{display:block}.main__divider{width:60%}.main__button{width:40%}.body__aboutLeft,.body__aboutRight{flex:.5!important}.projects__container{grid-template-columns:auto}.contact{margin:auto 25px -70px 25px}.contact__me{padding:10px;text-align:center}.contact__container{grid-template-columns:auto}.modal__container{margin:5% auto}#form{width:100%}.form__container{grid-template-columns:auto}.footer__socialBtn{width:75%}.btn__outline{width:50%;margin-top:20px}.privacy-policy{margin:0 20px}.center-object{max-width:100%}}@media only screen and (max-width:600px){.animation__message{width:100%;height:auto}.btn__outline{width:65%}.privacy-policy{margin:0 15px}.flex p{flex:100%}.flex p button{margin-left:0!important;margin-right:0!important;margin-top:10px!important}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}@media only screen and (max-width:480px){.main__divider{width:80%}.main__button{width:50%}.footer__socialBtn{width:100%}.btn__outline{width:85%}.badges{position:relative;margin-top:30px}} \ No newline at end of file diff --git a/client/src/components/welcome.component.js b/client/src/components/welcome.component.js index 8378c226..c0011f80 100644 --- a/client/src/components/welcome.component.js +++ b/client/src/components/welcome.component.js @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react' +import Image from '../img/7c27535f88bae9519ceb14a8983c57ff.webp' import axios from 'axios' import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification' @@ -10,6 +11,31 @@ const Landing = () => { const currentversion = process.env.REACT_APP_VERSION useEffect(() => { + const element = document.querySelector('.text-animation') + const cursor = document.querySelector('.cursor') + const data = element.getAttribute('data-elements').split(',') + var x = 0; var index = 0; var interval; + function type() { + var text = data[x].substring(0, index+1) + element.innerHTML = text + index++ + if(text === data[x]){ + clearInterval(interval) + setTimeout(() => interval = setInterval(backspace, 25), 3000) + } + } + function backspace() { + var text = data[x].substring(0, index-1) + element.innerHTML = text + index-- + if(text === ''){ + clearInterval(interval) + if(x === (data.length-1)) x = 0 + else x++ + index = 0 + setTimeout(() => interval = setInterval(type, 100), 200) + } + } async function getRepoInfo() { await axios.get(GITHUB_API) .then(async res => { @@ -30,13 +56,24 @@ const Landing = () => { }) } getRepoInfo() + interval = setInterval(type, 100) },[currentversion]) return (
-
-

Organizing Easier

Improve Your Productivity

- Get Started +
+
+
+
+ +   +
+

with Todo Application

+

An open source project, completed with highest standard security, which is easy to use and easy to organize!

+ +
+ Organzing Easier +
diff --git a/client/src/img/7c27535f88bae9519ceb14a8983c57ff.webp b/client/src/img/7c27535f88bae9519ceb14a8983c57ff.webp new file mode 100644 index 00000000..1e2fa3cc Binary files /dev/null and b/client/src/img/7c27535f88bae9519ceb14a8983c57ff.webp differ