Kobe/VerpotJeLot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gsf

Browse Source
This commit is contained in:
Kobe
2025-05-22 23:11:44 +02:00
parent b3a43acd4d
commit 5bcd006503
3 changed files with 144 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
static/css/tooltip.css
View File

@@ -2,6 +2,42 @@
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; 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 { .tag-tooltip .tooltip-text {
@@ -50,4 +86,56 @@
top: auto; top: auto;
bottom: 100%; bottom: 100%;
border-color: transparent transparent #4e6b50 transparent; 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;
} }

114
templates/home.html
View File

@@ -104,71 +104,55 @@
<div class="w-full flex flex-col gap-2"> <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> <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"> <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 text-[#3e5637] text-xs font-semibold" style="background-color: #d0e7d2;" data-type="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 %}
{% 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" />
<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 %}
{% endif %} {{ plant.climate if plant.climate else 'None' }}
{{ plant.climate }} <span class="tooltip-text">{{ plant.climate_description if plant.climate_description else 'No description' }}</span>
<span class="tooltip-text">{{ plant.climate_description }}</span> </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">
{% endif %} {% if plant.environment_icon %}
{% if plant.environment %} <img src="{{ url_for('static', filename='icons/' ~ plant.environment_icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold"> {% endif %}
{% if plant.environment_icon %} {{ plant.environment if plant.environment else 'None' }}
<img src="{{ url_for('static', filename='icons/' ~ plant.environment_icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" /> <span class="tooltip-text">{{ plant.environment_description if plant.environment_description else 'No description' }}</span>
{% endif %} </span>
{{ plant.environment }} <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">
<span class="tooltip-text">{{ plant.environment_description }}</span> {% if plant.light_icon %}
</span> <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 %} {% endif %}
{% if plant.light %} {{ plant.light if plant.light else 'None' }}
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold"> <span class="tooltip-text">{{ plant.light_description if plant.light_description else 'No description' }}</span>
{% if plant.light_icon %} </span>
<img src="{{ url_for('static', filename='icons/' ~ plant.light_icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" /> <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">
{% endif %} {% if plant.toxicity_icon %}
{{ plant.light }} <img src="{{ url_for('static', filename='icons/' ~ plant.toxicity_icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />
<span class="tooltip-text">{{ plant.light_description }}</span> {% endif %}
</span> {{ plant.toxicity if plant.toxicity else 'None' }}
{% endif %} <span class="tooltip-text">{{ plant.toxicity_description if plant.toxicity_description else 'No description' }}</span>
{% if plant.toxicity %} </span>
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold"> <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.toxicity_icon %} {% if plant.size_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" /> <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 %} {% endif %}
{{ plant.toxicity }} {{ plant.size if plant.size else 'None' }}
<span class="tooltip-text">{{ plant.toxicity_description }}</span> <span class="tooltip-text">{{ plant.size_description if plant.size_description else 'No description' }}</span>
</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: #f3e6ff;" data-type="care-difficulty">
</div> {% if plant.care_difficulty_icon %}
<div class="flex flex-wrap gap-2 text-xs mb-1"> <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" />
{% if plant.size %} {% endif %}
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold"> {{ plant.care_difficulty if plant.care_difficulty else 'None' }}
{% if plant.size_icon %} <span class="tooltip-text">{{ plant.care_difficulty_description if plant.care_difficulty_description else 'No description' }}</span>
<img src="{{ url_for('static', filename='icons/' ~ plant.size_icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" /> </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: #f7fae6;" data-type="growth-rate">
{{ plant.size }} {% if plant.growth_rate_icon %}
<span class="tooltip-text">{{ plant.size_description }}</span> <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" />
</span> {% endif %}
{% endif %} {{ plant.growth_rate if plant.growth_rate else 'None' }}
{% if plant.care_difficulty %} <span class="tooltip-text">{{ plant.growth_rate_description if plant.growth_rate_description else 'No description' }}</span>
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold"> </span>
{% 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 %}
</div> </div>
<p class="text-[#4e6b50] mt-2 text-sm">{{ plant.description[:120] }}{% if plant.description and plant.description|length > 120 %}...{% endif %}</p> <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> <div class="text-xs text-[#6b8f71] mt-2">Added on <span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></div>

14
templates/post.html
View File

@@ -16,49 +16,49 @@
<h1 class="text-4xl font-bold text-[#4e6b50] mb-2">{{ plant.name }}</h1> <h1 class="text-4xl font-bold text-[#4e6b50] mb-2">{{ plant.name }}</h1>
<div class="flex flex-wrap gap-2 mb-2"> <div class="flex flex-wrap gap-2 mb-2">
{% if plant.climate %} {% 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 %} {% 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 }} {{ plant.climate.name }}
<span class="tooltip-text">{{ plant.climate.description }}</span> <span class="tooltip-text">{{ plant.climate.description }}</span>
</span> </span>
{% endif %} {% endif %}
{% if plant.environment %} {% 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 %} {% 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 }} {{ plant.environment.name }}
<span class="tooltip-text">{{ plant.environment.description }}</span> <span class="tooltip-text">{{ plant.environment.description }}</span>
</span> </span>
{% endif %} {% endif %}
{% if plant.light %} {% 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 %} {% 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 }} {{ plant.light.name }}
<span class="tooltip-text">{{ plant.light.description }}</span> <span class="tooltip-text">{{ plant.light.description }}</span>
</span> </span>
{% endif %} {% endif %}
{% if plant.toxicity %} {% 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 %} {% 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 }} {{ plant.toxicity.name }}
<span class="tooltip-text">{{ plant.toxicity.description }}</span> <span class="tooltip-text">{{ plant.toxicity.description }}</span>
</span> </span>
{% endif %} {% endif %}
{% if plant.size %} {% 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 %} {% 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 }} {{ plant.size.name }}
<span class="tooltip-text">{{ plant.size.description }}</span> <span class="tooltip-text">{{ plant.size.description }}</span>
</span> </span>
{% endif %} {% endif %}
{% if plant.care_difficulty %} {% 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 %} {% 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 }} {{ plant.care_difficulty.name }}
<span class="tooltip-text">{{ plant.care_difficulty.description }}</span> <span class="tooltip-text">{{ plant.care_difficulty.description }}</span>
</span> </span>
{% endif %} {% endif %}
{% if plant.growth_rate %} {% 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 %} {% 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 }} {{ plant.growth_rate.name }}
<span class="tooltip-text">{{ plant.growth_rate.description }}</span> <span class="tooltip-text">{{ plant.growth_rate.description }}</span>