Skip to content

Commit

Permalink
wip layout0.0.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@kiloking
kiloking committed Jan 24, 2024
1 parent a0b5a66 commit 1c5ed65
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 141 deletions.
26 changes: 18 additions & 8 deletions src/Page/Camera/FrontPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function FrontPage({handleClick}) {
setBeforeImage(reader.result);
};
};
setMsg('proceed to the next step..')
setMsg('Proceed to the next step..')
reader.readAsDataURL(file);
setTimeout(()=>{
navigate("/templates");
Expand Down Expand Up @@ -125,20 +125,30 @@ function FrontPage({handleClick}) {
transition={{ duration: 0.5 }}
className='mx-auto relative overflow-hidden z-0 w-6/12 md:w-5/12 lg:w-4/12'
>
{msg &&
<motion.div
initial={{ opacity: 0,y:10 }}
animate={{ opacity: 1,y:0,rotate:'-5deg'}}
exit={{ opacity: 0,y:10}}
transition={{ delay: 0.2 }}
className=' absolute top-[30%] right-0 text-[#fff] text-base bg-[#FF0050] border-[#111111] border-0 rounded-full px-3 py-1 z-30 '

>
{msg}
<div
className=' absolute w-0 h-0 border-l-[8px] border-l-transparent
border-t-[13px] border-t-[#FF0050]
border-r-[8px] border-r-transparent '
></div>
</motion.div>
}
<img
src= {'https://r2.web.moonshine.tw/msweb/backto80s_ai/bg-transparent.png?width=500'}
alt="card-image"
className='max-w-full w-full relative z-10 '

/>
{msg &&
<motion.div
initial={{ opacity: 0,y:10 }}
animate={{ opacity: 1,y:0}}
exit={{ opacity: 0,y:10}}
className=' absolute top-1/2 left-0 text-[#FF0050] text-base font-bold bg-[#FFF7BB]/70 border-[#111111] border rounded-full px-3 py-1 uppercase z-30 w-full'>{msg}</motion.div>
}

<div className=' absolute bottom-0 left-1/2 -translate-x-1/2 w-3/5 z-0 overflow-hidden'>

<motion.div
Expand Down
153 changes: 79 additions & 74 deletions src/Page/Camera/ModelSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,81 @@ function ModelSelect() {

return (
<div className="flex flex-col justify-between items-center w-full h-full my-10 md:my-0 md:mt-4">

<div className=' fixed top-0 left-1/2 w-full h-screen -translate-x-1/2 overflow-hidden flex items-center'>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1}}
exit={{ opacity: 0 }}
className='w-[120%] -ml-10 flex flex-col '
>
<div className=' '>
<img src={process.env.PUBLIC_URL+'/images/icon_ ribbon02.png'} alt="" className=''/>
</div>
</motion.div>
</div>

{isRender &&

<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1}}
exit={{ opacity: 0 }}
className=' flex flex-col justify-center items-center absolute z-30 top-1/2 drop-shadow '
>
<div className='mx-auto bg-[#fff]/90 rounded-full py-4'>
<div className=' relative w-full text-center '>
{msg && !msg.includes('Error') && (
<motion.div
initial={{ opacity: 0,y:10 }}
animate={{ opacity: 1,y:0}}
exit={{ opacity: 0,y:10}}
className='text-[#ff0050] md:text-2xl font-extrabold mt-4 drop-shadow-[0_0.8px_0.1px_rgba(0,0,0,0.8)]'>
{msg}

<div className='md:w-1/2 flex gap-2 items-center justify-center mx-auto mt-4'>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'200ms'}} />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'400ms'}} />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'600ms'}} />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'800ms'}} />
</div>


</div>
</motion.div>
)}

{
msg && msg.includes('Error') &&
<div className='mt-4 p-2 /70 flex flex-col items-center'>
<div className='text-[#FF0050] text-lg md:text-2xl font-extrabold mt-4 drop-shadow-[0_0.8px_0.1px_rgba(0,0,0,0.8)] '>{msg}</div>
<div className='md:text-lg text-[#FF0050] mt-2'>Unsupported format or unclear image.</div>
<Link to='/camera' className=' px-3 py-2 text-xs text-[#FFf] rounded-lg border-white/50 my-3 bg-[#FF0050]/20 hover:bg-[#FF0050]/40 font-roboto '>Back</Link>
</div>
}

</div>
</div>

</motion.div>


}

{beforeImage?
<Suspense fallback={<p>Loading</p>}>
Expand Down Expand Up @@ -451,17 +525,20 @@ function ModelSelect() {
<img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/logo.png" alt="" />

</motion.div>
<div className='w-[84%] md:w-6/12 lg:w-4/12 mx-auto relative mt-10 cursor-pointer'>
<div className='w-[84%] md:w-6/12 lg:w-4/12 mx-auto relative mt-10 cursor-pointer z-10'>

<div
className={ ' relative w-full transition-all duration-1000' }
onClick={onBtnClick}
onClick={isRender ? null : onBtnClick}
>
<TiltCard
imgUrl='https://r2.web.moonshine.tw/msweb/backto80s_ai/templates/btn_create3.png'
/>

</div>

</div>

{beforeImage?
<div className=" ">
</div>
Expand All @@ -473,79 +550,7 @@ function ModelSelect() {
}


{isRender &&
<div className='fixed inset-0 w-full h-screen bg-white/50 z-30 backdrop-blur-sm'>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1}}
exit={{ opacity: 0 }}
className=' absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-full'
>
<div className='w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 '>
<img src={process.env.PUBLIC_URL+'/images/icon_ ribbon02.png'} alt="" className=''/>
</div>



<div className='mx-auto absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<div className=' relative w-[75%] md:w-[280px] mt-[45%] mx-auto '>
<motion.img
initial={{ opacity: 0,y:10 }}
animate={{ opacity: 1,y:0}}
exit={{ opacity: 0,y:10}} src={bannerData[currentIndex].url} alt="Selected" className=" max-w-full h-fulll " />
</div>
<div className=' relative left-1/2 -translate-x-1/2 z-40 w-full text-center '>
{msg && !msg.includes('Error') && (
<motion.div
initial={{ opacity: 0,y:10 }}
animate={{ opacity: 1,y:0}}
exit={{ opacity: 0,y:10}}
className='text-[#FF0050] md:text-2xl font-extrabold mt-4 drop-shadow-[0_0.8px_0.1px_rgba(0,0,0,0.8)]'>
{msg}

<div className='md:w-1/2 flex gap-2 items-center justify-center mx-auto mt-4'>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'200ms'}} />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'400ms'}} />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'600ms'}} />
</div>
<div className=' relative'>
<img src={process.env.PUBLIC_URL+'/images/loading-1.png'} alt="" className='w-full' />
<img src={process.env.PUBLIC_URL+'/images/loading-2.png'} alt="" className='w-full absolute top-0 animate-[fadeInOut_3s_ease-in-out_infinite] ' style={{animationDelay:'800ms'}} />
</div>


</div>
</motion.div>
)}

{
msg && msg.includes('Error') &&
<div className='mt-4 p-2 /70 flex flex-col items-center'>
<div className='text-[#FF0050] text-lg md:text-2xl font-extrabold mt-4 drop-shadow-[0_0.8px_0.1px_rgba(0,0,0,0.8)] '>{msg}</div>
<div className='md:text-lg text-[#FF0050] mt-2'>Unsupported format or unclear image.</div>
<Link to='/camera' className=' px-3 py-2 text-xs text-[#FFf] rounded-lg border-white/50 my-3 bg-[#FF0050]/20 hover:bg-[#FF0050]/40 font-roboto '>Back</Link>
</div>
}

</div>
</div>

</motion.div>

</div>
}



Expand Down
12 changes: 10 additions & 2 deletions src/Page/Camera/ReadyToTake.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ function ReadyToTake({handleBackClick}) {
setBeforeImage(reader.result)
};
reader.readAsDataURL(compressFiles);
setMsg('proceed to the next step..')
setMsg('Proceed to the next step..')
setTimeout(()=>{
navigate("/templates");
},1200)
Expand Down Expand Up @@ -466,7 +466,15 @@ function ReadyToTake({handleBackClick}) {
initial={{ opacity: 0,y:10 }}
animate={{ opacity: 1,y:0}}
exit={{ opacity: 0,y:10}}
className=' absolute top-10 translate-x-1/2 text-[#fff] text-base font-bold bg-[#FF0050] border-[#111111] border-0 rounded-full px-3 py-1 uppercase z-30 '>{msg}</motion.div>
transition={{ delay: 0.2 }}
className=' absolute top-10 translate-x-1/2 text-[#fff] text-base bg-[#FF0050] border-[#111111] border-0 rounded-full px-3 py-1 z-30 '>
{msg}
<div
className=' absolute w-0 h-0 border-l-[8px] border-l-transparent
border-t-[13px] border-t-[#FF0050]
border-r-[8px] border-r-transparent '
></div>
</motion.div>
}
<motion.div
initial={{ opacity: 0,y:-10 }}
Expand Down
50 changes: 33 additions & 17 deletions src/Page/Camera/Result.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
IconButton
} from "@material-tailwind/react";
import { motion, AnimatePresence } from "framer-motion";
import { FaExternalLinkAlt } from "react-icons/fa";
import { FaXmark } from "react-icons/fa6";
import { FiLoader } from "react-icons/fi";
function Result({open ,handleOpen,taskStatus,handleDownload,isCompressing,isResultComplete}) {
Expand Down Expand Up @@ -51,13 +52,13 @@ function Result({open ,handleOpen,taskStatus,handleDownload,isCompressing,isResu
</IconButton>
</DialogHeader>
<DialogBody className='p-0 m-0 overflow-y-auto h-5/6'>
<div className='flex flex-col md:flex-col justify-center items-center gap-0 '>
<div className='flex flex-col md:flex-col justify-center items-center gap-0 w-10/12 mx-auto '>

{Object.keys(taskStatus).length > 0 && (
<div className='w-[85%] relative my-10 md:pt-[5%]'>
<div className='relative my-10 md:pt-[5%]'>
<Suspense fallback={<Spinner/>}>
<div className='md:hidden text-center mb-2 text-[#FF0050] font-cachet font-bold'>Press and hold to save photo↓</div>
<div className='w-full md:w-[80%] mx-auto relative mt-5 md:mt-0 grid gap-4 grid-cols-2 md:grid-cols-4 px-5'>
<div className=' mx-auto relative mt-5 md:mt-0 grid gap-4 grid-cols-2 md:grid-cols-4 px-5'>
{Object.keys(taskStatus).length > 0 ?

taskStatus.map((item,index)=>{
Expand All @@ -82,7 +83,16 @@ function Result({open ,handleOpen,taskStatus,handleDownload,isCompressing,isResu
)
}else{
return(
<div key={'finish'+index} className='flex flex-col justify-center items-center '>
<a
key={'finish'+index}
className='flex flex-col justify-center items-center relative transition-all group hover:-translate-y-2 '
href={item.img}
target='_blank'
>
<div className=' absolute top-3 right-3 transition-all opacity-50 group-hover:opacity-100'>
<FaExternalLinkAlt color='white' size={15} />
</div>

<motion.img
initial={{ opacity: 0}}
animate={{ opacity: 1}}
Expand All @@ -96,7 +106,7 @@ function Result({open ,handleOpen,taskStatus,handleDownload,isCompressing,isResu
{item.status}
</motion.div>

</div>
</a>
)
}

Expand All @@ -114,28 +124,34 @@ function Result({open ,handleOpen,taskStatus,handleDownload,isCompressing,isResu
)}


<div className='w-2/3 md:w-2/3 flex md:flex-col md:gap-2 items-center justify-center'>

<div className='flex flex-col md:flex-row w-full md:w-full gap-2 md:gap-8 mt-4 md:mt-0 h-14 md:h-auto '>
<div className=" relative mx-auto h-full cursor-pointer hover:-translate-y-1 transition-all" onClick={isResultComplete ? handleDownload : undefined}>
<img src={process.env.PUBLIC_URL+'/images/btn_download.png'} alt="" className={`${isResultComplete ? 'grayscale-0 ' : 'grayscale ' } h-full transition-all`}/>
<div className='flex justify-start flex-col gap-2 md:gap-8 mt-4 md:mt-0 w-full '>
<div className="flex relative h-10 lg:h-14 justify-end " >
<img
src={process.env.PUBLIC_URL+'/images/btn_download.png'}
alt=""
className={`${isResultComplete ? 'grayscale-0 ' : 'grayscale ' } h-full transition-all cursor-pointer hover:-translate-y-1`}
onClick={isResultComplete ? handleDownload : undefined}
/>
{isCompressing && <div className='text-center flex items-center justify-center gap-2 '><FiLoader className='animate-spin' />Compressing.. </div>}
</div>
<div className=" relative mx-auto h-full cursor-pointer hover:-translate-y-1 transition-all" onClick={handleOpen}>
{/* <div className=" relative h-full cursor-pointer hover:-translate-y-1 transition-all hidden" onClick={handleOpen}>
<img src={process.env.PUBLIC_URL+'/images/btn_redraw.png'} alt="" className="h-full"/>
</div>
<Link to='/camera' className=" relative mt-2 md:mt-0 mx-auto h-full hover:-translate-y-1 transition-all" onClick={handleOpen}>
<Link to='/camera' className=" relative mt-2 md:mt-0 h-full hover:-translate-y-1 transition-all hidden" onClick={handleOpen}>
<img src={process.env.PUBLIC_URL+'/images/btn_reshoot.png'} alt="" className="h-full"/>
</Link>
<Link to='/' className=" relative mt-2 md:mt-0 mx-auto h-full hover:-translate-y-1 transition-all" onClick={handleOpen}>
<img src={process.env.PUBLIC_URL+'/images/btn_home.png'} alt="" className="h-full"/>
</Link>
</Link> */}
<div className="flex relative h-10 lg:h-14 justify-end ">
<Link to='/' className=" relative mt-2 md:mt-0 h-full hover:-translate-y-1 transition-all" >
<img src={process.env.PUBLIC_URL+'/images/btn_home.png'} alt="" className="h-full"/>
</Link>
</div>

</div>

</div>
</div>


</div>

</DialogBody>

Expand Down
Loading

0 comments on commit 1c5ed65

Please sign in to comment.