Dynamic MCP UI Generator

/* Modern Glassmorphism Design System */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%); --glass-bg: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.2); --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); --glass-backdrop: blur(16px); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.8); --text-muted: rgba(255, 255, 255, 0.6); --border-radius: 16px; --border-radius-sm: 8px; --border-radius-lg: 24px; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--primary-gradient); min-height: 100vh; color: var(--text-primary); line-height: 1.6; } /* Animated Background */ .app { min-height: 100vh; position: relative; overflow-x: hidden; } .app::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%); z-index: -1; animation: backgroundShift 20s ease-in-out infinite; } @keyframes backgroundShift { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(1deg); } } /* Glassmorphism Components */ .glass { background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--border-radius); } .glass-strong { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 12px 40px rgba(31, 38, 135, 0.4); } /* Header */ .app-header { text-align: center; padding: var(--spacing-xl) var(--spacing-lg); margin-bottom: var(--spacing-xl); } .app-header h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin-bottom: var(--spacing-md); background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); letter-spacing: -0.02em; } .server-status { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm); font-weight: 500; font-size: 0.9rem; } .status-ok { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); } .status-error { color: #f87171; border-color: rgba(248, 113, 113, 0.3); } /* Main Container */ .app-main { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); } /* Tab Navigation */ .tab-navigation { display: flex; justify-content: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); flex-wrap: wrap; } .tab-btn { background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); color: var(--text-secondary); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--border-radius-sm); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .tab-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .tab-btn:hover::before { left: 100%; } .tab-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); color: var(--text-primary); } .tab-btn.active { background: var(--primary-gradient); border-color: transparent; color: var(--text-primary); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); transform: translateY(-2px); } /* Main Section */ .mcp-ui-section { background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: var(--border-radius-lg); padding: var(--spacing-xl); box-shadow: var(--glass-shadow); margin-bottom: var(--spacing-xl); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); flex-wrap: wrap; gap: var(--spacing-md); } .section-header h2 { font-size: 1.8rem; font-weight: 600; color: var(--text-primary); margin: 0; } /* Buttons */ .btn { background: var(--primary-gradient); color: var(--text-primary); border: none; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--border-radius-sm); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-success { background: var(--success-gradient); } .btn-warning { background: var(--warning-gradient); } .btn-danger { background: var(--danger-gradient); } /* Form Elements */ .form-group { margin-bottom: var(--spacing-lg); } .form-group label { display: block; margin-bottom: var(--spacing-xs); font-weight: 500; color: var(--text-primary); font-size: 0.9rem; } .form-control { width: 100%; padding: var(--spacing-sm); background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm); color: var(--text-primary); font-size: 0.95rem; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: rgba(102, 126, 234, 0.8); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); background: rgba(255, 255, 255, 0.15); } .form-control::placeholder { color: var(--text-muted); } /* Builder Components */ .form-builder, .dashboard-builder, .chart-builder { color: var(--text-primary); } .form-builder h3, .dashboard-builder h3, .chart-builder h3 { margin-bottom: var(--spacing-lg); color: var(--text-primary); font-size: 1.5rem; font-weight: 600; } .fields-section, .widgets-section { margin: var(--spacing-xl) 0; } .fields-section h4, .widgets-section h4 { margin-bottom: var(--spacing-md); color: var(--text-primary); font-size: 1.2rem; font-weight: 500; } .field-editor, .widget-editor { background: rgba(255, 255, 255, 0.05); padding: var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .field-row, .widget-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto auto; gap: var(--spacing-sm); align-items: center; } .field-row label { display: flex; align-items: center; gap: var(--spacing-xs); margin: 0; font-size: 0.9rem; } .add-btn, .generate-btn { background: var(--success-gradient); margin-top: var(--spacing-lg); } .remove-btn { background: var(--danger-gradient); padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.85rem; } /* Generated UI */ .generated-ui { margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--glass-border); } .generated-ui h3 { margin-bottom: var(--spacing-lg); color: var(--text-primary); font-size: 1.5rem; text-align: center; font-weight: 600; } /* MCP UI Container */ .mcp-ui-container { margin-top: var(--spacing-lg); } .mcp-ui-container iframe { border: none; border-radius: var(--border-radius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); width: 100%; max-width: 900px; margin: 0 auto; display: block; background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); } /* Notifications */ .notifications { position: fixed; top: var(--spacing-lg); right: var(--spacing-lg); z-index: 1000; max-width: 400px; } .notification { background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); color: var(--text-primary); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-radius: var(--border-radius-sm); box-shadow: var(--glass-shadow); border: 1px solid var(--glass-border); animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; font-weight: 500; } .notification.success { border-left: 4px solid #4ade80; background: rgba(74, 222, 128, 0.1); } .notification.info { border-left: 4px solid #60a5fa; background: rgba(96, 165, 250, 0.1); } .notification.warning { border-left: 4px solid #fbbf24; background: rgba(251, 191, 36, 0.1); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Error Message */ .error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; padding: var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-lg); text-align: center; backdrop-filter: blur(10px); } .error-message p { margin: 0; font-weight: 500; } /* Responsive Design */ @media (max-width: 768px) { .app-header { padding: var(--spacing-lg) var(--spacing-md); } .app-main { padding: 0 var(--spacing-md); } .mcp-ui-section { padding: var(--spacing-lg) var(--spacing-md); } .section-header { flex-direction: column; text-align: center; } .tab-navigation { flex-direction: column; align-items: center; } .field-row, .widget-row { grid-template-columns: 1fr; gap: var(--spacing-xs); } .field-row label { justify-content: flex-start; } .notifications { position: static; margin-bottom: var(--spacing-lg); max-width: 100%; } .app-header h1 { font-size: 2.5rem; } } /* Loading States */ .loading { opacity: 0.7; pointer-events: none; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid transparent; border-top: 2px solid var(--text-primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Focus States */ *:focus { outline: 2px solid rgba(102, 126, 234, 0.5); outline-offset: 2px; } /* Selection */ ::selection { background: rgba(102, 126, 234, 0.3); color: var(--text-primary); } /* AI Generator Styles */ .ai-generator { background: #f8f9fa; padding: 2rem; border-radius: 12px; margin-bottom: 2rem; } .ai-description { color: #6c757d; margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.5; } .templates-section { margin: 1.5rem 0; } .templates-section h4 { margin-bottom: 1rem; color: #495057; } .template-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .template-btn { background: #e9ecef; border: 1px solid #dee2e6; color: #495057; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.9rem; transition: all 0.2s; } .template-btn:hover { background: #dee2e6; border-color: #adb5bd; color: #212529; } .template-btn:active { background: #ced4da; }