today_ai_weather/app/views/home/index.html.erb
songtianlun 4236e1a81d feat: add image alt text generation
- Introduced `image_alt` method in the WeatherArt model
- Updated image tags in views to use the new method for alt text
- Ensured consistent and descriptive alt text for better accessibility

This change improves the overall usability for screen readers and helps maintain a standard format for alt descriptions across various components in the application.
2025-04-10 22:37:27 +08:00

79 lines
3.4 KiB
Plaintext

<div>
<!-- 首屏展示区 -->
<section class="h-screen-90 relative overflow-hidden">
<% if @latest_arts.first&.image&.attached? %>
<div class="absolute inset-0">
<% begin %>
<%= image_tag @latest_arts&.first&.webp_image&.processed,
alt: @latest_arts.image_alt,
class: "w-full h-full object-cover" %>
<% rescue StandardError => e %>
<% Rails.logger.error("图片加载失败: #{e.message}") if defined?(Rails) %>
<% end %>
<div class="absolute inset-0 bg-gradient-to-r from-base-100/90 to-base-100/50"></div>
</div>
<% end %>
<div class="container mx-auto px-4 h-full flex items-center relative">
<div class="max-w-2xl space-y-6">
<h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
<%= t("home.headline_html") %>
</h1>
<p class="text-xl text-base-content/70 font-sans">
<%= t("home.subtitle") %>
</p>
<%= link_to t("button.explore_cities"), cities_path,
class: "btn btn-primary btn-lg mt-8 font-sans" %>
</div>
</div>
</section>
<!-- 最新天气艺术 -->
<section class="container mx-auto px-4 py-16 space-y-12">
<h2 class="text-3xl font-display font-bold text-center"><%= t("title.latest_weather_art") %></h2>
<%= render 'home/arts', arts: @latest_arts %>
<!-- <h2 class="text-3xl font-display font-bold text-center"><%#= t("title.popular_weather_art") %></h2>-->
<%#= render 'home/arts', arts: @popular_arts %>
<!-- <h2 class="text-3xl font-display font-bold text-center">Random Weather Art</h2>-->
<%#= render 'home/arts', arts: @random_arts %>
</section>
</div>
<div class="container mx-auto mt-12 mb-12">
<!-- View All 按钮 -->
<div class="text-center mb-16">
<%= link_to arts_path, class: "btn btn-primary gap-2" do %>
<%= t("button.view_all_weather_arts") %>
<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="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
<% end %>
</div>
<!-- 赞助商/合作伙伴徽章 -->
<div class="flex flex-wrap justify-center items-center gap-6 opacity-90 hover:opacity-100 transition-opacity mt-16 mb-8">
<a href="https://imglab.dev/en/s/todayaiweather_com" target="_blank" rel="noopener noreferrer" class="transition-transform hover:scale-105">
<img
src="https://imglab.dev/badge-logo.svg"
alt="ImgLab Awards"
width="220"
height="60"
class="max-w-full h-auto"
/>
</a>
<a href="https://www.producthunt.com/products/todayaiweather?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-todayaiweather" target="_blank" class="transition-transform hover:scale-105">
<img
src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=921515&theme=light"
alt="TodayAIWeather - Today&#0032;AI&#0032;Weather&#0032;&#0045;&#0032;Where&#0032;weather&#0032;meets&#0032;AI&#0032;art | Product Hunt"
width="250"
height="54"
class="max-w-full h-auto"
/>
</a>
<a href="https://turbo0.com/item/today-ai-weather" target="_blank" rel="noopener noreferrer">
<img src="https://img.turbo0.com/badge-listed-light.svg" alt="Listed on Turbo0" style="height: 60px; width: auto;" />
</a>
</div>
</div>