today_ai_weather/app/views/weather_arts/show.html.erb

<% content_for :head do %>
  <script type="application/ld+json">
    <%= weather_art_schema(@weather_art) %>
  </script>
<% end %>

<div class="min-h-screen bg-base-100">
  <div class="container mx-auto px-4 md:px-6 pt-8 pb-16">
    <!-- 返回按钮 -->
    <%= link_to city_path(@weather_art.city),
                class: "btn btn-ghost btn-md gap-2 bg-base-200 hover:bg-base-300 transition-all duration-300 mb-4" do %>
      <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="M15 19l-7-7 7-7" />
      </svg>
      Back to <%= @weather_art.city.name %>
    <% end %>

    <!-- 标题区域 -->
    <div class="max-w-6xl mx-auto mb-8">
      <h1 class="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
        <%= @weather_art.city.full_name %> Weather Art
      </h1>

      <div class="flex flex-wrap gap-4 mb-6">
        <div class="badge badge-lg badge-primary">
          <%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
        </div>
        <div class="badge badge-lg badge-secondary">
          <%= @weather_art&.city&.state&.name %>
        </div>
        <div class="badge badge-lg badge-neutral">
          <%= @weather_art.formatted_time(:date) %>
        </div>
        <div class="badge badge-lg badge-neutral">
          <%= @weather_art.formatted_time(:time, true) %>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto">
      <!-- 艺术图像区域 - 移动端全宽显示 -->
      <% if @weather_art.image.attached? %>
        <div class="md:rounded-xl overflow-hidden mb-8 -mx-4 md:mx-0"> <!-- 负margin实现移动端全宽 -->
          <div class="gallery" data-controller="photo-swipe-lightbox">
            <div data-photo-swipe-lightbox-target="gallery">
              <% watermarked = @weather_art.webp_image.processed %>
              <%= link_to rails_blob_path(watermarked),
                          data: {
                            pswp_src: rails_blob_url(watermarked),
                            pswp_caption: 'Weather Art',
                            pswp_width: 1792,
                            pswp_height: 1024
                          } do %>
                <%= image_tag @weather_art.preview_image(:big).processed,
                              class: "w-full h-auto object-cover transition-transform hover:scale-105 duration-300 ease-in-out" %>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>

      <!-- 天气信息卡片 -->
      <div class="grid md:grid-cols-2 gap-6 mb-8">
        <div class="card bg-base-100 shadow-lg">
          <div class="card-body">
            <h2 class="text-2xl font-semibold mb-4 flex items-center gap-2">
              <%= weather_description_icon(@weather_art.description) %>
              <%= @weather_art.description %>
            </h2>
            <div class="divider"></div>
            <div class="grid grid-cols-2 gap-4">
              <%= render 'weather_stats', weather_art: @weather_art %>
            </div>
          </div>
        </div>

        <!-- AI Prompt 卡片 -->
        <div class="card bg-primary/10 shadow-lg">
          <div class="card-body">
            <div class="flex items-center gap-3 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              <h3 class="font-display font-bold text-lg">AI Prompt</h3>
            </div>
            <p class="text-base-content/80 leading-relaxed">
              <%= @weather_art.prompt %>
            </p>
          </div>
        </div>
      </div>

      <!-- 地图区域 -->
      <div class="card bg-base-100 shadow-lg mb-8">
        <%= render 'shared/map', city: @weather_art.city %>
      </div>

      <!-- 广告区域 -->
      <div class="card bg-base-100 shadow-lg mb-8">
        <%= render 'shared/auto_ad' %>
      </div>

      <!-- 社交分享 -->
      <%
        share_title = [
          "🎨 Amazing AI Weather Art: #{@weather_art.city.full_name}",
          "#{@weather_art.description} at #{@weather_art.temperature}°C",
          "#{@weather_art.formatted_time(:all, true)}"
        ].join("\n")

        share_description = [
          "Discover this stunning AI-generated weather art!",
          "#{@weather_art.description} in #{@weather_art.city.full_name}.",
          "Created at #{@weather_art.formatted_time(:time, true)}",
          "Visit TodayAIWeather to see more amazing weather art."
        ].join(" ")
      %>
      <%= render "shared/share_social",
                 title: share_title,
                 description: share_description,
                 tags: "AIWeather,Art,AIart,Weather,#{@weather_art.city&.name},#{@weather_art&.city&.country&.name}",
                 image: url_for(@weather_art.webp_image.processed)
      %>
    </div>
  </div>
</div>