chat.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" width="300" height="150" fill="#2d2d2d">
    <style>
        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .underline {
            animation: blink 0.5s steps(1, end) infinite, fadeOut 0.5s 2s forwards;
        }

        .text {
            opacity: 0;
            animation: fadeIn 0.5s forwards;
        }

        .terminal-text {
            font-family: Courier New, monospace;
            font-size: 11px;
            fill: #00FF00;
        }

        .text1 { animation-delay: 2.5s; }
        .text2 { animation-delay: 3.0s; }
        .text3 { animation-delay: 3.5s; }
        .text4 { animation-delay: 4.5s; }
    </style>

    <!-- prompt background -->
    <rect x="0" y="0" width="300" height="150" rx="5" ry="5" fill="#1e1e1e"/>

    <!-- prompt top bar -->
    <rect x="0" y="0" width="300" height="20" rx="10" ry="10" fill="#2d2d2d"/>

    <!-- prompt top bar button -->
    <circle cx="15" cy="10" r="5" fill="#ff5f57"/> <!-- 닫기 버튼 -->
    <circle cx="30" cy="10" r="5" fill="#ffbd2e"/> <!-- 최소화 버튼 -->
    <circle cx="45" cy="10" r="5" fill="#28ca42"/> <!-- 최대화 버튼 -->

    <!-- prompt input area -->
    <rect x="0" y="20" width="300" height="130" rx="5" ry="5" fill="#000000"/>

    <!-- prompt text area -->
    <g transform="translate(5, 40)">
        <text class="terminal-text"> &gt; </text>
        <line x1="15" y1="0" x2="20" y2="0" stroke="#00FF00" stroke-width="2" class="underline"/>
        <text x="15" y="0" class="text text1 terminal-text">
            Hello, nice to meet you.
        </text>
    </g>

    <g transform="translate(5, 55)" class="text text2 terminal-text">
        <text> &gt; </text>
        <text x="15" y="0" >
            My name is birariro
        </text>
    </g>

    <g transform="translate(5, 70)"  class="text text3 terminal-text">
        <text> &gt; </text>
        <text x="15" y="0">
            I want to have 'AirPods Max' 🎧
        </text>
    </g>

        <g transform="translate(5, 85)"  class="text text4 terminal-text">
        <text> &gt; </text>
        <text x="15" y="0">
            Thank you.
        </text>
    </g>
</svg>