Add info box to InfoModal with event organizer call-to-action and style updates

SableRaf · SableRaf · commit 666b8e0b5395 · 2026-03-21T17:28:49.000+01:00
diff --git a/pcd-website/src/components/InfoModal.vue b/pcd-website/src/components/InfoModal.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
 import { createFocusTrap, type FocusTrap } from 'focus-trap';
 import fallbackBannerImage from '../images/community_background_2x.png?url';
+import { PCD_FORUM_THREAD_URL } from '../config';
 
 const props = defineProps<{ open: boolean; bannerImageUrl?: string; autoOpened?: boolean }>();
 const bannerImage = computed(() => props.bannerImageUrl ?? fallbackBannerImage);
@@ -76,6 +77,19 @@ onUnmounted(() => {
         />
         <div class="info-modal-body">
           <h2 class="info-modal-title">{{ t('nav.info_modal_title') }}</h2>
+          <a
+            class="info-modal-info-box"
+            :href="PCD_FORUM_THREAD_URL"
+            target="_blank"
+            :aria-label="`${t('nav.info_modal_info_box_title')} (${t('nav.opens_in_new_tab')})`"
+            rel="noopener noreferrer"
+          >
+            <div class="info-modal-info-box-titlebar">{{ t('nav.info_modal_info_box_title') }}</div>
+            <div class="info-modal-info-box-body">
+              <span><strong>{{ t('nav.info_modal_info_box_this_october') }}</strong> {{ t('nav.info_modal_info_box') }}</span>
+              <Icon icon="bi:box-arrow-up-right" width="0.875em" height="0.875em" aria-hidden="true" class="info-modal-info-box-icon" />
+            </div>
+          </a>
           <p class="info-modal-description">{{ t('nav.info_modal_description') }}</p>
           <button
             class="info-modal-show-map-btn"
@@ -169,6 +183,7 @@ onUnmounted(() => {
   border: 0;
 }
 
+
 .info-modal-description {
   margin: 0 0 var(--spacing-lg);
   font-size: 0.9375rem;
diff --git a/pcd-website/src/i18n/locales/de.json b/pcd-website/src/i18n/locales/de.json
@@ -11,7 +11,10 @@
     "change_language": "Sprache ändern",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Der Processing Community Day (PCD) ist eine weltweite Veranstaltungsreihe, die von lokalen Communities organisiert wird und Kunst, Code und kreative Open-Source-Tools feiert. Finde deine lokale Veranstaltung auf der Karte oder fang an, deine eigene zu organisieren!",
+    "info_modal_info_box_title": "Aufruf an Veranstaltungsorganisator:innen!",
+    "info_modal_info_box_this_october": "Diesen Oktober",
+    "info_modal_info_box": "feiern wir 25 Jahre Processing!",
+    "info_modal_description": "Der Processing Community Day (PCD) ist eine weltweite Veranstaltungsreihe, die von lokalen Communities organisiert wird und Kunst, Code und kreative Open-Source-Tools feiert. Die Veranstaltungen werden von lokalen Communities auf der ganzen Welt organisiert.",
     "info_modal_forum_btn": "Mehr im Forum erfahren",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "Zur Karte",
diff --git a/pcd-website/src/i18n/locales/en.json b/pcd-website/src/i18n/locales/en.json
@@ -11,7 +11,10 @@
     "change_language": "Change language",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day (PCD) is a worldwide series of community-led events celebrating art, code, and open-source creative tools. Events are organized by local communities around the globe. Find your local event on the map, or start organizing your own!",
+    "info_modal_info_box_title": "Calling event organizers!",
+    "info_modal_info_box_this_october": "This October,",
+    "info_modal_info_box": "let's celebrate 25 years of Processing!",
+    "info_modal_description": "Processing Community Day (PCD) is a worldwide series of community-led events celebrating art, code, and open-source creative tools. Events are organized by local communities around the globe.",
     "info_modal_forum_btn": "Learn more on the forum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "Go to the map",
diff --git a/pcd-website/src/i18n/locales/es.json b/pcd-website/src/i18n/locales/es.json
@@ -11,7 +11,10 @@
     "change_language": "Cambiar idioma",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day (PCD) es una serie mundial de eventos organizados por comunidades locales que celebran el arte, el código y las herramientas creativas de código abierto. Encuentra tu evento local en el mapa, ¡o empieza a organizar el tuyo!",
+    "info_modal_info_box_title": "¡Llamado a organizadores de eventos!",
+    "info_modal_info_box_this_october": "Este octubre,",
+    "info_modal_info_box": "¡celebremos 25 años de Processing!",
+    "info_modal_description": "Processing Community Day (PCD) es una serie mundial de eventos organizados por comunidades locales que celebran el arte, el código y las herramientas creativas de código abierto. Los eventos son organizados por comunidades locales de todo el mundo.",
     "info_modal_forum_btn": "Más información en el foro",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "Ir al mapa",
diff --git a/pcd-website/src/i18n/locales/fr.json b/pcd-website/src/i18n/locales/fr.json
@@ -11,7 +11,10 @@
     "change_language": "Changer de langue",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day (PCD) est une série mondiale d'événements organisés par des communautés locales, célébrant l'art, le code et les outils créatifs open source. Trouvez votre événement local sur la carte, ou commencez à organiser le vôtre !",
+    "info_modal_info_box_title": "Appel aux organisateur·rice·s d'événements !",
+    "info_modal_info_box_this_october": "Cet octobre,",
+    "info_modal_info_box": "célébrons 25 ans de Processing !",
+    "info_modal_description": "Processing Community Day (PCD) est une série mondiale d'événements organisés par des communautés locales, célébrant l'art, le code et les outils créatifs open source. Les événements sont organisés par des communautés locales à travers le monde.",
     "info_modal_forum_btn": "En savoir plus sur le forum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "Aller à la carte",
diff --git a/pcd-website/src/i18n/locales/ja.json b/pcd-website/src/i18n/locales/ja.json
@@ -11,7 +11,10 @@
     "change_language": "言語を変更",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day（PCD）は、アート・コード・オープンソースのクリエイティブツールを祝う、世界各地のコミュニティが主催するイベントシリーズです。地図からお近くのイベントを見つけるか、自分でイベントを主催してみましょう！",
+    "info_modal_info_box_title": "イベント主催者を募集しています！",
+    "info_modal_info_box_this_october": "今年の10月、",
+    "info_modal_info_box": "Processing 25周年を一緒に祝いましょう！",
+    "info_modal_description": "Processing Community Day（PCD）は、アート・コード・オープンソースのクリエイティブツールを祝う、世界各地のコミュニティが主催するイベントシリーズです。イベントは世界中の地域コミュニティによって開催されます。",
     "info_modal_forum_btn": "フォーラムで詳しく見る",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "地図を見る",
diff --git a/pcd-website/src/i18n/locales/ko.json b/pcd-website/src/i18n/locales/ko.json
@@ -11,7 +11,10 @@
     "change_language": "언어 변경",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day(PCD)는 예술, 코드, 오픈소스 창작 도구를 기념하는 전 세계 커뮤니티 주도 이벤트 시리즈입니다. 지도에서 가까운 이벤트를 찾거나 직접 이벤트를 조직해 보세요!",
+    "info_modal_info_box_title": "이벤트 주최자를 모집합니다!",
+    "info_modal_info_box_this_october": "올해 10월,",
+    "info_modal_info_box": "Processing 25주년을 함께 기념합시다!",
+    "info_modal_description": "Processing Community Day(PCD)는 예술, 코드, 오픈소스 창작 도구를 기념하는 전 세계 커뮤니티 주도 이벤트 시리즈입니다. 이벤트는 전 세계 지역 커뮤니티가 주최합니다.",
     "info_modal_forum_btn": "포럼에서 자세히 알아보기",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "지도로 이동",
diff --git a/pcd-website/src/i18n/locales/pt.json b/pcd-website/src/i18n/locales/pt.json
@@ -11,7 +11,10 @@
     "change_language": "Mudar idioma",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "O Processing Community Day (PCD) é uma série mundial de eventos organizados por comunidades locais que celebram a arte, o código e as ferramentas criativas de código aberto. Encontre o seu evento local no mapa ou comece a organizar o seu próprio!",
+    "info_modal_info_box_title": "Convocatória para organizadores de eventos!",
+    "info_modal_info_box_this_october": "Neste outubro,",
+    "info_modal_info_box": "vamos celebrar 25 anos de Processing!",
+    "info_modal_description": "O Processing Community Day (PCD) é uma série mundial de eventos organizados por comunidades locais que celebram a arte, o código e as ferramentas criativas de código aberto. Os eventos são organizados por comunidades locais ao redor do mundo.",
     "info_modal_forum_btn": "Saiba mais no fórum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "Ir para o mapa",
diff --git a/pcd-website/src/i18n/locales/zh-CN.json b/pcd-website/src/i18n/locales/zh-CN.json
@@ -11,7 +11,10 @@
     "change_language": "更改语言",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day（PCD）是由全球各地社区主办的系列活动，旨在庆祝艺术、代码与开源创意工具。在地图上找到您附近的活动，或者开始组织您自己的活动！",
+    "info_modal_info_box_title": "征集活动主办者！",
+    "info_modal_info_box_this_october": "今年十月，",
+    "info_modal_info_box": "让我们一起庆祝 Processing 25 周年！",
+    "info_modal_description": "Processing Community Day（PCD）是由全球各地社区主办的系列活动，旨在庆祝艺术、代码与开源创意工具。活动由世界各地的本地社区自行组织举办。",
     "info_modal_forum_btn": "在论坛了解更多",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "前往地图",
diff --git a/pcd-website/src/i18n/locales/zh-TW.json b/pcd-website/src/i18n/locales/zh-TW.json
@@ -11,7 +11,10 @@
     "change_language": "變更語言",
     "info_button_label": "About Processing Community Day",
     "info_modal_title": "Processing Community Day",
-    "info_modal_description": "Processing Community Day（PCD）是由全球各地社群主辦的系列活動，旨在慶祝藝術、程式碼與開源創意工具。在地圖上找到您附近的活動，或開始籌辦您自己的活動！",
+    "info_modal_info_box_title": "徵集活動主辦者！",
+    "info_modal_info_box_this_october": "今年十月，",
+    "info_modal_info_box": "讓我們一起慶祝 Processing 25 週年！",
+    "info_modal_description": "Processing Community Day（PCD）是由全球各地社群主辦的系列活動，旨在慶祝藝術、程式碼與開源創意工具。活動由世界各地的在地社群自行組織舉辦。",
     "info_modal_forum_btn": "在論壇了解更多",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
     "info_modal_go_to_map": "前往地圖",
diff --git a/pcd-website/src/styles/global.css b/pcd-website/src/styles/global.css
@@ -207,7 +207,68 @@ html.theme-transition *::after {
   }
 }
 
+/* ─── Info Modal info box ───────────────────────────────────── */
+.info-modal-info-box {
+  display: block;
+  border: 1px solid #b0c4d8;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.info-modal-info-box:hover {
+  opacity: 0.85;
+}
+
+.info-modal-info-box:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.info-modal-info-box-titlebar {
+  background: #b0c4d8;
+  color: #1e3448;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0.2rem 1rem;
+}
+
+.info-modal-info-box-body {
+  background: #f0f5fa;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: #2c4a63;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.info-modal-info-box-icon {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
 /* ─── Info Modal dark mode ──────────────────────────────────── */
+[data-theme="dark"] .info-modal-info-box {
+  border-color: #2a3f52;
+}
+
+[data-theme="dark"] .info-modal-info-box-titlebar {
+  background: #1c2d3c;
+  color: #b8cfe0;
+}
+
+[data-theme="dark"] .info-modal-info-box-body {
+  background: #2a3f52;
+  color: #e2ecf4;
+}
+
 [data-theme="dark"] .info-modal-backdrop {
   background: rgba(0, 0, 0, 0.65);
 }
