today_ai_weather/app/views/home/index.html.erb
songtianlun f02587da57 feat: improve weather art display and generation
- Display the latest weather art on the cities index page.
- Update the weather art preview image size to be big.
- Improve image display by using webp format.
- Adjust the daily and per-run generation limits.

These changes enhance the user experience by providing more
up-to-date and visually appealing content, while also controlling
the resource usage during image generation.
2025-02-17 00:15:32 +08:00

43 lines
1.9 KiB
Plaintext

<div>
<!-- 首屏展示区 -->
<section class="h-screen-90 relative overflow-hidden">
<% if @latest_arts.first&.image&.attached? %>
<div class="absolute inset-0">
<%= image_tag @latest_arts.first.webp_image.processed, class: "w-full h-full object-cover" %>
<div class="absolute inset-0 bg-gradient-to-r from-base-100/90 to-base-100/50"></div>
</div>
<% end %>
<div class="container mx-auto px-4 h-full flex items-center relative">
<div class="max-w-2xl space-y-6">
<h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
Where Weather Meets<br>Artificial Intelligence
</h1>
<p class="text-xl text-base-content/70 font-sans">
Experience weather through the lens of AI-generated art,
bringing a new perspective to daily meteorological phenomena.
</p>
<%= link_to "Explore Cities", cities_path,
class: "btn btn-primary btn-lg mt-8 font-sans" %>
</div>
</div>
</section>
<!-- 最新天气艺术 -->
<section class="container mx-auto px-4 py-16 space-y-12">
<h2 class="text-3xl font-display font-bold text-center">Latest Weather Art</h2>
<%= render 'home/arts', arts: @latest_arts %>
<h2 class="text-3xl font-display font-bold text-center">Popular Weather Art</h2>
<%= render 'home/arts', arts: @popular_arts %>
<!-- <h2 class="text-3xl font-display font-bold text-center">Random Weather Art</h2>-->
<%#= render 'home/arts', arts: @random_arts %>
</section>
</div>
<div class="text-center mt-12 mb-12">
<%= link_to arts_path, class: "btn btn-primary btn-lg gap-2" do %>
View All Weather Arts
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
<% end %>
</div>