diff --git a/frontend/coverage/PlantMatchPage.css.html b/frontend/coverage/PlantMatchPage.css.html new file mode 100644 index 0000000..c8b237e --- /dev/null +++ b/frontend/coverage/PlantMatchPage.css.html @@ -0,0 +1,571 @@ + + + + +
++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | .plant-match-page {
+ margin-left: var(--sidebar-width);
+ width: calc(100% - var(--sidebar-width));
+ min-height: 100vh;
+ margin-left: 16rem;
+ width: calc(100% - 16rem);
+ padding: 40px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 30px;
+}
+
+.intro {
+ text-align: center;
+
+ max-width: 850px;
+ text-align: center;
+ margin: 0 auto;
+}
+
+.intro h2 {
+ margin: 0 0 45px;
+ color: var(--text-dark);
+ font-size: 32px;
+ font-weight: 400;
+}
+
+.intro h3 {
+ font-size: 24px;
+ margin: 0 0 10px;
+ color: var(--dark-green);
+ font-weight: 500;
+}
+
+.intro p {
+ max-width: 700px;
+ margin: 0;
+ color: var(--text-dark);
+ font-size: 18px;
+ line-height: 1.6;
+}
+
+.plant-match {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 50px;
+ gap: 20px;
+}
+
+.plant-card-placeholder {
+ width: 320px;
+ height: 450px;
+ background-color: var(--light-background);
+ border: 1px solid var(--border-soft);
+ border-radius: 5%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.swipe-button {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ border: none;
+ background-color: var(--light-background);
+ font-size: 50px;
+ cursor: pointer;
+
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+
+ transition: transform 0.5s ease;
+
+ color: var(--text-dark);
+}
+.swipe-button:hover {
+ transform: scale(1.1);
+}
+
+.dislike-button {
+ background-color: var(--dark-pink);
+ color: var(--text-light);
+ padding-bottom: 5px;
+}
+
+.like-button {
+ background-color: var(--accent-green);
+ color: var(--text-light);
+}
+
+.preferences-button {
+ padding: 10px 24px;
+ border: 1px solid var(--border-soft);
+ border-radius: 20px;
+ background-color: var(--light-background);
+ color: var(--text-dark);
+ font-size: 16px;
+ cursor: pointer;
+
+ transition:
+ background-color 0.5s ease,
+ transform 0.5s ease;
+}
+
+.preferences-button:hover {
+ background-color: var(--light-pink);
+ border-color: var(--border-pink);
+ transform: scale(1.1);
+}
+
+@media (max-width: 767px) {
+ .plant-match-page {
+ margin-left: 0;
+ width: 100%;
+ padding: 30px 20px;
+ }
+
+ .intro {
+ max-width: 100%;
+ }
+
+ .intro h2 {
+ font-size: 28px;
+ margin-bottom: 30px;
+ }
+
+ .intro h3 {
+ font-size: 21px;
+ }
+
+ intro p {
+ font-size: 16px;
+ }
+
+ .preferences-button {
+ margin-top: 20px;
+ }
+
+ .plant-match {
+ margin-top: 35px;
+ gap: 12px;
+ }
+
+ .plant-card-placeholder {
+ width: 240px;
+ height: 350px;
+ }
+
+ .swipe-button {
+ width: 90px;
+ height: 90px;
+ font-size: 70px;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 | + + + + +8x + +8x + + + + + + + + + + +8x + +8x + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + +1x + + + + + + + + + + | import { useState } from "react";
+import "./PlantMatchPage.css";
+import { useTranslation } from "react-i18next";
+
+function PlantMatchPage() {
+ const { t } = useTranslation();
+ //dummy plants
+ const plants = [
+ {
+ name: "Hydrangea",
+ image: "/images/hydrangea.jpg",
+ },
+ {
+ name: "Orchid",
+ image: "/images/orchid.jpg",
+ },
+ ];
+
+ const [currentPlant, setCurrentPlant] = useState(0);
+
+ return (
+ <main className="plant-match-page">
+ <section className="intro">
+ <h2>{t("plantMatchPage.title")}</h2>
+
+ <h3>{t("plantMatchPage.howToMatch")} </h3>
+ <br />
+
+ <p>{t("plantMatchPage.instruction1")} </p>
+ <br />
+
+ <p>{t("plantMatchPage.instruction2")} </p>
+ </section>
+
+ <button className="preferences-button">
+ {t("plantMatchPage.preferences")}
+ </button>
+
+ <section className="plant-match">
+ <button
+ className="swipe-button dislike-button"
+ onClick={() => setCurrentPlant(currentPlant + 1)}
+ >
+ ✖
+ </button>
+ <div className="plant-card-placeholder">
+ {plants[currentPlant].name}
+ </div>
+ <button
+ className="swipe-button like-button"
+ onClick={() => setCurrentPlant(currentPlant + 1)}
+ >
+ ✿
+ </button>
+ </section>
+ </main>
+ );
+}
+
+export default PlantMatchPage;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| PlantMatchPage.css | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| PlantMatchPage.tsx | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +3/3 | +100% | +6/6 | +