diff options
| -rw-r--r-- | static/logos/imdb.svg | 4 | ||||
| -rw-r--r-- | static/logos/metacritic.svg | 4 | ||||
| -rw-r--r-- | static/logos/rt.svg | 6 | ||||
| -rw-r--r-- | static/styles.css | 36 | ||||
| -rw-r--r-- | templates/detail.html | 61 |
5 files changed, 61 insertions, 50 deletions
diff --git a/static/logos/imdb.svg b/static/logos/imdb.svg new file mode 100644 index 0000000..e57848d --- /dev/null +++ b/static/logos/imdb.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="38" height="20" viewBox="0 0 38 20"> + <rect width="38" height="20" rx="3" fill="#F5C518"/> + <text x="19" y="15" text-anchor="middle" font-family="Arial Black, Impact, sans-serif" font-size="11" font-weight="900" fill="#000000">IMDb</text> +</svg> diff --git a/static/logos/metacritic.svg b/static/logos/metacritic.svg new file mode 100644 index 0000000..28d759f --- /dev/null +++ b/static/logos/metacritic.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> + <rect width="20" height="20" rx="4" fill="#1C1C1C"/> + <text x="10" y="15" text-anchor="middle" font-family="Arial Black, Impact, sans-serif" font-size="13" font-weight="900" fill="#FFCC34">M</text> +</svg> diff --git a/static/logos/rt.svg b/static/logos/rt.svg new file mode 100644 index 0000000..c028e86 --- /dev/null +++ b/static/logos/rt.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> + <path d="M10 5 C10 5 12.5 3 14 5 C15.5 7 13 8 11 7 C13 9 15 8 16 10 C17.5 13 15 17 10 17 C5 17 2.5 13 4 10 C5 8 7 9 9 7 C7 8 4.5 7 6 5 C7.5 3 10 5 10 5 Z" fill="#FA320A"/> + <path d="M10 2 C10 2 11 4 13 3 C14.5 2 15 4.5 13 5" fill="#4CAF50" stroke="none"/> + <path d="M10 2 C10 2 9 4 7 3 C5.5 2 5 4.5 7 5" fill="#4CAF50" stroke="none"/> + <circle cx="8" cy="12" r="1.5" fill="#fff" opacity="0.4"/> +</svg> diff --git a/static/styles.css b/static/styles.css index c7be672..9f8619b 100644 --- a/static/styles.css +++ b/static/styles.css @@ -548,36 +548,32 @@ h2 { color: var(--accent); } -.ratings-row { +.detail-subtitle { display: flex; + align-items: center; + gap: 16px; flex-wrap: wrap; - gap: 10px; - margin: 16px 0 20px; + margin-bottom: 20px; } -.rating-chip { +.ratings-inline { display: flex; - flex-direction: column; - gap: 3px; - border: 1px solid var(--line); - border-radius: 8px; - background: var(--panel); - padding: 10px 14px; - min-width: 90px; + align-items: center; + gap: 14px; } -.rating-chip-label { +.rating-badge { + display: inline-flex; + align-items: center; + gap: 6px; color: var(--muted); - font-size: 0.72rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.06em; + font-size: 0.88rem; + font-weight: 600; } -.rating-chip-value { - color: var(--text); - font-size: 1.05rem; - font-weight: 600; +.rating-badge img { + display: block; + flex-shrink: 0; } .detail-tagline { diff --git a/templates/detail.html b/templates/detail.html index 5bf4b3f..9c558f7 100644 --- a/templates/detail.html +++ b/templates/detail.html @@ -51,39 +51,40 @@ {% if film.original_title %} <p class="original-title">{{ film.original_title }}</p> {% endif %} - <p class="subtitle"> - {% if film.year %}{{ film.year }}{% endif %} - {% set directors = split_credit_names(film.director) %} - {% if directors %} - {% if film.year %} · {% endif %} - {% for director in directors %} - <a class="inline-link" href="{{ director_href(director) }}">{{ director }}</a>{% if not loop.last %}, {% endif %} - {% endfor %} - {% endif %} - </p> - - {% if ratings %} - <div class="ratings-row"> - {% if ratings.imdb %} - <div class="rating-chip"> - <span class="rating-chip-label">IMDb</span> - <span class="rating-chip-value">{{ ratings.imdb }}</span> - </div> - {% endif %} - {% if ratings.rt %} - <div class="rating-chip"> - <span class="rating-chip-label">Rotten Tomatoes</span> - <span class="rating-chip-value">{{ ratings.rt }}</span> - </div> - {% endif %} - {% if ratings.metacritic %} - <div class="rating-chip"> - <span class="rating-chip-label">Metacritic</span> - <span class="rating-chip-value">{{ ratings.metacritic }}</span> + <div class="detail-subtitle"> + <p class="subtitle"> + {% if film.year %}{{ film.year }}{% endif %} + {% set directors = split_credit_names(film.director) %} + {% if directors %} + {% if film.year %} · {% endif %} + {% for director in directors %} + <a class="inline-link" href="{{ director_href(director) }}">{{ director }}</a>{% if not loop.last %}, {% endif %} + {% endfor %} + {% endif %} + </p> + {% if ratings %} + <div class="ratings-inline"> + {% if ratings.imdb %} + <span class="rating-badge"> + <img src="/static/logos/imdb.svg" alt="IMDb" height="18"> + <span>{{ ratings.imdb }}</span> + </span> + {% endif %} + {% if ratings.rt %} + <span class="rating-badge"> + <img src="/static/logos/rt.svg" alt="Rotten Tomatoes" height="18"> + <span>{{ ratings.rt }}</span> + </span> + {% endif %} + {% if ratings.metacritic %} + <span class="rating-badge"> + <img src="/static/logos/metacritic.svg" alt="Metacritic" height="18"> + <span>{{ ratings.metacritic }}</span> + </span> + {% endif %} </div> {% endif %} </div> - {% endif %} <section class="detail-grid"> <article class="detail-panel"> |
