<!doctype html><html lang=”en”>
\n<head>
\n<meta charset=”utf-8″ \/>
\n<meta name=”viewport” content=”width=device-width,initial-scale=1″ \/>
\n<title>Federation \u2014 Informational Site<\/title>
\n<meta name=”description” content=”Federation \u2014 official website. Learn about our mission, events, gallery and how to contact us. Available in English and Georgian.” \/>
\n<!– Open Graph & Twitter –>
\n<meta property=”og:title” content=”Federation \u2014 Informational Site” \/>
\n<meta property=”og:description” content=”Federation \u2014 official website. Learn about our mission, events, gallery and how to contact us.” \/>
\n<meta property=”og:type” content=”website” \/>
\n<meta name=”twitter:card” content=”summary_large_image” \/><\/p>\n
<!– Fonts: Inter (EN) + Noto Sans Georgian (KA) –>
\n<link rel=”preconnect” href=”https:\/\/fonts.gstatic.com” crossorigin>
\n<link href=”https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+Georgian:wght@300;400;600;700&display=swap” rel=”stylesheet”><\/p>\n
<style>
\n:root{
\n–primary:#D32F2F; \/* red *\/
\n–primary-dark:#b82727; \/* hover *\/
\n–text:#222222;
\n–muted:#F5F5F5;
\n–border:#E0E0E0;
\n–radius:10px;
\n–base-font-size:16px;
\n}
\nhtml{font-family:Inter, system-ui, -apple-system, ‘Segoe UI’, Roboto, ‘Noto Sans Georgian’, sans-serif; font-size:var(–base-font-size); color:var(–text); background:white;}
\n\/* If Georgian language active, switch font *\/
\n:root[lang=”ka”] html, html[lang=”ka”]{font-family:’Noto Sans Georgian’, ‘Inter’, sans-serif}
\n*{box-sizing:border-box}
\nbody{margin:0;line-height:1.45;-webkit-font-smoothing:antialiased}
\na{color:var(–primary); text-decoration:none}
\na:focus{outline:3px solid rgba(211,47,47,0.2)}<\/p>\n
\/* Header *\/
\nheader{position:sticky;top:0;z-index:60;background:linear-gradient(0deg,rgba(255,255,255,0.96),rgba(255,255,255,0.96));backdrop-filter:blur(4px);border-bottom:1px solid var(–border)}
\n.container{max-width:1100px;margin:0 auto;padding:1rem}
\n.header-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem}
\n.logo{display:flex;align-items:center;gap:.75rem}
\n.logo svg{width:42px;height:42px;background:var(–primary);border-radius:8px;padding:6px}
\nnav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
\n.lang-switch{display:flex;gap:.5rem;align-items:center}
\n.lang-btn{border:1px solid var(–border);background:transparent;padding:.35rem .6rem;border-radius:6px;cursor:pointer}
\n.lang-btn[aria-pressed=”true”]{background:var(–primary);color:#fff;border-color:transparent}<\/p>\n
\/* Hero *\/
\n.hero{padding:3rem 0;display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center}
\n.hero-inner{display:flex;flex-direction:column;gap:1rem}
\n.hero h1{font-size:2rem;margin:0}
\n.hero p{margin:0;color:#333}
\n.cta-row{display:flex;gap:.75rem;flex-wrap:wrap}
\n.btn{background:var(–primary);color:#fff;padding:.6rem 1rem;border-radius:8px;border:none;cursor:pointer}
\n.btn.secondary{background:transparent;border:1px solid var(–primary);color:var(–primary)}
\n.btn:hover{background:var(–primary-dark)}<\/p>\n
\/* Sections *\/
\nsection{padding:2rem 0;border-bottom:1px solid var(–border)}
\n.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}<\/p>\n
\/* Events *\/
\n.events-list{display:grid;gap:1rem}
\n.event-card{border:1px solid var(–border);padding:1rem;border-radius:8px;background:linear-gradient(180deg,#fff,#fff);}<\/p>\n
\/* Gallery *\/
\n.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
\n.gallery img{width:100%;height:120px;object-fit:cover;border-radius:6px;display:block}<\/p>\n
\/* Footer *\/
\nfooter{background:var(–muted);padding:1.25rem 0}
\n.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}<\/p>\n
\/* Forms *\/
\ninput,textarea,select{width:100%;padding:.6rem;border:1px solid var(–border);border-radius:8px;font-size:1rem}
\nbutton[type=”submit”]{background:var(–primary);color:white;padding:.6rem 1rem;border-radius:8px;border:none}<\/p>\n
\/* Focus states *\/
\n:focus{outline:3px solid rgba(211,47,47,0.18)}<\/p>\n
\/* Responsive tweaks *\/
\n@media(min-width:768px){
\n.hero{grid-template-columns:1fr 380px}
\n.hero h1{font-size:2.6rem}
\n}<\/p>\n
\/* Utility *\/
\n.muted{color:#666}
\n.chip{display:inline-block;padding:.25rem .6rem;border-radius:999px;border:1px solid var(–border)}<\/p>\n
\/* Simple masonry-ish *\/
\n.masonry{column-count:3;column-gap:8px}
\n.masonry-item{display:inline-block;width:100%;margin-bottom:8px}
\n@media(max-width:900px){.masonry{column-count:2}}
\n@media(max-width:520px){.masonry{column-count:1}}
\n<\/style>
\n<\/head>
\n<body>
\n<!– Light-weight white SVG logo (keeps logo white on red backgrounds) –>
\n<header role=”banner”>
\n<div class=”container header-grid”>
\n<div class=”logo”>
\n<svg viewBox=”0 0 100 100″ aria-hidden=”true” focusable=”false”>
\n<rect width=”100″ height=”100″ rx=”18″ fill=”#fff”\/>
\n<g transform=”translate(12,12)”>
\n<path d=”M10 40 L70 10 L70 70 Z” fill=”#D32F2F”><\/path>
\n<\/g>
\n<\/svg>
\n<div>
\n<strong id=”site-title”>Federation<\/strong>
\n<div class=”muted” style=”font-size:.85rem”>Federation \u2014 KA | EN<\/div>
\n<\/div>
\n<\/div><\/p>\n
<nav aria-label=”Main navigation”>
\n<ul id=”main-nav”>
\n<li><a href=”\/en\/” data-slug=”home”>Home<\/a><\/li>
\n<li><a href=”\/en\/about” data-slug=”about”>About<\/a><\/li>
\n<li><a href=”\/en\/events” data-slug=”events”>Events<\/a><\/li>
\n<li><a href=”\/en\/gallery” data-slug=”gallery”>Gallery<\/a><\/li>
\n<li><a href=”\/en\/contact” data-slug=”contact”>Contact<\/a><\/li>
\n<\/ul>
\n<\/nav><\/p>\n
<div class=”lang-switch” aria-hidden=”false”>
\n<button class=”lang-btn” id=”ka-btn” data-lang=”ka” aria-pressed=”false”>KA<\/button>
\n<button class=”lang-btn” id=”en-btn” data-lang=”en” aria-pressed=”true”>EN<\/button>
\n<\/div>
\n<\/div>
\n<\/header><\/p>\n
<main id=”app” role=”main”>
\n<!– Marketing \/ Front content is rendered dynamically by JS based on language + route –>
\n<\/main><\/p>\n
<footer role=”contentinfo”>
\n<div class=”container footer-grid”>
\n<div>
\n<strong>Federation<\/strong>
\n<p class=”muted”>Small blurb about the federation \u2014 fostering community, sport and culture.<\/p>
\n<p><span class=”chip”>Address:<\/span> 123 Federation St, City<\/p>
\n<p><span class=”chip”>Email:<\/span> info@federation.example<\/p>
\n<p><span class=”chip”>Phone:<\/span> +995 32 2 345 678<\/p>
\n<\/div>
\n<div>
\n<nav aria-label=”Footer navigation”>
\n<ul style=”list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0″>
\n<li><a href=”\/en\/”>Home<\/a><\/li>
\n<li><a href=”\/en\/about”>About<\/a><\/li>
\n<li><a href=”\/en\/events”>Events<\/a><\/li>
\n<li><a href=”\/en\/gallery”>Gallery<\/a><\/li>
\n<li><a href=”\/en\/contact”>Contact<\/a><\/li>
\n<\/ul>
\n<\/nav>
\n<div style=”margin-top:1rem;font-size:.9rem;color:#666″>\u00a9 <span id=”year”><\/span> Federation. All rights reserved.<\/div>
\n<\/div>
\n<\/div>
\n<\/footer><\/p>\n
<!– Lightbox (simple) –>
\n<div id=”lightbox” style=”display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);align-items:center;justify-content:center;padding:20px;z-index:200″>
\n<button id=”lb-close” style=”position:absolute;right:16px;top:16px;background:transparent;border:none;color:white;font-size:1.4rem”>\u2715<\/button>
\n<img id=”lb-img” src=”” alt=”” style=”max-width:calc(100% – 40px);max-height:calc(100% – 40px);border-radius:8px” \/>
\n<\/div><\/p>\n
<script type=”application\/ld+json” id=”org-schema”>
\n{
\n“@context”:”https:\/\/schema.org”,
\n“@type”:”Organization”,
\n“name”:”Federation”,
\n“url”:”https:\/\/example.org\/”,
\n“logo”:”https:\/\/example.org\/logo.png”,
\n“sameAs”:[]
\n}
\n<\/script><\/p>\n
<script>
\n\/\/ — Basic client-side router + bilingual content —
\nconst DEFAULT_LANG = ‘en’;
\nconst supported = [‘en’,’ka’];
\nconst langFromPath = () => {
\nconst p = location.pathname.split(‘\/’).filter(Boolean);
\nif(p[0] && supported.includes(p[0])) return p[0];
\nreturn DEFAULT_LANG;
\n}
\nlet state = {lang: langFromPath(), page: ‘home’};<\/p>\n
\/\/ Content placeholders: English + Georgian. Replace copy as you like.
\nconst CONTENT = {
\nen: {
\nsiteTitle: ‘Federation’,
\nnav: {home:’Home’, about:’About Us’, events:’Events’, gallery:’Gallery’, contact:’Contact’},
\nhome:{
\nh1:’Welcome to the Federation’,
\nsub:’We bring communities together through sports, culture and education. Join our events and be part of the movement.’,
\nbullets:[‘National reach’,’Community programs’,’Transparent governance’],
\ncta1:’Learn More’, cta2:’Join an Event’
\n},
\nabout:{mission:’Our mission is to …’, vision:’Our vision is to …’, history:’Founded in 19XX…’},
\nevents:[
\n{id:1,title:’Spring Championship’,date:’2025-05-20′,location:’Sports Hall’,desc:’Top competitors from across the country.’},
\n{id:2,title:’Coaching Workshop’,date:’2025-06-10′,location:’Conference Center’,desc:’Improve coaching skills.’},
\n{id:3,title:’Community Day’,date:’2025-07-15′,location:’Central Park’,desc:’Family-friendly activities.’}
\n],
\ngallery:{items:[
\n{src:’https:\/\/via.placeholder.com\/800×600.webp?text=Event+1′,alt:’Event 1′,cat:’Competitions’},
\n{src:’https:\/\/via.placeholder.com\/800×1200.webp?text=Workshop’,alt:’Workshop’,cat:’Workshops’},
\n{src:’https:\/\/via.placeholder.com\/800×800.webp?text=Community’,alt:’Community’,cat:’Community’},
\n{src:’https:\/\/via.placeholder.com\/800×500.webp?text=Competition+2′,alt:’Competition 2′,cat:’Competitions’},
\n{src:’https:\/\/via.placeholder.com\/800×600.webp?text=Community+2′,alt:’Community 2′,cat:’Community’},
\n{src:’https:\/\/via.placeholder.com\/800×900.webp?text=Workshop+2′,alt:’Workshop 2′,cat:’Workshops’}
\n]},
\ncontact:{address:’123 Federation St, City’,email:’info@federation.example’,phone:’+995 32 2 345 678′}
\n},
\nka: {
\nsiteTitle: ‘\u10e4\u10d4\u10d3\u10d4\u10e0\u10d0\u10ea\u10d8\u10d0’,
\nnav: {home:’\u10db\u10d7\u10d0\u10d5\u10d0\u10e0\u10d8’, about:’\u10e9\u10d5\u10d4\u10dc \u10e8\u10d4\u10e1\u10d0\u10ee\u10d4\u10d1’, events:’\u10e6\u10dd\u10dc\u10d8\u10e1\u10eb\u10d8\u10d4\u10d1\u10d4\u10d1\u10d8’, gallery:’\u10d2\u10d0\u10da\u10d4\u10e0\u10d4\u10d0’, contact:’\u10d9\u10dd\u10dc\u10e2\u10d0\u10e5\u10e2\u10d8’},
\nhome:{
\nh1:’\u10d9\u10d4\u10d7\u10d8\u10da\u10d8 \u10d8\u10e7\u10dd\u10e1 \u10d7\u10e5\u10d5\u10d4\u10dc\u10d8 \u10db\u10dd\u10d1\u10e0\u10eb\u10d0\u10dc\u10d4\u10d1\u10d0 \u10e4\u10d4\u10d3\u10d4\u10e0\u10d0\u10ea\u10d8\u10d0\u10e8\u10d8’,
\nsub:’\u10d5\u10d0\u10d4\u10e0\u10d7\u10d8\u10d0\u10dc\u10d4\u10d1\u10d7 \u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10d0\u10e1 \u10e1\u10de\u10dd\u10e0\u10e2\u10d8\u10e1, \u10d9\u10e3\u10da\u10e2\u10e3\u10e0\u10d8\u10e1\u10d0 \u10d3\u10d0 \u10d2\u10d0\u10dc\u10d0\u10d7\u10da\u10d4\u10d1\u10d8\u10e1 \u10e1\u10d0\u10e8\u10e3\u10d0\u10da\u10d4\u10d1\u10d8\u10d7. \u10e8\u10d4\u10e3\u10d4\u10e0\u10d7\u10d3\u10d8\u10d7 \u10e9\u10d5\u10d4\u10dc\u10e1 \u10e6\u10dd\u10dc\u10d8\u10e1\u10eb\u10d8\u10d4\u10d1\u10d4\u10d1\u10e1.’,
\nbullets:[‘\u10d4\u10e0\u10dd\u10d5\u10dc\u10e3\u10da\u10d8 \u10d3\u10d0\u10e4\u10d0\u10e0\u10d5\u10d0’,’\u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10e0\u10d8\u10d5\u10d8 \u10de\u10e0\u10dd\u10d2\u10e0\u10d0\u10db\u10d4\u10d1\u10d8’,’\u10e2\u10e0\u10d0\u10dc\u10e1\u10de\u10d0\u10e0\u10d0\u10dc\u10e2\u10e3\u10da\u10d8 \u10db\u10db\u10d0\u10e0\u10d7\u10d5\u10d4\u10da\u10dd\u10d1\u10d0’],
\ncta1:’\u10db\u10d8\u10d7\u10d8\u10d7\u10d4\u10d1\u10d4\u10d1\u10d8’, cta2:’\u10e8\u10d4\u10db\u10dd\u10d2\u10d5\u10d8\u10d4\u10e0\u10d7\u10d3\u10d8 \u10e6\u10dd\u10dc\u10d8\u10e1\u10eb\u10d8\u10d4\u10d1\u10d0\u10d6\u10d4’
\n},
\nabout:{mission:’\u10e9\u10d5\u10d4\u10dc\u10d8 \u10db\u10d8\u10e1\u10d8\u10d0\u10d0 …’, vision:’\u10e9\u10d5\u10d4\u10dc\u10d8 \u10ee\u10d4\u10d3\u10d5\u10d0\u10d0 …’, history:’\u10d3\u10d0\u10d0\u10e0\u10e1\u10d3\u10d0 19XX \u10ec\u10d4\u10da\u10e1…’},
\nevents:[
\n{id:1,title:’\u10d2\u10d0\u10d6\u10d0\u10e4\u10ee\u10e3\u10da\u10d8\u10e1 \u10e9\u10d4\u10db\u10de\u10d8\u10dd\u10dc\u10d0\u10e2\u10d8’,date:’2025-05-20′,location:’\u10e1\u10de\u10dd\u10e0\u10e2\u10d8\u10e1 \u10d3\u10d0\u10e0\u10d1\u10d0\u10d6\u10d8’,desc:’\u10e5\u10d5\u10d4\u10e7\u10dc\u10d8\u10e1 \u10e1\u10d0\u10e3\u10d9\u10d4\u10d7\u10d4\u10e1\u10dd \u10db\u10dd\u10dc\u10d0\u10ec\u10d8\u10da\u10d4\u10d4\u10d1\u10d8.’},
\n{id:2,title:’\u10db\u10d0\u10e1\u10ec\u10d0\u10d5\u10da\u10d4\u10d1\u10da\u10d4\u10d1\u10d8\u10e1 \u10e2\u10e0\u10d4\u10dc\u10d8\u10dc\u10d2\u10d8’,date:’2025-06-10′,location:’\u10d9\u10dd\u10dc\u10d2\u10e0\u10d4\u10e1 \u10f0\u10dd\u10da’,desc:’\u10d9\u10dd\u10db\u10de\u10d4\u10e2\u10d4\u10dc\u10ea\u10d8\u10d4\u10d1\u10d8\u10e1 \u10d2\u10d0\u10e3\u10db\u10ef\u10dd\u10d1\u10d4\u10e1\u10d4\u10d1\u10d0.’},
\n{id:3,title:’\u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10e0\u10d8\u10d5\u10d8 \u10d3\u10e6\u10d4’,date:’2025-07-15′,location:’\u10ea\u10d4\u10dc\u10e2\u10e0\u10d0\u10da\u10e3\u10e0\u10d8 \u10de\u10d0\u10e0\u10d9\u10d8’,desc:’\u10dd\u10ef\u10d0\u10ee\u10e3\u10e0\u10d8 \u10d8\u10d5\u10d4\u10dc\u10d7\u10d8.’}
\n],
\ngallery:{items:[
\n{src:’https:\/\/via.placeholder.com\/800×600.webp?text=\u10e6\u10dd\u10dc\u10d8\u10e1\u10eb\u10d8\u10d4\u10d1\u10d0+1′,alt:’\u10e6\u10dd\u10dc\u10d8\u10e1\u10eb\u10d8\u10d4\u10d1\u10d0 1′,cat:’Competitions’},
\n{src:’https:\/\/via.placeholder.com\/800×1200.webp?text=\u10e1\u10d0\u10db\u10e3\u10e8\u10d0\u10dd\u10e8\u10dd\u10de\u10d8’,alt:’\u10e1\u10d0\u10db\u10e3\u10e8\u10d0\u10dd\u10e8\u10dd\u10de\u10d8’,cat:’Workshops’},
\n{src:’https:\/\/via.placeholder.com\/800×800.webp?text=\u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10d0’,alt:’\u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10d0’,cat:’Community’},
\n{src:’https:\/\/via.placeholder.com\/800×500.webp?text=\u10e9\u10d4\u10db\u10de\u10d8\u10dd\u10dc\u10d0\u10e2\u10d8+2′,alt:’\u10e9\u10d4\u10db\u10de\u10d8\u10dd\u10dc\u10d0\u10e2\u10d8 2′,cat:’Competitions’},
\n{src:’https:\/\/via.placeholder.com\/800×600.webp?text=\u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10d0+2′,alt:’\u10e1\u10d0\u10d6\u10dd\u10d2\u10d0\u10d3\u10dd\u10d4\u10d1\u10d0 2′,cat:’Community’},
\n{src:’https:\/\/via.placeholder.com\/800×900.webp?text=\u10e1\u10d0\u10db\u10e3\u10e8\u10d0\u10dd\u10e8\u10dd\u10de\u10d8+2′,alt:’\u10e1\u10d0\u10db\u10e3\u10e8\u10d0\u10dd\u10e8\u10dd\u10de\u10d8 2′,cat:’Workshops’}
\n]},
\ncontact:{address:’123 \u10e4\u10d4\u10d3\u10d4\u10e0\u10d0\u10ea\u10d8\u10d8\u10e1 \u10d5.’,email:’info@federation.example’,phone:’+995 32 2 345 678′}
\n}
\n};<\/p>\n
\/\/ — Helper: update document language attribute & fonts —
\nfunction setLangAttr(lang){
\ndocument.documentElement.lang = lang === ‘ka’ ? ‘ka’ : ‘en’;
\n\/\/ Toggle header nav links to proper slugs
\ndocument.querySelectorAll(‘#main-nav a’).forEach(a=>{
\nconst slug = a.dataset.slug;
\na.href = `\/${lang}\/${slug === ‘home’ ? ” : slug}`;
\n});
\ndocument.getElementById(‘ka-btn’).setAttribute(‘aria-pressed’, lang===’ka’);
\ndocument.getElementById(‘en-btn’).setAttribute(‘aria-pressed’, lang===’en’);
\n}<\/p>\n
\/\/ — Router render functions —
\nfunction render(){
\nstate.lang = langFromPath();
\nsetLangAttr(state.lang);
\n\/\/ derive page from pathname
\nconst p = location.pathname.split(‘\/’).filter(Boolean);
\nconst page = p[1] || ‘home’;
\nstate.page = page;
\nconst content = CONTENT[state.lang];
\ndocument.getElementById(‘site-title’).textContent = content.siteTitle;
\ndocument.title = content.siteTitle + ‘ \u2014 ‘ + (content.nav[page] || content.nav.home);<\/p>\n
const main = document.getElementById(‘app’);
\nmain.innerHTML = ”;
\nif(page===’home’) return main.appendChild(renderHome(content));
\nif(page===’about’) return main.appendChild(renderAbout(content));
\nif(page===’events’) return main.appendChild(renderEvents(content));
\nif(page===’event’) return main.appendChild(renderSingleEvent(content, parseInt(p[2]||p[1]||’1′)));
\nif(page===’gallery’) return main.appendChild(renderGallery(content));
\nif(page===’contact’) return main.appendChild(renderContact(content));
\n\/\/ fallback
\nconst el = document.createElement(‘div’); el.innerHTML=`<section class=”container”><h2>404<\/h2><p>Page not found.<\/p><\/section>`; main.appendChild(el);
\n}<\/p>\n
function elFromHTML(html){ const tmp = document.createElement(‘div’); tmp.innerHTML = html.trim(); return tmp.firstElementChild; }<\/p>\n
function renderHome(content){
\nconst sec = document.createElement(‘div’);
\nsec.innerHTML = `
\n<section class=”hero container” aria-labelledby=”hero-title”>
\n<div class=”hero-inner”>
\n<h1 id=”hero-title”>${escapeHtml(content.home.h1)}<\/h1>
\n<p>${escapeHtml(content.home.sub)}<\/p>
\n<div class=”cta-row”>
\n<button class=”btn” id=”learn-more”>${escapeHtml(content.home.cta1)}<\/button>
\n<button class=”btn secondary” id=”join-event”>${escapeHtml(content.home.cta2)}<\/button>
\n<\/div>
\n<div style=”margin-top:1rem”>
\n<h3>${state.lang===’ka’ ? ‘\u10e9\u10d5\u10d4\u10dc \u10e8\u10d4\u10e1\u10d0\u10ee\u10d4\u10d1 (\u10ee\u10d8\u10da\u10d0\u10d3\u10d8)’ : ‘About Federation (teaser)’}<\/h3>
\n<ul>
\n${content.home.bullets.map(b=>`<li>${escapeHtml(b)}<\/li>`).join(”)}
\n<\/ul>
\n<\/div>
\n<\/div>
\n<div aria-hidden=”true” style=”background:var(–primary);color:white;border-radius:12px;padding:1rem;display:flex;align-items:center;justify-content:center”>
\n<div style=”max-width:320px;text-align:center”>
\n<img src=”https:\/\/via.placeholder.com\/600×360.webp?text=Federation+Hero” alt=”Federation hero image” style=”width:100%;height:auto;border-radius:8px” loading=”lazy”>
\n<\/div>
\n<\/div>
\n<\/section><\/p>\n
<section class=”container”>
\n<h2>${state.lang===’ka’ ? ‘\u10db\u10dd\u10e1\u10d0\u10da\u10dd\u10d3\u10dc\u10d4\u10da\u10d8 \u10e6\u10dd\u10dc\u10d8\u10e1\u10eb\u10d8\u10d4\u10d1\u10d4\u10d1\u10d8’ : ‘Upcoming Events’}<\/h2>
\n<div class=”events-list” id=”home-events”>
\n<\/div>
\n<\/section><\/p>\n
<section class=”container”>
\n<h2>${state.lang===’ka’ ? ‘\u10d2\u10d0\u10da\u10d4\u10e0\u10d4\u10d0’ : ‘Gallery’}<\/h2>
\n<div class=”gallery” id=”home-gallery”><\/div>
\n<\/section><\/p>\n
<section class=”container” style=”text-align:center;padding:2rem;background:var(–muted);border-radius:8px;margin:1rem”>
\n<h3>${state.lang===’ka’ ? ‘\u10d2\u10d5\u10e1\u10e3\u10e0\u10e1 \u10d7\u10e5\u10d5\u10d4\u10dc\u10d8 \u10e9\u10d0\u10e0\u10d7\u10d5\u10d0’ : ‘Get in touch’}<\/h3>
\n<p class=”muted”>${state.lang===’ka’ ? ‘\u10d3\u10d0\u10d2\u10d5\u10d8\u10d9\u10d0\u10d5\u10e8\u10d8\u10e0\u10d3\u10d8\u10d7 \u10d3\u10d4\u10e2\u10d0\u10da\u10d4\u10d1\u10d6\u10d4’ : ‘Contact us for more information’}<\/p>
\n<div style=”margin-top:1rem”><a class=”btn” href=”\/${state.lang}\/contact”>${state.lang===’ka’ ? ‘\u10d9\u10dd\u10dc\u10e2\u10d0\u10e5\u10e2\u10d8’ : ‘Contact’}<\/a><\/div>
\n<\/section>
\n`;<\/p>\n
\/\/ populate events and gallery with JS for structured layout
\nsetTimeout(()=>{
\nconst eventsEl = sec.querySelector(‘#home-events’);
\ncontent.events.slice(0,3).forEach(ev=>{
\nconst d = document.createElement(‘div’); d.className=’event-card’; d.innerHTML = `<strong>${escapeHtml(ev.title)}<\/strong><div class=”muted”>${escapeHtml(ev.date)} \u00b7 ${escapeHtml(ev.location)}<\/div><p>${escapeHtml(ev.desc)}<\/p><div><a href=”\/${state.lang}\/events\/${ev.id}”>Details<\/a><\/div>`; eventsEl.appendChild(d);
\n});
\nconst gal = sec.querySelector(‘#home-gallery’);
\ncontent.gallery.items.slice(0,4).forEach(it=>{ const img = document.createElement(‘img’); img.dataset.src=it.src; img.alt=it.alt; img.loading=’lazy’; img.tabIndex=0; img.addEventListener(‘click’,()=>openLightbox(it.src,it.alt)); img.addEventListener(‘keypress’,(e)=>{ if(e.key===’Enter’) openLightbox(it.src,it.alt); }); \/* lazy load: set src *\/ img.src = it.src; gal.appendChild(img); });
\n},10);<\/p>\n
\/\/ CTA buttons actions
\nsec.querySelector(‘#learn-more’).addEventListener(‘click’,()=>navigate(`\/${state.lang}\/about`));
\nsec.querySelector(‘#join-event’).addEventListener(‘click’,()=>navigate(`\/${state.lang}\/events`));<\/p>\n
return sec;
\n}<\/p>\n
function renderAbout(content){
\nconst sec = document.createElement(‘section’); sec.className=’container’;
\nsec.innerHTML = `
\n<h1>${escapeHtml(content.nav.about)}<\/h1>
\n<div class=”grid-3″>
\n<div><h3>${state.lang===’ka’ ? ‘\u10db\u10d8\u10e1\u10d8\u10d0’ : ‘Mission’}<\/h3><p>${escapeHtml(content.about.mission)}<\/p><\/div>
\n<div><h3>${state.lang===’ka’ ? ‘\u10ee\u10d4\u10d3\u10d5\u10d0’ : ‘Vision’}<\/h3><p>${escapeHtml(content.about.vision)}<\/p><\/div>
\n<div><h3>${state.lang===’ka’ ? ‘\u10d8\u10e1\u10e2\u10dd\u10e0\u10d8\u10d0’ : ‘History’}<\/h3><p>${escapeHtml(content.about.history)}<\/p><\/div>
\n<\/div><\/p>\n
<h2 style=”margin-top:1rem”>${state.lang===’ka’ ? ‘\u10d2\u10d0\u10db\u10d2\u10d4\u10dd\u10d1\u10d0’ : ‘Leadership’}<\/h2>
\n<div class=”grid-3″ id=”leadership”>
\n<!– leadership grid: photo, name, role, bio –>
\n<\/div><\/p>\n
<h2 style=”margin-top:1rem”>${state.lang===’ka’ ? ‘\u10d3\u10dd\u10d9\u10e3\u10db\u10d4\u10dc\u10e2\u10d4\u10d1\u10d8\u10e1 \u10e9\u10d0\u10db\u10dd\u10e2\u10d5\u10d8\u10e0\u10d7\u10d5\u10d0’ : ‘Downloadable Documents’}<\/h2>
\n<ul>
\n<li><a href=”\/assets\/statute.pdf” download>Statute (PDF)<\/a><\/li>
\n<li><a href=”\/assets\/annual-report.pdf” download>Annual Report (PDF)<\/a><\/li>
\n<\/ul>
\n`;
\nconst leaders = sec.querySelector(‘#leadership’);
\nconst sample = [
\n{name: state.lang===’ka’? ‘\u10dc\u10d8\u10dc\u10dd \u10ec\u10e3\u10da\u10e3\u10d9\u10d8\u10eb\u10d4’ : ‘Nino T.’, role: state.lang===’ka’? ‘\u10de\u10e0\u10d4\u10d6\u10d8\u10d3\u10d4\u10dc\u10e2\u10d8’ : ‘President’, bio: state.lang===’ka’? ‘\u10db\u10dd\u10d9\u10da\u10d4 \u10d1\u10d8\u10dd…’ : ‘Short bio…’},
\n{name: state.lang===’ka’? ‘\u10da\u10d4\u10d5\u10d0\u10dc \u10db\u10d8\u10e5\u10d0\u10eb\u10d4’ : ‘Levan M.’, role: state.lang===’ka’? ‘\u10e2\u10d4\u10e5\u10d0 \u10d3\u10d8\u10e0\u10d4\u10e5\u10e2\u10dd\u10e0\u10d8’ : ‘Technical Director’, bio: state.lang===’ka’? ‘\u10db\u10dd\u10d9\u10da\u10d4 \u10d1\u10d8\u10dd…’ : ‘Short bio…’}
\n];
\nsample.forEach(ld=>{ const d = document.createElement(‘div’); d.innerHTML = `<img src=”https:\/\/via.placeholder.com\/320×240.webp?text=${encodeURIComponent(ld.name)}” alt=”${escapeHtml(ld.name)}” style=”width:100%;border-radius:8px;margin-bottom:.5rem”><strong>${escapeHtml(ld.name)}<\/strong><div class=”muted”>${escapeHtml(ld.role)}<\/div><p>${escapeHtml(ld.bio)}<\/p>`; leaders.appendChild(d); });
\nreturn sec;
\n}<\/p>\n
function renderEvents(content){
\nconst sec = document.createElement(‘section’); sec.className=’container’;
\nsec.innerHTML = `
\n<h1>${escapeHtml(content.nav.events)}<\/h1>
\n<div style=”margin-bottom:1rem”><button class=”chip” data-filter=”all”>All<\/button> <button class=”chip” data-filter=”upcoming”>Upcoming<\/button> <button class=”chip” data-filter=”past”>Past<\/button><\/div>
\n<div id=”events-list”><\/div>
\n`;
\nconst list = sec.querySelector(‘#events-list’);
\nfunction populate(filter){ list.innerHTML=”;
\nconst now = new Date();
\ncontent.events.forEach(ev=>{
\nconst ed = new Date(ev.date);
\nconst isPast = ed < now;
\nif(filter===’upcoming’ && isPast) return; if(filter===’past’ && !isPast) return;
\nconst card = document.createElement(‘div’); card.className=’event-card’;
\ncard.innerHTML = `<strong>${escapeHtml(ev.title)}<\/strong><div class=”muted”>${escapeHtml(ev.date)} \u00b7 ${escapeHtml(ev.location)}<\/div><p>${escapeHtml(ev.desc)}<\/p><div><a href=”\/${state.lang}\/events\/${ev.id}”>Details<\/a><\/div>`;
\nlist.appendChild(card);
\n});
\n}
\nsec.querySelectorAll(‘.chip’).forEach(b=>b.addEventListener(‘click’,()=>populate(b.dataset.filter)));
\npopulate(‘all’);
\nreturn sec;
\n}<\/p>\n
function renderSingleEvent(content,eventId){
\nconst ev = content.events.find(e=>e.id===eventId) || content.events[0];
\nconst sec = document.createElement(‘section’); sec.className=’container’;
\nsec.innerHTML = `
\n<h1>${escapeHtml(ev.title)}<\/h1>
\n<div class=”muted”>${escapeHtml(ev.date)} \u00b7 ${escapeHtml(ev.location)}<\/div>
\n<p>${escapeHtml(ev.desc)}<\/p>
\n<h3>${state.lang===’ka’ ? ‘\u10d2\u10e0\u10d0\u10e4\u10d8\u10d9\u10d8’ : ‘Schedule’}<\/h3>
\n<ul><li>10:00 \u2014 Opening<\/li><li>12:00 \u2014 Session<\/li><li>15:00 \u2014 Finals<\/li><\/ul>
\n<div style=”margin-top:1rem”><button class=”btn” id=”register”>${state.lang===’ka’ ? ‘\u10e0\u10d4\u10d2\u10d8\u10e1\u10e2\u10e0\u10d0\u10ea\u10d8\u10d0’ : ‘Register’}<\/button><\/div>
\n<div style=”margin-top:1rem”>Share: <a href=”#” onclick=”return false;”>Twitter<\/a> \u00b7 <a href=”#” onclick=”return false;”>Facebook<\/a><\/div>
\n<div id=”map” style=”height:220px;background:#eee;border-radius:8px;margin-top:1rem;display:flex;align-items:center;justify-content:center”>[Map placeholder]<\/div>
\n`;
\n\/\/ Event structured data (simple)
\nconst schema = {
\n‘@context’:’https:\/\/schema.org’,
\n‘@type’:’Event’,
\n‘name’: ev.title,
\n‘startDate’: ev.date,
\n‘location’: { ‘@type’:’Place’, ‘name’: ev.location },
\n‘description’: ev.desc
\n};
\nlet script = document.getElementById(‘event-schema’); if(script) script.remove();
\nscript = document.createElement(‘script’); script.type=’application\/ld+json’; script.id=’event-schema’; script.textContent = JSON.stringify(schema);
\ndocument.head.appendChild(script);<\/p>\n
sec.querySelector(‘#register’).addEventListener(‘click’,()=>{ alert(state.lang===’ka’ ? ‘\u10d7\u10e5\u10d5\u10d4\u10dc \u10ec\u10d0\u10e0\u10db\u10d0\u10e2\u10d4\u10d1\u10d8\u10d7 \u10d3\u10d0\u10e0\u10d4\u10d2\u10d8\u10e1\u10e2\u10e0\u10d8\u10e0\u10d3\u10d8\u10d7 (\u10d8\u10db\u10d8\u10e2\u10d0\u10ea\u10d8\u10d0)’ : ‘Registered (demo)’); });
\nreturn sec;
\n}<\/p>\n
function renderGallery(content){
\nconst sec = document.createElement(‘section’); sec.className=’container’;
\nsec.innerHTML = `<h1>${escapeHtml(content.nav.gallery)}<\/h1><div class=”masonry” id=”masonry”><\/div>`;
\nconst m = sec.querySelector(‘#masonry’);
\ncontent.gallery.items.forEach(it=>{
\nconst d = document.createElement(‘div’); d.className=’masonry-item’; d.innerHTML = `<img src=”${it.src}” alt=”${escapeHtml(it.alt)}” loading=”lazy” tabindex=”0″>`; d.querySelector(‘img’).addEventListener(‘click’,()=>openLightbox(it.src,it.alt)); m.appendChild(d);
\n});
\nreturn sec;
\n}<\/p>\n
function renderContact(content){
\nconst sec = document.createElement(‘section’); sec.className=’container’;
\nsec.innerHTML = `
\n<h1>${escapeHtml(content.nav.contact)}<\/h1>
\n<div style=”display:grid;grid-template-columns:1fr;gap:1rem”>
\n<form id=”contact-form” aria-label=”Contact form”>
\n<label>${state.lang===’ka’ ? ‘\u10e1\u10d0\u10ee\u10d4\u10da\u10d8’ : ‘Name’}<input name=”name” required><\/label>
\n<label>${state.lang===’ka’ ? ‘\u10d4\u10da-\u10e4\u10dd\u10e1\u10e2\u10d0’ : ‘Email’}<input name=”email” type=”email” required><\/label>
\n<label>${state.lang===’ka’ ? ‘\u10e2\u10d4\u10da\u10d4\u10e4\u10dd\u10dc\u10d8’ : ‘Phone’}<input name=”phone”><\/label>
\n<label>${state.lang===’ka’ ? ‘\u10e8\u10d4\u10e2\u10e7\u10dd\u10d1\u10d8\u10dc\u10d4\u10d1\u10d0’ : ‘Message’}<textarea name=”message” rows=”4″><\/textarea><\/label>
\n<label style=”display:flex;gap:.5rem;align-items:center”><input type=”checkbox” name=”gdpr”> <span class=”muted”>${state.lang===’ka’ ? ‘\u10d5\u10d4\u10d7\u10d0\u10dc\u10ee\u10db\u10d4\u10d1\u10d8 \u10db\u10dd\u10dc\u10d0\u10ea\u10d4\u10db\u10d7\u10d0 \u10d3\u10d0\u10db\u10e3\u10e8\u10d0\u10d5\u10d4\u10d1\u10d0\u10e1’ : ‘I consent to data processing’}<\/span><\/label>
\n<!– reCAPTCHA integration placeholder: insert server-side\/actual reCAPTCHA widget here –>
\n<div style=”margin-top:.5rem”><button type=”submit”>${state.lang===’ka’ ? ‘\u10d2\u10d0\u10d2\u10d6\u10d0\u10d5\u10dc\u10d0’ : ‘Send’}<\/button><\/div>
\n<\/form>
\n<div>
\n<h3>${state.lang===’ka’ ? ‘\u10db\u10d8\u10e1\u10d0\u10db\u10d0\u10e0\u10d7\u10d8’ : ‘Address’}<\/h3>
\n<p>${escapeHtml(content.contact.address)}<\/p>
\n<p><strong>${escapeHtml(content.contact.phone)}<\/strong><\/p>
\n<p><a href=”mailto:${content.contact.email}”>${escapeHtml(content.contact.email)}<\/a><\/p>
\n<div style=”margin-top:1rem;background:#fff;border:1px solid var(–border);padding:8px;border-radius:8px”>[Map embed placeholder]<\/div>
\n<\/div>
\n<\/div>
\n`;
\nsec.querySelector(‘#contact-form’).addEventListener(‘submit’,e=>{
\ne.preventDefault();
\n\/\/ Normally: validate + send to server + reCAPTCHA. Here: simulate success and accessible message.
\nalert(state.lang===’ka’ ? ‘\u10d2\u10d0\u10e3\u10d2\u10d6\u10d0\u10d5\u10dc\u10d0 \u2014 \u10ec\u10d0\u10e0\u10db\u10d0\u10e2\u10d4\u10d1\u10d8\u10d7’ : ‘Message sent \u2014 success (demo)’);
\n});
\nreturn sec;
\n}<\/p>\n
\/\/ navigation helper uses history API and keeps language persist
\nfunction navigate(path){ history.pushState({},”,path); render(); }
\nwindow.addEventListener(‘popstate’,render);<\/p>\n
\/\/ header language buttons
\ndocument.getElementById(‘ka-btn’).addEventListener(‘click’,()=>{ const p = location.pathname.split(‘\/’).filter(Boolean); p[0]=’ka’; if(!p[1]) p[1]=”; const newp = ‘\/’+p.join(‘\/’); navigate(‘\/ka\/’+(p[1]||”)); });
\ndocument.getElementById(‘en-btn’).addEventListener(‘click’,()=>{ const p = location.pathname.split(‘\/’).filter(Boolean); p[0]=’en’; navigate(‘\/en\/’+(p[1]||”)); });<\/p>\n
\/\/ make nav links use client router
\ndocument.addEventListener(‘click’,e=>{
\nconst a = e.target.closest(‘a’); if(!a) return; const href = a.getAttribute(‘href’)||”; if(href.startsWith(‘http’)||href.startsWith(‘mailto:’)||href.startsWith(‘\/assets’)) return; \/\/ allow external and asset links
\ne.preventDefault(); navigate(href);
\n});<\/p>\n
\/\/ lightbox
\nfunction openLightbox(src,alt){ const lb = document.getElementById(‘lightbox’); document.getElementById(‘lb-img’).src = src; document.getElementById(‘lb-img’).alt = alt; lb.style.display=’flex’; lb.focus(); }
\ndocument.getElementById(‘lb-close’).addEventListener(‘click’,()=>{ document.getElementById(‘lightbox’).style.display=’none’; });<\/p>\n
\/\/ small helpers
\nfunction escapeHtml(s){ if(!s) return ”; return String(s).replaceAll(‘&’,’&’).replaceAll(‘<‘,’<’).replaceAll(‘>’,’>’); }<\/p>\n
\/\/ initial year
\ndocument.getElementById(‘year’).textContent = new Date().getFullYear();<\/p>\n
\/\/ SEO: sitemap (simple representation) – provide as string for server admin to write as \/sitemap.xml
\nconst sitemap = `<?xml version=”1.0″ encoding=”UTF-8″?>\\n<urlset xmlns=\\”http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9\\”>\\n <url><loc>https:\/\/example.org\/en\/<\/loc><\/url>\\n <url><loc>https:\/\/example.org\/ka\/<\/loc><\/url>\\n <url><loc>https:\/\/example.org\/en\/about<\/loc><\/url>\\n <url><loc>https:\/\/example.org\/en\/events<\/loc><\/url>\\n <url><loc>https:\/\/example.org\/en\/gallery<\/loc><\/url>\\n <url><loc>https:\/\/example.org\/en\/contact<\/loc><\/url>\\n<\/urlset>`;
\n\/\/ console.log(‘Sitemap (paste to \/sitemap.xml):’,sitemap);<\/p>\n
\/\/ initial render
\nrender();<\/p>\n
<\/script>
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
<!doctype html><html lang=”en”> <head> <meta charset=”utf-8″ \/> <meta name=”viewport” content=”width=device-width,initial-scale=1″ \/> <title>Federation \u2014 Informational Site<\/title> <meta name=”description” content=”Federation \u2014 official website. Learn about our mission, events, gallery and how to contact us. Available in English and Georgian.” \/> <!– Open Graph & Twitter –> <meta property=”og:title” content=”Federation \u2014 Informational Site” \/> <meta property=”og:description” content=”Federation \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"aioseo_notices":[],"yoast_head":"\n