ShwetKhatri2001 · nandakumarbm26 · Jan 23, 2024 · Jan 23, 2024 · Jan 31, 2024 · Feb 17, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,13 +11,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
+    "aframe": "^1.5.0",
+    "aframe-react": "^4.4.0",
     "qrcode.react": "^3.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-lazyload": "^3.2.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^3.5.0"
+    "web-vitals": "^3.5.0",
+    "zustand": "^4.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/ar.html b/public/ar.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+  </head>
+  <body>
+    <!-- Copyright (c) 2022 8th Wall, Inc. -->
+    <!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
+
+    <a-scene
+      xrextras-gesture-detector
+      landing-page
+      xrextras-loading
+      xrextras-runtime-error
+      renderer="colorManagement:true; webgl2: true;"
+      xrweb="disableWorldTracking: true"
+    >
+      <a-assets>
+        <a-asset-item
+          id="jelly-glb"
+          src="assets/jellyfish-model.glb"
+        ></a-asset-item>
+        <img id="jelly-thumb" src="assets/video-thumbnail.jpg" />
+        <video
+          id="jelly-video"
+          autoplay
+          muted
+          crossorigin="anonymous"
+          loop="true"
+          src="assets/jellyfish-video.mp4"
+        ></video>
+      </a-assets>
+
+      <a-camera
+        position="0 4 10"
+        raycaster="objects: .cantap"
+        cursor="fuse: false; rayOrigin: mouse;"
+      >
+      </a-camera>
+
+      <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>
+
+      <a-light type="ambient" intensity="0.7"></a-light>
+
+      <!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
+      <xrextras-named-image-target name="video-target">
+        <a-entity
+          xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
+          geometry="primitive: plane; height: 1; width: 0.79;"
+        ></a-entity>
+      </xrextras-named-image-target>
+
+      <!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
+      <xrextras-named-image-target name="model-target">
+        <!-- Add a child entity that can be rotated independently of the image target. -->
+        <a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
+      </xrextras-named-image-target>
+    </a-scene>
+  </body>
+</html>
diff --git a/public/assets/flyer.jpg b/public/assets/flyer.jpg
diff --git a/public/assets/jellyfish-model.glb b/public/assets/jellyfish-model.glb
diff --git a/public/assets/jellyfish-video.mp4 b/public/assets/jellyfish-video.mp4
diff --git a/public/assets/video-thumbnail.jpg b/public/assets/video-thumbnail.jpg
diff --git a/public/icons/wish.png b/public/icons/wish.png
diff --git a/public/icons/wished.png b/public/icons/wished.png
diff --git a/src/App.css b/src/App.css
@@ -117,6 +117,25 @@
   padding: 0.2rem;
 }
 
+.wishlist-btn {
+  background-color: rgba(0, 0, 0, 0.284);
+  bottom: 19px;
+  right: 1rem;
+  border: none;
+  border-radius: 100%;
+  color: #fff;
+  cursor: pointer;
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1/1;
+  font-weight: 600;
+  font-size: 1.5rem;
+  padding: 0.2rem;
+}
+
 .help-btn span,
 .fullscreen-btn span {
   width: 50px;

diff --git a/src/App.js b/src/App.js
@@ -8,19 +8,21 @@ import Contact from "./components/Contact/Contact";
 import Footer from "./components/Footer/Footer";
 import Header from "./components/Header/Header";
 import Feedback from "./components/Feedback/Feedback";
+import Test from "./test";
 
 const App = () => {
   return (
     <BrowserRouter>
-      <Header />
+      {/* <Header /> */}
       <Routes>
         <Route path="/" element={<ProductList />} />
         <Route path="/about" element={<About />} />
         <Route path="/feedback" element={<Feedback />} />
         <Route path="/contact" element={<Contact />} />
         <Route path="*" element={<ErrorPage />} />
+        <Route path="/ar-demo" element={<Test />} />
       </Routes>
-      <Footer />
+      {/* <Footer /> */}
     </BrowserRouter>
   );
 };

diff --git a/src/assets/css/wishlistbar.css b/src/assets/css/wishlistbar.css
@@ -0,0 +1,52 @@
+.wishlist-bar {
+  position: fixed;
+  top: 0;
+  right: -100%; /* Adjust as needed to set the initial position */
+  width: 100%;
+  height: 100vh;
+  z-index: 10;
+  max-width: 500px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden scroll;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: right 0.3s ease-in-out;
+}
+
+.wishlist-bar.open {
+  right: 0;
+}
+.wishlist-toggle-close {
+    background-color: #db4534;
+    color: #fff;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+  }
+.wishlist-toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  max-height: 50px;
+  font-size: large;
+  font-weight: 500;
+  padding: 10px;
+  background: none;
+  border: none;
+  gap: 10px;
+  cursor: pointer;
+}
+.wishlist-toggle img{
+    height: 40px;
+    width: 40px;
+}
+.wishlist-content {
+  padding: 20px;
+}
+
+.wishlist-item {
+  margin-bottom: 10px;
+}
diff --git a/src/assets/models/export.glb b/src/assets/models/export.glb
diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js
@@ -31,7 +31,13 @@ const Feedback = () => {
     let feature = document.getElementById("features").value;
     let comment = document.getElementById("comments").value;
 
-    let body = "Name of the User: <br/>" + usersname + "<br/>" + "Email of the User: <br/>" + usersemail + "<br/><br/>" +
+    let body =
+      "Name of the User: <br/>" +
+      usersname +
+      "<br/>" +
+      "Email of the User: <br/>" +
+      usersemail +
+      "<br/><br/>" +
       "What did you like most about AR-Webstore? <br/>" +
       likes +
       "<br/><br/> Will our 3D and AR features improve your shopping experience if we integrate it on an online e-commerce store ?<br/>" +
@@ -41,8 +47,6 @@ const Feedback = () => {
       "<br/> <br/>Any other comments?<br/>" +
       comment;
 
-    console.log(body);
-
     window.Email.send({
       Host: "smtp.elasticemail.com",
       Username: "shwetkhatri2001@gmail.com",
@@ -52,33 +56,37 @@ const Feedback = () => {
       Subject: "AR-Webstore has got a feedback",
       Body: body,
     }).then((message) => {
-        if (message === "OK") {
-          window.swal(
+      if (message === "OK") {
+        window
+          .swal(
             "Successfull",
             "Thanks! We've received your feedback",
             "success"
-          ).then(() => {
-            formRef.current.reset(); 
+          )
+          .then(() => {
+            formRef.current.reset();
           });
-        } else {
-          window.swal(
-            "Something Wrong",
-            "Your FeedBack is not Received",
-            "error"
-          );
-        }
-      });
+      } else {
+        window.swal(
+          "Something Wrong",
+          "Your FeedBack is not Received",
+          "error"
+        );
+      }
+    });
   };
 
   return (
     <div className="container">
       <h1>Your Feedback ✍️ Our Evolution 🚀</h1>
       <form ref={formRef} onSubmit={(e) => e.preventDefault()}>
-        <label htmlFor="username">Name:</label><br/>
+        <label htmlFor="username">Name:</label>
+        <br />
         <input type="text" id="username" placeholder="Your Name..." />
         <br />
 
-        <label htmlFor="useremail">Email:</label><br/>
+        <label htmlFor="useremail">Email:</label>
+        <br />
         <input type="text" id="useremail" placeholder="Your Email..." />
         <br />
 

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import "./styles.css";
+import WishList from "../WishList";
 
 const Header = () => {
   const navigationLinks = [
@@ -29,7 +30,12 @@ const Header = () => {
             onClick={() => setShowMobileSidebar(!showMobileSidebar)}
           >
             {Array.from({ length: 2 + showMobileSidebar }, (_, i) => (
-              <div key={i} className={i === 0 ? "firstbar" : i === 1 ? "secondbar" : "lastbar"}/>
+              <div
+                key={i}
+                className={
+                  i === 0 ? "firstbar" : i === 1 ? "secondbar" : "lastbar"
+                }
+              />
             ))}
             {/* If the condition is true, only the first, second, and last div elements will be rendered. */}
           </div>
@@ -46,6 +52,7 @@ const Header = () => {
           })}
         </ul>
       </nav>
+      <WishList />
     </header>
   );
 };