songtianlun
639c36200b
- Replace 'else' with 'elsif' for better clarity - Ensure badges are displayed only when country and state are present These changes enhance the readability of the code and ensure that only relevant information is displayed in the UI, improving the user experience.
149 lines
6.5 KiB
Plaintext
149 lines
6.5 KiB
Plaintext
<div class="min-h-screen bg-base-100">
|
|
<!-- 页面标题和背景 -->
|
|
<div class="relative">
|
|
<!-- 背景图像和渐变 -->
|
|
<% if @city.latest_weather_art&.image&.attached? %>
|
|
<div class="absolute inset-0 h-[60vh] overflow-hidden">
|
|
<%= image_tag @city.latest_weather_art.webp_image.processed,
|
|
alt: @city.latest_weather_art.image_alt,
|
|
class: "w-full h-full object-cover object-center" %>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-base-100/40 via-base-100/80 to-base-100"></div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="relative max-w-6xl mx-auto px-4 pt-4 ">
|
|
<%= link_to cities_path,
|
|
class: "inline-flex items-center btn btn-ghost gap-2 " 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_cities") %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="relative pt-8 pb-8">
|
|
<div class="container mx-auto px-4">
|
|
|
|
<div class="max-w-6xl mx-auto text-center space-y-6">
|
|
<h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
|
|
<%= @city.localized_name %>
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap justify-center items-center gap-3">
|
|
<!-- Country budge -->
|
|
<% if @city.country.present? && @city.country.region.present? %>
|
|
<%= link_to cities_path(country: @city.country, region: @city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
|
|
<%= "#{@city.country.emoji + " " || ""}#{@city.country.localized_name}" %>
|
|
<% end %>
|
|
<% elsif @city.country.present? %>
|
|
<div class="badge badge-lg badge-primary">
|
|
<%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
|
|
</div>
|
|
<% end %>
|
|
<!-- State budge -->
|
|
<% if @city.country.present? && @city.state.present? && @city.country.region.present? %>
|
|
<%= link_to cities_path(country: @city.country, state: @city.state, region: @city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
|
|
<%= @city.state.name %>
|
|
<% end %>
|
|
<% elsif @city.state.name.present? %>
|
|
<div class="badge badge-lg badge-secondary">
|
|
<%= @city&.state&.name %>
|
|
</div>
|
|
<% end %>
|
|
<!-- <div class="badge badge-lg badge-primary gap-2">-->
|
|
<%#= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
|
|
<!-- </div>-->
|
|
<!-- <div class="badge badge-lg badge-secondary gap-2">-->
|
|
<%#= @city&.state&.name %>
|
|
<!-- </div>-->
|
|
<%= render "shared/wiki_data_badge", city: @city %>
|
|
</div>
|
|
|
|
<!-- 主要统计信息 -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8">
|
|
<%= render partial: 'cities/stat_card', collection: [
|
|
{
|
|
icon: 'temperature',
|
|
title: 'Latest Weather',
|
|
value: "#{@city.latest_weather_art&.temperature}°C",
|
|
desc: @city.latest_weather_art&.description
|
|
},
|
|
{
|
|
icon: 'location',
|
|
title: 'Coordinates',
|
|
value: "#{@city.latitude}°N, #{@city.longitude}°E",
|
|
desc: 'Geographical Location'
|
|
},
|
|
{
|
|
icon: 'history',
|
|
title: 'Records',
|
|
value: @city.weather_arts.count,
|
|
desc: 'Total Weather Arts'
|
|
}
|
|
], as: :stat %>
|
|
</div>
|
|
|
|
<%= render 'shared/city_ai_description', city: @city %>
|
|
|
|
<div class="card bg-base-100 backdrop-blur-md shadow-lg border border-primary/20 overflow-hidden">
|
|
<%= render 'shared/map', city: @city %>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 backdrop-blur-md shadow-lg overflow-hidden">
|
|
<%= render 'shared/auto_ad' %>
|
|
</div>
|
|
|
|
<%= render 'cities/admin_panel' %>
|
|
|
|
<div class="card bg-base-100 backdrop-blur-md shadow-lg border border-primary/20 overflow-hidden">
|
|
<%
|
|
# 构建更吸引人的分享标题
|
|
share_title =
|
|
"🎨 #{@city.full_name}'s Weather Transformed into Art"
|
|
|
|
# 构建更有描述性的分享描述
|
|
share_description = [
|
|
"Discover this stunning AI-generated weather art!",
|
|
"in #{@city.full_name}.",
|
|
"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(@city&.name)},#{format_as_tag(@city&.country&.name)},#{format_as_tag(@city&.country&.region&.name)},#{format_as_tag(@city&.country&.subregion&.name)}",
|
|
image: url_for(@city&.latest_weather_art&.webp_image&.processed)
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 天气艺术历史记录 -->
|
|
<div class="bg-base-100">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-6xl mx-auto space-y-8">
|
|
<!-- 标题和更新时间 -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<h2 class="text-3xl font-display font-bold">Weather Art History</h2>
|
|
<div class="card bg-base-100 p-4">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" 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>
|
|
<span>Last Updated: <%= time_ago_in_words(@city.last_weather_fetch) if @city.last_weather_fetch %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 天气艺术卡片网格 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<%= render partial: 'weather_arts/card', collection: @arts, as: :weather_art %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|