80 lines
3.3 KiB
Plaintext
80 lines
3.3 KiB
Plaintext
|
<!-- app/views/arts/index.html.erb -->
|
||
|
|
<div class="min-h-screen">
|
||
|
|
<!-- 页面标题 -->
|
||
|
|
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 py-16">
|
||
|
|
<div class="container mx-auto px-4">
|
||
|
|
<h1 class="text-4xl md:text-5xl font-display font-bold text-center mb-4">
|
||
|
|
Weather Arts Gallery
|
||
|
|
</h1>
|
||
|
|
<p class="text-xl text-center text-base-content/70 max-w-2xl mx-auto">
|
||
|
|
Explore our collection of AI-generated weather art from cities around the world
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container mx-auto px-4 py-12">
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
|
|
<% @weather_arts.each do |art| %>
|
||
|
|
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group">
|
||
|
|
<!-- 图片 -->
|
||
|
|
<figure class="relative aspect-square overflow-hidden">
|
||
|
|
<% if art.image.attached? %>
|
||
|
|
<%= image_tag art.image,
|
||
|
|
class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
|
||
|
|
<!-- 渐变遮罩 -->
|
||
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
|
|
|
||
|
|
<!-- 悬停时显示的信息 -->
|
||
|
|
<div class="absolute inset-0 p-6 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
|
|
<h3 class="text-white font-display text-xl mb-2">
|
||
|
|
<%= art.city.name %>
|
||
|
|
</h3>
|
||
|
|
<p class="text-white/80 text-sm">
|
||
|
|
<%= art.weather_date.strftime("%B %d, %Y") %>
|
||
|
|
</p>
|
||
|
|
<p class="text-white/90 mt-2">
|
||
|
|
<%= art.temperature %>°C, <%= art.description %>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<!-- 快速信息 -->
|
||
|
|
<div class="card-body p-4">
|
||
|
|
<div class="flex justify-between items-start">
|
||
|
|
<div>
|
||
|
|
<h3 class="font-display font-bold">
|
||
|
|
<%= art.city.name %>
|
||
|
|
</h3>
|
||
|
|
<p class="text-sm text-base-content/70">
|
||
|
|
<%= art.city.country.name %>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<div class="text-lg font-bold"><%= art.temperature %>°C</div>
|
||
|
|
<div class="text-sm text-base-content/70">
|
||
|
|
<%= art.weather_date.strftime("%b %d") %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<%= link_to city_weather_art_path(art.city, art),
|
||
|
|
class: "btn btn-ghost btn-sm w-full mt-3" do %>
|
||
|
|
View Details
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="flex justify-center mt-12">
|
||
|
|
<div class="btn-group">
|
||
|
|
<%= link_to_prev_page @weather_arts, 'Previous',
|
||
|
|
class: "btn btn-outline #{'btn-disabled' unless @weather_arts.prev_page}" %>
|
||
|
|
<%= link_to_next_page @weather_arts, 'Next',
|
||
|
|
class: "btn btn-outline #{'btn-disabled' unless @weather_arts.next_page}" %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|