Skip to content

Commit

Permalink
Merge pull request #44 from mnosov622/main
Browse files Browse the repository at this point in the history 
Dynamic background is added
  • Loading branch information
@ashavijit
ashavijit authored Oct 17, 2022
2 parents 9f9847b + 1c651e4 commit 7cade14
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 54 deletions.
Binary file added public/images/bg1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg5.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,26 @@ body {
box-sizing: border-box;
}

.backgroundImage1 {
background: url("../public/images/bg1.jpg");
}

.backgroundImage2 {
background: url("../public/images/bg2.jpg");
}

.backgroundImage3 {
background: url("../public/images/bg3.jpg");
}

.backgroundImage4 {
background: url("../public/images/bg4.jpg");
}

.backgroundImage5 {
background: url("../public/images/bg5.jpg");
}

/*
@layer components {
.sidebar-icon {
Expand Down
136 changes: 82 additions & 54 deletions src/page/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,38 @@ import { MdAddBox as JoinCallIcon } from "react-icons/md";
import { BsCalendarDate as CalenderIcon } from "react-icons/bs";
import { MdScreenShare as ScreenShareIcon } from "react-icons/md";
import { Link } from "react-router-dom";
import { useRef } from "react";

const roomId = uuid();

const Home = () => {
const { user } = useAuth();
const [counter, setCounter] = useState(0);
const [backgroundClass, setBackgroundClass] = useState("");
const backgroundImages = [
"backgroundImage1",
"backgroundImage2",
"backgroundImage3",
"backgroundImage4",
"backgroundImage5",
];

function changeBackgroundImage() {
if (counter === 4) {
setCounter(0);
} else {
setBackgroundClass(backgroundImages[counter]);
setCounter(counter + 1);
}
}

useEffect(() => {
setTimeout(() => {
changeBackgroundImage();
}, 10000);
}, [counter]);

// }
const months = [
"January",
"February",
Expand Down Expand Up @@ -44,68 +70,70 @@ const Home = () => {
}, []);

return (
<div className="bg-darkBlue1 min-h-screen text-slate-400">
<div className="flex h-full md:gap-2 flex-col md:flex-row">
<div className="p-3 w-auto h-auto items-center">
<div className="flex gap-2 md:gap-6 mb-3 md:mb-6">
<Link to={`/room/${roomId}`} className="block w-full">
<div className={[backgroundClass, "bg-darkBlue1"].join(" ")}>
<div className=" min-h-screen text-slate-400">
<div className="flex h-full md:gap-2 flex-col md:flex-row">
<div className="p-3 w-auto h-auto items-center">
<div className="flex gap-2 md:gap-6 mb-3 md:mb-6">
<Link to={`/room/${roomId}`} className="block w-full">
<HomeCard
title="New Meeting"
desc="Create a new meeting"
icon={<NewCallIcon />}
iconBgColor="lightYellows"
bgColor="bg-yellow"
route={`/room/`}
/>
</Link>
<Link to={`/join`} className="block w-full">
<HomeCard
title="Join Meeting"
desc="via invitation link"
icon={<JoinCallIcon />}
bgColor="bg-blue"
/>
</Link>
</div>
<div className="flex gap-2 md:gap-6">
<HomeCard
title="New Meeting"
desc="Create a new meeting"
icon={<NewCallIcon />}
iconBgColor="lightYellows"
bgColor="bg-yellow"
route={`/room/`}
title="Schedule"
desc="schedule your meeting"
icon={<CalenderIcon size={20} />}
bgColor="bg-blue"
/>
</Link>
<Link to={`/join`} className="block w-full">
<HomeCard
title="Join Meeting"
desc="via invitation link"
icon={<JoinCallIcon />}
title="Screen Share"
desc="show your work"
icon={<ScreenShareIcon size={22} />}
bgColor="bg-blue"
/>
</Link>
</div>
<div className="flex gap-2 md:gap-6">
<HomeCard
title="Schedule"
desc="schedule your meeting"
icon={<CalenderIcon size={20} />}
bgColor="bg-blue"
/>
<HomeCard
title="Screen Share"
desc="show your work"
icon={<ScreenShareIcon size={22} />}
bgColor="bg-blue"
/>
</div>
<div>
<div className="p-3 md:p-4 md:rounded-xl rounded md:text-base text-sm md:mt-6 mt-2 text-white md:font-semibold text-center w-full bg-blue">
Made with love by
<a href="https://github.com/ashavijit" target={"_blank"} rel="noreferrer">
{" "}
Avijit <></>Sen
</a>
</div>
<div>
<div className="p-3 md:p-4 md:rounded-xl rounded md:text-base text-sm md:mt-6 mt-2 text-white md:font-semibold text-center w-full bg-blue">
Made with love by
<a href="https://github.com/ashavijit" target={"_blank"} rel="noreferrer">
{" "}
Avijit <></>Sen
</a>
</div>
</div>
</div>
</div>
<div className="flex-grow md:h-screen md:border-l-2 border-lightGray p-3 md:p-4">
<div className="relative md:h-52 w-full bg-slate-500 rounded md:rounded-2xl p-3">
<div className="md:absolute bottom-2 left-2 md:bottom-6 md:left-6">
{user && <h1 className="text-4xl">Welcome {user?.displayName}</h1>}
<div className="flex-grow md:h-screen md:border-l-2 border-lightGray p-3 md:p-4">
<div className="relative md:h-52 w-full bg-slate-500 rounded md:rounded-2xl p-3">
<div className="md:absolute bottom-2 left-2 md:bottom-6 md:left-6">
{user && <h1 className="text-4xl">Welcome {user?.displayName}</h1>}

<p className="md:text-7xl text-4xl text-white">
{`${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:${
date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
}`}
</p>
<p className="text-slate-300 font-thin my-1">
{`${days[date.getDay()]},${date.getDate()} ${
months[date.getMonth()]
} ${date.getFullYear()}`}
</p>
<p className="md:text-7xl text-4xl text-white">
{`${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:${
date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
}`}
</p>
<p className="text-slate-300 font-thin my-1">
{`${days[date.getDay()]},${date.getDate()} ${
months[date.getMonth()]
} ${date.getFullYear()}`}
</p>
</div>
</div>
</div>
</div>
Expand Down

1 comment on commit 7cade14

@vercel
Copy link

@vercel vercel bot commented on 7cade14 Oct 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

meetify – ./

meetify-git-main-senavijit7076-gmailcom.vercel.app
meetify-gamma.vercel.app
meetify-senavijit7076-gmailcom.vercel.app

Please sign in to comment.