doc(LoginTemplate): add animation for temple5 (#6434)

* doc: 增加动画特效

* doc: 增加动画样式

* refactor: 样式格式化

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor

@@ -23,53 +23,80 @@
     <div class="login-container">
         <div class="login-box animate-fade-in">
             <div class="header-row">
-                @if (isEmailEntered)
+                @if (!isAuth)
                 {
-                    <button @onclick="GoBack" aria-label="返回" class="back-button">
-                        <span>
-                            <i class="fa-solid fa-arrow-left"></i>
-                        </span>
-                    </button>
+                    if (isEmailEntered)
+                    {
+                        <button @onclick="GoBack" aria-label="返回" class="back-button">
+                            <span>
+                                <i class="fa-solid fa-arrow-left"></i>
+                            </span>
+                        </button>
+                    }
+
+                    <div class="logo-container">
+                        <h1 class="blazor-text">BootstrapBlazor</h1>
+                    </div>
+                }
+                else
+                {
+                    <div class="logo-container">
+                        <h1 class="blazor-text">BootstrapBlazor</h1>
+                    </div>
                 }
-                <div class="logo-container">
-                    <h1 class="blazor-text">BootstrapBlazor</h1>
-                </div>
             </div>
             @if (!isEmailEntered)
             {
-                <h2>登录</h2>
+                <h3>登录</h3>
                 <p class="subtitle">使用你的 BootstrapBlazor 帐户。</p>
-                <BootstrapInput type="email" class="input" placeholder="电子邮件或电话号码" @bind-Value="email" />
+                <BootstrapInput type="email" class="input" placeholder="电子邮件或电话号码" @bind-Value="email"></BootstrapInput>
                 <div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
                 <Button class="button" Color="Color.Primary" OnClick="OnEmailSubmit">下一步</Button>
                 <div class="links">
-                    <a href="#">忘记用户名？</a>
+                    <a href="#" @onclick:preventDefault>忘记用户名？</a>
                 </div>
                 <div class="small">
                     不熟悉 BootstrapBlazor？<a href="/">去看文档</a>
                 </div>
             }
-            else
+            else if (!isAuth)
             {
-                <h2>输入你的密码</h2>
+                <h3>输入你的密码</h3>
                 <p class="email-display">@email</p>
-                <BootstrapInput type="password" class="input" placeholder="密码" @bind-Value="password" />
+                <BootstrapInput type="password" class="input" placeholder="密码" @bind-Value="password"></BootstrapInput>
                 <div class="links">
-                    <a href="#">忘记了密码？</a>
+                    <a href="#" @onclick:preventDefault>忘记了密码？</a>
                 </div>
-                <Button class="button" Color="Color.Primary">下一步</Button>
+                <Button class="button" Color="Color.Primary" OnClick="OnPasswordSubmit">下一步</Button>
                 <div class="links">
-                    <a href="#">其他登录方法</a>
+                    <a href="#" @onclick:preventDefault>其他登录方法</a>
+                </div>
+            }
+            else
+            {
+                <div class="email-display2"><span>@email</span></div>
+                <h5 class="text-center mt-3 mb-0">欢迎，您已成功登录</h5>
+                <div class="login-video-wrap">
+                    <video class="login-video" autoplay="autoplay" playsinline="playsinline" disablepictureinpicture="">
+                        <source src="samples/login5/loading1.mp4" type="video/mp4; codecs=av01.0.05M.08">
+                        <source src="samples/login5/loading.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
+                        <source src="samples/login5/loading.webm" type="video/webm; codecs=vp9">
+                        <source src="samples/login5/loading.mp4" type="video/mp4; codecs=avc1.42E01E">
+                        <img src="samples/login5/loading.png" alt="" role="presentation">
+                    </video>
                 </div>
+                <p class="text-center text-muted" style="font-size: 0.75rem;">此登录高仿微软登录 UI</p>
+                <Button class="button" Color="Color.Primary" OnClick="OnEnterSubmit">进入</Button>
             }
         </div>
     </div>
 </div>
 
 @code {
     private bool isEmailEntered = false;
-    private string email = "";
-    private string password = "";
+    private bool isAuth = false;
+    private string email = "[email protected]";
+    private string password = "123456";
     private bool showEmailError = false;
 
     private void OnEmailSubmit()
@@ -85,6 +112,18 @@
         }
     }
 
+    private void OnPasswordSubmit()
+    {
+        // 数据库检查密码逻辑可以在这里实现
+        // 演示代码一律通过
+        isAuth = true;
+    }
+
+    private void OnEnterSubmit()
+    {
+
+    }
+
     private void GoBack()
     {
         isEmailEntered = false;

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css

@@ -18,7 +18,7 @@
     background: white;
     padding: 40px;
     border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     width: auto;
     font-family: "Segoe UI", sans-serif;
     text-align: left;
@@ -59,21 +59,21 @@
 
 .blazor-text {
     font-family: Arial, sans-serif;
-    font-size: 1.8rem; 
+    font-size: 1.8rem;
     font-weight: bold;
     text-align: center;
     background: linear-gradient(to right, #8e44ad, #e84393);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin: 0; 
+    margin: 0;
 }
 
 .logo-container {
     flex: 1;
     display: flex;
     justify-content: center;
-    margin-left: 40px; 
-    margin-right: 40px; 
+    margin-left: 40px;
+    margin-right: 40px;
 }
 
 .logo {
@@ -123,6 +123,32 @@
     margin-bottom: 10px;
 }
 
+.email-display2 {
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+    .email-display2 > span {
+        position: relative;
+        padding: 0.5rem 1rem;
+    }
+
+        .email-display2 > span:after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border: 1px solid var(--bs-border-color);
+            border-radius: 20px;
+        }
+
+.login-video-wrap {
+    text-align: center;
+}
+
+.login-video {
+    width: 192px;
+}
+
 .error {
     color: red;
     font-size: 13px;