wip layout0.2

src/Layouts/CameraLayout.js

@@ -58,21 +58,31 @@ function CameraLayout() {
         backgroundImage: `url('https://moonshine.b-cdn.net/msweb/backto80s_ai/bg01.png')`,
       }}
     >   
-        <div className='w-full md:aspect-[14/6] flex flex-col h-full md:h-auto justify-between  px-0 md:px-2 pt-4 md:pt-10 relative'>
-          <div className='flex justify-between md:h-14  items-start px-10 md:px-0 flex-col md:flex-row '>
-            <div className='w-full md:w-1/4  mt-0 md:mt-0 h-full order-2 md:order-1'>
+        {location.pathname === '/camera' &&
+          <motion.div 
+            className=' pt-8 text-gray-200   w-2/5 mx-auto z-20 '
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <img src="https://moonshine.b-cdn.net/msweb/backto80s_ai/logo.png" alt="" />
+          </motion.div>
+        }
+        <div className='w-full md:aspect-[14/6] flex flex-col h-full md:h-auto justify-between  px-0 md:px-12 pt-4 md:pt-1 relative'>
+          <div className='flex justify-between md: items-start px-10 md:px-0 flex-col md:flex-row '>
+            <div className='w-full md:w-full h-full '>
             {location.pathname === '/camera' ? 
               <>
+                <div className='flex items-center gap-2 relative'>
+                  <img src={process.env.PUBLIC_URL+'/images/title_heart.png'} alt="" className='max-w-full absolute -top-3 left-1 w-7   '/> 
+                  <div className='text-[#FF0050] text-base font-bold bg-[#FFF7BB] border-[#111111] border rounded-full  px-3 py-1 ml-2'>STEP1 : Take Photo </div>
+                </div>
                 <Link to='/' className=" " >
-                  <Button variant="text" className="flex items-center gap-3 text-white p-0 mb-2 hover:text-red-500 text-base">
-                    <FaArrowLeft size={15} />
+                  <Button variant="text" className="flex items-center gap-3 text-[#FF3976] p-0 mb-2text-2xl font-extrabold  mt-2 drop-shadow-[0_0.8px_0.1px_rgba(0,0,0,0.8)]">
+                    <FaArrowLeft size={15} className='ml-2' />
                     Back 
                   </Button>
                 </Link>
-                <div className='flex items-center gap-2'>
-                  <img src={process.env.PUBLIC_URL+'/images/title_slash.svg'} alt="" className='max-w-full   '/> 
-                  <div className='text-[#FF0050] text-base font-bold'>STEP1 : Take Photo </div>
-                </div>
 
               </>
               :
@@ -86,20 +96,9 @@ function CameraLayout() {
           <div 
             className={`${isMobile ? "h-full ":  "" } flex flex-col w-full mx-auto  items-center md:mt-0 py-1 relative `}
           >
-            <div className=' w-full md:w-auto absolute top-0 left-0 z-10 right-0'>
-
-              {
-                location.pathname === '/camera' && 
-                  <div className="mt-4  text-white/70 text-xs text-center md:text-left">
-                    <img src="https://moonshine.b-cdn.net/msweb/asusaicamera/images/page_fui01_gif.gif" alt="p01" className='max-w-full hidden md:block  ' /> 
-                  </div>
-              }
-            </div>
-
-
+
             <Outlet />
 
-
 
           </div>
 

src/Layouts/RenderLayout.js

@@ -7,52 +7,37 @@ function RenderLayout() {
   const storedUsername = getUsernameFromCookie();
   return (
     <div 
-      className='min-h-[100vh] relative bg-black text-white bg-repeat bg-center bg-contain '
+      className='min-h-[100vh] relative bg-black text-white bg-no-repeat bg-center bg-cover '
       style={{
-        backgroundImage: `url(${process.env.PUBLIC_URL +'/images/bg_border_2.png'})`,
+        backgroundImage: `url('https://moonshine.b-cdn.net/msweb/backto80s_ai/bg01.png')`,
       }}
     > 
-        <img 
-          src={process.env.PUBLIC_URL+'/images/bg_fui_left.png'} 
-          alt="" 
-          className='max-w-full flex h-screen md:py-5 left-2 absolute  z-0'/>
-        <img 
-          src={process.env.PUBLIC_URL+'/images/bg_fui_right.png'} 
-          alt="" 
-          className='max-w-full flex h-screen md:py-5 right-2 absolute z-0 '/>
-
-        <div className='w-full  px-0 md:px-32 pt-4 md:pt-10 flex flex-col '>
+
+        <div className='w-full  px-0 md:px-12 pt-4 md:pt-10 flex flex-col '>
           <div className='flex justify-between items-start md:h-10 px-10 md:px-0 flex-col md:flex-row'>
             <div className='w-full md:w-1/3 mt-0 md:mt-0  order-2 md:order-1'>
+
+              <div className='flex items-center gap-2 relative'>
+                <img src={process.env.PUBLIC_URL+'/images/title_heart.png'} alt="" className='max-w-full absolute -top-3 left-1 w-7   '/> 
+                <div className='text-[#FF0050] text-base font-bold bg-[#FFF7BB] border-[#111111] border rounded-full  px-3 py-1 ml-2'>STEP2 : Choose a module </div>
+              </div>
               <Link to='/camera' className=" " >
-                <Button variant="text" className="flex items-center gap-3 text-white text-base p-0 mb-2 hover:text-red-500">
+                <Button variant="text" className="flex items-center gap-3 text-[#FF3976] p-0 mb-2  text-2xl font-extrabold  mt-2 drop-shadow-[0_0.8px_0.1px_rgba(0,0,0,0.8)]">
                   <FaArrowLeft size={15} />
                   Back 
                 </Button>
               </Link>
-              <div className='flex items-center gap-2'>
-                <img src={process.env.PUBLIC_URL+'/images/title_slash.svg'} alt="" className='max-w-full   '/> 
-                <div className='text-[#FF0050] text-base font-bold'>STEP2 : Choose a module </div>
-              </div>
 
             </div>
-            <img src="https://moonshine.b-cdn.net/msweb/asusaicamera/images/header_right.gif" alt="" className='max-w-screen   md:h-full w-1/2 md:w-auto  ml-auto order-1 md:order-2 ' />
           </div>
           <div className='mt-7 md:mt-6 relative md:my-10 px-0 md:mx-10'>
-            <div className=' w-full md:w-auto  top-0 left-0 z-10 right-0'>
-              {
-                storedUsername && <div className="mt-1   text-white/70 text-xs text-center md:text-left">Player name：{storedUsername}</div>
-              }
-            </div>
+
 
             <Outlet />
           </div>
 
 
-
-          <div className='mt-auto hidden md:block'>
-            <img src={process.env.PUBLIC_URL+'/images/page_bottom.png'} alt="p01" className='max-w-full w-full mt-auto ' />
-          </div>
+
 
 
         {/* <div className='text-sm text-white/30  text-center p-2'>

src/Page/Camera/FrontPage.js

@@ -49,7 +49,7 @@ function FrontPage({handleClick}) {
 
 
   return (
-        <div className='flex flex-col justify-between items-center md:justify-center w-full px-0  '>
+        <div className='flex flex-col justify-between items-center md:justify-center w-full px-0 py-[5%]  '>
           {notification && (
             <CustomAlert message={notification} onClose={() => setNotification(null)} />
           )}

src/Page/Camera/ModelSelect.js

@@ -19,16 +19,10 @@ import 'swiper/css/navigation';
 // import required modules
 import { EffectCoverflow, Pagination,Navigation } from 'swiper/modules';
 const bannerData = [
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/1.jpg" ,title:'MODULE 1', subtitle:"Introduction to module one",id:'1'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/2.jpg" ,title:'MODULE 2', subtitle:"Introduction to module two",id:'2'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/3.jpg" ,title:'MODULE 3', subtitle:"Introduction to module three",id:'3'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/4.jpg" ,title:'MODULE 4', subtitle:"Introduction to module four",id:'4'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/5.jpg" ,title:'MODULE 5', subtitle:"Introduction to module five",id:'5'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/6.jpg" ,title:'MODULE 6', subtitle:"Introduction to module six",id:'6'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/7.jpg" ,title:'MODULE 7', subtitle:"Introduction to module 7",id:'7'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/8.jpg" ,title:'MODULE 8', subtitle:"Introduction to module 8",id:'8'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/9.jpg" ,title:'MODULE 9', subtitle:"Introduction to module 9",id:'9'},
-  {url:"https://moonshine.b-cdn.net/msweb/asusaicamera/templates/10.jpg" ,title:'MODULE 10', subtitle:"Introduction to module 10",id:'10'},
+  {url:"https://moonshine.b-cdn.net/msweb/backto80s_ai/templates/template01.png" ,title:'MODULE 1', subtitle:"Introduction to module one",id:'1'},
+  {url:"https://moonshine.b-cdn.net/msweb/backto80s_ai/templates/template02.png" ,title:'MODULE 2', subtitle:"Introduction to module two",id:'2'},
+  {url:"https://moonshine.b-cdn.net/msweb/backto80s_ai/templates/template03.png" ,title:'MODULE 3', subtitle:"Introduction to module three",id:'3'},
+  {url:"https://moonshine.b-cdn.net/msweb/backto80s_ai/templates/template04.png" ,title:'MODULE 4', subtitle:"Introduction to module four",id:'4'},
 
  ]
 
@@ -59,7 +53,6 @@ function ModelSelect() {
 
   const handleOpen = () => setShowRender(!showRender);
   const handleImageClick = (index) =>{
-    swiper.slideTo(index)
   }
   const needsCompression = (file, maxSize, maxDimension) => {
     return file.size > maxSize || (file.width > maxDimension || file.height > maxDimension);
@@ -280,49 +273,12 @@ function ModelSelect() {
         :
         <div className="w-[160px] aspect-video flex flex-col mx-auto fixed top-5 right-5 text-xs">Remember to upload a photo</div>
       }
-        <div className='w-full md:w-[80%] mx-auto relative mt-5 md:mt-0'>
-          <Swiper
-            onSwiper={setSwiper}
-            onSlideChange={() => {
-              setCurrentId(String(swiper.activeIndex+1))
-            }}
-            effect={'coverflow'}
-            grabCursor={true}
-            centeredSlides={true}
-            breakpoints={{
-              420: {
-                slidesPerView: 1.5,
-                spaceBetween:10
-              },
-              768: {
-                slidesPerView: 3,
-                spaceBetween:20
-              },
-              1024:{
-                slidesPerView: 3,
-                spaceBetween:20
-              }
-            }}
-            slidesPerView={1.4}
-            coverflowEffect={{
-              rotate: ` ${isMobile?  20 : 0}`,
-              stretch: ` ${isMobile?  10 : 20}`,
-              depth:` ${isMobile?  500 : 500}`,
-              modifier: 1,
-              slideShadows: true,
-            }}
-            pagination={false}
-            navigation={{
-              nextEl: " .slidenext2",
-              prevEl: " .slideprev2"
-            }}
-            modules={[EffectCoverflow, Pagination,Navigation]}
-            className="mySwiper"
-          >
+        <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'>
+
             {
               bannerData?.map((item,index)=>{
                 return(
-                  <SwiperSlide key={'tf'+index}>
+                  <div key={'tf'+index} className=' '>
                     <div className=' relative '>
                       <div className=' relative w-full'>
                         <img 
@@ -349,32 +305,24 @@ function ModelSelect() {
 
                     </div>
 
-                  </SwiperSlide>
+                  </div>
                 )
               })
             } 
 
 
-          </Swiper>
-          <div className='w-[110%] mx-auto gap-10 justify-between hidden  md:flex absolute top-[40%] -left-[4%] '>
-            <img src={process.env.PUBLIC_URL+'/images/arrow_left.png'} alt=""  className="slideprev2 cursor-pointer " 
-
-            />
-            <img src={process.env.PUBLIC_URL+'/images/arrow_right.png'} alt=""  className="slidenext2 cursor-pointer " 
+
 
-            />
-          </div>
 
         </div>
         {beforeImage? 
-          <div className=" relative mt-8 md:mt-4 cursor-pointer" onClick={onBtnClick}>
-            <div className='sample-heading-3 w-full h-full absolute top-0 z-10   animate-[fadeIn_0.3s_ease-in-out_infinite] hover:animate-none   '></div>
-            <div className='bg-gradient-to-b bg-[#FF0050] to-[#000] px-10 py-2 border  border-white/30 flex items-center gap-2 font-roboto' >Start creating</div>
+          <div className=" relative mt-8 md:mt-8 cursor-pointer h-14" onClick={onBtnClick}>
+            <img src={process.env.PUBLIC_URL+'/images/btn_create.png'} alt="" className="max-w-full h-full" />
           </div>
           :
           <div className=" relative mt-8 md:mt-4 cursor-default" onClick={onBtnClick}>
-            <div className='bg-gradient-to-b bg-[#888] to-[#000] px-10 py-2 border  border-white/30 flex items-center gap-2  font-roboto' >No images found for operation.</div>
-            <div className='text-sm font-normal text-white/60 text-center mt-3'>Please take a new photo or upload the image.</div>
+            <div className='bg-[#FF3976]/80  px-10 py-2 border  border-white/30 flex items-center gap-2  font-roboto' >No images found for operation.</div>
+            <div className='text-sm font-normal text-[#FF3976] text-center mt-3'>Please take a new photo or upload the image.</div>
           </div>
         }
 

src/Page/Camera/ReadyToTake.js

@@ -390,7 +390,7 @@ function ReadyToTake({handleBackClick}) {
 
   const [src, { blur }] = useProgressiveImg(process.env.PUBLIC_URL+'/images/camera_page/tiny.jpeg', ResultImage);
   return (
-    <div className='flex flex-col w-full justify-between items-center gap-4  my-10 md:my-0'>
+    <div className='flex flex-col w-full justify-between items-center gap-4  my-10 md:my-0 md:-mt-4'>
 
 
       {notification && (
@@ -402,12 +402,12 @@ function ReadyToTake({handleBackClick}) {
 
 
           <div 
-            className=" relative w-full  md:w-1/2 mx-auto  bg-gray-500 md:aspect-[16/9]"
-            style={{clipPath: 'polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%)'}}
+            className=" relative w-full  md:w-1/2 mx-auto  bg-gray-500  md:aspect-video"
+            style={{clipPath: 'inset(0 0 0% 0 round 25px)'}}
           >
             <Alert 
               open={isCameraInfo} 
-              className="absolute bottom-2 left-1/2 -translate-x-1/2 z-20 w-10/12  md:w-10/12 mx-auto bg-black p-3 rounded-md  [&>*]:mr-0  " 
+              className="absolute bottom-12 left-1/2 -translate-x-1/2 z-20 w-10/12  md:w-10/12 mx-auto bg-black p-3 rounded-md  [&>*]:mr-0  " 
             >
               <div className="flex items-center gap-2 w-full text-sm">
                 <FaInfoCircle size={32} /> <div>Please remove accessories such as glasses and hats, and align your face with the reference line</div>
@@ -459,18 +459,18 @@ function ReadyToTake({handleBackClick}) {
               animate={{ opacity: 1 , x: '-50%', y:0}}
               exit={{ opacity: 0,x:'-50%' ,y:-10}}
               transition={{ duration: 0.2 }}
-              className="absolute -bottom-24 md:-bottom-6 left-1/2 -translate-x-1/2 z-10 flex items-center  gap-10 ">
+              className="absolute -bottom-24 md:-bottom-6 left-1/2 -translate-x-1/2 z-10 flex items-center  gap-10  w-[80%] ">
               <button 
-                className="flex items-center  rounded-full bg-gray-800   p-5 shadow-lg shadow-gray-300/40  "
+                className="flex items-center     h-12"
                 onClick={()=>setImage(null)}
               > 
-                <FaArrowLeft color="" size={24}/>  
+                <img src={process.env.PUBLIC_URL+'/images/btn_back.png'} alt=""  className="h-full"/>
               </button>
               <Link 
                 to={'/templates'} 
-                className="flex items-center  rounded-full bg-[#FF0050]   p-5 shadow-lg shadow-gray-300/40  "
+                className="flex items-center      h-12 "
               > 
-                <FaCheck color="" size={24}/>  
+               <img src={process.env.PUBLIC_URL+'/images/btn_next.png'} alt=""  className="h-full"/>
               </Link>
             </motion.div>
             : 
@@ -480,37 +480,37 @@ function ReadyToTake({handleBackClick}) {
               animate={{ opacity: 1 , x: '-50%',y:-0}}
               exit={{ opacity: 0,x:'-50%',y:-10 }}
               transition={{ duration: 0.2 }}
-              className="absolute -bottom-24 md:-bottom-6 left-1/2 -translate-x-1/2 z-10 flex items-center  gap-3 ">
+              className="absolute -bottom-28 md:-bottom-6 left-1/2 -translate-x-1/2 z-10 flex items-center  gap-4  w-[80%]">
               <button 
-                className="flex items-center  rounded-full bg-gray-800   p-5 shadow-lg shadow-gray-300/40  "
+                className="flex items-center  rounded-full bg-gray-800   "
                 onClick={onBtnClick}
               > 
-                <FaTh color="" size={24}/>  
+                <img src={process.env.PUBLIC_URL+'/images/btn_upload02.png'} alt="" />
               </button>
               <button 
-                className="flex items-center  rounded-full bg-[#FF0050]   p-5 shadow-lg shadow-gray-300/40  "
+                className="flex items-center  rounded-full bg-[#FF0050]    shadow-lg shadow-gray-300/40  "
                 onClick={capture} 
               > 
-                <MdPhotoCamera color="" size={24}/>  
+                <img src={process.env.PUBLIC_URL+'/images/btn_camera01.png'} alt="" />
               </button>
               <button 
-                className="flex items-center  rounded-full bg-gray-800   p-5 shadow-lg shadow-gray-300/40  "
+                className="flex items-center  rounded-full bg-gray-800   shadow-lg shadow-gray-300/40  "
                 onClick={swapCamera} 
               > 
-                <MdCameraswitch color="" size={24}/>  
+                <img src={process.env.PUBLIC_URL+'/images/btn_camera02.png'} alt="" />
               </button>
 
 
               </motion.div>
             }</>)
            :
             (
-              <motion.div className="absolute -bottom-24 md:-bottom-6 left-1/2 -translate-x-1/2 z-10 flex items-center  gap-3 ">
+              <motion.div className="absolute -bottom-24 md:-bottom-6 left-1/2 -translate-x-1/2 z-10 flex items-center  gap-3 w-14 ">
                 <button 
-                  className="flex items-center  rounded-full bg-[#FF0050]   p-5 shadow-lg shadow-gray-300/40  "
+                  className="flex items-center  rounded-full   "
                   onClick={capture} 
                 > 
-                  <MdPhotoCamera color="" size={24}/>  
+                  <img src={process.env.PUBLIC_URL+'/images/btn_camera01.png'} alt="" />
                 </button>
               </motion.div>
             )
@@ -551,8 +551,8 @@ function ReadyToTake({handleBackClick}) {
         </motion.div>
       }
 
-        <div className="flex flex-col md:flex-row items-center gap-10 mt-10 md:mt-10">
-          <div className="flex flex-col gap-6">
+        <div className="flex flex-col md:flex-row items-center justify-center gap-10 mt-10 md:mt-10 w-[60%] h-14 ">
+          <div className="flex flex-col gap-6 h-full">
             <div className=" relative cursor-pointer hidden " onClick={toggleCamera}>
               <div className='sample-heading-3 w-full h-full absolute top-0 z-10   opacity-0 hover:opacity-100  '></div>
               <div className='bg-gradient-to-b from-[#444] to-[#111] px-10 py-2 border  border-white/30 flex justify-center items-center gap-2 font-roboto' ><FaCamera />{isCameraOpen? 'Turn off camera' : 'Take a picture'}</div>
@@ -565,9 +565,8 @@ function ReadyToTake({handleBackClick}) {
               ref={inputFileRef}
 
             />
-            <div className=" relative hidden md:block" onClick={onBtnClick}>
-              <div className='sample-heading-3 w-full h-full absolute top-0 z-10   opacity-0 hover:opacity-100 cursor-pointer  '></div>
-              <div className='bg-gradient-to-b from-[#444] to-[#111] px-10 py-2 border  border-white/30 flex justify-center items-center gap-2 font-roboto' ><FaUpload />Upload a picture</div>
+            <div className=" relative hidden md:block h-full  " onClick={onBtnClick}>
+              <img src={process.env.PUBLIC_URL+'/images/btn_upload.png'} alt="" className="max-w-full h-full " />
             </div>
 
 
@@ -579,11 +578,10 @@ function ReadyToTake({handleBackClick}) {
                   initial={{ opacity: 0}}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
-                  className="hidden md:block"
+                  className="hidden md:block h-full"
                 >
                   <Link to={'/templates'} className=" relative">
-                    <div className='sample-heading-3 w-full h-full absolute top-0 z-10   animate-[fadeIn_0.3s_ease-in-out_infinite] hover:animate-none cursor-pointer  '></div>
-                    <div className='bg-gradient-to-b bg-[#FF0050] to-[#000] px-10 py-2 border  border-white/30 flex items-center gap-2 font-roboto' >NEXT <FaArrowAltCircleRight /></div>
+                    <img src={process.env.PUBLIC_URL+'/images/btn_next.png'} alt="" className="max-w-full h-full" />
                   </Link>
                 </motion.div>
               </Suspense>

src/index.css

@@ -51,3 +51,9 @@
   -webkit-box-reflect: below 0px ;
   -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.3)));
 }
+
+
+.text-stroke-3 {
+  color:#FF3976;
+  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
+}