<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>SPATA × GRATIA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {
margin:0;
font-family:Arial, sans-serif;
background:#0b0f08;
color:#ddd
}

/* ===== HEADER ===== */

header {
background:#161c10;
border-bottom:2px solid #6b8e23;
padding:10px 0;
position:fixed;
width:100%;
z-index:1000;
}

nav {
display:flex;
justify-content:center;
gap:20px;
}

nav a {
color:#b6d96c;
text-decoration:none;
font-weight:bold;
}

/* ===== HERO ===== */

.hero {
height:100vh;
background:
linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.85)),
url("banner.jpg");
background-size:cover;
background-position:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding-top:90px;
}

.logo {
width:220px;
margin-bottom:20px;
filter: drop-shadow(0 0 10px black);
}

.hero h1 {
color:#b6d96c;
font-size:40px;
margin:10px 0;
}

.hero p {
max-width:700px;
font-size:18px;
opacity:.9;
}

/* ===== BUTTONS ===== */

.btn-group {
margin-top:25px;
}

.btn {
background:linear-gradient(#7fa52c,#4c6414);
border:1px solid #9acd32;
padding:14px 30px;
color:#fff;
font-weight:bold;
border-radius:4px;
cursor:pointer;
margin:8px;
box-shadow:0 0 10px rgba(0,0,0,.6);
}

.btn:hover {
filter:brightness(1.2);
transform:scale(1.05);
}

/* ===== STATS ===== */

.stats {
display:flex;
justify-content:center;
gap:40px;
background:#11160c;
padding:40px 10px;
border-top:2px solid #6b8e23;
border-bottom:2px solid #6b8e23;
}

.stat {
text-align:center;
}

.stat h2 {
color:#9acd32;
margin:0;
}

/* ===== SECTION ===== */

section {
padding:70px 20px;
max-width:1200px;
margin:auto;
}

.title {
text-align:center;
color:#9acd32;
margin-bottom:30px;
}

/* ===== GALLERY ===== */

.gallery {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
}

.card {
background:#141a0e;
border:1px solid #6b8e23;
padding:10px;
}

.card img {
width:100%;
border-radius:4px;
}

/* ===== FOOTER ===== */

footer {
background:#050703;
color:#666;
text-align:center;
padding:15px;
font-size:13px;
}

</style>
.langBtn {
background:none;
border:1px solid #6b8e23;
color:#b6d96c;
padding:6px 10px;
cursor:pointer;
font-weight:bold;
border-radius:3px;
}

.langBtn:hover {
background:#6b8e23;
color:black;
}
</head>

<body>

<header>
<nav>
<a id="navHome" href="#">Головна</a>
<a id="navGallery" href="#gallery">Галерея</a>
<a id="navDonate" href="#donate">Донат</a>
<a id="navContact" href="#contact">Зв'язок з нами</a>

<button onclick="setLang('ua')" class="langBtn">UA</button>
<button onclick="setLang('en')" class="langBtn">EN</button>
</nav>
</header>

<!-- HERO -->

<div class="hero">

<img src="logo.png" class="logo">

<h1 id="heroTitle">Благодійний фонд GRATIA</h1>

<p id="heroText">
«Допомагаємо тим, хто захищає наше сьогодні.»<br>
Вишивка, шеврони, брендування одягу для ЗСУ та волонтерів
</p>

<div class="btn-group">

<button class="btn" onclick="donate()" id="donateBtn">
❤ ПІДТРИМАТИ ФОНД
</button>

</div>

</div>

<!-- STATS -->

<div class="stats">

<div class="stat">
<h2>0+</h2>
<p>Комплектів одягу</p>
</div>

<div class="stat">
<h2>0+</h2>
<p>Дронів</p>
</div>

<div class="stat">
<h2>0+</h2>
<p>Шевронів</p>
</div>

</div>

<!-- DONATE -->

<section id="donate">

<h2 class="title" id="donateTitle">Підтримати фонд</h2>

<center>

<button class="btn" onclick="donateAmount(50)">50 ₴</button>
<button class="btn" onclick="donateAmount(100)">100 ₴</button>
<button class="btn" onclick="donateAmount(200)">200 ₴</button>

<br><br>

<input id="custom" type="number" placeholder="Інша сума" style="padding:10px;border-radius:5px;border:none;">

<br><br>

<button class="btn" onclick="customDonate()">ПЕРЕЙТИ ДО ОПЛАТИ</button>

</center>

</section>

<!-- GALLERY -->

<section id="gallery">

<h2 class="title" id="galleryTitle">Галерея робіт SPATA</h2>

<div class="gallery">

<div class="card">
<img src="https://via.placeholder.com/300">
<p>Шеврон Ukraine</p>
</div>

<div class="card">
<img src="https://via.placeholder.com/300">
<p>SPATA Tactical</p>
</div>

<div class="card">
<img src="https://via.placeholder.com/300">
<p>Демон Patch</p>
</div>

</div>

</section>

<section id="contact">

<h2 class="title" id="contactTitle">Звʼязок з фондом</h2>

<center>

<div class="contact-box">

<a class="contact-btn" href="tel:+380XXXXXXXXX">
📞 Телефон
</a>

<a class="contact-btn" target="_blank" href="https://t.me/USERNAME">
💬 Telegram
</a>

<a class="contact-btn" target="_blank" href="https://facebook.com/USERNAME">
📘 Facebook
</a>

<a class="contact-btn" target="_blank" href="https://instagram.com/USERNAME">
📸 Instagram
</a>

<a class="contact-btn" href="mailto:email@example.com">
✉ Email
</a>

</div>

</center>

</section>
<footer>
© 2026 SPATA × GRATIA
</footer>

<script>
function setLang(lang){

if(lang==="en"){

navHome.innerText="Home";
navGallery.innerText="Gallery";
navDonate.innerText="Donate";

heroTitle.innerText="GRATIA Charity Foundation";
heroText.innerHTML="SYMBOLS OF STRENGTH — HELPING HEROES<br>Embroidery, patches and branding for Ukrainian Army";

orderBtn.innerText="MAKE ORDER";
donateBtn.innerText="❤ SUPPORT FOUNDATION";

donateTitle.innerText="Support Foundation";
galleryTitle.innerText="SPATA Gallery";

}else{

navHome.innerText="Головна";
navGallery.innerText="Галерея";
navDonate.innerText="Донат";

heroTitle.innerText="Благодійний фонд GRATIA";
heroText.innerHTML="СИМВОЛИ СИЛИ — ДОПОМОГА ГЕРОЯМ<br>Вишивка, шеврони, брендування одягу для ЗСУ та волонтерів";

orderBtn.innerText="ЗРОБИТИ ЗАМОВЛЕННЯ";
donateBtn.innerText="❤ ПІДТРИМАТИ ФОНД";

donateTitle.innerText="Підтримати фонд";
galleryTitle.innerText="Галерея робіт SPATA";

}

}
nd.monobank.ua/ВАШ_MONO_LINK";

function donate(){
window.open(monoLink,"_blank");
}

function donateAmount(sum){
window.open(monoLink+"?amount="+sum,"_blank");
}

function customDonate(){
let v = document.getElementById("custom").value;