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

lol

Browse Source
This commit is contained in:
Kobe
2025-05-22 22:56:46 +02:00
parent 72b2e03529
commit b3a43acd4d
5 changed files with 93 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app.py
View File

@@ -183,8 +183,8 @@ def home():
query = query.filter(Plant.growth_rate_id == growth_rate_id)
plants = query.order_by(Plant.date_added.desc()).all()
climates_dict = {c.id: {'name': c.name, 'icon': c.icon} for c in Climate.query.all()}
environments_dict = {e.id: {'name': e.name, 'icon': e.icon} for e in Environment.query.all()}
climates_dict = {c.id: {'name': c.name, 'icon': c.icon, 'description': c.description} for c in Climate.query.all()}
environments_dict = {e.id: {'name': e.name, 'icon': e.icon, 'description': e.description} for e in Environment.query.all()}
products_dict = {p.id: p.name for p in Product.query.all()}
display_plants = []
@@ -195,29 +195,36 @@ def home():
pid = pid.strip()
if pid.isdigit() and int(pid) in products_dict:
product_names.append(products_dict[int(pid)])
climate_info = climates_dict.get(plant.climate_id, {'name': '', 'icon': None})
environment_info = environments_dict.get(plant.environment_id, {'name': '', 'icon': None})
climate_info = climates_dict.get(plant.climate_id, {'name': '', 'icon': None, 'description': ''})
environment_info = environments_dict.get(plant.environment_id, {'name': '', 'icon': None, 'description': ''})
display_plants.append({
'id': plant.id,
'name': plant.name,
'picture': plant.picture,
'climate': climate_info['name'],
'climate_icon': climate_info['icon'],
'climate_description': climate_info['description'],
'environment': environment_info['name'],
'environment_icon': environment_info['icon'],
'environment_description': environment_info['description'],
'products': ', '.join(product_names),
'description': plant.description,
'date_added': plant.date_added,
'light': plant.light.name if plant.light else '',
'light_icon': plant.light.icon if plant.light and plant.light.icon else None,
'light_description': plant.light.description if plant.light else '',
'toxicity': plant.toxicity.name if plant.toxicity else '',
'toxicity_icon': plant.toxicity.icon if plant.toxicity and plant.toxicity.icon else None,
'toxicity_description': plant.toxicity.description if plant.toxicity else '',
'size': plant.size.name if plant.size else '',
'size_icon': plant.size.icon if plant.size and plant.size.icon else None,
'size_description': plant.size.description if plant.size else '',
'care_difficulty': plant.care_difficulty.name if plant.care_difficulty else '',
'care_difficulty_icon': plant.care_difficulty.icon if plant.care_difficulty and plant.care_difficulty.icon else None,
'care_difficulty_description': plant.care_difficulty.description if plant.care_difficulty else '',
'growth_rate': plant.growth_rate.name if plant.growth_rate else '',
'growth_rate_icon': plant.growth_rate.icon if plant.growth_rate and plant.growth_rate.icon else None,
'growth_rate_description': plant.growth_rate.description if plant.growth_rate else '',
})
return render_template('home.html',

53
static/css/tooltip.css Normal file
View File

@@ -0,0 +1,53 @@
.tag-tooltip {
position: relative;
display: inline-flex;
align-items: center;
}
.tag-tooltip .tooltip-text {
visibility: hidden;
width: 200px;
background-color: #4e6b50;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
font-size: 0.875rem;
line-height: 1.4;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.tag-tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #4e6b50 transparent transparent transparent;
}
.tag-tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Adjust tooltip position for tags at the top of the screen */
.tag-tooltip.top .tooltip-text {
bottom: auto;
top: 125%;
}
.tag-tooltip.top .tooltip-text::after {
top: auto;
bottom: 100%;
border-color: transparent transparent #4e6b50 transparent;
}

1
templates/base.html
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">

21
templates/home.html
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>

21
templates/post.html
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>