feat(event,support): refine event page + add supporter form to Support page

Event page (Meet Student Slovenia 2026):
- Guide-style centred header with wide banner hero and caption
- Key facts on a plain background: When/Where side by side, subtle
  live-stream line, centred Register CTA, full-width note
- Partner logos (NLB patron, Embassy support) + sponsor
  Kapital Aset Menadžment DOOEL / Капитал асет менаџмент ДООЕЛ
- Inline photos between sections; em-dash removed from the subtitle
- "Support MSOS" call-out linking to the support page

Support page:
- Added the become-a-member supporter flow (supporter path only) via a
  new data-only-flow="supporter" mode in member-form.js; submits to the
  same combined Google Form tagged type=supporter
- Hero "Become a partner" button now scrolls to the form
- .ms-section carries its own brand vars so the form renders off the
  member page

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-20 23:35:43 +02:00
1 parent 270df5b2f8
commit 954dfb4d7d
12 files changed
+564 -17

No files matched your search

+165 -1
View File
@@ -195,7 +195,7 @@
<h1>Ова не можевме да го постигнеме без вас</h1>
<p class="sup-lead">МСОС започна како група на волонтери со една идеја, а прерасна во заедница што ги поддржува македонските студенти низ цела Словенија. Секој настан, секој водич, секоја подадена рака постои затоа што партнери, спонзори и луѓе како вас веруваа во нас.</p>
<div class="sup-hero-cta">
<a href="mailto:info@msosorg.com?subject=Партнерство%20со%20МСОС" class="btn btn-primary">Стани партнер</a>
<a href="#join-form" class="btn btn-primary">Стани партнер</a>
<a href="#donate" class="btn btn-secondary">Донирај</a>
</div>
</div>
@@ -250,6 +250,169 @@
</div>
</section>
<!-- Become a partner / supporter form (same flow as Become a member, supporter path only) -->
<section class="ms-section" id="join-form">
<div class="ms-head">
<span class="ms-eyebrow">Приклучи се</span>
<h2>Тука има место за тебе</h2>
<p>Избери како сакаш да се приклучиш. Трае само неколку минути, а колку активен ќе бидеш можеш да одлучиш подоцна.</p>
</div>
<form class="ms-form" data-only-flow="supporter" novalidate>
<div class="ms-hp" aria-hidden="true"><label>Do not fill this in<input type="text" name="company" tabindex="-1" autocomplete="off"></label></div>
<div class="ms-progress" data-step="Чекор" data-of="од" hidden><div class="ms-progress-track"><div class="ms-progress-bar"></div></div><span class="ms-progress-text"></span></div>
<div class="ms-alert" hidden data-required-msg="Пополни ги задолжителните полиња." data-cooldown-msg="Изгледа дека штотуку испрати пријава. Почекај момент пред да испратиш нова.">Пополни ги задолжителните полиња.</div>
<div class="ms-step ms-step--path" data-step="path" data-flow="both">
<h3 class="ms-path-prompt">Што те опишува подобро?</h3>
<div class="ms-paths">
<button type="button" class="ms-path ms-path--student" data-path="student">
<span class="ms-path-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
<strong>Јас сум студент</strong>
<span class="ms-path-desc">Сегашни и идни студенти, додипломски и магистерски, во секој словенечки студентски град.</span>
<span class="ms-path-go">Избери го ова <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
<button type="button" class="ms-path ms-path--supporter" data-path="supporter">
<span class="ms-path-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></span>
<strong>Сакам да го поддржам МСОС</strong>
<span class="ms-path-desc">Не мора да си студент за да ја поддржиш заедницата. Придонеси со знаење, партнерства, менторство, волонтирање, спонзорства, медиуми или корисни врски.</span>
<span class="ms-path-go">Избери го ова <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
</div>
</div>
<div class="ms-step" data-step="s-basic" data-flow="student">
<h3>Кажи ни кој си</h3>
<div class="ms-grid"><label class="ms-field"><span>Име *</span><input type="text" data-name="firstName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Презиме *</span><input type="text" data-name="lastName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Е-пошта *</span><input type="email" data-name="email" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Телефон (изборно)</span><input type="tel" data-name="phone" autocomplete="off"></label><label class="ms-field"><span>Тековен град</span><input type="text" data-name="cityNow" autocomplete="off"></label><label class="ms-field"><span>Претпочитан контакт</span><select data-name="contactPref"><option value="">Избери...</option><option value="email">Е-пошта</option><option value="whatsapp">WhatsApp</option><option value="phone">Телефон</option></select></label></div>
</div>
<div class="ms-step" data-step="s-status" data-flow="student">
<h3>Каде си на твоето студентско патување?</h3>
<div class="ms-radios" data-name="status" data-required="1">
<button type="button" class="ms-radio" data-value="studying">Веќе студирам во Словенија</button>
<button type="button" class="ms-radio" data-value="moving">Се подготвувам да се преселам во Словенија</button>
<button type="button" class="ms-radio" data-value="exploring">Сè уште ги истражувам можностите</button>
<button type="button" class="ms-radio" data-value="graduated">Неодамна дипломирав</button>
</div>
<div class="ms-cond" data-when="studying">
<div class="ms-grid"><label class="ms-field"><span>Универзитет</span><input type="text" data-name="university" autocomplete="off"></label><label class="ms-field"><span>Факултет</span><input type="text" data-name="faculty" autocomplete="off"></label><label class="ms-field"><span>Студиска програма</span><input type="text" data-name="programme" autocomplete="off"></label><label class="ms-field"><span>Степен на студии</span><select data-name="level"><option value="">Избери...</option><option value="bachelor">Додипломски</option><option value="master">Магистерски</option></select></label><label class="ms-field"><span>Година на студии</span><input type="text" data-name="year" autocomplete="off"></label><label class="ms-field"><span>Град на студирање</span><select data-name="studyCity"><option value="">Избери...</option><option value="ljubljana">Љубљана</option><option value="maribor">Марибор</option><option value="koper">Копер и Приморска</option><option value="nova-gorica">Нова Горица и Горица</option><option value="celje">Целје</option><option value="other">Друго</option><option value="unsure">Сè уште не сум сигурен</option></select></label></div>
</div>
<div class="ms-cond" data-when="moving">
<div class="ms-grid"><label class="ms-field"><span>Универзитет</span><input type="text" data-name="university" autocomplete="off"></label><label class="ms-field"><span>Факултет или област на интерес</span><input type="text" data-name="field" autocomplete="off"></label><label class="ms-field"><span>Степен на студии</span><select data-name="level"><option value="">Избери...</option><option value="bachelor">Додипломски</option><option value="master">Магистерски</option></select></label><label class="ms-field"><span>Предвиден град</span><select data-name="intendedCity"><option value="">Избери...</option><option value="ljubljana">Љубљана</option><option value="maribor">Марибор</option><option value="koper">Копер и Приморска</option><option value="nova-gorica">Нова Горица и Горица</option><option value="celje">Целје</option><option value="other">Друго</option><option value="unsure">Сè уште не сум сигурен</option></select></label><label class="ms-field"><span>Предвидена академска година</span><input type="text" data-name="academicYear" autocomplete="off"></label></div>
</div>
<div class="ms-cond" data-when="exploring">
<div class="ms-grid"><label class="ms-field"><span>Области на интерес</span><input type="text" data-name="areas" autocomplete="off"></label><label class="ms-field"><span>Степен на студии</span><select data-name="level"><option value="">Избери...</option><option value="bachelor">Додипломски</option><option value="master">Магистерски</option></select></label></div>
</div>
</div>
<div class="ms-step" data-step="s-intention" data-flow="student">
<h3>Што најмногу ти се допаѓа?</h3>
<p class="ms-hint">Избери колку сакаш.</p>
<div class="ms-multi" data-name="intention">
<button type="button" class="ms-chip" data-value="meet">Сакам да запознавам луѓе</button>
<button type="button" class="ms-chip" data-value="events">Сакам да доаѓам на настани</button>
<button type="button" class="ms-chip" data-value="informed">Сакам да бидам информиран</button>
<button type="button" class="ms-chip" data-value="support">Барам поддршка</button>
<button type="button" class="ms-chip" data-value="volunteer">Сакам да волонтирам</button>
<button type="button" class="ms-chip" data-value="organise">Сакам да помагам во организирање настани</button>
<button type="button" class="ms-chip" data-value="projects">Сакам да се приклучам на проекти</button>
<button type="button" class="ms-chip" data-value="experience">Сакам да стекнам искуство</button>
<button type="button" class="ms-chip" data-value="leadership">Ме интересира лидерство</button>
<button type="button" class="ms-chip" data-value="figuring">Сè уште размислувам</button>
</div>
<p class="ms-msg" data-when="leadership" hidden>Со задоволство би дознале повеќе за твоето искуство и видот одговорност што те интересира.</p>
<p class="ms-msg" data-when="events" hidden>Одлично. Може да се приклучиш на заедницата без никаква формална одговорност.</p>
<p class="ms-msg" data-when="figuring" hidden>Без притисок. Почни со тоа што ќе останеш поврзан, а подоцна одлучи колку сакаш да бидеш вклучен.</p>
</div>
<div class="ms-step" data-step="s-interests" data-flow="student">
<h3>Во што би сакал да учествуваш?</h3>
<p class="ms-hint">Избери колку сакаш.</p>
<div class="ms-multi" data-name="interests">
<button type="button" class="ms-chip" data-value="social">Друженија</button>
<button type="button" class="ms-chip" data-value="cultural">Културни настани</button>
<button type="button" class="ms-chip" data-value="sports">Спорт</button>
<button type="button" class="ms-chip" data-value="support">Поддршка на студенти</button>
<button type="button" class="ms-chip" data-value="creative">Креативни проекти</button>
<button type="button" class="ms-chip" data-value="humanitarian">Хуманитарни активности</button>
<button type="button" class="ms-chip" data-value="professional">Професионален развој</button>
<button type="button" class="ms-chip" data-value="networking">Вмрежување</button>
<button type="button" class="ms-chip" data-value="media">Медиуми и комуникација</button>
<button type="button" class="ms-chip" data-value="design">Дизајн и содржина</button>
<button type="button" class="ms-chip" data-value="partnerships">Партнерства</button>
<button type="button" class="ms-chip" data-value="volunteering">Волонтирање</button>
</div>
</div>
<div class="ms-step" data-step="s-city" data-flow="student">
<h3>Каде да те поврземе?</h3>
<div class="ms-radios" data-name="connectCity">
<button type="button" class="ms-radio" data-value="ljubljana">Љубљана</button>
<button type="button" class="ms-radio" data-value="maribor">Марибор</button>
<button type="button" class="ms-radio" data-value="koper">Копер и Приморска</button>
<button type="button" class="ms-radio" data-value="nova-gorica">Нова Горица и Горица</button>
<button type="button" class="ms-radio" data-value="celje">Целје</button>
<button type="button" class="ms-radio" data-value="other">Друго</button>
<button type="button" class="ms-radio" data-value="unsure">Сè уште не сум сигурен</button>
</div>
<p class="ms-msg" data-when="*any" hidden>Ќе те поврземе со најблиската заедница на МСОС.</p>
</div>
<div class="ms-step" data-step="s-personal" data-flow="student">
<h3>Што би го направило МСОС вредно за тебе? (изборно)</h3>
<textarea data-name="personal" rows="4" placeholder="Напиши што се надеваш дека ќе најдеш, научиш или доживееш."></textarea>
</div>
<div class="ms-step" data-step="s-consent" data-flow="student">
<label class="ms-check"><input type="checkbox" data-name="consentContact" data-required="1"> <span>Се согласувам МСОС да ме контактира во врска со мојата пријава.</span></label>
<label class="ms-check"><input type="checkbox" data-name="consentPrivacy" data-required="1"> <span>Ја прочитав изјавата за приватност. (<a href="../privacy-policy/">изјавата за приватност</a>)</span></label>
<label class="ms-check"><input type="checkbox" data-name="consentUpdates"> <span>Сакам да примам новости за настани и заедницата.</span></label>
</div>
<div class="ms-step" data-step="p-basic" data-flow="supporter">
<h3>Кажи ни кој си</h3>
<div class="ms-grid"><label class="ms-field"><span>Име *</span><input type="text" data-name="firstName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Презиме *</span><input type="text" data-name="lastName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Е-пошта *</span><input type="email" data-name="email" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Телефон (изборно)</span><input type="tel" data-name="phone" autocomplete="off"></label><label class="ms-field"><span>Тековен град</span><input type="text" data-name="cityNow" autocomplete="off"></label><label class="ms-field"><span>Организација или компанија (изборно)</span><input type="text" data-name="org" autocomplete="off"></label><label class="ms-field"><span>Улога или професија (изборно)</span><input type="text" data-name="role" autocomplete="off"></label></div>
</div>
<div class="ms-step" data-step="p-support" data-flow="supporter">
<h3>Како сакаш да го поддржиш МСОС?</h3>
<p class="ms-hint">Избери колку сакаш.</p>
<div class="ms-multi" data-name="support">
<button type="button" class="ms-chip" data-value="partnerships">Партнерства</button>
<button type="button" class="ms-chip" data-value="sponsorships">Спонзорства</button>
<button type="button" class="ms-chip" data-value="mentorship">Менторство</button>
<button type="button" class="ms-chip" data-value="volunteering">Волонтирање</button>
<button type="button" class="ms-chip" data-value="expertise">Стручно знаење</button>
<button type="button" class="ms-chip" data-value="media">Медиумска поддршка</button>
<button type="button" class="ms-chip" data-value="events">Поддршка на настани</button>
<button type="button" class="ms-chip" data-value="careers">Кариерни можности</button>
<button type="button" class="ms-chip" data-value="connections">Врски во заедницата</button>
<button type="button" class="ms-chip" data-value="venue">Простор или логистика</button>
</div>
</div>
<div class="ms-step" data-step="p-message" data-flow="supporter">
<h3>Кажи ни како сакаш да придонесеш (изборно)</h3>
<textarea data-name="contribution" rows="4" placeholder="Кратка белешка за тоа што можеш да понудиш или проект што ти е важен."></textarea>
</div>
<div class="ms-step" data-step="p-consent" data-flow="supporter">
<label class="ms-check"><input type="checkbox" data-name="consentContact" data-required="1"> <span>Се согласувам МСОС да ме контактира во врска со мојата пријава.</span></label>
<label class="ms-check"><input type="checkbox" data-name="consentPrivacy" data-required="1"> <span>Ја прочитав изјавата за приватност. (<a href="../privacy-policy/">изјавата за приватност</a>)</span></label>
</div>
<div class="ms-nav">
<button type="button" class="btn btn-secondary ms-back" hidden>Назад</button>
<button type="button" class="btn btn-primary-orange ms-next" hidden>Продолжи</button>
<button type="button" class="btn btn-primary-orange ms-submit" data-student="Приклучи се на МСОС" data-supporter="Поддржи го МСОС" hidden>Приклучи се на МСОС</button>
</div>
</form>
<div class="ms-success" hidden>
<div class="ms-success-icon"><i class="fas fa-circle-check" aria-hidden="true"></i></div>
<h3 class="ms-success-title"
data-student-title="Добредојде во заедницата" data-supporter-title="Ти благодариме за поддршката на МСОС"></h3>
<p class="ms-success-text"
data-student-text="Ти благодариме што се пријави. Се радуваме што ќе те запознаеме. Член на тимот на МСОС наскоро ќе те контактира." data-supporter-text="Го цениме твојот интерес за македонската студентска заедница во Словенија. Тимот ќе ја прегледа пораката и наскоро ќе те контактира."></p>
<p class="ms-success-next">Додека чекаш</p>
<div class="ms-success-links">
<a class="btn btn-secondary" href="../news/">Истражи ги претстојните настани</a>
<a class="btn btn-secondary" href="../student-welcome-guide/">Прочитај го студентскиот водич</a>
<a class="btn btn-secondary" href="../projects/">Откриј ги неодамнешните проекти</a>
</div>
</div>
</section>
<!-- Where your support goes -->
<section class="sup-section sup-section--tint">
<div class="sup-inner">
@@ -430,6 +593,7 @@
<!-- END_FOOTER -->
<script src="../../main.js"></script>
<script src="../../member-form.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>