From cee9f1da103c85d1d1e85377d742b5efa516c4f2 Mon Sep 17 00:00:00 2001 From: popovskik Date: Thu, 30 Jul 2026 02:17:35 +0200 Subject: [PATCH 01/30] Add Student Welcome Guide, legal pages, and working newsletter Student Welcome Guide (Phase 1): - Landing + 5 topic pages (journey, bachelor, master, deadlines, eVS) in EN/SI/MK, reusing the article auto-TOC - New css/pages/_guide.css components and a 3:1 hero image placeholder - Functional client-side "Build my route" tool (student-guide.js) - "Student Welcome Guide" menu link wired site-wide Legal pages: - Trilingual Privacy Policy and Cookie Policy (GDPR-oriented, MailerLite disclosed, IP RS complaint route) - Footer legal strip + Organisation column links wired site-wide, depth-aware, plus header/footer templates Newsletter: - MailerLite subscribe handler in main.js upgrades both form variants on every page: validation, double opt-in, inline trilingual status - Subscribe status styles in css/pages/_projects.css Co-Authored-By: Claude Opus 4.8 (1M context) --- css/main.css | 3 +- css/pages/_guide.css | 393 ++++++++++++++++++ css/pages/_projects.css | 12 + en/about-us/index.html | 10 +- en/cookie-policy/index.html | 293 +++++++++++++ .../a-table-full-of-macedonia/index.html | 10 +- .../index.html | 10 +- en/get-to-know-macedonia/index.html | 12 +- .../index.html | 10 +- .../ohrid-more-than-a-postcard/index.html | 10 +- .../skopje-a-city-of-many-layers/index.html | 10 +- .../welcome-to-macedonia/index.html | 10 +- .../index.html | 10 +- en/get-to-know-slovenia/index.html | 12 +- .../index.html | 10 +- .../ljubljana-through-our-eyes/index.html | 10 +- .../index.html | 10 +- .../index.html | 10 +- .../welcome-to-slovenia/index.html | 10 +- en/index.html | 12 +- en/privacy-policy/index.html | 338 +++++++++++++++ .../index.html | 10 +- .../in-memory-of-frosina-kulakova/index.html | 10 +- .../index.html | 10 +- en/projects/index.html | 12 +- .../index.html | 12 +- .../index.html | 10 +- .../meet-student-slovenia-2023/index.html | 12 +- .../meet-student-slovenia-2024/index.html | 12 +- .../morning-coffee-in-front-of-ctk/index.html | 12 +- .../paint-and-wine-at-sunset/index.html | 10 +- .../index.html | 10 +- .../application-deadlines/index.html | 289 +++++++++++++ .../bachelor-application/index.html | 345 +++++++++++++++ .../complete-student-journey/index.html | 373 +++++++++++++++++ .../evs-application-guide/index.html | 315 ++++++++++++++ en/student-welcome-guide/index.html | 325 +++++++++++++++ .../master-application/index.html | 340 +++++++++++++++ en/timeline-and-milestones/index.html | 10 +- main.js | 87 +++- mk/cookie-policy/index.html | 293 +++++++++++++ .../a-table-full-of-macedonia/index.html | 10 +- .../index.html | 10 +- mk/get-to-know-macedonia/index.html | 12 +- .../index.html | 10 +- .../ohrid-more-than-a-postcard/index.html | 10 +- .../skopje-a-city-of-many-layers/index.html | 10 +- .../welcome-to-macedonia/index.html | 10 +- .../index.html | 10 +- mk/get-to-know-slovenia/index.html | 12 +- .../index.html | 10 +- .../ljubljana-through-our-eyes/index.html | 10 +- .../index.html | 10 +- .../index.html | 10 +- .../welcome-to-slovenia/index.html | 10 +- mk/index.html | 12 +- mk/privacy-policy/index.html | 338 +++++++++++++++ .../index.html | 10 +- .../in-memory-of-frosina-kulakova/index.html | 10 +- .../index.html | 10 +- mk/projects/index.html | 12 +- .../index.html | 12 +- .../meet-student-slovenia-2023/index.html | 12 +- .../meet-student-slovenia-2024/index.html | 12 +- .../morning-coffee-in-front-of-ctk/index.html | 12 +- .../paint-and-wine-at-sunset/index.html | 10 +- .../index.html | 10 +- .../application-deadlines/index.html | 289 +++++++++++++ .../bachelor-application/index.html | 345 +++++++++++++++ .../complete-student-journey/index.html | 373 +++++++++++++++++ .../evs-application-guide/index.html | 315 ++++++++++++++ mk/student-welcome-guide/index.html | 325 +++++++++++++++ .../master-application/index.html | 340 +++++++++++++++ si/cookie-policy/index.html | 293 +++++++++++++ .../a-table-full-of-macedonia/index.html | 10 +- .../index.html | 10 +- si/get-to-know-macedonia/index.html | 12 +- .../index.html | 10 +- .../ohrid-more-than-a-postcard/index.html | 10 +- .../skopje-a-city-of-many-layers/index.html | 10 +- .../welcome-to-macedonia/index.html | 10 +- .../index.html | 10 +- si/get-to-know-slovenia/index.html | 12 +- .../index.html | 10 +- .../ljubljana-through-our-eyes/index.html | 10 +- .../index.html | 10 +- .../index.html | 10 +- .../welcome-to-slovenia/index.html | 10 +- si/index.html | 10 +- si/privacy-policy/index.html | 338 +++++++++++++++ .../index.html | 10 +- .../in-memory-of-frosina-kulakova/index.html | 10 +- .../index.html | 10 +- si/projects/index.html | 12 +- .../index.html | 10 +- .../meet-student-slovenia-2023/index.html | 12 +- .../meet-student-slovenia-2024/index.html | 10 +- .../morning-coffee-in-front-of-ctk/index.html | 10 +- .../paint-and-wine-at-sunset/index.html | 10 +- .../index.html | 10 +- .../application-deadlines/index.html | 289 +++++++++++++ .../bachelor-application/index.html | 345 +++++++++++++++ .../complete-student-journey/index.html | 373 +++++++++++++++++ .../evs-application-guide/index.html | 315 ++++++++++++++ si/student-welcome-guide/index.html | 325 +++++++++++++++ .../master-application/index.html | 340 +++++++++++++++ student-guide.js | 190 +++++++++ templates/en/footer.html | 6 +- templates/en/header.html | 4 +- templates/mk/footer.html | 6 +- templates/mk/header.html | 4 +- templates/si/footer.html | 6 +- templates/si/header.html | 4 +- 113 files changed, 9043 insertions(+), 346 deletions(-) create mode 100644 css/pages/_guide.css create mode 100644 en/cookie-policy/index.html create mode 100644 en/privacy-policy/index.html create mode 100644 en/student-welcome-guide/application-deadlines/index.html create mode 100644 en/student-welcome-guide/bachelor-application/index.html create mode 100644 en/student-welcome-guide/complete-student-journey/index.html create mode 100644 en/student-welcome-guide/evs-application-guide/index.html create mode 100644 en/student-welcome-guide/index.html create mode 100644 en/student-welcome-guide/master-application/index.html create mode 100644 mk/cookie-policy/index.html create mode 100644 mk/privacy-policy/index.html create mode 100644 mk/student-welcome-guide/application-deadlines/index.html create mode 100644 mk/student-welcome-guide/bachelor-application/index.html create mode 100644 mk/student-welcome-guide/complete-student-journey/index.html create mode 100644 mk/student-welcome-guide/evs-application-guide/index.html create mode 100644 mk/student-welcome-guide/index.html create mode 100644 mk/student-welcome-guide/master-application/index.html create mode 100644 si/cookie-policy/index.html create mode 100644 si/privacy-policy/index.html create mode 100644 si/student-welcome-guide/application-deadlines/index.html create mode 100644 si/student-welcome-guide/bachelor-application/index.html create mode 100644 si/student-welcome-guide/complete-student-journey/index.html create mode 100644 si/student-welcome-guide/evs-application-guide/index.html create mode 100644 si/student-welcome-guide/index.html create mode 100644 si/student-welcome-guide/master-application/index.html create mode 100644 student-guide.js diff --git a/css/main.css b/css/main.css index 257eccfa..5992de21 100644 --- a/css/main.css +++ b/css/main.css @@ -31,4 +31,5 @@ @import 'pages/_projects.css'; @import 'pages/_article.css'; @import 'pages/_about.css'; -@import 'pages/_timeline.css'; \ No newline at end of file +@import 'pages/_timeline.css'; +@import 'pages/_guide.css'; \ No newline at end of file diff --git a/css/pages/_guide.css b/css/pages/_guide.css new file mode 100644 index 00000000..ad671427 --- /dev/null +++ b/css/pages/_guide.css @@ -0,0 +1,393 @@ +/* ========================================================================== + Student Welcome Guide + Reusable components for the guide landing page and topic pages. + ========================================================================== */ + +/* ---------- Page metadata strip (topic pages) ---------- */ +.guide-meta { + max-width: 720px; + margin: 0 auto 8px; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + font-family: 'Inter', sans-serif; + font-size: 13px; + color: #667085; +} +.guide-meta .guide-tag { + display: inline-flex; + align-items: center; + gap: 6px; + background: #F9FAFB; + border: 1px solid #EAECF0; + border-radius: 999px; + padding: 4px 12px; + white-space: nowrap; +} +.guide-tag.is-evergreen { color: #2D738C; } +.guide-tag.is-annual { color: #B54708; background: #FFFAEB; border-color: #FEDF89; } +.guide-tag.is-frequent { color: #B42318; background: #FEF3F2; border-color: #FECDCA; } + +/* ---------- Information boxes ---------- */ +.guide-box { + max-width: 720px; + margin: 28px auto; + border: 1px solid #EAECF0; + border-left-width: 4px; + border-radius: 12px; + padding: 18px 20px; + background: #F9FAFB; + font-family: 'Inter', sans-serif; +} +.guide-box .guide-box-title { + display: flex; + align-items: center; + gap: 10px; + font-weight: 600; + font-size: 15px; + color: #101828; + margin: 0 0 6px; +} +.guide-box p { + font-size: 15px; + line-height: 24px; + color: #344054; + margin: 0; +} +.guide-box p + p { margin-top: 8px; } +.guide-box--warning { background: #FFFBFA; border-color: #FED4CB; border-left-color: #FA7850; } +.guide-box--warning .guide-box-title { color: #B42318; } +.guide-box--macedonia { background: #FFFAEB; border-color: #FEDF89; border-left-color: #F79009; } +.guide-box--macedonia .guide-box-title { color: #B54708; } +.guide-box--msos { background: #F5FAFB; border-color: #C3E0E7; border-left-color: #2D738C; } +.guide-box--msos .guide-box-title { color: #2D738C; } + +/* ---------- Checklists ---------- */ +.guide-checklist { + max-width: 720px; + margin: 16px auto; + padding: 0; + list-style: none; + display: grid; + gap: 10px; +} +.guide-checklist li { + position: relative; + padding-left: 34px; + font-family: 'Inter', sans-serif; + font-size: 16px; + line-height: 26px; + color: #344054; +} +.guide-checklist li::before { + content: "\f00c"; /* fa-check */ + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + left: 0; + top: 2px; + width: 22px; + height: 22px; + font-size: 11px; + color: #2D738C; + background: #EAF3F5; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +/* Numbered (ordered) variant for step-by-step processes */ +.guide-steps { + max-width: 720px; + margin: 16px auto; + padding: 0; + list-style: none; + counter-reset: guide-step; + display: grid; + gap: 10px; +} +.guide-steps li { + position: relative; + padding-left: 40px; + font-family: 'Inter', sans-serif; + font-size: 16px; + line-height: 26px; + color: #344054; +} +.guide-steps li::before { + counter-increment: guide-step; + content: counter(guide-step); + position: absolute; + left: 0; + top: 1px; + width: 26px; + height: 26px; + font-size: 13px; + font-weight: 600; + color: #FFFFFF; + background: #2D738C; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +/* ---------- Stage timeline (journey page) ---------- */ +.guide-timeline { + max-width: 720px; + margin: 24px auto; + position: relative; + padding-left: 8px; +} +.guide-stage { + position: relative; + padding: 0 0 26px 40px; + border-left: 2px solid #EAECF0; +} +.guide-stage:last-child { border-left-color: transparent; padding-bottom: 0; } +.guide-stage .guide-stage-num { + position: absolute; + left: -17px; + top: -2px; + width: 32px; + height: 32px; + border-radius: 50%; + background: #2D738C; + color: #FFFFFF; + font-family: 'Inter', sans-serif; + font-weight: 600; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 0 4px #FFFFFF; +} +.guide-stage h3 { + font-family: 'Inter', sans-serif; + font-size: 19px; + font-weight: 600; + color: #101828; + margin: 2px 0 10px; +} +.guide-stage .guide-substage { + font-weight: 600; + color: #2D738C; + font-size: 14px; + margin: 12px 0 6px; +} + +/* ---------- Deadline table ---------- */ +.guide-table-wrap { max-width: 860px; margin: 20px auto; overflow-x: auto; } +.guide-table { + width: 100%; + border-collapse: collapse; + font-family: 'Inter', sans-serif; + font-size: 15px; + min-width: 640px; +} +.guide-table th, .guide-table td { + text-align: left; + padding: 12px 14px; + border-bottom: 1px solid #EAECF0; + vertical-align: top; + color: #344054; + line-height: 22px; +} +.guide-table thead th { + background: #F9FAFB; + color: #101828; + font-weight: 600; + border-bottom: 1px solid #D0D5DD; +} +.guide-table tbody tr:hover { background: #FCFCFD; } +.guide-table td:first-child { font-weight: 600; color: #101828; white-space: nowrap; } + +/* ---------- Landing hero ---------- */ +.guide-landing { font-family: 'Inter', sans-serif; } +.guide-landing-hero { + background: linear-gradient(180deg, #F5FAFB 0%, #FFFFFF 100%); + border-bottom: 1px solid #EAECF0; + padding: 72px 24px 56px; + text-align: center; +} +.guide-landing-hero .guide-eyebrow { + display: inline-block; + color: #2D738C; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.04em; + text-transform: uppercase; + margin-bottom: 14px; +} +.guide-landing-hero h1 { + max-width: 820px; + margin: 0 auto 18px; + font-size: 42px; + line-height: 1.15; + color: #101828; +} +.guide-landing-hero p { + max-width: 720px; + margin: 0 auto 12px; + font-size: 17px; + line-height: 28px; + color: #475467; +} +.guide-landing-hero .guide-lead { + max-width: 720px; + margin: 0 auto 4px; + font-size: 19px; + line-height: 30px; + color: #344054; + font-weight: 500; +} +.guide-hero-image { + max-width: 960px; + margin: 28px auto 24px; + width: 100%; + aspect-ratio: 3 / 1; + border-radius: 14px; + overflow: hidden; +} +.guide-hero-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.guide-hero-image--placeholder { + display: flex; + align-items: center; + justify-content: center; + background: #F2F4F7; + border: 2px dashed #D0D5DD; + color: #667085; +} +.guide-hero-image--placeholder span { + font-size: 15px; + font-weight: 500; +} +.guide-hero-image--placeholder i { + margin-right: 8px; +} + +/* ---------- Route builder ---------- */ +.guide-route { + max-width: 920px; + margin: -36px auto 0; + position: relative; + background: #FFFFFF; + border: 1px solid #EAECF0; + border-radius: 20px; + box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08); + padding: 28px; +} +.guide-route h2 { + font-size: 22px; + color: #101828; + margin: 0 0 4px; + text-align: left; +} +.guide-route .guide-route-sub { color: #667085; font-size: 15px; margin: 0 0 20px; } +.guide-route-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 14px; +} +.guide-field { display: flex; flex-direction: column; gap: 6px; } +.guide-field label { font-size: 13px; font-weight: 600; color: #344054; } +.guide-field select { + appearance: none; + -webkit-appearance: none; + font-family: 'Inter', sans-serif; + font-size: 15px; + color: #101828; + padding: 11px 36px 11px 14px; + border: 1px solid #D0D5DD; + border-radius: 10px; + background: #FFFFFF url("data:image/svg+xml;utf8,") no-repeat right 12px center; + cursor: pointer; +} +.guide-field select:focus { outline: none; border-color: #2D738C; box-shadow: 0 0 0 3px rgba(45,115,140,0.12); } +.guide-route-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; } + +.guide-route-result { margin-top: 24px; border-top: 1px solid #EAECF0; padding-top: 22px; } +.guide-route-result[hidden] { display: none; } +.guide-route-result h3 { font-size: 19px; color: #101828; margin: 0 0 6px; } +.guide-route-result .guide-route-context { color: #667085; font-size: 14px; margin: 0 0 16px; } +.guide-route-result ol { + list-style: none; + counter-reset: guide-step; + padding: 0; + margin: 0; + display: grid; + gap: 12px; +} +.guide-route-result ol li { + position: relative; + padding-left: 40px; + font-size: 16px; + line-height: 25px; + color: #344054; +} +.guide-route-result ol li::before { + counter-increment: guide-step; + content: counter(guide-step); + position: absolute; + left: 0; top: 0; + width: 26px; height: 26px; + font-size: 13px; font-weight: 600; + color: #FFFFFF; background: #FA7850; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; +} +.guide-route-result a { color: #2D738C; font-weight: 500; text-decoration: underline; } + +/* ---------- Quick links ---------- */ +.guide-section { max-width: 1080px; margin: 56px auto; padding: 0 24px; } +.guide-section > h2 { font-size: 26px; color: #101828; text-align: center; margin: 0 0 6px; } +.guide-section > .guide-section-sub { text-align: center; color: #667085; margin: 0 0 28px; } +.guide-quicklinks { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 14px; +} +.guide-quicklink { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 18px; + border: 1px solid #EAECF0; + border-radius: 12px; + background: #FFFFFF; + color: #101828; + font-weight: 500; + font-size: 15px; + text-decoration: none; + transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; +} +.guide-quicklink:hover { border-color: #2D738C; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.06); } +.guide-quicklink i { color: #2D738C; font-size: 18px; width: 22px; text-align: center; } + +/* ---------- Notice / before-you-rely blocks on landing ---------- */ +.guide-notice { + max-width: 820px; + margin: 0 auto; + background: #FFFBFA; + border: 1px solid #FED4CB; + border-radius: 14px; + padding: 22px 24px; +} +.guide-notice h3 { color: #B42318; font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } +.guide-notice ul { margin: 0; padding-left: 20px; color: #344054; line-height: 26px; } +.guide-notice li { margin-bottom: 4px; } + +/* ---------- Responsive ---------- */ +@media (max-width: 768px) { + .guide-landing-hero { padding: 52px 20px 44px; } + .guide-landing-hero h1 { font-size: 32px; } + .guide-hero-image { aspect-ratio: 2 / 1; } + .guide-route { margin-top: 24px; padding: 22px; border-radius: 16px; } + .guide-route-actions .btn { width: 100%; text-align: center; } +} diff --git a/css/pages/_projects.css b/css/pages/_projects.css index 5cc65856..aa43b0ab 100644 --- a/css/pages/_projects.css +++ b/css/pages/_projects.css @@ -93,6 +93,18 @@ font-weight: 500; } +/* Newsletter subscription status message */ +.subscribe-status { + max-width: 520px; + margin: 10px auto 0; + font-size: 14px; + font-weight: 500; + line-height: 20px; +} +.subscribe-status.is-info { color: #667085; } +.subscribe-status.is-success { color: #067647; } +.subscribe-status.is-error { color: #B42318; } + /* 1b. Filter kategorij (pill navigacija + podfiltri) */ .filter-section { diff --git a/en/about-us/index.html b/en/about-us/index.html index 128dea18..429d9b3f 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -55,7 +55,7 @@