100 lines
6.6 KiB
HTML
100 lines
6.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ plant.name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<article class="max-w-4xl mx-auto bg-white p-8 rounded-2xl shadow-xl mt-8">
|
|
<div class="flex flex-col md:flex-row gap-4 md:gap-6">
|
|
<div class="md:w-1/2 flex-shrink-0 mb-6 md:mb-0">
|
|
{% if plant.picture %}
|
|
<img src="{{ url_for('static', filename='uploads/' ~ plant.picture) }}" alt="{{ plant.name }}" class="w-full h-96 object-cover rounded-xl shadow-md border-2 border-[#e6ebe0]">
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='images/placeholder-plant.svg') }}" alt="No image available" class="w-full h-96 object-cover rounded-xl shadow-md border-2 border-[#e6ebe0] opacity-50">
|
|
{% endif %}
|
|
</div>
|
|
<div class="md:w-1/2 flex flex-col gap-4">
|
|
<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 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 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 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 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 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 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 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>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="prose max-w-none mb-4 text-[#4e6b50]">{{ plant.description|safe }}</div>
|
|
</div>
|
|
</div>
|
|
{% if products %}
|
|
<div class="mb-8 mt-4">
|
|
<span class="font-semibold text-[#4e6b50]">Products:</span>
|
|
<span class="flex flex-wrap gap-2 mt-1">
|
|
{% for product in products %}
|
|
<span class="inline-block bg-[#e6ebe0] text-[#3e5637] px-3 py-1 rounded text-xs font-semibold border border-[#d0e7d2]">{{ product.name }}</span>
|
|
{% endfor %}
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if plant.care_guide %}
|
|
<div class="mt-12">
|
|
<h2 class="text-2xl font-bold text-[#6b8f71] mb-3">Care Guide</h2>
|
|
<div class="prose max-w-none bg-[#f8f9fa] border border-[#e6ebe0] rounded-xl p-6 text-[#3e5637] shadow" style="min-height:80px;">
|
|
{{ plant.care_guide|safe }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="text-xs text-[#6b8f71] mt-8">Added on <span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></div>
|
|
<div class="mt-8 flex flex-wrap gap-4">
|
|
<a href="{{ url_for('home', climate=plant.climate_id, environment=plant.environment_id) }}"
|
|
class="inline-block bg-[#6b8f71] text-white hover:bg-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
|
|
🌱 View Similar Plants
|
|
</a>
|
|
<a href="{{ url_for('home') }}" class="inline-block bg-[#e6ebe0] text-[#3e5637] hover:bg-[#b7c7a3] hover:text-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
|
|
← Back to Home
|
|
</a>
|
|
</div>
|
|
</article>
|
|
{% endblock %} |