82 lines
4.2 KiB
HTML
82 lines
4.2 KiB
HTML
{% extends "base_app.html" %}
|
|
{% set active_page = 'campaigns' %}
|
|
{% block title %}{{ campaign.name }} — TheNicheQuiz{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="app-page">
|
|
<div class="page-header">
|
|
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
|
|
<a href="/app/campaigns" style="color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600;">← Back</a>
|
|
</div>
|
|
<h1 class="page-title">{{ campaign.name }}</h1>
|
|
<div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">
|
|
{% if campaign.industry %}
|
|
<span class="badge badge-amber">{{ campaign.industry }}</span>
|
|
{% endif %}
|
|
{% if campaign.sub_niche %}
|
|
<span class="badge badge-purple">{{ campaign.sub_niche }}</span>
|
|
{% endif %}
|
|
{% if campaign.micro_niche %}
|
|
<span class="badge badge-amber">🎯 {{ campaign.micro_niche }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<p class="page-subtitle" style="margin-top: 8px;">
|
|
Created {{ campaign.created_at.strftime('%B %d, %Y at %I:%M %p') if campaign.created_at else 'N/A' }}
|
|
</p>
|
|
</div>
|
|
|
|
{% if campaign.campaign_data %}
|
|
{% set data = campaign.campaign_data if campaign.campaign_data is mapping else {} %}
|
|
{% set camps = data.get('campaigns', []) if data.get('campaigns') else [] %}
|
|
|
|
{% if camps %}
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;">
|
|
{% for c in camps %}
|
|
<div class="card">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
|
|
<span style="font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; background: rgba(139,92,246,0.1); color: var(--purple); border: 1px solid rgba(139,92,246,0.2);">#{{ loop.index }}</span>
|
|
<h3 style="font-size: 15px; font-weight: 700;">{{ c.get('campaign_name', 'Campaign ' ~ loop.index) }}</h3>
|
|
</div>
|
|
{% if c.get('micro_niche') %}
|
|
<div style="font-size: 12px; padding: 4px 10px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.15); color: var(--amber); border-radius: 6px; display: inline-block; margin-bottom: 12px; font-weight: 600;">
|
|
{{ c.micro_niche }}
|
|
</div>
|
|
{% endif %}
|
|
{% if c.get('ad_copy') %}
|
|
<div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6;">
|
|
{{ c.ad_copy.get('body', '')[:200] }}{% if c.ad_copy.get('body', '')|length > 200 %}...{% endif %}
|
|
</div>
|
|
{% if c.ad_copy.get('headline') %}
|
|
<div style="font-size: 14px; font-weight: 700; margin-bottom: 8px;">{{ c.ad_copy.headline }}</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if c.get('targeting') %}
|
|
<div style="font-size: 11px; color: var(--text-muted); padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 6px; line-height: 1.5;">
|
|
<strong style="color: var(--text-secondary);">🎯 Targeting:</strong>
|
|
Ages {{ c.targeting.get('age_min', '?') }}-{{ c.targeting.get('age_max', '?') }} · {{ c.targeting.get('gender', 'All') }}<br>
|
|
<strong>Interests:</strong> {{ c.targeting.get('interests', 'N/A') }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card">
|
|
<div style="text-align: center; padding: 40px; color: var(--text-muted);">
|
|
Campaign data stored as JSON. View the raw data below.
|
|
</div>
|
|
<pre style="background: var(--bg-input); padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 12px; color: var(--text-secondary); max-height: 400px;">{{ data | tojson(indent=2) }}</pre>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="card">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">📄</div>
|
|
<div class="empty-title">No campaign data</div>
|
|
<div class="empty-desc">This campaign doesn't have detailed data stored.</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|