today_ai_weather/app/views/home/index.html.erb

46 lines
1.8 KiB
Plaintext
Raw Normal View History

<div class="space-y-8">
<!-- 头部标题 -->
<div class="text-center space-y-4">
<h1 class="text-4xl font-bold">AI Weather Art</h1>
<p class="text-xl text-base-content/70">Discover the beauty of weather through AI-generated art</p>
</div>
<!-- 轮播图 -->
<div class="carousel w-full rounded-box">
<% WeatherArt.last(5).each_with_index do |art, index| %>
<div id="slide<%= index %>" class="carousel-item relative w-full">
<% if art.image.attached? %>
<%= image_tag art.image, class: "w-full aspect-video object-cover" %>
<% end %>
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide<%= index == 0 ? 4 : index - 1 %>" class="btn btn-circle"></a>
<a href="#slide<%= index == 4 ? 0 : index + 1 %>" class="btn btn-circle"></a>
</div>
</div>
<% end %>
</div>
<!-- 最新天气艺术 -->
<div class="space-y-4">
<h2 class="text-2xl font-bold">Latest Weather Art</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<% WeatherArt.last(6).each do |art| %>
<div class="card bg-base-200">
<figure>
<% if art.image.attached? %>
<%= image_tag art.image, class: "w-full h-48 object-cover" %>
<% end %>
</figure>
<div class="card-body">
<h3 class="card-title"><%= art.city.name %></h3>
<p><%= art.weather_date.strftime("%Y-%m-%d") %></p>
<p><%= art.description %></p>
<div class="card-actions justify-end">
<%= link_to "View Details", city_weather_art_path(art.city, art), class: "btn btn-primary" %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>