830e703e76
- Consolidate T3 duplicate #header rule into single block with overflow/position - Add explicit T2 #resultHeader border-bottom-width (4px) for clarity - Move diamond quad filled box-shadow from inline styles to .diamond-quad.filled CSS rule - Add TestResolveTier: 6 parametrized tests covering tier roundtrip, base card, unknown variant Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
5.3 KiB
HTML
85 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{% include 'style.html' %}
|
|
{% include 'tier_style.html' %}
|
|
</head>
|
|
<body>
|
|
<div id="fullCard" style="width: 1200px; height: 600px;">
|
|
{%- set diamond_colors = {
|
|
1: {'color': '#1a6b1a', 'highlight': '#40b040'},
|
|
2: {'color': '#2070b0', 'highlight': '#50a0e8'},
|
|
3: {'color': '#a82020', 'highlight': '#e85050'},
|
|
4: {'color': '#6b2d8e', 'highlight': '#a060d0'},
|
|
} -%}
|
|
{% if refractor_tier is defined and refractor_tier > 0 %}
|
|
{%- set dc = diamond_colors[refractor_tier] -%}
|
|
{%- set filled_bg = 'linear-gradient(135deg, ' ~ dc.highlight ~ ' 0%, ' ~ dc.color ~ ' 50%, ' ~ dc.color ~ ' 100%)' -%}
|
|
<div class="tier-diamond{% if refractor_tier == 4 %} diamond-glow{% endif %}">
|
|
<div class="diamond-quad{% if refractor_tier >= 2 %} filled{% endif %}" {% if refractor_tier >= 2 %}style="background: {{ filled_bg }};"{% endif %}></div>
|
|
<div class="diamond-quad{% if refractor_tier >= 1 %} filled{% endif %}" {% if refractor_tier >= 1 %}style="background: {{ filled_bg }};"{% endif %}></div>
|
|
<div class="diamond-quad{% if refractor_tier >= 3 %} filled{% endif %}" {% if refractor_tier >= 3 %}style="background: {{ filled_bg }};"{% endif %}></div>
|
|
<div class="diamond-quad{% if refractor_tier >= 4 %} filled{% endif %}" {% if refractor_tier >= 4 %}style="background: {{ filled_bg }};"{% endif %}></div>
|
|
</div>
|
|
{% if refractor_tier == 4 %}
|
|
<div class="corner-accent tl" style="width: 35px; height: 35px; border-top: 3px solid #c9a94e; border-left: 3px solid #c9a94e;"></div>
|
|
<div class="corner-accent tr" style="width: 35px; height: 35px; border-top: 3px solid #c9a94e; border-right: 3px solid #c9a94e;"></div>
|
|
<div class="corner-accent bl" style="width: 35px; height: 35px; border-bottom: 3px solid #c9a94e; border-left: 3px solid #c9a94e;"></div>
|
|
<div class="corner-accent br" style="width: 35px; height: 35px; border-bottom: 3px solid #c9a94e; border-right: 3px solid #c9a94e;"></div>
|
|
{% endif %}
|
|
{% endif %}
|
|
<div id="header" class="row-wrapper header-text border-bot" style="height: 65px">
|
|
<!-- <div id="headerLeft" style="flex-grow: 3; height: auto">-->
|
|
<div id="headerLeft" style="width: 477px; height: auto">
|
|
<div class="row-wrapper" style="height: 100%">
|
|
<div style="width: 29px; height: auto; font-size: 30px; margin-left: 6px">
|
|
<b>{{ hand }}</b>
|
|
</div>
|
|
<div class="vline"></div>
|
|
<div class="header-text" style="padding-left: 5px; width: 462px">
|
|
<div style="height: 50%; font-variant: small-caps; font-size: 27px"><b>{{ player.p_name }}</b></div>
|
|
<div style="height: 50%; padding-left: 18px; margin-top: {{ position_margin }}px; font-size: {{ position_font }}px;">{{ position_string }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="headerMiddle" style="width: 246px; height: auto; ">
|
|
<img src="data:image/png;base64,{{ rarity_file|safe }}" class="center" style="height: {% if player.rarity.name == 'Hall of Fame' %}62.{% else %}6{% endif %}5px; width: auto;"/>
|
|
</div>
|
|
{% if card_type == 'batter' %}
|
|
{% include 'topright_batter.html' %}
|
|
{% else %}
|
|
{% include 'topright_pitcher.html' %}
|
|
{% endif %}
|
|
</div>
|
|
<div id="allResults" class="result">
|
|
<div id="resultHeader" class="row-wrapper border-bot" style="height: 30px">
|
|
<div class="row-wrapper border-right-thick" style="width: 600px; ">
|
|
<div id="leftResultHeaderOne" class="column-num border-right-thin blue-gradient" style="width: 200px">
|
|
<b>{{ 1 if card_type == 'batter' else 4 }}</b>
|
|
</div>
|
|
<div id="leftResultHeaderTwo" class="column-num border-right-thin blue-gradient" style="width: 200px">
|
|
<b>{{ 2 if card_type == 'batter' else 5 }}</b>
|
|
</div>
|
|
<div id="leftResultHeaderThree" class="column-num blue-gradient" style="width: 200px">
|
|
<b>{{ 3 if card_type == 'batter' else 6 }}</b>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" style="width: 600px; ">
|
|
<div id="rightResultHeaderOne" class="column-num border-right-thin red-gradient" style="width: 200px">
|
|
<b>{{ 1 if card_type == 'batter' else 4 }}</b>
|
|
</div>
|
|
<div id="rightResultHeaderTwo" class="column-num border-right-thin red-gradient" style="width: 200px">
|
|
<b>{{ 2 if card_type == 'batter' else 5 }}</b>
|
|
</div>
|
|
<div id="rightResultHeaderThree" class="column-num red-gradient" style="width: 200px">
|
|
<b>{{ 3 if card_type == 'batter' else 6 }}</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="resultWrapper" class="row-wrapper" style="height: 505px">
|
|
{% include 'result_columns.html' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |