songtianlun
f6b9dcf187
- Implement locale extraction and fallback mechanism - Add translation files for English and Chinese - Update views to use translated strings for various UI elements This commit introduces support for multiple languages in the application, enhancing accessibility for users. It includes a fallback mechanism for locales and updates to the user interface to display translated content.
125 lines
5.0 KiB
Plaintext
125 lines
5.0 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,
|
|
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">
|
|
<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>
|
|
</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>
|
|
|
|
<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,#{@city&.name},#{@city&.country&.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>
|