songtianlun
5b7f0bba4f
- Update country and state badges to be links when region is present - Maintain fallback display for badges when region is not available - Improve user navigation by linking to relevant city pages These changes enhance the user experience by allowing users to click on country and state badges to view related cities. The previous static display has been improved to provide more contextual navigation options, making the application more interactive and user-friendly.
150 lines
6.6 KiB
Plaintext
150 lines
6.6 KiB
Plaintext
<% 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>
|
|
<%= "#{t("button.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">
|
|
<!-- Country budge -->
|
|
<% if @weather_art.city.country.present? && @weather_art.city.country.region.present? %>
|
|
<%= link_to cities_path(country: @weather_art.city.country, region: @weather_art.city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
|
|
<%= "#{@weather_art.city.country.emoji + " " || ""}#{@weather_art.city.country.localized_name}" %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="badge badge-lg badge-primary">
|
|
<%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
|
|
</div>
|
|
<% end %>
|
|
<!-- State budge -->
|
|
<% if @weather_art.city.country.present? && @weather_art.city.state.present? && @weather_art.city.country.region.present? %>
|
|
<%= link_to cities_path(country: @weather_art.city.country, state: @weather_art.city.state, region: @weather_art.city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
|
|
<%= @weather_art.city.state.name %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="badge badge-lg badge-secondary">
|
|
<%= @weather_art&.city&.state&.name %>
|
|
</div>
|
|
<% end %>
|
|
<%= render "shared/wiki_data_badge", city: @weather_art&.city %>
|
|
<div class="badge badge-lg badge-ghost">
|
|
<%= @weather_art.formatted_time(:date) %>
|
|
</div>
|
|
<div class="badge badge-lg badge-ghost">
|
|
<%= @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,
|
|
alt: @weather_art.image_alt,
|
|
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"><%= t("title.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/city_ai_description', city: @city %>
|
|
</div>
|
|
|
|
<!-- 地图区域 -->
|
|
<div class="card bg-base-100 shadow-lg mb-8">
|
|
<%= render 'shared/map', city: @weather_art.city %>
|
|
</div>
|
|
|
|
<!-- 下载选项卡片 -->
|
|
<%#= render 'shared/download_card', weather_art: @weather_art %>
|
|
|
|
<!-- 广告区域 -->
|
|
<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,#{format_as_tag(@weather_art.city&.name)},#{format_as_tag(@weather_art.city&.country&.name)},#{format_as_tag(@weather_art.city&.country&.region&.name)},#{format_as_tag(@weather_art.city&.country&.subregion&.name)}",
|
|
image: url_for(@weather_art.webp_image.processed)
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div> |