songtianlun
3f8b0dd231
- Added `share_controller.js` to handle sharing logic. - Created `_share_social.html.erb` partial for social sharing buttons. - Integrated share buttons into city and weather art show pages. - Added sharer.js dependency. This feature allows users to share city and weather art pages on various social media platforms such as Facebook, Twitter, LinkedIn, Pinterest, Telegram, and WhatsApp, increasing content visibility.
125 lines
4.9 KiB
Plaintext
125 lines
4.9 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>
|
|
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>
|