74 lines
3.4 KiB
HTML
74 lines
3.4 KiB
HTML
{% load i18n static %}
|
|
<div class="slide-canvas slide-comparison" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
|
|
<div class="slide-comparison__header">
|
|
<h1 class="slide-comparison__title">{{ slide.title }}</h1>
|
|
{% if slide.subtitle %}
|
|
<p style="font:var(--px-caption);color:var(--px-muted);">{{ slide.subtitle }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="slide-comparison__panels">
|
|
<div class="slide-comparison__panel {% if slide.content.left_highlight %}slide-comparison__panel--highlight{% endif %}">
|
|
{% if slide.content.left_label %}
|
|
<div class="slide-comparison__panel-label">{{ slide.content.left_label }}</div>
|
|
{% endif %}
|
|
|
|
{% if slide.content.left_items %}
|
|
<ul class="slide-list">
|
|
{% for item in slide.content.left_items %}
|
|
<li class="slide-list__item">
|
|
<span class="slide-list__item-bullet"></span>
|
|
<span>{{ item.text|default:item }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
{% if slide.content.left_stats %}
|
|
<div style="margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
|
{% for stat in slide.content.left_stats %}
|
|
<div style="padding:16px;background:var(--px-white);border-radius:12px;">
|
|
<div style="font:700 28px/1 var(--px-font);color:var(--px-navy);">{{ stat.value }}</div>
|
|
<div style="font:var(--px-caption);color:var(--px-muted);margin-top:4px;">{{ stat.label }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="slide-comparison__divider">
|
|
<div class="slide-comparison__vs">{% if slide.content.vs_text %}{{ slide.content.vs_text }}{% else %}vs{% endif %}</div>
|
|
</div>
|
|
|
|
<div class="slide-comparison__panel {% if slide.content.right_highlight %}slide-comparison__panel--highlight{% endif %}">
|
|
{% if slide.content.right_label %}
|
|
<div class="slide-comparison__panel-label">{{ slide.content.right_label }}</div>
|
|
{% endif %}
|
|
|
|
{% if slide.content.right_items %}
|
|
<ul class="slide-list">
|
|
{% for item in slide.content.right_items %}
|
|
<li class="slide-list__item">
|
|
<span class="slide-list__item-bullet slide-list__item-bullet--teal"></span>
|
|
<span>{{ item.text|default:item }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
{% if slide.content.right_stats %}
|
|
<div style="margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
|
{% for stat in slide.content.right_stats %}
|
|
<div style="padding:16px;background:var(--px-white);border-radius:12px;">
|
|
<div style="font:700 28px/1 var(--px-font);color:var(--px-teal);">{{ stat.value }}</div>
|
|
<div style="font:var(--px-caption);color:var(--px-muted);margin-top:4px;">{{ stat.label }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<img src="{% static 'img/HH_R_H_Logo.png' %}" alt="" class="slide-logo--footer">
|
|
</div>
|