004_comission/givefortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-02-01 02:01:26 +08:00
parent a767348238
commit 5bc945e8af
129 changed files with 71057 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
gitUpdate.bat Normal file
View File

@@ -0,0 +1,7 @@
git status .
@pause
git add .
git commit -m"update givefortune,"
start git push

1
notes.md Normal file
View File

@@ -0,0 +1 @@
helloworld

174
task1/source/u-QhJMXmcPK/index.html Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="big-container">
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="200" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<div class="part1">
<h3 id="form-title">Calculate Total Daily Energy Expenditure</h3>
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label><br />
<input
type="text"
min="1"
class="form-control"
id="nameInput"
required
/>
</div>
<div class="form-group">
<label for="ageInput">Age:</label><br />
<input
type="number"
min="0"
class="form-control"
id="ageInput"
required
/>
</div>
<div class="form-group">
<label for="genderInput">Gender:</label><br />
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label><br />
<input
type="number"
min="0"
class="form-control"
id="heightInput"
required
/>
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label><br />
<input
type="number"
min="0"
class="form-control"
id="weightInput"
required
/>
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label><br/>
<select
class="calorie"
id="activityLevelInput"
class="form-control"
>
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<br />
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</form>
<div id="result"></div>
</div>
<div class="part2" id="questionContainer" style="display: none">
<h3>What did you eat today?</h3>
<label>Food Weight:</label
><input type="number" class="calorie" id="food-weight-input" autocomplete="name" />
<select class="calorie" id="unit-select">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
<br />
<label>Food Name: </label
><input type="text" class="calorie" id="food-name-input" autocomplete="name" />
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
<div id="part2result"><div id="result-container"></div></div>
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<div class="part4">
<div id="container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!-- <div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

456
task1/source/u-QhJMXmcPK/index.js Normal file
View File

@@ -0,0 +1,456 @@
document.addEventListener("DOMContentLoaded", function () {
var healthForm = document.getElementById("healthForm");
var submitBtn = document.getElementById("submitBtn");
var questionContainer = document.getElementById("questionContainer");
var resultBmr = document.getElementById("result");
var calValue = document.getElementById("cal-value");
var calValueText = document.createElement("h1");
// var part2Result = document.getElementById("part2result");
var resultContainer = document.getElementById("result-container");
var caloriesRecord = document.createElement("div");
var goalChoice = document.getElementsByName("goal_weight");
var formTitle = document.getElementById("form-title");
var barChartContainer = document.getElementById("container");
//input value
//var dailyCalorie = document.getElementsByClassName("part3");
//calculate bmr
function bmrFunction() {
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
var genderMultiplier = 0;
if (gender === "male") {
genderMultiplier = 1;
}
var activityLevelMultiplier = 0;
if (activityLevel === "sedentary") {
activityLevelMultiplier = 1.2;
} else if (activityLevel === "lightlyActive") {
activityLevelMultiplier = 1.375;
} else if (activityLevel === "moderatelyActive") {
activityLevelMultiplier = 1.55;
} else if (activityLevel === "veryActive") {
activityLevelMultiplier = 1.72;
} else if (activityLevel === "superActive") {
activityLevelMultiplier = 1.9;
}
const result =
9.99 * weight +
6.25 * height -
4.92 * age +
(166 * genderMultiplier - 161);
const bmrresult = result * activityLevelMultiplier;
return bmrresult;
}
//submit bmr form and click function
healthForm.addEventListener("submit", function (event) {
event.preventDefault();
var name = document.getElementById("nameInput").value;
var resultBmr = document.getElementById("result");
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
resultBmr.innerHTML = ""; // 清空结果元素的内容
formTitle.innerHTML = "";
var resultText = document.createElement("h3");
resultText.innerHTML = `<p>Hello! ${name}.</p>
<p>Your daily calorie intake: </p>
<div id="intake-contain"></div>
<button id="edit">Edit & Calculate again</button>
<div class="threeBtn">
<form>
<p>Which goal would you like to achieve?</p>
<input type="radio" id="maintain" name="goal_weight" value="maintain-weight">
<label for="html">Maintain Weight (+- 0cal)</label><br>
<input type="radio" id="loss" name="goal_weight" value="loss-weight">
<label for="css">Loss Weight (- 300cals)</label><br>
<input type="radio" id="gain" name="goal_weight" value="gain-weight">
<label for="javascript">Gain Weight (+ 300cals)</label></form>
</div>
<div id="saveBtn-contain"></div>
`;
resultBmr.appendChild(resultText);
healthForm.style.display = "none";
const intakeContain = document.getElementById("intake-contain");
const intakeNum = document.createElement("h2");
intakeNum.innerText = `${Math.round(bmrFunction())}cal`;
intakeContain.appendChild(intakeNum);
localStorage.setItem("user", name);
localStorage.setItem("userAge", age);
localStorage.setItem("userGender", gender);
localStorage.setItem("userHeight", height);
localStorage.setItem("userWeight", weight);
localStorage.setItem("userActivityLevel", activityLevel);
localStorage.setItem("bmrResult", bmrFunction());
// localStorage.getItem("user");
// JSON.parse(localStorage.getItem("userAge"));
// JSON.parse(localStorage.getItem("userGender"));
// JSON.parse(localStorage.getItem("userHeight"));
// JSON.parse(localStorage.getItem("userWeight"));
// JSON.parse(localStorage.getItem("userActivityLevel"));
// JSON.parse(localStorage.getItem("bmrResult"));
function btn1() {
//var maintainWeight = document.getElementById("maintain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction())}cal`);
}
function btn2() {
//var lossWeight = document.getElementById("loss-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) - 300}cal`);
}
function btn3() {
//var gainWeight = document.getElementById("gain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) + 300}cal`);
}
var editBtn = document.getElementById("edit");
editBtn.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
resultBmr.style.display = "none";
resultText.innerHTML = "";
});
var maintainWeight = document.getElementById("maintain");
maintainWeight.addEventListener("click", btn1);
var lossWeight = document.getElementById("loss");
lossWeight.addEventListener("click", btn2);
var gainWeight = document.getElementById("gain");
gainWeight.addEventListener("click", btn3);
var goalvalue;
for (var i = 0; i < goalChoice.length; i++) {
goalChoice[i].addEventListener("click", function () {
if (this.value === "maintain-weight") {
goalvalue = Math.round(bmrFunction()) + 0;
} else if (this.value === "loss-weight") {
goalvalue = Math.round(bmrFunction()) - 300;
} else if (this.value === "gain-weight") {
goalvalue = Math.round(bmrFunction()) + 300;
}
});
}
var saveBtnContain = document.getElementById("saveBtn-contain");
var saveBtn = document.createElement("button");
saveBtn.innerText = "Save";
saveBtn.id = "saveBtn";
saveBtnContain.appendChild(saveBtn);
saveBtn.addEventListener("click", function () {
resultText.innerHTML = `<p>Your daily calorie intake: </p>
<h2>${goalvalue}cals</h2>
<button id="edittwo">Edit & Calculate again</button>
`;
calValueText.innerText = `${goalvalue}cal`;
calValue.appendChild(calValueText);
});
var editBtnTwo = document.getElementById("edittwo");
editBtnTwo.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
calValue.style.display = "none";
resultText.innerHTML = "";
});
});
// Clear input fields
// document.getElementById("ageInput").value = "";
// document.getElementById("heightInput").value = "";
// document.getElementById("weightInput").value = "";
//Hide form and show question
questionContainer.style.display = "block";
// foodSubmitBtn.addEventListener("click", function () {
// var foodIntake = foodInput.value;
// // Clear input field
// foodInput.value = "";
// // Process food intake data
// console.log("Food Intake:", foodIntake);
// });
// function addFoodCa(x, y) {
// var calBar = document.createElement("div");
// calBar.classList.add("calBar");
// calBar.innerHTML = `<div>${x}</div><div>${y}</div>`;
// caloriesRecord.appendChild(calBar);
// }
//calculate food calorie
const calculateBtn = document.getElementById("calculate-btn");
calculateBtn.addEventListener("click", fetchData);
async function fetchData() {
const foodWeightInput = document.getElementById("food-weight-input");
const unitSelect = document.getElementById("unit-select");
const foodNameInput = document.getElementById("food-name-input");
const query = `${foodWeightInput.value}${unitSelect.value} ${foodNameInput.value}`;
try {
const res = await fetch(
"https://api.api-ninjas.com/v1/nutrition?query=" + query,
{
headers: {
"X-Api-Key": "HQR305Z28JdtTlSD7bzr2g==syWXu3chI7wcfy3N",
"Content-Type": "application/json",
},
}
);
const data = await res.json();
console.log(data);
resultContainer.innerHTML = "";
// Display the data in the result container
var foodResultText = document.createElement("div");
foodResultText.className = "foodresult";
foodResultText.innerHTML = `
<h2>Results:</h2>
<div class="line" id="foodname">Name: ${data[0].name}</div>
<div class="line" id="serving_size">Serving Size: ${data[0].serving_size_g}g</div>
<div class="line" id="calories">Calories: ${data[0].calories} cal</div>
<div class="line" >Protein: ${data[0].protein_g} g</div>
<div class="line" >Fiber: ${data[0].fiber_g} g</div>
<div class="line" >Total Fat: ${data[0].fat_total_g} g</div>
<div class="line" >Saturated Fat: ${data[0].fat_saturated_g} g</div>
<div class="line" >Cholesterol: ${data[0].cholesterol_mg} g</div>
<div class="line" >Total Carbohydrates: ${data[0].carbohydrates_total_g} g</div>
<button id="recordbtn">Save in the intake list</button>
`;
resultContainer.appendChild(foodResultText);
foodWeightInput.value = "";
foodNameInput.value = "";
var part2Result = document.getElementById("part2Result");
var recordbtn = document.getElementById("recordbtn");
recordbtn.addEventListener("click", function clickFn() {
//part2Result.style.backgroundColor = "#c7a5fa";
foodResultText.style.display = "none";
caloriesRecord.className = "calorierecord";
caloriesRecord.innerHTML = `
<button id="back">Back</button>
<h3>Calories Tracking Record</h3>
<div class="recorddate"></div><br>
<div class="nameCal">
<div>Name</div>
<div>Calories</div>
</div>
`;
foodIntakeRecording(data[0].name, data[0].calories);
sumUp();
//localStorage.setItem(`${new Date()}`, sumUp2());
taketheLastData(getCurrentDateFromDate(new Date()), sumUp2());
resultContainer.appendChild(caloriesRecord);
//calValueText.innerText = `${goalvalue - sumUp2()}cal`;
// var back = document.getElementById("back");
// back.addEventListener("click", function clickFn() {
// foodResultText.style.display = "block";
// foodResultText.style.backgroundColor = "#5cf089";
// caloriesRecord.style.display = "none";
// });
});
} catch (err) {
console.log("ERR:", err);
}
}
let allFoodRecord = [];
function foodIntakeRecording(foodName, calories) {
let food = {};
food["Name"] = foodName;
food["Calories"] = calories;
allFoodRecord.push(food);
localStorage.setItem("dataBag", JSON.stringify(allFoodRecord));
genTable();
}
function sumUp() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
const totalCal = document.createElement("div");
totalCal.className = "totalcal";
totalCal.innerHTML = `<div>Total Calories: ${totalCalories}</div>`;
caloriesRecord.appendChild(totalCal);
}
function sumUp2() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
return totalCalories;
}
function genTable() {
//caloriesRecord.innerHTML = "";
for (let i = 0; i < allFoodRecord.length; i++) {
const foodItem = document.createElement("div");
foodItem.className = "fooditem";
foodItem.innerHTML = `
<div>${allFoodRecord[i].Name}${allFoodRecord[i].Calories}</div>
`;
caloriesRecord.appendChild(foodItem);
}
}
let wholeDayRecord = [];
function taketheLastData(x, y) {
let dailydata = {};
dailydata["date"] = x;
dailydata["totalCalories"] = y;
wholeDayRecord.push(dailydata);
localStorage.setItem(
"dataBag",
JSON.stringify(wholeDayRecord[wholeDayRecord.length - 1])
);
genBar();
}
function genBar() {
for (let i = 0; i < wholeDayRecord.length; i++) {
const barcontainer = document.createElement("div");
barcontainer.className = "barcontainer";
const barHeight = generateBarHeight(
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
);
barcontainer.innerHTML = `
<div class="bar" style="height: ${barHeight}%"></div>
<div class="day">${wholeDayRecord[wholeDayRecord.length - 1].date}</div>
<div class="totalcalnum">${
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
}</div>
`;
barChartContainer.appendChild(barcontainer);
}
}
//date
const dateContainer = document.getElementById("dateContainer");
const prevButton = document.getElementById("prevButton");
const nextButton = document.getElementById("nextButton");
const currentDateElement = document.getElementById("currentDate");
function generateBarHeight(totalCalories) {
// 在这里根据总热量数据计算柱状图的高度百分比
// 您可以根据实际需求来定义计算逻辑
// 这里简单地将总热量数据除以一个固定值来获取百分比
const maxHeight = 100; // 最大高度百分比
const maxValue = 3000; // 最大的总热量值
const barHeight = (totalCalories / maxValue) * maxHeight;
console.log();
return barHeight;
}
// 调用生成柱状图的函数
genBar();
// function generateBarHeight() {
// var max = 3500;
// var percentage = (sumUp2 / max) * 100;
// return percentage;
// }
// document.getElementById("bar1").style.height = generateBarHeight() + "%";
// document.getElementById("bar2").style.height = generateBarHeight() + "%";
// document.getElementById("bar3").style.height = generateBarHeight() + "%";
// document.getElementById("bar4").style.height = generateBarHeight() + "%";
// document.getElementById("bar5").style.height = generateBarHeight() + "%";
// document.getElementById("bar6").style.height = generateBarHeight() + "%";
// document.getElementById("bar7").style.height = generateBarHeight() + "%";
// var currentDate = new Date();
// document.getElementById("day1").innerHTML = currentDate.getDate() - 6;
// document.getElementById("day2").innerHTML = currentDate.getDate() - 5;
// document.getElementById("day3").innerHTML = currentDate.getDate() - 4;
// document.getElementById("day4").innerHTML = currentDate.getDate() - 3;
// document.getElementById("day5").innerHTML = currentDate.getDate() - 2;
// document.getElementById("day6").innerHTML = currentDate.getDate() - 1;
// document.getElementById("day7").innerHTML = currentDate.getDate();
function getCurrentDateFromMounthandYear(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${month}${year}`;
}
function getCurrentDateFromDate(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${day}`;
}
function updateDate() {
const currentDate = new Date();
currentDateElement.textContent =
getCurrentDateFromMounthandYear(currentDate);
updateWeekChart(currentDate);
}
function goToPreviousDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() - 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
function goToNextDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() + 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
prevButton.addEventListener("click", goToPreviousDay);
nextButton.addEventListener("click", goToNextDay);
updateDate();
});

391
task1/source/u-QhJMXmcPK/style.css Normal file
View File

@@ -0,0 +1,391 @@
* {
font-family: "Mali", cursive;
font-size: small;
font-weight: 400;
}
.big-container {
background-image: ;
background-color: contain;
border-radius: 50px;
grid-gap: 20px;
padding: 5px;
width: 1000px;
height: 750px;
display: grid;
grid-template-columns: 32% 30% 45%;
grid-template-rows: 25% 45% 18%;
}
.title {
text-align: center;
font-size: 30px;
}
.welcome {
background-color: #ffffff;
display: flex;
border-radius: 50px;
width: 75%;
height: 105%;
grid-row: 1 / 2;
padding: 0px 40px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ffffff;
padding: 0px 40px;
width: 75%;
height: 110%;
grid-row: 2 / 4;
border-radius: 50px;
line-height: 10px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
h3 {
margin-top: 5px;
margin-bottom: 15px;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: normal;
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
.form-group label {
text-align: left;
width: 70%;
font-family: "Mali", cursive;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: 70%;
}
.bmrbtn {
border-radius: 50px;
padding: 10px;
border: none;
background-color: #9162f3;
color: white;
width: 70%;
margin-top: 10px;
}
p {
font-size: 20px;
font-weight: 300;
}
#edit {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 90%;
font-weight: bold;
margin: 30px, 0;
}
.threeBtn {
display: flex;
width: 100%;
font-size: 20px;
align-items: center;
gap: 10px;
}
.three {
border-radius: 10px;
padding: 20px;
border: none;
background-color: #9ffd98;
width: 40%;
color: #000000;
font-weight: bold;
}
#save {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #000000;
width: 50%;
color: #ffffff;
font-weight: bold;
position: relative;
margin-top: 40px;
font-size: 15px;
}
.part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
grid-column: 2 / 3;
grid-row: 1 / 3;
height: 40%;
width: 100%;
line-height: 15px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgb(0, 0, 0);
}
.apiInput {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
flex-grow: 1;
}
.apiInput select {
margin-top: 5px;
}
.foodbtn {
border-radius: 50px;
padding: 10px;
border: none;
background-color: #000000;
color: white;
width: 70%;
margin-top: 10px;
}
#part2result {
background-color: #9ffd98;
padding: 15px 15px;
border-radius: 50px;
grid-column: 2 / 3;
grid-row: 2 / 4;
width: 85%;
height: 93%;
margin-top: 60px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
#result-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
h2 {
font-size: 30px;
font-weight: 700;
margin-top: 60px;
}
#foodname {
font-size: 22px;
}
.line {
font-size: 16px;
border-bottom: 2px dotted #42329b;
width: 80%;
margin-bottom: -1px;
color: #707070;
font-weight: 300;
}
#recordbtn button {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #000000;
width: 80%;
color: #ffffff;
margin-top: 20px;
font-weight: bold;
margin: 10px, 0;
}
.intakeListbtn {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 70%;
color: #000000;
font-weight: bold;
margin-top: 10px;
}
.recorddate {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #844eda;
width: 180px;
height: 50px;
color: #ffffff;
}
.nameCal {
display: flex;
justify-content: space-around;
background-color: #ffffff;
margin-bottom: 5px;
}
.calBar {
display: flex;
justify-content: space-around;
background-color: #ffffff;
}
.part3 {
background-color: #ffffff;
border-radius: 50px;
padding: 8px 30px;
grid-column: 3 / 4;
grid-row: 1 / 3;
height: 41vh;
width: 40vh;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
margin-bottom: 15px;
}
.date {
display: flex;
justify-content: space-between;
}
.datebtn {
border: 0px;
background-color: #ffffff;
}
#dateContainer {
position: absolute;
display: flex;
align-items: center;
top: 10px;
right: 10px;
}
#currentDate {
font-size: 20px; /* Change the font size as desired */
font-family: "Mali", cursive;
}
.text {
font-size: 50px;
width: 100%;
text-align: center;
}
.container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
margin: 50px auto;
}
.barcontainer {
background-color: #181818;
border-radius: 20px;
position: relative;
transform: translateY(-50%);
top: 80px;
margin-left: 10px;
width: 20px;
height: 150px;
float: left;
border: darken(#98afc7, 40%) 3px solid;
}
.bar {
background-color: #9bc9c7;
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
border-radius: 20px;
border-top: 6px solid #fff;
box-sizing: border-box;
animation: grow 1.5s ease-out forwards;
transform-origin: bottom;
}
@keyframes grow {
from {
transform: scaleY(0);
}
}
.today {
font-size: 30px;
font-weight: 700;
}
#cal-value {
position: relative;
font-size: x-large;
text-align: center;
}
#back {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #ffffff;
width: 30%;
color: #000000;
font-weight: bold;
position: relative;
top: 10px;
}
.part4 {
background-color: #ffffff;
border-radius: 50px;
padding: 8px 30px;
grid-column: 3 / 4;
grid-row: 2 / 3;
height: 50vh;
width: 40vh;
position: relative;
top: 90px;
right: 3px;
margin-top: 50px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.weekly-report {
font-size: 20px;
font-weight: 700;
text-align: left;
}
/* button {
background: none;
border: none;
cursor: pointer;
font-size: 30px;
color: #000;
padding: 0;
margin: 0 30px;} /* Add margin between buttons */

BIN
task1/source/u-ySeJGp_it/IMG_4651.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
task1/source/u-ySeJGp_it/IMG_4654.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
task1/source/u-ySeJGp_it/IMG_4657.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

249
task1/testweb-draft1/index.html Normal file
View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0" class="giphy-embed"
allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<select class="calorie" id="activityLevelInput" class="form-control">
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!--
<div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

499
task1/testweb-draft1/index.js Normal file
View File

@@ -0,0 +1,499 @@
document.addEventListener("DOMContentLoaded", function () {
var healthForm = document.getElementById("healthForm");
var submitBtn = document.getElementById("submitBtn");
var questionContainer = document.getElementById("questionContainer");
var resultBmr = document.getElementById("result");
var calValue = document.getElementById("cal-value");
var calValueText = document.createElement("h1");
// var part2Result = document.getElementById("part2result");
var resultContainer = document.getElementById("result-container");
var caloriesRecord = document.createElement("div");
var goalChoice = document.getElementsByName("goal_weight");
var formTitle = document.getElementById("form-title");
var barChartContainer = document.getElementById("container");
//input value
//var dailyCalorie = document.getElementsByClassName("part3");
//calculate bmr
function bmrFunction() {
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
var genderMultiplier = 0;
if (gender === "male") {
genderMultiplier = 1;
}
var activityLevelMultiplier = 0;
if (activityLevel === "sedentary") {
activityLevelMultiplier = 1.2;
} else if (activityLevel === "lightlyActive") {
activityLevelMultiplier = 1.375;
} else if (activityLevel === "moderatelyActive") {
activityLevelMultiplier = 1.55;
} else if (activityLevel === "veryActive") {
activityLevelMultiplier = 1.72;
} else if (activityLevel === "superActive") {
activityLevelMultiplier = 1.9;
}
const result =
9.99 * weight +
6.25 * height -
4.92 * age +
(166 * genderMultiplier - 161);
const bmrresult = result * activityLevelMultiplier;
return bmrresult;
}
//submit bmr form and click function
healthForm.addEventListener("submit", function (event) {
event.preventDefault();
var name = document.getElementById("nameInput").value;
var resultBmr = document.getElementById("result");
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
resultBmr.innerHTML = ""; // 清空结果元素的内容
formTitle.innerHTML = "";
var resultText = document.createElement("h3");
resultText.innerHTML = `<p>Hello! ${name}.</p>
<p>Your daily calorie intake: </p>
<div id="intake-contain"></div>
<button id="edit">Edit & Calculate again</button>
<div class="threeBtn">
<form>
<p>Which goal would you like to achieve?</p>
<input type="radio" id="maintain" name="goal_weight" value="maintain-weight">
<label for="html">Maintain Weight (+- 0cal)</label><br>
<input type="radio" id="loss" name="goal_weight" value="loss-weight">
<label for="css">Loss Weight (- 300cals)</label><br>
<input type="radio" id="gain" name="goal_weight" value="gain-weight">
<label for="javascript">Gain Weight (+ 300cals)</label></form>
</div>
<div id="saveBtn-contain"></div>
`;
resultBmr.appendChild(resultText);
healthForm.style.display = "none";
const intakeContain = document.getElementById("intake-contain");
const intakeNum = document.createElement("h2");
intakeNum.innerText = `${Math.round(bmrFunction())}cal`;
intakeContain.appendChild(intakeNum);
localStorage.setItem("user", name);
localStorage.setItem("userAge", age);
localStorage.setItem("userGender", gender);
localStorage.setItem("userHeight", height);
localStorage.setItem("userWeight", weight);
localStorage.setItem("userActivityLevel", activityLevel);
localStorage.setItem("bmrResult", bmrFunction());
// localStorage.getItem("user");
// JSON.parse(localStorage.getItem("userAge"));
// JSON.parse(localStorage.getItem("userGender"));
// JSON.parse(localStorage.getItem("userHeight"));
// JSON.parse(localStorage.getItem("userWeight"));
// JSON.parse(localStorage.getItem("userActivityLevel"));
// JSON.parse(localStorage.getItem("bmrResult"));
function btn1() {
//var maintainWeight = document.getElementById("maintain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction())}cal`);
}
function btn2() {
//var lossWeight = document.getElementById("loss-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) - 300}cal`);
}
function btn3() {
//var gainWeight = document.getElementById("gain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) + 300}cal`);
}
var editBtn = document.getElementById("edit");
editBtn.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
resultBmr.style.display = "none";
resultText.innerHTML = "";
});
var maintainWeight = document.getElementById("maintain");
maintainWeight.addEventListener("click", btn1);
var lossWeight = document.getElementById("loss");
lossWeight.addEventListener("click", btn2);
var gainWeight = document.getElementById("gain");
gainWeight.addEventListener("click", btn3);
var goalvalue;
for (var i = 0; i < goalChoice.length; i++) {
goalChoice[i].addEventListener("click", function () {
if (this.value === "maintain-weight") {
goalvalue = Math.round(bmrFunction()) + 0;
} else if (this.value === "loss-weight") {
goalvalue = Math.round(bmrFunction()) - 300;
} else if (this.value === "gain-weight") {
goalvalue = Math.round(bmrFunction()) + 300;
}
});
}
var saveBtnContain = document.getElementById("saveBtn-contain");
var saveBtn = document.createElement("button");
saveBtn.innerText = "Save";
saveBtn.id = "saveBtn";
saveBtnContain.appendChild(saveBtn);
saveBtn.addEventListener("click", function () {
resultText.innerHTML = `<p>Your daily calorie intake: </p>
<h2>${goalvalue}cals</h2>
<button id="edittwo">Edit & Calculate again</button>
`;
calValueText.innerText = `${goalvalue}cal`;
calValue.appendChild(calValueText);
});
var editBtnTwo = document.getElementById("edittwo");
editBtnTwo.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
calValue.style.display = "none";
resultText.innerHTML = "";
});
});
// Clear input fields
// document.getElementById("ageInput").value = "";
// document.getElementById("heightInput").value = "";
// document.getElementById("weightInput").value = "";
//Hide form and show question
questionContainer.style.display = "block";
// foodSubmitBtn.addEventListener("click", function () {
// var foodIntake = foodInput.value;
// // Clear input field
// foodInput.value = "";
// // Process food intake data
// console.log("Food Intake:", foodIntake);
// });
// function addFoodCa(x, y) {
// var calBar = document.createElement("div");
// calBar.classList.add("calBar");
// calBar.innerHTML = `<div>${x}</div><div>${y}</div>`;
// caloriesRecord.appendChild(calBar);
// }
//calculate food calorie
const calculateBtn = document.getElementById("calculate-btn");
calculateBtn.addEventListener("click", fetchData);
async function fetchData() {
const foodWeightInput = document.getElementById("food-weight-input");
const unitSelect = document.getElementById("unit-select");
const foodNameInput = document.getElementById("food-name-input");
const query = `${foodWeightInput.value}${unitSelect.value} ${foodNameInput.value}`;
try {
const res = await fetch(
"https://api.api-ninjas.com/v1/nutrition?query=" + query,
{
headers: {
"X-Api-Key": "HQR305Z28JdtTlSD7bzr2g==syWXu3chI7wcfy3N",
"Content-Type": "application/json",
},
}
);
const data = await res.json();
console.log(data);
resultContainer.innerHTML = "";
// Display the data in the result container
var foodResultText = document.createElement("div");
foodResultText.className = "foodresult";
foodResultText.innerHTML = `
<div>
<h2>Results:</h2>
</div>
<div class="result-header">
<div>Name:</div>
<div>Brisket</div>
</div>
<div class="line result-row" id="serving_size">
<div>Serving Size:</div>
<div>${data[0].serving_size_g}g</div>
</div>
<div class="line result-row" id="foodname">
<div>Name:</div>
<div>${data[0].name}</div>
</div>
<div class="line result-row" id="serving_size">
<div>Serving Size:</div>
<div>${data[0].serving_size_g}g</div>
</div>
<div class="line result-row" id="calories">
<div>Calories:</div>
<div>${data[0].calories} cal</div>
</div>
<div class="line result-row">
<div>Protein:</div>
<div>${data[0].protein_g} g</div>
</div>
<div class="line result-row">
<div>Fiber:</div>
<div>${data[0].fiber_g} g</div>
</div>
<div class="line result-row">
<div>Total Fat:</div>
<div>${data[0].fat_total_g} g</div>
</div>
<div class="line result-row">
<div>Saturated Fat:</div>
<div>${data[0].fat_saturated_g} g</div>
</div>
<div class="line result-row">
<div>Cholesterol:</div>
<div>${data[0].cholesterol_mg} g</div>
</div>
<div class="line result-row">
<div>Total Carbohydrates:</div>
<div>${data[0].carbohydrates_total_g} g</div>
</div>
<div class="result-footer">
<button type="button" class="foodbtn" id="recordbtn">
Save in the intake list
</button>
</div.
`;
resultContainer.appendChild(foodResultText);
foodWeightInput.value = "";
foodNameInput.value = "";
var part2Result = document.getElementById("part2Result");
var recordbtn = document.getElementById("recordbtn");
recordbtn.addEventListener("click", function clickFn() {
//part2Result.style.backgroundColor = "#c7a5fa";
foodResultText.style.display = "none";
caloriesRecord.className = "calorierecord";
caloriesRecord.innerHTML = `
<button id="back">Back</button>
<h3>Calories Tracking Record</h3>
<div class="recorddate"></div><br>
<div class="nameCal">
<div>Name</div>
<div>Calories</div>
</div>
`;
foodIntakeRecording(data[0].name, data[0].calories);
sumUp();
//localStorage.setItem(`${new Date()}`, sumUp2());
taketheLastData(getCurrentDateFromDate(new Date()), sumUp2());
resultContainer.appendChild(caloriesRecord);
//calValueText.innerText = `${goalvalue - sumUp2()}cal`;
// var back = document.getElementById("back");
// back.addEventListener("click", function clickFn() {
// foodResultText.style.display = "block";
// foodResultText.style.backgroundColor = "#5cf089";
// caloriesRecord.style.display = "none";
// });
});
} catch (err) {
console.log("ERR:", err);
}
}
let allFoodRecord = [];
function foodIntakeRecording(foodName, calories) {
let food = {};
food["Name"] = foodName;
food["Calories"] = calories;
allFoodRecord.push(food);
localStorage.setItem("dataBag", JSON.stringify(allFoodRecord));
genTable();
}
function sumUp() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
const totalCal = document.createElement("div");
totalCal.className = "totalcal";
totalCal.innerHTML = `<div>Total Calories: ${totalCalories}</div>`;
caloriesRecord.appendChild(totalCal);
}
function sumUp2() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
return totalCalories;
}
function genTable() {
//caloriesRecord.innerHTML = "";
for (let i = 0; i < allFoodRecord.length; i++) {
const foodItem = document.createElement("div");
foodItem.className = "fooditem";
foodItem.innerHTML = `
<div>${allFoodRecord[i].Name}${allFoodRecord[i].Calories}</div>
`;
caloriesRecord.appendChild(foodItem);
}
}
let wholeDayRecord = [];
function taketheLastData(x, y) {
let dailydata = {};
dailydata["date"] = x;
dailydata["totalCalories"] = y;
wholeDayRecord.push(dailydata);
localStorage.setItem(
"dataBag",
JSON.stringify(wholeDayRecord[wholeDayRecord.length - 1])
);
genBar();
}
function genBar() {
for (let i = 0; i < wholeDayRecord.length; i++) {
const barcontainer = document.createElement("div");
barcontainer.className = "barcontainer";
const barHeight = generateBarHeight(
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
);
barcontainer.innerHTML = `
<div class="bar" style="height: ${barHeight}%"></div>
<div class="day">${wholeDayRecord[wholeDayRecord.length - 1].date}</div>
<div class="totalcalnum">${
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
}</div>
`;
barChartContainer.appendChild(barcontainer);
}
}
//date
const dateContainer = document.getElementById("dateContainer");
const prevButton = document.getElementById("prevButton");
const nextButton = document.getElementById("nextButton");
const currentDateElement = document.getElementById("currentDate");
function generateBarHeight(totalCalories) {
// 在这里根据总热量数据计算柱状图的高度百分比
// 您可以根据实际需求来定义计算逻辑
// 这里简单地将总热量数据除以一个固定值来获取百分比
const maxHeight = 100; // 最大高度百分比
const maxValue = 3000; // 最大的总热量值
const barHeight = (totalCalories / maxValue) * maxHeight;
console.log();
return barHeight;
}
// 调用生成柱状图的函数
genBar();
// function generateBarHeight() {
// var max = 3500;
// var percentage = (sumUp2 / max) * 100;
// return percentage;
// }
// document.getElementById("bar1").style.height = generateBarHeight() + "%";
// document.getElementById("bar2").style.height = generateBarHeight() + "%";
// document.getElementById("bar3").style.height = generateBarHeight() + "%";
// document.getElementById("bar4").style.height = generateBarHeight() + "%";
// document.getElementById("bar5").style.height = generateBarHeight() + "%";
// document.getElementById("bar6").style.height = generateBarHeight() + "%";
// document.getElementById("bar7").style.height = generateBarHeight() + "%";
// var currentDate = new Date();
// document.getElementById("day1").innerHTML = currentDate.getDate() - 6;
// document.getElementById("day2").innerHTML = currentDate.getDate() - 5;
// document.getElementById("day3").innerHTML = currentDate.getDate() - 4;
// document.getElementById("day4").innerHTML = currentDate.getDate() - 3;
// document.getElementById("day5").innerHTML = currentDate.getDate() - 2;
// document.getElementById("day6").innerHTML = currentDate.getDate() - 1;
// document.getElementById("day7").innerHTML = currentDate.getDate();
function getCurrentDateFromMounthandYear(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${month}${year}`;
}
function getCurrentDateFromDate(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${day}`;
}
function updateDate() {
const currentDate = new Date();
currentDateElement.textContent =
getCurrentDateFromMounthandYear(currentDate);
updateWeekChart(currentDate);
}
function goToPreviousDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() - 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
function goToNextDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() + 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
prevButton.addEventListener("click", goToPreviousDay);
nextButton.addEventListener("click", goToNextDay);
updateDate();
});

560
task1/testweb-draft1/style.css Normal file
View File

@@ -0,0 +1,560 @@
* {
font-family: "Mali", cursive;
font-size: small;
font-weight: 400;
}
.big-container {
background-image: ;
background-color: contain;
border-radius: 50px;
grid-gap: 20px;
padding: 5px;
width: 1000px;
height: 750px;
display: grid;
grid-template-columns: 32% 30% 45%;
grid-template-rows: 25% 45% 18%;
}
.title {
text-align: center;
font-size: 30px;
}
.welcome {
background-color: #ffffff;
display: flex;
border-radius: 50px;
/* width: 75%; */
/* grid-row: 1 / 2; */
padding: 20px 40px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1 {
background-color: #ffffff;
/* grid-row: 2 / 4; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
padding: 20px 20px;
/* width: 75%; */
/* height: 110%; */
border-radius: 50px;
/* line-height: 10px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1-body {
}
h3 {
margin-top: 5px;
margin-bottom: 15px;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: normal;
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
.form-group label {
text-align: left;
width: 100%;
font-family: "Mali", cursive;
}
.form-group input {
margin-top: 0.5rem;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: calc(100% - 10px);
}
.bmrbtn {
border-radius: 50px;
padding: 10px;
border: none;
background-color: #9162f3;
color: white;
width: 70%;
margin-top: 10px;
}
p {
font-size: 20px;
font-weight: 300;
}
#edit {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 90%;
font-weight: bold;
margin: 30px, 0;
}
.threeBtn {
display: flex;
width: 100%;
font-size: 20px;
align-items: center;
gap: 10px;
}
.three {
border-radius: 10px;
padding: 20px;
border: none;
background-color: #9ffd98;
width: 40%;
color: #000000;
font-weight: bold;
}
#save {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #000000;
width: 50%;
color: #ffffff;
font-weight: bold;
position: relative;
margin-top: 40px;
font-size: 15px;
}
.old-part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
grid-column: 2 / 3;
grid-row: 1 / 3;
height: 40%;
width: 100%;
line-height: 15px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
/* width: 100%; */
/* max-width: 300px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.part2>div>div{
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
}
.part2 div.input-label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.part2 input {
margin-top:0.5rem;
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgba(180, 134, 134, 0.3);
width:100%;
}
.apiInput {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
flex-grow: 1;
}
.apiInput select {
margin-top: 5px;
}
.foodbtn {
border-radius: 50px;
padding: 10px;
border: none;
background-color: #000000;
color: white;
width: 70%;
margin-top: 10px;
}
#part2result {
background-color: #9ffd98;
min-height: 300px;
padding: 15px 15px;
border-radius: 50px;
/* grid-column: 2 / 3; */
/* grid-row: 2 / 4; */
/* width: 85%; */
/* height: 93%; */
/* margin-top: 60px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
#result-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
h2 {
font-size: 30px;
font-weight: 700;
margin-top: 60px;
}
#foodname {
font-size: 22px;
}
.line {
font-size: 16px;
border-bottom: 2px dotted #42329b;
width: 80%;
margin-bottom: -1px;
color: #707070;
font-weight: 300;
}
#recordbtn button {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #000000;
width: 80%;
color: #ffffff;
margin-top: 20px;
font-weight: bold;
margin: 10px, 0;
}
.intakeListbtn {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 70%;
color: #000000;
font-weight: bold;
margin-top: 10px;
}
.recorddate {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #844eda;
width: 180px;
height: 50px;
color: #ffffff;
}
.nameCal {
display: flex;
justify-content: space-around;
background-color: #ffffff;
margin-bottom: 5px;
}
.calBar {
display: flex;
justify-content: space-around;
background-color: #ffffff;
}
.part3 {
background-color: #ffffff;
border-radius: 50px;
padding: 8px 30px;
min-height: 300px;
/* grid-column: 3 / 4; */
/* grid-row: 1 / 3; */
/* height: 41vh; */
/* width: 40vh; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
margin-bottom: 15px;
}
.date {
display: flex;
justify-content: space-between;
}
.datebtn {
border: 0px;
background-color: #ffffff;
}
#dateContainer {
/* position: absolute; */
display: flex;
align-items: center;
top: 10px;
right: 10px;
}
#currentDate {
font-size: 20px; /* Change the font size as desired */
font-family: "Mali", cursive;
}
.text {
font-size: 50px;
width: 100%;
text-align: center;
}
.container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
margin: 50px auto;
}
.barcontainer {
background-color: #181818;
border-radius: 20px;
position: relative;
transform: translateY(-50%);
top: 80px;
margin-left: 10px;
width: 20px;
height: 150px;
float: left;
border: darken(#98afc7, 40%) 3px solid;
}
.bar {
background-color: #9bc9c7;
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
border-radius: 20px;
border-top: 6px solid #fff;
box-sizing: border-box;
animation: grow 1.5s ease-out forwards;
transform-origin: bottom;
}
@keyframes grow {
from {
transform: scaleY(0);
}
}
.today {
font-size: 30px;
font-weight: 700;
}
#cal-value {
position: relative;
font-size: x-large;
text-align: center;
}
#back {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #ffffff;
width: 30%;
color: #000000;
font-weight: bold;
position: relative;
top: 10px;
}
.part4 {
background-color: #ffffff;
border-radius: 50px;
padding: 8px 20px;
/* grid-column: 3 / 4; */
/* grid-row: 2 / 3; */
/* height: 50vh; */
/* width: 40vh; */
/* position: relative; */
/* top: 90px; */
/* right: 3px; */
/* margin-top: 50px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
min-height: 300px;
}
.weekly-report {
font-size: 20px;
font-weight: 700;
text-align: left;
}
/* button {
background: none;
border: none;
cursor: pointer;
font-size: 30px;
color: #000;
padding: 0;
margin: 0 30px;} /* Add margin between buttons */
.gender-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.form-group .nickname-label{
width: 100%;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: center;
}
.tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
}
.tile>div{
width: 33%;
}
.weight-group {
}
.weight-group input {
margin-bottom: 5px;
margin-right: 0.5rem;
}
.result-header {
width: 100%;
display: flex;
flex-direction : row;
justify-content: space-between;
}
.result-header div {
font-size:2rem;
}
.result-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px dotted grey;
}
.result-row div {
font-size: 1.1rem;
}
.foodresult {
width: 100%;
}
#result-container div.result-footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.content-container{
width: 1000px;
height: 750px;
display: flex;
flex-direction: row;
}
/*
.content-container div {
width: 33%;
min-height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} */
.content-column {
width: 33%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.weekly-report-container {
display: flex;
flex-direction: row;
justify-content:space-between;
font-size: 1.5rem;
}
.weekly-report-container p{
font-weight: bold;
}

251
task1/testweb-draft2/index.html Normal file
View File

@@ -0,0 +1,251 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome-container">
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0"
class="giphy-embed" allowFullScreen></iframe>
<h1 class="title">
<span>Welcome</span>
<span>to</span>
<span>CalTally</span>
</h1>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<select class="calorie" id="activityLevelInput" class="form-control">
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="get_the_calories_btn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!--
<div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

500
task1/testweb-draft2/index.js Normal file
View File

@@ -0,0 +1,500 @@
document.addEventListener("DOMContentLoaded", function () {
var healthForm = document.getElementById("healthForm");
var submitBtn = document.getElementById("submitBtn");
var questionContainer = document.getElementById("questionContainer");
var resultBmr = document.getElementById("result");
var calValue = document.getElementById("cal-value");
var calValueText = document.createElement("h1");
// var part2Result = document.getElementById("part2result");
var resultContainer = document.getElementById("result-container");
var caloriesRecord = document.createElement("div");
var goalChoice = document.getElementsByName("goal_weight");
var formTitle = document.getElementById("form-title");
var barChartContainer = document.getElementById("container");
//input value
//var dailyCalorie = document.getElementsByClassName("part3");
//calculate bmr
function bmrFunction() {
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
var genderMultiplier = 0;
if (gender === "male") {
genderMultiplier = 1;
}
var activityLevelMultiplier = 0;
if (activityLevel === "sedentary") {
activityLevelMultiplier = 1.2;
} else if (activityLevel === "lightlyActive") {
activityLevelMultiplier = 1.375;
} else if (activityLevel === "moderatelyActive") {
activityLevelMultiplier = 1.55;
} else if (activityLevel === "veryActive") {
activityLevelMultiplier = 1.72;
} else if (activityLevel === "superActive") {
activityLevelMultiplier = 1.9;
}
const result =
9.99 * weight +
6.25 * height -
4.92 * age +
(166 * genderMultiplier - 161);
const bmrresult = result * activityLevelMultiplier;
return bmrresult;
}
//submit bmr form and click function
healthForm.addEventListener("submit", function (event) {
event.preventDefault();
var name = document.getElementById("nameInput").value;
var resultBmr = document.getElementById("result");
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
resultBmr.innerHTML = ""; // 清空结果元素的内容
formTitle.innerHTML = "";
var resultText = document.createElement("h3");
resultText.innerHTML = `<p>Hello! ${name}.</p>
<p>Your daily calorie intake: </p>
<div id="intake-contain"></div>
<button id="edit">Edit & Calculate again</button>
<div class="threeBtn">
<form>
<p>Which goal would you like to achieve?</p>
<input type="radio" id="maintain" name="goal_weight" value="maintain-weight">
<label for="html">Maintain Weight (+- 0cal)</label><br>
<input type="radio" id="loss" name="goal_weight" value="loss-weight">
<label for="css">Loss Weight (- 300cals)</label><br>
<input type="radio" id="gain" name="goal_weight" value="gain-weight">
<label for="javascript">Gain Weight (+ 300cals)</label></form>
</div>
<div id="saveBtn-contain"></div>
`;
resultBmr.appendChild(resultText);
healthForm.style.display = "none";
const intakeContain = document.getElementById("intake-contain");
const intakeNum = document.createElement("h2");
intakeNum.innerText = `${Math.round(bmrFunction())}cal`;
intakeContain.appendChild(intakeNum);
localStorage.setItem("user", name);
localStorage.setItem("userAge", age);
localStorage.setItem("userGender", gender);
localStorage.setItem("userHeight", height);
localStorage.setItem("userWeight", weight);
localStorage.setItem("userActivityLevel", activityLevel);
localStorage.setItem("bmrResult", bmrFunction());
// localStorage.getItem("user");
// JSON.parse(localStorage.getItem("userAge"));
// JSON.parse(localStorage.getItem("userGender"));
// JSON.parse(localStorage.getItem("userHeight"));
// JSON.parse(localStorage.getItem("userWeight"));
// JSON.parse(localStorage.getItem("userActivityLevel"));
// JSON.parse(localStorage.getItem("bmrResult"));
function btn1() {
//var maintainWeight = document.getElementById("maintain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction())}cal`);
}
function btn2() {
//var lossWeight = document.getElementById("loss-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) - 300}cal`);
}
function btn3() {
//var gainWeight = document.getElementById("gain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) + 300}cal`);
}
var editBtn = document.getElementById("edit");
editBtn.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
resultBmr.style.display = "none";
resultText.innerHTML = "";
});
var maintainWeight = document.getElementById("maintain");
maintainWeight.addEventListener("click", btn1);
var lossWeight = document.getElementById("loss");
lossWeight.addEventListener("click", btn2);
var gainWeight = document.getElementById("gain");
gainWeight.addEventListener("click", btn3);
var goalvalue;
for (var i = 0; i < goalChoice.length; i++) {
goalChoice[i].addEventListener("click", function () {
if (this.value === "maintain-weight") {
goalvalue = Math.round(bmrFunction()) + 0;
} else if (this.value === "loss-weight") {
goalvalue = Math.round(bmrFunction()) - 300;
} else if (this.value === "gain-weight") {
goalvalue = Math.round(bmrFunction()) + 300;
}
});
}
var saveBtnContain = document.getElementById("saveBtn-contain");
var saveBtn = document.createElement("button");
saveBtn.innerText = "Save";
saveBtn.id = "saveBtn";
saveBtnContain.appendChild(saveBtn);
saveBtn.addEventListener("click", function () {
resultText.innerHTML = `<p>Your daily calorie intake: </p>
<h2>${goalvalue}cals</h2>
<button id="edittwo">Edit & Calculate again</button>
`;
calValueText.innerText = `${goalvalue}cal`;
calValue.appendChild(calValueText);
});
var editBtnTwo = document.getElementById("edittwo");
editBtnTwo.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
calValue.style.display = "none";
resultText.innerHTML = "";
});
});
// Clear input fields
// document.getElementById("ageInput").value = "";
// document.getElementById("heightInput").value = "";
// document.getElementById("weightInput").value = "";
//Hide form and show question
questionContainer.style.display = "block";
// foodSubmitBtn.addEventListener("click", function () {
// var foodIntake = foodInput.value;
// // Clear input field
// foodInput.value = "";
// // Process food intake data
// console.log("Food Intake:", foodIntake);
// });
// function addFoodCa(x, y) {
// var calBar = document.createElement("div");
// calBar.classList.add("calBar");
// calBar.innerHTML = `<div>${x}</div><div>${y}</div>`;
// caloriesRecord.appendChild(calBar);
// }
//calculate food calorie
const calculateBtn = document.getElementById("calculate-btn");
calculateBtn.addEventListener("click", fetchData);
async function fetchData() {
alert("helloworld");
const foodWeightInput = document.getElementById("food-weight-input");
const unitSelect = document.getElementById("unit-select");
const foodNameInput = document.getElementById("food-name-input");
const query = `${foodWeightInput.value}${unitSelect.value} ${foodNameInput.value}`;
try {
const res = await fetch(
"https://api.api-ninjas.com/v1/nutrition?query=" + query,
{
headers: {
"X-Api-Key": "HQR305Z28JdtTlSD7bzr2g==syWXu3chI7wcfy3N",
"Content-Type": "application/json",
},
}
);
const data = await res.json();
console.log(data);
resultContainer.innerHTML = "";
// Display the data in the result container
var foodResultText = document.createElement("div");
foodResultText.className = "foodresult";
foodResultText.innerHTML = `
<div>
<h2>Results:</h2>
</div>
<div class="result-header">
<div>Name:</div>
<div>Brisket</div>
</div>
<div class="line result-row" id="serving_size">
<div>Serving Size:</div>
<div>${data[0].serving_size_g}g</div>
</div>
<div class="line result-row" id="foodname">
<div>Name:</div>
<div>${data[0].name}</div>
</div>
<div class="line result-row" id="serving_size">
<div>Serving Size:</div>
<div>${data[0].serving_size_g}g</div>
</div>
<div class="line result-row" id="calories">
<div>Calories:</div>
<div>${data[0].calories} cal</div>
</div>
<div class="line result-row">
<div>Protein:</div>
<div>${data[0].protein_g} g</div>
</div>
<div class="line result-row">
<div>Fiber:</div>
<div>${data[0].fiber_g} g</div>
</div>
<div class="line result-row">
<div>Total Fat:</div>
<div>${data[0].fat_total_g} g</div>
</div>
<div class="line result-row">
<div>Saturated Fat:</div>
<div>${data[0].fat_saturated_g} g</div>
</div>
<div class="line result-row">
<div>Cholesterol:</div>
<div>${data[0].cholesterol_mg} g</div>
</div>
<div class="line result-row">
<div>Total Carbohydrates:</div>
<div>${data[0].carbohydrates_total_g} g</div>
</div>
<div class="result-footer">
<button type="button" class="foodbtn" id="recordbtn">
Save in the intake list
</button>
</div.
`;
resultContainer.appendChild(foodResultText);
foodWeightInput.value = "";
foodNameInput.value = "";
var part2Result = document.getElementById("part2Result");
var recordbtn = document.getElementById("recordbtn");
recordbtn.addEventListener("click", function clickFn() {
//part2Result.style.backgroundColor = "#c7a5fa";
foodResultText.style.display = "none";
caloriesRecord.className = "calorierecord";
caloriesRecord.innerHTML = `
<button id="back">Back</button>
<h3>Calories Tracking Record</h3>
<div class="recorddate"></div><br>
<div class="nameCal">
<div>Name</div>
<div>Calories</div>
</div>
`;
foodIntakeRecording(data[0].name, data[0].calories);
sumUp();
//localStorage.setItem(`${new Date()}`, sumUp2());
taketheLastData(getCurrentDateFromDate(new Date()), sumUp2());
resultContainer.appendChild(caloriesRecord);
//calValueText.innerText = `${goalvalue - sumUp2()}cal`;
// var back = document.getElementById("back");
// back.addEventListener("click", function clickFn() {
// foodResultText.style.display = "block";
// foodResultText.style.backgroundColor = "#5cf089";
// caloriesRecord.style.display = "none";
// });
});
} catch (err) {
console.log("ERR:", err);
}
}
let allFoodRecord = [];
function foodIntakeRecording(foodName, calories) {
let food = {};
food["Name"] = foodName;
food["Calories"] = calories;
allFoodRecord.push(food);
localStorage.setItem("dataBag", JSON.stringify(allFoodRecord));
genTable();
}
function sumUp() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
const totalCal = document.createElement("div");
totalCal.className = "totalcal";
totalCal.innerHTML = `<div>Total Calories: ${totalCalories}</div>`;
caloriesRecord.appendChild(totalCal);
}
function sumUp2() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
return totalCalories;
}
function genTable() {
//caloriesRecord.innerHTML = "";
for (let i = 0; i < allFoodRecord.length; i++) {
const foodItem = document.createElement("div");
foodItem.className = "fooditem";
foodItem.innerHTML = `
<div>${allFoodRecord[i].Name}${allFoodRecord[i].Calories}</div>
`;
caloriesRecord.appendChild(foodItem);
}
}
let wholeDayRecord = [];
function taketheLastData(x, y) {
let dailydata = {};
dailydata["date"] = x;
dailydata["totalCalories"] = y;
wholeDayRecord.push(dailydata);
localStorage.setItem(
"dataBag",
JSON.stringify(wholeDayRecord[wholeDayRecord.length - 1])
);
genBar();
}
function genBar() {
for (let i = 0; i < wholeDayRecord.length; i++) {
const barcontainer = document.createElement("div");
barcontainer.className = "barcontainer";
const barHeight = generateBarHeight(
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
);
barcontainer.innerHTML = `
<div class="bar" style="height: ${barHeight}%"></div>
<div class="day">${wholeDayRecord[wholeDayRecord.length - 1].date}</div>
<div class="totalcalnum">${
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
}</div>
`;
barChartContainer.appendChild(barcontainer);
}
}
//date
const dateContainer = document.getElementById("dateContainer");
const prevButton = document.getElementById("prevButton");
const nextButton = document.getElementById("nextButton");
const currentDateElement = document.getElementById("currentDate");
function generateBarHeight(totalCalories) {
// 在这里根据总热量数据计算柱状图的高度百分比
// 您可以根据实际需求来定义计算逻辑
// 这里简单地将总热量数据除以一个固定值来获取百分比
const maxHeight = 100; // 最大高度百分比
const maxValue = 3000; // 最大的总热量值
const barHeight = (totalCalories / maxValue) * maxHeight;
console.log();
return barHeight;
}
// 调用生成柱状图的函数
genBar();
// function generateBarHeight() {
// var max = 3500;
// var percentage = (sumUp2 / max) * 100;
// return percentage;
// }
// document.getElementById("bar1").style.height = generateBarHeight() + "%";
// document.getElementById("bar2").style.height = generateBarHeight() + "%";
// document.getElementById("bar3").style.height = generateBarHeight() + "%";
// document.getElementById("bar4").style.height = generateBarHeight() + "%";
// document.getElementById("bar5").style.height = generateBarHeight() + "%";
// document.getElementById("bar6").style.height = generateBarHeight() + "%";
// document.getElementById("bar7").style.height = generateBarHeight() + "%";
// var currentDate = new Date();
// document.getElementById("day1").innerHTML = currentDate.getDate() - 6;
// document.getElementById("day2").innerHTML = currentDate.getDate() - 5;
// document.getElementById("day3").innerHTML = currentDate.getDate() - 4;
// document.getElementById("day4").innerHTML = currentDate.getDate() - 3;
// document.getElementById("day5").innerHTML = currentDate.getDate() - 2;
// document.getElementById("day6").innerHTML = currentDate.getDate() - 1;
// document.getElementById("day7").innerHTML = currentDate.getDate();
function getCurrentDateFromMounthandYear(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${month}${year}`;
}
function getCurrentDateFromDate(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${day}`;
}
function updateDate() {
const currentDate = new Date();
currentDateElement.textContent =
getCurrentDateFromMounthandYear(currentDate);
updateWeekChart(currentDate);
}
function goToPreviousDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() - 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
function goToNextDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() + 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
prevButton.addEventListener("click", goToPreviousDay);
nextButton.addEventListener("click", goToNextDay);
updateDate();
});

BIN
task1/testweb-draft2/snapshot.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

564
task1/testweb-draft2/style.css Normal file
View File

@@ -0,0 +1,564 @@
* {
font-family: "Mali", cursive;
font-size: small;
font-weight: 400;
}
.title span{
font-size: 2rem;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.welcome-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.welcome {
width: 100%;
border-radius: 10px;
display: flex;
gap:2rem;
/* width: 75%; */
/* grid-row: 1 / 2; */
padding: 20px 40px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.part1 {
background-color: #ffffff;
/* grid-row: 2 / 4; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
padding: 20px 20px;
/* width: 75%; */
/* height: 110%; */
border-radius: 10px;
/* line-height: 10px; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.part1-body {}
h3 {
margin-top: 5px;
margin-bottom: 15px;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: normal;
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
.form-group label {
text-align: left;
width: 100%;
font-family: "Mali", cursive;
}
.form-group input {
margin-top: 0.5rem;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: calc(100% - 10px);
}
.bmrbtn {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #9162f3;
color: white;
width: 70%;
margin-top: 10px;
}
p {
font-size: 20px;
font-weight: 300;
}
#edit {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 90%;
font-weight: bold;
margin: 30px, 0;
}
.threeBtn {
display: flex;
width: 100%;
font-size: 20px;
align-items: center;
gap: 10px;
}
.three {
border-radius: 10px;
padding: 20px;
border: none;
background-color: #9ffd98;
width: 40%;
color: #000000;
font-weight: bold;
}
#save {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #000000;
width: 50%;
color: #ffffff;
font-weight: bold;
position: relative;
margin-top: 40px;
font-size: 15px;
}
.old-part2 {
background-color: #74f5fd;
border-radius: 10px;
padding: 20px;
grid-column: 2 / 3;
grid-row: 1 / 3;
height: 40%;
width: 100%;
line-height: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.part2 {
background-color: #74f5fd;
border-radius: 10px;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
/* width: 100%; */
/* max-width: 300px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.part2>div>div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.part2 div.input-label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.part2 input {
margin-top: 0.5rem;
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgba(180, 134, 134, 0.3);
width: 100%;
}
.apiInput {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
flex-grow: 1;
}
.apiInput select {
margin-top: 5px;
}
.get_the_calories_btn {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #121212;
color: white;
width: 70%;
margin-top: 10px;
}
#part2result {
background-color: #F5F5F5;
min-height: 300px;
padding: 15px 15px;
border-radius: 10px;
/* grid-column: 2 / 3; */
/* grid-row: 2 / 4; */
/* width: 85%; */
/* height: 93%; */
/* margin-top: 60px; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#result-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
h2 {
font-size: 30px;
font-weight: 700;
margin-top: 60px;
}
#foodname {
font-size: 22px;
}
.line {
font-size: 16px;
border-bottom: 2px dotted #42329b;
width: 80%;
margin-bottom: -1px;
color: #707070;
font-weight: 300;
}
#recordbtn button {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #000000;
width: 80%;
color: #ffffff;
margin-top: 20px;
font-weight: bold;
margin: 10px, 0;
}
.intakeListbtn {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 70%;
color: #000000;
font-weight: bold;
margin-top: 10px;
}
.recorddate {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #844eda;
width: 180px;
height: 50px;
color: #ffffff;
}
.nameCal {
display: flex;
justify-content: space-around;
background-color: #ffffff;
margin-bottom: 5px;
}
.calBar {
display: flex;
justify-content: space-around;
background-color: #ffffff;
}
.part3 {
background-color: #ffffff;
border-radius: 10px;
padding: 8px 30px;
min-height: 300px;
/* grid-column: 3 / 4; */
/* grid-row: 1 / 3; */
/* height: 41vh; */
/* width: 40vh; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin-bottom: 15px;
}
.date {
display: flex;
justify-content: space-between;
}
.datebtn {
border: 0px;
background-color: #ffffff;
}
#dateContainer {
/* position: absolute; */
display: flex;
align-items: center;
top: 10px;
right: 10px;
}
#currentDate {
font-size: 20px;
/* Change the font size as desired */
font-family: "Mali", cursive;
}
.text {
font-size: 50px;
width: 100%;
text-align: center;
}
.container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
margin: 50px auto;
}
.barcontainer {
background-color: #181818;
border-radius: 20px;
position: relative;
transform: translateY(-50%);
top: 80px;
margin-left: 10px;
width: 20px;
height: 150px;
float: left;
border: darken(#98afc7, 40%) 3px solid;
}
.bar {
background-color: #9bc9c7;
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
border-radius: 20px;
border-top: 6px solid #fff;
box-sizing: border-box;
animation: grow 1.5s ease-out forwards;
transform-origin: bottom;
}
@keyframes grow {
from {
transform: scaleY(0);
}
}
.today {
font-size: 30px;
font-weight: 700;
}
#cal-value {
position: relative;
font-size: x-large;
text-align: center;
}
#back {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #ffffff;
width: 30%;
color: #000000;
font-weight: bold;
position: relative;
top: 10px;
}
.part4 {
background-color: #ffffff;
border-radius: 10px;
padding: 8px 20px;
/* grid-column: 3 / 4; */
/* grid-row: 2 / 3; */
/* height: 50vh; */
/* width: 40vh; */
/* position: relative; */
/* top: 90px; */
/* right: 3px; */
/* margin-top: 50px; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
min-height: 300px;
}
.weekly-report {
font-size: 20px;
font-weight: 700;
text-align: left;
}
/* button {
background: none;
border: none;
cursor: pointer;
font-size: 30px;
color: #000;
padding: 0;
margin: 0 30px;} /* Add margin between buttons */
.gender-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.form-group .nickname-label {
width: 100%;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: center;
}
.tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
}
.tile>div {
width: 33%;
}
.weight-group {}
.weight-group input {
margin-bottom: 5px;
margin-right: 0.5rem;
}
.result-header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.result-header div {
font-size: 2rem;
}
.result-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px dotted grey;
}
.result-row div {
font-size: 1.1rem;
}
.foodresult {
width: 100%;
}
#result-container div.result-footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.content-container {
width: 1000px;
height: 750px;
display: flex;
flex-direction: row;
}
/*
.content-container div {
width: 33%;
min-height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} */
.content-column {
width: 33%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.weekly-report-container {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 1.5rem;
}
.weekly-report-container p {
font-weight: bold;
}

249
task1/testweb/index.html Normal file
View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>CalTally</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0" class="giphy-embed"
allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<select class="calorie" id="activityLevelInput" class="form-control">
<option value="sedentary">
Sedentary (little or no exercise)
</option>
<option value="lightlyActive">
Lightly Active (light exercise/sports 1-3 days/week)
</option>
<option value="moderatelyActive">
Moderately Active (moderate exercise/sports 3-5 days/week)
</option>
<option value="veryActive">
Very Active (hard exercise/sports 6-7 days/week)
</option>
<option value="superActive">
Super Active (very hard exercise/sports & physical job or
training)
</option>
</select>
</div>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</button>
</div>
<!--
<div class="barcontainer">
<div class="bar" id="bar1" style="height: 50%"></div>
<div class="day" id="day1"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar2"style="height: 50%"></div>
<div class="day" id="day2"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar3"style="height: 50%"></div>
<div class="day" id="day3"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar4"style="height: 50%"></div>
<div class="day" id="day4"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar5" style="height: 50%"></div>
<div class="day" id="day5"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar6"style="height: 50%"></div>
<div class="day" id="day6"></div>
</div>
<div class="barcontainer">
<div class="bar" id="bar7" style="height: 50%"></div>
<div class="day" id="day7"></div>
</div> -->
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

499
task1/testweb/index.js Normal file
View File

@@ -0,0 +1,499 @@
document.addEventListener("DOMContentLoaded", function () {
var healthForm = document.getElementById("healthForm");
var submitBtn = document.getElementById("submitBtn");
var questionContainer = document.getElementById("questionContainer");
var resultBmr = document.getElementById("result");
var calValue = document.getElementById("cal-value");
var calValueText = document.createElement("h1");
// var part2Result = document.getElementById("part2result");
var resultContainer = document.getElementById("result-container");
var caloriesRecord = document.createElement("div");
var goalChoice = document.getElementsByName("goal_weight");
var formTitle = document.getElementById("form-title");
var barChartContainer = document.getElementById("container");
//input value
//var dailyCalorie = document.getElementsByClassName("part3");
//calculate bmr
function bmrFunction() {
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
var genderMultiplier = 0;
if (gender === "male") {
genderMultiplier = 1;
}
var activityLevelMultiplier = 0;
if (activityLevel === "sedentary") {
activityLevelMultiplier = 1.2;
} else if (activityLevel === "lightlyActive") {
activityLevelMultiplier = 1.375;
} else if (activityLevel === "moderatelyActive") {
activityLevelMultiplier = 1.55;
} else if (activityLevel === "veryActive") {
activityLevelMultiplier = 1.72;
} else if (activityLevel === "superActive") {
activityLevelMultiplier = 1.9;
}
const result =
9.99 * weight +
6.25 * height -
4.92 * age +
(166 * genderMultiplier - 161);
const bmrresult = result * activityLevelMultiplier;
return bmrresult;
}
//submit bmr form and click function
healthForm.addEventListener("submit", function (event) {
event.preventDefault();
var name = document.getElementById("nameInput").value;
var resultBmr = document.getElementById("result");
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
var height = document.getElementById("heightInput").value;
var weight = document.getElementById("weightInput").value;
var activityLevel = document.getElementById("activityLevelInput").value;
resultBmr.innerHTML = ""; // 清空结果元素的内容
formTitle.innerHTML = "";
var resultText = document.createElement("h3");
resultText.innerHTML = `<p>Hello! ${name}.</p>
<p>Your daily calorie intake: </p>
<div id="intake-contain"></div>
<button id="edit">Edit & Calculate again</button>
<div class="threeBtn">
<form>
<p>Which goal would you like to achieve?</p>
<input type="radio" id="maintain" name="goal_weight" value="maintain-weight">
<label for="html">Maintain Weight (+- 0cal)</label><br>
<input type="radio" id="loss" name="goal_weight" value="loss-weight">
<label for="css">Loss Weight (- 300cals)</label><br>
<input type="radio" id="gain" name="goal_weight" value="gain-weight">
<label for="javascript">Gain Weight (+ 300cals)</label></form>
</div>
<div id="saveBtn-contain"></div>
`;
resultBmr.appendChild(resultText);
healthForm.style.display = "none";
const intakeContain = document.getElementById("intake-contain");
const intakeNum = document.createElement("h2");
intakeNum.innerText = `${Math.round(bmrFunction())}cal`;
intakeContain.appendChild(intakeNum);
localStorage.setItem("user", name);
localStorage.setItem("userAge", age);
localStorage.setItem("userGender", gender);
localStorage.setItem("userHeight", height);
localStorage.setItem("userWeight", weight);
localStorage.setItem("userActivityLevel", activityLevel);
localStorage.setItem("bmrResult", bmrFunction());
// localStorage.getItem("user");
// JSON.parse(localStorage.getItem("userAge"));
// JSON.parse(localStorage.getItem("userGender"));
// JSON.parse(localStorage.getItem("userHeight"));
// JSON.parse(localStorage.getItem("userWeight"));
// JSON.parse(localStorage.getItem("userActivityLevel"));
// JSON.parse(localStorage.getItem("bmrResult"));
function btn1() {
//var maintainWeight = document.getElementById("maintain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction())}cal`);
}
function btn2() {
//var lossWeight = document.getElementById("loss-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) - 300}cal`);
}
function btn3() {
//var gainWeight = document.getElementById("gain-weight");
return (intakeNum.innerText = `${Math.round(bmrFunction()) + 300}cal`);
}
var editBtn = document.getElementById("edit");
editBtn.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
resultBmr.style.display = "none";
resultText.innerHTML = "";
});
var maintainWeight = document.getElementById("maintain");
maintainWeight.addEventListener("click", btn1);
var lossWeight = document.getElementById("loss");
lossWeight.addEventListener("click", btn2);
var gainWeight = document.getElementById("gain");
gainWeight.addEventListener("click", btn3);
var goalvalue;
for (var i = 0; i < goalChoice.length; i++) {
goalChoice[i].addEventListener("click", function () {
if (this.value === "maintain-weight") {
goalvalue = Math.round(bmrFunction()) + 0;
} else if (this.value === "loss-weight") {
goalvalue = Math.round(bmrFunction()) - 300;
} else if (this.value === "gain-weight") {
goalvalue = Math.round(bmrFunction()) + 300;
}
});
}
var saveBtnContain = document.getElementById("saveBtn-contain");
var saveBtn = document.createElement("button");
saveBtn.innerText = "Save";
saveBtn.id = "saveBtn";
saveBtnContain.appendChild(saveBtn);
saveBtn.addEventListener("click", function () {
resultText.innerHTML = `<p>Your daily calorie intake: </p>
<h2>${goalvalue}cals</h2>
<button id="edittwo">Edit & Calculate again</button>
`;
calValueText.innerText = `${goalvalue}cal`;
calValue.appendChild(calValueText);
});
var editBtnTwo = document.getElementById("edittwo");
editBtnTwo.addEventListener("click", function clickFn() {
healthForm.style.display = "block";
calValue.style.display = "none";
resultText.innerHTML = "";
});
});
// Clear input fields
// document.getElementById("ageInput").value = "";
// document.getElementById("heightInput").value = "";
// document.getElementById("weightInput").value = "";
//Hide form and show question
questionContainer.style.display = "block";
// foodSubmitBtn.addEventListener("click", function () {
// var foodIntake = foodInput.value;
// // Clear input field
// foodInput.value = "";
// // Process food intake data
// console.log("Food Intake:", foodIntake);
// });
// function addFoodCa(x, y) {
// var calBar = document.createElement("div");
// calBar.classList.add("calBar");
// calBar.innerHTML = `<div>${x}</div><div>${y}</div>`;
// caloriesRecord.appendChild(calBar);
// }
//calculate food calorie
const calculateBtn = document.getElementById("calculate-btn");
calculateBtn.addEventListener("click", fetchData);
async function fetchData() {
const foodWeightInput = document.getElementById("food-weight-input");
const unitSelect = document.getElementById("unit-select");
const foodNameInput = document.getElementById("food-name-input");
const query = `${foodWeightInput.value}${unitSelect.value} ${foodNameInput.value}`;
try {
const res = await fetch(
"https://api.api-ninjas.com/v1/nutrition?query=" + query,
{
headers: {
"X-Api-Key": "HQR305Z28JdtTlSD7bzr2g==syWXu3chI7wcfy3N",
"Content-Type": "application/json",
},
}
);
const data = await res.json();
console.log(data);
resultContainer.innerHTML = "";
// Display the data in the result container
var foodResultText = document.createElement("div");
foodResultText.className = "foodresult";
foodResultText.innerHTML = `
<div>
<h2>Results:</h2>
</div>
<div class="result-header">
<div>Name:</div>
<div>Brisket</div>
</div>
<div class="line result-row" id="serving_size">
<div>Serving Size:</div>
<div>${data[0].serving_size_g}g</div>
</div>
<div class="line result-row" id="foodname">
<div>Name:</div>
<div>${data[0].name}</div>
</div>
<div class="line result-row" id="serving_size">
<div>Serving Size:</div>
<div>${data[0].serving_size_g}g</div>
</div>
<div class="line result-row" id="calories">
<div>Calories:</div>
<div>${data[0].calories} cal</div>
</div>
<div class="line result-row">
<div>Protein:</div>
<div>${data[0].protein_g} g</div>
</div>
<div class="line result-row">
<div>Fiber:</div>
<div>${data[0].fiber_g} g</div>
</div>
<div class="line result-row">
<div>Total Fat:</div>
<div>${data[0].fat_total_g} g</div>
</div>
<div class="line result-row">
<div>Saturated Fat:</div>
<div>${data[0].fat_saturated_g} g</div>
</div>
<div class="line result-row">
<div>Cholesterol:</div>
<div>${data[0].cholesterol_mg} g</div>
</div>
<div class="line result-row">
<div>Total Carbohydrates:</div>
<div>${data[0].carbohydrates_total_g} g</div>
</div>
<div class="result-footer">
<button type="button" class="foodbtn" id="recordbtn">
Save in the intake list
</button>
</div.
`;
resultContainer.appendChild(foodResultText);
foodWeightInput.value = "";
foodNameInput.value = "";
var part2Result = document.getElementById("part2Result");
var recordbtn = document.getElementById("recordbtn");
recordbtn.addEventListener("click", function clickFn() {
//part2Result.style.backgroundColor = "#c7a5fa";
foodResultText.style.display = "none";
caloriesRecord.className = "calorierecord";
caloriesRecord.innerHTML = `
<button id="back">Back</button>
<h3>Calories Tracking Record</h3>
<div class="recorddate"></div><br>
<div class="nameCal">
<div>Name</div>
<div>Calories</div>
</div>
`;
foodIntakeRecording(data[0].name, data[0].calories);
sumUp();
//localStorage.setItem(`${new Date()}`, sumUp2());
taketheLastData(getCurrentDateFromDate(new Date()), sumUp2());
resultContainer.appendChild(caloriesRecord);
//calValueText.innerText = `${goalvalue - sumUp2()}cal`;
// var back = document.getElementById("back");
// back.addEventListener("click", function clickFn() {
// foodResultText.style.display = "block";
// foodResultText.style.backgroundColor = "#5cf089";
// caloriesRecord.style.display = "none";
// });
});
} catch (err) {
console.log("ERR:", err);
}
}
let allFoodRecord = [];
function foodIntakeRecording(foodName, calories) {
let food = {};
food["Name"] = foodName;
food["Calories"] = calories;
allFoodRecord.push(food);
localStorage.setItem("dataBag", JSON.stringify(allFoodRecord));
genTable();
}
function sumUp() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
const totalCal = document.createElement("div");
totalCal.className = "totalcal";
totalCal.innerHTML = `<div>Total Calories: ${totalCalories}</div>`;
caloriesRecord.appendChild(totalCal);
}
function sumUp2() {
const totalCalories = allFoodRecord.reduce(
(accumulator, currentValue) => accumulator + currentValue.Calories,
0
);
return totalCalories;
}
function genTable() {
//caloriesRecord.innerHTML = "";
for (let i = 0; i < allFoodRecord.length; i++) {
const foodItem = document.createElement("div");
foodItem.className = "fooditem";
foodItem.innerHTML = `
<div>${allFoodRecord[i].Name}${allFoodRecord[i].Calories}</div>
`;
caloriesRecord.appendChild(foodItem);
}
}
let wholeDayRecord = [];
function taketheLastData(x, y) {
let dailydata = {};
dailydata["date"] = x;
dailydata["totalCalories"] = y;
wholeDayRecord.push(dailydata);
localStorage.setItem(
"dataBag",
JSON.stringify(wholeDayRecord[wholeDayRecord.length - 1])
);
genBar();
}
function genBar() {
for (let i = 0; i < wholeDayRecord.length; i++) {
const barcontainer = document.createElement("div");
barcontainer.className = "barcontainer";
const barHeight = generateBarHeight(
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
);
barcontainer.innerHTML = `
<div class="bar" style="height: ${barHeight}%"></div>
<div class="day">${wholeDayRecord[wholeDayRecord.length - 1].date}</div>
<div class="totalcalnum">${
wholeDayRecord[wholeDayRecord.length - 1].totalCalories
}</div>
`;
barChartContainer.appendChild(barcontainer);
}
}
//date
const dateContainer = document.getElementById("dateContainer");
const prevButton = document.getElementById("prevButton");
const nextButton = document.getElementById("nextButton");
const currentDateElement = document.getElementById("currentDate");
function generateBarHeight(totalCalories) {
// 在这里根据总热量数据计算柱状图的高度百分比
// 您可以根据实际需求来定义计算逻辑
// 这里简单地将总热量数据除以一个固定值来获取百分比
const maxHeight = 100; // 最大高度百分比
const maxValue = 3000; // 最大的总热量值
const barHeight = (totalCalories / maxValue) * maxHeight;
console.log();
return barHeight;
}
// 调用生成柱状图的函数
genBar();
// function generateBarHeight() {
// var max = 3500;
// var percentage = (sumUp2 / max) * 100;
// return percentage;
// }
// document.getElementById("bar1").style.height = generateBarHeight() + "%";
// document.getElementById("bar2").style.height = generateBarHeight() + "%";
// document.getElementById("bar3").style.height = generateBarHeight() + "%";
// document.getElementById("bar4").style.height = generateBarHeight() + "%";
// document.getElementById("bar5").style.height = generateBarHeight() + "%";
// document.getElementById("bar6").style.height = generateBarHeight() + "%";
// document.getElementById("bar7").style.height = generateBarHeight() + "%";
// var currentDate = new Date();
// document.getElementById("day1").innerHTML = currentDate.getDate() - 6;
// document.getElementById("day2").innerHTML = currentDate.getDate() - 5;
// document.getElementById("day3").innerHTML = currentDate.getDate() - 4;
// document.getElementById("day4").innerHTML = currentDate.getDate() - 3;
// document.getElementById("day5").innerHTML = currentDate.getDate() - 2;
// document.getElementById("day6").innerHTML = currentDate.getDate() - 1;
// document.getElementById("day7").innerHTML = currentDate.getDate();
function getCurrentDateFromMounthandYear(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${month}${year}`;
}
function getCurrentDateFromDate(date) {
const year = date.getFullYear();
const month = new Intl.DateTimeFormat("en-US", {
month: "short",
}).format(date);
const day = String(date.getDate()).padStart(2, "0");
return `${day}`;
}
function updateDate() {
const currentDate = new Date();
currentDateElement.textContent =
getCurrentDateFromMounthandYear(currentDate);
updateWeekChart(currentDate);
}
function goToPreviousDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() - 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
function goToNextDay() {
const currentDate = new Date(currentDateElement.textContent);
currentDate.setDate(currentDate.getDate() + 1);
currentDateElement.textContent = getCurrentDateFromDate(currentDate);
updateWeekChart(currentDate);
}
prevButton.addEventListener("click", goToPreviousDay);
nextButton.addEventListener("click", goToNextDay);
updateDate();
});

560
task1/testweb/style.css Normal file
View File

@@ -0,0 +1,560 @@
* {
font-family: "Mali", cursive;
font-size: small;
font-weight: 400;
}
.big-container {
background-image: ;
background-color: contain;
border-radius: 50px;
grid-gap: 20px;
padding: 5px;
width: 1000px;
height: 750px;
display: grid;
grid-template-columns: 32% 30% 45%;
grid-template-rows: 25% 45% 18%;
}
.title {
text-align: center;
font-size: 30px;
}
.welcome {
background-color: #ffffff;
display: flex;
border-radius: 50px;
/* width: 75%; */
/* grid-row: 1 / 2; */
padding: 20px 40px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1 {
background-color: #ffffff;
/* grid-row: 2 / 4; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
padding: 20px 20px;
/* width: 75%; */
/* height: 110%; */
border-radius: 50px;
/* line-height: 10px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part1-body {
}
h3 {
margin-top: 5px;
margin-bottom: 15px;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: normal;
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
.form-group label {
text-align: left;
width: 100%;
font-family: "Mali", cursive;
}
.form-group input {
margin-top: 0.5rem;
}
.form-control {
background-color: #f0f0f0;
padding: 5px;
border-radius: 8px;
border: 1px solid #707070;
width: calc(100% - 10px);
}
.bmrbtn {
border-radius: 50px;
padding: 10px;
border: none;
background-color: #9162f3;
color: white;
width: 70%;
margin-top: 10px;
}
p {
font-size: 20px;
font-weight: 300;
}
#edit {
border-radius: 10px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 90%;
font-weight: bold;
margin: 30px, 0;
}
.threeBtn {
display: flex;
width: 100%;
font-size: 20px;
align-items: center;
gap: 10px;
}
.three {
border-radius: 10px;
padding: 20px;
border: none;
background-color: #9ffd98;
width: 40%;
color: #000000;
font-weight: bold;
}
#save {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #000000;
width: 50%;
color: #ffffff;
font-weight: bold;
position: relative;
margin-top: 40px;
font-size: 15px;
}
.old-part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
grid-column: 2 / 3;
grid-row: 1 / 3;
height: 40%;
width: 100%;
line-height: 15px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
.part2 {
background-color: #74f5fd;
border-radius: 50px;
padding: 20px;
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
/* width: 100%; */
/* max-width: 300px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.part2>div>div{
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
}
.part2 div.input-label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.part2 input {
margin-top:0.5rem;
}
.calorie {
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 8px;
border: 1px solid rgba(180, 134, 134, 0.3);
width:100%;
}
.apiInput {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
flex-grow: 1;
}
.apiInput select {
margin-top: 5px;
}
.foodbtn {
border-radius: 50px;
padding: 10px;
border: none;
background-color: #000000;
color: white;
width: 70%;
margin-top: 10px;
}
#part2result {
background-color: #9ffd98;
min-height: 300px;
padding: 15px 15px;
border-radius: 50px;
/* grid-column: 2 / 3; */
/* grid-row: 2 / 4; */
/* width: 85%; */
/* height: 93%; */
/* margin-top: 60px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
}
#result-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
flex-grow: 1;
}
h2 {
font-size: 30px;
font-weight: 700;
margin-top: 60px;
}
#foodname {
font-size: 22px;
}
.line {
font-size: 16px;
border-bottom: 2px dotted #42329b;
width: 80%;
margin-bottom: -1px;
color: #707070;
font-weight: 300;
}
#recordbtn button {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #000000;
width: 80%;
color: #ffffff;
margin-top: 20px;
font-weight: bold;
margin: 10px, 0;
}
.intakeListbtn {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #d9caf8;
width: 70%;
color: #000000;
font-weight: bold;
margin-top: 10px;
}
.recorddate {
border-radius: 15px;
padding: 10px;
border: none;
background-color: #844eda;
width: 180px;
height: 50px;
color: #ffffff;
}
.nameCal {
display: flex;
justify-content: space-around;
background-color: #ffffff;
margin-bottom: 5px;
}
.calBar {
display: flex;
justify-content: space-around;
background-color: #ffffff;
}
.part3 {
background-color: #ffffff;
border-radius: 50px;
padding: 8px 30px;
min-height: 300px;
/* grid-column: 3 / 4; */
/* grid-row: 1 / 3; */
/* height: 41vh; */
/* width: 40vh; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
margin-bottom: 15px;
}
.date {
display: flex;
justify-content: space-between;
}
.datebtn {
border: 0px;
background-color: #ffffff;
}
#dateContainer {
/* position: absolute; */
display: flex;
align-items: center;
top: 10px;
right: 10px;
}
#currentDate {
font-size: 20px; /* Change the font size as desired */
font-family: "Mali", cursive;
}
.text {
font-size: 50px;
width: 100%;
text-align: center;
}
.container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
margin: 50px auto;
}
.barcontainer {
background-color: #181818;
border-radius: 20px;
position: relative;
transform: translateY(-50%);
top: 80px;
margin-left: 10px;
width: 20px;
height: 150px;
float: left;
border: darken(#98afc7, 40%) 3px solid;
}
.bar {
background-color: #9bc9c7;
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
border-radius: 20px;
border-top: 6px solid #fff;
box-sizing: border-box;
animation: grow 1.5s ease-out forwards;
transform-origin: bottom;
}
@keyframes grow {
from {
transform: scaleY(0);
}
}
.today {
font-size: 30px;
font-weight: 700;
}
#cal-value {
position: relative;
font-size: x-large;
text-align: center;
}
#back {
border-radius: 10px;
padding: 5px;
border: none;
background-color: #ffffff;
width: 30%;
color: #000000;
font-weight: bold;
position: relative;
top: 10px;
}
.part4 {
background-color: #ffffff;
border-radius: 50px;
padding: 8px 20px;
/* grid-column: 3 / 4; */
/* grid-row: 2 / 3; */
/* height: 50vh; */
/* width: 40vh; */
/* position: relative; */
/* top: 90px; */
/* right: 3px; */
/* margin-top: 50px; */
box-shadow: 5px 5px 3px 0px rgba(209, 209, 209, 0.7);
min-height: 300px;
}
.weekly-report {
font-size: 20px;
font-weight: 700;
text-align: left;
}
/* button {
background: none;
border: none;
cursor: pointer;
font-size: 30px;
color: #000;
padding: 0;
margin: 0 30px;} /* Add margin between buttons */
.gender-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.form-group .nickname-label{
width: 100%;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: center;
}
.tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
}
.tile>div{
width: 33%;
}
.weight-group {
}
.weight-group input {
margin-bottom: 5px;
margin-right: 0.5rem;
}
.result-header {
width: 100%;
display: flex;
flex-direction : row;
justify-content: space-between;
}
.result-header div {
font-size:2rem;
}
.result-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px dotted grey;
}
.result-row div {
font-size: 1.1rem;
}
.foodresult {
width: 100%;
}
#result-container div.result-footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.content-container{
width: 1000px;
height: 750px;
display: flex;
flex-direction: row;
}
/*
.content-container div {
width: 33%;
min-height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} */
.content-column {
width: 33%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.weekly-report-container {
display: flex;
flex-direction: row;
justify-content:space-between;
font-size: 1.5rem;
}
.weekly-report-container p{
font-weight: bold;
}

BIN
task2-quote/Web App.pdf Normal file
View File

Binary file not shown.

23
task3-quote/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

BIN
task3-quote/149358dc-358b-4f1d-bb55-6a3433ab47b6_progressive (1).jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 841 KiB

70
task3-quote/README.md Normal file
View File

@@ -0,0 +1,70 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

19355
task3-quote/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

52
task3-quote/package.json Normal file
View File

@@ -0,0 +1,52 @@
{
"name": "fewd-final-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.2",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"force": "^0.0.3",
"framer-motion": "^10.17.9",
"lottie-react": "^2.4.0",
"react": "^18.2.0",
"react-calendar": "^4.8.0",
"react-dom": "^18.2.0",
"react-image-gallery": "^1.3.0",
"react-leaflet": "^4.2.1",
"react-material-ui-carousel": "^3.4.2",
"react-router-dom": "^6.21.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
task3-quote/public/BannerImgs/banner.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 MiB

BIN
task3-quote/public/BannerImgs/banner.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/BannerImgs/banner2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
task3-quote/public/BeforeadoptImgs/adoptionpagebg.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/BeforeadoptImgs/bg1.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

3976
task3-quote/public/BeforeadoptImgs/bottomlayer.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 428 KiB

31
task3-quote/public/BeforeadoptImgs/mediumlayer.svg Normal file
View File

@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 970.17 605.42" style="enable-background:new 0 0 970.17 605.42;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FCF9ED;}
</style>
<g id="Background">
</g>
<g id="Shadow">
</g>
<g id="Graphic_Elements">
<g>
<g>
<path class="st0" d="M34.14,0L0,554.21l936.03,51.21l34.14-554.21L34.14,0z M42.93,520.26c-7.02-0.43-12.36-6.53-11.93-13.63
c0.44-7.09,6.48-12.49,13.51-12.06c7.02,0.43,12.36,6.53,11.93,13.63C56,515.29,49.95,520.69,42.93,520.26z M46.43,463.31
c-7.02-0.43-12.36-6.53-11.93-13.63c0.44-7.09,6.48-12.49,13.51-12.06c7.02,0.43,12.36,6.53,11.93,13.63
C59.5,458.34,53.46,463.74,46.43,463.31z M49.94,406.36c-7.02-0.43-12.36-6.53-11.93-13.63c0.44-7.09,6.48-12.49,13.51-12.06
c7.02,0.43,12.36,6.53,11.93,13.63C63.01,401.39,56.97,406.79,49.94,406.36z M53.45,349.41c-7.02-0.43-12.36-6.53-11.93-13.63
c0.44-7.09,6.48-12.49,13.51-12.06c7.02,0.43,12.36,6.53,11.93,13.63C66.52,344.44,60.47,349.84,53.45,349.41z M56.96,292.46
c-7.02-0.43-12.36-6.53-11.93-13.63c0.44-7.09,6.48-12.49,13.51-12.06c7.02,0.43,12.36,6.53,11.93,13.63
C70.03,287.49,63.98,292.89,56.96,292.46z M60.47,235.51c-7.02-0.43-12.36-6.53-11.93-13.63c0.44-7.09,6.48-12.49,13.51-12.06
c7.02,0.43,12.36,6.53,11.93,13.63C73.54,230.54,67.49,235.94,60.47,235.51z M63.98,178.55c-7.02-0.43-12.36-6.53-11.93-13.63
c0.44-7.09,6.48-12.49,13.51-12.06c7.02,0.43,12.36,6.53,11.93,13.63C77.05,173.59,71,178.99,63.98,178.55z M67.48,121.6
c-7.02-0.43-12.36-6.53-11.93-13.63c0.44-7.09,6.48-12.49,13.51-12.06c7.02,0.43,12.36,6.53,11.93,13.63
C80.56,116.64,74.51,122.04,67.48,121.6z M70.99,64.65c-7.02-0.43-12.36-6.53-11.93-13.63c0.44-7.09,6.48-12.49,13.51-12.06
C79.6,39.4,84.94,45.5,84.5,52.59C84.06,59.68,78.02,65.09,70.99,64.65z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
task3-quote/public/BeforeadoptImgs/paw.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

36479
task3-quote/public/BeforeadoptImgs/toplayer.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
task3-quote/public/Imgs/case01.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

150
task3-quote/public/Imgs/cat-and-dog.svg Normal file
View File

@@ -0,0 +1,150 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 771.9 504.6" style="enable-background:new 0 0 771.9 504.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F1F2F2;}
.st1{fill:#58595B;}
.st2{fill:#FEC872;}
.st3{fill:#F4B962;}
.st4{fill:#6D6E71;}
.st5{fill:#FBED73;}
.st6{fill:#939598;}
.st7{fill:#CFAA96;}
.st8{fill:#C4A191;}
.st9{fill:#666666;}
.st10{fill:#EBF0F3;}
.st11{fill:#4D4D4D;}
</style>
<path class="st0" d="M4.1,81.7c0.8,6.7,6.1,11.9,12.7,12.9c18.5,2.3,37.2,3.2,55.8,2.8l33.5,37.2L95.4,96.3
c6.9-0.5,13.7-1.1,20.7-1.9c6.6-0.8,11.9-6,12.9-12.6c3.1-21.1,3.1-42.5-0.2-63.5c-1-6.6-6.2-11.8-12.8-12.7
c-32.8-4.9-66.2-4.9-99.1,0C10.2,6.5,5,11.7,4.1,18.3C1.2,39.4,1.2,60.7,4.1,81.7z"/>
<path class="st1" d="M106.2,136.5c-0.5,0-1.1-0.2-1.4-0.6L71.8,99.3c-18.4,0.3-36.9-0.6-55.2-2.8C9,95.4,3.1,89.5,2.2,81.9
c-2.9-21.2-2.9-42.7,0-63.8C3.3,10.6,9.1,4.7,16.6,3.6c33-4.9,66.6-4.9,99.6,0c7.4,1,13.3,6.9,14.4,14.3c3.3,21.2,3.4,42.8,0.2,64.1
c-1.1,7.5-7.1,13.3-14.6,14.2c-5.8,0.7-11.8,1.2-18.4,1.7l10.2,36c0,0.2,0.1,0.3,0.1,0.5C108.1,135.6,107.2,136.5,106.2,136.5
L106.2,136.5z M17.1,7.4C11.3,8.2,6.7,12.8,6,18.6c-2.8,20.8-2.8,42,0,62.8c0.7,5.8,5.3,10.4,11.1,11.2c18.4,2.3,37,3.2,55.5,2.8
c0.6,0,1.1,0.2,1.5,0.6l28.1,31.2l-8.6-30.4c-0.2-0.6-0.1-1.1,0.3-1.6c0.3-0.5,0.8-0.8,1.4-0.8c7.4-0.5,14.2-1.1,20.6-1.9
c5.8-0.7,10.4-5.2,11.2-11c3.1-20.9,3-42.1-0.2-63c-0.8-5.8-5.4-10.3-11.2-11.1C99.3,5,82.9,3.8,66.4,3.8C49.9,3.8,33.4,5,17.1,7.4z
"/>
<path class="st2" d="M211.3,283.7c-66.5,0-123.1,100-145.2,210.2h290.5C334.4,383.7,277.7,283.7,211.3,283.7L211.3,283.7z"/>
<path class="st1" d="M66,495.9c-0.1,0-0.3,0-0.4,0c-1-0.2-1.7-1.2-1.5-2.2c0,0,0,0,0,0c11.3-56.6,31.3-108.8,56.2-147.1
c27.5-42.3,58.9-64.6,90.9-64.6s63.3,22.4,90.9,64.6c24.9,38.3,44.9,90.6,56.2,147.1c0.2,1-0.5,2-1.5,2.2c-1,0.2-2-0.5-2.2-1.5
c-28.7-143.4-94.5-208.7-143.4-208.7S96.6,350.9,67.9,494.3C67.7,495.2,66.9,495.9,66,495.9L66,495.9z"/>
<path class="st2" d="M288.2,335.3c41.7-35.7,44-88.6,0.8-137.3c-1.8-14.4-12.5-88.8-34.7-98.4c-18.3-7.9-43.8,29.7-55.5,49.4
c-15.7-2-31.6-0.9-46.9,3.2c-15.2,4.5-29.3,11.9-41.7,21.8c-20.4-10.7-61.7-29.4-73.2-13.1c-13.9,19.8,16,88.9,21.9,102.1
c-10.1,56.9,12.2,97.9,55.1,112.4"/>
<path class="st1" d="M113.9,377.3c-0.2,0-0.4,0-0.6-0.1c-45.1-15.3-66.2-57.9-56.5-114c-8.9-19.9-35.5-83.5-21.5-103.4
c11.9-17,51.3-0.1,74.5,11.9c12.3-9.7,26.4-17,41.5-21.4c15.1-4.1,30.8-5.3,46.4-3.4c13.5-22.4,38.3-57.4,57.3-49.1
c22.4,9.7,32.9,77.7,35.8,99.4c22.3,25.3,33.1,52.5,31.4,78.7c-1.6,22.9-12.9,44-32.7,61c-0.8,0.7-2,0.6-2.7-0.2
c-0.7-0.8-0.6-2,0.2-2.7c19-16.3,29.9-36.5,31.4-58.3c1.7-25.3-8.9-51.6-30.8-76.3c-0.3-0.3-0.4-0.6-0.5-1
c-5.2-40.3-17.1-89.8-33.6-96.9c-17.3-7.5-42.9,31.5-53.1,48.7c-0.4,0.6-1.1,1-1.9,0.9c-15.4-1.9-31.1-0.8-46.1,3.2
c-15,4.4-28.9,11.7-41.1,21.5c-0.6,0.5-1.4,0.5-2.1,0.2c-17.7-9.2-59.9-29.1-70.8-13.7c-10.3,14.7,5.4,63.1,22.1,100.2
c0.2,0.3,0.2,0.7,0.1,1.1c-9.6,54.4,10.5,95.6,53.8,110.3c1,0.3,1.5,1.4,1.2,2.4C115.5,376.8,114.7,377.3,113.9,377.3L113.9,377.3z"
/>
<path class="st3" d="M255.9,113.7c-15.3-6.6-41,41-41,41c20.3,5.2,41,17.8,62,34.7C276.9,189.5,271.2,120.4,255.9,113.7z"/>
<path class="st3" d="M42.9,173.9c9.6-13.6,55.8,13.4,55.8,13.4c-15.2,15.7-26.9,38.2-34.2,62.1C64.5,249.4,33.3,187.5,42.9,173.9z"
/>
<ellipse transform="matrix(0.9623 -0.2721 0.2721 0.9623 -46.5621 75.048)" class="st1" cx="247.3" cy="205.4" rx="5" ry="6.6"/>
<ellipse transform="matrix(0.9623 -0.2721 0.2721 0.9623 -58.5971 47.5988)" class="st1" cx="142.3" cy="235.1" rx="5" ry="6.6"/>
<path class="st4" d="M196.5,263.2l7.1,5.9c2.5,2.1,6.3,1.7,8.3-0.8c0.5-0.6,0.8-1.2,1-1.9l3-8.7c1.1-3.1-0.6-6.5-3.7-7.5
c-1.1-0.4-2.4-0.4-3.6-0.1l-10.1,2.8c-3.2,0.9-5,4.2-4.1,7.3C194.8,261.4,195.5,262.5,196.5,263.2L196.5,263.2z"/>
<g>
<path class="st1" d="M207.3,272.4c-1.8,0-3.6-0.6-5-1.8l-7.1-5.9c-3.3-2.8-3.8-7.7-1-11c1-1.2,2.4-2.1,3.9-2.5l10.1-2.8
c4.2-1.2,8.5,1.3,9.7,5.4c0.4,1.5,0.4,3.1-0.1,4.6l-3,8.7C213.6,270.3,210.7,272.4,207.3,272.4L207.3,272.4z M210.3,251.8
c-0.4,0-0.8,0.1-1.1,0.2l-10.1,2.8c-2.1,0.6-3.4,2.8-2.8,5c0.2,0.8,0.7,1.5,1.3,2l7.1,5.9c1.7,1.4,4.2,1.2,5.7-0.5
c0.3-0.4,0.6-0.8,0.7-1.3l3-8.7c0.7-2.1-0.4-4.4-2.5-5.1C211.2,251.9,210.8,251.8,210.3,251.8L210.3,251.8z"/>
<path class="st1" d="M221.9,291.3c-1.6,0-3.3-0.3-4.8-0.9c-3.5-1.5-6-4.5-6.8-8.2c-0.3-1,0.4-2.1,1.4-2.3c1-0.2,2,0.3,2.3,1.3
c0.5,2.5,2.2,4.6,4.5,5.7c6,2.4,15.3-3.1,15.4-3.2c0.9-0.5,2.1-0.2,2.6,0.7c0.5,0.9,0.2,2.1-0.7,2.6l0,0
C231.7,289.5,226.9,291,221.9,291.3L221.9,291.3z"/>
<path class="st1" d="M192.3,298.9c-1.1,0-1.9-0.8-1.9-1.9c0-1.1,0.8-1.9,1.9-1.9c3.6-0.1,13.7-1.3,17.2-6.1c1.4-2,1.7-4.5,0.9-6.7
l-3.2-11.4c-0.3-1,0.3-2.1,1.3-2.4c1-0.3,2.1,0.3,2.4,1.3l3.2,11.4c1.2,3.4,0.6,7.1-1.5,10.1C207.1,298.5,192.9,298.9,192.3,298.9
L192.3,298.9z"/>
<path class="st1" d="M267.5,253.2c-1.1,0-1.9-0.9-1.9-1.9c0-0.7,0.4-1.4,1.1-1.7l77.3-37.2c0.9-0.5,2.1-0.2,2.6,0.8
c0.5,0.9,0.2,2.1-0.8,2.6c-0.1,0-0.1,0.1-0.2,0.1L268.3,253C268.1,253.1,267.8,253.2,267.5,253.2L267.5,253.2z"/>
<path class="st1" d="M273.1,272.9c-1.1,0.1-1.9-0.8-2-1.8c-0.1-1.1,0.8-1.9,1.8-2l85.3-8.7c1-0.1,2,0.7,2.1,1.7
c0.1,1-0.7,2-1.7,2.1l-85.3,8.7C273.2,272.9,273.1,272.9,273.1,272.9L273.1,272.9z"/>
<path class="st1" d="M270.4,263.6c-1.1,0-1.9-0.9-1.9-1.9c0-0.9,0.6-1.6,1.4-1.8l81.6-21.8c1-0.3,2.1,0.4,2.3,1.4
c0.2,1-0.3,2-1.3,2.3l-81.6,21.8C270.8,263.6,270.6,263.6,270.4,263.6L270.4,263.6z"/>
<path class="st1" d="M64.2,296.7c-1.1,0.1-1.9-0.8-2-1.8c-0.1-1.1,0.8-1.9,1.8-2l85.3-8.7c1-0.1,2,0.7,2.1,1.7c0.1,1-0.7,2-1.7,2.1
c0,0,0,0,0,0l-85.3,8.7L64.2,296.7z"/>
<path class="st1" d="M77.1,342.5c-1.1,0-1.9-0.8-1.9-1.9c0-0.7,0.4-1.4,1.1-1.7l77.3-37.2c0.9-0.5,2.1-0.1,2.6,0.8
c0.5,0.9,0.1,2.1-0.8,2.6c0,0-0.1,0-0.1,0.1l-77.3,37.2C77.7,342.4,77.4,342.5,77.1,342.5L77.1,342.5z"/>
<path class="st1" d="M71.4,322.2c-1.1,0-1.9-0.9-1.9-1.9c0-0.8,0.5-1.6,1.3-1.8l80.6-25.2c1-0.3,2.1,0.2,2.4,1.2
c0.3,1-0.2,2.1-1.2,2.4L72,322.1C71.8,322.2,71.6,322.2,71.4,322.2L71.4,322.2z"/>
</g>
<g>
<path class="st5" d="M63.1,28c-6.5,1-12,5-15,10.9c-4.9,9.9-0.9,22,9,26.9c3.9,1.9,6.8,5.2,8.2,9.2l15.2-4.2
c-0.9-4.1-0.2-8.3,2.2-11.8c2.8-4.2,4-9.2,3.2-14.2C84.3,33.9,74,26.3,63.1,28L63.1,28z"/>
<path class="st1" d="M65.9,76.8c-1,0.3-2-0.3-2.3-1.3c-1.2-3.6-3.9-6.5-7.3-8.1c-6.4-3.2-10.8-9.3-11.9-16.4
c-1.8-12,6.4-23.2,18.4-25c5.5-0.8,11,0.4,15.6,3.5c10,6.8,12.7,20.4,5.9,30.5c-2,3-2.7,6.8-1.9,10.3c0.2,1-0.4,2-1.4,2.3
L65.9,76.8L65.9,76.8z M81.1,58c2.6-3.8,3.6-8.4,2.9-12.9c-1.5-9.9-10.8-16.7-20.7-15.2c-5.8,0.9-10.9,4.6-13.5,9.8
C45.4,48.7,49,59.6,58,64c3.8,1.8,6.8,4.9,8.5,8.7l11.9-3.3C77.9,65.4,78.9,61.3,81.1,58z"/>
<path class="st6" d="M81.1,80.9L70,84l-2.6-9.5l11.1-3L81.1,80.9z"/>
<path class="st1" d="M70.5,85.8c-1,0.3-2.1-0.3-2.3-1.4l-2.6-9.5c-0.3-1,0.3-2.1,1.3-2.3l11.1-3c1-0.3,2.1,0.3,2.3,1.3l2.6,9.5
c0.3,1-0.3,2.1-1.3,2.3L70.5,85.8C70.5,85.8,70.5,85.8,70.5,85.8z M77.2,73.7l-7.4,2l1.6,5.9l7.4-2L77.2,73.7z"/>
<path class="st1" d="M57.1,22l-1.3-4.7c-0.3-1,0.3-2.1,1.3-2.3c1-0.3,2.1,0.3,2.3,1.3l1.3,4.7c0.3,1-0.3,2.1-1.3,2.3
C58.4,23.6,57.3,23,57.1,22z"/>
<path class="st6" d="M44.9,30.1l-3.2-3.2"/>
<path class="st1" d="M43.5,31.5l-3.2-3.2c-0.7-0.7-0.8-1.9,0-2.7c0.7-0.7,1.9-0.8,2.7,0l3.2,3.2c0,0,0,0,0,0c0.7,0.7,0.8,1.9,0,2.7
c-0.2,0.2-0.5,0.4-0.9,0.5C44.7,32.1,44,32,43.5,31.5z"/>
<path class="st6" d="M38.6,43.9l-4.8-0.7"/>
<path class="st1" d="M38.3,45.8l-4.8-0.7c0,0-0.1,0-0.1,0c-1-0.2-1.7-1.2-1.5-2.2c0.2-1,1.2-1.7,2.2-1.5l4.8,0.7
c0.7,0.1,1.3,0.6,1.5,1.4c0.3,1-0.3,2.1-1.3,2.3C38.8,45.8,38.5,45.8,38.3,45.8z"/>
<path class="st6" d="M75.3,21.8l1.2-4.4"/>
<path class="st1" d="M75.8,23.6c-0.3,0.1-0.7,0.1-1,0c-1-0.3-1.6-1.3-1.4-2.3l1.2-4.4c0.3-1,1.3-1.6,2.3-1.4c1,0.3,1.6,1.3,1.4,2.3
l-1.2,4.4C77,22.9,76.5,23.5,75.8,23.6L75.8,23.6z"/>
<path class="st6" d="M87.7,30.4l3.7-3.1"/>
<path class="st1" d="M88.2,32.3c-0.7,0.2-1.5-0.1-2-0.6c-0.7-0.8-0.5-2,0.3-2.7l3.7-3.1c0.8-0.5,1.8-0.4,2.5,0.3
c0.7,0.8,0.7,2-0.1,2.7l-3.7,3.1C88.7,32.1,88.5,32.2,88.2,32.3L88.2,32.3z"/>
</g>
<g>
<path class="st7" d="M725.6,502.6c0,0-44.8-202.9-64.3-276.3s-95.1-82.1-119.3-79.2c-24.2,2.9-57.9,60.1-57.9,60.1l-79.3,24.1
c-5.7,5.6-10.4,12.1-13.8,19.4c-5.9,12.3-8.6,25.8-7.9,39.4c1.6,38.2,93.6,36.9,93.6,36.9l-8.2,175.6"/>
<path class="st8" d="M391.1,304.5l111.4,12.8L533,502.6h-64.6l8.2-175.6C476.7,327.1,413.9,331.2,391.1,304.5z"/>
<path class="st9" d="M435,222.2l-30.2,9.2c-5.7,5.6-10.4,12.1-13.8,19.4c9.6,10,25.6,10.3,35.6,0.7c4.5-4.4,7.3-10.3,7.7-16.6
L435,222.2z"/>
<path class="st10" d="M769.2,87.4c-0.9-9.6-8.4-17.4-18-18.5c-23.2-2.7-45-2.8-70.5,0.2c-9.2,1.2-16.6,8.3-18,17.5
c-3.3,18-3.4,36.5-0.3,54.5c1.6,8.4,8.1,15,16.5,16.7c4.3,0.8,8.5,1.5,12.8,2l-4.8,26.9l31.3-24.8c12.4,0.2,22-0.8,33.7-3.1
c9.2-1.7,16.1-9.3,17-18.5C770.6,122.6,770.7,105,769.2,87.4L769.2,87.4z"/>
<path class="st11" d="M468.3,504.6c-0.5,0-1-0.3-1.4-0.7c-0.4-0.4-0.5-0.9-0.5-1.4l8-171.4c0-0.5-0.2-1.1-0.5-1.5
c-0.4-0.4-0.9-0.6-1.4-0.6c-15-0.2-89.9-3.1-91.4-38.8c-0.7-13.9,2.1-27.9,8.2-40.4c3.5-7.5,8.4-14.3,14.3-20.1
c0.1-0.1,0.4-0.3,0.7-0.4l77.8-23.6c0.5-0.1,0.9-0.5,1.1-0.9c5.7-9.5,35.3-57,58.6-59.8c3-0.3,6.2-0.5,9.7-0.5
c33.5,0,94.8,17.1,111.8,81.2c18.4,69.6,59.6,255.2,64.3,276.2l0,0.2c0.2,1.1-0.4,2.1-1.5,2.4l0,0c-0.1,0-0.3,0-0.4,0
c-1,0-1.8-0.6-2-1.6c-0.4-2-45-203.7-64.3-276.2c-20.1-75.9-100.4-78.1-109.4-78.1c-2.9,0-5.6,0.1-7.7,0.4
c-22.9,2.7-56,58.6-56.4,59.1c-0.3,0.4-0.7,0.8-1.1,0.9L406.3,233c-0.3,0.1-0.6,0.3-0.9,0.5c-5.2,5.3-9.4,11.4-12.6,18.1
c-5.8,11.9-8.4,25.2-7.8,38.4c0.5,12.8,12.6,22.5,35.8,28.6c17.9,4.7,39.3,6.4,53.4,6.4c0.8,0,1.5,0,2.3,0c0.5,0,1.1,0.2,1.5,0.7
c0.3,0.4,0.5,0.9,0.5,1.4l-8.2,175.6C470.4,503.8,469.5,504.6,468.3,504.6L468.3,504.6z"/>
<path class="st11" d="M612.4,352.5c-7.8-0.2-15.3-3-21.2-8.1c-7.5-6.8-13.4-15.4-17.1-24.8c-10.2-23.3-6.2-42.3-0.8-61.4
c0.8-2.8,1.6-5.6,2.5-8.5l0.2-0.7c1.7-5.8,3.5-11.8,5.1-18.2c0.2-0.9,1-1.6,2-1.6c0.2,0,0.3,0,0.5,0.1c1.1,0.3,1.7,1.3,1.5,2.4
c-1.7,6.5-3.4,12.5-5.2,18.3l0,0.2c-0.9,3.2-1.8,6.2-2.7,9.1c-5.4,19-9.1,36.5,0.6,58.5c3.3,8.9,8.8,17,15.9,23.4
c5.1,4.6,11.7,7.1,18.5,7.1c2.4,0,4.8-0.3,7.1-0.9c0,0,0.1,0,0.1,0c13.1-4.5,18.7-20.5,21.8-32.1c2.8-9.6,6.7-18.9,11.6-27.7
c7.4-14.6,13.8-27.1,10.3-44.6c-0.1-0.5,0-1.1,0.3-1.5s0.7-0.8,1.3-0.9c0.1,0,0.3,0,0.4,0c0.9,0,1.8,0.7,2,1.6
c3.8,18.9-3.2,32.6-10.6,47.2c-4.7,8.5-8.5,17.6-11.3,26.9c-3.4,12.6-9.5,29.8-24.4,34.9C618,352.1,615.3,352.5,612.4,352.5
L612.4,352.5z"/>
<path class="st11" d="M409.2,260.4c-0.6,0-1.1,0-1.7-0.1c-6.9-0.4-13.2-3.4-17.9-8.3c-0.6-0.6-0.7-1.5-0.4-2.3
c3.5-7.5,8.4-14.3,14.3-20.1c0.1-0.1,0.4-0.3,0.7-0.4l30.2-9.2c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.7,0.6,1.9,1.4
c0.1,0.2,0.1,0.5,0.1,0.7l-0.7,12.6C435.4,249.2,423.5,260.4,409.2,260.4z M430.7,225.6c-0.2,0-0.4,0-0.6,0.1l-23.8,7.2
c-0.3,0.1-0.6,0.3-0.9,0.5c-4.5,4.6-8.2,9.8-11.2,15.4c-0.5,0.9-0.2,1.9,0.5,2.5c4.1,3.3,9.1,5,14.4,5c7.1,0,13.8-3.2,18.2-8.8
c2.9-3.7,4.7-8.2,5-12.9l0.4-6.9c0-0.7-0.2-1.3-0.8-1.7C431.6,225.8,431.1,225.6,430.7,225.6z"/>
<path class="st11" d="M408.4,291c-9.3,0-18.4-2.5-26.3-7.4c-0.4-0.3-0.7-0.7-0.9-1.2c-0.1-0.5,0-1.1,0.3-1.5c0.4-0.6,1-0.9,1.7-0.9
c0.4,0,0.7,0.1,1.1,0.3c7.1,4.5,15.5,6.7,25.6,6.7c6.7,0,14.2-1,22.4-3c0.1,0,0.2,0,0.4,0c0.9,0,1.7,0.7,1.9,1.6
c0.2,1-0.4,2.1-1.4,2.4c-7.6,2-15.5,3-23.4,3.1C409.3,291,408.8,291,408.4,291z"/>
<path class="st11" d="M552.2,207.3c-0.3,0-0.5-0.1-0.8-0.1l-16.3-6.6c-0.4-0.2-0.8-0.6-1-1.1c-0.2-0.5-0.2-1,0-1.5
c0.3-0.7,1-1.2,1.8-1.2c0.2,0,0.5,0,0.7,0.1l16.2,6.6c1,0.4,1.5,1.6,1.1,2.6C553.7,206.8,553,207.3,552.2,207.3L552.2,207.3z"/>
<path class="st11" d="M686.9,188.4c-0.9,0-1.7-0.8-1.7-1.7c0-0.1,0-0.2,0-0.3l4.3-24c0.1-0.3,0-0.6-0.2-0.8
c-0.2-0.2-0.4-0.4-0.7-0.4c-3.7-0.5-6.9-1.1-10-1.6c-9.1-1.8-16.2-8.9-17.9-18c-3.2-18.3-3.1-36.8,0.3-55.1
c1.6-10,9.5-17.6,19.5-18.9c5.9-0.7,21-1.2,38.6-1.2c15.1,0,27.5,0.4,32.3,0.9c10.3,1.3,18.5,9.7,19.5,20.1
c1.5,17.6,1.4,35.5-0.3,53.1c-1,10.1-8.4,18.1-18.4,20.1c-11.2,2.2-17.5,3.1-31,3.1c-0.7,0-1.4,0-2,0c-0.3,0-0.5,0.1-0.7,0.2
L688,188C687.7,188.2,687.3,188.4,686.9,188.4L686.9,188.4z M718.8,69.6c-15.7,0-30.2,0.5-37.9,1.2c-8.5,1.1-15.2,7.6-16.6,16.1
c-3.3,17.8-3.4,36-0.3,53.9c1.5,7.8,7.4,13.8,15.2,15.3c3.8,0.7,7.8,1.4,12.7,2c0.5,0.1,0.8,0.3,1.1,0.7c0.3,0.4,0.4,0.8,0.3,1.3
c-1.5,7.9-3.9,20.5-3.9,22.6c2.2-1.3,17.5-13.7,27.7-22.1c0.3-0.2,0.7-0.4,1-0.4c1.1,0,2.2,0,3.6,0c14.2,0,18.6-0.9,27.6-2.7
l2.2-0.4c8.4-1.6,14.7-8.5,15.6-17c1.7-17.4,1.8-35.1,0.3-52.5c-0.8-8.8-7.8-15.9-16.5-17C744.6,69.9,732.6,69.6,718.8,69.6z"/>
<path class="st11" d="M714.1,134.4c-0.2,0-0.4,0-0.6-0.1c-0.5-0.2-0.8-0.5-1-0.9s-0.3-0.9-0.1-1.4c0.7-2.1,1-4,1.2-5.6
c0.6-4.2,1.1-7.7,7.4-11.1c5-2.7,12.7-9.2,13.3-15.8c0.3-3.1-1.2-6-4.4-8.5c-4.1-3.2-8.7-3.9-11.8-3.9c-4.3,0-8.5,1.3-11.6,3.4
c-2.6,1.8-6.5,5.8-4.3,12.3c0.3,0.9-0.2,2-1.1,2.3c-0.2,0.1-0.4,0.1-0.6,0.1c-0.8,0-1.5-0.5-1.7-1.2c-2.1-6.4-0.1-12.3,5.7-16.3
c3.7-2.6,8.7-4.1,13.7-4.1c3.7,0,9.2,0.8,14.1,4.7c4.2,3.3,6.1,7.2,5.7,11.6c-0.7,8.6-10.2,16-15.1,18.6c-4.7,2.5-5,4.7-5.5,8.5
c-0.3,1.8-0.6,3.8-1.3,6.2C715.5,133.9,714.8,134.4,714.1,134.4z"/>
<path class="st11" d="M712.7,147.3c-0.1,0-0.3,0-0.4,0c-0.8-0.1-1.7-0.8-1.5-2.8c0.3-2.5,1.3-3.9,2.8-3.9c0.6,0,1.1,0.3,1.5,0.7
c0.3,0.4,0.4,1,0.3,1.6l-0.7,2.4C714.2,147,713.3,147.3,712.7,147.3z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
task3-quote/public/Imgs/detective_dog.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
task3-quote/public/Imgs/jack.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/Imgs/jo2.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

17
task3-quote/public/Imgs/paperBox.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 455 175" style="enable-background:new 0 0 455 175;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EFB659;}
.st1{fill:#FFD18B;}
.st2{fill:#FCDDB4;}
.st3{fill:#DBAB6B;}
</style>
<g>
<path class="st0" d="M315.9,0H412v175h-96.1V0z"/>
<path class="st1" d="M351.2,0v175H43V13.6C43,6.1,52,0,63,0H351.2z"/>
<path class="st2" d="M308.1,96.4H0L43,0h308.1L308.1,96.4z"/>
<path class="st3" d="M394.2,96.4H455L412,0h-60.8L394.2,96.4z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 730 B

165
task3-quote/public/Imgs/pawsdivider.svg Normal file
View File

@@ -0,0 +1,165 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_圖層_1" data-name=" 圖層 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2174.4 164.5">
<defs>
<style>
.cls-1 {
fill: #ca7c34;
stroke-width: 0px;
}
</style>
</defs>
<g>
<path class="cls-1" d="M316,113.4c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.6,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.9-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.9-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M335.5,106.1c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M349.2,135.7c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.4,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.1-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.5-.3h0Z"/>
<path class="cls-1" d="M348.6,129.9c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.6-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.9,1.1-2.8,1.3-1.2.3-2.4.5-3.6.7h0Z"/>
<path class="cls-1" d="M338.5,160.5c-1.1,0-2.1-.4-3.1-.9-1.7-.8-3.2-1.8-4.4-3.1-1.6-1.9-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M211.7,76.5c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.6,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.9-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.9-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M231.3,69.2c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M244.9,98.8c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.4,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M244.3,93c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.6-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.9,1.1-2.8,1.3-1.2.3-2.4.5-3.6.7h0Z"/>
<path class="cls-1" d="M234.3,123.6c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.6-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M404.7,73.2c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.6,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.9-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.9-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M424.3,65.9c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M437.9,95.5c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.4,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.5-.3h0Z"/>
<path class="cls-1" d="M437.3,89.7c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.6-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.9,1.1-2.8,1.3-1.2.3-2.4.5-3.6.7h0Z"/>
<path class="cls-1" d="M427.3,120.3c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.6-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M493.4,110.1c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.6,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.9-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.9-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M513,102.8c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M526.6,132.4c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.1-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.5-.3h0Z"/>
<path class="cls-1" d="M526,126.6c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M516,157.2c-1.1,0-2.1-.4-3.1-.9-1.7-.8-3.2-1.8-4.4-3.1-1.6-1.9-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M597.7,73.2c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M617.3,65.9c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M630.9,95.5c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.5-.3h0Z"/>
<path class="cls-1" d="M630.3,89.7c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M620.3,120.3c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M702,112.5c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M721.5,105.2c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M735.2,134.8c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.1-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.5-.3h0Z"/>
<path class="cls-1" d="M734.6,129c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M724.5,159.6c-1.1,0-2.1-.4-3.1-.9-1.7-.8-3.2-1.8-4.4-3.1-1.7-1.9-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M113.2,109.2c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M132.8,101.9c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M146.4,131.5c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.4,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.1-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M145.8,125.7c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.6-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.9,1.1-2.8,1.3-1.2.3-2.4.5-3.6.7h0Z"/>
<path class="cls-1" d="M135.8,156.3c-1.1,0-2.1-.4-3.1-.9-1.7-.8-3.2-1.8-4.4-3.1-1.7-1.9-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M10.1,74.7c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.6,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.9-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M29.7,67.3c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M43.3,97c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3Z"/>
<path class="cls-1" d="M42.7,91.1c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M32.7,121.8c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.6-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M806.2,79.8c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M825.8,72.5c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M839.5,102.2c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.5-.3Z"/>
<path class="cls-1" d="M838.9,96.3c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M828.8,126.9c-1.1,0-2.1-.4-3.1-.9-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M913.8,107.2c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.6,2.1.8,2.1.9,4,2.2,5.5,3.9,2.5,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2,.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M933.4,99.9c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.5-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M947,129.5c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.1-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.5-.3h0Z"/>
<path class="cls-1" d="M946.4,123.7c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M936.4,154.3c-1.1,0-2.1-.4-3.1-.9-1.7-.8-3.2-1.8-4.4-3.1-1.7-1.9-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.5,1-4,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1009,83.4c3-1.2,5.8-.7,8.6.8.5.3,1,.7,1.6,1,2.3,1.4,4.7,2.2,7.4,2.2.8,0,1.5,0,2.3,0,2.3.1,4.5.7,6.5,1.8,3.4,1.9,4.9,4.8,4.8,8.6-.1,4-1.7,7.4-4.8,9.9-1.7,1.4-3.3,2.9-4.4,4.8-.6,1-1.2,2.1-1.7,3.2-1,2-2.5,3.7-4.6,4.6-3,1.3-6.1,1.4-9.1,0-1.3-.6-2.2-1.6-3-2.8-1.1-1.6-1.4-3.4-1.3-5.3,0-1.1,0-2.2,0-3.3,0-2.7-.9-5-2.5-7.1-1-1.2-2-2.3-3.3-3.2-4.3-3-4.3-8.5-1.5-11.8,1.4-1.6,3-2.8,5-3.6h0Z"/>
<path class="cls-1" d="M1024.8,69.8c.6-.1,1.4-.4,2.3-.4,2.8-.3,5.8,1.9,5.2,5.6-.1.8-.3,1.5-.7,2.2-1.3,2.4-3.2,4.4-5.8,5.5-3.8,1.6-6.4,0-7.8-3-.6-1.3-.4-2.6.2-3.8,1.3-2.8,3.5-4.7,6.6-6h0Z"/>
<path class="cls-1" d="M1047.8,92.9c2.1-.7,4.2-1,6.4-.5,2.5.6,4,2.5,4.3,5,.2,1.5-.5,2.7-1.5,3.7-1,1.1-2.3,1.7-3.6,2-1.9.5-3.8.7-5.8.5-2.5-.3-4-1.9-4.4-3.9-.5-2.3.5-4.7,2.4-5.8.7-.4,1.5-.7,2.2-1.1h0Z"/>
<path class="cls-1" d="M1045.2,87.7c-.9.5-1.9.8-2.9.9-.8,0-1.7,0-2.5-.4-2.5-1-4.6-4.8-2.2-7.9,2.1-2.7,4.9-4.2,8.3-4.4,2.1-.1,3.7.9,4.7,2.7.9,1.6,1.1,3.4,0,4.9-.6.9-1.4,1.6-2.2,2.2-1,.7-2.1,1.3-3.2,1.9h0Z"/>
<path class="cls-1" d="M1046.3,119.9c-1.1.4-2.1.4-3.2.3-1.8-.2-3.6-.6-5.2-1.4-2.2-1.2-3-3.4-2.1-5.7.8-2.1,2.2-3.4,4.5-3.7,2.2-.3,4.4-.2,6.5.6.9.3,1.7.8,2.4,1.4,1.9,1.6,2.2,4.3.5,6.3-.9,1.1-2,1.8-3.3,2.4h0Z"/>
</g>
<g>
<path class="cls-1" d="M1433.6,51.5c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1453.2,44.2c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1466.8,73.8c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1466.2,68c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1456.2,98.6c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1329.3,14.6c3.2-.1,5.7,1.4,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.5-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.5-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1348.9,7.3c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.6-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1362.5,36.9c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1361.9,31.1c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1351.9,61.7c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.5,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1522.3,11.3c3.2-.1,5.7,1.4,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.5-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.5-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1541.9,4c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1555.5,33.6c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1554.9,27.8c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1544.9,58.4c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.5,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1611,48.2c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1630.6,40.9c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1644.2,70.5c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1643.7,64.7c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1633.6,95.3c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1715.3,11.3c3.2-.1,5.7,1.4,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.5-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.5-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1734.9,4c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1748.5,33.6c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.1,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1747.9,27.8c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1737.9,58.4c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.5,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1819.6,50.6c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1839.2,43.3c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1852.8,72.9c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1852.2,67.1c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1842.2,97.7c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1230.8,47.3c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1250.4,40c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1264,69.6c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1263.4,63.8c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1253.4,94.4c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M1122.5,33.3c3.2.6,5.3,2.5,6.8,5.2.3.5.5,1.1.8,1.7,1.2,2.4,2.9,4.4,5.1,5.8.6.4,1.3.8,1.9,1.3,1.9,1.3,3.4,3,4.5,5,1.9,3.4,1.7,6.7-.4,9.8-2.2,3.3-5.3,5.4-9.3,5.9-2.2.3-4.3.7-6.3,1.7-1.1.6-2.1,1.2-3.1,1.8-1.9,1.2-4.1,1.8-6.3,1.5-3.3-.5-5.9-2.1-7.8-4.8-.8-1.2-1-2.5-1.1-3.9,0-2,.6-3.6,1.7-5.2.6-.9,1.2-1.8,1.8-2.7,1.5-2.2,1.9-4.7,1.6-7.3-.2-1.5-.5-3-1.1-4.4-2-4.8.9-9.5,5-10.8,2-.7,4.1-.8,6.2-.4h0Z"/>
<path class="cls-1" d="M1143.2,30.1c.6.2,1.4.5,2.2.8,2.6,1.3,3.9,4.7,1.4,7.5-.5.6-1.1,1.1-1.8,1.5-2.4,1.3-5.1,2.1-7.8,1.6-4.1-.7-5.5-3.3-5.1-6.7.2-1.4,1.1-2.4,2.2-3.1,2.6-1.6,5.4-2.1,8.7-1.6h0Z"/>
<path class="cls-1" d="M1150.4,62c2.2.5,4.1,1.4,5.7,3,1.8,1.8,2.1,4.2,1,6.5-.6,1.3-1.9,2-3.2,2.4-1.4.4-2.8.2-4.2-.2-1.9-.6-3.6-1.4-5.2-2.6-2-1.6-2.4-3.7-1.7-5.7.8-2.2,2.9-3.7,5.1-3.6.8,0,1.6.2,2.4.2h0Z"/>
<path class="cls-1" d="M1151,56.1c-1,0-2-.3-2.9-.8-.8-.4-1.4-.9-1.9-1.7-1.6-2.2-1.3-6.5,2.3-7.9,3.2-1.2,6.4-1,9.4.7,1.8,1,2.7,2.7,2.6,4.8,0,1.8-.9,3.4-2.6,4.2-.9.4-2,.7-3.1.7-1.2,0-2.5,0-3.7,0h0Z"/>
<path class="cls-1" d="M1134.9,84c-1.1-.2-2-.8-2.9-1.5-1.5-1.1-2.8-2.4-3.7-4-1.2-2.2-.8-4.4,1.2-5.9,1.8-1.4,3.7-1.7,5.8-.8,2.1.9,3.9,2.1,5.2,3.9.6.7,1,1.6,1.3,2.5.8,2.4-.5,4.8-2.9,5.6-1.3.4-2.7.5-4.1.2h0Z"/>
</g>
<g>
<path class="cls-1" d="M1923.9,17.9c3.2-.1,5.7,1.4,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.5-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.5-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M1943.5,10.6c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.6-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M1957.1,40.3c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.3,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M1956.5,34.4c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.7-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.8,1.1-2.8,1.3-1.2.3-2.4.5-3.7.7h0Z"/>
<path class="cls-1" d="M1946.5,65c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.5,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M2031.4,45.3c3.2-.1,5.7,1.3,7.8,3.7.4.5.8,1,1.1,1.5,1.7,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.6-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.6-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.8-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3.1,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.8-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M2051,38c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.7-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.3h0Z"/>
<path class="cls-1" d="M2064.6,67.6c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.4,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M2064.1,61.8c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.6-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.9,1.1-2.8,1.3-1.2.3-2.4.5-3.6.7h0Z"/>
<path class="cls-1" d="M2054,92.4c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.7-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.4,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
<g>
<path class="cls-1" d="M2132.5,14.8c3.2-.1,5.7,1.4,7.8,3.7.4.5.8,1,1.1,1.5,1.6,2.1,3.7,3.7,6.2,4.6.7.3,1.4.5,2.1.8,2.1.9,3.9,2.2,5.5,3.9,2.6,2.9,3,6.2,1.6,9.7-1.5,3.7-4.1,6.3-7.9,7.7-2.1.7-4.1,1.5-5.8,3-.9.8-1.8,1.6-2.7,2.4-1.7,1.5-3.6,2.6-5.9,2.7-3.3.2-6.2-.8-8.6-3.1-1-1-1.5-2.3-1.9-3.6-.5-1.9-.2-3.7.6-5.4.4-1,.8-2,1.2-3,1-2.5.9-5,0-7.5-.5-1.4-1.1-2.8-2-4.1-3-4.2-1.1-9.5,2.7-11.6,1.9-1.1,3.8-1.6,5.9-1.7h0Z"/>
<path class="cls-1" d="M2152.1,7.5c.6,0,1.5.2,2.3.4,2.8.7,4.8,3.8,2.9,7-.4.6-.8,1.3-1.4,1.8-2.1,1.8-4.5,3.1-7.3,3.2-4.2.2-6.1-2.1-6.3-5.5-.1-1.4.6-2.6,1.6-3.5,2.2-2.2,4.9-3.2,8.2-3.4Z"/>
<path class="cls-1" d="M2165.7,37.1c2.2,0,4.3.5,6.2,1.8,2.1,1.4,2.9,3.7,2.3,6.2-.4,1.4-1.4,2.3-2.7,3-1.3.7-2.7.8-4.1.7-1.9-.2-3.8-.6-5.6-1.5-2.2-1.1-3.1-3.2-2.8-5.2.3-2.3,2.1-4.2,4.3-4.6.8-.2,1.6-.2,2.4-.3h0Z"/>
<path class="cls-1" d="M2165.1,31.3c-1,.2-2,.1-3-.2-.8-.2-1.6-.6-2.2-1.2-2-1.8-2.6-6.1.7-8.2,2.9-1.8,6-2.3,9.3-1.3,2,.6,3.2,2.1,3.5,4.2.3,1.8-.2,3.5-1.7,4.6-.8.6-1.9,1.1-2.8,1.3-1.2.3-2.4.5-3.6.7h0Z"/>
<path class="cls-1" d="M2155.1,61.9c-1.1,0-2.1-.4-3.1-.8-1.7-.8-3.2-1.8-4.4-3.2-1.6-1.8-1.7-4.2,0-6.1,1.5-1.7,3.3-2.4,5.5-2,2.2.5,4.2,1.3,5.9,2.8.7.6,1.3,1.3,1.8,2.1,1.3,2.2.5,4.8-1.7,6.1-1.2.7-2.6,1-3.9,1.1h0Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
task3-quote/public/StarPetImgs/star-bg.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/StarPetImgs/star-frame-b.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/StarPetImgs/star-frame-bl.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/StarPetImgs/star-frame-ur.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/StarPetImgs/star-text-bg.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/ball.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/cat.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/dog.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/home-2.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/home.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/mouse.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/paw.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/poodle.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/cursorimgs/shibainu.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

90
task3-quote/public/favicon16x16.svg Normal file
View File

@@ -0,0 +1,90 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#663333;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD49D;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6566;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#BEB0B0;}
</style>
<g id="Guides_For_Artboard">
</g>
<g id="Layer_1">
</g>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_5">
<g>
<path class="st0" d="M15.07,8.89c0.24,0.04,0.45,0.07,0.62,0.21c0.29,0.25,0.34,0.71,0.3,1.06c-0.02,0.22-0.08,0.46-0.17,0.7
c-0.11,0.27-0.26,0.54-0.48,0.79c-0.08,0.09-0.17,0.19-0.28,0.27v0.28c0,0.01,0,0.03,0,0.04v0.81v0.47v1.5
c0,0.29-0.09,0.53-0.27,0.71C14.63,15.9,14.39,16,14.1,16H1.01c-0.28,0-0.53-0.11-0.71-0.29C0.11,15.52,0,15.27,0,14.99
c0-2.91,0-5.77,0-8.64V5.97v-0.6c0-0.25,0.05-0.52,0.2-0.78c0.1-0.18,0.25-0.36,0.45-0.51C0.68,4.06,0.7,4.04,0.73,4.02
C0.74,4.01,0.75,4.01,0.76,4l0,0L3.3,2.38l3.22-2.06C6.86,0.12,7.09,0,7.54,0c0.3,0,0.61,0.08,0.87,0.24l5.66,3.61
c0.07,0.04,0.14,0.09,0.21,0.13c0.23,0.17,0.42,0.39,0.55,0.64c0.16,0.29,0.25,0.62,0.25,0.93v2.49L15.07,8.89L15.07,8.89z"/>
<path class="st1" d="M2.03,9.2l5.01,1.37v0.51l0.01,0.84l0.01,0.52c0.01,0.47,0.01,0.94,0.01,1.31c0,0.14-0.11,0.25-0.25,0.25
s-0.25-0.11-0.25-0.25c0-0.54-0.01-0.98-0.01-1.42l-0.87-0.18c-0.14-0.03-0.22-0.16-0.19-0.3c0.03-0.14,0.16-0.22,0.3-0.2
l0.76,0.16l-0.01-0.69l-0.68,0.05c-0.14,0.01-0.26-0.09-0.27-0.23c-0.01-0.14,0.09-0.26,0.23-0.27l0.72-0.06
c0-0.94,0.03-1.89,0.13-2.84C6.52,7.88,6.35,8.02,6.23,8.13L5.12,9.15c-0.08,0.08-0.19,0.1-0.29,0.04c0,0-0.7-0.38-1.4-0.36
C2.72,8.86,2.03,9.2,2.03,9.2C1.95,9.23,1.87,9.23,1.79,9.19L0.52,8.45v0.69v1.5l0.61,0.03c0.14,0.01,0.24,0.13,0.24,0.27
c-0.01,0.14-0.12,0.25-0.26,0.24l-0.59-0.03v0.62l0.52-0.12c0.13-0.03,0.27,0.05,0.3,0.19c0.03,0.14-0.05,0.27-0.19,0.3
l-0.64,0.15v2.7c0,0.27,0.21,0.48,0.48,0.48H14.1c0.28,0,0.44-0.16,0.44-0.46v-1.5v-0.47v-0.81c-0.11,0.06-0.23,0.1-0.35,0.15
c-0.36,0.12-0.79,0.21-1.24,0.25c-0.32,0.03-0.65,0.04-0.98,0.03c-0.3,0.04-0.47,0.18-0.68,0.35c-0.09,0.07-0.19,0.16-0.31,0.24
c-0.26,0.18-0.67,0.26-1.01,0.21c-0.12-0.02-0.23-0.05-0.33-0.1c-0.11-0.05-0.21-0.13-0.28-0.23c-0.08-0.12-0.12-0.27-0.1-0.44
c0.05-0.37,0.28-0.63,0.49-0.78C9.61,11.76,9.5,11.6,9.43,11.4c-0.03-0.09-0.05-0.19-0.06-0.29c-0.01-0.14,0.09-0.26,0.23-0.27
s0.26,0.09,0.27,0.23c0.01,0.06,0.02,0.12,0.04,0.17c0.06,0.19,0.21,0.35,0.41,0.48l0.03,0.02c0.17,0.11,0.39,0.2,0.62,0.26
c0.3,0.08,0.64,0.13,0.98,0.15c0.01,0,0.02,0,0.03,0c0.3,0.01,0.61,0.01,0.92-0.02c0.41-0.04,0.8-0.12,1.13-0.23
c0.13-0.04,0.24-0.09,0.35-0.15c0.49-0.26,0.79-0.68,0.95-1.09c0.16-0.4,0.18-0.79,0.1-1.03c-0.01-0.03-0.02-0.05-0.03-0.07
c-0.11-0.21-0.78-0.19-1.36-0.17c-0.43,0.01-0.82,0.02-1.03-0.08c-0.38-0.18-0.44-0.6-0.51-1.13c-0.04-0.29-0.08-0.62-0.19-0.93
c-0.23-0.65-0.55-0.86-0.62-0.9c-0.05-0.02-0.1-0.07-0.13-0.12l-0.63-1.3l-0.66,1.03c-0.05,0.07-0.13,0.12-0.22,0.11L8.87,6.04
c-0.09,0-0.17-0.05-0.21-0.13L7.88,4.44c-0.71,2.07-0.84,4.11-0.84,6.12L2.03,9.2L2.03,9.2z M8.87,6.04L8.87,6.04l-6.5,3.67
c0.16,0,0.28,0.17,0.28,0.38s-0.13,0.38-0.28,0.38c-0.16,0-0.28-0.17-0.28-0.38s0.13-0.38,0.28-0.38L8.87,6.04L8.87,6.04z
M4.44,9.71L4.44,9.71c0.16,0,0.28,0.17,0.28,0.38s-0.13,0.38-0.28,0.38c-0.16,0-0.28-0.17-0.28-0.38S4.28,9.71,4.44,9.71
L4.44,9.71z M4.24,11.11L4.24,11.11c-0.01-0.06,0.01-0.12,0.05-0.17c0.04-0.05,0.1-0.08,0.17-0.09c0.13-0.01,0.25,0.09,0.26,0.22
c0,0.04,0,0.08,0,0.12c-0.02,0.19-0.13,0.37-0.28,0.49c-0.09,0.07-0.2,0.13-0.32,0.16C4,11.87,3.87,11.87,3.74,11.83
c-0.11-0.03-0.22-0.1-0.31-0.2c-0.09,0.1-0.2,0.16-0.31,0.2c-0.13,0.04-0.26,0.04-0.38,0.01c-0.12-0.03-0.23-0.09-0.32-0.16
c-0.18-0.15-0.3-0.38-0.28-0.61c0.01-0.13,0.13-0.23,0.26-0.22c0.13,0.01,0.23,0.13,0.22,0.26c-0.01,0.07,0.04,0.15,0.1,0.2
c0.04,0.03,0.08,0.05,0.13,0.07c0.04,0.01,0.08,0.01,0.12,0c0.08-0.03,0.16-0.1,0.22-0.26c0.02-0.07,0.07-0.13,0.15-0.16
c0.03-0.01,0.05-0.01,0.08-0.02l0,0l0,0l0,0c0.03,0,0.05,0.01,0.08,0.02c0.07,0.03,0.13,0.09,0.15,0.16
c0.06,0.16,0.14,0.24,0.22,0.26c0.04,0.01,0.08,0.01,0.12,0c0.05-0.01,0.09-0.03,0.13-0.07C4.2,11.25,4.25,11.18,4.24,11.11
L4.24,11.11z M9.78,8.84L9.78,8.84c-0.16,0-0.28-0.17-0.28-0.38s0.13-0.38,0.28-0.38c0.16,0,0.28,0.17,0.28,0.38
C10.06,8.67,9.93,8.84,9.78,8.84L9.78,8.84z M11.38,8.46L11.38,8.46c0-0.21,0.13-0.38,0.28-0.38c0.16,0,0.28,0.17,0.28,0.38
s-0.13,0.38-0.28,0.38S11.38,8.67,11.38,8.46L11.38,8.46z M13.5,10.29L13.5,10.29c0-0.3,0.34-0.55,0.77-0.55
c0.42,0,0.77,0.25,0.77,0.55s-0.34,0.55-0.77,0.55S13.5,10.59,13.5,10.29z"/>
<path class="st2" d="M12.08,12.66c0.05,0.34,0.18,1.19,0.26,1.9c0.04,0.41,0.04,0.7,0.06,0.91h1.71c0.28,0,0.44-0.16,0.44-0.46
v-1.5v-0.47v-0.81c-0.11,0.06-0.23,0.1-0.35,0.15c-0.36,0.12-0.79,0.21-1.24,0.25C12.67,12.66,12.37,12.67,12.08,12.66z"/>
<g>
<path class="st3" d="M6.76,7.02C6.91,5.93,7.17,4.84,7.6,3.74C7.65,3.61,7.8,3.55,7.92,3.6c0.06,0.02,0.11,0.07,0.14,0.13
l0.96,1.82l0.89,0.03l0.83-1.29c0.08-0.12,0.23-0.15,0.35-0.07c0.04,0.03,0.07,0.06,0.09,0.1l0.79,1.63
c0.17,0.11,0.56,0.43,0.81,1.14c0.13,0.36,0.17,0.72,0.22,1.04c0.05,0.37,0.09,0.68,0.22,0.74c0.11,0.05,0.44,0.04,0.81,0.03
c0.17,0,0.34-0.01,0.52-0.01V5.56c0-0.45-0.25-0.94-0.66-1.2l0,0L8.12,0.69l0,0C7.82,0.5,7.31,0.45,6.96,0.68l0,0L1.05,4.45l0,0
c-0.4,0.26-0.52,0.61-0.52,0.92v0.59v0.38v1.52l1.41,0.82C2.19,8.57,2.8,8.34,3.42,8.32c0.6-0.01,1.2,0.22,1.48,0.35l0.99-0.91
L5.9,7.75L6.76,7.02L6.76,7.02L6.76,7.02z M11.18,4.31L11.18,4.31L11.18,4.31z"/>
</g>
<path class="st4" d="M2.03,9.2l1.44-0.36c-0.01,0.4-0.11,1.41-0.79,2.43c-0.04-0.05-0.06-0.1-0.06-0.15
c0.01-0.13-0.09-0.25-0.22-0.26s-0.25,0.09-0.26,0.22c-0.02,0.22,0.08,0.43,0.24,0.58c-0.49,0.55-1.2,0.81-1.87,0.93V12.3
l0.64-0.15c0.13-0.03,0.22-0.17,0.19-0.3c-0.03-0.14-0.17-0.22-0.3-0.19l-0.52,0.12v-0.62l0.59,0.03c0.14,0.01,0.26-0.1,0.26-0.24
c0.01-0.14-0.1-0.26-0.24-0.27l-0.61-0.03v-1.5v-0.7l1.27,0.74C1.87,9.23,1.95,9.23,2.03,9.2c0,0,0.69-0.34,1.4-0.36h0.04
L2.03,9.2L2.03,9.2z M2.37,9.71L2.37,9.71c-0.16,0-0.28,0.17-0.28,0.38s0.13,0.38,0.28,0.38c0.16,0,0.28-0.17,0.28-0.38
C2.66,9.88,2.53,9.71,2.37,9.71z"/>
<path class="st2" d="M6.84,15.47L6.81,14l0,0c0.14,0,0.25-0.11,0.25-0.25c0-0.38-0.01-0.84-0.01-1.31l-0.01-0.52l-0.01-0.84v-0.51
c0.01-2.02,0.13-4.06,0.84-6.12l0.78,1.46C8.7,5.99,8.78,6.04,8.87,6.04l1.18,0.04c0.09,0,0.17-0.04,0.22-0.11l0.66-1.03l0.63,1.3
c0.03,0.06,0.07,0.1,0.13,0.12c0.07,0.04,0.4,0.25,0.62,0.9c0.11,0.31,0.15,0.64,0.19,0.93c0.07,0.53,0.13,0.96,0.51,1.13
c0.05,0.02,0.11,0.04,0.18,0.05c-0.07,0.08-0.18,0.18-0.35,0.21c-0.33,0.07-1.12,0.14-1.49-0.67c-0.36-0.81-0.42-1.84-0.59-1.89
c-0.16-0.05-0.39,0.11-0.11,1.3c0.28,1.19,0.57,1.63,0.2,1.84s-1.51-0.67-1.83,0.19c-0.32,0.86-0.18,3.51,0,5.11H6.84V15.47z
M8.87,6.04L8.87,6.04l0.91,2.8c0.16,0,0.28-0.17,0.28-0.38S9.93,8.08,9.78,8.08c-0.16,0-0.28,0.17-0.28,0.38s0.13,0.38,0.28,0.38
L8.87,6.04L8.87,6.04z M11.38,8.46L11.38,8.46c0,0.21,0.13,0.38,0.28,0.38c0.16,0,0.28-0.17,0.28-0.38s-0.13-0.38-0.28-0.38
S11.38,8.25,11.38,8.46z"/>
<path class="st1" d="M2.76,5.44C2.99,6.13,3.89,6.6,4.8,7.06c0.46-0.92,0.93-1.84,0.71-2.53C5.28,3.82,4.07,3.8,4.12,4.85
C3.53,4.05,2.53,4.74,2.76,5.44z"/>
<path class="st3" d="M10.19,12.23c-0.14,0.07-0.38,0.24-0.42,0.53c-0.01,0.04,0,0.07,0.01,0.08c0.02,0.02,0.05,0.04,0.08,0.06
c0.05,0.02,0.11,0.04,0.18,0.05c0.23,0.03,0.5-0.01,0.65-0.12c0.1-0.07,0.2-0.15,0.28-0.22l0.09-0.07l-0.22-0.06l-0.2-0.06
c-0.2,0.06-0.5,0.17-0.5,0.17l0.29-0.25C10.36,12.31,10.27,12.27,10.19,12.23z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

95
task3-quote/public/favicon180x180.svg Normal file
View File

@@ -0,0 +1,95 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#663333;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD49D;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6566;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#BEB0B0;}
</style>
<g id="Guides_For_Artboard">
</g>
<g id="Layer_1">
</g>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_5">
<g>
<path class="st0" d="M169.5,99.96c2.68,0.39,5.09,0.82,6.98,2.4c3.31,2.76,3.78,7.97,3.41,11.9c-0.24,2.47-0.85,5.17-1.89,7.85
c-1.19,3.04-2.96,6.11-5.4,8.89c-0.93,1.06-1.97,2.08-3.1,3.04v3.11c0.01,0.15,0.02,0.31,0.02,0.46v9.07v5.29v16.87
c0,3.27-1.05,5.96-2.98,7.98c-2,2.08-4.69,3.17-7.91,3.17H11.33c-3.11,0-5.93-1.25-7.98-3.29C1.28,174.64,0,171.8,0,168.64
c0-32.74,0-64.86,0-97.25v-4.27v-6.65c0-2.78,0.62-5.86,2.28-8.83c1.16-2.05,2.81-4.01,5.09-5.71c0.3-0.22,0.61-0.44,0.93-0.65
c0.1-0.07,0.21-0.15,0.32-0.21l0,0L37.2,26.84L73.44,3.71C77.13,1.36,79.73-0.04,84.77,0c3.41,0.02,6.85,0.91,9.76,2.72
l63.66,40.61c0.74,0.47,1.62,1,2.33,1.51c2.61,1.86,4.69,4.41,6.2,7.19c1.8,3.27,2.8,6.95,2.8,10.52l-0.02,28.06V99.96z"/>
<path class="st1" d="M22.79,103.46l56.37,15.44l0.01,5.71l0.1,9.42l0.08,5.82c0.07,5.32,0.14,10.52,0.14,14.79
c0,1.57-1.27,2.85-2.83,2.85c-1.56,0-2.83-1.27-2.83-2.85c0-6.03-0.07-11.03-0.14-15.99l-9.79-2.07c-1.52-0.32-2.5-1.83-2.19-3.36
c0.32-1.54,1.81-2.52,3.33-2.2l8.56,1.81l-0.08-7.79l-7.67,0.59c-1.55,0.12-2.91-1.06-3.02-2.63c-0.12-1.57,1.05-2.93,2.6-3.05
l8.07-0.62c0.02-10.59,0.33-21.25,1.43-32c-1.65,1.33-3.54,2.88-4.88,4.07l-12.48,11.51c-0.85,0.85-2.19,1.08-3.3,0.48
c-0.02-0.01-7.89-4.26-15.75-4.02C30.6,99.64,22.81,103.45,22.79,103.46c-0.81,0.39-1.79,0.39-2.62-0.1L5.9,95.08v7.72v16.92
l6.89,0.36c1.55,0.08,2.75,1.42,2.67,2.98c-0.08,1.57-1.4,2.77-2.96,2.69l-6.6-0.34v7.02l5.89-1.4c1.52-0.36,3.03,0.6,3.39,2.13
c0.35,1.53-0.59,3.06-2.11,3.42l-7.17,1.7v30.36c0,3.05,2.41,5.42,5.44,5.42h147.3c3.13,0,4.99-1.83,4.99-5.2v-16.87v-5.29v-9.07
c-1.24,0.62-2.55,1.18-3.95,1.65c-4.04,1.38-8.87,2.36-13.93,2.85c-3.6,0.35-7.33,0.46-11,0.29c-3.34,0.41-5.25,1.98-7.6,3.91
c-1.03,0.84-2.13,1.74-3.51,2.72c-2.88,2.03-7.52,2.91-11.35,2.37c-1.34-0.19-2.62-0.55-3.73-1.09c-1.26-0.61-2.33-1.47-3.1-2.58
c-0.95-1.37-1.39-3.03-1.12-4.98c0.59-4.21,3.19-7.04,5.54-8.78c-1.6-1.64-2.82-3.53-3.55-5.71c-0.34-1.01-0.57-2.09-0.68-3.22
c-0.14-1.56,0.99-2.95,2.54-3.09c1.55-0.15,2.92,1,3.07,2.56c0.07,0.68,0.21,1.33,0.41,1.95c0.73,2.18,2.34,3.98,4.56,5.44
l0.29,0.18c1.95,1.23,4.35,2.2,7.01,2.94c3.38,0.94,7.17,1.49,11.07,1.69c0.11,0,0.22,0.01,0.32,0.02
c3.42,0.16,6.91,0.06,10.3-0.27c4.62-0.45,9.01-1.34,12.67-2.58c1.41-0.48,2.7-1.05,3.89-1.69c5.52-2.98,8.94-7.62,10.74-12.23
c1.77-4.53,1.98-8.9,1.1-11.56c-0.1-0.29-0.2-0.55-0.32-0.76c-1.23-2.31-8.81-2.1-15.33-1.9c-4.83,0.14-9.18,0.26-11.6-0.84
c-4.32-1.98-4.96-6.79-5.74-12.73c-0.43-3.27-0.92-6.97-2.16-10.49c-2.57-7.26-6.19-9.65-7.03-10.12
c-0.62-0.26-1.15-0.73-1.46-1.38l-7.08-14.62l-7.44,11.58c-0.52,0.8-1.43,1.32-2.45,1.29L99.77,68c-0.97-0.03-1.9-0.57-2.39-1.5
L88.63,50c-7.95,23.24-9.4,46.21-9.46,68.9L22.79,103.46L22.79,103.46z M99.76,67.96L99.76,67.96l-73.04,41.29
c1.75,0,3.17,1.94,3.17,4.32s-1.42,4.32-3.17,4.32s-3.17-1.93-3.17-4.32s1.42-4.32,3.17-4.32L99.76,67.96L99.76,67.96z
M49.93,109.25L49.93,109.25c1.75,0,3.17,1.94,3.17,4.32s-1.42,4.32-3.17,4.32s-3.17-1.93-3.17-4.32
C46.75,111.19,48.18,109.25,49.93,109.25L49.93,109.25z M47.71,124.98L47.71,124.98c-0.06-0.72,0.16-1.4,0.58-1.93
c0.45-0.56,1.11-0.94,1.87-1.01c1.48-0.13,2.78,0.98,2.91,2.47c0.04,0.46,0.03,0.91-0.01,1.36c-0.24,2.16-1.44,4.16-3.14,5.55
c-1.03,0.84-2.25,1.48-3.56,1.8c-1.36,0.33-2.81,0.33-4.23-0.11c-1.25-0.39-2.45-1.11-3.51-2.23c-1.06,1.12-2.26,1.84-3.51,2.23
c-1.42,0.44-2.87,0.44-4.23,0.11c-1.31-0.32-2.53-0.96-3.56-1.8c-2.05-1.68-3.38-4.24-3.16-6.91c0.13-1.49,1.43-2.59,2.91-2.47
c1.48,0.13,2.57,1.44,2.45,2.94c-0.07,0.79,0.43,1.63,1.18,2.25c0.43,0.35,0.93,0.61,1.44,0.74c0.46,0.11,0.94,0.12,1.4-0.03
c0.9-0.28,1.79-1.17,2.5-2.95c0.22-0.81,0.81-1.51,1.65-1.82c0.3-0.11,0.6-0.17,0.9-0.17h0.02h0.05h0.02c0.3,0,0.6,0.06,0.9,0.17
c0.84,0.32,1.43,1.01,1.65,1.82c0.7,1.78,1.6,2.67,2.5,2.95c0.46,0.14,0.94,0.14,1.4,0.03c0.51-0.13,1.01-0.39,1.44-0.74
C47.28,126.61,47.78,125.77,47.71,124.98L47.71,124.98z M109.99,99.5L109.99,99.5c-1.75,0-3.17-1.93-3.17-4.32
s1.42-4.32,3.17-4.32c1.75,0,3.17,1.93,3.17,4.32C113.17,97.56,111.75,99.5,109.99,99.5L109.99,99.5z M128.01,95.18L128.01,95.18
c0-2.39,1.42-4.32,3.17-4.32c1.75,0,3.17,1.93,3.17,4.32s-1.42,4.32-3.17,4.32C129.43,99.5,128.01,97.56,128.01,95.18
L128.01,95.18z M151.83,115.72L151.83,115.72c0-3.42,3.85-6.19,8.61-6.19c4.75,0,8.61,2.77,8.61,6.19c0,3.42-3.85,6.19-8.61,6.19
C155.68,121.91,151.83,119.14,151.83,115.72z"/>
<path class="st2" d="M135.87,142.45c0.61,3.87,2.06,13.36,2.87,21.32c0.47,4.61,0.44,7.87,0.66,10.28h19.23
c3.13,0,4.99-1.83,4.99-5.2v-16.87v-5.29v-9.07c-1.24,0.62-2.55,1.18-3.95,1.65c-4.04,1.38-8.87,2.36-13.93,2.85
C142.52,142.44,139.18,142.56,135.87,142.45z"/>
<g>
<path class="st3" d="M76,78.92c1.75-12.17,4.69-24.45,9.52-36.87c0.57-1.46,2.2-2.18,3.65-1.61c0.71,0.28,1.24,0.82,1.54,1.46
l10.85,20.44l10.03,0.34l9.29-14.46c0.85-1.32,2.59-1.69,3.9-0.83c0.45,0.29,0.78,0.69,1,1.13l8.9,18.39
c1.89,1.24,6.26,4.82,9.1,12.84c1.42,4.01,1.96,8.08,2.43,11.67c0.55,4.21,1,7.61,2.47,8.29c1.26,0.58,4.99,0.47,9.12,0.35
c1.9-0.06,3.87-0.11,5.82-0.1V62.55c0-5.11-2.85-10.55-7.4-13.45c-0.01,0-0.02-0.01-0.03-0.02L91.4,7.74
c-0.01,0-0.01-0.01-0.02-0.01c-3.36-2.14-9.1-2.62-13.08-0.1l-0.03,0.02l-66.5,42.42l-0.04,0.02C7.25,52.97,5.9,57.01,5.9,60.46
v6.65v4.27v17.15l15.83,9.18c2.84-1.21,9.65-3.79,16.68-4.01c6.83-0.21,13.59,2.39,16.73,3.8L66.3,87.21l0.15-0.13L76,78.92
L76,78.92L76,78.92z M125.78,48.53L125.78,48.53L125.78,48.53z"/>
</g>
<path class="st4" d="M22.79,103.46L39,99.38c-0.11,4.56-1.23,15.88-8.85,27.32c-0.44-0.53-0.7-1.14-0.65-1.72
c0.13-1.49-0.97-2.81-2.45-2.94c-1.48-0.13-2.78,0.98-2.91,2.47c-0.21,2.48,0.92,4.87,2.74,6.54
c-5.48,6.18-13.56,9.13-20.98,10.47v-3.24l7.17-1.7c1.52-0.36,2.46-1.89,2.11-3.42c-0.35-1.53-1.87-2.48-3.39-2.13l-5.89,1.4
v-7.02l6.6,0.34c1.55,0.08,2.88-1.13,2.96-2.69c0.08-1.57-1.12-2.9-2.67-2.98l-6.89-0.36V102.8v-7.72l14.27,8.28
C21,103.85,21.98,103.85,22.79,103.46c0.03-0.01,7.81-3.82,15.77-4.07L39,99.38L22.79,103.46L22.79,103.46z M26.72,109.25
L26.72,109.25c-1.75,0-3.17,1.94-3.17,4.32s1.42,4.32,3.17,4.32s3.17-1.93,3.17-4.32C29.89,111.19,28.47,109.25,26.72,109.25z"/>
<path class="st2" d="M76.96,174.05l-0.34-16.56h0.05c1.56,0,2.83-1.27,2.83-2.85c0-4.27-0.07-9.47-0.14-14.79l-0.08-5.82
l-0.1-9.42l-0.01-5.71c0.06-22.69,1.52-45.66,9.46-68.9l8.74,16.46c0.49,0.93,1.42,1.47,2.39,1.5L113,68.41
c1.02,0.03,1.93-0.49,2.45-1.29l7.44-11.58l7.08,14.62c0.31,0.65,0.84,1.13,1.46,1.38c0.84,0.47,4.45,2.86,7.03,10.12
c1.25,3.52,1.73,7.22,2.16,10.49c0.78,5.95,1.42,10.75,5.74,12.73c0.58,0.26,1.26,0.46,2.04,0.6c-0.78,0.93-2.06,2-3.99,2.42
c-3.68,0.8-12.64,1.59-16.72-7.57s-4.74-20.71-6.58-21.24s-4.34,1.2-1.18,14.6c3.16,13.41,6.45,18.32,2.24,20.71
s-16.98-7.57-20.53,2.12s-1.97,39.51,0,57.52L76.96,174.05L76.96,174.05z M99.76,67.96L99.76,67.96L110,99.5
c1.75,0,3.17-1.93,3.17-4.32s-1.42-4.32-3.17-4.32c-1.75,0-3.17,1.93-3.17,4.32s1.42,4.32,3.17,4.32L99.76,67.96L99.76,67.96z
M128.01,95.18L128.01,95.18c0,2.39,1.42,4.32,3.17,4.32c1.75,0,3.17-1.93,3.17-4.32s-1.42-4.32-3.17-4.32
C129.43,90.86,128.01,92.79,128.01,95.18z"/>
<path class="st1" d="M31.1,61.24c2.56,7.78,12.66,12.98,22.94,18.17c5.15-10.36,10.49-20.72,7.93-28.5
c-2.61-7.93-16.21-8.16-15.64,3.65C39.75,45.52,28.49,53.31,31.1,61.24z"/>
<path class="st3" d="M114.67,137.56c-1.55,0.81-4.3,2.68-4.75,5.97c-0.06,0.42,0,0.74,0.15,0.95c0.18,0.26,0.51,0.5,0.94,0.71
c0.57,0.28,1.28,0.47,2.06,0.58c2.58,0.36,5.59-0.15,7.35-1.39c1.15-0.81,2.2-1.67,3.18-2.47l0.96-0.78l-2.51-0.62l-2.2-0.67
c-2.26,0.69-5.59,1.96-5.59,1.96l3.31-2.82C116.55,138.54,115.58,138.07,114.67,137.56z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

98
task3-quote/public/favicon192x192.svg Normal file
View File

@@ -0,0 +1,98 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 192 192" style="enable-background:new 0 0 192 192;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#663333;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD49D;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6566;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#BEB0B0;}
</style>
<g id="Guides_For_Artboard">
</g>
<g id="Layer_1">
</g>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_5">
<g>
<path class="st0" d="M180.8,106.63c2.86,0.42,5.43,0.88,7.45,2.56c3.54,2.95,4.03,8.5,3.63,12.7c-0.25,2.64-0.9,5.51-2.02,8.37
c-1.26,3.24-3.15,6.51-5.76,9.48c-1,1.14-2.1,2.22-3.31,3.24v3.32c0.01,0.16,0.02,0.33,0.02,0.49v9.67v5.65v18
c0,3.49-1.12,6.36-3.18,8.51c-2.13,2.22-5.01,3.38-8.43,3.38H12.09c-3.31,0-6.32-1.33-8.52-3.51C1.36,186.28,0,183.25,0,179.88
c0-34.92,0-69.19,0-103.73v-4.56V64.5c0-2.97,0.66-6.25,2.44-9.42c1.23-2.19,3-4.28,5.43-6.09c0.32-0.24,0.65-0.47,0.99-0.69
c0.11-0.08,0.23-0.16,0.34-0.23h0.01l30.47-19.44L78.33,3.96c3.94-2.51,6.71-4,12.09-3.96c3.64,0.03,7.31,0.97,10.41,2.9
l67.9,43.32c0.79,0.51,1.73,1.06,2.49,1.61c2.79,1.99,5,4.71,6.62,7.66c1.92,3.49,2.99,7.41,2.99,11.22l-0.02,29.93v9.99H180.8z"
/>
<path class="st1" d="M24.31,110.35l60.13,16.47l0.01,6.09l0.11,10.05l0.09,6.21c0.08,5.68,0.15,11.22,0.15,15.78
c0,1.68-1.35,3.04-3.02,3.04c-1.66,0-3.01-1.36-3.01-3.04c0-6.43-0.07-11.77-0.15-17.05l-10.44-2.21
c-1.62-0.34-2.67-1.95-2.33-3.59c0.34-1.64,1.93-2.69,3.55-2.35l9.13,1.93l-0.09-8.31L70.27,134c-1.66,0.12-3.1-1.13-3.22-2.8
c-0.12-1.67,1.12-3.13,2.78-3.25l8.61-0.66c0.02-11.3,0.35-22.67,1.53-34.13c-1.76,1.42-3.77,3.07-5.2,4.34l-13.31,12.28
c-0.91,0.9-2.33,1.15-3.52,0.52c-0.03-0.01-8.42-4.54-16.8-4.28C32.63,106.28,24.34,110.35,24.31,110.35
c-0.86,0.42-1.9,0.42-2.8-0.1l-15.22-8.83v8.23v18.05l7.35,0.38c1.66,0.09,2.93,1.51,2.85,3.18c-0.08,1.67-1.5,2.96-3.16,2.87
l-7.04-0.37v7.49l6.28-1.49c1.62-0.38,3.24,0.64,3.61,2.27c0.38,1.63-0.63,3.26-2.25,3.65l-7.65,1.81v32.38
c0,3.25,2.57,5.78,5.8,5.78H169.2c3.34,0,5.33-1.95,5.33-5.54v-18v-5.65v-9.67c-1.32,0.66-2.72,1.25-4.21,1.76
c-4.31,1.47-9.46,2.51-14.85,3.04c-3.84,0.37-7.82,0.49-11.73,0.31c-3.57,0.44-5.6,2.11-8.11,4.17c-1.1,0.9-2.27,1.86-3.75,2.9
c-3.07,2.16-8.03,3.11-12.1,2.53c-1.43-0.2-2.79-0.59-3.98-1.16c-1.34-0.65-2.49-1.56-3.31-2.75c-1.01-1.46-1.49-3.23-1.2-5.31
c0.62-4.49,3.4-7.51,5.91-9.37c-1.71-1.75-3.01-3.77-3.78-6.09c-0.36-1.08-0.61-2.23-0.72-3.43c-0.15-1.67,1.06-3.14,2.71-3.3
c1.65-0.16,3.12,1.07,3.27,2.73c0.07,0.73,0.22,1.42,0.44,2.08c0.78,2.32,2.5,4.25,4.86,5.8l0.31,0.2
c2.08,1.31,4.64,2.35,7.48,3.14c3.61,1,7.65,1.58,11.81,1.8c0.11,0,0.23,0.01,0.35,0.02c3.64,0.17,7.37,0.06,10.99-0.29
c4.93-0.48,9.61-1.43,13.51-2.76c1.5-0.51,2.88-1.12,4.15-1.8c5.88-3.18,9.53-8.13,11.45-13.05c1.89-4.83,2.12-9.5,1.17-12.33
c-0.1-0.31-0.22-0.58-0.34-0.81c-1.31-2.47-9.4-2.24-16.36-2.03c-5.15,0.15-9.79,0.28-12.37-0.9c-4.61-2.11-5.29-7.24-6.12-13.58
c-0.46-3.49-0.98-7.43-2.31-11.19c-2.75-7.75-6.6-10.29-7.5-10.8c-0.66-0.27-1.22-0.78-1.56-1.48l-7.55-15.59l-7.94,12.35
c-0.55,0.86-1.52,1.41-2.61,1.38l-14.13-0.48c-1.04-0.03-2.03-0.61-2.55-1.6l-9.32-17.56c-8.48,24.79-10.03,49.29-10.1,73.49
L24.31,110.35L24.31,110.35z M106.41,72.49L106.41,72.49L28.5,116.54c1.87,0,3.38,2.06,3.38,4.61c0,2.54-1.51,4.61-3.38,4.61
s-3.38-2.06-3.38-4.61c0-2.55,1.52-4.61,3.38-4.61L106.41,72.49L106.41,72.49z M53.25,116.54L53.25,116.54
c1.87,0,3.38,2.06,3.38,4.61c0,2.54-1.52,4.61-3.38,4.61c-1.87,0-3.38-2.06-3.38-4.61C49.87,118.6,51.39,116.54,53.25,116.54
L53.25,116.54z M50.89,133.31L50.89,133.31c-0.06-0.77,0.17-1.5,0.62-2.06c0.48-0.6,1.18-1,1.99-1.08
c1.58-0.14,2.97,1.04,3.1,2.63c0.04,0.49,0.04,0.98-0.02,1.45c-0.25,2.3-1.54,4.43-3.35,5.92c-1.09,0.9-2.4,1.57-3.8,1.92
c-1.45,0.36-3,0.36-4.52-0.12c-1.33-0.42-2.62-1.19-3.75-2.38c-1.13,1.2-2.41,1.96-3.75,2.38c-1.51,0.47-3.06,0.47-4.51,0.12
c-1.4-0.34-2.7-1.02-3.8-1.92c-2.19-1.79-3.61-4.53-3.37-7.37c0.14-1.59,1.53-2.77,3.11-2.63s2.75,1.54,2.61,3.13
c-0.07,0.84,0.46,1.74,1.26,2.4c0.46,0.37,0.99,0.65,1.53,0.79c0.49,0.12,1.01,0.13,1.49-0.03c0.96-0.3,1.91-1.25,2.66-3.15
c0.23-0.87,0.86-1.61,1.76-1.94c0.32-0.12,0.64-0.18,0.96-0.18h0.02h0.05h0.02c0.32,0,0.64,0.06,0.96,0.18
c0.9,0.34,1.53,1.08,1.76,1.94c0.75,1.9,1.71,2.85,2.66,3.15c0.49,0.15,1,0.15,1.49,0.03c0.55-0.13,1.08-0.41,1.54-0.79
C50.44,135.05,50.97,134.15,50.89,133.31L50.89,133.31z M117.33,106.13L117.33,106.13c-1.87,0-3.38-2.06-3.38-4.61
s1.52-4.61,3.38-4.61c1.87,0,3.38,2.06,3.38,4.61S119.2,106.13,117.33,106.13L117.33,106.13z M136.55,101.52L136.55,101.52
c0-2.55,1.51-4.61,3.38-4.61c1.87,0,3.38,2.06,3.38,4.61s-1.52,4.61-3.38,4.61C138.06,106.13,136.55,104.07,136.55,101.52
L136.55,101.52z M161.95,123.43L161.95,123.43c0-3.64,4.11-6.6,9.18-6.6s9.18,2.95,9.18,6.6s-4.11,6.6-9.18,6.6
C166.06,130.04,161.95,127.08,161.95,123.43z"/>
<path class="st2" d="M144.93,151.95c0.65,4.13,2.19,14.25,3.06,22.74c0.5,4.91,0.47,8.39,0.7,10.96h20.51
c3.34,0,5.33-1.95,5.33-5.54v-18v-5.65v-9.67c-1.32,0.66-2.72,1.25-4.21,1.76c-4.31,1.47-9.46,2.51-14.85,3.04
C152.02,151.93,148.45,152.06,144.93,151.95z"/>
<g>
<path class="st3" d="M81.07,84.18c1.87-12.98,5-26.08,10.16-39.32c0.6-1.56,2.35-2.33,3.9-1.72c0.76,0.3,1.33,0.87,1.64,1.56
l11.57,21.8l10.7,0.36l9.91-15.42c0.9-1.4,2.77-1.8,4.16-0.89c0.48,0.31,0.83,0.74,1.07,1.21l9.5,19.61
c2.01,1.32,6.67,5.14,9.7,13.7c1.52,4.28,2.09,8.62,2.59,12.44c0.59,4.49,1.07,8.12,2.64,8.84c1.35,0.62,5.32,0.51,9.73,0.38
c2.03-0.06,4.13-0.12,6.21-0.1V66.72c0-5.46-3.04-11.25-7.89-14.34c-0.01-0.01-0.02-0.01-0.03-0.02L97.49,8.26
c-0.01,0-0.02-0.01-0.02-0.01c-3.58-2.28-9.71-2.79-13.96-0.1l-0.03,0.02L12.55,53.41l-0.04,0.03C7.74,56.5,6.29,60.81,6.29,64.5
v7.09v4.56v18.29l16.88,9.8c3.03-1.29,10.29-4.04,17.8-4.27c7.29-0.23,14.49,2.55,17.84,4.06l11.9-10.98l0.16-0.13L81.07,84.18
L81.07,84.18L81.07,84.18z M134.16,51.76L134.16,51.76L134.16,51.76z"/>
</g>
<path class="st4" d="M24.31,110.35L41.6,106c-0.12,4.86-1.31,16.94-9.44,29.14c-0.47-0.56-0.74-1.22-0.69-1.84
c0.14-1.59-1.03-2.99-2.61-3.13s-2.97,1.04-3.11,2.63c-0.23,2.64,0.98,5.19,2.92,6.98c-5.84,6.59-14.46,9.73-22.38,11.17v-3.46
l7.65-1.81c1.62-0.38,2.63-2.01,2.25-3.65c-0.38-1.63-1.99-2.65-3.61-2.27l-6.28,1.49v-7.49l7.04,0.37
c1.66,0.08,3.07-1.2,3.16-2.87c0.08-1.67-1.19-3.1-2.85-3.18L6.3,127.7v-18.05v-8.23l15.22,8.83
C22.4,110.77,23.45,110.77,24.31,110.35c0.03-0.01,8.33-4.07,16.83-4.34L41.6,106L24.31,110.35L24.31,110.35z M28.5,116.54
L28.5,116.54c-1.87,0-3.38,2.06-3.38,4.61c0,2.54,1.52,4.61,3.38,4.61c1.87,0,3.38-2.06,3.38-4.61
C31.88,118.6,30.37,116.54,28.5,116.54z"/>
<path class="st2" d="M82.09,185.66L81.73,168h0.06c1.66,0,3.02-1.36,3.02-3.04c0-4.55-0.07-10.1-0.15-15.78l-0.09-6.21
l-0.11-10.05l-0.01-6.09c0.06-24.2,1.62-48.7,10.1-73.49l9.32,17.56c0.52,0.99,1.51,1.57,2.55,1.6l14.13,0.48
c1.09,0.03,2.06-0.52,2.61-1.38l7.94-12.35l7.55,15.59c0.33,0.7,0.9,1.2,1.56,1.48c0.9,0.5,4.75,3.05,7.5,10.8
c1.33,3.76,1.85,7.7,2.31,11.19c0.83,6.35,1.51,11.47,6.12,13.58c0.62,0.28,1.35,0.49,2.18,0.64c-0.83,0.99-2.2,2.13-4.26,2.58
c-3.93,0.85-13.48,1.7-17.83-8.07c-4.35-9.77-5.06-22.09-7.02-22.65c-1.97-0.57-4.63,1.27-1.26,15.57s6.88,19.54,2.39,22.09
c-4.49,2.55-18.11-8.07-21.9,2.26c-3.79,10.34-2.11,42.15,0,61.35L82.09,185.66L82.09,185.66z M106.41,72.49L106.41,72.49
l10.92,33.64c1.87,0,3.38-2.06,3.38-4.61s-1.51-4.61-3.38-4.61s-3.38,2.06-3.38,4.61s1.52,4.61,3.38,4.61L106.41,72.49
L106.41,72.49z M136.55,101.52L136.55,101.52c0,2.55,1.51,4.61,3.38,4.61c1.87,0,3.38-2.06,3.38-4.61s-1.52-4.61-3.38-4.61
C138.06,96.91,136.55,98.98,136.55,101.52z"/>
<path class="st1" d="M33.17,65.32c2.73,8.3,13.5,13.84,24.47,19.39c5.5-11.05,11.19-22.1,8.46-30.4
c-2.78-8.46-17.29-8.7-16.69,3.89C42.4,48.56,30.39,56.86,33.17,65.32z"/>
<path class="st3" d="M122.31,146.73c-1.66,0.86-4.58,2.86-5.07,6.37c-0.06,0.45,0,0.78,0.16,1.01c0.19,0.28,0.54,0.53,1,0.75
c0.61,0.3,1.37,0.5,2.19,0.62c2.75,0.39,5.97-0.16,7.84-1.48c1.23-0.87,2.35-1.78,3.39-2.64l1.03-0.84l-2.67-0.66l-2.34-0.72
c-2.42,0.74-5.96,2.09-5.96,2.09l3.53-3C124.32,147.78,123.29,147.28,122.31,146.73z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

93
task3-quote/public/favicon32x32.svg Normal file
View File

@@ -0,0 +1,93 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#663333;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD49D;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6566;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#BEB0B0;}
</style>
<g id="Guides_For_Artboard">
</g>
<g id="Layer_1">
</g>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_5">
<g>
<path class="st0" d="M30.13,17.77c0.48,0.07,0.9,0.15,1.24,0.43c0.59,0.49,0.67,1.42,0.61,2.12c-0.04,0.44-0.15,0.92-0.34,1.4
c-0.21,0.54-0.53,1.09-0.96,1.58c-0.17,0.19-0.35,0.37-0.55,0.54v0.55c0,0.03,0,0.05,0,0.08v1.61v0.94v3
c0,0.58-0.19,1.06-0.53,1.42C29.25,31.81,28.77,32,28.2,32H2.01c-0.55,0-1.05-0.22-1.42-0.59C0.23,31.05,0,30.54,0,29.98
c0-5.82,0-11.53,0-17.29v-0.76v-1.18c0-0.5,0.11-1.04,0.41-1.57c0.21-0.36,0.5-0.71,0.91-1.01c0.05-0.04,0.11-0.08,0.17-0.12
C1.5,8.04,1.51,8.02,1.53,8.01l0,0l5.08-3.24l6.44-4.11c0.66-0.42,1.12-0.67,2.01-0.66c0.61,0,1.22,0.16,1.74,0.48L28.12,7.7
c0.13,0.08,0.29,0.18,0.41,0.27c0.46,0.33,0.83,0.78,1.1,1.28c0.32,0.58,0.5,1.23,0.5,1.87v4.99
C30.13,16.11,30.13,17.77,30.13,17.77z"/>
<path class="st1" d="M4.05,18.39l10.02,2.75v1.01l0.02,1.68l0.01,1.04c0.01,0.95,0.03,1.87,0.03,2.63c0,0.28-0.23,0.51-0.5,0.51
c-0.28,0-0.5-0.23-0.5-0.51c0-1.07-0.01-1.96-0.02-2.84l-1.74-0.37c-0.27-0.06-0.44-0.32-0.39-0.6c0.06-0.27,0.32-0.45,0.59-0.39
l1.52,0.32l-0.01-1.39l-1.36,0.1c-0.28,0.02-0.52-0.19-0.54-0.47c-0.02-0.28,0.19-0.52,0.46-0.54l1.43-0.11
c0-1.88,0.06-3.78,0.25-5.69c-0.29,0.24-0.63,0.51-0.87,0.72l-2.22,2.05c-0.15,0.15-0.39,0.19-0.59,0.09c0,0-1.4-0.76-2.8-0.71
C5.44,17.71,4.06,18.39,4.05,18.39c-0.14,0.07-0.32,0.07-0.47-0.02L1.05,16.9v1.37v3.01l1.22,0.06c0.28,0.01,0.49,0.25,0.47,0.53
c-0.01,0.28-0.25,0.49-0.53,0.48L1.05,22.3v1.25L2.1,23.3c0.27-0.06,0.54,0.11,0.6,0.38c0.06,0.27-0.1,0.54-0.37,0.61l-1.27,0.3
v5.4c0,0.54,0.43,0.96,0.97,0.96H28.2c0.56,0,0.89-0.32,0.89-0.92v-3v-0.94v-1.61c-0.22,0.11-0.45,0.21-0.7,0.29
c-0.72,0.24-1.58,0.42-2.48,0.51c-0.64,0.06-1.3,0.08-1.96,0.05c-0.59,0.07-0.93,0.35-1.35,0.69c-0.18,0.15-0.38,0.31-0.62,0.48
c-0.51,0.36-1.34,0.52-2.02,0.42c-0.24-0.03-0.47-0.1-0.66-0.19c-0.22-0.11-0.41-0.26-0.55-0.46c-0.17-0.24-0.25-0.54-0.2-0.88
c0.1-0.75,0.57-1.25,0.98-1.56c-0.28-0.29-0.5-0.63-0.63-1.01c-0.06-0.18-0.1-0.37-0.12-0.57c-0.03-0.28,0.18-0.52,0.45-0.55
c0.28-0.03,0.52,0.18,0.55,0.45c0.01,0.12,0.04,0.24,0.07,0.35c0.13,0.39,0.42,0.71,0.81,0.97l0.05,0.03
c0.35,0.22,0.77,0.39,1.25,0.52c0.6,0.17,1.27,0.26,1.97,0.3c0.02,0,0.04,0,0.06,0c0.61,0.03,1.23,0.01,1.83-0.05
c0.82-0.08,1.6-0.24,2.25-0.46c0.25-0.09,0.48-0.19,0.69-0.3c0.98-0.53,1.59-1.36,1.91-2.17c0.31-0.81,0.35-1.58,0.19-2.05
c-0.02-0.05-0.04-0.1-0.06-0.13c-0.22-0.41-1.57-0.37-2.73-0.34c-0.86,0.02-1.63,0.05-2.06-0.15c-0.77-0.35-0.88-1.21-1.02-2.26
c-0.08-0.58-0.16-1.24-0.38-1.86c-0.46-1.29-1.1-1.72-1.25-1.8c-0.11-0.05-0.2-0.13-0.26-0.25l-1.26-2.6l-1.32,2.06
c-0.09,0.14-0.25,0.24-0.44,0.23l-2.35-0.08c-0.17-0.01-0.34-0.1-0.43-0.27l-1.55-2.93c-1.41,4.13-1.67,8.21-1.68,12.25
L4.05,18.39L4.05,18.39z M17.73,12.08L17.73,12.08L4.75,19.42c0.31,0,0.56,0.34,0.56,0.77c0,0.42-0.25,0.77-0.56,0.77
s-0.56-0.34-0.56-0.77c0-0.42,0.25-0.77,0.56-0.77L17.73,12.08L17.73,12.08z M8.88,19.42L8.88,19.42c0.31,0,0.56,0.34,0.56,0.77
c0,0.42-0.25,0.77-0.56,0.77s-0.56-0.34-0.56-0.77C8.31,19.77,8.56,19.42,8.88,19.42L8.88,19.42z M8.48,22.22L8.48,22.22
c-0.01-0.13,0.03-0.25,0.1-0.34c0.08-0.1,0.2-0.17,0.33-0.18c0.26-0.02,0.49,0.17,0.52,0.44c0.01,0.08,0.01,0.16,0,0.24
c-0.04,0.38-0.26,0.74-0.56,0.99c-0.18,0.15-0.4,0.26-0.63,0.32c-0.24,0.06-0.5,0.06-0.75-0.02c-0.22-0.07-0.44-0.2-0.62-0.4
c-0.19,0.2-0.4,0.33-0.62,0.4C6,23.75,5.74,23.75,5.5,23.69c-0.23-0.06-0.45-0.17-0.63-0.32c-0.37-0.3-0.6-0.75-0.56-1.23
c0.02-0.26,0.25-0.46,0.52-0.44c0.26,0.02,0.46,0.26,0.43,0.52c-0.01,0.14,0.08,0.29,0.21,0.4c0.08,0.06,0.16,0.11,0.26,0.13
c0.08,0.02,0.17,0.02,0.25,0c0.16-0.05,0.32-0.21,0.44-0.52c0.04-0.14,0.14-0.27,0.29-0.32c0.05-0.02,0.11-0.03,0.16-0.03l0,0
h0.01l0,0c0.05,0,0.11,0.01,0.16,0.03c0.15,0.06,0.25,0.18,0.29,0.32c0.13,0.32,0.28,0.47,0.44,0.52c0.08,0.03,0.17,0.02,0.25,0
c0.09-0.02,0.18-0.07,0.26-0.13C8.41,22.51,8.49,22.36,8.48,22.22L8.48,22.22z M19.55,17.69L19.55,17.69
c-0.31,0-0.56-0.34-0.56-0.77c0-0.42,0.25-0.77,0.56-0.77s0.56,0.34,0.56,0.77C20.12,17.34,19.87,17.69,19.55,17.69L19.55,17.69z
M22.76,16.92L22.76,16.92c0-0.42,0.25-0.77,0.56-0.77s0.56,0.34,0.56,0.77c0,0.42-0.25,0.77-0.56,0.77S22.76,17.34,22.76,16.92
L22.76,16.92z M26.99,20.57L26.99,20.57c0-0.61,0.69-1.1,1.53-1.1c0.85,0,1.53,0.49,1.53,1.1s-0.69,1.1-1.53,1.1
S26.99,21.18,26.99,20.57z"/>
<path class="st2" d="M24.15,25.32c0.11,0.69,0.37,2.37,0.51,3.79c0.08,0.82,0.08,1.4,0.12,1.83h3.42c0.56,0,0.89-0.32,0.89-0.92
v-3v-0.94v-1.61c-0.22,0.11-0.45,0.21-0.7,0.29c-0.72,0.24-1.58,0.42-2.48,0.51C25.34,25.32,24.74,25.34,24.15,25.32z"/>
<g>
<path class="st3" d="M13.51,14.03c0.31-2.16,0.83-4.35,1.69-6.55c0.1-0.26,0.39-0.39,0.65-0.29c0.13,0.05,0.22,0.15,0.27,0.26
l1.93,3.63l1.78,0.06l1.65-2.57c0.15-0.23,0.46-0.3,0.69-0.15c0.08,0.05,0.14,0.12,0.18,0.2l1.58,3.27
c0.34,0.22,1.11,0.86,1.62,2.28c0.25,0.71,0.35,1.44,0.43,2.07c0.1,0.75,0.18,1.35,0.44,1.47c0.22,0.1,0.89,0.08,1.62,0.06
c0.34-0.01,0.69-0.02,1.03-0.02V11.1c0-0.91-0.51-1.88-1.31-2.39l0,0L16.25,1.38l0,0c-0.6-0.38-1.62-0.47-2.33-0.02h-0.01
L2.09,8.9H2.08c-0.8,0.51-1.04,1.23-1.04,1.84v1.18v0.76v3.05l2.81,1.63c0.5-0.22,1.72-0.67,2.97-0.71
c1.21-0.04,2.42,0.42,2.97,0.68l1.98-1.83l0.03-0.02L13.51,14.03L13.51,14.03L13.51,14.03z M22.36,8.63L22.36,8.63L22.36,8.63z"
/>
</g>
<path class="st4" d="M4.05,18.39l2.88-0.72c-0.02,0.81-0.22,2.82-1.57,4.86c-0.08-0.09-0.12-0.2-0.12-0.31
c0.02-0.27-0.17-0.5-0.43-0.52c-0.26-0.02-0.49,0.17-0.52,0.44C4.26,22.58,4.46,23,4.78,23.3c-0.97,1.1-2.41,1.62-3.73,1.86v-0.58
l1.27-0.3c0.27-0.06,0.44-0.34,0.37-0.61c-0.06-0.27-0.33-0.44-0.6-0.38l-1.05,0.25V22.3l1.17,0.06c0.28,0.01,0.51-0.2,0.53-0.48
c0.01-0.28-0.2-0.52-0.47-0.53l-1.22-0.06v-3.01V16.9l2.54,1.47C3.73,18.46,3.91,18.46,4.05,18.39c0,0,1.39-0.68,2.8-0.72h0.08
L4.05,18.39L4.05,18.39z M4.75,19.42L4.75,19.42c-0.31,0-0.56,0.34-0.56,0.77c0,0.42,0.25,0.77,0.56,0.77s0.56-0.34,0.56-0.77
C5.31,19.77,5.06,19.42,4.75,19.42z"/>
<path class="st2" d="M13.68,30.94L13.62,28h0.01c0.28,0,0.5-0.23,0.5-0.51c0-0.76-0.01-1.68-0.03-2.63l-0.01-1.04l-0.02-1.68
v-1.01c0.01-4.03,0.27-8.12,1.68-12.25l1.55,2.93c0.09,0.17,0.25,0.26,0.43,0.27l2.35,0.08c0.18,0.01,0.34-0.09,0.44-0.23
l1.32-2.06l1.26,2.6c0.06,0.12,0.15,0.2,0.26,0.25c0.15,0.08,0.79,0.51,1.25,1.8c0.22,0.63,0.31,1.28,0.38,1.86
c0.14,1.06,0.25,1.91,1.02,2.26c0.1,0.05,0.22,0.08,0.36,0.11c-0.14,0.16-0.37,0.36-0.71,0.43c-0.66,0.14-2.25,0.28-2.97-1.35
c-0.73-1.63-0.84-3.68-1.17-3.78c-0.33-0.09-0.77,0.21-0.21,2.6c0.56,2.38,1.15,3.26,0.4,3.68c-0.75,0.42-3.02-1.35-3.65,0.38
c-0.63,1.72-0.35,7.02,0,10.23H13.68L13.68,30.94z M17.73,12.08L17.73,12.08l1.82,5.61c0.31,0,0.56-0.34,0.56-0.77
c0-0.42-0.25-0.77-0.56-0.77s-0.56,0.34-0.56,0.77c0,0.42,0.25,0.77,0.56,0.77L17.73,12.08L17.73,12.08z M22.76,16.92L22.76,16.92
c0,0.42,0.25,0.77,0.56,0.77s0.56-0.34,0.56-0.77c0-0.42-0.25-0.77-0.56-0.77S22.76,16.5,22.76,16.92z"/>
<path class="st1" d="M5.53,10.89c0.46,1.38,2.25,2.31,4.08,3.23c0.92-1.84,1.86-3.68,1.41-5.07C10.55,7.64,8.14,7.6,8.24,9.7
C7.07,8.09,5.07,9.48,5.53,10.89z"/>
<path class="st3" d="M20.39,24.46c-0.28,0.14-0.76,0.48-0.84,1.06c-0.01,0.08,0,0.13,0.03,0.17c0.03,0.05,0.09,0.09,0.17,0.13
c0.1,0.05,0.23,0.08,0.37,0.1c0.46,0.06,0.99-0.03,1.31-0.25c0.21-0.14,0.39-0.3,0.57-0.44l0.17-0.14l-0.45-0.11l-0.39-0.12
c-0.4,0.12-0.99,0.35-0.99,0.35l0.59-0.5C20.72,24.63,20.55,24.55,20.39,24.46z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

84
task3-quote/public/favicon96x96.svg Normal file
View File

@@ -0,0 +1,84 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#663333;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD49D;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6566;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#BEB0B0;}
</style>
<g id="Guides_For_Artboard">
</g>
<g id="Layer_5">
<g>
<path class="st0" d="M90.4,53.32c1.43,0.21,2.71,0.44,3.72,1.28c1.77,1.47,2.02,4.25,1.82,6.35c-0.13,1.32-0.45,2.76-1.01,4.19
c-0.63,1.62-1.58,3.26-2.88,4.74c-0.5,0.57-1.05,1.11-1.65,1.62v1.66c0.01,0.08,0.01,0.17,0.01,0.25v4.84v2.82v9
c0,1.74-0.56,3.18-1.59,4.26C87.76,95.42,86.32,96,84.6,96H6.04c-1.66,0-3.16-0.67-4.26-1.75C0.68,93.14,0,91.63,0,89.94
c0-17.46,0-34.59,0-51.87v-2.28v-3.55c0-1.48,0.33-3.13,1.22-4.71c0.62-1.09,1.5-2.14,2.71-3.05c0.16-0.12,0.33-0.23,0.5-0.35
c0.05-0.04,0.11-0.08,0.17-0.11l0,0l15.23-9.72L39.16,1.98c1.97-1.25,3.35-2,6.04-1.98c1.82,0.01,3.65,0.49,5.21,1.45l33.95,21.66
c0.39,0.25,0.86,0.53,1.24,0.81c1.39,0.99,2.5,2.35,3.31,3.83c0.96,1.74,1.49,3.71,1.49,5.61l-0.01,14.97v4.99H90.4z"/>
<path class="st1" d="M12.15,55.18l30.06,8.24l0.01,3.05l0.05,5.02l0.04,3.1c0.04,2.84,0.07,5.61,0.07,7.89
c0,0.84-0.68,1.52-1.51,1.52c-0.83,0-1.51-0.68-1.51-1.52c0-3.22-0.04-5.88-0.07-8.53l-5.22-1.1c-0.81-0.17-1.33-0.98-1.17-1.79
c0.17-0.82,0.97-1.34,1.78-1.17l4.57,0.97l-0.04-4.15L35.12,67c-0.83,0.06-1.55-0.57-1.61-1.4c-0.06-0.84,0.56-1.56,1.39-1.63
l4.3-0.33c0.01-5.65,0.18-11.33,0.76-17.07c-0.88,0.71-1.89,1.54-2.6,2.17l-6.66,6.14c-0.45,0.45-1.17,0.58-1.76,0.26
c-0.01-0.01-4.21-2.27-8.4-2.14C16.32,53.14,12.17,55.17,12.15,55.18c-0.43,0.21-0.95,0.21-1.4-0.05l-7.61-4.42v4.12v9.02
l3.67,0.19c0.83,0.04,1.47,0.76,1.42,1.59c-0.04,0.84-0.75,1.48-1.58,1.43l-3.52-0.18v3.74l3.14-0.75
C7.1,69.69,7.9,70.2,8.1,71.02c0.19,0.82-0.31,1.63-1.13,1.82l-3.82,0.91v16.19c0,1.63,1.29,2.89,2.9,2.89h78.56
c1.67,0,2.66-0.98,2.66-2.77v-9v-2.82V73.4c-0.66,0.33-1.36,0.63-2.11,0.88c-2.15,0.74-4.73,1.26-7.43,1.52
c-1.92,0.19-3.91,0.25-5.87,0.15c-1.78,0.22-2.8,1.06-4.05,2.09c-0.55,0.45-1.14,0.93-1.87,1.45c-1.54,1.08-4.01,1.55-6.05,1.26
c-0.71-0.1-1.4-0.29-1.99-0.58c-0.67-0.33-1.24-0.78-1.65-1.38c-0.51-0.73-0.74-1.62-0.6-2.66c0.31-2.25,1.7-3.75,2.95-4.68
c-0.85-0.87-1.5-1.88-1.89-3.05c-0.18-0.54-0.3-1.11-0.36-1.72c-0.07-0.83,0.53-1.57,1.35-1.65c0.83-0.08,1.56,0.53,1.64,1.37
c0.04,0.36,0.11,0.71,0.22,1.04c0.39,1.16,1.25,2.12,2.43,2.9l0.15,0.1c1.04,0.66,2.32,1.17,3.74,1.57c1.8,0.5,3.82,0.79,5.9,0.9
c0.06,0,0.12,0.01,0.17,0.01c1.82,0.09,3.69,0.03,5.49-0.14c2.46-0.24,4.81-0.71,6.76-1.38c0.75-0.26,1.44-0.56,2.07-0.9
c2.94-1.59,4.77-4.06,5.73-6.52c0.94-2.42,1.06-4.75,0.59-6.17c-0.05-0.15-0.11-0.29-0.17-0.41c-0.66-1.23-4.7-1.12-8.18-1.01
c-2.58,0.07-4.9,0.14-6.19-0.45c-2.3-1.06-2.65-3.62-3.06-6.79c-0.23-1.74-0.49-3.72-1.15-5.59c-1.37-3.87-3.3-5.15-3.75-5.4
c-0.33-0.14-0.61-0.39-0.78-0.74l-3.78-7.8l-3.97,6.18c-0.28,0.43-0.76,0.7-1.31,0.69l-7.06-0.24c-0.52-0.02-1.01-0.3-1.27-0.8
l-4.66-8.78c-4.24,12.4-5.01,24.65-5.05,36.75L12.15,55.18L12.15,55.18z M53.21,36.24L53.21,36.24L14.25,58.26
c0.93,0,1.69,1.03,1.69,2.3s-0.76,2.3-1.69,2.3s-1.69-1.03-1.69-2.3s0.76-2.3,1.69-2.3L53.21,36.24L53.21,36.24z M26.63,58.26
L26.63,58.26c0.93,0,1.69,1.03,1.69,2.3s-0.76,2.3-1.69,2.3s-1.69-1.03-1.69-2.3C24.94,59.3,25.7,58.26,26.63,58.26L26.63,58.26z
M25.45,66.65L25.45,66.65c-0.03-0.38,0.09-0.75,0.31-1.03c0.24-0.3,0.59-0.5,1-0.54c0.79-0.07,1.48,0.52,1.55,1.32
c0.02,0.25,0.02,0.49-0.01,0.73c-0.13,1.15-0.77,2.22-1.67,2.96c-0.55,0.45-1.2,0.79-1.9,0.96c-0.73,0.18-1.5,0.18-2.26-0.06
c-0.67-0.21-1.31-0.59-1.87-1.19c-0.57,0.6-1.21,0.98-1.87,1.19c-0.76,0.23-1.53,0.23-2.26,0.06c-0.7-0.17-1.35-0.51-1.9-0.96
c-1.09-0.9-1.8-2.26-1.69-3.69c0.07-0.79,0.76-1.38,1.55-1.32c0.79,0.07,1.37,0.77,1.31,1.57c-0.04,0.42,0.23,0.87,0.63,1.2
c0.23,0.19,0.5,0.33,0.77,0.39c0.25,0.06,0.5,0.06,0.75-0.02c0.48-0.15,0.95-0.62,1.33-1.57c0.12-0.43,0.43-0.81,0.88-0.97
c0.16-0.06,0.32-0.09,0.48-0.09h0.01h0.03h0.01c0.16,0,0.32,0.03,0.48,0.09c0.45,0.17,0.76,0.54,0.88,0.97
c0.37,0.95,0.85,1.42,1.33,1.57c0.25,0.07,0.5,0.07,0.75,0.02c0.27-0.07,0.54-0.21,0.77-0.39C25.22,67.52,25.48,67.08,25.45,66.65
L25.45,66.65z M58.67,53.06L58.67,53.06c-0.93,0-1.69-1.03-1.69-2.3s0.76-2.3,1.69-2.3s1.69,1.03,1.69,2.3
C60.36,52.04,59.6,53.06,58.67,53.06L58.67,53.06z M68.28,50.76L68.28,50.76c0-1.27,0.76-2.3,1.69-2.3c0.93,0,1.69,1.03,1.69,2.3
s-0.76,2.3-1.69,2.3C69.04,53.06,68.28,52.04,68.28,50.76L68.28,50.76z M80.98,61.72L80.98,61.72c0-1.82,2.05-3.3,4.59-3.3
c2.53,0,4.59,1.48,4.59,3.3s-2.05,3.3-4.59,3.3C83.03,65.02,80.98,63.54,80.98,61.72z"/>
<path class="st2" d="M72.47,75.97c0.33,2.06,1.1,7.13,1.53,11.37c0.25,2.46,0.23,4.2,0.35,5.48H84.6c1.67,0,2.66-0.98,2.66-2.77
v-9v-2.82V73.4c-0.66,0.33-1.36,0.63-2.11,0.88c-2.15,0.74-4.73,1.26-7.43,1.52C76.01,75.97,74.23,76.03,72.47,75.97z"/>
<g>
<path class="st3" d="M40.53,42.09c0.93-6.49,2.5-13.04,5.08-19.66c0.3-0.78,1.17-1.16,1.95-0.86c0.38,0.15,0.66,0.44,0.82,0.78
l5.79,10.9l5.35,0.18l4.95-7.71c0.45-0.7,1.38-0.9,2.08-0.44c0.24,0.15,0.42,0.37,0.53,0.6l4.75,9.81
c1.01,0.66,3.34,2.57,4.85,6.85c0.76,2.14,1.05,4.31,1.3,6.22c0.29,2.25,0.53,4.06,1.32,4.42c0.67,0.31,2.66,0.25,4.86,0.19
c1.01-0.03,2.06-0.06,3.1-0.05V33.35c0-2.73-1.52-5.63-3.95-7.17c-0.01,0-0.01-0.01-0.02-0.01L48.74,4.12
c-0.01,0-0.01-0.01-0.01-0.01c-1.79-1.14-4.85-1.4-6.98-0.05l-0.02,0.01L6.27,26.7l-0.02,0.01c-2.38,1.53-3.11,3.69-3.11,5.53
v3.55v2.28v9.15l8.44,4.9c1.51-0.65,5.15-2.02,8.9-2.14c3.64-0.11,7.25,1.27,8.92,2.03l5.95-5.49l0.08-0.07L40.53,42.09
L40.53,42.09L40.53,42.09z M67.08,25.88L67.08,25.88L67.08,25.88z"/>
</g>
<path class="st4" d="M12.15,55.18L20.8,53c-0.06,2.43-0.66,8.47-4.72,14.57c-0.23-0.28-0.37-0.61-0.35-0.92
c0.07-0.79-0.52-1.5-1.31-1.57c-0.79-0.07-1.48,0.52-1.55,1.32c-0.11,1.32,0.49,2.6,1.46,3.49c-2.92,3.3-7.23,4.87-11.19,5.58
v-1.73l3.82-0.91c0.81-0.19,1.31-1.01,1.13-1.82c-0.19-0.82-1-1.32-1.81-1.14l-3.14,0.75v-3.74l3.52,0.18
c0.83,0.04,1.54-0.6,1.58-1.43c0.04-0.84-0.6-1.55-1.42-1.59l-3.67-0.19v-9.02v-4.12l7.61,4.42
C11.2,55.38,11.72,55.38,12.15,55.18c0.02-0.01,4.17-2.04,8.41-2.17L20.8,53L12.15,55.18L12.15,55.18z M14.25,58.26L14.25,58.26
c-0.93,0-1.69,1.03-1.69,2.3s0.76,2.3,1.69,2.3s1.69-1.03,1.69-2.3C15.94,59.3,15.18,58.26,14.25,58.26z"/>
<path class="st2" d="M41.05,92.83L40.87,84h0.03c0.83,0,1.51-0.68,1.51-1.52c0-2.28-0.04-5.05-0.07-7.89l-0.04-3.1l-0.05-5.02
l-0.01-3.05c0.03-12.1,0.81-24.35,5.05-36.75l4.66,8.78c0.26,0.5,0.76,0.78,1.27,0.8l7.06,0.24c0.54,0.02,1.03-0.26,1.31-0.69
l3.97-6.18l3.78,7.8c0.17,0.35,0.45,0.6,0.78,0.74c0.45,0.25,2.37,1.53,3.75,5.4c0.67,1.88,0.92,3.85,1.15,5.59
c0.42,3.17,0.76,5.73,3.06,6.79c0.31,0.14,0.67,0.25,1.09,0.32c-0.42,0.5-1.1,1.07-2.13,1.29c-1.96,0.43-6.74,0.85-8.92-4.04
s-2.53-11.05-3.51-11.33c-0.98-0.28-2.31,0.64-0.63,7.79c1.69,7.15,3.44,9.77,1.19,11.05c-2.25,1.27-9.06-4.04-10.95,1.13
c-1.89,5.17-1.05,21.07,0,30.68L41.05,92.83L41.05,92.83z M53.21,36.24L53.21,36.24l5.46,16.82c0.93,0,1.69-1.03,1.69-2.3
s-0.76-2.3-1.69-2.3s-1.69,1.03-1.69,2.3s0.76,2.3,1.69,2.3L53.21,36.24L53.21,36.24z M68.28,50.76L68.28,50.76
c0,1.27,0.76,2.3,1.69,2.3c0.93,0,1.69-1.03,1.69-2.3s-0.76-2.3-1.69-2.3C69.04,48.46,68.28,49.49,68.28,50.76z"/>
<path class="st1" d="M16.59,32.66c1.37,4.15,6.75,6.92,12.23,9.69c2.75-5.53,5.59-11.05,4.23-15.2c-1.39-4.23-8.65-4.35-8.34,1.95
C21.2,24.28,15.19,28.43,16.59,32.66z"/>
<path class="st3" d="M61.16,73.36c-0.83,0.43-2.29,1.43-2.53,3.18c-0.03,0.22,0,0.39,0.08,0.51c0.1,0.14,0.27,0.27,0.5,0.38
c0.3,0.15,0.68,0.25,1.1,0.31c1.38,0.19,2.98-0.08,3.92-0.74c0.61-0.43,1.17-0.89,1.7-1.32l0.51-0.42l-1.34-0.33l-1.17-0.36
c-1.21,0.37-2.98,1.05-2.98,1.05l1.77-1.5C62.16,73.89,61.64,73.64,61.16,73.36z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
task3-quote/public/icons/HKAAC_logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
task3-quote/public/icons/HKSCDA_logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
task3-quote/public/icons/HKSPCA_logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
task3-quote/public/icons/LAP_logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 597 KiB

BIN
task3-quote/public/icons/SAA_logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
task3-quote/public/icons/arrow.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/icons/cat_icon.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

1
task3-quote/public/icons/dog_1049388.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

1
task3-quote/public/icons/dog_1049393.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

1
task3-quote/public/icons/dog_1049421.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
task3-quote/public/icons/dog_icon.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
task3-quote/public/icons/email.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

65
task3-quote/public/icons/email.svg Normal file
View File

@@ -0,0 +1,65 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<rect x="441.061" y="193.84" style="fill:#507C5C;" width="42.511" height="30.21"/>
<rect x="28.431" y="193.84" style="fill:#507C5C;" width="39.489" height="30.21"/>
<path style="fill:#507C5C;" d="M444.364,402.339H67.638c-8.344,0-15.107-6.763-15.107-15.107V53.087
C52.531,23.815,76.345,0,105.616,0h300.769c29.271,0,53.086,23.815,53.086,53.087v334.145
C459.471,395.576,452.708,402.339,444.364,402.339z M82.744,372.125h346.513V53.087c0-12.613-10.261-22.873-22.872-22.873H105.616
c-12.611,0-22.872,10.261-22.872,22.873V372.125z"/>
</g>
<path style="fill:#CFF09E;" d="M444.215,496.893H67.787c-24.957,0-45.188-20.231-45.188-45.188v-231.4
c0-9.927,11.027-15.883,19.329-10.44L245.302,343.18c6.497,4.259,14.901,4.259,21.399,0l203.374-133.315
c8.303-5.443,19.329,0.514,19.329,10.44v231.4C489.403,476.662,469.171,496.893,444.215,496.893z"/>
<g>
<path style="fill:#507C5C;" d="M444.215,512H67.787c-33.247,0-60.295-27.047-60.295-60.295v-231.4
c0-15.226,12.392-27.612,27.624-27.612c5.346,0,10.566,1.57,15.093,4.537l203.374,133.317c0.909,0.597,1.817,0.722,2.417,0.722
c0.6,0,1.508-0.125,2.417-0.722L461.792,197.23c4.528-2.967,9.747-4.537,15.093-4.537c15.232,0,27.624,12.386,27.624,27.612v231.4
C504.509,484.953,477.462,512,444.215,512z M37.706,225.159v226.546c0,16.586,13.495,30.081,30.081,30.081h376.428
c16.586,0,30.081-13.495,30.081-30.081V225.159L274.983,355.814c-5.656,3.707-12.218,5.667-18.982,5.667
c-6.763,0-13.326-1.959-18.982-5.667L37.706,225.159z"/>
<path style="fill:#507C5C;" d="M41.942,498.614c-4.923,0-9.748-2.402-12.649-6.827c-4.574-6.978-2.626-16.343,4.352-20.917
l70.511-46.223c6.979-4.574,16.343-2.626,20.917,4.352c4.574,6.978,2.626,16.343-4.352,20.917L50.21,496.139
C47.656,497.813,44.782,498.614,41.942,498.614z"/>
<path style="fill:#507C5C;" d="M470.06,498.614c-2.842,0-5.715-0.801-8.268-2.475L258.418,362.824
c-1.468-0.964-3.367-0.964-4.834,0l-64.834,42.5c-6.981,4.574-16.343,2.626-20.917-4.352c-4.574-6.978-2.626-16.343,4.352-20.917
l64.834-42.5c11.531-7.558,26.434-7.558,37.964,0L478.356,470.87c6.978,4.574,8.927,13.939,4.352,20.917
C479.808,496.21,474.983,498.614,470.06,498.614z"/>
<path style="fill:#507C5C;" d="M331.535,121.337H180.466c-8.344,0-15.107-6.763-15.107-15.107s6.763-15.107,15.107-15.107h151.069
c8.344,0,15.107,6.763,15.107,15.107S339.879,121.337,331.535,121.337z"/>
<path style="fill:#507C5C;" d="M355.708,200.308H156.294c-8.344,0-15.107-6.763-15.107-15.107s6.763-15.107,15.107-15.107h199.414
c8.344,0,15.107,6.763,15.107,15.107S364.052,200.308,355.708,200.308z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

14
task3-quote/public/icons/female.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F28F8F;}
.st1{fill:#FFFFFF;}
</style>
<circle class="st0" cx="256" cy="256" r="256"/>
<path class="st1" d="M375.5,204.8c0-66.1-53.3-119.5-119.5-119.5s-119.5,53.3-119.5,119.5c0,59.7,44.8,108.8,102.4,117.3v36.3h-17.1
c-10.7,0-17.1,6.4-17.1,17.1c0,10.7,6.4,17.1,17.1,17.1h17.1v17.1c0,10.7,6.4,17.1,17.1,17.1c10.7,0,17.1-6.4,17.1-17.1v-17.1h17.1
c10.7,0,17.1-6.4,17.1-17.1c0-10.7-6.4-17.1-17.1-17.1h-17.1v-36.3C330.7,313.6,375.5,264.5,375.5,204.8L375.5,204.8z M256,290.1
c-46.9,0-85.3-38.4-85.3-85.3s38.4-85.3,85.3-85.3s85.3,38.4,85.3,85.3S302.9,290.1,256,290.1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 958 B

33
task3-quote/public/icons/find_pet.svg Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#7A6D79;}
.st1{fill:#EFEDEF;}
.st2{fill:#E19974;}
.st3{fill:#FFCEBF;}
.st4{fill:#5F99D7;}
.st5{fill:#5DE1C4;}
</style>
<g>
<path class="st0" d="M289.4,197.1h32.6v124h-32.6V197.1z"/>
<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"/>
<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"/>
</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"/>
<path class="st4" d="M79.9,431.7l76-63.8l61.1,72.8l-76,63.8L79.9,431.7z"/>
<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"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
task3-quote/public/icons/male.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><switch><g><circle cx="12" cy="12" fill="#03b8ff" r="12"/><path d="m18.9 5.5c-.1-.2-.2-.4-.4-.4-.1-.1-.2-.1-.3-.1h-3.3c-.5 0-.8.4-.8.8 0 .5.4.8.8.8h1.3l-2 2c-2.5-1.9-6.2-1.4-8.1 1.2s-1.4 6.2 1.2 8.1 6.2 1.4 8.1-1.2c1.5-2 1.5-4.9 0-6.9l2-2v1.3c0 .5.4.8.8.8s.8-.3.8-.8v-3.3c0-.1 0-.2-.1-.3zm-5.3 10.6c-1.6 1.6-4.2 1.6-5.8.1-1.6-1.6-1.6-4.2-.1-5.8s4.2-1.6 5.8-.1c0 0 0 0 .1.1 1.6 1.6 1.6 4.1 0 5.7z" fill="#fff"/></g></switch></svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

BIN
task3-quote/public/icons/phone.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

35
task3-quote/public/icons/phone.svg Normal file
View File

@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FDFBE0;}
.st1{fill:#9C8D58;}
</style>
<path class="st0" d="M173.3,188.9l-25.6,25.6c1.2,2.2,2.4,4.6,3.7,6.9c12.2,22,28.8,52,60.4,83.6c31.7,31.7,61.8,48.4,83.7,60.6
c2.3,1.3,3.8,1.8,6,3l22.5-24l2.5-2.5c19-19,49.8-19,68.8,0l50.8,50.8c19.1,19.1,19,50.1-0.3,69.1l-10.2,10
c-8.3,6.5-18,12-28.3,16.1c-9.9,3.7-19.3,6.1-28.7,7.2c-75.5,9.1-144.5-25.4-238.1-118.9C11.3,247,21,142.7,21.5,138.2
c1.2-9.8,3.5-19.2,7.2-28.7c4-10.2,9.6-20,16.1-28.3l10-10.2c19-19.3,50-19.4,69.1-0.3l49.4,49.4
C192.3,139.1,192.3,169.9,173.3,188.9z"/>
<g>
<path class="st1" d="M355.6,512c-70.7,0-138.2-37.3-225.8-124.8c-55.6-55.6-93.3-113.5-112-172.1C3.2,169.4,6,139.7,6.3,136.5
c1.3-11.2,4-21.8,8.1-32.5C19,92.4,25.3,81.3,32.8,71.7c0.3-0.4,0.7-0.9,1.1-1.3l10-10.2C56,48,72.2,41.2,89.5,41.2
c17.1,0,33.1,6.7,45.2,18.7l49.4,49.4c24.9,24.9,24.9,65.5,0,90.4l-17.5,17.5c11.6,20.8,27.4,48.4,56.1,77
c28.2,28.1,55.1,44,75.7,55.5l14.6-15.5c0.1-0.1,0.2-0.2,0.3-0.3l2.5-2.5c12.1-12.1,28.1-18.7,45.2-18.7s33.1,6.6,45.2,18.7
l50.8,50.8c12.1,12.1,18.8,28.3,18.7,45.5c-0.1,17.2-6.8,33.3-19.1,45.3l-10.1,10c-0.4,0.4-0.8,0.8-1.3,1.1
c-9.5,7.4-20.6,13.7-32.2,18.3c-0.1,0-0.1,0-0.2,0.1c-11.2,4.2-21.8,6.9-32.4,8.1C372.1,511.5,363.8,512,355.6,512
C355.6,512,355.6,512,355.6,512z M56.3,91.2c-5.5,7.1-10.1,15.3-13.4,23.8c-3.2,8.3-5.2,16.4-6.3,25c0,0.2-2.6,25.5,10.2,65.8
c11.8,37,39.6,94.8,104.5,159.8c81.3,81.2,142.3,115.9,204.2,115.9c0,0,0,0,0,0c7,0,14.1-0.4,21.3-1.3c0.1,0,0.1,0,0.2,0
c8-0.9,16.1-2.9,24.9-6.2c8.5-3.3,16.7-8,23.7-13.3l9.5-9.4c6.4-6.3,9.9-14.7,10-23.7c0-9-3.4-17.4-9.8-23.8L384.6,353
c-6.3-6.3-14.7-9.8-23.6-9.8s-17.3,3.5-23.6,9.8l-2.3,2.3l-22.4,23.8c-4.8,5.1-12.4,6.3-18.5,2.9c-0.7-0.4-1.3-0.7-1.9-1
c-1.1-0.5-2.4-1.2-4.1-2.1c-22.7-12.6-53.8-29.8-87-63.1c-33-33-50.2-64-62.8-86.7l-0.2-0.3c-0.8-1.5-1.6-3-2.4-4.5
c-0.5-0.9-0.9-1.7-1.4-2.6c-3.2-5.9-2.2-13.3,2.6-18.1l25.6-25.6c13-13,13-34.2,0-47.3l-49.4-49.4c-6.3-6.3-14.7-9.8-23.6-9.8
c-9,0-17.5,3.5-23.8,10L56.3,91.2z"/>
<path class="st1" d="M488,244.6c-0.9,0-1.8-0.1-2.7-0.2c-8.3-1.5-13.8-9.4-12.3-17.7c9.7-53.8-7.5-108.9-46-147.4
s-93.7-55.8-147.4-46c-8.3,1.5-16.2-4-17.7-12.3c-1.5-8.3,4-16.2,12.3-17.7C337.6-8.3,402.8,12,448.5,57.7
c45.6,45.6,66,110.8,54.5,174.4C501.6,239.5,495.2,244.6,488,244.6z"/>
<path class="st1" d="M394.9,244.6c-1.8,0-3.6-0.3-5.4-1c-7.9-3-11.9-11.8-8.9-19.7c10.6-28.1,3.8-59.9-17.4-81.1s-53-28-81.1-17.4
c-7.9,3-16.7-1-19.7-8.9c-3-7.9,1-16.7,8.9-19.7c39.3-14.9,83.8-5.3,113.4,24.4c29.7,29.7,39.2,74.2,24.4,113.4
C406.8,240.9,401,244.6,394.9,244.6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

32
task3-quote/public/icons/search_icon.svg Normal file
View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3DC6FF;}
.st1{fill:#8BDDFF;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#F3EEE9;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#DB8A53;}
.st4{fill:#DB8A53;}
</style>
<g>
<path class="st0" d="M190.7,375.9v-7.4c0-16.5,6.7-32.6,18.3-44.3l24.3-24.3l-21.2-21.2L187.8,303c-11.6,11.6-27.8,18.3-44.3,18.3
h-7.4c-33.6,0-54,20.3-54.6,20.9l-64.9,67.2C-6.8,433.6-4.7,471.3,18,494c22.7,22.7,60.5,24.7,84.5,1.4l67.2-64.9
C170.4,429.9,190.7,409.4,190.7,375.9z"/>
<path class="st1" d="M336.3,351.3c-96.9,0-175.7-78.8-175.7-175.7C160.7,78.8,239.5,0,336.3,0S512,78.8,512,175.7
C512,272.5,433.2,351.3,336.3,351.3z"/>
<g>
<path class="st2" d="M481.8,168.2c-1.4-27.3-10.3-52.6-24.7-73.9C430.9,55.5,386.5,30,336.3,30C256,30,190.7,95.3,190.7,175.7
c0,40.2,16.3,76.6,42.7,103l0,0c23.9,23.9,56.1,39.6,91.8,42.3c3.7,0.3,7.4,0.4,11.2,0.4c80.3,0,145.7-65.3,145.7-145.7
C482,173.2,481.9,170.7,481.8,168.2z"/>
<path class="st3" d="M304.2,96.4c8.3,0,15,6.7,15,15c0,8.3-6.7,15-15,15s-15-6.7-15-15C289.2,103.1,295.9,96.4,304.2,96.4z"/>
<path class="st3" d="M256,136.6c8.3,0,15,6.7,15,15c0,8.3-6.7,15-15,15s-15-6.7-15-15C241,143.3,247.7,136.6,256,136.6z"/>
<path class="st3" d="M416.7,136.6c8.3,0,15,6.7,15,15c0,8.3-6.7,15-15,15c-8.3,0-15-6.7-15-15
C401.7,143.3,408.4,136.6,416.7,136.6z"/>
<path class="st3" d="M368.5,96.4c8.3,0,15,6.7,15,15c0,8.3-6.7,15-15,15c-8.3,0-15-6.7-15-15C353.5,103.1,360.2,96.4,368.5,96.4z"
/>
</g>
<path class="st4" d="M352.4,254.9h-32.1c-26.4,0-47.1-21.6-47.1-47.1c0-34.9,28.4-63.2,63.2-63.2s63.2,28.4,63.2,63.2
C399.5,233.4,378.8,254.9,352.4,254.9z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

47
task3-quote/public/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon16x16.svg" />
<link rel="icon" href="./favicon32x32.svg" />
<link rel="icon" href="./favicon96x96.svg" />
<link rel="icon" href="./favicon180x180.svg" />
<link rel="icon" href="./favicon192x192.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Jo Jack Home</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

25
task3-quote/public/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
task3-quote/public/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

135
task3-quote/src/AboutUs.js Normal file
View File

@@ -0,0 +1,135 @@
import React from "react";
import NewNavbar from "./NewNavbar";
import Footer from "./components/Footer";
import styles from "./AboutUs.module.css";
import { motion } from "framer-motion";
import NGOLogo from "./components/NGOLogo";
const AboutUs = () => {
return (
<div className="container">
<NewNavbar />
<div className={styles["middle-content"]}>
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
style={{ minHeight: "100vh" }}
>
<div className="title">
<h2 className={styles["title-About-Us"]}>關於我們</h2>
</div>
<div className={styles["about-us-1"]}>
<div className={styles["about-us-photo-wrapper"]}>
<img
className={styles["about-us-photo-1"]}
src="https://images.unsplash.com/photo-1551730459-92db2a308d6a?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="About Us"
/>
</div>
<div className={styles["about-us-para-1"]}>
<div className={styles["para"]}>
<div className={styles["para-title"]}>
歡迎來到祖積家， 這是瀏覽全港待領養寵物資訊的最佳地方！
</div>
<br />
<div className={styles["para-content"]}>
祖積家是一個匯集來多個香港動物協會及組織的待領養寵物資訊的網路平臺，只要瀏覽祖積家就能找到能完美的毛茸茸的寵物伴侶。
我們是一群熱愛動物的人，我們希望能幫助流浪動物找到一個溫暖的家。我們的網站提供了各種寵物的資訊，包括品種、性格、健康狀況等，讓你可以根據自己的喜好和條件選擇最適合你的寵物。我們也提供了基本領養流程和注意事項，給予你的新朋友最好的照顧。
</div>
</div>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
style={{ minHeight: "100vh" }}
>
<div className={styles["about-us-2"]}>
<div className={styles["about-us-para-2"]}>
<div className={styles["para"]}>
<div className={styles["para-title"]}>
我們相信每一隻動物都有自己的個性和故事，都值得被愛和尊重。
</div>
<br />
<div className={styles["para-content"]}>
除了宣傳不同機構的領養/助養活動，我們亦會不定時舉辦線下的領養活動，讓寵物和領養者可以面對面地互動。我們希望透過我們的平台，能夠減少流浪動物的數量，並且創造更多幸福的家庭。如果你也想成為我們的一份子，歡迎你加入我們的領養大家庭！
</div>
</div>
</div>
<div className={styles["about-us-photo-wrapper"]}>
<img
className={styles["about-us-photo-2"]}
src="https://images.unsplash.com/photo-1573865526739-10659fec78a5?q=80&w=1915&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="About Us"
/>
</div>
</div>
</motion.div>
</div>
<div className={styles["divider"]}>
<img
className={styles["divider-image"]}
src="./Imgs/pawsdivider.svg"
alt="Divider"
/>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className={styles["logocontainer"]}
>
<NGOLogo />
</motion.div>
<motion.div
className={styles["contactUs-wrapper"]}
initial={{ opacity: 0, scale: 0.5 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
>
<div className={styles["contactUs-info-bg"]}>
<div className={styles["contact-Title"]}>聯絡我們</div>
<div className={styles["contact-container"]}>
<img
className={styles["contact-Image"]}
src="./Imgs/cat-and-dog.svg"
alt="Contact Us"
/>
<div className={styles["contact-Us"]}>
<span className={styles["contact-Info"]}>
<span className={styles["contact-Details"]}>
<img
src="./icons/phone.png"
alt="phone"
className={styles["contactUsIcon"]}
/>
電話：3500 7164
</span>
</span>
<p className={styles["contact-Info"]}>
<span className={styles["contact-Details"]}>
<img
src="./icons/email.png"
alt="email"
className={styles["contactUsIcon"]}
/>
電郵： jojac.home.official@gmail.com
</span>
</p>
</div>
</div>
</div>
</motion.div>
<Footer />
</div>
);
};
export default AboutUs;

181
task3-quote/src/AboutUs.module.css Normal file
View File

@@ -0,0 +1,181 @@
.title-About-Us {
text-align: center;
margin-top: 50px;
margin-bottom: 70px;
color: rgb(70, 30, 10);
}
.about-us {
text-align: center;
}
.about-us-photo-1 {
width: 300px;
height: 500px;
}
.about-us-1 {
display: flex;
margin-bottom: 30px;
justify-content: center;
}
.about-us-2 {
display: flex;
justify-content: center;
}
.about-us-photo-2 {
width: 350px;
height: 500px;
}
.about-us-para-1 {
display: flex;
align-items: center;
}
.about-us-para-2 {
display: flex;
align-items: center;
}
.para {
display: flex;
flex-direction: column;
}
.para-title {
color: #a94a52;
font-weight: 800;
}
.para-content {
color: #6e6e6e;
max-width: 500px;
}
.contactUs-wrapper {
/* display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: antiquewhite;
margin: 10px 0 0 0; */
display: flex;
/* flex-direction: column; */
align-items: center;
align-self: center;
justify-self: center;
justify-content: center;
background-image: url("../public/StarPetImgs/star-bg.png");
object-fit: cover;
background-size: 100%;
/* position: relative; */
margin: 30px 0 0 0;
padding: 30px;
}
.contactUs-info-bg {
background-color: rgba(255, 248, 239, 0.5);
padding: 30px;
border-radius: 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.contact-Title {
font-size: 1.5rem;
font-weight: 600;
line-height: 2.4rem;
padding: 10px 0;
color: rgb(70, 30, 10);
flex: 1;
}
.contact-container {
display: flex;
flex-wrap: wrap;
gap: 60px;
justify-content: center;
align-items: center;
}
.contactUsIcon {
width: 20px;
padding-right: 10px;
}
.contact-Image {
height: 200px;
}
.contact-Info {
color: #a94a52;
}
.contact-Details {
font-weight: 800;
display: flex;
align-content: center;
}
@media (min-width: 1280px) {
.about-us-1 {
flex-direction: row;
}
.about-us-2 {
flex-direction: row;
}
.about-us-para-1 {
margin-left: 20px;
}
.about-us-para-2 {
margin-right: 20px;
}
}
@media (min-width: 960px) and (max-width: 1279px) {
.about-us-1 {
flex-direction: column;
}
.about-us-2 {
flex-direction: column;
}
.about-us-photo-wrapper {
display: flex;
justify-content: center;
margin: 20px 0 20px 0;
}
.about-us-para-2 {
justify-content: center;
}
.about-us-para-1 {
justify-content: center;
}
.allLogos {
flex-wrap: wrap;
}
}
@media (max-width: 959px) {
.about-us-1 {
flex-direction: column;
}
.about-us-2 {
flex-direction: column;
}
.about-us-photo-wrapper {
display: flex;
justify-content: center;
margin: 20px 0 20px 0;
}
.about-us-para-2 {
justify-content: center;
}
.about-us-para-1 {
justify-content: center;
}
.allLogos {
flex-wrap: wrap;
}
}

318
task3-quote/src/AdoptionInfoPage.js Normal file
View File

@@ -0,0 +1,318 @@
import React from "react";
import styles from "./AdoptionInfoPage.module.css";
import { Button, Box } from "@mui/material";
import NewNavbar from "./NewNavbar.js";
import { IconButton, SvgIcon } from "@mui/material";
import { Link } from "react-router-dom";
import Footer from "./components/Footer.js";
import NGOLogo from "./components/NGOLogo.js";
import { motion } from "framer-motion";
function AdoptionInfoPage() {
return (
<div id={styles["wholecontainer"]}>
<NewNavbar />
<div id={styles["infocontainer"]}>
<div className={styles["bg-wrapper"]}>
<div id={styles["headingcontainer"]}>
<p className={styles["Info-heading"]}>基本領養需知</p>
</div>
<div className={styles["Info-content"]}>
<ul>
<li className={styles["point"]}>
領養前仔細考慮：領養動物是一個長期承諾，請確保您有足夠的時間、資源和能力來照顧動物的生活需求。
</li>
<li className={styles["point"]}>
選擇合適的寵物：根據您的生活方式、住房狀況和家庭成員的需求，選擇適合的寵物品種和性格。
</li>
<li className={styles["point"]}>
準備領養費用:
領養動物通常需要支付已用於動物的醫療保健、疫苗接種、結紮手術、晶片植入等費用。
<br />
具體金額可能因機構、動物種類和需求而有所不同。
</li>
<li className={styles["point"]}>
寵物繁殖控制：如果您領養的是未結紮的寵物，請進行結紮手術，以控制寵物繁殖和負擔。
</li>
<li className={styles["point"]}>
注冊和標識寵物：根據香港法律，您需要為寵物進行注冊和標識，如植入晶片或佩戴識別圈等。
</li>
<li className={styles["point"]}>
提供良好的飲食和醫療照顧：給予寵物均衡的飲食，定期接受獸醫檢查和必要的疫苗接種，並提供必要的醫療照顧。
</li>
<li className={styles["point"]}>
寵物訓練和社交化：提供寵物適當的訓練和社交化，以確保其行為和與人類及其他動物的相處方式良好。
</li>
<li className={styles["point"]}>
耐心和愛心：給予寵物足夠的耐心和愛心，建立牢固的信任關係，並對其提供家庭的溫暖和關懷。
</li>
<li className={styles["point"]}>
提供適當的運動和娛樂：確保寵物有足夠的運動和娛樂，例如遛狗、玩耍和提供適合的玩具等，以維持其身心健康。
</li>
</ul>
</div>
<div className={styles["precautions"]}>
<p className={styles["attention"]}>
以上僅是一些基本的領養需知，具體領養程序和要求會因應不同的領養機構或動物種類而有所不同。建議您在領養前進一步了解相關資訊，並與相關機構聯繫以獲取更詳細的指引。
</p>
</div>
<Box display="flex" justifyContent="center" marginTop={5}>
<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>
睇睇尋家中既動物
</IconButton>
</Link>
</Box>
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className={styles["logocontainer"]}
>
<NGOLogo />
</motion.div>
<div>
<Footer />
</div>
</div>
);
}
export default AdoptionInfoPage;

106
task3-quote/src/AdoptionInfoPage.module.css Normal file
View File

@@ -0,0 +1,106 @@
.bg-wrapper {
justify-self: center;
background-size: 100%;
background-repeat: no-repeat;
background-position-y: 30%;
background-image: url(../public/BeforeadoptImgs/adoptionpagebg.png);
}
.adoptionheading {
text-align: center;
}
.headingcontainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 700;
}
.Info-content {
line-height: 35px;
display: flex;
justify-content: center;
text-align: left;
margin-right: 20px;
}
.awaitinglistbtn {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.adoptionheading {
text-align: center;
}
#custom-button {
background-color: #9ed3f8;
color: #2364aa;
margin-bottom: 40px;
}
#custom-button:hover {
background-color: #efebce;
}
.Info-heading {
font-size: 30px;
display: flex;
justify-content: center;
font-weight: 700;
margin: 0;
padding-top: 80px;
padding-bottom: 30px;
color: #a53f2b;
}
.precautions {
display: flex;
justify-content: center;
color: #4c230a;
}
.attention {
font-size: 12px;
font-weight: 600;
color: #280004;
}
.awaitinglistbtn {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
width: 100%;
}
@media only screen and (max-width: 1020px) {
.precautions {
margin: 15px;
}
.Info-content {
line-height: 25px;
font-size: 15px;
}
}
@media only screen and (max-width: 420px) {
.bg-wrapper {
background-size: 100%;
background-position-x: 100%;
object-fit: fill;
}
.precautions {
margin: 15px;
}
.Info-content {
line-height: 25px;
font-size: 12px;
}
}

15
task3-quote/src/CategoryPage.js Normal file
View File

@@ -0,0 +1,15 @@
import FilterBar from "./components/FilterBar.js";
import NewNavbar from "./NewNavbar.js";
import Footer from "./components/Footer.js";
function CategoryPage() {
return (
<>
<NewNavbar />
<FilterBar />
<Footer />
</>
);
}
export default CategoryPage;

75
task3-quote/src/Drawer_NewNavBar.js Normal file
View File

@@ -0,0 +1,75 @@
import React, { useState } from "react";
import {
Drawer,
IconButton,
List,
ListItemButton,
ListItemIcon,
ListItemText,
} from "@mui/material";
import MenuTwoToneIcon from "@mui/icons-material/MenuTwoTone";
import { Link } from "react-router-dom";
const navButton = [
{ 登記待領動物: "https://forms.gle/HESZBGAgCoJqW2xp9" },
{
報失寵物:
"https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing",
},
];
const pages = [
{ 主頁: "Home" },
{ 關於我們: "About_us" },
{ 待領養動物: "Category_Page" },
{ 領養須知: "Adoption_Info_Page" },
];
const Drawercomp = () => {
const [openDrawer, setopenDrawer] = useState(false);
return (
<React.Fragment>
<Drawer open={openDrawer} onClose={() => setopenDrawer(false)}>
<List sx={{ width: 130, margin: "5px" }}>
{pages.map((page, index) => (
<ListItemButton onClick={() => setopenDrawer(false)} key={index}>
<ListItemIcon>
<Link
style={{ textDecoration: "none" }}
key={Object.values(page)}
to={`/${Object.values(page)}`}
>
<ListItemText sx={{ color: "#A53F2B" }}>
{Object.keys(page)}
</ListItemText>
</Link>
</ListItemIcon>
</ListItemButton>
))}
{navButton.map((navbtn, index) => (
<ListItemButton onClick={() => setopenDrawer(false)} key={index}>
<ListItemIcon>
<a
href={`${Object.values(navbtn)}`}
style={{ textDecoration: "none" }}
>
<ListItemText sx={{ color: "#A53F2B" }}>
{Object.keys(navbtn)}
</ListItemText>
</a>
</ListItemIcon>
</ListItemButton>
))}
</List>
</Drawer>
<IconButton
sx={{ color: "white", marginLeft: "auto" }}
onClick={() => setopenDrawer(!openDrawer)}
>
<MenuTwoToneIcon sx={{ color: "#A53F2B" }} />
</IconButton>
</React.Fragment>
);
};
export default Drawercomp;

1026
task3-quote/src/HKSCDA_animal_info.json Normal file
View File

File diff suppressed because it is too large Load Diff

24
task3-quote/src/Homepage.js Normal file
View File

@@ -0,0 +1,24 @@
import React from "react";
import NewNavbar from "./NewNavbar.js";
import Footer from "./components/Footer.js";
import Shortcut from "./components/Shortcut.js";
import StarPet from "./components/StarPet.js";
import MapButtons from "./components/MapButtons.js";
import AdoptionCalendar from "./components/Calendar.js";
import MapDisplay from "./components/MapDisplay.js";
function Homepage() {
return (
<div>
<NewNavbar />
<StarPet />
<Shortcut />
<AdoptionCalendar />
<MapButtons />
<MapDisplay />
<Footer />
</div>
);
}
export default Homepage;

17
task3-quote/src/LostAndFoundPage.js Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import NewNavbar from "./NewNavbar";
import Footer from "./components/Footer";
import MapDisplay from "./components/MapDisplay";
import MapButtons from "./components/MapButtons";
const LostAndFound = () => {
return (
<div>
<NewNavbar />
<MapButtons />
<MapDisplay />
<Footer />
</div>
);
};
export default LostAndFound;

154
task3-quote/src/NewNavbar.js Normal file
View File

@@ -0,0 +1,154 @@
import React, { useState } from "react";
import {
Stack,
AppBar,
Toolbar,
Typography,
Button,
Tabs,
Tab,
Box,
useMediaQuery,
useTheme,
} from "@mui/material";
import Drawercomp from "./Drawer_NewNavBar.js";
import { Link } from "react-router-dom";
import Logo from "./jojachomelogo.png";
const pages = [
{ 主頁: "Home" },
{ 關於我們: "About_us" },
{ 待領動物: "Category_Page" },
];
const objKeys = pages.map((el) => Object.keys(el));
const objValues = pages.map((el) => Object.values(el));
const PAGES = ["主頁", "關於我們", "待領養動物"];
function Navbar() {
const [value, setValue] = useState();
const theme = useTheme();
const responsive = useMediaQuery(theme.breakpoints.down("md"));
console.log(pages);
return (
<AppBar position="static" sx={{ background: "#F0FFCE" }}>
<Toolbar>
<Link to={{ pathname: `/Home` }} style={{ textDecoration: "none" }}>
<Box
mt={2}
mb={2}
m1={2}
component="img"
sx={{
height: 50,
display: "flex",
justifyContent: "centre",
alignItems: "center",
marginRight: "12px",
}}
alt="JoJacHomeLogo"
src={Logo}
className="JoJacHomeLogo"
/>
</Link>
<Link to={{ pathname: `/Home` }} style={{ textDecoration: "none" }}>
<Typography
variant="h5"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
sx={{
mr: 2,
display: { md: "flex" },
fontWeight: 700,
letterSpacing: ".3rem",
color: "#A53F2B",
textDecoration: "none",
}}
>
祖積家
</Typography>
</Link>
{responsive ? (
<>
<Drawercomp />
</>
) : (
<>
<Tabs sx={{ marginLeft: "auto" }}>
{pages.map((page, index) => (
<Link
style={{ textDecoration: "none" }}
key={index}
to={`/${Object.values(page)}`}
>
<Tab
key={index}
label={Object.keys(page)}
sx={{
color: "#584D3D",
fontWeight: 600,
}}
/>
</Link>
))}
</Tabs>
<Stack direction="row" mt={2} mb={2} ml={2} spacing={3}>
<Link
to={{
pathname: "/Adoption_Info_Page",
}}
rel="noopener noreferrer"
>
<Button
sx={{
marginLeft: "auto",
color: "rgb(70, 30, 10)",
background: "#f9a24bcb",
"&:hover": {
background: "rgb(255, 224, 100)",
},
}}
variant="contained"
>
領養須知
</Button>
</Link>
<Button
sx={{
marginLeft: "20px",
color: "#2364AA",
background: "#9ED3F8",
"&:hover": {
background: "#EFEBCE",
},
}}
variant="contained"
href="https://forms.gle/HESZBGAgCoJqW2xp9"
>
登記待領動物
</Button>
<Button
sx={{
marginLeft: "20px",
color: "#2364AA",
background: "#9ED3F8",
"&:hover": {
background: "#EFEBCE",
},
}}
variant="contained"
href="https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing"
>
報失寵物
</Button>
</Stack>
</>
)}
</Toolbar>
</AppBar>
);
}
export default Navbar;

BIN
task3-quote/src/Outline_jojachome.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

54
task3-quote/src/Profile.module.css Normal file
View File

@@ -0,0 +1,54 @@
.content {
display: flex;
flex-wrap: wrap;
/* flex-direction: row; */
justify-content: space-evenly;
}
.underline {
text-decoration: underline;
}
.App {
/* width: 40vw; */
}
.slider {
border-radius: 15px;
width: 40vw;
/* width: 100%; */
height: 40vh;
object-fit: scale-down;
}
.adoptionButton {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#external-link {
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);
}
#external-link :hover {
background-color: rgb(255, 224, 100);
border: 5px dotted #fff;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.content {
width: 100%;
flex-direction: column;
align-items: center;
}
.App {
max-width: 90%;
}
}

1
task3-quote/src/SocialMediaIcons/FB.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 25.832031 46 A 1.0001 1.0001 0 0 0 26.158203 46 L 31.832031 46 A 1.0001 1.0001 0 0 0 32.158203 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 33 44 L 33 30 L 36.820312 30 L 38.220703 23 L 33 23 L 33 21 C 33 20.442508 33.05305 20.398929 33.240234 20.277344 C 33.427419 20.155758 34.005822 20 35 20 L 38 20 L 38 14.369141 L 37.429688 14.097656 C 37.429688 14.097656 35.132647 13 32 13 C 29.75 13 27.901588 13.896453 26.71875 15.375 C 25.535912 16.853547 25 18.833333 25 21 L 25 23 L 22 23 L 22 30 L 25 30 L 25 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 32 15 C 34.079062 15 35.38736 15.458455 36 15.701172 L 36 18 L 35 18 C 33.849178 18 32.926956 18.0952 32.150391 18.599609 C 31.373826 19.104024 31 20.061492 31 21 L 31 25 L 35.779297 25 L 35.179688 28 L 31 28 L 31 44 L 27 44 L 27 28 L 24 28 L 24 25 L 27 25 L 27 21 C 27 19.166667 27.464088 17.646453 28.28125 16.625 C 29.098412 15.603547 30.25 15 32 15 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
task3-quote/src/SocialMediaIcons/IG.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 16 3 C 8.8324839 3 3 8.8324839 3 16 L 3 34 C 3 41.167516 8.8324839 47 16 47 L 34 47 C 41.167516 47 47 41.167516 47 34 L 47 16 C 47 8.8324839 41.167516 3 34 3 L 16 3 z M 16 5 L 34 5 C 40.086484 5 45 9.9135161 45 16 L 45 34 C 45 40.086484 40.086484 45 34 45 L 16 45 C 9.9135161 45 5 40.086484 5 34 L 5 16 C 5 9.9135161 9.9135161 5 16 5 z M 37 11 A 2 2 0 0 0 35 13 A 2 2 0 0 0 37 15 A 2 2 0 0 0 39 13 A 2 2 0 0 0 37 11 z M 25 14 C 18.936712 14 14 18.936712 14 25 C 14 31.063288 18.936712 36 25 36 C 31.063288 36 36 31.063288 36 25 C 36 18.936712 31.063288 14 25 14 z M 25 16 C 29.982407 16 34 20.017593 34 25 C 34 29.982407 29.982407 34 25 34 C 20.017593 34 16 29.982407 16 25 C 16 20.017593 20.017593 16 25 16 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 817 B

1
task3-quote/src/SocialMediaIcons/X.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 11 4 C 7.1456661 4 4 7.1456661 4 11 L 4 39 C 4 42.854334 7.1456661 46 11 46 L 39 46 C 42.854334 46 46 42.854334 46 39 L 46 11 C 46 7.1456661 42.854334 4 39 4 L 11 4 z M 11 6 L 39 6 C 41.773666 6 44 8.2263339 44 11 L 44 39 C 44 41.773666 41.773666 44 39 44 L 11 44 C 8.2263339 44 6 41.773666 6 39 L 6 11 C 6 8.2263339 8.2263339 6 11 6 z M 13.085938 13 L 22.308594 26.103516 L 13 37 L 15.5 37 L 23.4375 27.707031 L 29.976562 37 L 37.914062 37 L 27.789062 22.613281 L 36 13 L 33.5 13 L 26.660156 21.009766 L 21.023438 13 L 13.085938 13 z M 16.914062 15 L 19.978516 15 L 34.085938 35 L 31.021484 35 L 16.914062 15 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

BIN
task3-quote/src/arrow.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

28
task3-quote/src/catcursor.css Normal file
View File

@@ -0,0 +1,28 @@
.trailElement {
transform: translate(-50%, -50%);
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
border-radius: 10%;
pointer-events: none;
z-index: 1;
}
.trailElement#trail_0 {
background-image: url("../public/cursorimgs/mouse.png");
transition: 0.1s;
width: 50px;
height: 20px;
}
.trailElement#trail_1 {
background-image: url("../public/cursorimgs/cat.png");
transition: 0.4s;
width: 80px;
height: 60px;
}
.trailElement.right {
transform: translate(-50%, -50%) scaleX(-1);
}

87
task3-quote/src/catcursor.js Normal file
View File

@@ -0,0 +1,87 @@
import React, { useEffect, useRef } from "react";
import "./catcursor.css";
function Catcursor() {
const trailElementsRef = useRef([]);
const mouseRef = useRef({ x: 100, y: 100 });
const drag = [0.35, 0.3, 0.25, 0.2];
useEffect(() => {
const trailElements = trailElementsRef.current;
function updateMouseLocations(e) {
mouseRef.current = { x: e.pageX, y: e.pageY };
}
function trailTheElements() {
for (let x = 0; x < trailElements.length; x++) {
trailElements[x] = loop(trailElements[x], x);
}
requestAnimationFrame(trailTheElements);
}
function loop(trailElement, i) {
let x = parseFloat(trailElement.style.left) || 0;
let y = parseFloat(trailElement.style.top) || 0;
let following_x, following_y;
if (trailElements[i - 1] !== undefined) {
following_x = parseFloat(trailElements[i - 1].style.left);
following_y = parseFloat(trailElements[i - 1].style.top);
} else {
following_x = mouseRef.current.x;
following_y = mouseRef.current.y;
}
let x_diff = following_x - x;
let y_diff = following_y - y;
const distance_behind = i === 0 ? 20 : 10;
x_diff = x_diff > 0 ? x_diff - distance_behind : x_diff + distance_behind;
y_diff = y_diff > 0 ? y_diff - distance_behind : y_diff + distance_behind;
const x_move = x_diff * drag[i];
const y_move = y_diff * drag[i];
x += x_move;
y += y_move;
trailElement.style.left = x + "px";
trailElement.style.top = y + "px";
// Add or remove 'right' class based on cursor direction
if (x_move > 0) {
trailElement.classList.add("right");
} else {
trailElement.classList.remove("right");
}
return trailElement;
}
document.addEventListener("mousemove", updateMouseLocations);
trailTheElements();
return () => {
document.removeEventListener("mousemove", updateMouseLocations);
};
}, []);
return (
<>
<div
className="trailElement cursor-trail"
ref={(el) => (trailElementsRef.current[0] = el)}
id="trail_0"
></div>
<div
className="trailElement cursor-trail"
ref={(el) => (trailElementsRef.current[1] = el)}
id="trail_1"
></div>
</>
);
}
export default Catcursor;

Some files were not shown because too many files have changed in this diff Show More