Transaction: Fp7Ep1V...XHF5

{ "data": { "funding-ai.near": { "widget": { "chat.home": { "": "const Container = styled.div`\n display:flex;\n flex-direction:column;\n align-items:center;\n background-image: linear-gradient(to right top, #cad5fe, #ced9fe, #d3ddff, #d7e0ff, #dce4ff);\n`;\n\nconst Row = styled.div`\n display:flex;\n flex-direction: column;\n width:100%;\n overflow: auto;\n`;\n\nconst Header = styled.div`\n display:flex;\n width:100%;\n justify-content:space-between;\n font-size: 0.875rem; \n line-height: 1.25rem; \n padding: 15px 20px;\n background: #acbafc;\n .logo{\n display:flex;\n color: #3730a3;\n font-size:20px;\n font-weight:700;\n text-decoration:none;\n }\n .info{\n margin-left: 10px;\n display:flex;\n gap:10px;\n align-items:center;\n }\n .icon{\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius: 50%;\n background: #9aa8fb;\n padding: 2px;\n }\n`;\n\nconst Content = styled.div`\n display:flex;\n height:100vh;\n align-items:center;\n justify-content:center;\n\n .content{\n margin:auto;\n max-width:85%;\n @media screen and (max-width:768px){\n max-width:100%;\n }\n }\n .container{\n width:100%;\n padding: 0 20px;\n display:flex;\n flex-direction:column;\n align-items:center;\n @media screen and (max-width:768px){\n padding: 0 10px;\n }\n }\n .header{\n display:flex;\n flex-direction:column;\n width:100%;\n align-items:center;\n justify-content:center;\n text-align:center;\n }\n .title{\n font-size:45px;\n font-weight:700;\n color:#3730a3;\n @media screen and (max-width:768px){\n font-size: 30px;\n }\n }\n .search{\n width:100%;\n position:relative;\n &::placeholder{\n color:#9b97d1;\n }\n color:#3730a3;\n font-weight:500;\n \n }\n`;\n\nconst SearchBar = styled.div`\n position:relative;\n width:65%;\n display:flex;\n align-items:center;\n @media screen and (max-width:768px){\n width:100%;\n }\n .search{\n width:100%;\n border-radius:25px;\n border: 2px solid #c7d2fe;\n padding: 10px 20px;\n outline:none;\n :focus{\n border: 2px solid #3730a3;\n }\n :hover{\n border: 2px solid #3730a3;\n }\n @media screen and (max-width:768px){\n padding: 15px 20px;\n }\n }\n .arrow{\n position:absolute;\n right:10px;\n top:6px;\n cursor:default;\n @media screen and (max-width:768px){\n top: 10px;\n right:5px;\n }\n }\n .button-arrow{\n outline:none;\n border:none;\n background:none;\n font-size:22px;\n @media screen and (max-width:768px){\n color:black;\n font-size:25px;\n }\n }\n`;\n\nconst Ideas = styled.div`\n margin-top:20px;\n width:50%;\n @media screen and (max-width:768px){\n width:75%;\n }\n .text{\n display:flex;\n justify-content:center;\n font-size:16px;\n font-weight:400;\n color:#3730a3;\n @media screen and (max-width:768px){\n font-size:13px;\n }\n }\n .des{\n display:flex;\n flex-wrap:wrap;\n width:100%;\n padding: 20px;\n padding-top: 5px;\n justify-content:center;\n flex direction:row;\n gap:10px;\n @media screen and (max-width:768px){\n padding: 5px;\n }\n }\n .btn-idea{\n background:#6366f1;\n border:1px solid #574fe6;\n padding: 5px 10px;\n border-radius:25px;\n color:white;\n }\n`;\nconst [value, setValue] = useState(\"\");\nconst [isShow, setIsShow] = useState(false);\nconst hanleInput = (e) => {\n const value = e.target.value;\n setValue(value);\n};\nconst hanleClick = () => {\n setIsShow(true);\n};\nreturn (\n <Container>\n <Row>\n <Header>\n <a class=\"logo\" href=\"/funding-ai.near/widget/chat.home\">\n funding<span class=\"text-white\">.ai</span>\n </a>\n <div class=\"info\">\n <a href=\"\" target=\"_blank\" rel=\"noredirect\" class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n >\n <path d=\"M108,136a16,16,0,1,1-16-16A16,16,0,0,1,108,136Zm56-16a16,16,0,1,0,16,16A16,16,0,0,0,164,120Zm76.07,76.56-67,29.71A20.15,20.15,0,0,1,146,214.9l-8.54-23.13c-3.13.14-6.27.24-9.45.24s-6.32-.1-9.45-.24L110,214.9a20.19,20.19,0,0,1-27.08,11.37l-67-29.71A19.93,19.93,0,0,1,4.62,173.41L34.15,57A20,20,0,0,1,50.37,42.19l36.06-5.93A20.26,20.26,0,0,1,109.22,51.1l4.41,17.41c4.74-.33,9.52-.51,14.37-.51s9.63.18,14.37.51l4.41-17.41a20.25,20.25,0,0,1,22.79-14.84l36.06,5.93A20,20,0,0,1,221.85,57l29.53,116.38A19.93,19.93,0,0,1,240.07,196.56ZM227.28,176,199.23,65.46l-30.07-4.94-2.84,11.17c2.9.58,5.78,1.2,8.61,1.92a12,12,0,1,1-5.86,23.27A168.43,168.43,0,0,0,128,92a168.43,168.43,0,0,0-41.07,4.88,12,12,0,0,1-5.86-23.27c2.83-.72,5.71-1.34,8.61-1.92L86.85,60.52,56.77,65.46,28.72,176l60.22,26.7,5-13.57c-4.37-.76-8.67-1.65-12.88-2.71a12,12,0,0,1,5.86-23.28A168.43,168.43,0,0,0,128,168a168.43,168.43,0,0,0,41.07-4.88,12,12,0,0,1,5.86,23.28c-4.21,1.06-8.51,1.95-12.88,2.71l5,13.57Z\"></path>\n </svg>\n </a>\n <a\n href=\"https://twitter.com/kurodenjiro\"\n target=\"_blank\"\n rel=\"noredirect\"\n class=\"icon\"\n >\n <svg\n width=\"19\"\n height=\"19\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </a>\n <a\n href=\"/funding-ai.near/widget/chat.home\"\n target=\"_blank\"\n rel=\"noredirect\"\n class=\"icon\"\n >\n <svg\n width=\"19\"\n height=\"19\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.89453 2.73682H20.1045V4.92605H3.89453V2.73682Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M20.1045 6.91009H3.89453V9.09969H20.1045V6.91009Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M3.89453 11.0834V21.2636L11.9992 16.7171L20.1052 21.2636V11.0834H3.89453Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </a>\n </div>\n </Header>\n {isShow ? (\n <Widget\n src=\"funding-ai.near/widget/chat.show\"\n props={{ search: value }}\n />\n ) : (\n <Content>\n <div class=\"content\">\n <div class=\"container\">\n <div class=\"header\">\n <h1 class=\"title\">Fund public goods like magic</h1>\n <SearchBar>\n <input\n class=\"search\"\n type=\"input\"\n placeholder=\"What would you like to fund?\"\n value={value}\n onChange={hanleInput}\n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n hanleClick();\n }\n }}\n />\n <div class=\"arrow\">\n <button\n class=\"button-arrow\"\n type=\"submit\"\n onClick={hanleClick}\n >\n <i class=\"bi bi-arrow-right-circle\"></i>\n </button>\n </div>\n </SearchBar>\n </div>\n <Ideas>\n <div class=\"text\">Some ideas: </div>\n <div class=\"des\">\n <div>\n <button\n onClick={() => {\n setValue(\"open source\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n Open Source\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"desci\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n Desci\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"nft\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n NFT\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"nft\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n ART\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"nft\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n Education\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"nft\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n Nation\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"nft\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n MEME\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"social impact\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n Social Impact\n </button>\n </div>\n <div>\n <button\n onClick={() => {\n setValue(\"ai\");\n setIsShow(true);\n }}\n class=\"btn-idea\"\n >\n AI\n </button>\n </div>\n </div>\n </Ideas>\n </div>\n </div>\n </Content>\n )}\n </Row>\n </Container>\n);\n" } } } } }