Skip to content

Fixed home for mobile screen #202

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed home for mobile screen #202

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
116 changes: 68 additions & 48 deletions src/Components/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ import { io } from "socket.io-client";
import "./HomePage.css";
import { useAuth } from "../Context/UserAuthContext";

import q from "../assets/light_svg.svg"
import s from "../assets/svg.svg"
import q from "../assets/light_svg.svg";
import s from "../assets/svg.svg";
import { Tilt } from "react-tilt";

const HomePage = ({darkMode}) => {

const HomePage = ({ darkMode }) => {
const socket = io("wss://reactchat-production-f378.up.railway.app/", {
transports: ["websocket"],
});
Expand All @@ -21,10 +20,8 @@ const HomePage = ({darkMode}) => {
room: "",
});


const { setRoomDetail } = useAuth();


useEffect(() => {
const { room } = Qs.parse(location.search, { ignoreQueryPrefix: true });
if (room) {
Expand All @@ -38,7 +35,7 @@ const HomePage = ({darkMode}) => {
[e.target.name]: e.target.value,
});
};

const handleSubmit = (e) => {
e.preventDefault();
localStorage.setItem("username", formData.username);
Expand All @@ -47,68 +44,91 @@ const HomePage = ({darkMode}) => {
navigate(`chat?username=${formData.username}&room=${formData.room}`);
};
const defaultOptions = {
reverse: false, // reverse the tilt direction
max: 100, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1.1, // 2 = 200%, 1.5 = 150%, etc..
speed: 1000, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
}

reverse: false, // reverse the tilt direction
max: 100, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1.1, // 2 = 200%, 1.5 = 150%, etc..
speed: 1000, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
};

return (


<div className="w-screen h-screen flex flex-col-reverse xl:flex-row lg:flex-row md:flex-row sm:flex-row relative ">
<div className="w-1/2 h-full flex justify-center items-center">
<div className=" form xl:h-[35vw] xl:w-[35vw] lg:h-[35vw] lg:w-[35vw] p-[3px] bg-transparent">
<h1 className={` join text-[2.5rem] flex justify-center items-center mb-12 font-semibold ${darkMode ? 'text-white':'text-customgrey'}`}>JOIN ROOM</h1>
<form onSubmit={handleSubmit} className=" input w-full h-full">
<label className={`text-[1.1rem] font-semibold ${darkMode ? 'text-white': 'text-black'} `}>Display Name</label>
<div className="w-screen h-auto md:h-screen flex flex-col-reverse md:flex-row relative ">
<div
className={` ${
darkMode ? "bg-[#263238]" : "bg-white"
} w-screen md:w-1/2 h-auto md:h-full flex-col flex justify-center items-center p-6 md:p-14 lg:p-20`}
>
<h1
className={`text-[2.5rem] flex justify-center items-center mb-12 font-semibold ${
darkMode ? "text-white" : "text-customgrey"
}`}
>
JOIN ROOM
</h1>
<form onSubmit={handleSubmit} className="w-full h-auto">
<label
className={`text-[1.1rem] font-semibold ${
darkMode ? "text-white" : "text-black"
} `}
>
Display Name
</label>

<input
className={` mb-10 w-full p-[28px] outline-none border-2 border-solid border-pure-greys-300 rounded-lg bg-transparent text-2xl ${darkMode ? 'text-white':'text-black'}`}
className={` mb-10 w-full p-4 lg:p-8 outline-none border-2 border-solid border-pure-greys-300 rounded-lg bg-transparent text-2xl ${
darkMode ? "text-white" : "text-black"
}`}
type="text"
name="username"

value={formData.username}
onChange={handleChange}
required
/>
<label className={`text-[1.1rem] font-semibold ${darkMode ? 'text-white': 'text-black'} `}>Room No.</label>
<label
className={`text-[1.1rem] font-semibold ${
darkMode ? "text-white" : "text-black"
} `}
>
Room No.
</label>
<input
className={` mb-12 w-full p-[28px] outline-none border-2 border-solid border-pure-greys-300 rounded-lg bg-transparent text-2xl ${darkMode ? 'text-white':'text-black'}`}
className={` mb-12 w-full p-4 lg:p-8 outline-none border-2 border-solid border-pure-greys-300 rounded-lg bg-transparent text-2xl ${
darkMode ? "text-white" : "text-black"
}`}
type="text"
name="room"

value={formData.room}
onChange={handleChange}
required
/>
<button type="submit" className="w-[100%] cursor-pointer p-[28px] bg-[#FF713E] border-none text-white text-2xl transition duration-300 ease-in-out hover:bg-[#e45622] disabled:cursor-default disabled:bg-[#7c5cbf94] rounded-lg">
<button
type="submit"
className="w-[100%] cursor-pointer p-[28px] bg-[#FF713E] border-none text-white text-2xl transition duration-300 ease-in-out hover:bg-[#e45622] disabled:cursor-default disabled:bg-[#7c5cbf94] rounded-lg"
>
Join
</button>
</form>

</div>
</div>




<div className=" img w-1/2 flex justify-center items-center " style={{paddingRight: '3vw'}}>
<Tilt options={defaultOptions} >

<img className="image-class" src={darkMode ? s :q } alt="svgimage not found" style={{width: '100%', height: '100%', objectFit: 'contain'}}/>
</Tilt >
</div>

</div>
);

<div
className="relative w-screen md:w-1/2 h-auto flex justify-center items-center "
style={{ paddingRight: "3vw" }}
>
<Tilt options={defaultOptions}>
<img
className=""
src={darkMode ? s : q}
alt="svgimage not found"
style={{ width: "100%", height: "100%", objectFit: "contain" }}
/>
</Tilt>
</div>
</div>
);
};

export default HomePage;
export default HomePage;