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="relative min-h-screen bg-white"> <!-- 使用更明快的背景颜色 -->
  <div class="container mx-auto px-4 pt-12 pb-16">
    <div class="max-w-6xl mx-auto space-y-6">
      <!-- 返回导航 -->
      <div class="flex items-center">
        <%= 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" 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>

      <!-- 主要内容 -->
      <div class="card bg-base-100 backdrop-blur-md shadow-lg border border-primary/20 overflow-hidden"> <!-- 调整透明度和阴影 -->
        <div class="grid lg:grid-cols-2 gap-6 items-center">

          <!-- 图片区域 -->
          <% if @weather_art.image.attached? %>
            <figure class="relative lg:h-[30rem] h-auto overflow-hidden rounded-lg"> <!-- 添加圆角 -->
              <div class="gallery" data-controller="photo-swipe-lightbox">
                <div data-photo-swipe-lightbox-target="gallery" class="h-full">
                  <% 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: "object-cover w-full h-full transition-transform transform hover:scale-105 ease-in-out" %>
                    <%#= image_tag @weather_art.watermarked_variant.processed , class: "object-cover w-full h-full transition-transform transform hover:scale-105 ease-in-out" %>
                <% end %>
                </div>
              </div>
            </figure>
          <% end %>

          <!-- 信息区域 -->
          <div class="card-body p-8 lg:py-10 lg:px-12">
            <div class="prose max-w-none">
              <h1 class="font-display text-4xl md:text-5xl font-bold text-gradient mb-6">
                <%= @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.formatted_time(:date) %>
                </div>
                <div class="badge badge-lg badge-secondary">
                  <%= @weather_art.formatted_time(:time, true) %>
                </div>
              </div>

              <h2 class="text-2xl font-semibold mb-4">
                <%= 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>
        </div>
      </div>

      <div class="card bg-base-100 backdrop-blur-md shadow-lg border border-primary/20 overflow-hidden"> <!-- 调整透明度和阴影 -->
        <%= render 'shared/map', city: @weather_art.city %>
      </div>

      <div class="card bg-base-100 backdrop-blur-md shadow-lg overflow-hidden">
        <%= render 'shared/auto_ad' %>
      </div>

      <!-- AI Prompt -->
      <div class="bg-primary/10 backdrop-blur-md p-6 rounded-lg border border-primary/20">
        <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>

      <%
        # 构建更吸引人的分享标题
        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>