diff --git a/static/css/tech.css b/static/css/tech.css new file mode 100644 index 0000000..76262f5 --- /dev/null +++ b/static/css/tech.css @@ -0,0 +1,212 @@ +/* 科技感增强层 — 与 base.html 变量配合 */ + +.tech-bg{ + position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; +} +.tech-grid{ + position:absolute;inset:0; + background-image: + linear-gradient(var(--bg-grid) 1px,transparent 1px), + linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px); + background-size:32px 32px; + mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 20%,transparent 75%); +} +.tech-glow{ + position:absolute;width:70vmax;height:70vmax; + top:-25%;left:50%;transform:translateX(-50%); + background:radial-gradient(circle,var(--ambient-glow) 0%,transparent 65%); + animation:tech-pulse 8s ease-in-out infinite; +} +.tech-glow-2{ + position:absolute;width:50vmax;height:50vmax; + bottom:-20%;right:-10%; + background:radial-gradient(circle,var(--ambient-glow-2) 0%,transparent 70%); + animation:tech-pulse 10s ease-in-out infinite reverse; +} +.tech-scanline{ + position:absolute;inset:0; + background:repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + var(--scanline) 2px, + var(--scanline) 3px + ); + opacity:.35; + animation:tech-scan 12s linear infinite; +} +@keyframes tech-pulse{ + 0%,100%{opacity:.55;transform:translateX(-50%) scale(1)} + 50%{opacity:.85;transform:translateX(-50%) scale(1.05)} +} +@keyframes tech-scan{ + 0%{transform:translateY(0)} + 100%{transform:translateY(32px)} +} +@keyframes tech-shine{ + 0%,100%{opacity:.45} + 50%{opacity:.9} +} + +@media (prefers-reduced-motion: reduce){ + .tech-glow,.tech-glow-2,.tech-scanline,.card::after,.site-header::after{animation:none} +} + +.page-wrap{position:relative;z-index:1} + +.site-header{ + border-bottom:1px solid var(--border-header); + background:var(--header-bg); + backdrop-filter:blur(12px); +} +.site-header::after{ + content:"";display:block;height:1px;margin-top:-1px; + background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); + opacity:.7;animation:tech-shine 4s ease-in-out infinite; +} +.site-title{ + letter-spacing:.04em; + background:linear-gradient(135deg,var(--text-title) 0%,var(--accent) 45%,var(--accent-2) 100%); + -webkit-background-clip:text;-webkit-text-fill-color:transparent; + background-clip:text; + filter:drop-shadow(0 0 24px var(--title-glow)); +} +.site-title-sub{ + display:block;font-size:.72rem;font-weight:500; + letter-spacing:.22em;text-transform:uppercase; + color:var(--text-muted);margin-top:.35rem; + -webkit-text-fill-color:var(--text-muted); +} + +.site-nav a{ + border-radius:999px; + letter-spacing:.02em; + position:relative;overflow:hidden; + transition:transform .2s,box-shadow .2s,border-color .2s,background .2s; +} +.site-nav a::before{ + content:"";position:absolute;inset:0; + background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent); + opacity:0;transition:opacity .25s; +} +.site-nav a:hover::before{opacity:1} +.site-nav a:hover{ + transform:translateY(-1px); + box-shadow:0 4px 20px var(--nav-hover-glow); +} +.site-nav a.active{ + background:linear-gradient(135deg,var(--nav-active),var(--accent-2)); + border-color:transparent; + box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15); +} + +.theme-toggle{ + border-radius:999px; + transition:box-shadow .2s,border-color .2s; +} +.theme-toggle:hover{ + box-shadow:0 0 16px var(--nav-hover-glow); +} + +.card{ + border-radius:14px; + transition:transform .25s,box-shadow .25s,border-color .25s; +} +.card:hover{ + transform:translateY(-2px); + border-color:var(--card-border-hover); + box-shadow:var(--shadow-card-hover); +} +.card::after{ + animation:tech-shine 5s ease-in-out infinite; +} +.card-corner{ + width:16px;height:16px;opacity:.55; + transition:opacity .25s,box-shadow .25s; +} +.card:hover .card-corner{opacity:.9;box-shadow:0 0 8px var(--accent)} +.card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid} +.card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid} +.card h2{letter-spacing:.03em} +.card h2:before{ + box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2); +} + +input:focus,select:focus,textarea:focus{ + box-shadow:0 0 0 3px var(--focus-ring),0 0 16px var(--focus-glow); +} +button.btn-primary{ + font-weight:600;letter-spacing:.04em; + box-shadow:0 4px 20px var(--btn-glow); + transition:transform .15s,box-shadow .2s,opacity .2s; +} +button.btn-primary:hover{ + transform:translateY(-1px); + box-shadow:0 6px 28px var(--btn-glow-strong); + opacity:1; +} + +.list-item{ + transition:border-color .2s,box-shadow .2s,transform .2s; +} +.list-item:hover{ + border-color:var(--card-border-hover); + box-shadow:0 4px 16px var(--card-glow); +} +table tbody tr{transition:background .15s} +table tbody tr:hover{background:var(--row-hover)} + +.stat-item{ + backdrop-filter:blur(8px); + transition:transform .2s,box-shadow .2s; +} +.stat-item:hover{ + transform:translateY(-2px); + box-shadow:0 8px 24px var(--card-glow); +} +.stat-item .value{ + font-variant-numeric:tabular-nums; + letter-spacing:.02em; +} + +.pos-card{ + position:relative;overflow:hidden; + transition:border-color .2s,box-shadow .2s; +} +.pos-card::before{ + content:"";position:absolute;top:0;left:0;right:0;height:2px; + background:linear-gradient(90deg,var(--accent),var(--accent-2)); + opacity:.5; +} +.pos-card:hover{ + border-color:var(--card-border-hover); + box-shadow:0 6px 24px var(--card-glow); +} + +.badge{letter-spacing:.02em;border:1px solid transparent} +.badge.dir{border-color:rgba(76,194,255,.25)} +.badge.profit{border-color:rgba(76,217,127,.3)} +.badge.loss{border-color:rgba(255,102,102,.3)} + +.modal-box{ + border:1px solid var(--card-border-hover); + box-shadow:var(--shadow-card-hover),0 0 60px var(--card-glow); +} + +.flash{ + box-shadow:0 0 24px var(--focus-glow); + letter-spacing:.02em; +} + +.profile-spec{ + border:1px solid var(--card-border-hover); + box-shadow:inset 0 0 40px var(--card-glow); +} + +.key-live .live-price-line,.live-price{ + text-shadow:0 0 12px var(--focus-glow); +} + +.preset-tabs a.active{ + box-shadow:0 0 12px var(--focus-glow); +} diff --git a/templates/base.html b/templates/base.html index b9b708a..9a0f1f2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -7,67 +7,94 @@ + {% block extra_css %}{% endblock %} +
@@ -406,7 +438,7 @@
{{ session.username or '用户' }}退出
-

国内期货 | 交易监控 + 复盘一体化

+

国内期货 · 交易监控 + 复盘FUTURES MONITOR SYSTEM

+ {% block extra_js %}{% endblock %} diff --git a/templates/login.html b/templates/login.html index 1a9686c..15856b7 100644 --- a/templates/login.html +++ b/templates/login.html @@ -7,96 +7,160 @@ + +
+ +

期货监控系统

+ {% with messages = get_flashed_messages() %} {% if messages %}
{{ messages[0] }}
{% endif %} {% endwith %} @@ -118,7 +185,7 @@
- +