From 251d9b1cc8e133a844d52ed934afcf1e00be6d20 Mon Sep 17 00:00:00 2001 From: mike Date: Wed, 1 Jul 2026 04:46:43 +0200 Subject: [PATCH] updates UI --- tour-comfy/car.html | 438 +++++++++++++++++++++++++++++++++++------ tour-comfy/database.py | 43 +++- tour-comfy/edit_api.py | 62 +++++- 3 files changed, 463 insertions(+), 80 deletions(-) diff --git a/tour-comfy/car.html b/tour-comfy/car.html index d226b4e..9e77d0b 100644 --- a/tour-comfy/car.html +++ b/tour-comfy/car.html @@ -1709,21 +1709,72 @@ .sb-gen-refs .sb-gen-ref:hover .sb-gen-ref-x { display: flex; } .sb-gen-refs .sb-gen-ref:hover img { border-color: #dc2626; } #studioAngleBar { - position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); - display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; - z-index: 10; pointer-events: none; + position: absolute; + bottom: 12px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + gap: 6px; + opacity: 0; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 100; + pointer-events: none; + background: rgba(10, 10, 10, 0.88); + border: 1px solid rgba(255, 255, 255, 0.08); + padding: 6px 12px; + border-radius: 30px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); + backdrop-filter: blur(10px); + } + .studio-viewer:hover #studioAngleBar { + opacity: 1; + transform: translateX(-50%) translateY(-2px); + pointer-events: all; } - .studio-viewer:hover #studioAngleBar { opacity: 1; pointer-events: all; } #studioAngleBar button { - font-size: 15px; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.18); - border-radius: 4px; color: #fff; width: 34px; height: 34px; cursor: pointer; line-height: 1; - transition: background 0.12s; position: relative; + font-size: 13px; + font-weight: 500; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 50%; + color: #ccc; + width: 32px; + height: 32px; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + outline: none; + } + #studioAngleBar button:hover { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.18); + color: #fff; + transform: translateY(-1px); + } + #studioAngleBar button:active { + transform: translateY(1px); } - #studioAngleBar button:hover { background: rgba(255,255,255,0.18); } #studioAngleBar button[title]:hover::after { - content: attr(title); position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); - background: rgba(0,0,0,0.8); color: #fff; font-size: 10px; padding: 2px 6px; - border-radius: 3px; white-space: nowrap; pointer-events: none; + content: attr(title); + position: absolute; + bottom: 42px; + left: 50%; + transform: translateX(-50%); + background: #111; + border: 1px solid #333; + color: #eee; + font-size: 10px; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + pointer-events: none; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); + z-index: 1000; } /* template grid (faceswap / scenery) */ @@ -1886,7 +1937,7 @@ -
+
API @@ -2068,7 +2119,8 @@
-
+
+
@@ -2144,13 +2196,23 @@
-