update,
This commit is contained in:
louiscklaw
179
givefortune/task3-quote/src/components/AnimalList.js
Normal file
179
givefortune/task3-quote/src/components/AnimalList.js
Normal file
@@ -0,0 +1,179 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import styles from "./AnimalList.module.css";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
function AnimalList(props) {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(calculateItemsPerPage());
|
||||
const lastIndex = currentPage * itemPerPage;
|
||||
const firstIndex = lastIndex - itemPerPage;
|
||||
const items = props.data.slice(firstIndex, lastIndex);
|
||||
const numberOfPages = Math.ceil(props.data.length / itemPerPage);
|
||||
const pageNum = [...Array(numberOfPages + 1).keys()].slice(1);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setItemPerPage(calculateItemsPerPage());
|
||||
}
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function calculateItemsPerPage() {
|
||||
const screenWidth = window.innerWidth;
|
||||
if (screenWidth >= 1280) {
|
||||
return 16; // Show 16 items per page for large screens
|
||||
} else if (screenWidth >= 960) {
|
||||
return 12; // Show 12 items per page for medium screens
|
||||
} else {
|
||||
return 8; // Show 8 items per page for small screens
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination motion effect
|
||||
function previousPage() {
|
||||
if (currentPage !== 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
|
||||
function changeCurrentPage(chosenPage) {
|
||||
setCurrentPage(chosenPage);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
if (currentPage !== pageNum.length) {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
const cardVariants = {
|
||||
offscreen: {
|
||||
y: -40,
|
||||
},
|
||||
onscreen: {
|
||||
y: -75,
|
||||
|
||||
transition: {
|
||||
type: "spring",
|
||||
duration: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles["image-list-container"]}>
|
||||
<div className={styles["image-list"]}>
|
||||
{items.map((el) => (
|
||||
<Link
|
||||
key={el.name}
|
||||
to={{
|
||||
pathname: `/Category_Page/${el.name}`,
|
||||
}}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<div className={styles["image-wrapper"]}>
|
||||
<motion.div>
|
||||
<motion.button
|
||||
className={styles["motion-button"]}
|
||||
variants={cardVariants}
|
||||
initial="offscreen"
|
||||
whileInView="onscreen"
|
||||
viewport={{ once: true, amount: 0.8 }}
|
||||
whileHover={{
|
||||
y: -89,
|
||||
scale: 1,
|
||||
transition: { duration: 1 },
|
||||
}}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<img
|
||||
src={`${el.image}?w=248&fit=crop&auto=format`}
|
||||
alt={el.name}
|
||||
className={styles["bio-image"]}
|
||||
></img>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
<div className={styles["image-details"]}>
|
||||
<img
|
||||
className={styles["paper-box"]}
|
||||
src="./Imgs/paperBox.svg"
|
||||
alt="paper box"
|
||||
></img>
|
||||
<div className={styles["pet-info"]}>
|
||||
{/* Name, gender and age */}
|
||||
<div className={styles["bioName"]}>{el.name}</div>
|
||||
<div className={styles["more-details"]}>
|
||||
<div className={styles["bio-gender-age"]}>
|
||||
{el.gender === "女" ? (
|
||||
<img
|
||||
className={styles["gender-icon"]}
|
||||
src="./icons/female.svg"
|
||||
alt="female"
|
||||
></img>
|
||||
) : (
|
||||
<img
|
||||
className={styles["gender-icon"]}
|
||||
src="./icons/male.svg"
|
||||
alt="male"
|
||||
></img>
|
||||
)}
|
||||
{el.age}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul className={styles["pagination"]}>
|
||||
<li className={styles["page-item"]}>
|
||||
<button className={styles["page-item"]} onClick={previousPage}>
|
||||
{currentPage === 1 || numberOfPages === 0 ? " " : "🐕 ⏪"}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{pageNum.map((eachAnimal, index) => (
|
||||
<div>
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === eachAnimal ? "active" : ""
|
||||
}`}
|
||||
key={index}
|
||||
>
|
||||
<button
|
||||
className={styles["page-item"]}
|
||||
onClick={() => changeCurrentPage(eachAnimal)}
|
||||
>
|
||||
{eachAnimal}
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
<li className={styles["page-item"]}>
|
||||
<button className={styles["page-item"]} onClick={nextPage}>
|
||||
{currentPage === pageNum.length || numberOfPages === 0
|
||||
? " "
|
||||
: "⏩ 🐈"}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnimalList;
|
||||
108
givefortune/task3-quote/src/components/AnimalList.module.css
Normal file
108
givefortune/task3-quote/src/components/AnimalList.module.css
Normal file
@@ -0,0 +1,108 @@
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px 60px;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
/* width: fit-content; */
|
||||
padding: 30px;
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
.bio-image {
|
||||
width: 210px;
|
||||
max-height: 250px;
|
||||
min-height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 30px;
|
||||
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-details {
|
||||
/* border: 1px solid brown; */
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* bottom: 0; */
|
||||
/* bottom: 20%; */
|
||||
/* width: fit-content; */
|
||||
/* height: fit-content; */
|
||||
/* padding: 3px; */
|
||||
}
|
||||
|
||||
.paper-box {
|
||||
/* position: relative; */
|
||||
width: 300px;
|
||||
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));
|
||||
/* bottom: 20%; */
|
||||
}
|
||||
|
||||
.pet-info {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin: 0 50px 0 0;
|
||||
}
|
||||
|
||||
.bioName {
|
||||
/* position: absolute; */
|
||||
color: rgb(70, 30, 10);
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.more-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bio-gender-age {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
font-size: 1rem;
|
||||
color: rgb(155, 60, 25);
|
||||
}
|
||||
.gender-icon {
|
||||
width: 20px;
|
||||
}
|
||||
/* motion style */
|
||||
|
||||
.motion-button {
|
||||
border: none;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
background-color: white;
|
||||
border: transparent;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.page-item:hover {
|
||||
background-color: yellow;
|
||||
}
|
||||
92
givefortune/task3-quote/src/components/AnimalsProfile.js
Normal file
92
givefortune/task3-quote/src/components/AnimalsProfile.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import HKSCDA_info from "../HKSCDA_animal_info.json";
|
||||
import { Button, Stack } from "@mui/material";
|
||||
import NewNavbar from "../NewNavbar";
|
||||
import Footer from "./Footer";
|
||||
import ImageG from "./ImageGallery";
|
||||
import "react-image-gallery/styles/css/image-gallery.css";
|
||||
import styles from "../Profile.module.css";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
function AnimalsProfile() {
|
||||
let { animal_Name } = useParams();
|
||||
let unfilteredInfo = [];
|
||||
for (let keys in HKSCDA_info) {
|
||||
unfilteredInfo.push(...HKSCDA_info[keys]);
|
||||
}
|
||||
let animalInfo = unfilteredInfo.filter((el) => el.name === animal_Name);
|
||||
return (
|
||||
<div>
|
||||
<NewNavbar />
|
||||
<br></br>
|
||||
<br></br>
|
||||
<div className={styles["content"]}>
|
||||
<ImageG data={animalInfo} />
|
||||
<motion.div animate={{ y: 50 }} transition={{ duration: 0.4 }}>
|
||||
<h1>{animalInfo[0].name}</h1>
|
||||
<h4>
|
||||
我係{animalInfo[0].gender}仔 {animalInfo[0].species}, 我
|
||||
{animalInfo[0].age}大啦～
|
||||
</h4>
|
||||
<h4>
|
||||
我現時
|
||||
{
|
||||
<em>
|
||||
<span className={styles["underline"]}>
|
||||
{animalInfo[0].chipped}
|
||||
</span>
|
||||
</em>
|
||||
}
|
||||
晶片, 而且
|
||||
<em>
|
||||
<span className={styles["underline"]}>
|
||||
{animalInfo[0].castrated}
|
||||
</span>
|
||||
</em>
|
||||
~
|
||||
</h4>
|
||||
<br></br>
|
||||
<p>
|
||||
性別: {animalInfo[0].gender}({animalInfo[0].castrated})
|
||||
</p>
|
||||
<p>歲數: {animalInfo[0].age}</p>
|
||||
<p>晶片: {animalInfo[0].chipped}</p>
|
||||
|
||||
<br></br>
|
||||
</motion.div>
|
||||
</div>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true, amount: 0.4 }}
|
||||
transition={{ duration: 1.5 }}
|
||||
className={styles["adoptionButton"]}
|
||||
>
|
||||
<p>狗狗準備好返屋企，你準備好未?</p>
|
||||
<h3>領養前，停一停，諗一諗</h3>
|
||||
<Stack spacing={2}>
|
||||
<a href={`${animalInfo[0].href}`}>
|
||||
<Button id={styles["external-link"]} variant="contained">
|
||||
去了解我更多
|
||||
</Button>
|
||||
</a>
|
||||
</Stack>
|
||||
</motion.div>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnimalsProfile;
|
||||
123
givefortune/task3-quote/src/components/Calendar.js
Normal file
123
givefortune/task3-quote/src/components/Calendar.js
Normal file
@@ -0,0 +1,123 @@
|
||||
import Calendar from "react-calendar";
|
||||
import { useState } from "react";
|
||||
import "react-calendar/dist/Calendar.css";
|
||||
import styles from "./Calendar.module.css";
|
||||
|
||||
function AdoptionCalendar() {
|
||||
const [value, onChange] = useState(new Date());
|
||||
const dummyAdoptionDay = [
|
||||
{
|
||||
date: new Date(2024, 4, 26),
|
||||
event: "領養日 - 長洲愛護動物小組 x Q-Pets",
|
||||
location: "荔枝角D2 Place 2期3樓301-303號鋪（Q-Pets門市）",
|
||||
startTime: 14,
|
||||
endTime: 17,
|
||||
eventLink:
|
||||
"https://www.facebook.com/photo.php?fbid=474201651932951&set=pb.100080293603628.-2207520000&type=3",
|
||||
},
|
||||
{
|
||||
date: new Date(2024, 4, 26),
|
||||
event: "Dog & Puppy Adoption Sundays - Kirsten's Zoo",
|
||||
location: "Staunton's Soho, Central",
|
||||
startTime: 14,
|
||||
endTime: 17,
|
||||
eventLink: "https://kirstenszoo.com/",
|
||||
},
|
||||
{
|
||||
date: new Date(2024, 4, 12),
|
||||
event: "Dog & Puppy Adoption Sundays - Kirsten's Zoo",
|
||||
location: "Staunton's Soho, Central",
|
||||
startTime: 14,
|
||||
endTime: 17,
|
||||
eventLink: "https://kirstenszoo.com/",
|
||||
},
|
||||
{
|
||||
date: new Date(2024, 3, 14),
|
||||
event: "Dog & Puppy Adoption Sundays - Kirsten's Zoo",
|
||||
location: "Staunton's Soho, Central",
|
||||
startTime: 15,
|
||||
endTime: 17,
|
||||
eventLink: "https://kirstenszoo.com/news-events/adoption-events/",
|
||||
},
|
||||
{
|
||||
date: new Date(2024, 2, 17),
|
||||
event: "毛孩領養日 - Tailslantau",
|
||||
location: "梅窩梅窩碼頭等0號銀礦中心大廈",
|
||||
startTime: 15,
|
||||
endTime: 17,
|
||||
eventLink: "https://zh.tailslantau.org/events",
|
||||
},
|
||||
];
|
||||
const filteredEvents = dummyAdoptionDay.filter(
|
||||
(event) =>
|
||||
event.date.getMonth() === value.getMonth() ||
|
||||
event.date.getMonth() === value.getMonth() + 1
|
||||
);
|
||||
|
||||
const tileContent = ({ date }) => {
|
||||
const formattedDate = date.toDateString();
|
||||
const matchingEvents = dummyAdoptionDay.filter(
|
||||
(event) => event.date.toDateString() === formattedDate
|
||||
);
|
||||
return matchingEvents.length > 0 ? (
|
||||
<div className={styles["tile-content"]}>
|
||||
<div className={styles["dot"]}></div>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
const formatDate = (date) => {
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1)
|
||||
.toString()
|
||||
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} (${
|
||||
["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()]
|
||||
})`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["calendar-section"]}>
|
||||
<div className={styles["calendarTitle"]}>
|
||||
唔想網上交友？可以來偶遇一下命中"主"子🐈
|
||||
</div>
|
||||
<div className={styles["calanderPlusDetailsWrapper"]}>
|
||||
<div className={styles["calanderPlusDetails"]}>
|
||||
<Calendar
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
tileContent={tileContent}
|
||||
tileClassName="custom-tile"
|
||||
className={styles["react-calendar"]}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles["calendarDetailsWrapper"]}>
|
||||
<div className={styles["calendar-month"]}>
|
||||
{`${value.getMonth() + 1}月至${value.getMonth() + 2}月時間表`}
|
||||
</div>
|
||||
{filteredEvents.map((el, index) => (
|
||||
<div key={index} className={styles["calendarDetails"]}>
|
||||
<span className={styles["eventLocation"]}>
|
||||
活動:{" "}
|
||||
<a
|
||||
href={el.eventLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.eventLink}
|
||||
>
|
||||
{el.event}
|
||||
</a>{" "}
|
||||
| | 地點: {el.location}
|
||||
</span>
|
||||
<p className={styles["eventDate"]}>
|
||||
日期: {formatDate(el.date)} | | 時間: {el.startTime}:00 -{" "}
|
||||
{el.endTime}:00
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdoptionCalendar;
|
||||
121
givefortune/task3-quote/src/components/Calendar.module.css
Normal file
121
givefortune/task3-quote/src/components/Calendar.module.css
Normal file
@@ -0,0 +1,121 @@
|
||||
.tile-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #f9a24bcb;
|
||||
border-radius: 50%;
|
||||
/*margin: 0;*/
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.custom-tile {
|
||||
position: relative;
|
||||
}
|
||||
.custom-tile .dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.calanderPlusDetailsWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 50px;
|
||||
flex-wrap: wrap;
|
||||
/* flex-wrap: wrap; */
|
||||
}
|
||||
.calanderPlusDetails {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.calendarDetails {
|
||||
padding: 5px 0 0 20px;
|
||||
border-left: 4px ridge rgb(205, 94, 38);
|
||||
}
|
||||
|
||||
.calendar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: antiquewhite;
|
||||
padding: 30px;
|
||||
}
|
||||
.calendarTitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.4rem;
|
||||
color: rgb(70, 30, 10);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* right section */
|
||||
.calendarDetailsWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.calendar-month {
|
||||
padding: 10px 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
color: rgb(169, 62, 9);
|
||||
}
|
||||
.eventLocation {
|
||||
color: rgb(202, 124, 52);
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.eventDate {
|
||||
border-bottom: 3px dotted rgb(151, 144, 144);
|
||||
font-weight: 500;
|
||||
color: rgb(70, 30, 10);
|
||||
/* padding: 3px; */
|
||||
}
|
||||
|
||||
.eventLink {
|
||||
color: rgb(255, 185, 93); /* Change the color to your desired value */
|
||||
text-decoration: none; /* Remove the underline */
|
||||
}
|
||||
|
||||
.eventLink:hover {
|
||||
color: rgb(250, 213, 65); /* Change the hover color to your desired value */
|
||||
text-decoration: underline; /* Add an underline on hover */
|
||||
}
|
||||
|
||||
:global(.react-calendar) {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
color: #222;
|
||||
border-radius: 10px;
|
||||
border: transparent;
|
||||
}
|
||||
:global(.react-calendar__navigation__label) {
|
||||
color: #f9a24bcb;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
:global(.react-calendar__tile--now) {
|
||||
background-color: wheat;
|
||||
border-radius: 50%;
|
||||
}
|
||||
:global(.react-calendar__till) {
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
213
givefortune/task3-quote/src/components/FilterBar.js
Normal file
213
givefortune/task3-quote/src/components/FilterBar.js
Normal file
@@ -0,0 +1,213 @@
|
||||
import React, { useState } from "react";
|
||||
import HKSCDA_info from "../HKSCDA_animal_info.json";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import Select from "@mui/material/Select";
|
||||
import AnimalList from "./AnimalList.js";
|
||||
import Shortcut from "./Shortcut.js";
|
||||
import styles from "./FilterBar.module.css";
|
||||
|
||||
function FilterBar() {
|
||||
let unfilteredInfo = [];
|
||||
for (let keys in HKSCDA_info) {
|
||||
unfilteredInfo.push(...HKSCDA_info[keys]);
|
||||
}
|
||||
|
||||
const handleSpeciesChange = (e) => {
|
||||
setSelectedSpecies(e.target.value);
|
||||
};
|
||||
const handleGenderChange = (e) => {
|
||||
setSelectedGender(e.target.value);
|
||||
};
|
||||
|
||||
const handleChipChange = (e) => {
|
||||
setSelectedChip(e.target.value);
|
||||
};
|
||||
|
||||
const handleCastratedChange = (e) => {
|
||||
setSelectedCastrated(e.target.value);
|
||||
};
|
||||
|
||||
const [selectedSpecies, setSelectedSpecies] = useState("all");
|
||||
const [selectedGender, setSelectedGender] = useState("all");
|
||||
const [selectedChip, setSelectedChip] = useState("all");
|
||||
const [selectedCastrated, setSelectedCastrated] = useState("all");
|
||||
const [filteredList, setFilteredList] = useState([]);
|
||||
|
||||
const handleFilterOnClick = () => {
|
||||
const newFilteredList = unfilteredInfo.filter((el) => {
|
||||
return (
|
||||
(selectedSpecies === "all" || selectedSpecies === el.species) &&
|
||||
(selectedGender === "all" || selectedGender === el.gender) &&
|
||||
(selectedChip === "all" || selectedChip === el.chipped) &&
|
||||
(selectedCastrated === "all" || selectedCastrated === el.castrated)
|
||||
);
|
||||
});
|
||||
setFilteredList(newFilteredList);
|
||||
};
|
||||
const handleClearOnClick = () => {
|
||||
setSelectedSpecies("all");
|
||||
setSelectedGender("all");
|
||||
setSelectedChip("all");
|
||||
setSelectedCastrated("all");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["categoryPage-container"]}>
|
||||
<Shortcut />
|
||||
<div className={styles["filterBar-wrapper"]}>
|
||||
<div className={styles["drop-down-wrapper"]}>
|
||||
<div className={styles["group"]}>
|
||||
<div className={styles["filterBar"]}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel
|
||||
id={styles["speciesFiltering"]}
|
||||
className={styles["selection"]}
|
||||
>
|
||||
物種
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="speciesFiltering"
|
||||
id={styles["chosenSpecies"]}
|
||||
className={styles["selection"]}
|
||||
label="品種"
|
||||
onChange={handleSpeciesChange}
|
||||
value={selectedSpecies}
|
||||
>
|
||||
<MenuItem value="all" className={styles["option"]}>
|
||||
所有
|
||||
</MenuItem>
|
||||
<MenuItem value="dog" className={styles["option"]}>
|
||||
狗狗
|
||||
</MenuItem>
|
||||
<MenuItem value="cat" className={styles["option"]}>
|
||||
貓貓
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={styles["filterBar"]}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel
|
||||
id="genderFiltering"
|
||||
className={styles["selection"]}
|
||||
>
|
||||
性別
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="genderFiltering"
|
||||
id="chosenGender"
|
||||
className={styles["selection"]}
|
||||
label="性別"
|
||||
onChange={handleGenderChange}
|
||||
value={selectedGender}
|
||||
>
|
||||
<MenuItem value="all" className={styles["option"]}>
|
||||
所有
|
||||
</MenuItem>
|
||||
<MenuItem value="女" className={styles["option"]}>
|
||||
女
|
||||
</MenuItem>
|
||||
<MenuItem value="男" className={styles["option"]}>
|
||||
男
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["group"]}>
|
||||
<div className={styles["filterBar"]}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="chipFiltering" className={styles["selection"]}>
|
||||
晶片
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="chipFiltering"
|
||||
id="is_Chip"
|
||||
className={styles["selection"]}
|
||||
label="晶片"
|
||||
onChange={handleChipChange}
|
||||
value={selectedChip}
|
||||
>
|
||||
<MenuItem value="all" className={styles["option"]}>
|
||||
所有
|
||||
</MenuItem>
|
||||
<MenuItem value="未植入" className={styles["option"]}>
|
||||
未植入
|
||||
</MenuItem>
|
||||
<MenuItem value="已植入" className={styles["option"]}>
|
||||
已植入
|
||||
</MenuItem>
|
||||
<MenuItem value="/" className={styles["option"]}>
|
||||
未知
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={styles["filterBar"]}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel
|
||||
id="castratedFiltering"
|
||||
className={styles["selection"]}
|
||||
>
|
||||
絕育
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="castratedFiltering"
|
||||
id="is_castrated"
|
||||
className={styles["selection"]}
|
||||
label="絕育"
|
||||
onChange={handleCastratedChange}
|
||||
value={selectedCastrated}
|
||||
>
|
||||
<MenuItem value="all" className={styles["option"]}>
|
||||
所有
|
||||
</MenuItem>
|
||||
<MenuItem value="未絕育" className={styles["option"]}>
|
||||
未絕育
|
||||
</MenuItem>
|
||||
<MenuItem value="已絕育" className={styles["option"]}>
|
||||
已絕育
|
||||
</MenuItem>
|
||||
<MenuItem value="/" className={styles["option"]}>
|
||||
未知
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["filterClearButton-wrapper"]}>
|
||||
<div className={styles["filterClearButton"]}>
|
||||
<button
|
||||
className={styles["filtering"]}
|
||||
id="filterBtn"
|
||||
onClick={handleFilterOnClick}
|
||||
>
|
||||
篩選
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles["filterClearButton"]}>
|
||||
<button
|
||||
className={styles["clearAll"]}
|
||||
id="clearAllBtn"
|
||||
onClick={handleClearOnClick}
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AnimalList
|
||||
data={filteredList.length > 0 ? filteredList : unfilteredInfo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilterBar;
|
||||
159
givefortune/task3-quote/src/components/FilterBar.module.css
Normal file
159
givefortune/task3-quote/src/components/FilterBar.module.css
Normal file
@@ -0,0 +1,159 @@
|
||||
.filterBar-wrapper {
|
||||
/* display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px; */
|
||||
/* margin: 20px; */
|
||||
/* display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 60px; */
|
||||
margin: 0 30px 80px 30px;
|
||||
}
|
||||
/* Drop-down Buttons */
|
||||
.drop-down-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
/* flex: 1 !important; */
|
||||
padding: 20px;
|
||||
}
|
||||
.group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.filterBar {
|
||||
flex: 1;
|
||||
}
|
||||
.selection {
|
||||
color: rgb(70, 30, 10) !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
/* min-width: 150px !important; */
|
||||
flex: 1 !important;
|
||||
}
|
||||
.option {
|
||||
color: rgb(70, 30, 10) !important;
|
||||
font-size: 1rem !important;
|
||||
/* font-weight: 600; */
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.filterClearButton-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
flex-wrap: wrap;
|
||||
/* min-height: 40px; */
|
||||
}
|
||||
|
||||
.filterClearButton {
|
||||
/* flex: 1; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filtering {
|
||||
/* min-width: 95%;
|
||||
min-height: 80%;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: rgb(255, 128, 82);
|
||||
border: 2px solid rgb(255, 128, 82); */
|
||||
border: 5px dotted rgb(250, 220, 180);
|
||||
background-color: #f9a24bcb;
|
||||
width: max-content;
|
||||
min-width: 150px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.clearAll {
|
||||
/* min-width: 95%;
|
||||
min-height: 80%;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
color: rgb(255, 128, 82);
|
||||
border: 2px solid rgb(255, 128, 82); */
|
||||
border: 5px dotted rgb(250, 220, 180);
|
||||
background-color: #fff;
|
||||
width: max-content;
|
||||
min-width: 150px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.filtering:hover {
|
||||
/* background-color: white;
|
||||
color: rgb(255, 128, 82); */
|
||||
background-color: rgb(255, 224, 100);
|
||||
border: 5px dotted #fff;
|
||||
/* color: white; */
|
||||
}
|
||||
.clearAll:hover {
|
||||
/* background-color: rgb(255, 128, 82); */
|
||||
/* color: white;
|
||||
border: 5px dotted #fff; */
|
||||
background-color: rgb(255, 224, 100);
|
||||
border: 5px dotted #fff;
|
||||
}
|
||||
|
||||
/*
|
||||
@media (min-width: 1280px) {
|
||||
.filterBar-wrapper {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1000px) {
|
||||
.filterBar-wrapper {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
.filterBar {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.filtering {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.clearAll {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
} */
|
||||
|
||||
/* @media (max-width: 959px) {
|
||||
.filterBar-wrapper {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.filterBar {
|
||||
margin: 10px;
|
||||
}
|
||||
.filtering {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.clearAll {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
} */
|
||||
143
givefortune/task3-quote/src/components/Footer.js
Normal file
143
givefortune/task3-quote/src/components/Footer.js
Normal file
@@ -0,0 +1,143 @@
|
||||
import React from "react";
|
||||
import { Box, Container, Grid, Typography } from "@mui/material";
|
||||
import FB from "../SocialMediaIcons/FB.svg";
|
||||
import IG from "../SocialMediaIcons/IG.svg";
|
||||
import X from "../SocialMediaIcons/X.svg";
|
||||
import outlinejojachomelogo from "../Outline_jojachome.png";
|
||||
import style from "./Footer.module.css";
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "350px",
|
||||
backgroundColor: "#F0FFCE",
|
||||
paddingTop: "1rem",
|
||||
paddingBottom: "1rem",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
sx={{ height: "100%" }}
|
||||
>
|
||||
<Grid item>
|
||||
<img
|
||||
src={outlinejojachomelogo}
|
||||
alt="JoJacHome Logo"
|
||||
style={{ width: "80px", height: "auto", marginTop: "20px" }}
|
||||
/>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item sx={{ textAlign: "center" }}>
|
||||
<Typography color="#A53F2B" variant="h5" fontWeight={700}>
|
||||
祖積家
|
||||
</Typography>
|
||||
<Typography color="#000000" sx={{ fontSize: "14px" }}>
|
||||
"俾小動物一個家！"
|
||||
</Typography>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item sx={{ marginBottom: "1rem" }}>
|
||||
<Grid
|
||||
container
|
||||
display="flex"
|
||||
spacing={4}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Grid item justifyContent="center" mt={3}>
|
||||
<a href="https://www.facebook.com/">
|
||||
<img
|
||||
src={FB}
|
||||
alt="Facebook Icon"
|
||||
style={{ width: "30px", height: "30px" }}
|
||||
className={style["social-icon"]}
|
||||
/>
|
||||
</a>
|
||||
</Grid>
|
||||
<Grid item justifyContent="center" mt={3}>
|
||||
<a href="https://www.instagram.com/">
|
||||
<img
|
||||
src={IG}
|
||||
alt="Instagram Icon"
|
||||
style={{ width: "30px", height: "30px" }}
|
||||
className={style["social-icon"]}
|
||||
/>
|
||||
</a>
|
||||
</Grid>
|
||||
<Grid item justifyContent="center" mt={3}>
|
||||
<a href="https://twitter.com/home/">
|
||||
<img
|
||||
src={X}
|
||||
alt="X Icon"
|
||||
style={{ width: "30px", height: "30px" }}
|
||||
className={style["social-icon"]}
|
||||
/>
|
||||
</a>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<br />
|
||||
<Grid item>
|
||||
<Typography
|
||||
color="#000000"
|
||||
variant="subtitle1"
|
||||
align="center"
|
||||
sx={{ fontSize: "14px", marginTop: "0px", textAlign: "center" }}
|
||||
>
|
||||
到底啦！Subscribe我哋Social Media, 了解最新&更多資訊！
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography
|
||||
color="#000000"
|
||||
variant="subtitle1"
|
||||
align="center"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
marginTop: "0px",
|
||||
textAlign: "center",
|
||||
"& a": {
|
||||
color: "#0077b6",
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
如有任何合作，歡迎電郵至：
|
||||
<a href="mailto:jojac.home@hkofficial.com">
|
||||
jojac.home@hkofficial.com
|
||||
</a>
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography
|
||||
color="#808080"
|
||||
variant="subtitle1"
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
marginBottom: "10px",
|
||||
marginTop: "0px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
© {new Date().getFullYear()} JoJackHome Love Unlimited
|
||||
Company 祖積家愛心無限公司 | All Rights Reserved
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
7
givefortune/task3-quote/src/components/Footer.module.css
Normal file
7
givefortune/task3-quote/src/components/Footer.module.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.social-icon {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.social-icon:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
37
givefortune/task3-quote/src/components/ImageGallery.js
Normal file
37
givefortune/task3-quote/src/components/ImageGallery.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import ImageGallery from "react-image-gallery";
|
||||
import "react-image-gallery/styles/css/image-gallery.css";
|
||||
import styles from "../Profile.module.css";
|
||||
|
||||
const ImageG = (props) => {
|
||||
const images = [
|
||||
{
|
||||
original: props.data[0].image,
|
||||
thumbnail: props.data[0].image,
|
||||
},
|
||||
{
|
||||
original: "../icons/HKSCDA_logo.jpeg",
|
||||
thumbnail: "../icons/HKSCDA_logo.jpeg",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className={styles["App"]}>
|
||||
<ImageGallery
|
||||
items={images}
|
||||
showPlayButton={false}
|
||||
slideOnThumbnailOver={true}
|
||||
autoPlay={true}
|
||||
slideInterval={8000}
|
||||
renderItem={(item) => (
|
||||
<img
|
||||
src={item.original}
|
||||
className={styles["slider"]}
|
||||
alt={item.originalAlt}
|
||||
title={item.originalTitle}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageG;
|
||||
162
givefortune/task3-quote/src/components/MapButtons.js
Normal file
162
givefortune/task3-quote/src/components/MapButtons.js
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from "react";
|
||||
import { IconButton, SvgIcon } from "@mui/material";
|
||||
import { Link } from "react-router-dom";
|
||||
import styles from "./MapButtons.module.css";
|
||||
|
||||
const MapButtons = () => {
|
||||
return (
|
||||
<div className={styles["content-wrapper"]}>
|
||||
<div className={styles["title-wrapper"]}>
|
||||
<img
|
||||
className={styles["detective-dog"]}
|
||||
src="./Imgs/detective_dog.svg"
|
||||
alt="deco"
|
||||
></img>
|
||||
<div className={styles["content"]}>
|
||||
<div className={styles["title"]}>有狗狗貓貓走失咗? 搵禾哋報料 ⬇️</div>
|
||||
<div className={styles["button-container"]}>
|
||||
<Link
|
||||
to={
|
||||
"https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing"
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<IconButton id={styles["found-pet"]}>
|
||||
<SvgIcon
|
||||
id={styles["icon"]}
|
||||
height="512pt"
|
||||
viewBox="0 0 512 512.00042"
|
||||
width="512pt"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m190.691406 375.855469v-7.390625c0-16.484375 6.679688-32.613282 18.328125-44.257813l24.347657-24.332031-21.242188-21.242188-24.332031 24.347657c-11.644531 11.648437-27.773438 18.328125-44.257813 18.328125h-7.390625c-33.59375 0-54.046875 20.316406-54.617187 20.941406l-64.910156 67.238281c-23.386719 24.070313-21.3125 61.855469 1.355468 84.539063 22.683594 22.667968 60.46875 24.742187 84.535156 1.355468l67.242188-64.910156c.625-.570312 20.941406-21.027344 20.941406-54.617187zm0 0"
|
||||
fill="#3dc6ff"
|
||||
/>
|
||||
<path
|
||||
d="m336.332031 351.332031c-96.863281 0-175.664062-78.804687-175.664062-175.664062 0-96.863281 78.800781-175.667969 175.664062-175.667969s175.667969 78.804688 175.667969 175.667969c0 96.859375-78.804688 175.664062-175.667969 175.664062zm0 0"
|
||||
fill="#8bddff"
|
||||
/>
|
||||
<path
|
||||
d="m336.332031 30c-80.320312 0-145.664062 65.347656-145.664062 145.667969 0 80.320312 65.34375 145.664062 145.664062 145.664062 80.320313 0 145.667969-65.34375 145.667969-145.664062 0-80.320313-65.347656-145.667969-145.667969-145.667969zm0 0"
|
||||
fill="#f3eee9"
|
||||
/>
|
||||
<g fill-rule="evenodd">
|
||||
<path
|
||||
d="m304.199219 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15s-15-6.726563-15-15c0-8.28125 6.71875-15 15-15zm0 0"
|
||||
fill="#db8a53"
|
||||
/>
|
||||
<path
|
||||
d="m256 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15s-15-6.726562-15-15c0-8.28125 6.71875-15 15-15zm0 0"
|
||||
fill="#db8a53"
|
||||
/>
|
||||
<path
|
||||
d="m416.664062 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15-8.277343 0-15-6.726562-15-15 0-8.28125 6.722657-15 15-15zm0 0"
|
||||
fill="#db8a53"
|
||||
/>
|
||||
<path
|
||||
d="m368.464844 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15-8.277344 0-15-6.726563-15-15 0-8.28125 6.722656-15 15-15zm0 0"
|
||||
fill="#db8a53"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="m352.398438 254.9375h-32.132813c-26.449219 0-47.132813-21.554688-47.132813-47.132812 0-34.851563 28.351563-63.203126 63.199219-63.203126 34.847657 0 63.199219 28.351563 63.199219 63.203126 0 25.597656-20.695312 47.132812-47.132812 47.132812zm0 0"
|
||||
fill="#db8a53"
|
||||
/>
|
||||
</SvgIcon>
|
||||
發現疑似走失寵物
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link
|
||||
to={
|
||||
"https://docs.google.com/forms/d/e/1FAIpQLScu0EI6U7zWtdvCJNvBkK5Fy1hF3S6RO7fNGEB0-b9pxUUhkg/viewform?usp=sharing"
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<IconButton id={styles["lost-pet"]}>
|
||||
<SvgIcon
|
||||
id={styles["icon"]}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<style type="text/css"></style>
|
||||
|
||||
<g>
|
||||
<path
|
||||
class="st0"
|
||||
d="M289.4,197.1h32.6v124h-32.6V197.1z"
|
||||
fill="#7A6D79"
|
||||
/>
|
||||
<path
|
||||
class="st1"
|
||||
d="M179.1,217V17.5c0-5.5,4.5-10,10-10h233.1c5.5,0,10,4.5,10,10V217c0,5.5-4.5,10-10,10H189.1
|
||||
C183.6,227,179.1,222.5,179.1,217z"
|
||||
fill="#EFEDEF"
|
||||
/>
|
||||
<g>
|
||||
<ellipse
|
||||
class="st2"
|
||||
cx="305.6"
|
||||
cy="66.7"
|
||||
rx="14.6"
|
||||
ry="14.6"
|
||||
/>
|
||||
<ellipse
|
||||
class="st2"
|
||||
cx="356.9"
|
||||
cy="90.5"
|
||||
rx="14.6"
|
||||
ry="14.6"
|
||||
/>
|
||||
<ellipse
|
||||
class="st2"
|
||||
cx="254.3"
|
||||
cy="90.5"
|
||||
rx="14.6"
|
||||
ry="14.6"
|
||||
/>
|
||||
<path
|
||||
class="st2"
|
||||
d="M338.9,135.2c-3-1.1-5.4-3.5-6.9-6.4c-4.8-9.7-14.8-16.3-26.3-16.3s-21.5,6.6-26.3,16.3
|
||||
c-1.4,2.9-3.8,5.2-6.9,6.4c-8.8,3.3-15.1,11.8-15.1,21.8c0,12.8,10.4,23.3,23.3,23.3h50.2c12.8,0,23.3-10.4,23.3-23.3
|
||||
C354,147,347.7,138.5,338.9,135.2L338.9,135.2z"
|
||||
fill="#E19974"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
class="st3"
|
||||
d="M350.2,342.1c2.4-2.6,3.8-6.1,3.8-10c0-3.8-1.4-7.3-3.8-10c-1.7-1.9-1.6-4.7,0.1-6.7c2.4-2.8,3.8-6.4,3.7-10.4
|
||||
c-0.3-8.1-7.3-14.4-15.4-14.4h-49.2v-30.4h-13.9c-12.1,0-22.9,7.8-26.7,19.3l-7.9,24.2c-1.8,5.6-5.2,10.5-9.7,14.3l-92.5,77.6
|
||||
l47.5,56.7l58-48.6c2.9-2.4,6.5-3.7,10.2-3.7h76.1c8.1,0,15.2-6.6,15.4-14.7c0-2.5-0.5-4.9-1.6-7c-1.2-2.4-0.3-5.3,2.1-6.7
|
||||
c4.6-2.6,7.7-7.4,7.7-13.1c0-3.8-1.4-7.3-3.8-10C348.5,346.8,348.5,344,350.2,342.1L350.2,342.1z"
|
||||
fill="#FFCEBF"
|
||||
/>
|
||||
<path
|
||||
class="st4"
|
||||
d="M79.9,431.7l76-63.8l61.1,72.8l-76,63.8L79.9,431.7z"
|
||||
fill="#5F99D7"
|
||||
/>
|
||||
<path
|
||||
class="st5"
|
||||
d="M166,353.5l66.9,79.7c3.6,4.3,3,10.6-1.2,14.2l-10.7,9c-4.3,3.6-10.6,3-14.2-1.2l-66.9-79.7
|
||||
c-3.6-4.3-3-10.6,1.2-14.2l10.7-9C156,348.7,162.4,349.2,166,353.5z"
|
||||
fill="#5DE1C4"
|
||||
/>
|
||||
</g>
|
||||
</SvgIcon>
|
||||
主子唔見咗
|
||||
</IconButton>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MapButtons;
|
||||
75
givefortune/task3-quote/src/components/MapButtons.module.css
Normal file
75
givefortune/task3-quote/src/components/MapButtons.module.css
Normal file
@@ -0,0 +1,75 @@
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* width: 100%; */
|
||||
margin: 30px 20px;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
.detective-dog {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: auto;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.1rem;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
#found-pet {
|
||||
border: 5px dotted rgb(250, 220, 180);
|
||||
background-color: #fff;
|
||||
width: fit-content;
|
||||
padding: 0 10px 0 0;
|
||||
border-radius: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
#found-pet:hover {
|
||||
background-color: rgb(255, 224, 100);
|
||||
border: 5px dotted #fff;
|
||||
}
|
||||
|
||||
#icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#lost-pet {
|
||||
border: 5px dotted rgb(250, 220, 180);
|
||||
background-color: #f9a24bcb;
|
||||
width: fit-content;
|
||||
padding: 0 10px 0 0;
|
||||
border-radius: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
|
||||
#lost-pet:hover {
|
||||
background-color: rgb(255, 224, 100);
|
||||
border: 5px dotted #fff;
|
||||
}
|
||||
135
givefortune/task3-quote/src/components/MapDisplay.js
Normal file
135
givefortune/task3-quote/src/components/MapDisplay.js
Normal file
@@ -0,0 +1,135 @@
|
||||
import React from "react";
|
||||
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import iconUrl from "../dog_1049342.svg";
|
||||
import shadowUrl from "leaflet/dist/images/marker-shadow.png";
|
||||
import styles from "./MapDisplay.module.css";
|
||||
|
||||
const customIcon = L.icon({
|
||||
iconUrl,
|
||||
shadowUrl,
|
||||
iconSize: [45, 45],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [0, -41],
|
||||
});
|
||||
|
||||
function MapDisplay() {
|
||||
const markers = [
|
||||
{
|
||||
position: [22.37368405, 114.11026608000796],
|
||||
address: "Superluck Industrial Centre Phase 2",
|
||||
org: "香港拯救貓狗協會HKSCDA",
|
||||
name: "串串",
|
||||
species: "英短",
|
||||
gender: "男仔",
|
||||
age: "4歲",
|
||||
phone: 21800000,
|
||||
characteristics: "全身灰白色，後背近尾巴位置有心形虎斑紋",
|
||||
lost_location: "8月30日 晚上10:30在大坪走失, $2000 REWARD薄酬",
|
||||
src: "./Imgs/case01.jpg",
|
||||
},
|
||||
{
|
||||
position: [22.36330235264489, 114.13267672061922],
|
||||
address: "Millennium Trade Centre",
|
||||
org: "Generation HK",
|
||||
name: "FEWD-9",
|
||||
species: "哈士奇",
|
||||
gender: "男仔",
|
||||
age: "3歲",
|
||||
phone: 21700000,
|
||||
characteristics: " 無頸帶, 長尾, 四隻腳都係白襪",
|
||||
lost_location: "係西環邨西苑台走失",
|
||||
src: "https://images.rawpixel.com/image_social_landscape/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdXB3azYxNzI4NjQyLXdpa2ltZWRpYS1pbWFnZS1rb3dyMjB5cy5qcGc.jpg",
|
||||
},
|
||||
{
|
||||
position: [22.363550400409355, 114.13270354270936],
|
||||
address: "Millennium Trade Centre",
|
||||
org: "Generation HK",
|
||||
name: "Jo2",
|
||||
species: "標準貴賓犬",
|
||||
gender: "男仔",
|
||||
age: "4歲",
|
||||
phone: 21800000,
|
||||
characteristics: "無頸帶, 長尾, 四隻腳都係白襪, 識得講人話",
|
||||
lost_location: "係西環邨西苑台走失",
|
||||
src: "./Imgs/jo2.png",
|
||||
},
|
||||
{
|
||||
position: [22.363371806063473, 114.13241922855379],
|
||||
address: "Millennium Trade Centre",
|
||||
org: "Generation HK",
|
||||
name: "Jack",
|
||||
species: "柴犬",
|
||||
gender: "男仔",
|
||||
age: "4歲",
|
||||
phone: 21800000,
|
||||
characteristics: "鍾意食炸雞同薯條, 腰痛, 常在海邊出没",
|
||||
lost_location: "1月10日 1:30pm 在大浪灣走失, $2000 薄酬",
|
||||
src: "./Imgs/jack.png",
|
||||
},
|
||||
];
|
||||
function ImgaePopUp({
|
||||
src,
|
||||
name,
|
||||
phone,
|
||||
age,
|
||||
characteristics,
|
||||
lost_location,
|
||||
species,
|
||||
}) {
|
||||
return (
|
||||
<div className={styles["content-area"]}>
|
||||
<img className={styles["image"]} src={src} alt="dog" />
|
||||
<div className={styles["basic-info"]}>
|
||||
<div className={styles["name"]}>{name}</div>
|
||||
<div className={styles["age-and-species"]}>
|
||||
{age}, {species}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["details-info"]}>
|
||||
<div className={styles["characteristics"]}>
|
||||
<div className={styles["sub-title"]}>特徵：</div>
|
||||
{characteristics}
|
||||
</div>
|
||||
<div className={styles["lost_location"]}>
|
||||
<div className={styles["sub-title"]}>走失資訊：</div>
|
||||
{lost_location}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["contact-owner"]}>{`聯絡失主：${phone}`}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MapContainer
|
||||
className={styles["map"]}
|
||||
center={[22.37071382920351, 114.121470451355]}
|
||||
zoom={15}
|
||||
scrollWheelZoom={false}
|
||||
>
|
||||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
{markers.map((marker, index) => (
|
||||
<Marker key={index} position={marker.position} icon={customIcon}>
|
||||
<Popup>
|
||||
<ImgaePopUp
|
||||
src={marker.src}
|
||||
name={marker.name}
|
||||
phone={marker.phone}
|
||||
characteristics={marker.characteristics}
|
||||
age={marker.age}
|
||||
lost_location={marker.lost_location}
|
||||
species={marker.species}
|
||||
/>
|
||||
</Popup>
|
||||
</Marker>
|
||||
))}
|
||||
</MapContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MapDisplay;
|
||||
62
givefortune/task3-quote/src/components/MapDisplay.module.css
Normal file
62
givefortune/task3-quote/src/components/MapDisplay.module.css
Normal file
@@ -0,0 +1,62 @@
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.image {
|
||||
/* max-width: 100%; */
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
object-fit: cover;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.age-and-species {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: rgb(155, 60, 25);
|
||||
}
|
||||
|
||||
.details-info {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
/* padding: 10px; */
|
||||
}
|
||||
|
||||
.characteristics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.sub-title {
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
|
||||
.contact-owner {
|
||||
font-size: 1rem;
|
||||
color: rgb(155, 60, 25);
|
||||
font-weight: 600;
|
||||
}
|
||||
74
givefortune/task3-quote/src/components/NGOLogo.js
Normal file
74
givefortune/task3-quote/src/components/NGOLogo.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from "react";
|
||||
import styles from "./NGOLogo.module.css";
|
||||
|
||||
const NGOLogo = () => {
|
||||
return (
|
||||
<div className={styles["LOGO-heading"]}>
|
||||
<h4 id={styles["LOGO-subheading"]}>合作伙伴:</h4>
|
||||
<span id={styles["subheading-text"]}>
|
||||
好歡迎更多獨立或大型機構搵我哋合作㗎！目標係成為全港最大既領養資訊平台。
|
||||
<br />
|
||||
絕不收取中介費！！
|
||||
</span>
|
||||
<div className={styles["LOGO-wrapper"]}>
|
||||
<a
|
||||
href="https://hkscda.com/adoption/instructions"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="./icons/HKSCDA_logo.jpeg"
|
||||
className={styles["logo-one"]}
|
||||
alt="HKSCDA"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.spca.org.hk/zh-hant/what-we-do/adoption/adoption-process/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="./icons/HKSPCA_logo.jpeg"
|
||||
className={styles["logo-one"]}
|
||||
alt="HKSPCA"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.hk-aac.org.hk/image/data/pdf/dogs.pdf"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="./icons/HKAAC_logo.jpeg"
|
||||
className={styles["logo-one"]}
|
||||
alt="HKAAC"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://drive.google.com/file/d/18i9IPSWbWwd1Jypv3uaN4T5wnualOCRB/view"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="./icons/LAP_logo.jpeg"
|
||||
className={styles["logo-one"]}
|
||||
alt="LAP"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.saa.org.hk/zh/service.php?id=1"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="./icons/SAA_logo.jpeg"
|
||||
className={styles["logo-one"]}
|
||||
alt="SAA"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NGOLogo;
|
||||
48
givefortune/task3-quote/src/components/NGOLogo.module.css
Normal file
48
givefortune/task3-quote/src/components/NGOLogo.module.css
Normal file
@@ -0,0 +1,48 @@
|
||||
#LOGO-subheading {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#subheading-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.LOGO-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.logo-one {
|
||||
height: 80px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1279px) {
|
||||
.LOGO-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logo-one {
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.LOGO-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logo-one {
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
37
givefortune/task3-quote/src/components/Shortcut.js
Normal file
37
givefortune/task3-quote/src/components/Shortcut.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import HKSCDA_info from "../HKSCDA_animal_info.json";
|
||||
import styles from "./Shortcut.module.css";
|
||||
|
||||
function Shortcut(props) {
|
||||
return (
|
||||
<div className={styles["count-container"]}>
|
||||
<div className={styles["title"]}>現時本站收錄到嘅待領養主子數目：</div>
|
||||
<div className={styles["pet-wrapper"]}>
|
||||
<div className={styles["dog"]}>
|
||||
<img
|
||||
src="./icons/dog_icon.png"
|
||||
alt="dog icon"
|
||||
className={styles["dog-icon"]}
|
||||
></img>
|
||||
<div className={styles["num-info"]}>
|
||||
待領養狗狗
|
||||
<div className={styles["num"]}>{HKSCDA_info.HKSCDA_dog.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["cat"]}>
|
||||
<img
|
||||
src="./icons/cat_icon.png"
|
||||
alt="cat icon"
|
||||
className={styles["cat-icon"]}
|
||||
></img>
|
||||
<div className={styles["num-info"]}>
|
||||
待領養貓貓
|
||||
<div className={styles["num"]}>{HKSCDA_info.HKSCDA_cat.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Shortcut;
|
||||
53
givefortune/task3-quote/src/components/Shortcut.module.css
Normal file
53
givefortune/task3-quote/src/components/Shortcut.module.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.count-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 30px 0px 30px;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.4rem;
|
||||
padding: 10px 0;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
.pet-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 50px;
|
||||
padding: 30px;
|
||||
}
|
||||
.dog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
.dog-icon {
|
||||
max-width: 100px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cat-icon {
|
||||
max-width: 100px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.num-info {
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.num {
|
||||
font-size: 2rem;
|
||||
color: rgb(155, 60, 25);
|
||||
}
|
||||
.cat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
187
givefortune/task3-quote/src/components/StarPet.css
Normal file
187
givefortune/task3-quote/src/components/StarPet.css
Normal file
@@ -0,0 +1,187 @@
|
||||
.star-wrapper {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
background-image: url("../../public/StarPetImgs/star-bg.png");
|
||||
object-fit: cover;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.pet-star {
|
||||
width: 100vw;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.pet-of-the-day {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.star-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.star-photo {
|
||||
max-width: 40%;
|
||||
max-height: 80%;
|
||||
object-fit: cover;
|
||||
border-radius: 30px;
|
||||
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
.info-wrapper {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.text-background {
|
||||
width: 60vw;
|
||||
max-width: 700px;
|
||||
min-width: 580px;
|
||||
position: relative;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
max-width: 380px;
|
||||
min-width: 250px;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
.text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.4rem;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.call-to-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 30px 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.frame.upper-right {
|
||||
height: 40%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.frame.bottom-left {
|
||||
height: 80%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.frame.bottom {
|
||||
display: none;
|
||||
}
|
||||
#about-me {
|
||||
border: 5px dotted rgb(250, 220, 180);
|
||||
background-color: #f9a24bcb;
|
||||
width: fit-content;
|
||||
padding: 0 10px 0 0;
|
||||
border-radius: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
#about-me:hover {
|
||||
background-color: rgb(255, 224, 100);
|
||||
border: 5px dotted #fff;
|
||||
}
|
||||
#about-me-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px 5px 10px 10px;
|
||||
}
|
||||
|
||||
#more-pet {
|
||||
border: 5px dotted rgb(250, 220, 180);
|
||||
background-color: #ffffff;
|
||||
width: fit-content;
|
||||
padding: 0 10px 0 0;
|
||||
border-radius: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: rgb(70, 30, 10);
|
||||
}
|
||||
#more-pet:hover {
|
||||
background-color: rgb(255, 224, 100);
|
||||
border: 5px dotted #fff;
|
||||
}
|
||||
#pets-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
@media only screen and (max-width: 1020px) {
|
||||
.star-container {
|
||||
height: fit-content;
|
||||
padding: 40px 0 40px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.star-photo {
|
||||
max-height: 50vh;
|
||||
min-height: 40vh;
|
||||
min-width: 40vw;
|
||||
}
|
||||
|
||||
.pet-star {
|
||||
width: 100vw;
|
||||
height: fit-content;
|
||||
}
|
||||
.frame.upper-right {
|
||||
height: 30%;
|
||||
}
|
||||
.frame.bottom-left {
|
||||
display: none;
|
||||
}
|
||||
.frame.bottom {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
}
|
||||
.info-wrapper {
|
||||
margin: -8% 0 7% 0;
|
||||
}
|
||||
@media only screen and (max-width: 420px) {
|
||||
.text {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.68rem;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.info {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.star-container {
|
||||
height: fit-content;
|
||||
padding: 40px 0 0 0;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.frame.upper-right {
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 375px) {
|
||||
.text-background {
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.info-wrapper {
|
||||
margin: -8% 0 3% 0;
|
||||
}
|
||||
.frame.upper-right {
|
||||
height: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
408
givefortune/task3-quote/src/components/StarPet.js
Normal file
408
givefortune/task3-quote/src/components/StarPet.js
Normal file
@@ -0,0 +1,408 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "./StarPet.css";
|
||||
import petsData from "../HKSCDA_animal_info.json";
|
||||
import { IconButton, SvgIcon } from "@mui/material";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function StarPet() {
|
||||
// State to store the selected pet
|
||||
const [selectedPet, setSelectedPet] = useState(null);
|
||||
// console.log(petsData);
|
||||
const catData = petsData.HKSCDA_cat;
|
||||
const dogData = petsData.HKSCDA_dog;
|
||||
const species = [...catData, ...dogData];
|
||||
|
||||
// Function to select a random species from the JSON data
|
||||
const getRandomPet = () => {
|
||||
const optionRandomIndex = Math.floor(Math.random() * species.length);
|
||||
return species[optionRandomIndex];
|
||||
};
|
||||
|
||||
const petStar = () => {
|
||||
const randomPet = getRandomPet();
|
||||
setSelectedPet(randomPet);
|
||||
};
|
||||
// Use useEffect to update the pet data
|
||||
useEffect(() => {
|
||||
petStar();
|
||||
}, []); // Empty dependency array ensures the effect runs only once on mount
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="star-wrapper">
|
||||
{selectedPet && (
|
||||
<div className="pet-star">
|
||||
<div className="star-container">
|
||||
<img
|
||||
className="star-photo"
|
||||
src={selectedPet.image}
|
||||
alt={selectedPet.name}
|
||||
></img>
|
||||
<div className="info-wrapper">
|
||||
<img
|
||||
className="text-background"
|
||||
src="./StarPetImgs/star-text-bg.png"
|
||||
alt="upper left frame"
|
||||
></img>
|
||||
<div className="info">
|
||||
<div className="text">Hello, 我叫{selectedPet.name}呀！</div>
|
||||
<div className="text">
|
||||
我同其他朋友都等緊一個家，快啲帶我哋返去啦～
|
||||
</div>
|
||||
<div className="call-to-action">
|
||||
<Link
|
||||
key={selectedPet.name}
|
||||
to={{
|
||||
pathname: `/Category_Page/${selectedPet.name}`,
|
||||
}}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<IconButton id="about-me">
|
||||
<SvgIcon
|
||||
id="about-me-icon"
|
||||
enable-background="new 0 0 512 512"
|
||||
height="512"
|
||||
viewBox="0 0 512 512"
|
||||
width="512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="m442.182 431.58v-335.645c0-38.192-26.633-70.143-62.334-78.353l-25.588 16.379-224.105.345v397.274c0 44.415 8.964 80.42 108.595 80.42h123.012c44.414 0 80.42-36.005 80.42-80.42z"
|
||||
fill="#b0ebd8"
|
||||
/>
|
||||
<path
|
||||
d="m379.848 17.583c-5.816-1.337-11.864-2.068-18.087-2.068-58.694 0-152.771 0-211.523 0-44.415 0-80.42 36.005-80.42 80.42v335.645c0 44.415 36.005 80.42 80.42 80.42h85.333 3.178c-44.415 0-80.42-36.005-80.42-80.42v-330.581c8.083 4.824 17.517 7.607 27.594 7.607h140.154c29.8 0 54.044-24.244 54.044-54.044v-31.548c0-1.833-.094-3.645-.273-5.431z"
|
||||
fill="#5fd9b3"
|
||||
/>
|
||||
<path
|
||||
d="m379.075 65.138-27.226 17.092h-202.386v353.487c0 16.425 5.689 29.737 61.802 29.737h154.634c16.425 0 29.737-13.312 29.737-29.737v-343.919c0-11.692-6.748-21.802-16.561-26.66z"
|
||||
fill="#efedff"
|
||||
/>
|
||||
<path
|
||||
d="m365.899 62.061c-.08 0-89.828 0-154.634 0h-65.164c-16.423 0-29.737 13.314-29.737 29.737v343.919c0 16.423 13.314 29.737 29.737 29.737h65.164c-16.425 0-29.737-13.312-29.737-29.737v-288.926c0-21.089 17.096-38.185 38.185-38.185h106.365c26.181 0 48.067-18.715 52.999-43.468-3.974-1.967-8.445-3.077-13.178-3.077z"
|
||||
fill="#d4d4ff"
|
||||
/>
|
||||
<path
|
||||
d="m349.091 54.562v-31.548c0-12.668-10.269-23.014-23.014-23.014h-101.366c-39.564 0-41.632 10.322-41.632 23.014v31.547c0 12.668 9.05 23.014 41.632 23.014h101.366c12.723.001 23.014-10.322 23.014-23.013z"
|
||||
fill="#726c88"
|
||||
/>
|
||||
<path
|
||||
d="m201.697 54.562v-31.548c0-12.692 10.291-23.014 23.014-23.014h-38.788c-12.723 0-23.014 10.322-23.014 23.014v31.547c0 12.668 10.269 23.014 23.014 23.014h38.788c-12.745.001-23.014-10.345-23.014-23.013z"
|
||||
fill="#656178"
|
||||
/>
|
||||
<path
|
||||
d="m356.848 160.323c0-8.564-6.951-15.515-15.515-15.515h-142.739c-23.531 0-28.962 6.965-28.962 15.515 0 8.564 7.24 15.515 28.962 15.515h142.739c8.565 0 15.515-6.965 15.515-15.515z"
|
||||
fill="#a3defe"
|
||||
/>
|
||||
<path
|
||||
d="m183.079 160.323c0-8.55 6.951-15.515 15.515-15.515h-27.927c-8.565 0-15.515 6.965-15.515 15.515 0 8.564 6.951 15.515 15.515 15.515h27.927c-8.564 0-15.515-6.95-15.515-15.515z"
|
||||
fill="#8cd6fe"
|
||||
/>
|
||||
<path
|
||||
d="m350.332 297.105c4.766-8.586 5.08-18.181 1.564-25.139-9.122-9.122-22.67-1.175-28.216 8.817-4.766 8.594-7.425 21.122 2.364 30.912 8.851 1.003 18.742-4.591 24.288-14.59z"
|
||||
fill="#d0876f"
|
||||
/>
|
||||
<path
|
||||
d="m327.608 286.546c5.546-9.991 15.437-15.583 24.288-14.579-1.596-3.159-3.981-5.774-7.098-7.505-9.992-5.544-23.707.083-30.637 12.567-8.57 15.453-2.487 33.037 11.883 34.666-3.516-6.959-3.203-16.556 1.564-25.149z"
|
||||
fill="#c9735a"
|
||||
/>
|
||||
<path
|
||||
d="m312.858 356.538c-7.023-3.32-12.329-9.319-15.194-16.549-3.946-9.94-11.346-18.134-20.717-23.104-19.136-3.21-34.727 8.312-38.674 18.253-2.865 7.23-8.171 13.229-15.195 16.549-12.247 5.803-20.718 18.277-20.718 32.727 0 5.026 5.026 22.74 21.512 17.869 19.085-18.282 49.833-17.019 67.337 3.222 14.128 16.337 41.43 6.741 42.336-14.688.601-15.043-7.928-28.244-20.687-34.279z"
|
||||
fill="#d0876f"
|
||||
/>
|
||||
<path
|
||||
d="m241.034 356.538c7.023-3.32 12.329-9.319 15.195-16.549 3.946-9.94 11.346-18.134 20.717-23.104-23.249-12.328-52.656-1.966-62.609 23.104-2.865 7.23-8.171 13.229-15.194 16.549-12.247 5.803-20.718 18.277-20.718 32.727 0 23.158 28.196 32.626 42.367 16.239.985-1.139 2.019-2.204 3.081-3.222-2.225-3.612-3.556-7.991-3.556-13.018-.001-14.449 8.471-26.923 20.717-32.726z"
|
||||
fill="#c9735a"
|
||||
/>
|
||||
<path
|
||||
d="m197.839 277.028c-5.311-9.568-14.606-15.1-23.158-14.671-10.221 2.876-10.639 22.096-5.997 30.459 5.311 9.576 20.17 16.808 30.967 8.8 3.229-6.909 2.83-16.218-1.812-24.588z"
|
||||
fill="#d0876f"
|
||||
/>
|
||||
<path
|
||||
d="m176.493 286.934c-4.642-8.363-5.042-17.669-1.812-24.577-15.203.763-21.777 18.96-13.014 34.748 9.666 17.428 30.805 19.865 37.983 4.511-8.55.428-17.846-5.107-23.157-14.682z"
|
||||
fill="#c9735a"
|
||||
/>
|
||||
<path
|
||||
d="m276.687 254.924c0-10.27-4.785-19.139-11.723-23.313-16.894 0-20.687 13.043-20.687 23.313s5.861 23.313 20.687 23.313c6.938-4.174 11.723-13.043 11.723-23.313z"
|
||||
fill="#d0876f"
|
||||
/>
|
||||
<path
|
||||
d="m253.242 254.924c0-10.27 4.785-19.139 11.723-23.313-2.712-1.632-5.752-2.546-8.964-2.546-11.429 0-20.687 11.574-20.687 25.859 0 19.211 16.079 31.479 29.651 23.313-6.938-4.174-11.723-13.043-11.723-23.313z"
|
||||
fill="#c9735a"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</SvgIcon>
|
||||
起我底
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link
|
||||
to={{
|
||||
pathname: `/Category_Page`,
|
||||
}}
|
||||
>
|
||||
<IconButton href="www.google.com" id="more-pet">
|
||||
<SvgIcon
|
||||
id="pets-icon"
|
||||
enable-background="new 0 0 512 512"
|
||||
height="512"
|
||||
viewBox="0 0 512 512"
|
||||
width="512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m7.611 143.299v-58.886c0-8.864 7.186-16.05 16.05-16.05 5.546 0 10.7 2.864 13.629 7.573l41.896 67.363-35.788 12.059z"
|
||||
fill="#918291"
|
||||
/>
|
||||
<path
|
||||
d="m37.29 75.936c-2.929-4.71-8.083-7.573-13.629-7.573-8.864 0-16.05 7.186-16.05 16.05v2.346c.068-.001.135-.01.203-.01 5.546 0 10.7 2.864 13.629 7.573l30.608 48.977 11.903 5.133 15.232-5.133z"
|
||||
fill="#7f737f"
|
||||
/>
|
||||
<path
|
||||
d="m245.783 143.299 4.973-27.374-4.973-31.513c0-8.864-7.186-16.05-16.05-16.05-5.546 0-10.7 2.864-13.629 7.573l-41.896 67.363 35.788 8.916z"
|
||||
fill="#918291"
|
||||
/>
|
||||
<path
|
||||
d="m229.733 68.363c-5.546 0-10.7 2.863-13.629 7.573l-3.271 5.259c3.552 2.944 5.815 7.388 5.815 12.362v49.742l6.533 5.133 20.602-5.133 4.973-27.374-4.973-31.513c0-8.863-7.186-16.049-16.05-16.049z"
|
||||
fill="#7f737f"
|
||||
/>
|
||||
<path
|
||||
d="m126.697 346.882c-65.769 0-119.086-10.887-119.086-76.656v-126.927h238.171l16.024 55.492-16.024 46.656v24.778c.001 65.769-53.316 76.657-119.085 76.657z"
|
||||
fill="#e2dee2"
|
||||
/>
|
||||
<path
|
||||
d="m218.648 143.299v126.926c0 61.18-46.139 74.867-105.518 76.48 4.453.121 8.979.176 13.567.176 65.769 0 119.086-10.887 119.086-76.656v-24.778l16.024-46.656-16.024-55.492z"
|
||||
fill="#cbc4cc"
|
||||
/>
|
||||
<path
|
||||
d="m95.617 346.882h62.16c33.987 0 61.539 27.552 61.539 61.539v58.633c0 7.505-6.084 13.589-13.589 13.589l-36.709-.004-42.321-13.248-42.322 13.251h-36.708c-7.505 0-13.589-6.084-13.589-13.589v-58.633c0-33.986 27.552-61.538 61.539-61.538z"
|
||||
fill="#e2dee2"
|
||||
/>
|
||||
<path
|
||||
d="m157.777 346.882h-27.135c33.987 0 61.539 27.552 61.539 61.539v58.633c0 7.505-6.084 13.589-13.589 13.589h27.135c7.505 0 13.589-6.084 13.589-13.589v-58.633c.001-33.987-27.552-61.539-61.539-61.539z"
|
||||
fill="#cbc4cc"
|
||||
/>
|
||||
<path
|
||||
d="m169.019 480.643h-42.322l-7.763-35.93 7.763-27.741c0-4.518 3.663-8.181 8.181-8.181h25.96c4.518 0 8.181 3.663 8.181 8.181z"
|
||||
fill="#918291"
|
||||
/>
|
||||
<path
|
||||
d="m169.018 416.977v63.663h-17.425v-63.663c0-4.526-3.664-8.19-8.18-8.19h17.425c4.516 0 8.18 3.664 8.18 8.19z"
|
||||
fill="#7f737f"
|
||||
/>
|
||||
<path
|
||||
d="m126.697 480.643h-42.322v-63.671c0-4.518 3.663-8.181 8.181-8.181h25.96c4.518 0 8.181 3.663 8.181 8.181z"
|
||||
fill="#918291"
|
||||
/>
|
||||
<path
|
||||
d="m126.696 416.977v63.663h-17.425v-63.663c0-4.526-3.664-8.19-8.18-8.19h17.425c4.516 0 8.18 3.664 8.18 8.19z"
|
||||
fill="#7f737f"
|
||||
/>
|
||||
<path
|
||||
d="m512 103.576v141.868c0 73.517-59.593 85.685-133.11 85.685s-133.11-12.168-133.11-85.685v-141.868z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m484.865 103.575v141.873c0 68.934-52.4 83.928-119.541 85.529 4.461.106 8.987.154 13.567.154 73.514 0 133.109-12.169 133.109-85.683v-141.873z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m344.151 331.13h69.48c37.989 0 68.786 30.796 68.786 68.786v67.138c0 7.505-6.084 13.589-13.589 13.589h-179.873c-7.505 0-13.589-6.084-13.589-13.589v-67.138c-.001-37.989 30.796-68.786 68.785-68.786z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m413.631 331.13h-27.135c37.989 0 68.786 30.797 68.786 68.786v67.138c0 7.505-6.084 13.589-13.589 13.589h27.135c7.505 0 13.589-6.084 13.589-13.589v-67.138c0-37.989-30.796-68.786-68.786-68.786z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m367.546 480.643h-41.24v-72.278c0-4.438 3.597-8.035 8.035-8.035h25.17c4.438 0 8.035 3.597 8.035 8.035z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m367.544 408.361v72.279h-19.049v-72.279c0-4.435-3.593-8.028-8.038-8.028h19.049c4.445 0 8.038 3.593 8.038 8.028z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m359.54 253.62h38.703v26.157c0 10.688-8.664 19.352-19.352 19.352-10.688 0-19.352-8.664-19.352-19.352v-26.157z"
|
||||
fill="#e759aa"
|
||||
/>
|
||||
<path
|
||||
d="m378.891 253.62v26.157c0 7.159-3.897 13.394-9.676 16.741 2.849 1.65 6.147 2.61 9.676 2.61 10.688 0 19.351-8.664 19.351-19.351v-26.157z"
|
||||
fill="#e03d9c"
|
||||
/>
|
||||
<path
|
||||
d="m337.699 103.575h-91.916v-38.475c0-18.636 15.107-33.744 33.744-33.744h24.429c18.636 0 33.744 15.107 33.744 33.744v38.475z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m303.955 31.357h-24.429c-.454 0-.904.017-1.353.034 18.008.711 32.391 15.527 32.391 33.709v38.474h27.135v-38.474c-.001-18.636-15.108-33.743-33.744-33.743z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m297.262 143.299c-13.968 0-25.292-11.324-25.292-25.292v-39.22c0-4.182 3.39-7.572 7.572-7.572 4.182 0 7.572 3.39 7.572 7.572v39.22h35.44c0 13.968-11.324 25.292-25.292 25.292z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m312.406 143.299c-13.968 0-25.292-11.324-25.292-25.292v-46.792h50.584v46.792c.001 13.968-11.323 25.292-25.292 25.292z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m310.564 71.215v46.792c0 8.974-4.678 16.851-11.725 21.34 3.921 2.498 8.573 3.952 13.567 3.952 13.968 0 25.292-11.324 25.292-25.292v-46.792z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m420.084 103.575h91.916v-38.475c0-18.636-15.107-33.744-33.744-33.744h-24.429c-18.636 0-33.744 15.107-33.744 33.744v38.475z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m478.256 31.357h-24.429c-.454 0-.903.017-1.353.034 18.008.711 32.39 15.527 32.39 33.709v38.474h27.136v-38.474c0-18.636-15.108-33.743-33.744-33.743z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m457.106 103.576v14.431c0 13.965-11.326 25.291-25.301 25.291-13.965 0-25.29-11.326-25.29-25.291v-14.431z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m445.376 143.299c13.968 0 25.292-11.324 25.292-25.292v-46.792h-50.584v46.792c0 13.968 11.324 25.292 25.292 25.292z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m456.814 71.215c-7.334 0-13.28 5.946-13.28 13.28v33.512c0 8.974-4.678 16.851-11.725 21.34 3.921 2.498 8.573 3.952 13.567 3.952 13.968 0 25.292-11.324 25.292-25.292v-32.938c0-7.651-6.202-13.854-13.854-13.854z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="m83.195 256.292c-4.204 0-7.611-3.408-7.611-7.611v-13.71c0-4.204 3.407-7.611 7.611-7.611s7.611 3.408 7.611 7.611v13.71c.001 4.203-3.407 7.611-7.611 7.611z"
|
||||
fill="#918291"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m170.198 256.292c-4.204 0-7.611-3.408-7.611-7.611v-13.71c0-4.204 3.407-7.611 7.611-7.611s7.611 3.408 7.611 7.611v13.71c.001 4.203-3.407 7.611-7.611 7.611z"
|
||||
fill="#918291"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
d="m156.92 286.62c-2.093-3.216-6.252-4.374-9.706-2.7l-.249.121c-1.157.706-6.702 3.639-12.657-.619v-27.129h2.17c4.204 0 7.611-3.408 7.611-7.611 0-4.204-3.407-7.611-7.611-7.611h-19.563c-4.204 0-7.611 3.408-7.611 7.611 0 4.204 3.407 7.611 7.611 7.611h2.169v27.132c-5.955 4.259-11.501 1.322-12.658.616l-.287-.154c-3.471-1.855-7.784-.746-9.93 2.552-2.485 3.819-1.08 8.986 3.032 10.95 5.222 2.495 9.057 3.499 13.288 3.499 4.467 0 9.373-1.131 14.165-4.221 4.794 3.092 9.701 4.221 14.17 4.221 4.098 0 7.826-.943 12.762-3.149 4.278-1.912 5.85-7.192 3.294-11.119z"
|
||||
fill="#918291"
|
||||
/>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="m34.136 255.808h-26.525c-4.204 0-7.611-3.408-7.611-7.612s3.407-7.611 7.611-7.611h26.524c4.204 0 7.611 3.408 7.611 7.611.001 4.204-3.406 7.612-7.61 7.612z"
|
||||
fill="#eaf9fa"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m10.258 300.894c-2.771 0-5.443-1.518-6.788-4.157-1.909-3.745-.419-8.329 3.326-10.238l29.061-14.812c3.744-1.908 8.329-.42 10.238 3.325s.419 8.329-3.326 10.238l-29.061 14.812c-1.106.565-2.288.832-3.45.832z"
|
||||
fill="#eaf9fa"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m34.134 335.861c-1.847 0-3.699-.668-5.163-2.021-3.088-2.852-3.278-7.668-.426-10.756l18.474-19.998c2.85-3.088 7.667-3.278 10.755-.426 3.088 2.853 3.278 7.668.426 10.756l-18.474 19.998c-1.499 1.624-3.543 2.447-5.592 2.447z"
|
||||
fill="#eaf9fa"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="m245.783 255.808h-26.524c-4.204 0-7.611-3.408-7.611-7.611 0-4.204 3.407-7.611 7.611-7.611h26.524c4.204 0 7.611 3.408 7.611 7.611s-3.407 7.611-7.611 7.611z"
|
||||
fill="#eaf9fa"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m243.137 300.894c-1.164 0-2.343-.267-3.45-.832l-29.062-14.812c-3.745-1.909-5.235-6.493-3.326-10.238 1.91-3.746 6.496-5.233 10.238-3.325l29.062 14.812c3.745 1.909 5.235 6.493 3.326 10.238-1.345 2.639-4.017 4.157-6.788 4.157z"
|
||||
fill="#eaf9fa"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m219.261 335.861c-2.05 0-4.092-.823-5.593-2.446l-18.475-19.998c-2.852-3.088-2.662-7.903.425-10.756 3.088-2.853 7.903-2.662 10.756.426l18.475 19.998c2.852 3.088 2.662 7.903-.425 10.756-1.464 1.351-3.316 2.02-5.163 2.02z"
|
||||
fill="#eaf9fa"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="m337.699 231.615c-4.204 0-7.611-3.408-7.611-7.611v-12.982c0-4.204 3.407-7.611 7.611-7.611s7.612 3.408 7.612 7.611v12.982c-.001 4.203-3.408 7.611-7.612 7.611z"
|
||||
fill="#918291"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m420.084 231.615c-4.204 0-7.611-3.408-7.611-7.611v-12.982c0-4.204 3.407-7.611 7.611-7.611s7.612 3.408 7.612 7.611v12.982c0 4.203-3.408 7.611-7.612 7.611z"
|
||||
fill="#918291"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
d="m420.084 246.008h-33.582v-22.004h-15.223v22.004h-33.581c-4.204 0-7.611 3.408-7.611 7.611 0 4.204 3.407 7.611 7.611 7.611h82.386c4.204 0 7.612-3.408 7.612-7.611s-3.408-7.611-7.612-7.611z"
|
||||
fill="#918291"
|
||||
/>
|
||||
<path
|
||||
d="m326.306 480.643h-15.223v-72.701c0-4.204 3.408-7.611 7.611-7.611 4.204 0 7.612 3.408 7.612 7.611z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m399.291 480.643h-15.223v-72.701c0-4.204 3.408-7.611 7.611-7.611 4.204 0 7.611 3.408 7.611 7.611v72.701z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<path
|
||||
d="m440.531 480.643h-41.24v-72.278c0-4.438 3.597-8.035 8.035-8.035h25.17c4.438 0 8.035 3.597 8.035 8.035z"
|
||||
fill="#e19974"
|
||||
/>
|
||||
<path
|
||||
d="m440.529 408.361v72.279h-19.049v-72.279c0-4.435-3.593-8.028-8.038-8.028h19.049c4.445 0 8.038 3.593 8.038 8.028z"
|
||||
fill="#dc8758"
|
||||
/>
|
||||
<g>
|
||||
<path
|
||||
d="m388.154 231.615h-18.524c-4.204 0-7.611-3.408-7.611-7.611 0-4.204 3.407-7.612 7.611-7.612h18.524c4.204 0 7.611 3.408 7.611 7.612 0 4.203-3.407 7.611-7.611 7.611z"
|
||||
fill="#e759aa"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</SvgIcon>
|
||||
識埋我啲Fd
|
||||
</IconButton>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
className="frame upper-right"
|
||||
src="./StarPetImgs/star-frame-ur.png"
|
||||
alt="upper right frame"
|
||||
></img>
|
||||
<img
|
||||
className="frame bottom-left"
|
||||
src="./StarPetImgs/star-frame-bl.png"
|
||||
alt="bottom left frame"
|
||||
></img>
|
||||
<img
|
||||
className="frame bottom"
|
||||
src="./StarPetImgs/star-frame-b.png"
|
||||
alt="bottom frame"
|
||||
></img>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default StarPet;
|
||||
Reference in New Issue
Block a user