{"html":"

\n \n

\n \n \n \n

\n \n

\n Create An Image\n Analyse Data\n More\n

\n","css":".container_chat_bot {\n display: flex;\n flex-direction: column;\n max-width: 260px;\n width: 100%;\n}\n\n.container_chat_bot .container-chat-options {\n position: relative;\n display: flex;\n background: linear-gradient(\n to bottom right,\n #7e7e7e,\n #363636,\n #363636,\n #363636,\n #363636\n );\n border-radius: 16px;\n padding: 1.5px;\n overflow: hidden;\n\n &::after {\n position: absolute;\n content: \"\";\n top: -10px;\n left: -10px;\n background: radial-gradient(\n ellipse at center,\n #ffffff,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.1),\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0)\n );\n width: 30px;\n height: 30px;\n filter: blur(1px);\n }\n}\n\n.container_chat_bot .container-chat-options .chat {\n display: flex;\n flex-direction: column;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 15px;\n width: 100%;\n overflow: hidden;\n}\n\n.container_chat_bot .container-chat-options .chat .chat-bot {\n position: relative;\n display: flex;\n}\n\n.container_chat_bot .chat .chat-bot textarea {\n background-color: transparent;\n border-radius: 16px;\n border: none;\n width: 100%;\n height: 50px;\n color: #ffffff;\n font-family: sans-serif;\n font-size: 12px;\n font-weight: 400;\n padding: 10px;\n resize: none;\n outline: none;\n\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: #555;\n cursor: pointer;\n }\n\n &::placeholder {\n color: #f3f6fd;\n transition: all 0.3s ease;\n }\n &:focus::placeholder {\n color: #363636;\n }\n}\n\n.container_chat_bot .chat .options {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding: 10px;\n}\n\n.container_chat_bot .chat .options .btns-add {\n display: flex;\n gap: 8px;\n\n & button {\n display: flex;\n color: rgba(255, 255, 255, 0.1);\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n\n &:hover {\n transform: translateY(-5px);\n color: #ffffff;\n }\n }\n}\n\n.container_chat_bot .chat .options .btn-submit {\n display: flex;\n padding: 2px;\n background-image: linear-gradient(to top, #292929, #555555, #292929);\n border-radius: 10px;\n box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, 0.5);\n cursor: pointer;\n border: none;\n outline: none;\n transition: all 0.15s ease;\n\n & i {\n width: 30px;\n height: 30px;\n padding: 6px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n backdrop-filter: blur(3px);\n color: #8b8b8b;\n }\n & svg {\n transition: all 0.3s ease;\n }\n &:hover svg {\n color: #f3f6fd;\n filter: drop-shadow(0 0 5px #ffffff);\n }\n\n &:focus svg {\n color: #f3f6fd;\n filter: drop-shadow(0 0 5px #ffffff);\n transform: scale(1.2) rotate(45deg) translateX(-2px) translateY(1px);\n }\n\n &:active {\n transform: scale(0.92);\n }\n}\n\n.container_chat_bot .tags {\n padding: 14px 0;\n display: flex;\n color: #ffffff;\n font-size: 10px;\n gap: 4px;\n\n & span {\n padding: 4px 8px;\n background-color: #1b1b1b;\n border: 1.5px solid #363636;\n border-radius: 10px;\n cursor: pointer;\n user-select: none;\n }\n}\n"}

dangerous-dolphin-47

👁 实时预览

📝 源代码