diff options
| author | Tara Rostami <132676256+TaraRostami@users.noreply.github.com> | 2023-12-16 20:59:08 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-12-16 20:59:08 +0300 |
| commit | 5971e3f8565bcbf419fcc9ca8aabd3331cb16606 (patch) | |
| tree | 455ad4cf69f100fd11f45a080824d4dbda4786cd /web/html | |
| parent | 647b72e4fa4937aac1161abf9bb611c417ea0b3a (diff) | |
Better Login Animation (#1384)
* Update login.html
* Update login.html
* Update login.html
* Update login.html
Diffstat (limited to 'web/html')
| -rw-r--r-- | web/html/login.html | 106 |
1 files changed, 76 insertions, 30 deletions
diff --git a/web/html/login.html b/web/html/login.html index 62be1478..8d377381 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -56,35 +56,12 @@ opacity: 1; } } - .wave { - opacity: 0.6; - position: absolute; - top: 80%; - left: 60%; - width: 6000px; - height: 6000px; - background-color: rgba(0, 135, 113, 0.08); - margin-left: -3000px; - transform-origin: 50% 50%; - pointer-events: none; - rotate: 115deg; - } - .wave2 { - opacity: 0.4; - rotate: 105deg; - } - .wave3 { - opacity: 0.2; - rotate: 62deg; - } .under { - background-color: #dbf5ed; - } - .dark .wave { - background: rgb(10 117 87 / 20%); + background-color: #c7ebe2; + z-index: 0; } .dark .under { - background-color: #101828; + background-color: #0f2d32; } .dark #login { background-color: #151f31; @@ -95,7 +72,6 @@ .ant-form-item { margin-bottom: 16px; } - .ant-btn-primary-login { width: 100%; } @@ -206,14 +182,84 @@ background-position-x: 0; box-shadow: none; } + .waves-header { + position: fixed; + width: 100%; + text-align: center; + background-color: #dbf5ed; + color: white; + z-index: -1; + } + .dark .waves-header { + background-color: #101828; + } + .waves-inner-header { + height: 50vh; + width: 100%; + margin: 0; + padding: 0; + } + .waves { + position: relative; + width: 100%; + height: 15vh; + margin-bottom: -5px; /*Fix for safari gap*/ + min-height: 100px; + max-height: 150px; + } + .parallax > use { + animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + } + .dark .parallax > use { + fill: rgb(10 117 87 / 20%); + } + .parallax > use:nth-child(1) { + animation-delay: -2s; + animation-duration: 7s; + opacity: 0.2; + } + .parallax > use:nth-child(2) { + animation-delay: -3s; + animation-duration: 10s; + opacity: 0.4; + } + .parallax > use:nth-child(3) { + animation-delay: -4s; + animation-duration: 13s; + opacity: 0.6; + } + @keyframes move-forever { + 0% { + transform: translate3d(-90px, 0, 0); + } + 100% { + transform: translate3d(85px, 0, 0); + } + } + @media (max-width: 768px) { + .waves { + height: 40px; + min-height: 40px; + } + } </style> <body> <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> <transition name="list" appear> <a-layout-content class="under" style="min-height: 0;"> - <div class='wave'></div> - <div class='wave wave2'></div> - <div class='wave wave3'></div> + <div class="waves-header"> + <div class="waves-inner-header"></div> + <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> + <defs> + <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> + </defs> + <g class="parallax"> + <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" /> + <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" /> + <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 135, 113, 0.08)" /> + </g> + </svg> + </div> <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;"> <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;"> <a-row type="flex" justify="center"> |