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

<div class="min-h-screen">

  <!-- 页面标题 -->
  <div class="bg-gradient-to-r from-primary/10 to-secondary/10 py-12">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl md:text-5xl font-display font-bold text-center mb-4">
        Explore Cities
      </h1>
      <p class="text-xl text-center text-base-content/70 max-w-2xl mx-auto">
        Discover AI-generated weather art from cities around the world
      </p>
    </div>
  </div>

  <!-- 筛选导航 -->
  <div class="container mx-auto px-4 py-8">
    <div class="flex flex-wrap gap-4 items-center justify-center mb-8">
      <%= link_to "All Regions",
                  cities_path,
                  class: "btn btn-outline #{'btn-primary' unless @current_region}" %>

      <% @regions.each do |region| %>
        <%= link_to region.name,
                    cities_path(region: region.slug),
                    class: "btn btn-outline #{'btn-primary' if @current_region == region}" %>
      <% end %>
    </div>

    <% if @current_region %>
      <div class="flex flex-wrap gap-4 items-center justify-center mb-8">
        <%= link_to "All Countries in #{@current_region.name}",
                    cities_path(region: @current_region.slug),
                    class: "btn btn-sm btn-ghost #{'btn-active' unless @current_country}" %>

        <% @current_region.countries.order(:name).each do |country| %>
          <%= link_to country.name,
                      cities_path(region: @current_region.slug, country: country.slug),
                      class: "btn btn-sm btn-ghost #{'btn-active' if @current_country == country}" %>
        <% end %>
      </div>
    <% end %>

    <!-- 当前选择显示 -->
    <div class="text-center mb-8">
      <div class="breadcrumbs text-sm justify-center">
        <ul>
          <li><%= link_to "All Regions", cities_path %></li>
          <% if @current_region %>
            <li><%= @current_region.name %></li>
          <% end %>
          <% if @current_country %>
            <li><%= @current_country.name %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>

  <!-- 城市网格 -->
  <div class="container mx-auto px-4 pb-16">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% @cities.each do |city| %>
        <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group overflow-hidden">
          <% if city.latest_weather_art&.image&.attached? %>
            <figure class="relative aspect-[16/9]">
              <%= image_tag city.latest_weather_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"></div>
              <div class="absolute bottom-0 left-0 right-0 p-6">
                <h3 class="text-2xl font-display text-white mb-1">
                  <%= city.name %>
                </h3>
                <p class="text-white/80 text-sm">
                  <%= city.country.name %>, <%= city.region.name %>
                </p>
              </div>
            </figure>
          <% else %>
            <div class="card-body">
              <h3 class="card-title font-display"><%= city.name %></h3>
              <p class="text-base-content/70">
                <%= city.country.name %>, <%= city.region.name %>
              </p>
              <div class="flex gap-2 text-sm text-base-content/60">
                <span>Lat: <%= city.latitude %></span>
                <span>Long: <%= city.longitude %></span>
              </div>
            </div>
          <% end %>

          <div class="card-body <%= 'pt-0' if city.latest_weather_art&.image&.attached? %>">
            <div class="flex gap-4 text-sm text-base-content/70">
              <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <%= city.timezone %>
              </div>
              <% if city.latest_weather_art %>
                <div class="flex items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
                </div>
              <% end %>
            </div>

            <div class="card-actions justify-end mt-4">
              <%= link_to "View Details", city_path(city),
                          class: "btn btn-primary btn-sm" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>