From 5bcd006503d59714e10e107036bc1ad2bc4ae89e Mon Sep 17 00:00:00 2001
From: Kobe <kobeamerijckx@outlook.com>
Date: Thu, 22 May 2025 23:11:44 +0200
Subject: [PATCH] gsf

---
 static/css/tooltip.css |  88 +++++++++++++++++++++++++++++++
 templates/home.html    | 114 ++++++++++++++++++-----------------------
 templates/post.html    |  14 ++---
 3 files changed, 144 insertions(+), 72 deletions(-)

diff --git a/static/css/tooltip.css b/static/css/tooltip.css
index f8624da..785845a 100644
--- a/static/css/tooltip.css
+++ b/static/css/tooltip.css
@@ -2,6 +2,42 @@
     position: relative;
     display: inline-flex;
     align-items: center;
+    transition: background-color 0.2s ease;
+}
+
+/* Climate tag hover */
+.tag-tooltip[data-type="climate"]:hover {
+    background-color: #b7d9b9 !important;
+}
+
+/* Environment tag hover */
+.tag-tooltip[data-type="environment"]:hover {
+    background-color: #c7e0db !important;
+}
+
+/* Light tag hover */
+.tag-tooltip[data-type="light"]:hover {
+    background-color: #d0d7cc !important;
+}
+
+/* Toxicity tag hover */
+.tag-tooltip[data-type="toxicity"]:hover {
+    background-color: #ffe4cc !important;
+}
+
+/* Size tag hover */
+.tag-tooltip[data-type="size"]:hover {
+    background-color: #d0e7e4 !important;
+}
+
+/* Care difficulty tag hover */
+.tag-tooltip[data-type="care-difficulty"]:hover {
+    background-color: #e6d0ff !important;
+}
+
+/* Growth rate tag hover */
+.tag-tooltip[data-type="growth-rate"]:hover {
+    background-color: #e6f0cc !important;
 }
 
 .tag-tooltip .tooltip-text {
@@ -50,4 +86,56 @@
     top: auto;
     bottom: 100%;
     border-color: transparent transparent #4e6b50 transparent;
+}
+
+/* Tooltip background for each tag type */
+.tag-tooltip[data-type="climate"] .tooltip-text {
+    background-color: #d0e7d2;
+    color: #3e5637;
+}
+.tag-tooltip[data-type="environment"] .tooltip-text {
+    background-color: #e0f0eb;
+    color: #3e5637;
+}
+.tag-tooltip[data-type="light"] .tooltip-text {
+    background-color: #e6ebe0;
+    color: #3e5637;
+}
+.tag-tooltip[data-type="toxicity"] .tooltip-text {
+    background-color: #fff4e6;
+    color: #3e5637;
+}
+.tag-tooltip[data-type="size"] .tooltip-text {
+    background-color: #e6f7f5;
+    color: #3e5637;
+}
+.tag-tooltip[data-type="care-difficulty"] .tooltip-text {
+    background-color: #f3e6ff;
+    color: #3e5637;
+}
+.tag-tooltip[data-type="growth-rate"] .tooltip-text {
+    background-color: #f7fae6;
+    color: #3e5637;
+}
+
+.tag-tooltip[data-type="climate"] .tooltip-text::after {
+    border-color: #d0e7d2 transparent transparent transparent;
+}
+.tag-tooltip[data-type="environment"] .tooltip-text::after {
+    border-color: #e0f0eb transparent transparent transparent;
+}
+.tag-tooltip[data-type="light"] .tooltip-text::after {
+    border-color: #e6ebe0 transparent transparent transparent;
+}
+.tag-tooltip[data-type="toxicity"] .tooltip-text::after {
+    border-color: #fff4e6 transparent transparent transparent;
+}
+.tag-tooltip[data-type="size"] .tooltip-text::after {
+    border-color: #e6f7f5 transparent transparent transparent;
+}
+.tag-tooltip[data-type="care-difficulty"] .tooltip-text::after {
+    border-color: #f3e6ff transparent transparent transparent;
+}
+.tag-tooltip[data-type="growth-rate"] .tooltip-text::after {
+    border-color: #f7fae6 transparent transparent transparent;
 } 
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 72327bc..8136d0f 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -104,71 +104,55 @@
                     <div class="w-full flex flex-col gap-2">
                         <h2 class="text-2xl font-bold mb-1 text-[#4e6b50] group-hover:text-[#3e5637] transition">{{ plant.name }}</h2>
                         <div class="flex flex-wrap gap-2 mb-1">
-                            {% if plant.climate %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
-                                    {% if plant.climate_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.climate_icon) }}" alt="Climate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.climate }}
-                                    <span class="tooltip-text">{{ plant.climate_description }}</span>
-                                </span>
-                            {% endif %}
-                            {% if plant.environment %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
-                                    {% if plant.environment_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.environment_icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.environment }}
-                                    <span class="tooltip-text">{{ plant.environment_description }}</span>
-                                </span>
-                            {% endif %}
-                            {% if plant.light %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
-                                    {% if plant.light_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.light_icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.light }}
-                                    <span class="tooltip-text">{{ plant.light_description }}</span>
-                                </span>
-                            {% endif %}
-                            {% if plant.toxicity %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
-                                    {% if plant.toxicity_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.toxicity_icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.toxicity }}
-                                    <span class="tooltip-text">{{ plant.toxicity_description }}</span>
-                                </span>
-                            {% endif %}
-                        </div>
-                        <div class="flex flex-wrap gap-2 text-xs mb-1">
-                            {% if plant.size %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
-                                    {% if plant.size_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.size_icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.size }}
-                                    <span class="tooltip-text">{{ plant.size_description }}</span>
-                                </span>
-                            {% endif %}
-                            {% if plant.care_difficulty %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
-                                    {% if plant.care_difficulty_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty_icon) }}" alt="Care difficulty icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.care_difficulty }}
-                                    <span class="tooltip-text">{{ plant.care_difficulty_description }}</span>
-                                </span>
-                            {% endif %}
-                            {% if plant.growth_rate %}
-                                <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
-                                    {% if plant.growth_rate_icon %}
-                                        <img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate_icon) }}" alt="Growth rate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
-                                    {% endif %}
-                                    {{ plant.growth_rate }}
-                                    <span class="tooltip-text">{{ plant.growth_rate_description }}</span>
-                                </span>
-                            {% endif %}
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #d0e7d2;" data-type="climate">
+                                {% if plant.climate_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.climate_icon) }}" alt="Climate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.climate if plant.climate else 'None' }}
+                                <span class="tooltip-text">{{ plant.climate_description if plant.climate_description else 'No description' }}</span>
+                            </span>
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #e0f0eb;" data-type="environment">
+                                {% if plant.environment_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.environment_icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.environment if plant.environment else 'None' }}
+                                <span class="tooltip-text">{{ plant.environment_description if plant.environment_description else 'No description' }}</span>
+                            </span>
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #e6ebe0;" data-type="light">
+                                {% if plant.light_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.light_icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.light if plant.light else 'None' }}
+                                <span class="tooltip-text">{{ plant.light_description if plant.light_description else 'No description' }}</span>
+                            </span>
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #fff4e6;" data-type="toxicity">
+                                {% if plant.toxicity_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.toxicity_icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.toxicity if plant.toxicity else 'None' }}
+                                <span class="tooltip-text">{{ plant.toxicity_description if plant.toxicity_description else 'No description' }}</span>
+                            </span>
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #e6f7f5;" data-type="size">
+                                {% if plant.size_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.size_icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.size if plant.size else 'None' }}
+                                <span class="tooltip-text">{{ plant.size_description if plant.size_description else 'No description' }}</span>
+                            </span>
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #f3e6ff;" data-type="care-difficulty">
+                                {% if plant.care_difficulty_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty_icon) }}" alt="Care difficulty icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.care_difficulty if plant.care_difficulty else 'None' }}
+                                <span class="tooltip-text">{{ plant.care_difficulty_description if plant.care_difficulty_description else 'No description' }}</span>
+                            </span>
+                            <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #f7fae6;" data-type="growth-rate">
+                                {% if plant.growth_rate_icon %}
+                                    <img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate_icon) }}" alt="Growth rate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
+                                {% endif %}
+                                {{ plant.growth_rate if plant.growth_rate else 'None' }}
+                                <span class="tooltip-text">{{ plant.growth_rate_description if plant.growth_rate_description else 'No description' }}</span>
+                            </span>
                         </div>
                         <p class="text-[#4e6b50] mt-2 text-sm">{{ plant.description[:120] }}{% if plant.description and plant.description|length > 120 %}...{% endif %}</p>
                         <div class="text-xs text-[#6b8f71] mt-2">Added on <span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></div>
diff --git a/templates/post.html b/templates/post.html
index c0b930b..35a900d 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -16,49 +16,49 @@
       <h1 class="text-4xl font-bold text-[#4e6b50] mb-2">{{ plant.name }}</h1>
       <div class="flex flex-wrap gap-2 mb-2">
         {% if plant.climate %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#b7c7a3] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #d0e7d2;" data-type="climate">
             {% if plant.climate.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.climate.icon) }}" alt="Climate icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.climate.name }}
             <span class="tooltip-text">{{ plant.climate.description }}</span>
           </span>
         {% endif %}
         {% if plant.environment %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#b7c7a3] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #e0f0eb;" data-type="environment">
             {% if plant.environment.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.environment.icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.environment.name }}
             <span class="tooltip-text">{{ plant.environment.description }}</span>
           </span>
         {% endif %}
         {% if plant.light %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#d0e7d2] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #e6ebe0;" data-type="light">
             {% if plant.light.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.light.icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.light.name }}
             <span class="tooltip-text">{{ plant.light.description }}</span>
           </span>
         {% endif %}
         {% if plant.toxicity %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#fff4e6] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#ffe4cc] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #fff4e6;" data-type="toxicity">
             {% if plant.toxicity.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.toxicity.icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.toxicity.name }}
             <span class="tooltip-text">{{ plant.toxicity.description }}</span>
           </span>
         {% endif %}
         {% if plant.size %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6f7f5] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#d0e7e4] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #e6f7f5;" data-type="size">
             {% if plant.size.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.size.icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.size.name }}
             <span class="tooltip-text">{{ plant.size.description }}</span>
           </span>
         {% endif %}
         {% if plant.care_difficulty %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#f3e6ff] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#e6d0ff] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #f3e6ff;" data-type="care-difficulty">
             {% if plant.care_difficulty.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty.icon) }}" alt="Care icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.care_difficulty.name }}
             <span class="tooltip-text">{{ plant.care_difficulty.description }}</span>
           </span>
         {% endif %}
         {% if plant.growth_rate %}
-          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#f7fae6] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#e6f0cc] transition-colors duration-200">
+          <span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #f7fae6;" data-type="growth-rate">
             {% if plant.growth_rate.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate.icon) }}" alt="Growth icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
             {{ plant.growth_rate.name }}
             <span class="tooltip-text">{{ plant.growth_rate.description }}</span>