Skip to content

Commit

Permalink
narrative mobile version
Browse files Browse the repository at this point in the history
  • Loading branch information
@CloudLun
CloudLun committed Mar 23, 2024
1 parent ec3d887 commit ed1b5a7
Show file tree
Hide file tree
Showing 9 changed files with 37 additions and 34 deletions.
2 changes: 1 addition & 1 deletion components/infoPage/infoBox/InfoAI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

const InfoAI = () => {
return (
<div className='max-w-[60rem] flex flex-col gap-5'>
<div className='max-w-[60rem] flex flex-col gap-5 mt-5'>
<h2 className='font-semibold text-heading text-black'>How to identify an AI generated image</h2>
<p className='font-regular text-medium text-black'>FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies. The street view images are transformed with a generative artificial intelligence process called CycleGAN to depict projected flood scenarios. CycleGAN is an image-to-image translation model that takes an input of a normal street view image and reprocesses the pixels to illustrate an image with flooding.</p>
<p className='font-regular text-medium text-black'>All FloodGen generated imagery that is created with the use of generative artificial intelligence includes a FloodGen logo, located on the bottom-right corner of the image. View the image below for a few more tips on how to identify an AI generated flood image:</p>
Expand Down
2 changes: 1 addition & 1 deletion components/infoPage/infoBox/InfoAbout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type Props = {
const InfoAbout = ({ clickHandler }: Props) => {
return (
<>
<div className='flex flex-col gap-5 lg:gap-0'>
<div className='flex flex-col gap-5 lg:gap-0 mt-5'>
<div className='flex flex-col gap-3 mb-5 max-w-[60rem]'>
<p className='font-regular text-medium text-black'>Today, 1.3 million New York City residents live within or directly adjacent to the floodplain.1 Flood damage is expensive, extensive, and oftentimes predictable. Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact. If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
<p className='font-regular text-medium text-black'>FloodGen is an advocacy tool that uses generative artificial intelligence (GenAI) to create photorealistic images of predicted flooding. Projected flood imagery from FloodGen can be integrated within community engagement strategies to:</p>
Expand Down
24 changes: 14 additions & 10 deletions components/infoPage/infoBox/InfoBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import InfoAbout from './InfoAbout'
import InfoCredit from './InfoCredit'
import InfoAI from './InfoAI'

import Image from 'next/image'



const InfoBox = () => {
Expand All @@ -25,7 +25,7 @@ const InfoBox = () => {
const { setOpenStreetView, openStreetView } = useContext(StreetViewContext) as StreetViewType



const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })


const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI") => {
Expand All @@ -47,19 +47,23 @@ const InfoBox = () => {
<div className={`absolute top-[36%] lg:top-0 w-full h-[64%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
<div className=' px-5 lg:px-16 pt-8 lg:pt-[5rem] pb-8 w-full rounded-t-[1rem]'>
{/* <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' className='mb-2' /> */}
<img src="/logos/floodgen.svg" alt="" className='mb-2 w-[203px] h-[38.17px]' />
{
isDesktop ? <img src="/logos/floodgen.svg" alt="" className='mb-2 w-[203px] h-[38.17px]' /> :
<img src="/logos/floodgen.svg" alt="" className='mb-4 w-[80px] h-[15.4px]' />
}

{/* <InfoTitle /> */}
<div className='lg:flex lg:mt-8'>
<div className='flex lg:flex-col gap-3 lg:gap-5 text-[#9C9C9C] '>
<div className={`w-[50%] font-bold text-heading lg:text-[1.5rem] cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
<div className={`w-[50%] font-bold text-heading lg:text-[1.5rem] cursor-pointer ${selected === "Introduction" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
<div className={`w-[60%] font-bold text-heading lg:text-[1.5rem] cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
<div className={`w-[50%] font-bold text-heading lg:text-[1.5rem] cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
<div className='grid grid-cols-2 gap-2 lg:flex lg:flex-col lg:gap-5 text-[#9C9C9C] '>
<div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem] cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
<div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem] cursor-pointer ${selected === "Introduction" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
<div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem] cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
<div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem] cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
</div>
{
selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> :
selected === "AI" ? <InfoAI /> :
<InfoCredit />
selected === "AI" ? <InfoAI /> :
<InfoCredit />
}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/infoPage/infoBox/InfoCredit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

const InfoCredit = () => {
return (
<div className='max-w-[60rem]'>
<div className='max-w-[60rem] mt-5'>
<div className='flex flex-col gap-5'>
<h2 className='font-semibold text-heading text-black'><a href="https://beta.nyc/" target="_blank" className='hover:underline'>BetaNYC</a></h2>
<p className='font-regular text-medium text-black'>BetaNYC is a civic organization dedicated to improving lives in New York through civic design, technology, and data. With an aim to improve access to public interest technology, the Civic Innovation Lab at BetaNYC provides assistance with research, data analysis, and data visualization. This project was created by the Civic Innovation Lab at BetaNYC, with the initial research into the flood image generator model led by Vaishali Talwar.</p>
Expand Down
12 changes: 6 additions & 6 deletions components/narrative/Ending.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ type Props = {
clickHandler: () => void
}

const Ending = ({clickHandler}:Props) => {
const Ending = ({ clickHandler }: Props) => {
return (
<div className="relative w-full h-full">
<img src="/imgs/narrative_six.png" alt="" className="w-full h-[100vh]" />
<div className="absolute left-8 bottom-[11rem] px-5 py-7 max-w-[50rem] bg-black bg-opacity-[.65] rounded-lg">
<p className="font-semibold text-heading text-white">FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies.</p>
<div className="relative w-full h-[50%] md:h-full">
<img src="/imgs/narrative_six.png" alt="" className="w-full h-full" />
<div className="absolute max-sm:right-4 left-4 md:left-8 bottom-[11rem] px-5 py-7 md:max-w-[50rem] bg-black bg-opacity-[.65] rounded-lg">
<p className="font-semibold text-[14px] md:text-heading text-white">FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies.</p>
</div>
<button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[1.25rem] bg-[#306DDD] rounded-[40px] cursor-pointer' onClick={clickHandler}>Explore Floodgen</button>
<button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[14px] md:text-[1.25rem] bg-[#306DDD] rounded-[40px] cursor-pointer' onClick={clickHandler}>Explore Floodgen</button>
<img src='/logos/fg_logo_white_sm.png' className='absolute right-6 bottom-4 z-30 w-8 h-8' />
</div>
)
Expand Down
10 changes: 5 additions & 5 deletions components/narrative/Introduction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react'

const Introduction = () => {
return (
<div className="relative w-full h-full">
<div className="relative w-full h-[50%] md:h-full">
<img src="/imgs/narrative_one.png" className="w-full h-full" />
<div className="absolute right-12 bottom-16 px-5 py-7 w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
<h1 className="font-semibold text-[3.75rem] text-white">1.3 million</h1>
<p className="mb-[1rem] font-semibold text-heading text-white">New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable</p>
<p className="font-semibold text-[0.875rem] text-white">Source: Info, Photo</p>
<div className="absolute right-8 max-sm:left-8 md:right-12 bottom-16 px-5 py-7 md:w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
<h1 className="font-semibold text-[24px] md:text-[3.75rem] text-white">1.3 million</h1>
<p className="mb-[1rem] font-semibold text-[14px] md:text-heading text-white">New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable</p>
<p className="font-semibold text-[10px] md:text-[0.875rem] text-white">Source: Info, Photo</p>
</div>
</div>
)
Expand Down
11 changes: 5 additions & 6 deletions components/narrative/Satellite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,25 @@ const Satellite = () => {
<div className="">
{/* <Scrollama offset={0.5} onStepEnter={onStepEnter}> */}
{/* <Step data={1}> */}
<div className='relative w-full h-full'>
<div className='relative w-full h-[50%] md:h-full'>
<img src="/imgs/narrative_two.png" className='w-full h-full' alt="" />
<div className="absolute right-12 bottom-16 px-5 py-7 w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
<p className="mb-[1rem] font-semibold text-[1.125rem] text-white">Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact</p>
<div className="absolute right-8 max-sm:left-8 md:right-12 bottom-[25%] md:bottom-16 px-5 py-7 md:w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
<p className="mb-[1rem] font-semibold max-width-full text-[14px] md:text-[1.125rem] text-white">Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact</p>
</div>
</div>
{/* </Step> */}
{/* <Step data={2}> */}
<div className='relative w-full h-full'>
<div className='relative w-full h-[50%] md:h-full'>
<img src="/imgs/narrative_three.png" className='w-full h-full' alt="" />
{/* <div className="absolute left-0 top-0 w-full h-full bg-black bg-opacity-40"></div> */}
<div className="absolute left-8 bottom-[5%] flex flex-col items-center p-5 w-[50%] bg-black bg-opacity-[.65] rounded-lg">
<img src="/imgs/narrative_six.png" className='w-full h-[20%]' alt="" />
<p className="mt-2 font-semibold text-[1.125rem] text-white">If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
<p className="mt-2 font-semibold text-[14px] md:text-[1.125rem] text-white">If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
</div>
</div>
{/* </Step> */}
{/* </Scrollama> */}
</div>

)
}

Expand Down
6 changes: 3 additions & 3 deletions components/narrative/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,19 @@ const Slider = () => {


return (
<div className="w-full h-[100vh] bg-white relative" onMouseUp={handleMouseUp} >
<div className="w-full h-[50vh] md:h-[100vh] bg-white relative" onMouseUp={handleMouseUp} >
<div
className="relative w-full h-full overflow-hidden select-none"
onMouseMove={handleMove}
onMouseDown={handleMouseDown}
>
<img src="/imgs/narrative_six.png" className="w-full h-full" alt="" />
<div className="absolute right-8 bottom-24 p-5 font-semibold text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">AI generated</div>
<div className="absolute right-8 bottom-10 md:bottom-24 p-5 font-semibold text-[14px] md:text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">AI generated</div>
<div
className="absolute top-0 left-0 right-0 w-full h-full overflow-hidden select-none z-30"
style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
>
<div className="absolute left-8 bottom-24 p-5 font-semibold text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">Street view</div>
<div className="absolute left-8 bottom-10 md:bottom-24 p-5 font-semibold text-[14px] md:text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">Street view</div>
<img src="/imgs/narrative_four.png" className="w-full h-full" alt="" />
</div>
<div
Expand Down
2 changes: 1 addition & 1 deletion components/narrative/StreetView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

const StreetView = () => {
return (
<div className="relative w-full h-full">
<div className="relative w-full h-[50%] md:h-full">
<img src="/imgs/narrative_four.png" alt="" className="w-full h-full" />
</div>
)
Expand Down

0 comments on commit ed1b5a7

Please sign in to comment.