AI Assistant Interface

rohitwushu
Jan 27, 2026 4
Live Preview

Live Editor

   <div class="assistant-container">
        <!-- Greeting -->
        <h1 class="greeting">Good Morning, UIBlitz.</h1>
        <p class="subheading">How can I help you today?</p>

        <!-- Search Box -->
        <div class="search-box">
            <!-- Input -->
            <div class="input-wrapper">
                <input type="text" class="search-input" placeholder="What's the science behind this one, Morty?">
            </div>

            <!-- Top Actions -->
            <div class="top-actions">
                <div class="left-actions">
                    <button class="attach-btn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
                        </svg>
                    </button>
                    <button class="action-btn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"/>
                            <path d="M21 21l-4.35-4.35"/>
                            <path d="M11 8v6"/>
                            <path d="M8 11h6"/>
                        </svg>
                        Portal Search
                    </button>
                    <button class="action-btn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/>
                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                            <line x1="12" y1="19" x2="12" y2="23"/>
                            <line x1="8" y1="23" x2="16" y2="23"/>
                        </svg>
                        Mega Mind
                    </button>
                </div>

                <div class="right-actions">
                    <button class="dropdown-btn">
                        Unity
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="6 9 12 15 18 9"/>
                        </svg>
                    </button>
                    <button class="submit-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Categories -->
            <div class="categories">
                <button class="category-pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <line x1="9" y1="15" x2="15" y2="15"/>
                    </svg>
                    Science
                </button>
                <button class="category-pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                    </svg>
                    Tutorials
                </button>
                <button class="category-pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="20" x2="18" y2="10"/>
                        <line x1="12" y1="20" x2="12" y2="4"/>
                        <line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                    Analyze
                </button>
                <button class="category-pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    Plumbus Art
                </button>
                <button class="category-pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="16 18 22 12 16 6"/>
                        <polyline points="8 6 2 12 8 18"/>
                    </svg>
                    Hack
                </button>
            </div>
        </div>
    </div>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* Main Container */
        .assistant-container {
            max-width: 800px;
            width: 100%;
            height: 300px;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        /* Heading */
        .greeting {
            font-size: 24px;
            font-weight: 400;
            color: #1a1a1a;
            margin-bottom: 4px;
        }

        .subheading {
            font-size: 16px;
            font-weight: 300;
            color: #888888;
            margin-bottom: 16px;
        }

        /* Search Box */
        .search-box {
            background: #ffffff;
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        /* Input Area */
        .input-wrapper {
            position: relative;
            margin-bottom: 12px;
        }

        .search-input {
            width: 100%;
            padding: 10px 14px;
            font-size: 13px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            outline: none;
            transition: all 0.3s ease;
            color: #999999;
        }

        .search-input:focus {
            border-color: #666666;
            box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.1);
        }

        /* Top Actions */
        .top-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 6px;
        }

        .left-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            background: #ececec;
            transform: translateY(-1px);
        }

        .action-btn svg {
            width: 14px;
            height: 14px;
        }

        .attach-btn {
            padding: 6px 8px;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .attach-btn:hover {
            background: #ececec;
        }

        .attach-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Right Actions */
        .right-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .dropdown-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dropdown-btn:hover {
            background: #ececec;
        }

        .submit-btn {
            padding: 6px 8px;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .submit-btn:hover {
            background: #333333;
        }

        .submit-btn:hover svg {
            fill: #ffffff;
        }

        .submit-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Category Pills */
        .categories {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 6px;
        }

        .category-pill {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .category-pill:hover {
            background: #333333;
            color: #ffffff;
            border-color: #333333;
        }

        .category-pill svg {
            width: 14px;
            height: 14px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .greeting {
                font-size: 20px;
            }

            .subheading {
                font-size: 14px;
            }

            .top-actions {
                justify-content: center;
            }

            .categories {
                gap: 5px;
            }

            .category-pill {
                padding: 5px 10px;
                font-size: 11px;
            }
        }

        @media (max-width: 480px) {
            .greeting {
                font-size: 18px;
            }

            .subheading {
                font-size: 13px;
            }

            .search-box {
                padding: 10px;
            }

            .action-btn,
            .dropdown-btn,
            .category-pill {
                font-size: 11px;
                padding: 5px 10px;
            }
        }
Categories

AI Assistant Interface

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
