http://veselkova-kramnicja.mozello.com/blog-4-1/ Веселкова Крамниця - Блог 4 http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5207490/mj-pdsumok-2025-roku Tue, 10 Feb 2026 14:15:00 +0000 оооооооооооооо<hr class="moze-more-divider"><p>1</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій Підсумок 2025 — Портфоліо</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f8f9fa; color: #333; } header { background: #007bff; color: white; padding: 40px 20px; text-align: center; } section { padding: 40px 20px; max-width: 900px; margin: auto; } .btn { display: inline-block; background: #007bff; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; } .cards { display: flex; gap: 20px; flex-wrap: wrap; } .card { background: white; border-radius: 8px; padding: 20px; flex: 1 1 250px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } footer { text-align: center; padding: 20px; background: #e9ecef; } </style> <header> <h1>Мій Підсумок 2025 року</h1> <p>Огляд досягнень, проєктів, навичок та планів</p> <a href="#contact" class="btn">Звʼязатись зі мною</a> </header> <section id="about"> <h2>Про Мене</h2> <p>Мій 2025 рік був насичений: я створив кілька сайтів і почав вивчати штучний інтелект. Це був майже вдалий рік з новими знаннями та результатами.</p> </section> <section id="achievements"> <h2>Досягнення</h2> <div class="cards"> <div class="card"> <h3>3 створені сайти</h3> <p>Я створив три сайти за 2025 рік, включно з:</p> <ul> <li>Музей українського генія</li> <li>Навчання читанню</li> <li>Особлива школа для програмування</li> </ul> </div> <div class="card"> <h3>Почав вивчати ШІ</h3> <p>Розпочав серйозне вивчення ШІ — AI генерація текстів та коду.</p> </div> <div class="card"> <h3>Створив ПЗ</h3> <p>Розробив кілька програм:</p> <ul> <li>для читання ЖС</li> <li>для друку шрифтом Веселкової Школи</li> <li>логічні ігри</li> </ul> </div> </div> </section> <section id="skills"> <h2>Навички</h2> <ul> <li>HTML/CSS — базовий рівень</li> <li>Створення простих веб-сайтів</li> <li>ШІ генерація (ChatGPT, AI інструменти)</li> <li>Розробка простих програм</li> </ul> </section> <section id="projects"> <h2>Проєкти</h2> <div class="cards"> <div class="card"> <h3>Музей українського генія</h3> <p>Сайт-демонстрація творчості, оформлений у зручному стилі.</p> <a href="https://muzej-ung.mozello.shop" target="_blank" class="btn">Переглянути</a> </div> <div class="card"> <h3>Навчання читанню</h3> <p>Корисний ресурс для початківців читачів.</p> <a href="https://margo.mozello.shop" target="_blank" class="btn">Переглянути</a> </div> <div class="card"> <h3>Особлива школа</h3> <p>Сайт для навчання програмуванню.</p> <a href="https://osobliva-shkola.mozello.shop" target="_blank" class="btn">Переглянути</a> </div> </div> </section> <section id="contact"> <h2>Контакти</h2> <p>Пишіть мені, щоб обговорити співпрацю або проєкт!</p> <p>Email: <a href="mailto:твій_email@example.com">твій_email@example.com</a></p> </section> <footer> <p>© 2026 Твоє Імʼя</p> </footer> http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5203001/5 Sun, 01 Feb 2026 12:01:00 +0000 мої вебексперимегти<hr class="moze-more-divider"><p>5</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Архітектура Майбутнього: Спільноти, Свобода та Кластери</title> <style> :root { --yellow: #FFEB3B; --blue: #03A9F4; --green: #4CAF50; --dark: #111; --light: #fdfdfd; --bg-accent: #f0f4f8; --light-blue: #E3F2FD; --light-green: #E8F5E9; } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, sans-serif; line-height: 1.7; color: var(--dark); background-color: var(--light); margin: 0; padding: 0; overflow-x: hidden; } /* --- Article Layout --- */ .container { max-width: 1900px; margin: 60px auto; padding: 0 20px; } h1 { font-size: 3rem; color: var(--dark); text-align: center; margin-bottom: 40px; } h2 { font-size: 2rem; color: var(--green); border-left: 8px solid var(--blue); padding-left: 20px; margin-top: 60px; margin-bottom: 20px; } .dropcap { float: left; font-size: 85px; line-height: 1; padding-right: 11px; color: var(--blue); font-weight: 900; font-family: serif; } .img-left { float: left; margin: 0 11px 11px 0; max-width: 350px; border-radius: 4px; } .img-right { float: right; margin: 0 0 11px 11px; max-width: 350px; border-radius: 4px; } .quote { background: var(--light-blue); border-left: 10px solid var(--blue); padding: 30px; margin: 40px 0; font-style: italic; font-size: 1.3rem; color: #01579b; } .summary { background: var(--light-green); padding: 20px; margin: 20px 0; border-radius: 8px; font-weight: bold; } .clearfix::after { content: ""; clear: both; display: table; } .benefit-section ol { list-style-type: decimal; padding-left: 40px; } footer { text-align: center; padding: 20px; background: var(--bg-accent); margin-top: 60px; } /* --- Split-Screen Styles --- */ .split-container { position: relative; width: 100%; height: auto; } .bottom-layer, .top-layer { position: absolute; top: 0; left: 0; width: 100%; height: auto; background: white; color: var(--dark); transition: clip-path 0.1s ease; z-index: 1; } .top-layer { clip-path: inset(0 50% 0 0); filter: invert(100%) hue-rotate(180deg); z-index: 2; pointer-events: none; } .handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: var(--yellow); cursor: ew-resize; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; } .handle::before { content: '< >'; font-size: 1.5rem; color: var(--dark); background: var(--yellow); padding: 10px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); } /* Responsive adjustments */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .quote { font-size: 1.2rem; } .handle { width: 20px; } .handle::before { font-size: 1.2rem; padding: 8px; } } /* Optional themes button */ .theme-buttons { position: fixed; top: 20px; right: 20px; z-index: 20; } .theme-buttons button { margin: 5px; padding: 10px; cursor: pointer; } /* Hero Section */ .hero { height: 80vh; width: 100%; display: flex; align-items: center; justify-content: center; background: white; user-select: none; overflow: hidden; border-bottom: 8px solid var(--yellow); position: relative; } .hero-content { width: 100%; text-align: center; font-size: 5vw; font-weight: 900; text-transform: uppercase; line-height: 1; padding: 0 5%; } </style> <div class="split-container"> <div class="bottom-layer"> <div class="hero"> <div class="hero-content"> Архітектура Майбутнього </div> </div> <div class="container"> <h1>Архітектура Майбутнього: Спільноти, Свобода та Кластери</h1> <div class="clearfix"> <span class="dropcap">В</span>ступ: [cite_start]Ця стаття — синтез ідей з виступів на CEO Club Ukraine, ILI та "Садок Вишневий"[cite: 1-10]. [cite_start]Вона про те, як у світі війни та невизначеності створювати справжні спільноти, чому свобода — це основа безпеки, та як геополітика формує наше майбутнє[cite: 12, 15]. </div> <h2>1. Спільнота як мікрогрупа довіри</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=500" class="img-left" alt="Спільнота"> [cite_start]Справжня спільнота — це не масовий івент, а мікрогрупа людей, об'єднаних ідеєю[cite: 45, 182]. [cite_start]Це як клуби типу CEO Club Ukraine, де люди збираються для обміну знаннями, а не для "нетворкінгу"[cite: 190, 191]. [cite_start]У таких групах панує довіра: люди допомагають одне одному, бо вірять у спільну місію[cite: 201]. </div> <div class="quote">"Спільнота — це коли ти можеш попросити про допомогу, не боячись відмови."</div> <div class="summary">Висновок: Створюйте мікрогрупи на базі ідей, а не розміру.</div> <h2>2. Свобода як основа безпеки</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1504384302481-9a4f4b16c552?w=500" class="img-right" alt="Свобода"> [cite_start]У війні свобода — це не розкіш, а необхідність[cite: 215]. [cite_start]Держава повинна захищати, але не контролювати економіку. [cite_start]Приватна ініціатива — ключ до перемоги, як показує досвід Ізраїлю[cite: 220, 225]. </div> <div class="quote">"Свобода — це коли ти можеш будувати, не питаючи дозволу."</div> <div class="summary">Висновок: Без економічної свободи немає безпеки.</div> <h2>3. Освіта як інструмент суб'єктності</h2> <div class="clearfix"> [cite_start]Сучасна освіта — це не диплом, а навички підприємництва та критичного мислення[cite: 250]. [cite_start]ILI вчить бути суб'єктом, а не об'єктом історії[cite: 255]. </div> <div class="summary">Висновок: Вчіться економіці та бізнесу, щоб стати творцем свого майбутнього.</div> <h2>4. Геополітика як боротьба кластерів</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1504384302481-9a4f4b16c552?w=500" class="img-left" alt="Геополітика"> [cite_start]Світ — це конкуренція геополітичних кластерів[cite: 300]. [cite_start]Кожен кластер прагне домінування через логістику та технології[cite: 305]. </div> <div class="summary">Висновок: Розуміння геополітики — ключ до стратегічного мислення.</div> <h2>5. Роль України в новому світі</h2> <div class="clearfix"> [cite_start]Україна — центр Балто-Чорноморського кластеру[cite: 350]. [cite_start]Наша сила в партнерстві з сусідами та англосаксами[cite: 355]. </div> <div class="summary">Висновок: Ми будуємо новий світ через свободу та дію.</div> <h2>6. Економіка майбутнього</h2> <div class="clearfix"> [cite_start]Майбутнє — за автономними кластерами з власними технологіями[cite: 400]. [cite_start]Глобалізація закінчується, починається ера регіональної конкуренції[cite: 405]. </div> <div class="summary">Висновок: Адаптуйтеся до нового порядку.</div> <h2>7. Руйнація глобальної економіки</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=500" class="img-left" alt="Кластери"> Сьогодні ми спостерігаємо руйнацію єдиного економічного простору планети. [cite_start]Дональд Трамп, запроваджуючи митні тарифи, фактично будує новий світовий порядок, розділяючи світ на автономні кластери[cite: 355, 381]. [cite_start]Це реакція на стагнацію: за останні 35 років не було фундаментальних наукових відкриттів через надмірну глобальну монополізацію[cite: 364, 365]. </div> <div class="summary">Висновок: Світ переходить до конкуренції макрорегіонів із власними технологічними укладами.</div> <h2>8. Європейські транспортні коридори</h2> <div class="clearfix"> [cite_start]Європа географічно розділена на чотири природні кластери[cite: 559]. [cite_start]Це Атлантичний (Англія-Франція), Рейн-Дунайський (Німеччина), Російський (Волга) та Український (Дніпро)[cite: 560, 563, 564, 601]. Кожен з них бореться за логістичне домінування. [cite_start]Саме через це конкуренти століттями намагалися заблокувати розвиток українського шляху, щоб не допустити появи сильного гравця[cite: 607, 608]. </div> <div class="summary">Висновок: Геополітика — це боротьба транспортних коридорів за право бути оператором обміну.</div> <h2>9. Україна як локомотив Балто-Чорноморського кластеру</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=500" class="img-right" alt="Україна"> [cite_start]Ця війна завершиться відновленням нашого геополітичного кластеру[cite: 612]. [cite_start]Це шлях "із варяг у греки", що об'єднує Балтику та Чорне море через Польщу, Литву, Білорусь та Україну[cite: 600, 632]. [cite_start]Створення такого окремого макрорегіону вигідно і англосаксам, адже це врівноважує вплив Німеччини та Росії[cite: 613, 616]. [cite_start]У нас з'явилися нові справжні друзі — Данія та Норвегія, які вчинками доводять віру в наш успіх[cite: 636, 642]. </div> <div class="summary">Висновок: Суб'єктність України лежить у створенні власної системи партнерства між морями.</div> <section class="benefit-section"> <h2>Яка від цього користь читачеві?</h2> <ol> [cite_start]<li><b>Для лідерів:</b> Ви отримаєте розуміння того, що справжня спільнота будується на ідеї та мікрогрупах довіри, а не на масових івентах[cite: 45, 182].</li> <li><b>Для бізнесу:</b> Ви усвідомите, що економічна свобода та приватна ініціатива — це єдиний шлях до безпеки та процвітання в умовах війни.</li> [cite_start]<li><b>Для стратегів:</b> Ви побачите велику геополітичну картину, де Україна — це не "задвірки", а центр нового потужного кластеру[cite: 616, 617].</li> <li><b>Для кожного:</b> Розуміння того, як вивчати економіку та підприємництво, допоможе вам стати суб'єктом, а не об'єктом у світі, що швидко змінюється.</li> </ol> </section> <footer> © 2026 Довгочит про Спільноти, Свободу та Геополітику. За матеріалами CEO Club Ukraine, ILI та Садок Вишневий. </footer> </div> </div> <div class="top-layer"> <div class="hero"> <div class="hero-content"> Архітектура Майбутнього </div> </div> <div class="container"> <h1>Архітектура Майбутнього: Спільноти, Свобода та Кластери</h1> <div class="clearfix"> <span class="dropcap">В</span>ступ: [cite_start]Ця стаття — синтез ідей з виступів на CEO Club Ukraine, ILI та "Садок Вишневий"[cite: 1-10]. [cite_start]Вона про те, як у світі війни та невизначеності створювати справжні спільноти, чому свобода — це основа безпеки, та як геополітика формує наше майбутнє[cite: 12, 15]. </div> <h2>1. Спільнота як мікрогрупа довіри</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=500" class="img-left" alt="Спільнота"> [cite_start]Справжня спільнота — це не масовий івент, а мікрогрупа людей, об'єднаних ідеєю[cite: 45, 182]. [cite_start]Це як клуби типу CEO Club Ukraine, де люди збираються для обміну знаннями, а не для "нетворкінгу"[cite: 190, 191]. [cite_start]У таких групах панує довіра: люди допомагають одне одному, бо вірять у спільну місію[cite: 201]. </div> <div class="quote">"Спільнота — це коли ти можеш попросити про допомогу, не боячись відмови."</div> <div class="summary">Висновок: Створюйте мікрогрупи на базі ідей, а не розміру.</div> <h2>2. Свобода як основа безпеки</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1504384302481-9a4f4b16c552?w=500" class="img-right" alt="Свобода"> [cite_start]У війні свобода — це не розкіш, а необхідність[cite: 215]. [cite_start]Держава повинна захищати, але не контролювати економіку. [cite_start]Приватна ініціатива — ключ до перемоги, як показує досвід Ізраїлю[cite: 220, 225]. </div> <div class="quote">"Свобода — це коли ти можеш будувати, не питаючи дозволу."</div> <div class="summary">Висновок: Без економічної свободи немає безпеки.</div> <h2>3. Освіта як інструмент суб'єктності</h2> <div class="clearfix"> [cite_start]Сучасна освіта — це не диплом, а навички підприємництва та критичного мислення[cite: 250]. [cite_start]ILI вчить бути суб'єктом, а не об'єктом історії[cite: 255]. </div> <div class="summary">Висновок: Вчіться економіці та бізнесу, щоб стати творцем свого майбутнього.</div> <h2>4. Геополітика як боротьба кластерів</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1504384302481-9a4f4b16c552?w=500" class="img-left" alt="Геополітика"> [cite_start]Світ — це конкуренція геополітичних кластерів[cite: 300]. [cite_start]Кожен кластер прагне домінування через логістику та технології[cite: 305]. </div> <div class="summary">Висновок: Розуміння геополітики — ключ до стратегічного мислення.</div> <h2>5. Роль України в новому світі</h2> <div class="clearfix"> [cite_start]Україна — центр Балто-Чорноморського кластеру[cite: 350]. [cite_start]Наша сила в партнерстві з сусідами та англосаксами[cite: 355]. </div> <div class="summary">Висновок: Ми будуємо новий світ через свободу та дію.</div> <h2>6. Економіка майбутнього</h2> <div class="clearfix"> [cite_start]Майбутнє — за автономними кластерами з власними технологіями[cite: 400]. [cite_start]Глобалізація закінчується, починається ера регіональної конкуренції[cite: 405]. </div> <div class="summary">Висновок: Адаптуйтеся до нового порядку.</div> <h2>7. Руйнація глобальної економіки</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=500" class="img-left" alt="Кластери"> Сьогодні ми спостерігаємо руйнацію єдиного економічного простору планети. [cite_start]Дональд Трамп, запроваджуючи митні тарифи, фактично будує новий світовий порядок, розділяючи світ на автономні кластери[cite: 355, 381]. [cite_start]Це реакція на стагнацію: за останні 35 років не було фундаментальних наукових відкриттів через надмірну глобальну монополізацію[cite: 364, 365]. </div> <div class="summary">Висновок: Світ переходить до конкуренції макрорегіонів із власними технологічними укладами.</div> <h2>8. Європейські транспортні коридори</h2> <div class="clearfix"> [cite_start]Європа географічно розділена на чотири природні кластери[cite: 559]. [cite_start]Це Атлантичний (Англія-Франція), Рейн-Дунайський (Німеччина), Російський (Волга) та Український (Дніпро)[cite: 560, 563, 564, 601]. Кожен з них бореться за логістичне домінування. [cite_start]Саме через це конкуренти століттями намагалися заблокувати розвиток українського шляху, щоб не допустити появи сильного гравця[cite: 607, 608]. </div> <div class="summary">Висновок: Геополітика — це боротьба транспортних коридорів за право бути оператором обміну.</div> <h2>9. Україна як локомотив Балто-Чорноморського кластеру</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=500" class="img-right" alt="Україна"> [cite_start]Ця війна завершиться відновленням нашого геополітичного кластеру[cite: 612]. [cite_start]Це шлях "із варяг у греки", що об'єднує Балтику та Чорне море через Польщу, Литву, Білорусь та Україну[cite: 600, 632]. [cite_start]Створення такого окремого макрорегіону вигідно і англосаксам, адже це врівноважує вплив Німеччини та Росії[cite: 613, 616]. [cite_start]У нас з'явилися нові справжні друзі — Данія та Норвегія, які вчинками доводять віру в наш успіх[cite: 636, 642]. </div> <div class="summary">Висновок: Суб'єктність України лежить у створенні власної системи партнерства між морями.</div> <section class="benefit-section"> <h2>Яка від цього користь читачеві?</h2> <ol> [cite_start]<li><b>Для лідерів:</b> Ви отримаєте розуміння того, що справжня спільнота будується на ідеї та мікрогрупах довіри, а не на масових івентах[cite: 45, 182].</li> <li><b>Для бізнесу:</b> Ви усвідомите, що економічна свобода та приватна ініціатива — це єдиний шлях до безпеки та процвітання в умовах війни.</li> [cite_start]<li><b>Для стратегів:</b> Ви побачите велику геополітичну картину, де Україна — це не "задвірки", а центр нового потужного кластеру[cite: 616, 617].</li> <li><b>Для кожного:</b> Розуміння того, як вивчати економіку та підприємництво, допоможе вам стати суб'єктом, а не об'єктом у світі, що швидко змінюється.</li> </ol> </section> <footer> © 2026 Довгочит про Спільноти, Свободу та Геополітику. За матеріалами CEO Club Ukraine, ILI та Садок Вишневий. </footer> </div> </div> <div class="handle"></div> </div> <div class="theme-buttons"> <button onclick="setTheme('black-white')" fdprocessedid="zwm0ca">Чорно-білий</button> <button onclick="setTheme('gradient')" fdprocessedid="up7mt">Градієнт</button> <button onclick="setTheme('colored')" fdprocessedid="3xv9c">Кольоровий</button> </div> <script> const container = document.querySelector('.split-container'); const bottomLayer = document.querySelector('.bottom-layer'); const topLayer = document.querySelector('.top-layer'); const handle = document.querySelector('.handle'); let isDragging = false; let startX = 0; let currentPosition = 50; function clampPosition(pos) { return Math.max(10, Math.min(90, pos)); } function updatePosition(pos) { currentPosition = clampPosition(pos); topLayer.style.clipPath = `inset(0 ${100 - currentPosition}% 0 0)`; handle.style.left = `${currentPosition}%`; } function startDrag(e) { isDragging = true; startX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX; document.body.style.cursor = 'ew-resize'; } function drag(e) { if (!isDragging) return; const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX; const delta = ((clientX - startX) / container.offsetWidth) * 100; updatePosition(currentPosition + delta); startX = clientX; } function endDrag() { isDragging = false; document.body.style.cursor = 'default'; } handle.addEventListener('mousedown', startDrag); handle.addEventListener('touchstart', startDrag, { passive: true }); window.addEventListener('mousemove', drag); window.addEventListener('touchmove', drag, { passive: false }); window.addEventListener('mouseup', endDrag); window.addEventListener('touchend', endDrag); handle.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false }); updatePosition(50); function updateHeights() { const maxHeight = Math.max(bottomLayer.offsetHeight, topLayer.offsetHeight); container.style.height = `${maxHeight}px`; handle.style.height = `${maxHeight}px`; } window.addEventListener('load', () => { updateHeights(); container.style.opacity = 0; container.style.transition = 'opacity 1s ease'; setTimeout(() => container.style.opacity = 1, 100); }); window.addEventListener('resize', updateHeights); function setTheme(theme) { const bottoms = document.querySelectorAll('.bottom-layer'); const tops = document.querySelectorAll('.top-layer'); bottoms.forEach(bottom => { if (theme === 'black-white') { bottom.style.backgroundColor = '#000'; } else if (theme === 'gradient') { bottom.style.background = 'linear-gradient(to right, #000, #333)'; } else if (theme === 'colored') { bottom.style.backgroundColor = '#1a237e'; } }); tops.forEach(top => { if (theme === 'black-white') { top.style.filter = 'invert(100%) hue-rotate(180deg)'; } else if (theme === 'gradient') { top.style.filter = 'invert(100%) hue-rotate(180deg)'; } else if (theme === 'colored') { top.style.filter = 'invert(100%) hue-rotate(180deg) saturate(2)'; } }); updateHeights(); } </script> http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5202964/4 Sun, 01 Feb 2026 09:59:00 +0000 ллллллллллллллллллл<hr class="moze-more-divider"><p>4</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Архітектура Майбутнього: Спільноти, Свобода та Кластери</title> <style> :root { --yellow: #FFEB3B; --blue: #03A9F4; --green: #4CAF50; --dark: #111; --light: #fdfdfd; --bg-accent: #f0f4f8; } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, sans-serif; line-height: 1.7; color: var(--dark); background-color: var(--light); margin: 0; padding: 0; overflow-x: hidden; } /* --- Homage Style Slider --- */ .hero-slider { position: relative; height: 80vh; width: 100%; display: flex; align-items: center; justify-content: center; background: white; user-select: none; overflow: hidden; border-bottom: 8px solid var(--yellow); } .slider-content { position: absolute; width: 100%; text-align: center; font-size: 5vw; font-weight: 900; text-transform: uppercase; line-height: 1; padding: 0 5%; } .top-layer { background: var(--dark); color: white; clip-path: inset(0 50% 0 0); z-index: 2; } .bottom-layer { background: white; color: var(--dark); z-index: 1; } .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: var(--yellow); z-index: 3; cursor: ew-resize; } .handle::after { content: '< >'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--yellow); color: var(--dark); padding: 10px; border-radius: 50%; font-weight: bold; font-size: 14px; } /* --- Article Layout --- */ .container { max-width: 1900px; margin: 60px auto; padding: 0 20px; } h1 { font-size: 3rem; color: var(--dark); text-align: center; margin-bottom: 40px; } h2 { font-size: 2rem; color: var(--green); border-left: 8px solid var(--blue); padding-left: 20px; margin-top: 60px; margin-bottom: 20px; } .dropcap { float: left; font-size: 85px; line-height: 1; padding-right: 11px; color: var(--blue); font-weight: 900; font-family: serif; } .img-left { float: left; margin: 0 11px 11px 0; max-width: 350px; border-radius: 4px; } .img-right { float: right; margin: 0 0 11px 11px; max-width: 350px; border-radius: 4px; } .quote { background: var(--light-blue); border-left: 10px solid var(--blue); padding: 30px; margin: 40px 0; font-style: italic; font-size: 1.3rem; color: #01579b; } .summary { background: var(--light-green); padding: 20px; border-radius: 8px; border-bottom: 4px solid var(--green); margin-top: 20px; font-weight: 600; } .benefit-section { background: var(--light-yellow); padding: 40px; border: 4px dashed var(--yellow); border-radius: 12px; margin-top: 80px; } .clearfix::after { content: ""; clear: both; display: table; } footer { text-align: center; padding: 40px; color: #777; font-size: 0.9rem; } </style> <div class="hero-slider" id="slider"> <div class="slider-content bottom-layer"> Ми будуємо світ <br> через свободу <br> та дію. </div> <div class="slider-content top-layer" id="topLayer"> Ми будуємо світ <br> через свободу <br> та дію. </div> <div class="handle" id="handle"></div> </div> <div class="container"> <h1>Архітектура Майбутнього: Спільноти, Свобода та Кластери</h1> <div class="clearfix"> <span class="dropcap">С</span>ьогодні ми живемо в епоху, коли старі глобальні структури руйнуються, поступаючись місцем новим формам соціальної та економічної організації. Від закритих бізнес-клубів до приватних систем безпеки та геополітичних макрорегіонів — світ стає складнішим, але водночас надає більше можливостей для суб’єктності. У цьому довгочиті ми дослідимо, як створювати живі спільноти, чому економічна свобода є безальтернативною та яке місце посяде Україна у новій кластерній системі планети. </div> <h2>1. Ідея — це енергія майбутнього</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500" class="img-right" alt="Ідея"> Спільнота починається не з контактів, а з ідеї, яка відповідає на питання "Навіщо?". [cite_start]Це тріо-ядро концепції: ідея, потреби та люди[cite: 35, 36]. Якщо домінує лише потреба — це ринок; якщо лише люди без ідеї — це тусовка. [cite_start]Лише сильна візія здатна вдихнути життя в організацію та зробити її стійкою до випробувань часом[cite: 45]. </div> <div class="summary">Висновок: Ідея є домінуючим фактором, що перетворює групу людей на інституцію.</div> <h2>2. Ядро спільноти: Місійність та цінності</h2> <div class="clearfix"> Перші 10-20 людей — це фундамент всієї будівлі. [cite_start]Вони задають рівень енергії та стандарти[cite: 53, 54]. [cite_start]У ядро важливо підбирати пасіонарних, місійних людей, які резонують з великою ідеєю[cite: 58]. [cite_start]Критерії відбору тут мають бути жорсткими, адже вони визначають "душу" спільноти на десятиліття вперед[cite: 82, 83]. </div> <div class="summary">Висновок: Якість фундаменту важливіша за динаміку росту на старті.</div> <h2>3. Правила гри: Від хаосу до інституції</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1454165833767-027eeef1593e?w=500" class="img-left" alt="Правила"> [cite_start]Спільнота — це живий організм, що еволюціонує[cite: 87, 88]. [cite_start]Правила мають народжуватися з життя органічно, а не паралізувати розвиток бюрократією[cite: 96, 97]. [cite_start]Вони перетворюють хаос у енергію, а нетворкінгову масу — в інституцію[cite: 93]. [cite_start]Особливу роль відіграє гігієна стосунків: механізми боротьби з токсичністю, такі як Етичний комітет, допомагають зберегти здорову атмосферу[cite: 136, 138]. </div> <div class="summary">Висновок: Правила повинні підтримувати культуру довіри, а не ламати її.</div> <h2>4. Довіра — системний капітал</h2> <div class="clearfix"> Довіру треба вирощувати цілеспрямовано. [cite_start]Вона базується на прозорості прийняття рішень та спільній взаємодії[cite: 164, 168]. [cite_start]Найкращий інструмент для цього — міні-групи (8-12 людей), де створюється інтимна обстановка для глибоких контактів[cite: 180, 181]. [cite_start]Саме в таких осередках народжується справжня підтримка, яка робить спільноту успішною[cite: 182]. </div> <div class="summary">Висновок: Масштабування довіри можливе лише через екосистему малих груп.</div> <div class="quote"> [cite_start]"Спільнота — це одна із найбільш красивих форм, як бути соціальним." [cite: 21, 293] </div> <h2>5. Економічна свобода: Геть "третього зайвого"</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1553729459-efe14ef6055d?w=500" class="img-right" alt="Свобода"> Будь-яке державне регулювання часто стає "третім зайвим", що заважає розвитку. Ми самі здатні регулювати своє життя та бізнес. Коли чиновник, який не несе відповідальності, втручається у відносини між підприємцем та клієнтом, це завжди призводить до втрат і бідності. </div> <div class="summary">Висновок: Справжній розвиток можливий лише за умови мінімізації державного втручання.</div> <h2>6. Безпека через ініціативу</h2> <div class="clearfix"> Досвід війни показує, що приватна ініціатива є ефективнішою за державну машину. Якби було дозволено приватне ППО, підприємства могли б захищати свої об'єкти набагато швидше та якісніше. Підприємці миттєво відновлюють зруйноване майно, бо кожна хвилина простою — це їхні власні кошти, на відміну від бюрократичних реєстрів. </div> <div class="summary">Висновок: Приватна власність на засоби захисту — запорука безпеки в сучасному світі.</div> <h2>7. Світ макрорегіонів: Новий порядок</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?w=500" class="img-left" alt="Кластери"> Сьогодні ми спостерігаємо руйнацію єдиного економічного простору планети. [cite_start]Дональд Трамп, запроваджуючи митні тарифи, фактично будує новий світовий порядок, розділяючи світ на автономні кластери[cite: 355, 381]. [cite_start]Це реакція на стагнацію: за останні 35 років не було фундаментальних наукових відкриттів через надмірну глобальну монополізацію[cite: 364, 365]. </div> <div class="summary">Висновок: Світ переходить до конкуренції макрорегіонів із власними технологічними укладами.</div> <h2>8. Європейські транспортні коридори</h2> <div class="clearfix"> [cite_start]Європа географічно розділена на чотири природні кластери[cite: 559]. [cite_start]Це Атлантичний (Англія-Франція), Рейн-Дунайський (Німеччина), Російський (Волга) та Український (Дніпро)[cite: 560, 563, 564, 601]. Кожен з них бореться за логістичне домінування. [cite_start]Саме через це конкуренти століттями намагалися заблокувати розвиток українського шляху, щоб не допустити появи сильного гравця[cite: 607, 608]. </div> <div class="summary">Висновок: Геополітика — це боротьба транспортних коридорів за право бути оператором обміну.</div> <h2>9. Україна як локомотив Балто-Чорноморського кластеру</h2> <div class="clearfix"> <img src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=500" class="img-right" alt="Україна"> [cite_start]Ця війна завершиться відновленням нашого геополітичного кластеру[cite: 612]. [cite_start]Це шлях "із варяг у греки", що об'єднує Балтику та Чорне море через Польщу, Литву, Білорусь та Україну[cite: 600, 632]. [cite_start]Створення такого окремого макрорегіону вигідно і англосаксам, адже це врівноважує вплив Німеччини та Росії[cite: 613, 616]. [cite_start]У нас з'явилися нові справжні друзі — Данія та Норвегія, які вчинками доводять віру в наш успіх[cite: 636, 642]. </div> <div class="summary">Висновок: Суб'єктність України лежить у створенні власної системи партнерства між морями.</div> <section class="benefit-section"> <h2>Яка від цього користь читачеві?</h2> <ol> [cite_start]<li><b>Для лідерів:</b> Ви отримаєте розуміння того, що справжня спільнота будується на ідеї та мікрогрупах довіри, а не на масових івентах[cite: 45, 182].</li> <li><b>Для бізнесу:</b> Ви усвідомите, що економічна свобода та приватна ініціатива — це єдиний шлях до безпеки та процвітання в умовах війни.</li> [cite_start]<li><b>Для стратегів:</b> Ви побачите велику геополітичну картину, де Україна — це не "задвірки", а центр нового потужного кластеру[cite: 616, 617].</li> <li><b>Для кожного:</b> Розуміння того, як вивчати економіку та підприємництво, допоможе вам стати суб'єктом, а не об'єктом у світі, що швидко змінюється.</li> </ol> </section> <footer> © 2026 Довгочит про Спільноти, Свободу та Геополітику. За матеріалами CEO Club Ukraine, ILI та Садок Вишневий. </footer> </div> <script> const slider = document.getElementById('slider'); const handle = document.getElementById('handle'); const topLayer = document.getElementById('topLayer'); const moveSlider = (e) => { let x = e.type.includes('touch') ? e.touches[0].clientX : e.clientX; let rect = slider.getBoundingClientRect(); let position = ((x - rect.left) / rect.width) * 100; if (position >= 0 && position <= 100) { handle.style.left = `${position}%`; topLayer.style.clipPath = `inset(0 ${100 - position}% 0 0)`; } }; slider.addEventListener('mousemove', moveSlider); slider.addEventListener('touchmove', moveSlider); </script> http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5184960/jak-zbrati-kubik-rubka-3x3-dlja-pochatkvcv Wed, 17 Dec 2025 17:13:00 +0000 ооооооооооооооооооооооо<hr class="moze-more-divider"><p>1</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Детальна інструкція: Як зібрати кубик Рубіка 3x3 для початківців</title> <style> body { font-family: 'Arial', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; color: #333; line-height: 1.6; } h1, h2 { color: #0057b7; /* Синій прапора */ } .ukrainian-accent { border-left: 5px solid #ffd700; /* Жовтий */ padding-left: 15px; background: linear-gradient(to right, #ffd700, #fff); } /* Акордеон в українському стилі */ details { margin-bottom: 15px; border: 3px solid #0057b7; border-radius: 10px; overflow: hidden; background-color: #ffd700; box-shadow: 0 4px 8px rgba(0,87,183,0.3); font-family: 'Arial', sans-serif; } summary { padding: 15px; background-color: #0057b7; color: #ffd700; cursor: pointer; font-weight: bold; font-size: 18px; position: relative; list-style: none; transition: background 0.3s; } summary:hover { background-color: #004494; } summary::-webkit-details-marker { display: none; } summary::before { content: '▶'; margin-right: 10px; font-size: 20px; transition: transform 0.3s; } details[open] summary::before { content: '▼'; } .content { padding: 20px; background-color: #fff; border-top: 2px solid #0057b7; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; margin: 20px 0; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } table { width: 100%; border-collapse: collapse; margin: 15px 0; } th, td { border: 1px solid #0057b7; padding: 10px; text-align: left; } th { background-color: #0057b7; color: #ffd700; } .algorithm { background: #e6f3ff; padding: 10px; border-radius: 5px; font-family: monospace; font-size: 16px; margin: 10px 0; } .cube-embed { margin: 20px 0; } </style> <h1 class="ukrainian-accent">🧩 Детальна інструкція: Як зібрати кубик Рубіка 3x3 для початківців</h1> <p>Ця покрокова інструкція базується на найпростішому методі для новачків. Орієнтуйте кубик так, щоб <b>білий центр зверху</b> (білий хрест), <b>жовтий знизу</b>. Використовуйте відео з плейлиста <a href="https://www.youtube.com/playlist?list=PLavfvd9S-hpHmPIBj0XpG2zAz0IHyFMhB" target="_blank">КУБАСТіК 3D</a> для візуалізації.<grok-card data-id="7092fe" data-type="citation_card"></grok-card><grok-card data-id="322771" data-type="citation_card"></grok-card></p> <div class="cube-embed"> <!-- Вставте сюди код кубика кр1 для інтерактиву --> <iframe src="data:text/html;base64, [BASE64 КОД КР1 З ПЕРЕДУ]" width="300" height="300"></iframe> </div> <p><b>Позначення обертань:</b></p> <ul> <li><b>U</b> — верхня грань за годинниковою →, <b>U'</b> — проти.</li> <li><b>D</b> — нижня за →, <b>D'</b> — проти.</li> <li><b>R</b> — права за →, <b>R'</b> — проти.</li> <li><b>L</b> — ліва за →, <b>L'</b> — проти.</li> <li><b>F</b> — фронт за →, <b>F'</b> — проти.</li> <li><b>B</b> — тил за →, <b>B'</b> — проти.</li> <li><b>2</b> — оберт 180° (наприклад, U2).</li> </ul> <!-- Акордеон --> <details> <summary>1. Перший шар: Білий хрест + Білі кути (Верхня грань)</summary> <div class="content"> <p><b>Крок 1.1: Білий хрест.</b> Знайдіть 4 білі ребра. Розмістіть їх на верхній грані так, щоб сусідній колір збігався з центром бічної грані.</p> <ul> <li>Ребро на нижній: F2 (або адаптуйте для сторони).</li> <li>Ребро в середині: R U R' U' (вибийте вниз, потім підніміть).</li> </ul> <div class="video-container"> <iframe class="moze-iframe" src="https://www.youtube.com/embed/QKJsLpcsDP8" height="0px" width="0px" allowfullscreen="allowfullscreen"></iframe> </div><grok-card data-id="b1010a" data-type="citation_card"></grok-card> <p><b>Крок 1.2: Білі кути.</b> Поставте кут під місце (D), потім:</p> <div class="algorithm">R U R' U'</div> <p>Повторіть 1-3 рази. Якщо кут зверху неправильно: R U' R' (викиньте).</p> <table> <tbody><tr><th>Ситуація</th><th>Алгоритм</th></tr> <tr><td>Кут знизу</td><td>R U R' U'</td></tr> <tr><td>Кут зверху</td><td>R U' R'</td></tr> </tbody></table> </div> </details> <details> <summary>2. Другий шар: Середня грань (Ребра)</summary> <div class="content"> <p>Переверніть кубик (біле знизу). Знайдіть ребро без жовтого зверху, поставте під центр фронту.</p> <div class="video-container"> <iframe class="moze-iframe" src="https://www.youtube.com/embed/JTQV0dtUGig" height="0px" width="0px" allowfullscreen="allowfullscreen"></iframe> </div><grok-card data-id="378c01" data-type="citation_card"></grok-card> <table> <tbody><tr><th>Напрямок</th><th>Алгоритм</th></tr> <tr><td>Праворуч</td><td class="algorithm">U R U' R' U' F' U F</td></tr> <tr><td>Ліворуч</td><td class="algorithm">U' L' U L U F U' F'</td></tr> </tbody></table> <p>Якщо ребро в середині неправильно: застосуйте алгоритм (воно піде вгору).</p> </div> </details> <details> <summary>3. Третій шар: Жовтий хрест (Нижня грань, частина 1)</summary> <div class="content"> <p>Жовтий зверху. Ситуації: крапка, лінія, L/G, хрест.</p> <div class="video-container"> <iframe class="moze-iframe" src="https://www.youtube.com/embed/CBpwwj7PQUc" height="0px" width="0px" allowfullscreen="allowfullscreen"></iframe> </div><grok-card data-id="5dbc59" data-type="citation_card"></grok-card> <div class="algorithm">F R U R' U' F'</div> <p>Повторіть 1-3 рази, повертаючи D для позиції.</p> <table> <tbody><tr><th>Ситуація</th><th>Повороти перед алгоритмом</th></tr> <tr><td>Крапка</td><td>-</td></tr> <tr><td>Лінія</td><td>D або D'</td></tr> <tr><td>L/G</td><td>D2 або D</td></tr> </tbody></table> </div> </details> <details> <summary>3.2 Орієнтація жовтих ребер + 3.3-3.4 Кути (Нижня грань, частина 2)</summary> <div class="content"> <p><b>Орієнтація ребер:</b> P U R U' R' U' R' U2 R (повторіть).<grok-card data-id="579736" data-type="citation_card"></grok-card></p> <p><b>Розстановка кутів:</b> Знайдіть правильний кут, поставте праворуч-спереду: U R U' L' U R' U' L</p> <p><b>Орієнтація кутів:</b> R' D' R D (2-4 рази на кут).</p> <div class="video-container"> <iframe class="moze-iframe" src="https://www.youtube.com/embed/xRojeKl-bPQ" height="0px" width="0px" allowfullscreen="allowfullscreen"></iframe> </div><grok-card data-id="b7b2df" data-type="citation_card"></grok-card> </div> </details> <p class="ukrainian-accent">Успіхів у збиранні! Практикуйте повільно, дивіться відео. Джерела: YouTube плейлист КУБАСТіК 3D.<grok-card data-id="5ad635" data-type="citation_card"></grok-card></p> http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5168982/movnij-barr-podolannja-realnost-jak-tehnolog-perekladu-zmnjujut-svt Wed, 12 Nov 2025 10:37:00 +0000 <span style="text-align: start; font-weight: 400; font-style: normal">Спілкування — це основа людської взаємодії. Протягом століть мовні бар'єри стояли на заваді торгівлі, культурі та особистим зв'язкам. Сьогодні ми живемо в епоху цифрової трансформації, коли мрії про універсальний перекладач стають реальністю. Цей довгочит дослідить, як сучасні технології дозволяють людям розмовляти різними мовами практично в режимі реального часу, і що це означає для кожного з нас.</span> <hr class="moze-more-divider"> <p>1</p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мовний Бар'єр: Подолання Реальності</title> <style> body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #0056b3; text-align: center; border-bottom: 2px solid #0056b3; padding-bottom: 10px; } h2 { color: #003366; margin-top: 20px; border-left: 4px solid #0056b3; padding-left: 10px; } p { margin-bottom: 10px; } blockquote { background-color: #e9ecef; border-left: 5px solid #0056b3; padding: 15px; margin: 15px 0; font-style: italic; border-radius: 4px; } ul, ol { margin-bottom: 10px; } .summary { background-color: #d1ecf1; padding: 10px; border-radius: 4px; font-weight: bold; margin-top: 10px; } .benefit-section { background-color: #e8f5e9; padding: 20px; border-radius: 8px; margin-top: 30px; border-top: 3px solid #4CAF50; } </style> <div class="container"> <!-- Назва --> <h1>Мовний Бар'єр: Подолання Реальності — Як Технології Перекладу Змінюють Світ</h1> <!-- Зачин (вступ) --> <p>Спілкування — це основа людської взаємодії. Протягом століть мовні бар'єри стояли на заваді торгівлі, культурі та особистим зв'язкам. Сьогодні ми живемо в епоху цифрової трансформації, коли мрії про універсальний перекладач стають реальністю. Цей довгочит дослідить, як сучасні технології дозволяють людям розмовляти різними мовами практично в режимі реального часу, і що це означає для кожного з нас.</p> <!-- Основна частина --> <h2>Розділ 1: Еволюція Перекладу — Від Словників до Штучного Інтелекту</h2> <p>Ще не так давно переклад вимагав місяців вивчення мови або постійної присутності професійного перекладача. Сьогодні цей процес автоматизований і доступний мільйонам людей. Фундаментом сучасного перекладу є нейронні мережі та машинне навчання.</p> <blockquote> «Автоматичне розпізнавання мовлення (ASR) та нейронний машинний переклад (NMT) працюють разом, як злагоджений оркестр, щоб перетворити ваші слова на іншу мову за частки секунди». </blockquote> <p>Ці системи навчаються на мільйонах прикладів, постійно вдосконалюючи точність та контекстуальне розуміння. Вони більше не просто замінюють слова, вони намагаються передати сенс речень.</p> <div class="summary"> Короткий висновок розділу 1: Сучасний переклад базується на потужних технологіях штучного інтелекту, що забезпечують швидкість та точність, недосяжні раніше. </div> <h2>Розділ 2: Дієздатні Рішення — Що Вже Існує?</h2> <p>На ринку вже представлено безліч рішень, які ефективно працюють. Їх можна розділити на дві основні категорії:</p> <ol> <li> **Додатки для смартфонів:** Найдоступніший варіант. Google Translate, Microsoft Translator, SayHi пропонують режим розмови. Ви просто говорите у свій телефон, і він майже миттєво відтворює переклад вголос. </li> <li> **Спеціалізовані пристрої та навушники:** Такі бренди, як Vasco Translator або Timekettle, пропонують гаджети, розроблені виключно для цієї мети. Вони часто мають кращу якість звуку, іноді вбудований мобільний інтернет по всьому світу та дозволяють вести розмову, чуючи переклад прямо у вусі. </li> </ol> <p>Ці інструменти вже зараз є цілком дієздатними для більшості повсякденних ситуацій.</p> <div class="summary"> Короткий висновок розділу 2: Існують як безкоштовні додатки для смартфонів, так і спеціалізовані платні пристрої, які ефективно вирішують завдання перекладу в реальному часі. </div> <h2>Розділ 3: Обмеження та Реалістичні Очікування</h2> <p>Незважаючи на вражаючий прогрес, технологія не є магією. Важливо мати реалістичні очікування:</p> <ul> <li> **Невелика затримка:** Все ще існує пауза в 0,5–2 секунди, необхідна для обробки мови. Це може трохи порушувати природний ритм швидкої розмови. </li> <li> **Труднощі з нюансами:** Сарказм, ідіоматичні вирази, дуже специфічний сленг або поезія можуть перекладатися не ідеально. </li> <li> **Залежність від інтернету:** Більшість якісних перекладачів потребують стабільного інтернет-з'єднання для доступу до потужних хмарних обчислень. </li> </ul> <blockquote> «Ми ще не досягли рівня ідеального перекладу, як у науково-фантастичних фільмах, але ми надзвичайно близько підійшли до практичної та корисної реальності». </blockquote> <div class="summary"> Короткий висновок розділу 3: Технології мають обмеження (затримка, нюанси мови, потреба в інтернеті), але вони не заважають ефективному використанню інструментів. </div> <!-- Висновок --> <h2>Висновок</h2> <p>Дієздатні машини для голосового перекладу в реальному часі — це не майбутнє, а сьогодення. Вони демократизують спілкування, роблячи світ ближчим і зрозумілішим. Ці інструменти, будь то додаток у вашому смартфоні чи спеціальний гаджет, вже змінили підхід до подорожей, міжнародного бізнесу та особистих контактів. Вони працюють, вони ефективні, і вони доступні.</p> <!-- Розділ «Яка від цього користь читачеві» --> <div class="benefit-section"> <h2>Яка від цього користь читачеві?</h2> <p>Практична цінність цієї інформації величезна:</p> <ul> <li> **Миттєва комунікація:** Ви можете спілкуватися з іноземцями під час подорожей без попередньої підготовки чи мовного стресу. Замовлення їжі, запит маршруту, прості розмови — все це стає легким. </li> <li> **Бізнес-можливості:** Ви можете проводити базові міжнародні переговори або зустрічі з партнерами, не наймаючи дорогого перекладача для кожної розмови. </li> <li> **Освіта та культура:** Долається бар'єр доступу до іншомовного контенту або спілкування з носіями мови для практики. </li> </ul> <p>Володіючи цією інформацією, ви знаєте, який інструмент обрати, що від нього очікувати і як максимально ефективно використовувати технології для розширення власних горизонтів.</p> </div> </div> http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5167421/grafchn-knopki Sun, 09 Nov 2025 10:52:00 +0000 лллллллллллллллллллллллл<hr class="moze-more-divider"><p>1</p><p><br></p> <title>KHOПKИ</title> <style>TD {color: white;} </style> <button fdprocessedid="a6qd8y">ЦЕ - ПРОСТО КНОПКА</button><br><br> <button fdprocessedid="05onp"><img src="321.png" border="0" width="57" height="57" alt=""></button><br><br> <button fdprocessedid="bahth7">Internet Explorer<br><img src="123.png" width="62" height="61" border="0"><br> 4.0 </button><br><br> <button fdprocessedid="t6idpb"><h1> А це - велика кнопка<!--Н1--> <table align="center" bgcolor="#408080" width="100%" cellspacing="2" cellpadding="2" border="3"> <tbody><tr> <td align="center" bgcolor-"#400040"="">Вона містить<!--ТD--> </td><td align="center">цілу таблицю<!--ТR--> </td></tr> <tr> <td align="center">з різнокольоровими<!--ТD--> </td><td align="center" bgcolor="#400040">клітинками</td> </tr> </tbody></table> <br>І горизонтальну пряму<hr width="150" size="10" color="red"> </h1></button> http://veselkova-kramnicja.mozello.com/blog-4-1/params/post/5143901/persha-novina Sat, 04 Oct 2025 12:36:00 +0000 ннннннннннннннннннннннннн<hr class="moze-more-divider"><p>1</p><p><br></p> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Косинка — Solitaire (Frontend)</title> <style> :root{ --bg:#2f7a43; /* зелений стіл */ --card-bg:#fff8ec; --accent:#e03b3b; --shadow: rgba(0,0,0,0.25); --card-w:84px; --card-h:120px; --gap:16px; --font: "Segoe UI", Roboto, "Helvetica Neue", Arial; } *{box-sizing:border-box} body{ margin:0; font-family:var(--font); background: linear-gradient(180deg,#2f7a43,#2a6d3b); min-height:100vh; color:#111; display:flex; align-items:flex-start; justify-content:center; padding:20px; } .game{ width:100%; max-width:1200px; } header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#fff; } header h1{ margin:0; font-size:20px; letter-spacing:1px; } .controls{ display:flex; gap:12px; align-items:center; } .controls button{ padding:8px 12px; border-radius:8px; border: none; background:#f0f0f0; cursor:pointer; font-weight:600; } .controls .stat{ background: rgba(255,255,255,0.08); padding:6px 10px; border-radius:8px; font-size:14px; color:#fff; } .top-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:20px; } .stock-area{ display:flex; gap:12px; align-items:center; } .foundations{ display:flex; gap:12px; } .slot{ width:var(--card-w); height:var(--card-h); border-radius:8px; box-shadow: 0 4px 6px var(--shadow); background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--card-bg)); display:flex; align-items:center; justify-content:center; position:relative; user-select:none; } .stack.face-down{ background: linear-gradient(180deg,#c33 0%, #9a0000 100%); border:2px solid rgba(0,0,0,0.08); box-shadow: 0 6px 10px rgba(0,0,0,0.35); cursor:pointer; } .stack{ cursor:pointer; } .tableau{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; } .pile{ width:var(--card-w); min-height: var(--card-h); position:relative; } .card{ width:var(--card-w); height:var(--card-h); border-radius:8px; background:var(--card-bg); box-shadow: 0 4px 6px var(--shadow); position:absolute; left:0; transition: transform 160ms ease, top 160ms ease; padding:8px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; } .card.face-down{ background: linear-gradient(180deg,#c33 0%, #9a0000 100%); } .rank{ font-weight:700; font-size:18px; } .suit{ font-size:20px; } .red{ color: #c33; } .black{ color: #111; } .card.selected{ outline: 3px solid rgba(255,255,0,0.15); transform: translateY(-6px); } /* overlay */ .overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.4); } .overlay.hidden{ display:none; } .overlay-content{ background:#fff; padding:24px; border-radius:12px; text-align:center; min-width:260px; box-shadow:0 10px 30px rgba(0,0,0,0.4); } /* small responsiveness */ @media (max-width:720px){ :root{ --card-w:64px; --card-h:92px; --gap:8px; } header h1{ font-size:18px } .controls button{ padding:6px 10px; font-size:14px } } /* small hint */ .hint{ color: rgba(255,255,255,0.8); font-size:13px; margin-top:8px; } </style> <div class="game"> <header> <h1>Косинка</h1> <div class="controls"> <button id="newGameBtn">Нова гра</button> <div class="stat">Час: <span id="timer">0:00</span></div> <div class="stat">Ходи: <span id="moves">0</span></div> </div> </header> <main> <section class="top-row"> <div class="stock-area" style="display:flex;align-items:flex-start;"> <div id="stock" class="slot stack face-down" title="Клік щоб відкрити / рециклити"></div> <div id="waste" class="slot stack" title="Клік на карту, щоб вибрати"></div> </div> <div class="foundations"> <div class="slot foundation" data-index="0"></div> <div class="slot foundation" data-index="1"></div> <div class="slot foundation" data-index="2"></div> <div class="slot foundation" data-index="3"></div> </div> </section> <section class="tableau" id="tableau"> <div class="pile" data-index="0"></div> <div class="pile" data-index="1"></div> <div class="pile" data-index="2"></div> <div class="pile" data-index="3"></div> <div class="pile" data-index="4"></div> <div class="pile" data-index="5"></div> <div class="pile" data-index="6"></div> </section> <div class="hint">Клікни карту, щоб вибрати послідовність; потім клікни на цільову стопку або фундамент. Порожню стопку — тільки K.</div> </main> <div id="winOverlay" class="overlay hidden"> <div class="overlay-content"> <h2>Вітаю — ти переміг!</h2> <p>Час: <span id="winTime">0:00</span> | Ходи: <span id="winMoves">0</span></p> <button id="closeWin">Грати ще</button> </div> </div> </div> <script> (function(){ // Klondike frontend — весь код у цьому файлі const RANKS = ["A","2","3","4","5","6","7","8","9","10","J","Q","K"]; const SUITS = ["♠","♥","♦","♣"]; const SUIT_COLOR = { "♠":"black","♣":"black","♥":"red","♦":"red" }; // DOM const stockEl = document.getElementById('stock'); const wasteEl = document.getElementById('waste'); const pileEls = Array.from(document.querySelectorAll('.pile')); const foundationEls = Array.from(document.querySelectorAll('.foundation')); const newGameBtn = document.getElementById('newGameBtn'); const timerEl = document.getElementById('timer'); const movesEl = document.getElementById('moves'); const winOverlay = document.getElementById('winOverlay'); const winTime = document.getElementById('winTime'); const winMoves = document.getElementById('winMoves'); const closeWin = document.getElementById('closeWin'); // state let deck = [], stock = [], waste = [], piles = [[],[],[],[],[],[],[]], foundations = [[],[],[],[]]; let selected = null; // {from:'pile'|'waste'|'foundation', idx, cardIndex, card} let moves = 0, timer = 0, timerInterval = null; function makeDeck(){ const d=[]; for(const s of SUITS) for(const r of RANKS) d.push({suit:s, rank:r, faceUp:false, id: s + r + Math.random().toString(36).slice(2,6)}); return d; } function shuffle(a){ for(let i=a.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [a[i],a[j]]=[a[j],a[i]]; } } function startTimer(){ clearInterval(timerInterval); timer=0; renderTimer(); timerInterval = setInterval(()=>{ timer++; renderTimer(); },1000); } function stopTimer(){ clearInterval(timerInterval); timerInterval=null; } function renderTimer(){ const m = Math.floor(timer/60), s = timer%60; timerEl.textContent = `${m}:${s.toString().padStart(2,'0')}`; } function renderMoves(){ movesEl.textContent = moves; } function resetSelected(){ selected=null; document.querySelectorAll('.card.selected').forEach(el=>el.classList.remove('selected')); } function newGame(){ deck = makeDeck(); shuffle(deck); stock = deck.slice(); waste = []; piles = [[],[],[],[],[],[],[]]; foundations=[[],[],[],[]]; moves = 0; renderMoves(); resetSelected(); stopTimer(); // deal tableau for(let i=0;i<7;i++){ for(let j=0;j<=i;j++){ const c = stock.pop(); c.faceUp = (j===i); piles[i].push(c); } } startTimer(); renderAll(); } function cardElement(card){ const el = document.createElement('div'); el.className = 'card' + (card.faceUp ? '' : ' face-down'); el.dataset.id = card.id; if (card.faceUp){ const top = document.createElement('div'); top.className = 'rank'; top.textContent = card.rank; top.style.alignSelf = 'flex-start'; const suit = document.createElement('div'); suit.className = 'suit ' + (SUIT_COLOR[card.suit]==='red' ? 'red' : 'black'); suit.textContent = card.suit; suit.style.alignSelf = 'flex-end'; el.appendChild(top); el.appendChild(suit); } return el; } function renderAll(){ // stock stockEl.innerHTML = ''; stockEl.classList.add('stack'); if (stock.length>0) stockEl.classList.add('face-down'); else stockEl.classList.remove('face-down'); // waste wasteEl.innerHTML = ''; if (waste.length>0){ const top = waste[waste.length-1]; const el = cardElement(top); el.classList.add('top'); el.addEventListener('click', (e)=> onClickFromWaste(e, top)); wasteEl.appendChild(el); } // foundations for(let i=0;i<4;i++){ const f = foundationEls[i]; f.innerHTML = ''; if (foundations[i].length>0){ const top = foundations[i][foundations[i].length-1]; const el = cardElement(top); el.addEventListener('click', ()=> { selected = { from:'foundation', idx:i }; renderAll(); }); f.appendChild(el); } else { f.style.opacity = 0.9; } } // tableau pileEls.forEach((pel, idx) => { pel.innerHTML = ''; const pile = piles[idx]; pile.forEach((card, ci) => { const cel = cardElement(card); const y = ci * 26; cel.style.top = y + 'px'; cel.dataset.pileIdx = idx; cel.dataset.cardIdx = ci; cel.addEventListener('click', (e)=> onClickCardInPile(e, idx, ci, card)); // highlight selected sequence if (selected && selected.from==='pile' && selected.idx===idx && selected.cardIndex<=ci) { if (ci >= selected.cardIndex) cel.classList.add('selected'); } pel.appendChild(cel); }); }); renderTimer(); renderMoves(); checkWin(); } // events stockEl.addEventListener('click', onClickStock); function onClickStock(){ if (stock.length===0){ if (waste.length===0) return; stock = waste.reverse().map(c=>{ c.faceUp=false; return c; }); waste = []; moves++; renderMoves(); resetSelected(); renderAll(); return; } const c = stock.pop(); c.faceUp = true; waste.push(c); moves++; renderMoves(); resetSelected(); renderAll(); } function onClickFromWaste(e, card){ resetSelected(); selected = { from:'waste', card: card }; // highlight waste card wasteEl.querySelectorAll('.card').forEach(el=> el.classList.add('selected')); } function onClickCardInPile(e, pileIdx, cardIdx, card){ const pile = piles[pileIdx]; if (!pile[cardIdx].faceUp){ // flip only if topmost facedown if (cardIdx === pile.length - 1){ pile[cardIdx].faceUp = true; moves++; renderMoves(); renderAll(); } return; } if (!selected){ // select sequence from this card selected = { from:'pile', idx:pileIdx, cardIndex: cardIdx }; renderAll(); // visually mark selected sequence const pel = pileEls[pileIdx]; pel.querySelectorAll('.card').forEach(el=>{ const ci = parseInt(el.dataset.cardIdx,10); if (ci>=cardIdx) el.classList.add('selected'); }); return; } // if something selected — attempt to move selected -> this pile attemptMoveToPile(pileIdx); } // pile empty-space click to drop pileEls.forEach((pel, idx)=>{ pel.addEventListener('click', (e)=>{ if (e.target === pel){ if (selected) attemptMoveToPile(idx); } }); }); foundationEls.forEach((fel,i)=> fel.addEventListener('click', ()=> { if (selected) attemptMoveToFoundation(i); })); function attemptMoveToPile(destIdx){ if (!selected) return; // from waste if (selected.from==='waste'){ const card = selected.card; const seq = [card]; if (canPlaceSequenceOnTableau(seq, destIdx)){ waste.pop(); piles[destIdx].push(card); moves++; renderMoves(); resetSelected(); renderAll(); } else { resetSelected(); renderAll(); } return; } // from pile if (selected.from==='pile'){ const { idx: srcIdx, cardIndex } = selected; if (srcIdx === destIdx){ resetSelected(); renderAll(); return; } const seq = piles[srcIdx].slice(cardIndex); if (canPlaceSequenceOnTableau(seq, destIdx)){ const moved = piles[srcIdx].splice(cardIndex); piles[destIdx] = piles[destIdx].concat(moved); // flip last of source if needed const srcPile = piles[srcIdx]; if (srcPile.length>0){ const last = srcPile[srcPile.length-1]; if (!last.faceUp) last.faceUp = true; } moves++; renderMoves(); resetSelected(); renderAll(); } else { resetSelected(); renderAll(); } return; } // from foundation if (selected.from==='foundation'){ const fidx = selected.idx; const card = foundations[fidx][foundations[fidx].length-1]; if (!card){ resetSelected(); renderAll(); return; } const seq = [card]; if (canPlaceSequenceOnTableau(seq, destIdx)){ foundations[fidx].pop(); piles[destIdx].push(card); moves++; renderMoves(); resetSelected(); renderAll(); } else { resetSelected(); renderAll(); } return; } } function canPlaceSequenceOnTableau(seq, destIdx){ if (!seq || seq.length===0) return false; const top = seq[0]; const dest = piles[destIdx]; if (dest.length===0){ return top.rank === 'K'; } else { const dtop = dest[dest.length-1]; if (!dtop.faceUp) return false; const topVal = rankValue(top.rank); const destVal = rankValue(dtop.rank); const colorsOpp = SUIT_COLOR[top.suit] !== SUIT_COLOR[dtop.suit]; return colorsOpp && (topVal === destVal - 1); } } function attemptMoveToFoundation(fIndex){ if (!selected) return; // map foundation index to suit by order SUITS if (selected.from==='waste'){ const card = selected.card; if (canPlaceOnFoundation(card, fIndex)){ waste.pop(); foundations[fIndex].push(card); moves++; renderMoves(); resetSelected(); renderAll(); } else { resetSelected(); renderAll(); } return; } if (selected.from==='pile'){ const { idx: srcIdx, cardIndex } = selected; const seq = piles[srcIdx].slice(cardIndex); if (seq.length !== 1){ resetSelected(); renderAll(); return; } const card = seq[0]; if (canPlaceOnFoundation(card, fIndex)){ piles[srcIdx].pop(); foundations[fIndex].push(card); const srcPile = piles[srcIdx]; if (srcPile.length>0){ const last = srcPile[srcPile.length-1]; if (!last.faceUp) last.faceUp = true; } moves++; renderMoves(); resetSelected(); renderAll(); } else { resetSelected(); renderAll(); } return; } if (selected.from==='foundation'){ resetSelected(); renderAll(); } } function canPlaceOnFoundation(card, fIndex){ const targetSuit = SUITS[fIndex]; if (card.suit !== targetSuit) return false; const pile = foundations[fIndex]; if (pile.length===0) return card.rank === 'A'; else return rankValue(card.rank) === rankValue(pile[pile.length-1].rank) + 1; } function rankValue(r){ return RANKS.indexOf(r) + 1; } function checkWin(){ const ok = foundations.every(f => f.length === 13); if (ok){ stopTimer(); winTime.textContent = timerEl.textContent; winMoves.textContent = moves; winOverlay.classList.remove('hidden'); } } // UI newGameBtn.addEventListener('click', ()=> { winOverlay.classList.add('hidden'); newGame(); }); closeWin.addEventListener('click', ()=> { winOverlay.classList.add('hidden'); newGame(); }); // init newGame(); // map foundation titles to suits foundationEls.forEach((el,i)=> el.title = 'Фундамент: ' + SUITS[i]); })(); </script>