Skip to content

ui of customize,signup,retail fixed .issue #118 #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
riyasaxena32 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

ui of customize,signup,retail fixed .issue #118 #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76d0d67
signup ui update
riyasaxena32 Jul 9, 2024
4ba2ef6
change
riyasaxena32 Jul 9, 2024
782612e
commit3
riyasaxena32 Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
<link rel="icon" type="image/svg+xml" href="/src/assets/logo-final.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drawn2Shoe</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"
/>

</head>
<body>
<div id="root"></div>
Expand Down
206 changes: 142 additions & 64 deletions client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@
"@reduxjs/toolkit": "^1.9.6",
"axios": "^1.6.2",
"hamburger-react": "^2.5.0",
"lottie-react": "^2.4.0",
"postcss-import": "^16.1.0",
"react": "^18.2.0",
"react-burger-menu": "^3.0.9",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"react-razorpay": "^2.0.1",
"react-redux": "^8.1.2",
"react-router-dom": "^6.16.0",
"redux-persist": "^6.0.0"
"redux-persist": "^6.0.0",
"styled-components": "^6.1.11"
},
"devDependencies": {
"@types/react": "^18.2.15",
Expand All @@ -34,7 +35,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.3",
"tailwindcss": "^3.4.4",
"vite": "^4.4.5"
}
}
34 changes: 0 additions & 34 deletions client/src/components/Preloader/Preloader.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion client/src/components/Preloader/Preloader.json
View file
Open in desktop

This file was deleted.

37 changes: 0 additions & 37 deletions client/src/components/Preloader/Preloader.jsx
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions client/src/components/layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from "react";
import Navbar from "./Navbar/navbar";
import { Outlet } from "react-router-dom";
import Footer from "./Footer";
import Preloader from "./Preloader/Preloader";

const Layout = () => {
return (
Expand All @@ -12,7 +11,6 @@ const Layout = () => {
<Outlet />
</div>
<Footer />
<Preloader />
</>
);
};
Expand Down
54 changes: 54 additions & 0 deletions client/src/pages/Customize/customize.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.customize-card {
@apply rounded-xl overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 shadow-lg;
}

.customize-card .card-header {
@apply p-4 bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-t-xl;
text-align: center; /* Directly applied text center alignment */
}

.customize-card .card-body {
@apply p-4 bg-white rounded-b-xl;
}

.customize-card .form-control {
@apply mb-4 p-0 text-lg border border-gray-300 rounded-lg shadow-sm bg-gray-50;
}

.customize-card .form-control-lg {
@apply text-lg;
}

.customize-card .form-check {
@apply mb-4;
}

.customize-card .form-check-label {
@apply text-gray-800 font-semibold;
}

.customize-card .btn-submit {
@apply bg-blue-500 text-white rounded-lg px-4 py-2 shadow-md;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.customize-card .btn-submit:hover {
@apply bg-blue-700;
transform: scale(1.05);
}

.customize-card .form-group label {
@apply text-gray-700 font-bold text-xl mb-2 block;
}

.customize-card h3 {
@apply text-2xl font-bold mb-6;
}

.customize-card .text-center p {
margin-bottom: 0; /* Directly applied margin bottom */
}

.customize-card .text-center p a {
@apply text-white bg-green-600 px-4 py-2 rounded-md shadow-md;
}
153 changes: 68 additions & 85 deletions client/src/pages/Customize/customize.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import axios from "axios";
import toast from "react-hot-toast";
import "./Customize.css"; // Import your CSS file

const Customize = () => {
const [formData, setFormData] = React.useState({
Expand All @@ -17,6 +18,7 @@ const Customize = () => {
};
});
}

async function handleSubmit(event) {
event.preventDefault();
if (!formData.desc && !formData.link)
Expand Down Expand Up @@ -44,98 +46,79 @@ const Customize = () => {
// console.error(error);
}
}

return (
<div>
<div className="min-h-screen p-6 bg-gray-100 flex items-center justify-center">
<div className="container max-w-screen-lg mx-auto">
<div>
<div className="bg-white rounded shadow-lg p-4 px-4 md:p-8 mb-6">
<div className="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
<div className="text-gray-600">
<p className="font-medium text-lg">
You'll Design, We'll Create!
</p>
<p>
Please fill out all the specifications
</p>
<div className="min-h-screen p-6 bg-gray-100 flex items-center justify-center">
<div className="container max-w-screen-lg mx-auto">
<div className="customize-card">
<div className="card-header">
<h3 className="text-2xl font-bold mb-0">You'll Design, We'll Create!</h3>
<p className="text-lg">Please fill out all the specifications</p>
</div>
<div className="card-body">
<form onSubmit={handleSubmit}>
<div className="grid gap-4 text-sm grid-cols-1">
<div className="form-group">
<label htmlFor="shoe_model">Shoe Model</label>
<select
name="shoe_model"
id="shoe_model"
className="form-control"
>
<option>Crocs</option>
<option>Air Force 1</option>
<option>Converse CDG</option>
</select>
</div>

<div className="lg:col-span-2">
<div className="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">
<div className="md:col-span-5">
<label htmlFor="shoe_model">
Shoe Model
</label>
<select
name="shoe_model"
id="shoe_model"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
>
<option>Crocs</option>
<option>Air Force 1</option>
<option>Converse CDG</option>
</select>
</div>
<div className="md:col-span-5">
<label htmlFor="shoe_size">
Shoe Size
</label>
<select
name="shoe_size"
id="shoe_size"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
<form
onSubmit={handleSubmit}
className="md:col-span-5"
>
<div className="md:col-span-5">
<label htmlFor="design_desc">
Design Description
</label>
<textarea
name="desc"
id="design_desc"
rows={"4"}
className="border mt-1 rounded px-4 w-full bg-gray-50"
placeholder="Describe your design..."
onChange={handleChange}
value={formData.desc}
></textarea>
</div>
<div className="form-group">
<label htmlFor="shoe_size">Shoe Size</label>
<select
name="shoe_size"
id="shoe_size"
className="form-control"
>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>

<div className="md:col-span-5">
<label htmlFor="design_img">
Design Link
</label>
<input
type="text"
name="link"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
onChange={handleChange}
value={formData.link}
/>
</div>
<div className="form-group">
<label htmlFor="design_desc">Design Description</label>
<textarea
name="desc"
id="design_desc"
rows={"4"}
className="form-control"
placeholder="Describe your design..."
onChange={handleChange}
value={formData.desc}
></textarea>
</div>

<div className="form-group">
<label htmlFor="design_img">Design Link</label>
<input
type="text"
name="link"
id="design_img"
className="form-control"
placeholder="Enter your design link..."
onChange={handleChange}
value={formData.link}
/>
</div>

<div className="md:col-span-5 text-right">
<div className="inline-flex items-end">
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Submit
</button>
</div>
</div>
</form>
</div>
<div className="form-group text-right">
<button type="submit" className="btn-submit">
Submit
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Expand Down
Loading