songtianlun
536b97a7da
- Change latest weather art limit from 6 to 20 - Shuffle the collection and display the last 10 items - Update the section title to reflect the shuffling This commit enhances the visibility of the latest weather art by increasing the limit of displayed items. It randomizes the selection of the latest art pieces for a more dynamic user experience, while the UI title is updated to clarify this feature. This change improves user engagement with the content.
68 lines
2.9 KiB
Plaintext
68 lines
2.9 KiB
Plaintext
<div>
|
|
<!-- 首屏展示区 -->
|
|
<section class="h-screen-90 relative overflow-hidden">
|
|
<% if @featured_arts.first&.image&.attached? %>
|
|
<div class="absolute inset-0">
|
|
<%= image_tag @featured_arts.first.image, 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">Shuffle Latest Weather Art</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<% @latest_arts.each do |art| %>
|
|
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
|
|
<figure class="relative aspect-[4/3] overflow-hidden">
|
|
<% if art.image.attached? %>
|
|
<%= image_tag art.image, class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
|
|
<% end %>
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="card-title font-display"><%= art.city.name %></h3>
|
|
<p class="text-base-content/70">
|
|
<%= art.weather_date.strftime("%B %d, %Y") %>
|
|
</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-2xl font-bold"><%= art.temperature %>°C</div>
|
|
<div class="text-sm text-base-content/70"><%= art.description %></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions justify-end mt-4">
|
|
<%= link_to "View Details", city_weather_art_path(art.city, art),
|
|
class: "btn btn-primary btn-outline" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</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> |