<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Курс Roblox | SmartCoder IT School</title>
    <link rel="icon" href="images/smartcoderemblem.ico" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        #countdown {
            text-align: center;
            font-size: 2rem;
            margin: 20px 0;
            padding: 15px 20px;
            color: #fff;
            background: linear-gradient(45deg, #ff6347, #f39c12, #8e44ad);
            border-radius: 15px;
            border: 2px solid #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            font-weight: bold;
            animation: glow 1.5s infinite;
        }
        @keyframes glow {
            0%, 100% {
                box-shadow: 0 5px 15px rgba(255, 99, 71, 0.7);
            }
            50% {
                box-shadow: 0 5px 15px rgba(255, 255, 0, 0.8);
            }
        }
        
        body {
            position: relative;
            overflow-x: hidden;
            background-color: #121212;
            color: #f1f1f1;
        }
        .snowflake {
            position: absolute;
            top: -10px;
            font-size: 1rem;
            color: #fff;
            opacity: 0.8;
            animation: fall linear infinite;
        }
        .smartcoder {
            font-size: 5rem;
            font-weight: bold;
            color: #f39c12;
            position: relative;
            display: inline-block;
        }
        .smartcoder .hat {
            position: absolute;
            top: -22px; 
            left: -30px; 
            width: 80px;
            transform: rotate(-15deg);
        }
        @keyframes fall {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translateY(110vh);
                opacity: 0.3;
            }
        }
        header {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <header>
        <img src="images/smartcoderemblem.jpg" alt="Smart Coder Emblem" class="logo">
        <h1 class="smartcoder">
            <img src="images/santa-hat.png" alt="Шапка Санты" class="hat">
            Smart<span style="color: #8e44ad;">Coder</span>
        </h1>
        <div class="discount-banner">
            <span style="color: red; font-weight: bold; font-size: 2rem; text-transform: uppercase; letter-spacing: 2px;">ДІЄ ЗНИЖКА!!!</span>
            <div style="font-size: 1.5rem; margin-top: 10px;">🎉 У честь наступаючого Нового Року, у нас діє знижка <strong>20%</strong>!!! 🎉</div>
        </div>        
        <div id="countdown">До Нового року залишилось: <span id="timer"></span></div>
        <button class="scroll-to-contact" onclick="scrollToContact()">Нашi контакти для зв'язку</button>
    </header>    
    <div id="snow-container"></div>
<div class="center-text">
    <h2 class="subtitle">IT-курси для дітей та підлітків з 9 до 13 років</h2>
</div>
<div class="registration-panel"> 
    <h3 class="highlight">Запишіться на БЕЗКОШТОВНИЙ пробний урок</h3>
    <form id="registrationForm">
        <label for="name">Ваше ім'я:</label>
        <input type="text" id="name" name="name" placeholder="Введіть своє ім'я" required>
        
        <label for="phone">Ваш номер телефону:</label>
        <input type="tel" id="phone" name="phone" placeholder="Введіть номер телефону" required>
        
        <div class="checkbox-container">
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">Я підтверджую, що прочитав і згоден з правилами сайту.</label>
        </div>
        
        <p><a href="privacy-policy.html" target="_blank">Політика Конфіденційності</a></p>
        <button type="submit" class="submit-button">Записатись</button>
    </form>
</div>

<div id="thankYouModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; color: white; text-align: center;">
    <div>
        <img src="images/roblox.jpg" alt="Thank You" style="max-width: 300px; width: 100%; margin-bottom: 20px;">
        <h2>Дякуємо за заявку!</h2>
        <p>Наш менеджер скоро з вами зв'яжеться.</p>
        <button onclick="closeModal()" style="margin-top: 20px; padding: 10px 20px; font-size: 16px;">Закрити</button>
    </div>
</div>

<script>
        document.getElementById('registrationForm').addEventListener('submit', function(event) {
            event.preventDefault(); 

            const formData = new FormData(this);

            fetch('https://script.google.com/macros/s/AKfycbzXPJqWLIVrY8QNbAZJcw9PykNOU2FV6p1Wk68ZZmafcOkbMFq--J5AMcCrZYnleRg6Eg/exec', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    document.getElementById('thankYouModal').style.display = 'flex';
                } else {
                    alert('Ошибка при отправке формы. Попробуйте еще раз.');
                }
            })
            .catch(error => {
                console.error('Ошибка:', error);
                alert('Ошибка при отправке формы. Попробуйте еще раз.');
            });
        });

        function closeModal() {
            document.getElementById('thankYouModal').style.display = 'none';
            document.getElementById('registrationForm').reset(); 
        }

        function updateCountdown() {
            const now = new Date();
            const nextYear = new Date(now.getFullYear() + 1, 0, 1);
            const diff = nextYear - now;

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            document.getElementById("timer").innerText = 
                `${days} днів ${hours} годин ${minutes} хвилин ${seconds} секунд`;
        }
        setInterval(updateCountdown, 1000);

        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.className = 'snowflake';
            snowflake.style.left = Math.random() * 100 + 'vw';
            snowflake.style.animationDuration = Math.random() * 10 + 10 + 's';
            snowflake.innerHTML = '❄️';
            document.body.appendChild(snowflake);

            setTimeout(() => snowflake.remove(), 15000);
        }
        setInterval(createSnowflake, 500);
        function scrollToContact() {
    const contactSection = document.querySelector('footer'); 
    contactSection.scrollIntoView({
        behavior: 'smooth'
    });
}
    </script>

<style>
    #thankYouModal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
    }
</style>

<div class="main-content">
    <div class="left-panel info-panel">
        <img src="icons/znakvopr.png" alt="icon" class="icon">
        <h3 class="highlight">Для кого</h3>
        <p>Даний напрям ідеально підходить для тих, хто фанатіє від ігор і хоче навчитися створювати свої власні ігри в які хочеться грати! Платформа Roblox забезпечила своїх користувачів дуже зручним програмним забезпеченням для створення ігор - 5 хвилин і ваша гра вже доступна мільйонам користувачів Roblox. Все що вам треба, це - бажання вчитися, компʼютер та пару вільних годин на тиждень. Всьому іншому ми вас навчимо на нашому курсі.</p>
        <ul class="bold-list">
            <li>Рекомендований вік — 9-12 років</li>
            <li>Рівень підготовки — середній</li>
        </ul>
    </div>
    <div class="right-panel info-panel">
        <img src="icons/brain.png" alt="icon" class="icon">
        <h3 class="highlight">Що будемо вчити</h3>
        <p>«Roblox» - одна із найпопулярніших ігрових платформ у світі. «Roblox Studio» - офіційний компʼютерний додаток від Roblox, за допомогою якого можна створити свою власну кросплатформенну гру та зробити її доступною мільйонам користувачів. Розробка ігор хоч і потребує високої концентрації та відданості своїй справі, але, на відмінну від інших платформ для створення ігор, «Roblox Studio» дуже зручна та інтуїтивно зрозуміла програма. Грати в ігри - цікаво, створювати свої власні - не тільки цікаво, але ще і прибутково.</p>
    </div>
    <div class="bottom-panel info-panel">
        <img src="icons/lyk.png" alt="icon" class="icon">
        <h3 class="highlight">Завдання курсу</h3>
        <ul class="bold-list">
            <li><strong>Навчитися створювати свої власні 3-D моделі</strong> та ознайомитися з особливостями їх створення.</li>
            <li><strong>Ознайомитися з особливостями фізики у Roblox Studio.</strong></li>
            <li><strong>Дізнатися, як правильно працювати з вікнами «Explorer» та «Properties».</strong></li>
            <li><strong>Навчитися основам програмування для створення своїх власних скріптів мовою програмування Lua.</strong></li>
            <li><strong>Дізнатися, як публікувати свою гру у загальний доступ.</strong></li>
        </ul>
    </div>
</div>
<div class="content-section">
    <p class="highlight">Даний курс передбачає</p> 
    <p>Вивчення принципів роботи ігрового двигуна, отримання базових навичок ігрового програмування Lua та отримання базових знань, вивчення принципів роботи ігрового двигуна,</p>
    <p>також отримання базових навичок ігрового програмування Lua та отримання базових знань</p>

    <p class="highlight">Курси створення ігор у Roblox Studio</p>
    <p>Курси програмування Роблокс – це унікальна нагода для дітей стати справжніми творцями ігор на цій платформі. <strong>Заняття в IT-школi SmartCoder</strong> ідеально підійдуть для тих, хто хоче освоїти програмування, а також отримати навички, необхідні для розвитку власної креативності та фантазії. Наша команда професійних викладачів та менторів зробить усе можливе, щоб допомогти кожному учню.</p>
</div>
<div class="content-section">
    <img src="images/robloxkid.jpg" alt="Roblox Kid" class="large-image">
</div>
<div class="content-section">
    <p class="highlight">З чого починається навчання Роблокс</p> 
    <p>Коли йдеться про створення ігор у Roblox, молоді розробники просто не знають, з чого почати. Адже це складний та багатокроковий процес, що вимагає знання не лише самої платформи, а й основ програмування. Однак не варто лякатися. На курсах Roblox в IT-школi SmartCoder ми навчимо дитину всім необхідним навичкам, починаючи від основ програмування, закінчуючи створенням власної гри.</p>
    <p><strong>Курси доступні як для початківців, так і для більш розвинених у програмуванні дітей, які хочуть покращити свої навички. Ми гарантуємо індивідуальний підхід до кожного учня, практичні заняття та наставництво професіоналів у цій галузі.</strong> Разом ми зможемо створити захоплюючий та барвистий ігровий світ.</p>
</div>
<div class="content-section">
    <img src="images/roblox.jpg" alt="Roblox World" class="large-image">
</div>
<div class="content-section">
    <p class="highlight">Чому навчать уроки з Роблокс Студіо</p>
    <p>На нашому курсі створення ігор в Roblox діти можуть отримати наступні знання та вміння:</p>
    <ul class="bold-list">
        <li><strong>Базові концепції</strong> – основи програмування за допомогою Roblox Studio.</li>
        <li><strong>Розробка ігрового простору</strong> – дизайн рівнів та персонажів, створення функцій.</li>
        <li><strong>Робота з графічними редакторами</strong> – промальовування власних текстур та моделей у Roblox Studio.</li>
        <li><strong>Критичне мислення</strong> – створення ігор потребує нестандартного мислення та вирішення проблем, і ми навчимо дітей застосовувати ці навички у контексті розробки.</li>
        <li><strong>Комунікація, презентація та робота в команді</strong> – важливі навички у подальшому професійному житті.</li>
    </ul>
    <p>Наші курси Roblox Studio дають повне уявлення про програмування ігор за допомогою цього інструменту.</p>
    <p><strong>Ми надаємо гнучкий графік занять та індивідуальний підхід до кожного учня.</strong> Уроки Roblox Studio будуть інтерактивними та практичними. Ми навчимо створювати свої ігри, проектувати рівні, додавати елементи управління та створювати персонажів.</p>
    <p>Курси Roblox - це чудова можливість для дітей не лише навчитися програмування, але й виявити свою креативність та фантазію. <strong>Учні отримають навички, які можуть використовувати не тільки для створення ігор, а й публікації в Marketplace.</strong> Не проґавте шанс дати своїм дітям унікальний досвід, який буде їм корисний у майбутньому! <strong>Запишіться на курси IT школи SmartCoder</strong> прямо зараз і пориньте у захоплюючий світ програмування та розробки ігор в Roblox!</p>
</div>
<div class="content-section">
    <img src="images/girl.jpg" alt="Girl with Roblox" class="large-image">
</div>
<footer>
    <div class="contact-info">
      <h3>Наші контакти для зв'язку</h3>
      <ul>
        <li><strong>Телефон:</strong> +380 66 407 6374</li>
        <li><strong>Email:</strong> smartcoderr1@gmail.com</li>
      </ul>
    </div>
    <div class="copyright">
      <p>&copy; 2024 SmartCoder IT School. Всі права захищені.</p>
    </div>
  </footer>  
</body>
</html>