songtianlun
f43a6b4698
- Introduce a new method `formatted_time` in the `WeatherArt` model - Update various views to use this new method for date and time display - Support formatting in local time zones or UTC This update enhances the time representation for weather data, ensuring that displayed times can reflect the user's local timezone or remain fixed at UTC. This improves the usability of the application for users in different regions.
93 lines
4.1 KiB
Plaintext
93 lines
4.1 KiB
Plaintext
<% 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-200/80 backdrop-blur-md shadow-lg 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>
|
|
|
|
<!-- 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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|