{"html":"

ChatGPT

Hello, how can I assist you today?

I have a question about your services.

Sure, I'm here to help. What would you like to know?

\n \n

\n","css":".chat-card {\n width: 300px;\n background-color: #fff;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.chat-header {\n padding: 10px;\n background-color: #f2f2f2;\n display: flex;\n align-items: center;\n}\n\n.chat-header .h2 {\n font-size: 16px;\n color: #333;\n}\n\n.chat-body {\n padding: 20px;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n}\n\n.incoming {\n background-color: #e1e1e1;\n}\n\n.outgoing {\n background-color: #f2f2f2;\n text-align: right;\n}\n\n.message p {\n font-size: 14px;\n color: #333;\n margin: 0;\n}\n\n.chat-footer {\n padding: 10px;\n background-color: #f2f2f2;\n display: flex;\n}\n\n.chat-footer input[type=\"text\"] {\n flex-grow: 1;\n padding: 5px;\n border: none;\n border-radius: 3px;\n}\n\n.chat-footer button {\n padding: 5px 10px;\n border: none;\n background-color: #4285f4;\n color: #fff;\n font-weight: bold;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.chat-footer button:hover {\n background-color: #0f9d58;\n}\n\n@keyframes chatAnimation {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.chat-card .message {\n animation: chatAnimation 0.3s ease-in-out;\n animation-fill-mode: both;\n animation-delay: 0.1s;\n}\n\n.chat-card .message:nth-child(even) {\n animation-delay: 0.2s;\n}\n\n.chat-card .message:nth-child(odd) {\n animation-delay: 0.3s;\n}\n"}

clever-fly-79

👁 实时预览

📝 源代码