Skip to content

Commit

Permalink
Enhancement : Carousel UI changed
Browse files Browse the repository at this point in the history 
closes shelcia#220
  • Loading branch information
@praptisharma28
praptisharma28 committed Jan 20, 2024
1 parent 24737ae commit 38eab2d
Show file tree
Hide file tree
Showing 2 changed files with 243 additions and 31 deletions.
81 changes: 50 additions & 31 deletions src/pages/auth/HomePage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import React, { useContext, useEffect, useState } from "react";
import { Carousel, Col, Container, Row } from "react-bootstrap";
import React, { useContext } from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Link } from "react-router-dom";
import { TemplateContext } from "../../context/TemplateContext";
import { Pattern3Default } from "../../components/common/CustomPatterns";
import "./home.css"

const HomePage = () => {
const [templates] = useContext(TemplateContext);
return (
<React.Fragment>
<section className="wrapper">
<div className="section section-hero section-shaped">
<Pattern3Default />
<div className="page-header">
<Container className="shape-container d-flex align-items-center py-lg">
<Container className="shape-container d-flex align-items-center py-lg" style={{justifyContent:"center"}}>
<div className="col px-0">
<Row className="align-items-center justify-content-center">
<Col lg={6} className="text-center">
Expand Down Expand Up @@ -49,7 +52,7 @@ const HomePage = () => {
</svg>
</div>
</div>
<div className="section features-1">
<div className="section features-1 new-shape">
<Container>
<Row>
<Col md={8} className="mx-auto text-center">
Expand All @@ -60,7 +63,23 @@ const HomePage = () => {
<p className="lead">I am still working on it</p>
</Col>
</Row>
<TemplateCarousel />
{/* <TemplateCarousel /> */}
<div className="card-container">
<input type="radio" name="slider" id="item-1" checked />
<input type="radio" name="slider" id="item-2" />
<input type="radio" name="slider" id="item-3" />
<div className="cards">
<label className="card" htmlFor="item-1" id="song-1">
<img src={templates[0].img} alt="template" />
</label>
<label className="card" htmlFor="item-2" id="song-2">
<img src={templates[1].img} alt="template" />
</label>
<label className="card" htmlFor="item-3" id="song-3">
<img src={templates[2].img} alt="template" />
</label>
</div>
</div>
</Container>
</div>
<br />
Expand All @@ -72,31 +91,31 @@ const HomePage = () => {

export default HomePage;

const TemplateCarousel = () => {
const [templates] = useContext(TemplateContext);
const [index, setIndex] = useState(0);
// const TemplateCarousel = () => {
// const [templates] = useContext(TemplateContext);
// const [index, setIndex] = useState(0);

const handleSelect = (selectedIndex) => {
setIndex(selectedIndex);
};
useEffect(() => {
const interval = setInterval(() => {
setIndex((prevIndex) => (prevIndex + 1) % templates.length);
}, 5000);
return () => clearInterval(interval);
}, [index]);
// const handleSelect = (selectedIndex) => {
// setIndex(selectedIndex);
// };
// useEffect(() => {
// const interval = setInterval(() => {
// setIndex((prevIndex) => (prevIndex + 1) % templates.length);
// }, 5000);
// return () => clearInterval(interval);
// }, [index]);

return (
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
{templates.map((template, index) => (
<Carousel.Item key={index}>
<img className="d-block w-100" src={template.img} alt="...." />
<Carousel.Caption>
<h3 className="text-white">{template.title}</h3>
<p className="text-light">{template.caption} </p>
</Carousel.Caption>
</Carousel.Item>
))}
</Carousel>
);
};
// return (
// <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
// {templates.map((template, index) => (
// <Carousel.Item key={index}>
// <img className="d-block w-100" src={template.img} alt="...." />
// <Carousel.Caption>
// <h3 className="text-white">{template.title}</h3>
// <p className="text-light">{template.caption} </p>
// </Carousel.Caption>
// </Carousel.Item>
// ))}
// </Carousel>
// );
// };
193 changes: 193 additions & 0 deletions src/pages/auth/home.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

* {
box-sizing: border-box;
}

/* html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
*/
.new-shape {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 10px;
font-family: 'DM Sans', sans-serif;
height: 100vh;
}

input[type=radio] {
display: none;
}

.card {
position: absolute;
width: 60%;
height: 100%;
left: 0;
right: 0;
margin: auto;
transition: transform .4s ease;
cursor: pointer;
overflow: hidden;

}

.card-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
max-width: 800px;
max-height: 600px;
height: 100%;
transform-style: preserve-3d;
overflow: hidden;
height: 600px;
transform: translateX(50%);
left: -30%;
}

.cards {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 20px;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: cover contain;

}

#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
transform: translatex(-40%) scale(.8);
opacity: .4;
z-index: 0;
height: 400px;
object-fit: contain;
}


#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
transform: translatex(40%) scale(.8);
opacity: .4;
z-index: 0;
height: 400px;
object-fit: contain;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
transform: translatex(0) scale(1);
opacity: 1;
z-index: 1;
height: 400px;
object-fit: contain;

img {
box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
}
@media (max-width:1100px) {
.card-container{
transform: translateX(0%);
left: 0%;
}
}
/*
.player {
background-color: #fff;
border-radius: 8px;
min-width: 320px;
padding: 16px 10px;
margin-top: 100px;
}
.upper-part {
position: relative;
display: flex;
align-items: center;
margin-bottom: 12px;
height: 36px;
overflow: hidden;
}
.play-icon{ margin-right: 10px; }
.song-info {
width: calc(100% - 32px);
display: block;
}
.song-info .title {
color: #403d40;
font-size: 14px;
line-height: 24px;
}
.sub-line {
display: flex;
justify-content: space-between;
width: 100%;
}
.subtitle, .time {
font-size: 12px;
line-height: 16px;
color: #c6c5c6;
}
.time {
font-size: 12px;
line-height: 16px;
color: #a5a5a5;
font-weight: 500;
margin-left: auto;
}
.progress-bar {
height: 3px;
width: 100%;
background-color: #e9efff;
border-radius: 2px;
overflow: hidden;
}
.progress {
display: block;
position: relative;
width: 60%;
height: 100%;
background-color: #2992dc;
border-radius: 6px;
}
.info-area {
width: 100%;
position: absolute;
top: 0;
left: 30px;
transition: transform .4s ease-in;
}
#item-2:checked ~ .player #test {
transform: translateY(0);
}
#item-2:checked ~ .player #test {
transform: translateY(-40px);
}
#item-3:checked ~ .player #test {
transform: translateY(-80px);
} */

0 comments on commit 38eab2d

Please sign in to comment.