wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 收斂登入與載入元件新版視覺
All checks were successful
CD Pipeline / deploy (push) Successful in 1m4s
Details

Browse Source
This commit is contained in:
OoO
2026-05-17 21:22:03 +08:00
parent 938b9fe963
commit f7726bea3f
3 changed files with 79 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config.py
View File

@@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
# ==========================================
# 系統版本與路徑
# ==========================================
SYSTEM_VERSION = "V10.152"
SYSTEM_VERSION = "V10.153"
LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
public_url = PUBLIC_URL # 用於模板顯示

101
templates/components/_loading.html
View File

@@ -64,21 +64,23 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 245, 255, 0.95) 100%);
background-color: rgba(240, 235, 225, 0.94);
background-image: radial-gradient(circle, rgba(42, 37, 32, 0.14) 1px, transparent 1.5px);
background-size: 18px 18px;
z-index: 9999;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 25px;
backdrop-filter: blur(8px);
gap: 20px;
backdrop-filter: blur(6px);
}
/* LOGO 動畫容器 */
.wooo-loading-overlay .loading-logo-container {
position: relative;
width: 160px;
height: 160px;
width: 144px;
height: 144px;
display: flex;
justify-content: center;
align-items: center;
@@ -87,15 +89,11 @@
.wooo-loading-overlay .loading-logo {
z-index: 3;
animation: wooo-cloud-float 3s ease-in-out infinite;
font-size: 2.5rem;
color: var(--momo-ink);
font-size: 2.35rem;
font-weight: 800;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 4px;
filter: drop-shadow(0 4px 15px rgba(79, 70, 229, 0.4));
font-family: var(--momo-font-display, "Noto Sans TC", "Inter", system-ui, sans-serif);
letter-spacing: 0;
}
/* 雲端飄動動畫 */
@@ -117,11 +115,11 @@
/* 外層旋轉光環 */
.wooo-loading-overlay .logo-ring {
position: absolute;
width: 150px;
height: 150px;
border: 4px solid transparent;
border-top-color: #4F46E5;
border-right-color: #7C3AED;
width: 138px;
height: 138px;
border: 2px solid transparent;
border-top-color: var(--momo-page-accent, var(--momo-warm-caramel));
border-right-color: var(--momo-ink);
border-radius: 50%;
animation: wooo-ring-spin 2s linear infinite;
}
@@ -129,11 +127,11 @@
/* 內層反向旋轉光環 */
.wooo-loading-overlay .logo-ring-inner {
position: absolute;
width: 120px;
height: 120px;
border: 3px solid transparent;
border-bottom-color: #EC4899;
border-left-color: #F59E0B;
width: 110px;
height: 110px;
border: 1px solid transparent;
border-bottom-color: var(--momo-warm-honey);
border-left-color: var(--momo-success);
border-radius: 50%;
animation: wooo-ring-spin-reverse 1.5s linear infinite;
}
@@ -141,9 +139,10 @@
/* 脈衝光暈 */
.wooo-loading-overlay .logo-pulse {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
width: 92px;
height: 92px;
border: 1px solid var(--momo-page-accent-line, rgba(201, 100, 66, 0.32));
background: var(--momo-page-accent-soft, rgba(201, 100, 66, 0.12));
border-radius: 50%;
animation: wooo-pulse-expand 2s ease-out infinite;
}
@@ -172,18 +171,17 @@
/* 環繞粒子 */
.wooo-loading-overlay .orbit-particles {
position: absolute;
width: 160px;
height: 160px;
width: 144px;
height: 144px;
animation: wooo-orbit-rotate 4s linear infinite;
}
.wooo-loading-overlay .orbit-particle {
position: absolute;
width: 8px;
height: 8px;
background: linear-gradient(135deg, #4F46E5, #7C3AED);
width: 7px;
height: 7px;
background: var(--momo-page-accent, var(--momo-warm-caramel));
border-radius: 50%;
box-shadow: 0 0 10px rgba(79, 70, 229, 0.8);
}
.wooo-loading-overlay .orbit-particle:nth-child(1) {
@@ -218,15 +216,15 @@
/* 閃爍星星 */
.wooo-loading-overlay .sparkles {
position: absolute;
width: 180px;
height: 180px;
width: 166px;
height: 166px;
}
.wooo-loading-overlay .sparkle {
position: absolute;
width: 4px;
height: 4px;
background: #FCD34D;
background: var(--momo-warm-honey);
border-radius: 50%;
animation: wooo-sparkle-twinkle 1.5s ease-in-out infinite;
}
@@ -251,16 +249,17 @@
/* 載入文字 */
.wooo-loading-overlay .loading-text {
font-size: 1.2rem;
color: #4F46E5;
font-weight: 600;
color: var(--momo-text-primary);
font-family: var(--momo-font-display, "Noto Sans TC", "Inter", system-ui, sans-serif);
font-size: 1rem;
font-weight: 780;
text-align: center;
letter-spacing: 0.5px;
letter-spacing: 0;
}
.wooo-loading-overlay .loading-hint {
font-size: 0.85rem;
color: #6b7280;
color: var(--momo-text-secondary);
text-align: center;
max-width: 300px;
}
@@ -269,22 +268,34 @@
.wooo-loading-overlay .loading-progress {
width: 200px;
height: 4px;
background: rgba(79, 70, 229, 0.2);
background: var(--momo-border-light);
border-radius: 2px;
overflow: hidden;
}
.wooo-loading-overlay .loading-progress-bar {
height: 100%;
background: linear-gradient(90deg, #4F46E5, #7C3AED, #4F46E5);
background-size: 200% 100%;
background: var(--momo-page-accent, var(--momo-warm-caramel));
animation: wooo-progress-flow 1.5s linear infinite;
width: 100%;
}
@keyframes wooo-progress-flow {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.wooo-loading-overlay .loading-logo,
.wooo-loading-overlay .logo-ring,
.wooo-loading-overlay .logo-ring-inner,
.wooo-loading-overlay .logo-pulse,
.wooo-loading-overlay .orbit-particles,
.wooo-loading-overlay .sparkle,
.wooo-loading-overlay .loading-progress-bar {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
</style>

24
templates/login.html
View File

@@ -11,13 +11,14 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-tokens.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-tokens-v2-alias.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-shell.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-dotmatrix.css') }}">
<style>
* {
box-sizing: border-box;
}
body {
body.login-body {
min-height: 100vh;
margin: 0;
color: var(--momo-text-primary);
@@ -230,6 +231,7 @@
.login-brand h1 {
margin-top: var(--momo-space-6);
font-size: clamp(2rem, 12vw, 3.25rem);
}
.login-panel-wrap {
@@ -238,11 +240,29 @@
}
@media (max-width: 520px) {
body.login-body {
min-height: 100svh;
}
.login-page {
min-height: 100svh;
}
.login-brand,
.login-panel-wrap {
padding: var(--momo-space-4);
}
.login-brand p {
font-size: 0.95rem;
line-height: 1.7;
}
.login-meta {
display: grid;
grid-template-columns: 1fr;
}
.login-card__head,
.login-card__body {
padding: var(--momo-space-4);
@@ -250,7 +270,7 @@
}
</style>
</head>
<body>
<body class="momo-v2-body login-body" data-page-group="system">
<main class="login-page">
<section class="login-brand" aria-label="EwoooC 登入品牌區">
<div>