diff --git a/ui/suite/designer.html b/ui/suite/designer.html index 3ad5983..6e3d1d3 100644 --- a/ui/suite/designer.html +++ b/ui/suite/designer.html @@ -97,6 +97,146 @@ transition: all 0.15s; } + .toolbar-btn.magic { + background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); + border-color: var(--accent-purple); + } + + .toolbar-btn.magic:hover { + background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); + transform: scale(1.05); + } + + .magic-panel { + position: fixed; + right: 20px; + bottom: 60px; + width: 380px; + max-height: 500px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0,0,0,0.4); + z-index: 1000; + display: none; + flex-direction: column; + overflow: hidden; + } + + .magic-panel.visible { + display: flex; + } + + .magic-header { + padding: 16px; + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + gap: 10px; + background: linear-gradient(135deg, rgba(203,166,247,0.1), rgba(137,180,250,0.1)); + } + + .magic-header svg { + width: 20px; + height: 20px; + color: var(--accent-purple); + } + + .magic-header h3 { + flex: 1; + font-size: 14px; + font-weight: 600; + } + + .magic-close { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 4px; + } + + .magic-close:hover { + color: var(--text-primary); + } + + .magic-content { + flex: 1; + overflow-y: auto; + padding: 16px; + } + + .magic-loading { + text-align: center; + padding: 40px; + color: var(--text-secondary); + } + + .magic-loading .spinner { + width: 32px; + height: 32px; + border: 3px solid var(--border-color); + border-top-color: var(--accent-purple); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 16px; + } + + .magic-suggestion { + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 12px; + margin-bottom: 12px; + } + + .magic-suggestion-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; + } + + .magic-suggestion-icon { + width: 24px; + height: 24px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + } + + .magic-suggestion-icon.ux { background: rgba(166,227,161,0.2); color: var(--accent-green); } + .magic-suggestion-icon.perf { background: rgba(249,226,175,0.2); color: var(--accent-yellow); } + .magic-suggestion-icon.a11y { background: rgba(137,180,250,0.2); color: var(--accent-blue); } + .magic-suggestion-icon.feature { background: rgba(203,166,247,0.2); color: var(--accent-purple); } + + .magic-suggestion-title { + font-weight: 600; + font-size: 13px; + } + + .magic-suggestion-desc { + font-size: 12px; + color: var(--text-secondary); + line-height: 1.5; + } + + .magic-suggestion-apply { + margin-top: 10px; + background: var(--accent-purple); + color: white; + border: none; + padding: 6px 12px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + } + + .magic-suggestion-apply:hover { + opacity: 0.9; + } + .toolbar-btn:hover { background: var(--border-color); } @@ -845,6 +985,17 @@ Export + +
+ + @@ -1111,6 +1262,28 @@ + +Analyzing your dialog...
+