songtianlun
d570f43f95
- Import Playfair Display and Raleway fonts for better typography - Add a method to `City` model for fetching the latest weather art - Revamp city index and show pages for improved layout and usability - Update styles in the layout and main pages to enhance user experience These changes promote visual consistency and enhance user interaction within the platform, providing a more engaging experience.
60 lines
2.5 KiB
Plaintext
60 lines
2.5 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">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> |