design implemented

shuja-shah-dev · Jun 13, 2024 · 6ca0ee0 · 6ca0ee0
1 parent 492e91d
commit 6ca0ee0
Show file tree

Hide file tree

Showing 12 changed files with 193 additions and 73 deletions.
diff --git a/src/nodes/ImageInputNode.jsx b/src/nodes/ImageInputNode.jsx
@@ -17,12 +17,16 @@ function ImageInputNode({ data }) {
   );
 
   return (
-    <div className="flex justify-center items-center text-center w-56 h-56 bg-gradient-to-br from-blue-100 to-purple-300 p-8 rounded-3xl shadow-md">
-      <div className="">
+    <div
+      style={{
+        background: ' linear-gradient(to right, #4eab56, #206d39)',
+        borderRadius: '20px',
+      }}
+      className="flex justify-center items-center text-center w-56 h-56  p-8 l shadow-md border border-1 border-[#FFF]"
+    >
+      <div className="text-2xl  text-white ">
         <label className="block text-center mb-2">
-          <span className=" bg-gradient-to-br from-blue-400 text-base to-purple-300 hover:from-blue-500 hover:to-purple-400 text-white font-bold py-2 px-4 rounded cursor-pointer">
-            Upload Image
-          </span>
+          <span className=" cursor-pointer">Upload Image</span>
           <input
             type="file"
             accept="image/*"

diff --git a/src/nodes/NodeSelect.jsx b/src/nodes/NodeSelect.jsx
@@ -47,7 +47,10 @@ export default function NodeSelect() {
       <div>
         <button
           type="button"
-          className="bg-gradient-to-br from-blue-400 text-xl  to-purple-300 hover:from-blue-500 hover:to-purple-400  text-white inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium  hover:bg-gray-50 "
+          style={{borderRadius: '20px',
+            background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)'}}
+
+          className=" text-lg  text-white inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white  font-medium  hover:bg-gray-50 "
           onClick={() => setMenuOpen(!menuOpen)}
         >
           ADD NODES

diff --git a/src/nodes/OrientationNode.jsx b/src/nodes/OrientationNode.jsx
@@ -1,18 +1,21 @@
-import PropTypes from "prop-types";
-import { Handle, Position } from "reactflow";
+import PropTypes from 'prop-types';
+import { Handle, Position } from 'reactflow';
 
 function OrientationNode() {
   return (
     <div>
-    <div className=" flex justify-center items-center text-center rounded-md w-52 h-40 bg-gradient-to-br from-blue-200 to-purple-200 p-6">
-      <h3 className=" text-purple-800 text-2xl font-semibold ">
-        Orientation Correction
-      </h3>
-
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #F5B03A 6.16%, #D65B27 93.1%)',
+          borderRadius: '20px',
+        }}
+        className=" flex justify-center items-center text-center  w-52 h-40 p-6 border border-1 border-[#FFF]"
+      >
+        <h3 className="text-2xl font-semibold ">Orientation Correction</h3>
+      </div>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
     </div>
-     <Handle type="target" position={Position.Left} />
-     <Handle type="source" position={Position.Right} />
-     </div>
   );
 }
 

diff --git a/src/nodes/OutputNode.jsx b/src/nodes/OutputNode.jsx
@@ -1,5 +1,4 @@
-
-import { Handle, Position } from "reactflow";
+import { Handle, Position } from 'reactflow';
 
 function OutputNode() {
   // const canvasRef = useRef(null);
@@ -9,7 +8,6 @@ function OutputNode() {
   //     (edge) => edge.source === "2" && edge.target === "3"
   // );
 
-
   // useEffect(() => {
   //   if (!hasConnectionFromVideoInput) return;
 
@@ -39,8 +37,14 @@ function OutputNode() {
   // }, [data.processedFrames]);
 
   return (
-    <div className="bg-gradient-to-br from-blue-100 to-purple-300 flex justify-center items-center  text-center p-4   text-2xl font-semibold rounded-3xl w-52 h-40">
-      <p className="mb-2 text-purple-800">OUTPUT</p>
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #F5B03A 6.16%, #D65B27 93.1%)',
+        borderRadius: '20px',
+      }}
+      className=" flex justify-center items-center  text-center p-4  border border-1 border-[#FFF] text-2xl font-semibold  w-52 h-40"
+    >
+      <p className="mb-2 ">Output</p>
       {/* {data.detectedImage && (
         <img
           src={data.detectedImage}

diff --git a/src/nodes/Switcher.jsx b/src/nodes/Switcher.jsx
@@ -1,11 +1,15 @@
-
 import PropTypes from 'prop-types';
 import { Handle, Position } from 'reactflow';
 
 function Switcher() {
   return (
-    <div className="flex justify-center items-center text-center bg-gradient-to-br from-blue-100 to-purple-300 text-center p-4  text-black text-2xl font-semibold rounded-3xl w-52 h-52">
-      <p className=" text-purple-800">Switcher</p>
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #4CCAFF 0%, #2E7999 100%)',
+      }}
+      className="flex justify-center items-center text-center  text-center p-4 border border-1 border-[#FFF] text-black text-2xl font-semibold rounded-3xl w-52 h-52"
+    >
+      <p className="">Switcher</p>
       {/* {data.detectedImage && (
         <img
           src={data.detectedImage}

diff --git a/src/nodes/modelProvider.jsx b/src/nodes/modelProvider.jsx
@@ -5,7 +5,13 @@ import { Handle, Position } from 'reactflow';
 function ModelProvider({ data: { name } }) {
   return (
     <div>
-      <div className="flex justify-center items-center text-center text-center rounded-md w-52 h-52 bg-gradient-to-br from-blue-200 to-purple-400 p-6 border border-purple-500">
+      <div
+        style={{
+          background: 'linear-gradient(180deg, #876EE6 0%, #4B3D80 100%)',
+          borderRadius: '20px',
+        }}
+        className="flex justify-center items-center text-center text-center border border-1 border-[#FFF] w-52 h-52  p-6 "
+      >
         <h3 className="text-white text-2xl  ">{name}</h3>
       </div>
       <Handle type="target" position={Position.Left} />

diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -1,5 +1,16 @@
 
 body {
-  background-color: aliceblue;
+  background: #000;
+  scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+
+}
+
+
 
+.right{
+  display: none;
 }
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -4,44 +4,35 @@ import Flow from './Flow';
 import 'tailwindcss/tailwind.css';
 import React, { useState } from 'react';
 import 'reactflow/dist/style.css';
-import 'tailwindcss/tailwind.css';
+import Theme from '../utils/theme';
+import Landing from './Landing';
 
 function App() {
-  const [projectType, setProjectType] = useState(null);
+  const [parentProjectType, setParentProjectType] = useState(null);
 
-  const handleSelection = (type) => {
-    setProjectType(type);
+  const handleProjectTypeChange = (type) => {
+    setParentProjectType(type);
   };
 
   return (
-    <div className="flex flex-col  ">
-      {projectType === null ? (
-        <div className=" text-center p-6  rounded shadow-lg">
-          <h1 className="text-3xl font-bold mb-4 text-purple-900">Select Project Type</h1>
-          <button
-            onClick={() => handleSelection(1)}
-            className="bg-gradient-to-br from-blue-500 to-purple-300 text-white py-2 px-4 rounded hover:bg-blue-700 m-2 text-lg"
-          >
-            Make Nodes Myself
-          </button>
-          <button
-            onClick={() => handleSelection(0)}
-            className="bg-gradient-to-br from-purple-400 to-blue-300 text-white py-2 px-4 rounded hover:bg-green-700 m-2 text-lg"
-          >
-            Use PreMade Nodes
-          </button>
-        </div>
-      ) : (
-        <Flow projectType={projectType} />
-      )}
-    </div>
+    <Router>
+      <Theme />
+      <Routes>
+        <Route
+          path="/"
+          element={<Landing onProjectTypeChange={handleProjectTypeChange} />}
+        />
+        <Route
+          path="/flow"
+          element={<Flow projectType={parentProjectType} />}
+        />
+      </Routes>
+    </Router>
   );
 }
 
 export default App;
 
-
-
 // function Hello() {
 //   return (
 //     <div>

diff --git a/src/renderer/Flow.js b/src/renderer/Flow.js
@@ -91,7 +91,7 @@ function Flow({ projectType }) {
       {
         id: '1',
         type: 'imageInput',
-        position: { x: 100, y: 70 },
+        position: { x: 100, y: 100 },
         data: { onImageUpload: (image) => handleImageUpload(image) },
       },
       {
@@ -603,8 +603,8 @@ function Flow({ projectType }) {
       <div
         style={{
           width: '100vw',
-          height: '480px',
-          backgroundColor: 'aliceblue',
+          height: '450px',
+          // backgroundColor: '#000',
         }}
         className="border  border-black "
       >
@@ -617,9 +617,9 @@ function Flow({ projectType }) {
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
         >
-          <Controls />
-          <MiniMap />
-          <Background variant="dots" gap={12} size={1} />
+          {/* <Controls /> */}
+          {/* <MiniMap /> */}
+          {/* <Background variant="dots" gap={12} size={1} /> */}
         </ReactFlow>
       </div>
 

diff --git a/src/renderer/Footer.jsx b/src/renderer/Footer.jsx
@@ -1,21 +1,39 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 function Footer({ image }) {
   return (
-    <div className=" ">
-      <h2 className="text-center text-purple-900 text-2xl font-semibold mb-[10px] bg-gradient-to-br from-blue-100 to-purple-300 py-[10px]">
-        Connect the Nodes to Get your Results
-      </h2>
-      {image && (
-        <div className="">
-          <img
-            src={image}
-            alt="Detected"
-            width={400}
-            className="h-[600px] border-4 border-green-700 m-auto mb-[20px]"
-          />
-        </div>
-      )}
+    <div className=" pb-[40px]">
+      <div
+        className="border-dashed border border-[#876EE6] w-[80%] m-auto rounded-3xl"
+        style={{
+          background: 'rgba(255, 255, 255, 0.05)',
+          backdropFilter: 'blur(2.700000047683716px)',
+        }}
+      >
+        <h2
+          className="text-center text-white text-[32px] font-semibold my-[20px]"
+          style={{ fontFamily: 'Gilroy' }}
+        >
+          Connect the Nodes to Get your Results
+        </h2>
+        <Link
+          className="mb-10 text-white text-xl ml-[40px] top-8 absolute"
+          to="/"
+        >
+          BACK
+        </Link>
+        {image && (
+          <div className="">
+            <img
+              src={image}
+              alt="Detected"
+              width={400}
+              className="h-[600px] m-auto my-[30px]"
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

diff --git a/src/renderer/Landing.jsx b/src/renderer/Landing.jsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+/* eslint-disable react/button-has-type */
+export default function Landing({ onProjectTypeChange }) {
+  const [projectType, setProjectType] = useState(null);
+
+  const handleSelection = (type) => {
+    setProjectType(type);
+    onProjectTypeChange(type); // Call the function passed from the parent component
+  };
+
+  return (
+    <div
+      className=" text-center p-6 w-[80%] my-[100px] h-[600px] mx-auto  flex flex-col justify-center items-center border-dashed border border-[#876EE6]  m-auto rounded-3xl"
+      style={{ fontFamily: 'Gilroy', background: 'rgba(255, 255, 255, 0.08)' }}
+    >
+      <h1 className="text-4xl mb-6 text-white ">Select Project Type</h1>
+      <div className="flex gap-5">
+        <Link
+          to="/flow"
+          onClick={() => handleSelection(1)}
+          className=" text-white py-2 px-5  text-lg"
+          style={{
+            borderRadius: '20px',
+            background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)',
+          }}
+        >
+          Make Nodes Myself
+        </Link>
+        <Link
+          to="/flow"
+          onClick={() => handleSelection(0)}
+          className=" text-white py-2 px-5  text-lg"
+          style={{
+            borderRadius: '20px',
+            background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)',
+          }}
+        >
+          Use PreMade Nodes
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/utils/theme.jsx b/src/utils/theme.jsx
@@ -0,0 +1,31 @@
+function Theme() {
+  return (
+    <>
+      <div
+        style={{
+          top: '-50%',
+          left: '0%',
+          zIndex: '-1',
+          borderRadius: '1431px',
+          background: 'rgba(62, 95, 170, 0.25)',
+          filter: 'blur(250px)',
+        }}
+        className="absolute h-full w-full overflow-hidden"
+      />
+
+      <div
+        style={{
+          bottom: '0%',
+          left: '20%',
+          zIndex: '-1',
+          borderRadius: '665px',
+          background: 'rgba(36, 0, 136, 0.22)',
+          filter: 'blur(250px)',
+        }}
+        className="absolute  h-64 w-9/12 overflow-hidden"
+      />
+    </>
+  );
+}
+
+export default Theme;