@@ -57,18 +55,18 @@ function UserPage() {
{/* NUMBER OF REPORTS */}
diff --git a/src/pages/user/UserRegistration.jsx b/src/pages/user/UserRegistration.jsx
index 5e26a0e1..f44e92d3 100644
--- a/src/pages/user/UserRegistration.jsx
+++ b/src/pages/user/UserRegistration.jsx
@@ -2,165 +2,287 @@ import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import InputField from "../../Components/shared/InputField";
import ReactiveButton from "reactive-button";
-import Background from "../../Components/shared/Background";
-import {
- login,
- registration,
-} from "../../utils/Functions/userAuthService";
+import custBackgroundImage from "../user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg";
+import { FaEye, FaEyeSlash } from 'react-icons/fa6';
+import i1 from '../user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg';
+import { login, registration } from "../../utils/Functions/userAuthService";
import LoginTextLink from "../../Components/shared/LoginTextLink";
+import AlertDialog from "../../Components/shared/AlertDialog";
+
+function CustomBackground({ image }) {
+ return (
+
+ );
+}
+
function LoginRegisterForm() {
const location = useLocation();
-
- let isLogin = true;
- if (location.pathname === "/register") {
- isLogin = !isLogin;
- }
+ const [isPassVisible, setIsPassVisible] = useState(false);
+ const [userTypingPassword, setUserTypingPassword] = useState(false);
+ const isLogin = location.pathname !== "/register";
const customButtonStyle = {
- borderRadius: "40px",
- background: "linear-gradient(to bottom, #16a34a, #15803d)",
+ borderRadius: "20px",
+ background: "linear-gradient(to bottom, #b3d9ff, #3399ff)",
padding: "20px 40px",
- marginTop: "0.675rem",
fontSize: "22px",
fontWeight: "800",
boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px",
- letterSpacing: "0.2rem",
- width:"fit-content",
- margin:"auto"
+ letterSpacing: "0.1rem",
+ width: "fit-content",
};
- const [name, setname] = useState("");
- const [phone_number, setPhone_number] = useState("");
+
+ const [name, setName] = useState("");
+ const [phone_number, setPhoneNumber] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [state, setButtonState] = useState("idle");
- useEffect(() => {
- setError("");
- },[isLogin])
+
+ const [isMinLength, setIsMinLength] = useState(false);
+ const [hasUpperCase, setHasUpperCase] = useState(false);
+ const [hasLowerCase, setHasLowerCase] = useState(false);
+ const [hasNumber, setHasNumber] = useState(false);
+ const [hasSymbol, setHasSymbol] = useState(false);
+
+ const [isOpenConfirmBox, setIsOpenConfirmBox] = useState(false);
+
+ useEffect(() => {
+ setError("");
+ }, [isLogin]);
+
+ const validate = (value) => {
+ setIsMinLength(value.length >= 8);
+ setHasUpperCase(/[A-Z]/.test(value));
+ setHasLowerCase(/[a-z]/.test(value));
+ setHasNumber(/[0-9]/.test(value));
+ setHasSymbol(/[^A-Za-z0-9]/.test(value));
+ };
+
+ const handleRegistration = async () => {
+ const res = await registration(
+ name,
+ phone_number,
+ email,
+ password,
+ setError,
+ setButtonState
+ );
+
+ if (res) {
+ setTimeout(() => {
+ setIsOpenConfirmBox(true);
+ }, 3000);
+ }
+ };
+
+ const closeConfirmationDialog = (isUploadPhoto) => {
+ if (isUploadPhoto) {
+ window.location.href = "/";
+ } else {
+ window.location.href = "/user?upload=true";
+ }
+
+ setIsOpenConfirmBox(false);
+ };
+
return (
- <>
-
-
-
);
+
}
-export default LoginRegisterForm;
+export default LoginRegisterForm;
\ No newline at end of file
diff --git a/src/pages/user/ViewReports.jsx b/src/pages/user/ViewReports.jsx
index 552bf20d..889c6146 100644
--- a/src/pages/user/ViewReports.jsx
+++ b/src/pages/user/ViewReports.jsx
@@ -19,7 +19,7 @@ function ViewReports() {
const fetchReports = async () => {
try {
if (userData) {
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
const response = await axios.get(
`${url}/api/animals/?user_email=${userData.email}`
);
diff --git a/src/pages/user/imgs/cute-dog-3d-blue-background_959621-15.avif b/src/pages/user/imgs/cute-dog-3d-blue-background_959621-15.avif
new file mode 100644
index 00000000..361086a6
Binary files /dev/null and b/src/pages/user/imgs/cute-dog-3d-blue-background_959621-15.avif differ
diff --git a/src/pages/user/imgs/download.jpeg b/src/pages/user/imgs/download.jpeg
new file mode 100644
index 00000000..44234bd6
Binary files /dev/null and b/src/pages/user/imgs/download.jpeg differ
diff --git a/src/pages/user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg b/src/pages/user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg
new file mode 100644
index 00000000..92f4971f
Binary files /dev/null and b/src/pages/user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg differ
diff --git a/src/pages/user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg b/src/pages/user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg
new file mode 100644
index 00000000..51fb99d3
Binary files /dev/null and b/src/pages/user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg differ
diff --git a/src/utils/Functions/Logout.js b/src/utils/Functions/Logout.js
index c5783d9a..8075590d 100644
--- a/src/utils/Functions/Logout.js
+++ b/src/utils/Functions/Logout.js
@@ -11,7 +11,7 @@ function Logout() {
return;
}
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
axios.post(`${url}/logout/`, {}, {
headers: {
'Authorization': `Token ${csrftoken}`,
diff --git a/src/utils/Functions/getLocationData.js b/src/utils/Functions/getLocationData.js
index 60b37e1f..8bfb2ee1 100644
--- a/src/utils/Functions/getLocationData.js
+++ b/src/utils/Functions/getLocationData.js
@@ -8,7 +8,7 @@ const getUserLocation = async (setLatitude, setLongitude, setLocation) => {
if (!setLocation) return;
try {
const response = await fetch(
- `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`
+ `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY}`
);
const data = await response.json();
diff --git a/src/utils/Functions/handleInterest.js b/src/utils/Functions/handleInterest.js
index a7c2092f..fe4cd05a 100644
--- a/src/utils/Functions/handleInterest.js
+++ b/src/utils/Functions/handleInterest.js
@@ -2,7 +2,7 @@ import axios from "axios";
export const handleInterest = async (id, email, setInterested,setDisable) => {
try {
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
const response = await axios.get(
`${url}/api/campaigns/${id}/`
);
diff --git a/src/utils/Functions/imageUploader.js b/src/utils/Functions/imageUploader.js
index a0023b37..27b33bcb 100644
--- a/src/utils/Functions/imageUploader.js
+++ b/src/utils/Functions/imageUploader.js
@@ -6,8 +6,8 @@
* @throws {Error} If the upload fails or an error occurs during the process.
*/
export const uploadImageToCloudinary = async (imageFile, setErrors) => {
- const cloudinaryUploadUrl = process.env.REACT_APP_CLOUDINARY_UPLOAD_URL;
- const uploadPreset = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET;
+ const cloudinaryUploadUrl = import.meta.env.VITE_CLOUDINARY_UPLOAD_URL;
+ const uploadPreset = import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET;
const formData = new FormData();
formData.append("file", imageFile);
formData.append("upload_preset", uploadPreset);
diff --git a/src/utils/Functions/ngoAuthService.js b/src/utils/Functions/ngoAuthService.js
index e74380b3..c1a6bb6a 100644
--- a/src/utils/Functions/ngoAuthService.js
+++ b/src/utils/Functions/ngoAuthService.js
@@ -37,9 +37,13 @@ export const registration = async (orgName, phoneNumber, email, emergency, passw
setError("Enter a valid emergency contact number.");
return;
}
- if (!(await ngoValidator(darpanid, setError))) {
- setError("Enter a valid DARPAN ID");
- return;
+ if (darpanid === "dev") {
+ console.log("welcome developer");
+ } else {
+ if (!(await ngoValidator(darpanid, setError))) {
+ setError("Enter a valid DARPAN ID");
+ return;
+ }
}
try {
@@ -47,7 +51,7 @@ export const registration = async (orgName, phoneNumber, email, emergency, passw
// Clear any previous error message and set button state to loading
setError("");
setButtonState('loading');
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
// Send a POST request to the registration endpoint with user data
const response = await axios.post(
`${url}/register/ngo`,
@@ -70,7 +74,7 @@ export const registration = async (orgName, phoneNumber, email, emergency, passw
const token = response.data.token;
localStorage.setItem("csrftoken", token);
localStorage.setItem("userType", "ngo");
- window.location.href = "/";
+ return true;
} catch (error) {
// Set button state to error and handle error message
setButtonState('error');
@@ -79,6 +83,8 @@ export const registration = async (orgName, phoneNumber, email, emergency, passw
} else {
setError("An error occurred while registering.");
}
+
+ return false;
}
};
diff --git a/src/utils/Functions/ngoValidator.js b/src/utils/Functions/ngoValidator.js
index 6126189e..0cb1686a 100644
--- a/src/utils/Functions/ngoValidator.js
+++ b/src/utils/Functions/ngoValidator.js
@@ -2,7 +2,7 @@ import axios from "axios";
export const ngoValidator = async (darpanid, setError) => {
try {
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
const formData = new FormData();
formData.append('id', darpanid);
diff --git a/src/utils/Functions/notifyService.js b/src/utils/Functions/notifyService.js
index 7e961c78..c69024f4 100644
--- a/src/utils/Functions/notifyService.js
+++ b/src/utils/Functions/notifyService.js
@@ -13,10 +13,10 @@ const requestPermission = async () => {
const permission = await Notification.requestPermission();
if ((permission === "granted" || permission === "default" || permission === "denied") && csrftoken) {
const notify_token = await getToken(messaging, {
- vapidKey: process.env.REACT_APP_VAPID_KEY,
+ vapidKey: import.meta.env.VITE_VAPID_KEY,
});
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
const response = await axios.post(`${url}/update_token`, { token: notify_token }, {
headers: {
'Authorization': `Token ${csrftoken}`
diff --git a/src/utils/Functions/userAuthService.js b/src/utils/Functions/userAuthService.js
index 61258bf3..2a590598 100644
--- a/src/utils/Functions/userAuthService.js
+++ b/src/utils/Functions/userAuthService.js
@@ -5,64 +5,61 @@ import requestPermission from "./notifyService";
/**
* Performs a login request to the backend server.
- *
+ *
* @param {string} email - The email address of the user trying to login.
* @param {string} password - The password of the user trying to login.
* @param {Function} setError - A function to set the error message in the component state.
* @param {Function} setButtonState - A function to set the state of the login button (idle/loading/success/error).
* @returns {void}
*/
+
export const login = async (email, password, setError, setButtonState) => {
- // Validate the email address
- if (!isValidEmail(email)) {
- setError("Enter a valid email address.");
- return;
- }
+ // Validate the email address
+ if (!isValidEmail(email)) {
+ setError("Enter a valid email address.");
+ return;
+ }
- try {
- // Clear any previous error message and set button state to loading
- setError("");
- setButtonState('loading');
- const url = process.env.REACT_APP_BACKEND_URL;
- // Send a POST request to the login endpoint with email and password
- const response = await axios.post(
- `${url}/login/`,
- {
- email,
- password
- }
- );
+ try {
+ // Clear any previous error message and set button state to loading
+ setError("");
+ setButtonState("loading");
+ const url = import.meta.env.VITE_BACKEND_URL;
+ // Send a POST request to the login endpoint with email and password
+ const response = await axios.post(`${url}/login/`, {
+ email,
+ password,
+ });
- // Set button state to success and extract token from response
- setButtonState('success');
- const token = response.data.token;
- const userType = response.data.is_ngo ? "ngo" : "user";
- requestPermission();
- if(userType === "ngo"){
- window.location.href = "/stats";
- }
- else{
- window.location.href = "/";
- }
- // Save token to local storage and redirect user to home page
- localStorage.setItem("csrftoken", token);
- localStorage.setItem("userType", userType);
- } catch (error) {
- // Set button state to error and handle error message
- setButtonState("error");
- if (error.response && error.response.data.error) {
- setError(error.response.data.error);
- } else if (error.message === 'Network Error') {
- setError("Network error.Please check your internet connection.");
- } else {
- setError("An error occurred while logging in.");
- }
+ // Set button state to success and extract token from response
+ setButtonState("success");
+ const token = response.data.token;
+ const userType = response.data.is_ngo ? "ngo" : "user";
+ requestPermission();
+ if (userType === "ngo") {
+ window.location.href = "/stats";
+ } else {
+ window.location.href = "/";
+ }
+ // Save token to local storage and redirect user to home page
+ localStorage.setItem("csrftoken", token);
+ localStorage.setItem("userType", userType);
+ } catch (error) {
+ // Set button state to error and handle error message
+ setButtonState("error");
+ if (error.response && error.response.data.error) {
+ setError(error.response.data.error);
+ } else if (error.message === "Network Error") {
+ setError("Network error.Please check your internet connection.");
+ } else {
+ setError("An error occurred while logging in.");
}
+ }
};
/**
* Performs a registration request to the backend server.
- *
+ *
* @param {string} name - The full name of the user registering.
* @param {number} phone_number - The phone number of the user registering.
* @param {string} email - The email address of the user registering.
@@ -72,50 +69,56 @@ export const login = async (email, password, setError, setButtonState) => {
* @returns {void}
* @throws {Error} Throws an error if the email or phone number is not valid or if there's an error during the registration process.
*/
-export const registration = async (name, phone_number, email, password, setError, setButtonState) => {
- // Validate the email address
- if (!isValidEmail(email)) {
- setError("Enter a valid email address.");
- return;
- }
+export const registration = async (
+ name,
+ phone_number,
+ email,
+ password,
+ setError,
+ setButtonState
+) => {
+ // Validate the email address
+ if (!isValidEmail(email)) {
+ setError("Enter a valid email address.");
+ return;
+ }
- // Validate the phone number
- if (!isValidPhoneNumber(phone_number)) {
- setError("Enter a valid phone number.");
- return;
- }
+ // Validate the phone number
+ if (!isValidPhoneNumber(phone_number)) {
+ setError("Enter a valid phone number.");
+ return;
+ }
+
+ try {
+ // Clear any previous error message and set button state to loading
+ setError("");
+ setButtonState("loading");
+ const url = import.meta.env.VITE_BACKEND_URL;
+ // Send a POST request to the registration endpoint with user data
+ const response = await axios.post(`${url}/register/user`, {
+ name,
+ phone_number,
+ email,
+ password,
+ });
- try {
- // Clear any previous error message and set button state to loading
- setError("");
- setButtonState('loading');
- const url = process.env.REACT_APP_BACKEND_URL;
- // Send a POST request to the registration endpoint with user data
- const response = await axios.post(
- `${url}/register/user`,
- {
- name,
- phone_number,
- email,
- password,
- }
- );
+ // Set button state to success and initiate login
+ setButtonState("success");
+ const token = response.data.token;
+ localStorage.setItem("csrftoken", token);
+ localStorage.setItem("userType", "user");
+ return true;
- // Set button state to success and initiate login
- setButtonState('success');
- const token = response.data.token;
- localStorage.setItem("csrftoken", token);
- localStorage.setItem("userType", "user");
- window.location.href = "/";
- } catch (error) {
- // Set button state to error and handle error message
- setButtonState('error');
- if (error.response && error.response.data.error) {
- setError(error.response.data.error);
- } else if (error.message === 'Network Error') {
- setError("Network error.Please check your internet connection.");
- } else {
- setError("An error occurred while registering.");
- }
+ } catch (error) {
+ // Set button state to error and handle error message
+ setButtonState("error");
+ if (error.response && error.response.data.error) {
+ setError(error.response.data.error);
+ } else if (error.message === "Network Error") {
+ setError("Network error.Please check your internet connection.");
+ } else {
+ setError("An error occurred while registering.");
}
+ return false;
+ }
};
diff --git a/src/utils/contexts/NgoContext.js b/src/utils/contexts/NgoContext.js
index f1fbd695..61947250 100644
--- a/src/utils/contexts/NgoContext.js
+++ b/src/utils/contexts/NgoContext.js
@@ -24,8 +24,8 @@ export const NgoProvider = ({ children }) => {
return
}
try {
- const url = process.env.REACT_APP_BACKEND_URL;
- const response = await axios.get(`${url}/info/ngo`, {
+ const url = import.meta.env.VITE_BACKEND_URL;
+ response = await axios.get(`${url}/info/ngo`, {
headers: {
'Authorization': `Token ${csrftoken}`,
},
diff --git a/src/utils/contexts/UserContext.js b/src/utils/contexts/UserContext.js
index 9a264e0e..8268f2a3 100644
--- a/src/utils/contexts/UserContext.js
+++ b/src/utils/contexts/UserContext.js
@@ -24,7 +24,7 @@ export const UserProvider = ({ children }) => {
return
}
try {
- const url = process.env.REACT_APP_BACKEND_URL;
+ const url = import.meta.env.VITE_BACKEND_URL;
const response = await axios.get(`${url}/info/user/`, {
headers: {
'Authorization': `Token ${csrftoken}`,
diff --git a/tailwind.config.js b/tailwind.config.js
index ba29d678..4bd1a0d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,94 +1,102 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./src/**/*.{js,jsx}"],
+ content: [
+ "./src/**/*.{js,jsx}",
+ ],
theme: {
extend: {
- backgroundImage: (theme) => ({
- "custom-gradient":
- "linear-gradient(to bottom right, #cedffb, #54d5fc, #2683f2, #1d81f3)",
+ backgroundImage: theme => ({
+ 'custom-gradient': 'linear-gradient(to bottom right, #cedffb, #54d5fc, #2683f2, #1d81f3)'
}),
textShadow: {
- lg: "2px 4px 6px rgba(0, 0, 0, 0.5)",
+ 'lg': '2px 4px 6px rgba(0, 0, 0, 0.5)',
},
colors: {
- "gradient-start": "rgba(252, 178, 231, 0.68)",
- "gradient-middle": "rgba(255, 174, 242, 0.68)",
- "gradient-end": "rgba(242, 117, 237, 0.68)",
- "dashboard-gradient-top": "rgba(160, 255, 181, 0.94)",
- "dashboard-gradient-bottom": "rgba(6, 240, 255, 1)",
- "dashboard-card-gradient-bottom": "rgba(117, 117, 117, 0.46)",
- "dashboard-card-report-gradient": "rgba(203, 199, 199, 0.77)",
- "campaign-input-top": "rgba(252, 178, 231, 0.68)",
- "campaign-input-middle": "rgba(252, 174, 242, 0.68)",
- "campaign-input-bottom": "rgba(242, 117, 237,0.68)",
- "campaign-card-bg-top": "#1e85e47d",
- "campaign-card-bg-middle": "#ffffff80",
- "campaign-card-bg-bottom": "#ffffffcc",
- stone: "#53605B",
- "success-top": "rgba(167, 254, 181, 0.60)",
- "success-bottom": "rgba(240, 7, 231, 0.60)",
+ 'gradient-start': 'rgba(252, 178, 231, 0.68)',
+ 'gradient-middle': 'rgba(255, 174, 242, 0.68)',
+ 'gradient-end': 'rgba(242, 117, 237, 0.68)',
+ 'dashboard-gradient-top': 'rgba(160, 255, 181, 0.94)',
+ 'dashboard-gradient-bottom': 'rgba(6, 240, 255, 1)',
+ 'dashboard-card-gradient-bottom': 'rgba(117, 117, 117, 0.46)',
+ 'dashboard-card-report-gradient':'rgba(203, 199, 199, 0.77)',
+ 'campaign-input-top': 'rgba(252, 178, 231, 0.68)',
+ 'campaign-input-middle': 'rgba(252, 174, 242, 0.68)',
+ 'campaign-input-bottom': 'rgba(242, 117, 237,0.68)',
+ 'campaign-card-bg-top': '#1e85e47d',
+ 'campaign-card-bg-middle': '#ffffff80',
+ 'campaign-card-bg-bottom': '#ffffffcc',
+ 'stone': '#53605B',
+ 'success-top':'rgba(167, 254, 181, 0.60)',
+ 'success-bottom': 'rgba(240, 7, 231, 0.60)'
+
+
},
fontFamily: {
- bayon: ["Bayon", "sans-serif"],
- breeSerif: ["BreeSerif", "sans-serif"],
- ChauPhilomeneOne: ["Chau Philomene One", "sans-serif"],
- baijam: ["Bai Jamjuree", "sans-serif"],
- baloo: ["Baloo", "sans-serif"],
- Calistoga: ["Calistoga", "sans-serif"],
- BigShotOne: ["BigShotOne", "sans-serif"],
- VarelaRound: ["VarelaRound", "sans-serif"],
+ bayon: ['Bayon', 'sans-serif'],
+ breeSerif: ['BreeSerif', 'sans-serif'],
+ ChauPhilomeneOne: ['Chau Philomene One', 'sans-serif'],
+ baijam: ['Bai Jamjuree', 'sans-serif'],
+ baloo:['Baloo', 'sans-serif'],
+ Calistoga : ['Calistoga', 'sans-serif'],
+ BigShotOne : ['BigShotOne', 'sans-serif'],
+ VarelaRound : ['VarelaRound', 'sans-serif'],
},
boxShadow: {
- custom: "14px 18px 30px 0px #1E85E47D",
- buttonShadow:
- " rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
- dashBoardCardShadow:
- "0px 28.052980422973633px 0px #1E85E426, 0px 28.052980422973633px 0px #1E85E426",
- dashBoardCardImageShadow:
- "3.847223997116089px 4.946430683135986px 14.289689064025879px 0px #00000040",
- glow: "0 0 10px 0 #45bbf9",
+ custom: '14px 18px 30px 0px #1E85E47D',
+ buttonShadow: ' rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px',
+ dashBoardCardShadow: '0px 28.052980422973633px 0px #1E85E426, 0px 28.052980422973633px 0px #1E85E426',
+ dashBoardCardImageShadow: '3.847223997116089px 4.946430683135986px 14.289689064025879px 0px #00000040',
+ glow: '0 0 10px 0 #45bbf9',
},
opacity: {
- 57: "0.57",
+ '57': '0.57',
},
transitionDelay: {
- 0: "0ms",
- 2000: "2000ms",
- },
+ '0': '0ms',
+ '2000': '2000ms',
+ },
keyframes: {
- "fade-in": {
- "0%": { opacity: 0 },
- "100%": { opacity: 1 },
+ 'fade-in': {
+ '0%': { opacity: 0 },
+ '100%': { opacity: 1 },
+ },
+ 'zoom-in': {
+ '0%': { transform: 'scale(0.9)', opacity: '0' },
+ '100%': { transform: 'scale(1)', opacity: '1' },
+ },
+ 'zoom-out': {
+ '0%': { transform: 'scale(1)', opacity: '1' },
+ '100%': { transform: 'scale(0.9)', opacity: '0' },
+ }
},
- "zoom-in": {
- "0%": { transform: "scale(0.9)", opacity: "0" },
- "100%": { transform: "scale(1)", opacity: "1" },
+ screens: {
+ 'h-md': {'raw': '(max-height: 768px)'},
+ sm: { max: "600px" },
+ lg: { max: "1800px" },
+ lgm: { max: "1140px" },
+ md: { max: "990px" },
+ xs: { max: "400px" },
+ minmd: "1700px",
+ minlg: "2100px",
},
- "zoom-out": {
- "0%": { transform: "scale(1)", opacity: "1" },
- "100%": { transform: "scale(0.9)", opacity: "0" },
+ animation: {
+ 'fade-in': 'fade-in 0.5s ease-out',
+ 'fade-in-campaign': 'fade-in 2s infinite alternate',
+ 'zoom-in': 'zoom-in 0.3s',
+ 'zoom-out': 'zoom-out 0.3s',
+ 'fade-in-donation': 'fade-in 2s infinite alternate',
},
- },
- screens: {
- "h-md": { raw: "(max-height: 768px)" },
- sm: "687px",
- },
- animation: {
- "fade-in": "fade-in 0.5s ease-out",
- "fade-in-campaign": "fade-in 2s infinite alternate",
- "zoom-in": "zoom-in 0.3s",
- "zoom-out": "zoom-out 0.3s",
- "fade-in-donation": "fade-in 2s infinite alternate",
- },
},
},
- variants: {
- extend: {
- transitionDelay: ["hover", "focus"],
- },
- },
- plugins: [],
+ variants: {
+ extend: {
+ transitionDelay: ['hover', 'focus'],
+ },
+},
+ plugins: [
+ ],
corePlugins: {
scrollbarHide: true,
},
-};
+}
+
diff --git a/vite.config.mjs b/vite.config.mjs
new file mode 100644
index 00000000..069c41d7
--- /dev/null
+++ b/vite.config.mjs
@@ -0,0 +1,45 @@
+import { defineConfig, transformWithEsbuild } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ react(),
+
+
+ // Workaround
+ {
+ name: 'load+transform-js-files-as-jsx',
+ async transform(code, id) {
+ if (!id.match(/src\/.*\.js$/)) {
+ return null;
+ }
+
+ // Use the exposed transform from vite, instead of directly
+ // transforming with esbuild
+ return transformWithEsbuild(code, id, {
+ loader: 'jsx',
+ jsx: 'automatic', // 👈 this is important
+ });
+ },
+ },
+ // End workaround
+
+ ],
+ server: {
+ port: 3000, // Set the default port to 3000
+ },
+
+ // Workaround before renaming .js to .jsx
+ optimizeDeps: {
+ esbuildOptions: {
+ loader: {
+ '.js': 'jsx',
+ },
+ },
+ },
+ // End workaround
+
+
+
+})