Opus changes
This commit is contained in:
@@ -10,4 +10,21 @@
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<!-- SDK container publishing (dotnet publish -t:PublishContainer). The Web SDK
|
||||
includes Microsoft.NET.Build.Containers, so no Dockerfile is needed; the
|
||||
base image is inferred from TargetFramework (aspnet:8.0). -->
|
||||
<PropertyGroup Label="Container">
|
||||
<ContainerRepository>animeannouncer-web</ContainerRepository>
|
||||
<!-- Add a version alongside it at publish time:
|
||||
dotnet publish ... -p:ContainerImageTags='"1.1.0;latest"' -->
|
||||
<ContainerImageTags>latest</ContainerImageTags>
|
||||
<!-- The aspnet base image ships a non-root 'app' user; 8080 is unprivileged. -->
|
||||
<ContainerUser>app</ContainerUser>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<!-- Matches ASPNETCORE_HTTP_PORTS, which the aspnet:8.0 image defaults to 8080. -->
|
||||
<ContainerPort Include="8080" Type="tcp" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
@page
|
||||
@page
|
||||
@model IndexModel
|
||||
@{
|
||||
ViewData["Title"] = "Airing Soon Anime";
|
||||
}
|
||||
|
||||
<div class="container-fluid airing-container">
|
||||
<div class="airing-container">
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
|
||||
<h1 class="display-5 mb-0 d-flex align-items-center flex-wrap">
|
||||
<span>🗓️ Airing Soon Anime</span>
|
||||
<span class="badge rounded-pill bg-dark text-white ms-2 fs-6">@(Model.AiringShows == null ? "No data" : (Model.AiringShows.Count + (Model.AiringShows.Count == 1 ? " show" : " shows")))</span>
|
||||
</h1>
|
||||
</div>
|
||||
<p class="lead text-secondary mb-4">Anime with an upcoming or recent latest episode, fetched from the TMDB cache. Sorted by air date (<strong>newest first</strong>).</p>
|
||||
<p class="lead text-secondary mb-4">Anime with an upcoming or recent latest episode, drawn from the TMDB and AniList caches. Sorted by air date (<strong>soonest first</strong>).</p>
|
||||
|
||||
@if (!string.IsNullOrEmpty(Model.ErrorMessage))
|
||||
{
|
||||
@@ -32,93 +32,157 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6 g-4">
|
||||
<div class="airing-list">
|
||||
@foreach (var show in Model.AiringShows)
|
||||
{
|
||||
<div class="col">
|
||||
<div class="card h-100 anime-card @(show.IsFuture ? "border-danger" : "")">
|
||||
<div class="anime-poster-container">
|
||||
<article class="airing-row @(show.IsFuture ? "is-upcoming" : "is-aired")">
|
||||
@if (!string.IsNullOrWhiteSpace(show.HeroImageUrl))
|
||||
{
|
||||
<div class="airing-backdrop" style="background-image: url('@show.HeroImageUrl');" aria-hidden="true"></div>
|
||||
}
|
||||
<div class="airing-scrim" aria-hidden="true"></div>
|
||||
|
||||
<div class="airing-content">
|
||||
<div class="airing-poster">
|
||||
@if (!string.IsNullOrWhiteSpace(show.PosterUrl))
|
||||
{
|
||||
<img src="@show.PosterUrl" class="anime-poster" alt="@show.Title" title="@show.Title" loading="lazy" />
|
||||
<img src="@show.PosterUrl" alt="@show.Title poster" title="@show.Title" loading="lazy" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="anime-poster d-flex align-items-center justify-content-center text-secondary">
|
||||
<span class="display-4">🗂️</span>
|
||||
<div class="airing-poster-placeholder"><span>🗂️</span></div>
|
||||
}
|
||||
@if (show.LatestSeasonNumber.HasValue && show.LatestSeasonNumber > 0)
|
||||
{
|
||||
<span class="airing-poster-tag">Season @show.LatestSeasonNumber</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="airing-body">
|
||||
<header class="airing-header">
|
||||
<div class="airing-titles">
|
||||
<h2 class="airing-title">@show.Title</h2>
|
||||
@if (show.AlternateTitles.Count > 0)
|
||||
{
|
||||
<p class="airing-alt-titles">@string.Join(" · ", show.AlternateTitles)</p>
|
||||
}
|
||||
</div>
|
||||
<div class="airing-scores">
|
||||
@if (show.VoteAverage.HasValue && show.VoteAverage > 0)
|
||||
{
|
||||
<span class="score-chip score-tmdb" title="TMDB user score">
|
||||
<span class="score-value">@string.Format("{0:0.0}", show.VoteAverage)</span>
|
||||
<span class="score-source">TMDB</span>
|
||||
</span>
|
||||
}
|
||||
@if (show.AnilistScore.HasValue && show.AnilistScore > 0)
|
||||
{
|
||||
<span class="score-chip score-anilist" title="AniList average score">
|
||||
<span class="score-value">@string.Format("{0:0.0}", show.AnilistScore)</span>
|
||||
<span class="score-source">AniList</span>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="airing-meta">
|
||||
@if (show.LatestEpisodeNumber > 0)
|
||||
{
|
||||
<span class="meta-chip">
|
||||
@if (show.TotalEpisodes.HasValue && show.TotalEpisodes > 0)
|
||||
{
|
||||
<text>Episode @show.LatestEpisodeNumber of @show.TotalEpisodes</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>Episode @show.LatestEpisodeNumber</text>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
@if (show.LatestOrdinalEpisodeNumber.HasValue && show.LatestOrdinalEpisodeNumber > 0)
|
||||
{
|
||||
<span class="meta-chip">@show.LatestOrdinalEpisodeNumber episodes overall</span>
|
||||
}
|
||||
@if (!string.IsNullOrWhiteSpace(show.AnilistStatus))
|
||||
{
|
||||
<span class="meta-chip">@show.AnilistStatus</span>
|
||||
}
|
||||
@if (show.SeasonYear.HasValue)
|
||||
{
|
||||
<span class="meta-chip">@show.SeasonYear</span>
|
||||
}
|
||||
@if (show.IsFinaleNext && show.IsFuture)
|
||||
{
|
||||
<span class="meta-chip meta-chip-finale">🏁 Season finale</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (show.EpisodeProgressPercent.HasValue)
|
||||
{
|
||||
<div class="airing-progress" title="@show.LatestEpisodeNumber of @show.TotalEpisodes episodes aired">
|
||||
<div class="airing-progress-bar" style="width: @(show.EpisodeProgressPercent)%;"></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show.VoteAverage.HasValue && show.VoteAverage > 0)
|
||||
@if (!string.IsNullOrWhiteSpace(show.Overview))
|
||||
{
|
||||
<span class="position-absolute top-0 start-0 badge rounded-pill bg-warning text-dark m-2 shadow-sm">⭐ @string.Format("{0:0.0}", show.VoteAverage)</span>
|
||||
<p class="airing-overview">
|
||||
@if (show.OverviewIsSeasonSpecific && show.LatestSeasonNumber > 0)
|
||||
{
|
||||
<span class="overview-label">Season @show.LatestSeasonNumber —</span>
|
||||
}
|
||||
@show.Overview
|
||||
</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="airing-overview text-secondary fst-italic">No overview available.</p>
|
||||
}
|
||||
|
||||
<footer class="airing-footer">
|
||||
<a href="https://www.themoviedb.org/tv/@show.ShowID" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-light">TMDB</a>
|
||||
@if (!string.IsNullOrWhiteSpace(show.AnilistUrl))
|
||||
{
|
||||
<a href="@show.AnilistUrl" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-info">AniList</a>
|
||||
}
|
||||
|
||||
@if (show.SecondaryImages.Count > 0)
|
||||
{
|
||||
<div class="airing-gallery">
|
||||
@foreach (var image in show.SecondaryImages)
|
||||
{
|
||||
<a href="@image.Url" target="_blank" rel="noopener noreferrer"
|
||||
class="gallery-thumb" title="@image.Label (@image.Source)">
|
||||
<img src="@image.Url" alt="@show.Title — @image.Label" loading="lazy" />
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<aside class="airing-countdown">
|
||||
@if (show.EffectiveLastAirDate.HasValue)
|
||||
{
|
||||
@if (show.IsFuture)
|
||||
{
|
||||
<span class="position-absolute top-0 end-0 badge rounded-pill bg-danger text-white m-2 shadow-sm">Airs in @Math.Max(show.DaysUntil, 1)d</span>
|
||||
<span class="countdown-number">@Math.Max(show.DaysUntil, 1)</span>
|
||||
<span class="countdown-unit">@(Math.Max(show.DaysUntil, 1) == 1 ? "day" : "days") away</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="position-absolute top-0 end-0 badge rounded-pill bg-secondary text-white m-2 shadow-sm">Aired @Math.Abs(show.DaysUntil)d ago</span>
|
||||
<span class="countdown-number">@Math.Abs(show.DaysUntil)</span>
|
||||
<span class="countdown-unit">@(Math.Abs(show.DaysUntil) == 1 ? "day" : "days") ago</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title text-truncate" title="@show.Title">@show.Title</h5>
|
||||
|
||||
<div class="show-meta mb-2 d-flex flex-wrap gap-1">
|
||||
@if (show.LatestSeasonNumber.HasValue && show.LatestSeasonNumber > 0)
|
||||
{
|
||||
<span class="badge rounded-pill bg-light text-dark border">Season @show.LatestSeasonNumber</span>
|
||||
}
|
||||
@if (show.LatestEpisodeNumber > 0)
|
||||
{
|
||||
@if (show.LastEpisodeNumber.HasValue && show.LastEpisodeNumber > 0)
|
||||
{
|
||||
<span class="badge rounded-pill bg-light text-dark border">Ep @show.LatestEpisodeNumber / @show.LastEpisodeNumber</span>
|
||||
<span class="countdown-date" title="@show.AirDateLongFormatted">@show.AirDateFormatted</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge rounded-pill bg-light text-dark border">Ep @show.LatestEpisodeNumber</span>
|
||||
}
|
||||
}
|
||||
@if (show.LatestOrdinalEpisodeNumber.HasValue && show.LatestOrdinalEpisodeNumber > 0)
|
||||
{
|
||||
<span class="badge rounded-pill bg-light text-dark border">Total: @show.LatestOrdinalEpisodeNumber</span>
|
||||
<span class="countdown-unit">Air date unknown</span>
|
||||
}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="show-dates mb-2">
|
||||
@if (show.EffectiveLastAirDate.HasValue)
|
||||
{
|
||||
<small class="text-primary fw-semibold">📅 Last air date: @show.AirDateFormatted</small>
|
||||
}
|
||||
else
|
||||
{
|
||||
<small class="text-secondary">📅 Last air date: @show.AirDateFormatted</small>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer bg-transparent border-top-0 pt-0">
|
||||
@if (!string.IsNullOrWhiteSpace(show.Overview))
|
||||
{
|
||||
<p class="show-overview text-muted" title="@show.Overview">@show.Overview</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="show-overview text-secondary fst-italic">No overview available.</p>
|
||||
}
|
||||
<div class="d-grid mt-2">
|
||||
<a href="https://www.themoviedb.org/tv/@show.ShowID" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary">View on TMDB</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
using System.Net;
|
||||
using System.Text.RegularExpressions;
|
||||
using AnimeAnnouncer.Cache;
|
||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
|
||||
@@ -50,10 +52,23 @@ public class IndexModel : PageModel
|
||||
_logger.LogWarning(ex, "Failed to retrieve cache item for title: {Title}", airingItem.Title);
|
||||
}
|
||||
|
||||
// The announcer stores Anilist details under a parallel key using the same
|
||||
// title, so the two caches line up one-to-one when Anilist was consulted.
|
||||
AnilistCacheItem? anilistItem = null;
|
||||
try
|
||||
{
|
||||
anilistItem = await _tmdbCache.GetCacheItem<AnilistCacheItem>($"AnilistCache-{airingItem.Title}");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogWarning(ex, "Failed to retrieve Anilist cache item for title: {Title}", airingItem.Title);
|
||||
}
|
||||
|
||||
viewModels.Add(new AiringShowViewModel
|
||||
{
|
||||
AiringSoon = airingItem,
|
||||
CachedDetails = cacheItem
|
||||
CachedDetails = cacheItem,
|
||||
AnilistDetails = anilistItem
|
||||
});
|
||||
}
|
||||
|
||||
@@ -80,10 +95,20 @@ public class IndexModel : PageModel
|
||||
}
|
||||
}
|
||||
|
||||
public class ShowImage
|
||||
{
|
||||
public required string Url { get; set; }
|
||||
public required string Label { get; set; }
|
||||
public required string Source { get; set; }
|
||||
}
|
||||
|
||||
public class AiringShowViewModel
|
||||
{
|
||||
private static readonly Regex HtmlTagPattern = new("<[^>]+>", RegexOptions.Compiled);
|
||||
|
||||
public required AiringSoonItem AiringSoon { get; set; }
|
||||
public TMDBCacheItem? CachedDetails { get; set; }
|
||||
public AnilistCacheItem? AnilistDetails { get; set; }
|
||||
|
||||
public string Title => AiringSoon.Title;
|
||||
public int ShowID => AiringSoon.ShowID;
|
||||
@@ -95,25 +120,116 @@ public class IndexModel : PageModel
|
||||
public int? LatestSeasonNumber => CachedDetails?.LatestSeasonNumber;
|
||||
public int? LatestOrdinalEpisodeNumber => CachedDetails?.LatestOrdinalEpisodeNumber;
|
||||
public double? VoteAverage => CachedDetails?.VoteAverage;
|
||||
public string? Overview => !string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonOverview)
|
||||
? CachedDetails.LatestSeasonOverview
|
||||
: CachedDetails?.Overview;
|
||||
|
||||
public string? PosterUrl
|
||||
// --- Anilist ---------------------------------------------------------
|
||||
|
||||
public bool HasAnilist => AnilistDetails != null;
|
||||
public int? AnilistShowID => AnilistDetails?.ShowID;
|
||||
public string? AnilistUrl => AnilistShowID.HasValue ? $"https://anilist.co/anime/{AnilistShowID}" : null;
|
||||
|
||||
/// <summary>Anilist's 0-100 score, rescaled to the 0-10 range TMDB uses.</summary>
|
||||
public double? AnilistScore => AnilistDetails?.AverageScore.HasValue == true
|
||||
? AnilistDetails.AverageScore!.Value / 10.0
|
||||
: null;
|
||||
|
||||
public string? AnilistStatus => string.IsNullOrWhiteSpace(AnilistDetails?.Status)
|
||||
? null
|
||||
// Anilist statuses arrive as enum names like RELEASING / NOT_YET_RELEASED.
|
||||
: string.Join(' ', AnilistDetails.Status.Split('_', StringSplitOptions.RemoveEmptyEntries)
|
||||
.Select(word => char.ToUpperInvariant(word[0]) + word[1..].ToLowerInvariant()));
|
||||
|
||||
public int? SeasonYear => AnilistDetails?.SeasonYear;
|
||||
|
||||
/// <summary>Total episode count, preferring Anilist which the announcer treats as more reliable.</summary>
|
||||
public int? TotalEpisodes => AnilistDetails?.Episodes ?? (LastEpisodeNumber > 0 ? LastEpisodeNumber : null);
|
||||
|
||||
/// <summary>Alternate titles worth showing, i.e. anything that is not just the display title again.</summary>
|
||||
public List<string> AlternateTitles
|
||||
{
|
||||
get
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonPosterPath))
|
||||
return CachedDetails.LatestSeasonPosterPath;
|
||||
if (!string.IsNullOrWhiteSpace(CachedDetails?.PosterPath))
|
||||
return CachedDetails.PosterPath;
|
||||
//if (!string.IsNullOrWhiteSpace(CachedDetails?.AnilistPosterPath))
|
||||
// return CachedDetails.AnilistPosterPath;
|
||||
return null;
|
||||
var candidates = new[] { AnilistDetails?.RomajiTitle, AnilistDetails?.NativeTitle, AnilistDetails?.EnglishTitle };
|
||||
return candidates
|
||||
.Where(t => !string.IsNullOrWhiteSpace(t))
|
||||
.Select(t => t!.Trim())
|
||||
.Where(t => !string.Equals(t, Title, StringComparison.OrdinalIgnoreCase))
|
||||
.Distinct(StringComparer.OrdinalIgnoreCase)
|
||||
.ToList();
|
||||
}
|
||||
}
|
||||
|
||||
public string? BackdropUrl => CachedDetails?.BackdropPath;
|
||||
/// <summary>Anilist descriptions are HTML fragments; flatten them to plain text for display.</summary>
|
||||
public string? AnilistDescription
|
||||
{
|
||||
get
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(AnilistDetails?.Description))
|
||||
return null;
|
||||
|
||||
var text = AnilistDetails.Description
|
||||
.Replace("<br>", " ", StringComparison.OrdinalIgnoreCase)
|
||||
.Replace("<br/>", " ", StringComparison.OrdinalIgnoreCase)
|
||||
.Replace("<br />", " ", StringComparison.OrdinalIgnoreCase);
|
||||
text = WebUtility.HtmlDecode(HtmlTagPattern.Replace(text, string.Empty));
|
||||
text = Regex.Replace(text, @"\s{2,}", " ").Trim();
|
||||
|
||||
return string.IsNullOrWhiteSpace(text) ? null : text;
|
||||
}
|
||||
}
|
||||
|
||||
public string? Overview => !string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonOverview)
|
||||
? CachedDetails.LatestSeasonOverview
|
||||
: (!string.IsNullOrWhiteSpace(CachedDetails?.Overview) ? CachedDetails.Overview : AnilistDescription);
|
||||
|
||||
/// <summary>True when <see cref="Overview"/> describes the current season rather than the series.</summary>
|
||||
public bool OverviewIsSeasonSpecific => !string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonOverview);
|
||||
|
||||
// --- Artwork ---------------------------------------------------------
|
||||
|
||||
public string? SeasonPosterUrl => Clean(CachedDetails?.LatestSeasonPosterPath);
|
||||
public string? ShowPosterUrl => Clean(CachedDetails?.PosterPath);
|
||||
public string? BackdropUrl => Clean(CachedDetails?.BackdropPath);
|
||||
public string? AnilistCoverUrl => Clean(AnilistDetails?.CoverImageUrl);
|
||||
public string? AnilistBannerUrl => Clean(AnilistDetails?.BannerImageUrl);
|
||||
|
||||
/// <summary>The tall artwork shown alongside the entry; the season's own poster wins when present.</summary>
|
||||
public string? PosterUrl => SeasonPosterUrl ?? ShowPosterUrl ?? AnilistCoverUrl;
|
||||
|
||||
/// <summary>The wide artwork used as the row background.</summary>
|
||||
public string? HeroImageUrl => BackdropUrl ?? AnilistBannerUrl;
|
||||
|
||||
/// <summary>Every distinct piece of artwork, for the secondary thumbnail strip.</summary>
|
||||
public List<ShowImage> Gallery
|
||||
{
|
||||
get
|
||||
{
|
||||
var images = new List<ShowImage>();
|
||||
|
||||
void Add(string? url, string label, string source)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(url))
|
||||
return;
|
||||
if (images.Any(i => string.Equals(i.Url, url, StringComparison.OrdinalIgnoreCase)))
|
||||
return;
|
||||
images.Add(new ShowImage { Url = url, Label = label, Source = source });
|
||||
}
|
||||
|
||||
// The primary poster is already displayed beside the row, so start after it.
|
||||
Add(SeasonPosterUrl, $"Season {LatestSeasonNumber} poster", "TMDB");
|
||||
Add(ShowPosterUrl, "Series poster", "TMDB");
|
||||
Add(AnilistCoverUrl, "Cover art", "AniList");
|
||||
Add(BackdropUrl, "Backdrop", "TMDB");
|
||||
Add(AnilistBannerUrl, "Banner", "AniList");
|
||||
|
||||
return images;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>Gallery entries other than the one already shown as the main poster.</summary>
|
||||
public List<ShowImage> SecondaryImages =>
|
||||
Gallery.Where(i => !string.Equals(i.Url, PosterUrl, StringComparison.OrdinalIgnoreCase)).ToList();
|
||||
|
||||
// --- Air dates -------------------------------------------------------
|
||||
|
||||
public DateTime AirReferenceNow => DateTime.Now;
|
||||
|
||||
@@ -145,6 +261,24 @@ public class IndexModel : PageModel
|
||||
return date.HasValue ? date.Value.ToString("MM/dd/yyyy") : "Unknown";
|
||||
}
|
||||
}
|
||||
|
||||
public string? AirDateLongFormatted => EffectiveLastAirDate?.ToString("dddd, MMMM d, yyyy");
|
||||
|
||||
/// <summary>How far into the season the latest aired episode sits, as a percentage.</summary>
|
||||
public int? EpisodeProgressPercent
|
||||
{
|
||||
get
|
||||
{
|
||||
var total = TotalEpisodes;
|
||||
if (!total.HasValue || total.Value <= 0 || LatestEpisodeNumber <= 0)
|
||||
return null;
|
||||
return (int)Math.Round(Math.Clamp(LatestEpisodeNumber / (double)total.Value, 0, 1) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>True when the upcoming episode is the last one of the season.</summary>
|
||||
public bool IsFinaleNext => TotalEpisodes.HasValue && LatestEpisodeNumber > 0 && LatestEpisodeNumber >= TotalEpisodes.Value;
|
||||
|
||||
private static string? Clean(string? value) => string.IsNullOrWhiteSpace(value) ? null : value.Trim();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -41,55 +41,369 @@ a:hover {
|
||||
color: #e9ecef;
|
||||
}
|
||||
|
||||
/* --- Anime airing-soon cards --- */
|
||||
.anime-card {
|
||||
/* --- Airing-soon rows -------------------------------------------------
|
||||
Each show gets one full-width horizontal row: the TMDB backdrop (or the
|
||||
AniList banner as a fallback) fills the row behind a scrim, the season
|
||||
poster anchors the left edge, and the remaining artwork appears as a
|
||||
thumbnail strip in the footer. */
|
||||
.airing-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.airing-row {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.airing-row:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.55);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.airing-row.is-upcoming {
|
||||
border-left: 4px solid #ff6b6b;
|
||||
}
|
||||
|
||||
.airing-row.is-aired {
|
||||
border-left: 4px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.airing-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center 25%;
|
||||
opacity: 0.6;
|
||||
transform: scale(1.02);
|
||||
transition: opacity 0.3s ease, transform 0.4s ease;
|
||||
}
|
||||
|
||||
.airing-row:hover .airing-backdrop {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Keeps the text readable regardless of how bright the backdrop is. */
|
||||
.airing-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.86) 40%, rgba(18, 18, 18, 0.35) 100%),
|
||||
linear-gradient(0deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.2) 65%);
|
||||
}
|
||||
|
||||
.airing-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Poster --- */
|
||||
.airing-poster {
|
||||
position: relative;
|
||||
flex: 0 0 170px;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.anime-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.anime-poster-container {
|
||||
position: relative;
|
||||
height: 320px;
|
||||
background-color: #2a2a2a;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.anime-poster {
|
||||
.airing-poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.anime-card:hover .anime-poster {
|
||||
transform: scale(1.03);
|
||||
.airing-poster-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 3rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.show-overview {
|
||||
.airing-poster-tag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0.3rem 0.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #f8f9fa;
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
/* --- Body --- */
|
||||
.airing-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.airing-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.airing-titles {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.airing-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2.1rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.airing-alt-titles {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.airing-scores {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.score-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 3.6rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.score-source {
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.score-tmdb .score-value {
|
||||
color: #ffd43b;
|
||||
}
|
||||
|
||||
.score-anilist .score-value {
|
||||
color: #02a9ff;
|
||||
}
|
||||
|
||||
/* --- Metadata --- */
|
||||
.airing-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.meta-chip {
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
color: #e9ecef;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.meta-chip-finale {
|
||||
color: #ffd43b;
|
||||
border-color: rgba(255, 212, 59, 0.5);
|
||||
background: rgba(255, 212, 59, 0.12);
|
||||
}
|
||||
|
||||
.airing-progress {
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.airing-progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #4dabf7, #02a9ff);
|
||||
}
|
||||
|
||||
.airing-overview {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
color: #dee2e6;
|
||||
/* Full-width rows fit most synopses; only the longest ones get clipped. */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.45;
|
||||
font-size: 0.875rem;
|
||||
min-height: 5.1em;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
font-weight: 600;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.airing-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.airing-gallery {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-left: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gallery-thumb {
|
||||
display: block;
|
||||
height: 46px;
|
||||
border-radius: 0.35rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.gallery-thumb:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.gallery-thumb img {
|
||||
height: 46px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Countdown --- */
|
||||
.airing-countdown {
|
||||
flex: 0 0 8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.is-upcoming .countdown-number {
|
||||
color: #ff8787;
|
||||
}
|
||||
|
||||
.is-aired .countdown-number {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.countdown-unit {
|
||||
font-size: 0.85rem;
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.countdown-date {
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
/* --- Narrower viewports --- */
|
||||
@media (max-width: 991.98px) {
|
||||
.airing-poster {
|
||||
flex-basis: 140px;
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.airing-content {
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.airing-poster {
|
||||
flex-basis: 110px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.airing-body {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
/* The countdown drops below the row rather than squeezing the synopsis. */
|
||||
.airing-countdown {
|
||||
order: 3;
|
||||
flex: 0 0 100%;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0;
|
||||
padding-top: 0.75rem;
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.airing-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.airing-overview {
|
||||
-webkit-line-clamp: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Wide / ultra-wide / 4K display support ---
|
||||
Bootstrap 5's ".container" tops out at max-width: 1320px starting at its
|
||||
largest built-in breakpoint (1400px) and never grows beyond that, so on
|
||||
|
||||
Reference in New Issue
Block a user