| 6 | "": "const dataObj = fetch(\\\\\\\"https://data.cityofnewyork.us/resource/hg8x-zxpr.json\\\\\\\");\\\\n\\\\nif (!dataObj.body) {\\\\n return <></>;\\\\n}\\\\n\\\\nconst BG = styled.div`\\\\n\\\\tbackground-color: #fff;\\\\n\\\\tbackground-image: linear-gradient(180deg, #fafcfd 0%, #b6dbfc 100%);\\\\n\\\\tposition: fixed;\\\\n\\\\ttop: 0;\\\\n\\\\tleft: 0;\\\\n\\\\tright: 0;\\\\n\\\\tbottom: 0;\\\\n\\\\tz-index: -2;\\\\n`;\\\\n\\\\nconst Circle1 = styled.div`\\\\n\\\\twidth: 500px;\\\\n\\\\theight: 500px;\\\\n\\\\tborder-radius: 50%;\\\\n\\\\tbackground: linear-gradient(90deg, #9333ea 0%, #f29bc0 100%), #03d69d;\\\\n\\\\tposition: fixed;\\\\n\\\\ttop: -100px;\\\\n\\\\tright: -100px;\\\\n\\\\tz-index: 0;\\\\n\\\\topacity: 0.5;\\\\n\\\\tfilter: blur(50px);\\\\n`;\\\\nconst Circle2 = styled.div`\\\\n\\\\twidth: 400px;\\\\n\\\\theight: 400px;\\\\n\\\\tborder-radius: 50%;\\\\n\\\\tborder: 1px solid #cbcbcb;\\\\n\\\\tbackground: linear-gradient(90deg, #f9d74a 0%, #ffd50d 100%);\\\\n\\\\tposition: fixed;\\\\n\\\\ttop: 80px;\\\\n\\\\tright: -100px;\\\\n\\\\tz-index: 0;\\\\n\\\\topacity: 0.8;\\\\n\\\\tfilter: blur(100px);\\\\n\\\\n\\\\tanimation: move 3s ease infinite;\\\\n\\\\n\\\\t@keyframes move {\\\\n\\\\t\\\\t0% {\\\\n\\\\t\\\\t\\\\ttransform: translate(0, 0);\\\\n\\\\t\\\\t}\\\\n\\\\t\\\\t50% {\\\\n\\\\t\\\\t\\\\ttransform: translate(60px, 40px) scale(1.2);\\\\n\\\\t\\\\t}\\\\n\\\\t\\\\t100% {\\\\n\\\\t\\\\t\\\\ttransform: translate(0, 0);\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n`;\\\\n\\\\nconst Card = styled.div`\\\\n\\\\tdisplay: flex;\\\\n\\\\tflex-direction: column;\\\\n\\\\tbackground: rgba(255, 255, 255, 0.375);\\\\n\\\\tbox-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1);\\\\n\\\\tborder-radius: 2rem;\\\\n\\\\tborder: 1px solid rgba(255, 255, 255, 0.125);\\\\n\\\\tposition: relative;\\\\n\\\\tz-index: 1;\\\\n\\\\tmargin: 20px auto;\\\\n\\\\twidth: 100%;\\\\n\\\\theight: 75vh;\\\\n`;\\\\n\\\\nconst Unselected = styled.a`\\\\n\\\\tcolor: #999;\\\\n text-decoration:none; \\\\n\\\\n\\\\t&:hover {\\\\n text-decoration:none; \\\\n }\\\\n`;\\\\n\\\\nconst Switch = styled.div`\\\\n\\\\tcolor: #999;\\\\n\\\\tfont-size: 15px;\\\\n\\\\tfont-weight: 800;\\\\n\\\\tfont-family: \\\\\\'Mona Sans\\\\\\', sans-serif;\\\\n\\\\tdisplay: block;\\\\n\\\\ttext-align: center;\\\\n\\\\tbackground: white;\\\\n\\\\tpadding: 1px 6px;\\\\n\\\\tborder-radius: 15px;\\\\n\\\\tmargin-top: 15px;\\\\n\\\\tposition: absolute;\\\\n\\\\tleft: 50%;\\\\n\\\\t-ms-transform: translateX(-50%);\\\\n\\\\ttransform: translateX(-50%);\\\\n\\\\tz-index: 3;\\\\n`;\\\\n\\\\nconst Selected = styled.span`\\\\n\\\\tbackground: linear-gradient(\\\\n\\\\t\\\\t120deg,\\\\n\\\\t\\\\t#ffd50d 0%,\\\\n\\\\t\\\\t#f29bc0 25%,\\\\n\\\\t\\\\t#4f46e5 50%,\\\\n\\\\t\\\\t#f29bc0 75%,\\\\n\\\\t\\\\t#ffd50d 100%\\\\n\\\\t);\\\\n\\\\tcolor: #000;\\\\n\\\\tbackground-clip: text;\\\\n\\\\ttext-fill-color: transparent;\\\\n\\\\t-webkit-background-clip: text;\\\\n\\\\t-webkit-text-fill-color: transparent;\\\\n\\\\n\\\\tanimation: shine 50s ease infinite;\\\\n\\\\n\\\\t@keyframes shine {\\\\n\\\\t\\\\t0% {\\\\n\\\\t\\\\t\\\\tbackground-position: -1000px;\\\\n\\\\t\\\\t}\\\\n\\\\t\\\\t100% {\\\\n\\\\t\\\\t\\\\tbackground-position: 1000px;\\\\n\\\\t\\\\t}\\\\n\\\\t}\\\\n`;\\\\n\\\\nconst MAP_STYLE = \\\\\\\"mapbox://styles/mapbox/streets-v12\\\\\\\";\\\\nconst MAP_TOKEN =\\\\n \\\\\\\"pk.eyJ1IjoidGVqMDEiLCJhIjoiY2xqcHZ2dGpkMDB5azNsbzQ0bmMwNjRjaCJ9.FVv2zRPaLwzZMgagbI2YZw\\\\\\\";\\\\n\\\\nconst center = [-74.00597, 40.71427];\\\\nconst zoom = 10;\\\\nconst accountId = context.accountId;\\\\n\\\\nconst Container = styled.div`\\\\n\\\\tdisplay: flex;\\\\n\\\\twidth: 100%;\\\\n\\\\tborder-radius: 2rem;\\\\n\\\\tmargin-top: var(--header-height);\\\\n\\\\theight: calc(100vh - 70px);\\\\n\\\\talign-items: stretch;\\\\n\\\\tflex-direction: column;\\\\n\\\\toverflow: auto;\\\\n\\\\tposition: relative;\\\\n\\\\tz-index: 2;\\\\n`;\\\\n\\\\nconst Button = styled.button`\\\\n\\\\tbackground: rgba(25, 26, 26, 0.75);\\\\n\\\\tborder-radius: 6px;\\\\n\\\\tcolor: white;\\\\n\\\\tz-index: 1;\\\\n\\\\tpadding: 6px 12px;\\\\n`;\\\\n\\\\nconst FormCard = styled.div`\\\\n\\\\tbackground: rgba(25, 26, 26, 0.9);\\\\n\\\\tcolor: #fff;\\\\n\\\\tborder-radius: 1rem;\\\\n\\\\tpadding: 12px;\\\\n\\\\twidth: 360px;\\\\n\\\\tmax-height: 1000px;\\\\n\\\\tposition: absolute;\\\\n\\\\tleft: 200px;\\\\n\\\\ttop: 200px;\\\\n`;\\\\n\\\\nconst InspectCard = styled.div`\\\\n\\\\tbackground: rgba(25, 26, 26, 0.9);\\\\n\\\\tcolor: #fff;\\\\n\\\\tborder-radius: 1rem;\\\\n\\\\tpadding: 12px;\\\\n\\\\twidth: 360px;\\\\n\\\\tmax-height: 3600px;\\\\n\\\\tposition: absolute;\\\\n\\\\tleft: 0;\\\\n\\\\ttop: 0;\\\\n`;\\\\n\\\\nconst Units = styled.div`\\\\n\\\\tmargin-top: 6px;\\\\n\\\\tborder-top: 1px solid #fff;\\\\n\\\\tpadding: 6px 12px;\\\\n`;\\\\n\\\\nconst Unit = styled.div`\\\\n\\\\tfont-size: 15px;\\\\n\\\\tmargin: 3px 0;\\\\n\\\\tpadding-bottom: 6px;\\\\n\\\\t&:not(:last-child) {\\\\n\\\\t\\\\tborder-bottom: 1px dashed #fff;\\\\n\\\\t}\\\\n`;\\\\n\\\\nconst BuildingInfo = styled.div`\\\\n\\\\tfont-size: 12px;\\\\n`;\\\\n\\\\nconst Tag = styled.span`\\\\n\\\\tbackground: #f9d74a;\\\\n\\\\tcolor: rgb(25, 26, 26);\\\\n\\\\tborder-radius: 12px;\\\\n\\\\tpadding: 2px 6px;\\\\n\\\\tmargin-right: 3px;\\\\n`;\\\\n\\\\nconst Location = styled.div`\\\\n\\\\tposition: absolute;\\\\n\\\\tbottom: 50px;\\\\n\\\\t@media (max-width: 510px) {\\\\n\\\\t\\\\tpadding: 6px 15px;\\\\n\\\\t\\\\tbottom: 15px;\\\\n\\\\t}\\\\n`;\\\\n\\\\nconst MagicDot = styled.div`\\\\n\\\\tposition: fixed;\\\\n\\\\tright: 20px;\\\\n\\\\tbottom: 20px;\\\\n\\\\tz-index: 1000;\\\\n\\\\twidth: 80px;\\\\n\\\\theight: 80px;\\\\n\\\\tborder-radius: 50%;\\\\n\\\\tcursor: pointer;\\\\n\\\\tbackground: radial-gradient(circle at 30% 30%, rgb(74, 73, 73), rgb(0, 0, 0));\\\\n\\\\tbox-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.06) 0px 2px 4px,\\\\n\\\\t\\\\trgba(0, 0, 0, 0.1) 0px 10px 15px;\\\\n\\\\ttransition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s;\\\\n\\\\n\\\\timg {\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t\\\\twidth: 100%;\\\\n\\\\t\\\\theight: 100%;\\\\n\\\\t\\\\tborder-radius: 50%;\\\\n\\\\t\\\\tobject-fit: cover;\\\\n\\\\t\\\\ttransition: 2s;\\\\n\\\\t}\\\\n\\\\n\\\\t&:hover img {\\\\n\\\\t\\\\topacity: 1;\\\\n\\\\t}\\\\n`;\\\\n\\\\nconst dataMap = {\\\\n onMarket: [],\\\\n offMarket: [],\\\\n};\\\\n\\\\n// dataObj.body.forEach((building) => {\\\\n// const markerObj = {\\\\n// type: \\\\\\\"Feature\\\\\\\",\\\\n// properties: {\\\\n// ...building,\\\\n// },\\\\n// geometry: {\\\\n// type: \\\\\\\"Point\\\\\\\",\\\\n// coordinates: [Number(building.longitude), Number(building.latitude)],\\\\n// },\\\\n// };\\\\n// dataMap.onMarket = [...dataMap.onMarket, markerObj];\\\\n// });\\\\n\\\\n// const newData = {\\\\n// type: \\\\\\\"FeatureCollection\\\\\\\",\\\\n// crs: {},\\\\n// features: [...dataMap.onMarket],\\\\n// };\\\\n\\\\nconsole.log(newData);\\\\n\\\\nState.init({\\\\n edit: false,\\\\n currentLocation: {},\\\\n data: {},\\\\n});\\\\n\\\\nconst onMagicDotClick = () => {\\\\n const selected =\\\\n dataMap.onMarket[Math.floor(Math.random() * dataMap.onMarket.length)];\\\\n State.update({ focusedMarker: selected, showInspect: true });\\\\n};\\\\n\\\\nfunction VerificationIcon() {\\\\n return (\\\\n <img\\\\n src=\\\\\\\"https://i.ibb.co/sHQcy2B/icons8-verified-96.png\\\\\\\"\\\\n width=\\\\\\\"18\\\\\\\"\\\\n height=\\\\\\\"18\\\\\\\"\\\\n />\\\\n );\\\\n}\\\\n\\\\nfunction Inspect() {\\\\n return (\\\\n <InspectCard>\\\\n {state.focusedMarker.project_name}\\\\n <br />\\\\n {state.focusedMarker.address}\\\\n <BuildingInfo>\\\\n <Tag>{state.focusedMarker.borough}</Tag>\\\\n <Tag>Total Units: {state.focusedMarker.total_units}</Tag>\\\\n </BuildingInfo>\\\\n </InspectCard>\\\\n );\\\\n}\\\\n\\\\nfunction LocationIcon() {\\\\n return (\\\\n <svg\\\\n xmlns=\\\\\\\"http://www.w3.org/2000/svg\\\\\\\"\\\\n width=\\\\\\\"24\\\\\\\"\\\\n height=\\\\\\\"24\\\\\\\"\\\\n viewBox=\\\\\\\"0 0 24 24\\\\\\\"\\\\n >\\\\n <g\\\\n fill=\\\\\\\"none\\\\\\\"\\\\n stroke=\\\\\\\"currentColor\\\\\\\"\\\\n strokeLinejoin=\\\\\\\"round\\\\\\\"\\\\n strokeWidth=\\\\\\\"2\\\\\\\"\\\\n >\\\\n <path d=\\\\\\\"M13 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0Z\\\\\\\" />\\\\n <path d=\\\\\\\"M17.5 9.5c0 3.038-2 6.5-5.5 10.5c-3.5-4-5.5-7.462-5.5-10.5a5.5 5.5 0 1 1 11 0Z\\\\\\\" />\\\\n </g>\\\\n </svg>\\\\n );\\\\n}\\\\n\\\\nreturn (\\\\n <div className=\\\\\\\"position-relative h-100 w-100 p-1\\\\\\\">\\\\n <BG />\\\\n <Card>\\\\n <Switch>\\\\n <Unselected\\\\n href=\\\\\\\"https://near.org/raycent.near/widget/Map\\\\\\\"\\\\n style={{ color: \\\\\\\"#999\\\\\\\" }}\\\\n >\\\\n Stablized\\\\n </Unselected>{\\\\\\\" \\\\\\\"}\\\\n | <Selected>Affordable</Selected>\\\\n </Switch>\\\\n <Container>\\\\n {state.showInspect && (\\\\n <Widget\\\\n src={\\\\\\\"efiz.near/widget/Map.Inspect\\\\\\\"}\\\\n props={{\\\\n focusedMarker: state.focusedMarker,\\\\n children: (p) => <Inspect {...p} />,\\\\n }}\\\\n />\\\\n )}\\\\n <Widget\\\\n src={\\\\\\\"ajluc.near/widget/Map.Mapbox\\\\\\\"}\\\\n props={{\\\\n API_URL,\\\\n accessToken: MAP_TOKEN,\\\\n styleUrl: MAP_STYLE,\\\\n center,\\\\n zoom,\\\\n markerAsset: \\\\\\\"https://i.ibb.co/j464rX1/on.png\\\\\\\",\\\\n markers: newData,\\\\n edit: state.edit,\\\\n onMapClick: (e) => {\\\\n State.update({\\\\n currentLocation: e.coordinates,\\\\n showInspect: false,\\\\n });\\\\n },\\\\n onMarkerClick: (e) => {\\\\n State.update({ focusedMarker: e, showInspect: true });\\\\n },\\\\n }}\\\\n />\\\\n </Container>\\\\n </Card>\\\\n <Circle1 />\\\\n <Circle2 />\\\\n <MagicDot onClick={onMagicDotClick}>\\\\n <img src=\\\\\\\"https://i.ibb.co/X7PJfh6/s-l1600.png\\\\\\\" />\\\\n </MagicDot>\\\\n </div>\\\\n);\\\\n" |