wip layout0.0.1

src/Helper/CustomAlert.js

@@ -12,7 +12,7 @@ const CustomAlert = ({ message, onClose }) => {
   return (
     <>
       {open && (
-        <Alert open={open} onClose={handleClose} className=" absolute top-0  w-3/4  md:w-1/2 z-10  ">
+        <Alert open={open} onClose={handleClose} className=" absolute top-0  w-3/4  md:w-1/2 z-30  ">
           <div className="flex items-center gap-2">
             <FaInfoCircle /> <div>{message}</div>
           </div>

src/Layouts/CameraLayout.js

@@ -53,36 +53,19 @@ function CameraLayout() {
 
   return (
     <div 
-      className='min-h-[100vh] h-screen md:h-auto relative  text-white bg-no-repeat bg-cover bg-center z-10'
+      className='min-h-[100vh] h-screen md:h-auto relative  text-white bg-no-repeat bg-cover bg-center z-10 flex items-center'
       style={{
         backgroundImage: `url('https://r2.web.moonshine.tw/opt/lg/msweb/backto80s_ai/bg01.png')`,
       }}
     >   
-        {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://r2.web.moonshine.tw/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='w-full   flex flex-col  md:h-auto justify-between   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-[#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} className='ml-2' />
-                    Back 
-                  </Button>
-                </Link>
+
+
 
               </>
               :
@@ -94,7 +77,7 @@ function CameraLayout() {
           </div>
 
           <div 
-            className={`${isMobile ? "h-full ":  "" } flex flex-col w-full mx-auto  items-center md:mt-0 py-1 relative `}
+            className={`${isMobile ? "h-full ":  "" } flex flex-col w-full mx-auto  items-center md:mt-0 relative `}
           >
 
             <Outlet />

src/Layouts/RenderLayout.js

@@ -8,45 +8,14 @@ function RenderLayout() {
   const storedUsername = getUsernameFromCookie();
   return (
     <div 
-      className='min-h-[100vh] relative bg-black text-white bg-no-repeat bg-center bg-cover '
+      className='min-h-[100vh] relative bg-black text-white bg-no-repeat bg-center bg-cover flex items-center'
       style={{
         backgroundImage: `url('https://r2.web.moonshine.tw/opt/lg/msweb/backto80s_ai/bg01.png')`,
       }}
     > 
-
-          <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://r2.web.moonshine.tw/msweb/backto80s_ai/logo.png" alt="" />
-          </motion.div>
-        <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-[#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>
-          </div>
-          <div className='mt-7 md:mt-6 relative md:my-10 px-0 md:mx-10'>
-
-
+        <div className='w-full   flex flex-col items-center md:mt-0 relative'>
             <Outlet />
-          </div>
-
 
-
 
 
         {/* <div className='text-sm text-white/30  text-center p-2'>

src/Page/Camera/FrontPage.js

@@ -1,35 +1,77 @@
-import React,{useEffect,useState} from 'react'
+import React,{useEffect,useState,useRef} from 'react'
 import { Link,useNavigate } from "react-router-dom";
 import { motion, AnimatePresence, useAnimation } from "framer-motion";
-import { FaArrowRight } from "react-icons/fa";
-import { Button,Checkbox,Typography,Input } from "@material-tailwind/react";
+import { FaArrowRight,FaUpload } from "react-icons/fa";
+import { Button,Checkbox,Typography,Input,IconButton } from "@material-tailwind/react";
 import {useImage} from '../../Helper/ImageContext'
 import { setUsernameToCookie } from '../../Helper/Helper';
 import CustomAlert from "../../Helper/CustomAlert";
+import { FaTimes } from "react-icons/fa";
+
 function FrontPage({handleClick}) {
   const navigate = useNavigate();
   const [notification, setNotification] = useState(null);
   const { username, setUsername } = useImage();
   // const [isHovered, setHovered] = useState(false)
   const onChange = ({ target }) => setUsername(target.value);
   const [isHovered, setIsHovered] = useState(false);
-  const controls = useAnimation();
-  const element1Controls = useAnimation();
-  const element2Controls = useAnimation();
   const handleMouseEnter = () => {
       setIsHovered(true);
   };
   const handleMouseLeave = () => {
       setIsHovered(false);
   };
-
-
   const handleStart = ()=>{
       setNotification(null)
       setTimeout(()=>{
         navigate("/camera");
       },800)
   }
+  //img file input 
+  const [msg,setMsg] = useState('')
+  const { setBeforeImage } = useImage();
+  const [image, setImage] = useState(null);
+  const allowedImageTypes = ['image/jpeg', 'image/jpg', 'image/png','image/bmp'];
+  const inputFileRef = useRef( null );
+  const onBtnClick = () => {
+    setImage(null)
+    inputFileRef.current.click();
+  }
+  const onFilechange = ( e ) => {
+    /*Selected files data can be collected here.*/
+    const file = e.target.files[0];
+    console.log(file)
+    if (!file) return
+    if (!allowedImageTypes.includes(file.type)) {
+      setNotification('Only BMP, JPEG, JPG, and PNG image files are allowed.');
+      return;
+    }
+    if (file.size > 12 * 1024 * 1024) {
+      setNotification('File size should be less than 12MB.');
+      return;
+    }
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        // 读取文件并更新选定的图像
+        const tempImage = new Image();
+        tempImage.src = reader.result;
+        tempImage.onload = () => {
+
+          setImage(reader.result);
+          setBeforeImage(reader.result);
+        };
+      };
+      setMsg('proceed to the next step..')
+      reader.readAsDataURL(file);
+      setTimeout(()=>{
+        navigate("/templates");
+      },1200)
+    }
+
+  }
+
 
 
 
@@ -57,7 +99,7 @@ function FrontPage({handleClick}) {
   // test()
 
   return (
-        <div className='flex flex-col justify-between items-center md:justify-center w-full px-0 pt-[20%] md:pt-[15%] lg:pt-[14%]  '>
+        <div className='flex flex-col justify-between items-center md:justify-center w-full px-0  '>
           {notification && (
             <CustomAlert message={notification} onClose={() => setNotification(null)} />
           )}
@@ -75,21 +117,30 @@ function FrontPage({handleClick}) {
               <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/logo.png" alt=""  className=' hidden lg:block '/>
 
             </motion.div>
+
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               transition={{ duration: 0.5 }}
-              className='mx-auto relative overflow-hidden z-0  w-6/12 md:w-4/12'
+              className='mx-auto relative overflow-hidden z-0  w-6/12 md:w-5/12 lg:w-4/12'
             >
 
               <img
-                src= {'https://r2.web.moonshine.tw/msweb/backto80s_ai/bg-transparent.png?width=330'}
+                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 '
+                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 
                   initial={{ x:0 ,y: -200 , rotate:60}}
                   animate={{ y: 580 }}
@@ -108,6 +159,29 @@ function FrontPage({handleClick}) {
                     background: 'linear-gradient( to right, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.23) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 92%)'}}
                 >
                 </motion.div>
+
+                {image && (
+                  <div 
+                    className="z-20 absolute  w-full h-full bg-cover bg-no-repeat bg-center flex justify-center items-center  "
+
+                  >  
+                    <motion.div 
+                      initial={{ opacity: 0,y:-10 }} 
+                      animate={{ opacity: 1,y:0}}
+                      exit={{ opacity: 0,y:0 }}
+                      className="w-full relative">
+                      <div className="pt-[250%]  relative ">
+                        <img src={image} alt="Selected"  className="absolute top-0 left-0 object-cover w-full h-full rounded-md border-0 border-white contrast-50   " />
+                      </div>
+                      <div className=" absolute top-1 right-1 z-20 ">
+                        <IconButton size="sm" className="rounded-full bg-[#FF0050] "  onClick={()=>setImage(null)}>
+                          <FaTimes size={16} />
+                        </IconButton>
+                      </div>    
+                    </motion.div>
+
+                  </div>
+                )}
                 <div className='w-full'>
                   <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/mirror01.png" alt="" className='w-full' />
                 </div>
@@ -124,15 +198,46 @@ function FrontPage({handleClick}) {
           </div>
           <div className='mt-auto flex flex-col justify-center items-center'>
 
-            <div className='flex flex-col gap-2 md:flex-row md:gap-0  w-4/5 md:w-full   '>
+            <div className='flex flex-col gap-2 md:flex-col md:gap-0  w-4/5 md:w-full   '>
 
               <div 
-                className=' relative rounded-r-lg cursor-pointer  w-4/5 md:w-4/6 mx-auto -mt-6  hover:-translate-y-1 transition-all'
+                className=' relative rounded-r-lg cursor-pointer  w-4/5 md:w-full mx-auto -mt-6  hover:-translate-y-1 transition-all'
                 onClick={handleStart}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
               >
-                <img src="https://r2.web.moonshine.tw/msweb/backto80s_ai/btn_start.png" alt="start"  className=''/>
+                <div 
+                  className='bg-contain bg-no-repeat bg-center flex justify-center items-center px-5 py-4 '
+                  style={{
+                    backgroundImage:`url(${process.env.PUBLIC_URL+'/images/btn_bg2.png'})`
+                  }}
+                >
+                  <div className='text-[#FFF7BB] font-extrabold text-xl drop-shadow uppercase flex items-center gap-2 '>Take photo <FaArrowRight size={20} /></div>
+                </div>
+              </div>
+              <div className='text-center text-[#FFF7BB] text-lg font-extrabold drop-shadow'>or</div>
+              <div 
+                className=' relative rounded-r-lg cursor-pointer  w-4/5 md:w-full mx-auto mt-3  hover:-translate-y-1 transition-all'
+                onClick={onBtnClick}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+              >
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={onFilechange}
+                  style={{ display: 'none' }}
+                  ref={inputFileRef}
+
+                />
+                <div 
+                  className='bg-contain bg-no-repeat bg-center flex justify-center items-center px-5 py-4 '
+                  style={{
+                    backgroundImage:`url(${process.env.PUBLIC_URL+'/images/btn_bg2.png'})`
+                  }}
+                >
+                  <div className='text-[#FFF7BB] font-extrabold text-xl drop-shadow uppercase flex items-center gap-2   '><FaUpload size={20} /> Upload </div>
+                </div>
               </div>
 
             </div>