LipzzGPT V2.5

AI Assistant dengan tema Space Pro, multi-model AI, 15+ Tools kreatif, Command Palette, dan fitur canggih lainnya.

AI Image

Tools

Commands

Settings

Enter kirim Shift+Enter baris baru / commands Ctrl+K palette

var(--accent-primary); } .theme-option.active { border-color: var(--accent-primary); box-shadow: var(--shadow-glow); } .theme-preview { width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 8px; } .theme-name { font-size: 12px; color: var(--text-secondary); } /* Tools Modal */ .tools-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 400; display: none; align-items: center; justify-content: center; } .tools-modal-overlay.show { display: flex; } .tools-modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px; width: 90%; max-width: 600px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; } .tools-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px; overflow-y: auto; } .tool-item { padding: 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; transition: all 0.2s ease; } .tool-item:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); } .tool-icon { width: 40px; height: 40px; background: var(--accent-gradient); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 12px; } .tool-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .tool-desc { font-size: 12px; color: var(--text-muted); } /* Tool Form Modal */ .tool-form-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); z-index: 450; display: none; align-items: center; justify-content: center; } .tool-form-overlay.show { display: flex; } .tool-form-modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px; width: 90%; max-width: 500px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; } .tool-form-content { padding: 20px; overflow-y: auto; } .tool-form-group { margin-bottom: 16px; } .tool-form-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; } .tool-form-input, .tool-form-textarea, .tool-form-select { width: 100%; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-size: 14px; outline: none; transition: all 0.2s ease; font-family: inherit; } .tool-form-input:focus, .tool-form-textarea:focus, .tool-form-select:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-glow); } .tool-form-textarea { min-height: 100px; resize: vertical; } .tool-form-submit { width: 100%; padding: 14px; background: var(--space-gradient); border: none; border-radius: 12px; color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .tool-form-submit:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); } .tool-result { margin-top: 16px; padding: 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 12px; } .tool-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: var(--text-secondary); } .tool-loading svg { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Error Modal */ .error-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 300; display: none; align-items: center; justify-content: center; } .error-modal-overlay.active { display: flex; } .error-modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px; max-width: 420px; width: 90%; text-align: center; } /* Toast Notification */ .toast-container { position: fixed; top: 80px; right: 20px; z-index: 600; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; display: flex; align-items: center; gap: 12px; animation: toastIn 0.3s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } @keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .toast.success { border-left: 3px solid var(--success); } .toast.error { border-left: 3px solid var(--error); } .toast.info { border-left: 3px solid var(--info); } /* Bottom Sheet (Mobile) */ .bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 400; display: none; } .bottom-sheet-overlay.show { display: block; } .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-secondary); border-radius: 20px 20px 0 0; padding: 20px; transform: translateY(100%); transition: transform 0.3s ease; z-index: 401; max-height: 70vh; overflow-y: auto; } .bottom-sheet.show { transform: translateY(0); } .bottom-sheet-handle { width: 40px; height: 4px; background: var(--border-color); border-radius: 2px; margin: 0 auto 20px; } /* Scroll to bottom button */ .scroll-bottom-btn { position: fixed; bottom: 160px; right: 24px; width: 44px; height: 44px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; opacity: 0; visibility: hidden; z-index: 40; } .scroll-bottom-btn.visible { opacity: 1; visibility: visible; } .scroll-bottom-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /* File Attachment */ .file-attachment { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-tertiary); border-radius: 8px; margin-bottom: 8px; font-size: 12px; } .file-attachment-name { color: var(--text-secondary); flex: 1; } .file-attachment-remove { cursor: pointer; color: var(--text-muted); } /* Diff Viewer */ .diff-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; } .diff-panel { background: var(--code-bg); border-radius: 8px; padding: 12px; font-family: monospace; font-size: 13px; overflow-x: auto; } .diff-panel-header { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .diff-added { background: rgba(34, 197, 94, 0.2); color: #22c55e; } .diff-removed { background: rgba(239, 68, 68, 0.2); color: #ef4444; } /* Mobile */ @media (max-width: 768px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); width: 280px; } .sidebar.open { transform: translateX(0); } .input-area { left: 0; padding: 12px 16px 20px; } .settings-panel { width: 100%; } .welcome-title { font-size: 28px; } .tools-grid { grid-template-columns: 1fr; } .theme-grid { grid-template-columns: repeat(2, 1fr); } .diff-container { grid-template-columns: 1fr; } } /* Utility */ .hidden { display: none !important; } .kbd { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; font-size: 12px; font-family: monospace; color: var(--text-secondary); }

LipzzGPT V2.5

Grok AI

Online

LipzzGPT V2.5

AI Assistant dengan tema Space Pro, multi-model AI, 15+ Tools kreatif, Command Palette, dan fitur canggih lainnya.

AI Image

Tools

Commands

Settings

Enter kirim • Shift+Enter baris baru • / commands • Ctrl+K palette

ESC

Pengaturan

Tema

Space

Cyberpunk

Minimalist

Nature

Retro

Ocean

Model AI

Provider Pilih provider AI

API Keys

Groq API Key

OpenRouter API Key

Ollama Base URL

Preferensi

Streaming Text Tampilkan teks huruf demi huruf

LaTeX Rendering Render rumus matematika

Sound Effects Aktifkan suara notifikasi

Export Chat

Data