Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1 <div class="event-card">
2 <a href="{{ base }}{{ event.site_url }}" class="event-card-link" hx-boost="true"></a>
3
4 <div class="event-card-content">
5 <!-- Time and Date -->
6 {% if event.starts_at_human %}
7 <div class="event-time">
8 <i class="fas fa-clock"></i>
9 <time class="dt-start" {% if event.starts_at_machine %}datetime="{{ event.starts_at_machine }}"{% endif %}>
10 {{ event.starts_at_human }}
11 </time>
12 </div>
13 {% endif %}
14
15 <!-- Event Title -->
16 <h3 class="event-title">
17 <a href="{{ base }}{{ event.site_url }}" hx-boost="true">
18 {% autoescape false %}{{ event.name }}{% endautoescape %}
19 </a>
20 </h3>
21
22 <!-- Event Tags -->
23 <div class="event-tags">
24 <!-- Role Tag -->
25 {% if event.role %}
26 <span class="event-tag tag-{{ event.role }}">
27 <i class="
28 {%- if event.role == 'going' -%}fas fa-star
29 {%- elif event.role == 'interested' -%}fas fa-eye
30 {%- elif event.role == 'notgoing' -%}fas fa-ban
31 {%- elif event.role == 'organizer' -%}fas fa-calendar
32 {%- else -%}fas fa-question
33 {%- endif -%}"></i>
34 {%- if event.role == 'going' -%}{{ t("status-going") }}
35 {%- elif event.role == 'interested' -%}{{ t("status-interested") }}
36 {%- elif event.role == 'notgoing' -%}{{ t("status-not-going") }}
37 {%- elif event.role == 'organizer' -%}{{ t("status-organizer") }}
38 {%- else -%}{{ t("status-unknown") }}
39 {%- endif -%}
40 </span>
41 {% endif %}
42
43 <!-- Legacy Tag -->
44 {% if event.collection != "community.lexicon.calendar.event" %}
45 <span class="event-tag tag-legacy">{{ t("status-legacy") }}</span>
46 {% endif %}
47
48 <!-- Status Tag -->
49 {% if event.status == "planned" %}
50 <span class="event-tag tag-planned" title="{{ t('status-planned') }}">
51 <i class="fas fa-calendar-days"></i> {{ t("status-planned") }}
52 </span>
53 {% elif event.status == "scheduled" %}
54 <span class="event-tag tag-scheduled" title="{{ t('status-scheduled') }}">
55 <i class="fas fa-calendar-check"></i> {{ t("status-scheduled") }}
56 </span>
57 {% elif event.status == "rescheduled" %}
58 <span class="event-tag tag-rescheduled" title="{{ t('status-rescheduled') }}">
59 <i class="fas fa-calendar-plus"></i> {{ t("status-rescheduled") }}
60 </span>
61 {% elif event.status == "cancelled" %}
62 <span class="event-tag tag-cancelled" title="{{ t('status-cancelled') }}">
63 <i class="fas fa-calendar-xmark"></i> {{ t("status-cancelled") }}
64 </span>
65 {% elif event.status == "postponed" %}
66 <span class="event-tag tag-postponed" title="{{ t('status-postponed') }}">
67 <i class="fas fa-calendar-minus"></i> {{ t("status-postponed") }}
68 </span>
69 {% endif %}
70
71 <!-- Mode Tag -->
72 {% if event.mode == "inperson" %}
73 <span class="event-tag tag-inperson">
74 <i class="fas fa-users"></i> {{ t("mode-in-person") }}
75 </span>
76 {% elif event.mode == "virtual" %}
77 <span class="event-tag tag-virtual">
78 <i class="fas fa-video"></i> {{ t("mode-virtual") }}
79 </span>
80 {% elif event.mode == "hybrid" %}
81 <span class="event-tag tag-hybrid">
82 <i class="fas fa-globe"></i> {{ t("mode-hybrid") }}
83 </span>
84 {% endif %}
85 </div>
86
87 <!-- Organizer Info -->
88 {% if event.organizer_display_name %}
89 <div class="event-organizer">
90 <div class="organizer-avatar">
91 {{ event.organizer_display_name|first|upper }}
92 </div>
93 <span class="organizer-name">
94 <a href="{{ base }}/{{ event.organizer_did }}" hx-boost="true" style="color: inherit; text-decoration: none;">
95 {{ event.organizer_display_name }}
96 </a>
97 </span>
98 </div>
99 {% endif %}
100
101 <!-- Event Description Preview -->
102 {% if event.description_short %}
103 <div class="event-description">
104 {% autoescape false %}{{ event.description_short }}{% endautoescape %}
105 </div>
106 {% endif %}
107
108 <!-- Location -->
109 {% if event.location %}
110 <div class="event-location" style="color: #aaa; font-size: 0.875rem; margin-bottom: 1rem;">
111 <i class="fas fa-map-marker-alt" style="color: #7dd87f; margin-right: 0.5rem;"></i>
112 {{ event.location }}
113 </div>
114 {% endif %}
115
116
117 <!-- End Time -->
118 {% if event.ends_at_human %}
119 <div class="event-end-time" style="color: #888; font-size: 0.75rem; margin-bottom: 1rem;">
120 <i class="fas fa-clock" style="margin-right: 0.25rem;"></i>
121 {{ t("ends-at", time=event.ends_at_human) }}
122 </div>
123 {% endif %}
124
125 <!-- Event Statistics -->
126 <div class="event-stats">
127 <div class="stat" title="{{ t('event-count-going', count=event.count_going) }}">
128 <i class="fas fa-star"></i>
129 <span>{{ event.count_going }}</span>
130 </div>
131 <div class="stat" title="{{ t('event-count-interested', count=event.count_interested) }}">
132 <i class="fas fa-eye"></i>
133 <span>{{ event.count_interested }}</span>
134 </div>
135 <div class="stat" title="{{ t('event-count-not-going', count=event.count_not_going | default(0)) }}">
136 <i class="fas fa-ban"></i>
137 <span>{{ event.count_not_going | default(0) }}</span>
138 </div>
139 </div>
140
141 <!-- Action Buttons -->
142 <div class="event-actions">
143 <a href="{{ base }}{{ event.site_url }}" class="action-btn" hx-boost="true">
144 <i class="fas fa-eye"></i>
145 {{ t("view-event") }}
146 </a>
147 </div>
148 </div>
149 </div>