This commit is contained in:
2025-05-22 22:56:46 +02:00
parent 72b2e03529
commit b3a43acd4d
5 changed files with 93 additions and 18 deletions

View File

@@ -7,6 +7,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/planty.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/tooltip.css') }}">
</head>
<body class="min-h-screen bg-gradient-to-br from-[#e6ebe0] via-[#b7c7a3] to-[#6b8f71] bg-fixed">
<nav class="bg-[#f5f7f2]/95 shadow-lg backdrop-blur-md" id="main-navbar">

View File

@@ -105,61 +105,68 @@
<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="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 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="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 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="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 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="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 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="inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
<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="inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
<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="inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
<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>

View File

@@ -16,45 +16,52 @@
<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="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 bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#b7c7a3] transition-colors duration-200">
{% 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="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 bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#b7c7a3] transition-colors duration-200">
{% 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="inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] text-xs font-semibold">
<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">
{% 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="inline-flex items-center px-2 py-0.5 rounded bg-[#fff4e6] text-[#3e5637] text-xs font-semibold">
<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">
{% 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="inline-flex items-center px-2 py-0.5 rounded bg-[#e6f7f5] text-[#3e5637] text-xs font-semibold">
<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">
{% 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="inline-flex items-center px-2 py-0.5 rounded bg-[#f3e6ff] text-[#3e5637] text-xs font-semibold">
<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">
{% 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="inline-flex items-center px-2 py-0.5 rounded bg-[#f7fae6] text-[#3e5637] text-xs font-semibold">
<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">
{% 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>
</span>
{% endif %}
</div>