Spaces:
Running
Running
| <!-- saved from url=(0174)https://ppl-ai-code-interpreter-files.s3.amazonaws.com/web/direct-files/4eca1ed209e039c76e0bb9e86e78dc2a/f207419d-7910-4724-beab-3fed901a4a09/index.html?utm_source=perplexity --> | |
| <html lang="uk" data-color-scheme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Python Основи - Навчальний Дашборд</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header__content"> | |
| <h1 class="header__title">🐍 Python Основи</h1> | |
| <button class="btn btn--secondary btn--sm" id="theme-toggle">🌙 Темна тема</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="nav"> | |
| <div class="container"> | |
| <div class="nav__tabs"> | |
| <button class="nav__tab" data-section="home">🏠 Головна</button> | |
| <button class="nav__tab" data-section="variables">📊 Змінні та типи</button> | |
| <button class="nav__tab" data-section="operators">⚡ Оператори</button> | |
| <button class="nav__tab nav__tab--active" data-section="typecasting">🔄 Type Cast</button> | |
| <button class="nav__tab" data-section="io">💬 Введення/Виведення</button> | |
| <button class="nav__tab" data-section="comments">💭 Коментарі</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main"> | |
| <div class="container"> | |
| <!-- Home Section --> | |
| <section id="home" class="section"> | |
| <div class="hero"> | |
| <h2 class="hero__title">Вітаємо в курсі Python Основи!</h2> | |
| <p class="hero__description">Інтерактивний дашборд для вивчення основних синтаксичних конструкцій Python</p> | |
| </div> | |
| <div class="topics-grid"> | |
| <div class="topic-card" data-section="variables"> | |
| <div class="topic-card__icon">📊</div> | |
| <h3 class="topic-card__title">Змінні та типи даних</h3> | |
| <p class="topic-card__description">int, float, str, bool та робота з ними</p> | |
| <div class="topic-card__progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-bar__fill" style="width: 25%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="topic-card" data-section="operators"> | |
| <div class="topic-card__icon">⚡</div> | |
| <h3 class="topic-card__title">Базові оператори</h3> | |
| <p class="topic-card__description">Арифметичні, логічні та оператори порівняння</p> | |
| <div class="topic-card__progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-bar__fill" style="width: 60%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="topic-card" data-section="typecasting"> | |
| <div class="topic-card__icon">🔄</div> | |
| <h3 class="topic-card__title">Перетворення типів даних</h3> | |
| <p class="topic-card__description">Type casting між різними типами даних</p> | |
| <div class="topic-card__progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-bar__fill" style="width: 25%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="topic-card" data-section="io"> | |
| <div class="topic-card__icon">💬</div> | |
| <h3 class="topic-card__title">Введення/Виведення</h3> | |
| <p class="topic-card__description">Функції input() та print()</p> | |
| <div class="topic-card__progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-bar__fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="topic-card" data-section="comments"> | |
| <div class="topic-card__icon">💭</div> | |
| <h3 class="topic-card__title">Коментарі</h3> | |
| <p class="topic-card__description">Однорядкові та багаторядкові коментарі</p> | |
| <div class="topic-card__progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-bar__fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Variables Section --> | |
| <section id="variables" class="section"> | |
| <div class="section__header"> | |
| <h2 class="section__title">📊 Змінні та типи даних</h2> | |
| <p class="section__description">Вивчення основних типів даних Python: int, float, str, bool</p> | |
| </div> | |
| <div class="content-grid"> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>🔢 Цілі числа (int)</h3> | |
| <div class="code-examples"> | |
| <div class="code-block"> | |
| <pre><code class="language-python">age = 25 | |
| year = 2025 | |
| negative = -10</code></pre> | |
| <button class="btn btn--primary btn--sm run-code" data-result="age = 25 (тип: int)">▶️ Запустити</button> | |
| </div> | |
| </div> | |
| <div class="interactive-demo"> | |
| <label class="form-label">Змініть значення:</label> | |
| <input type="number" class="form-control" id="int-demo" value="25"> | |
| <div class="demo-result" id="int-result">Результат: 25 (тип: int)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>🔢 Дробові числа (float)</h3> | |
| <div class="code-examples"> | |
| <div class="code-block"> | |
| <pre><code class="language-python">pi = 3.14159 | |
| temperature = 36.6 | |
| price = 99.99</code></pre> | |
| <button class="btn btn--primary btn--sm run-code" data-result="pi = 3.14159 (тип: float)">▶️ Запустити</button> | |
| </div> | |
| </div> | |
| <div class="interactive-demo"> | |
| <label class="form-label">Змініть значення:</label> | |
| <input type="number" step="0.1" class="form-control" id="float-demo" value="3.14"> | |
| <div class="demo-result" id="float-result">Результат: 3.14 (тип: float)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>📝 Рядки (str)</h3> | |
| <div class="code-examples"> | |
| <div class="code-block"> | |
| <pre><code class="language-python">name = "Анна" | |
| city = 'Київ' | |
| message = "Привіт, світ!"</code></pre> | |
| <button class="btn btn--primary btn--sm run-code" data-result="name = "Анна" (тип: str)">▶️ Запустити</button> | |
| </div> | |
| </div> | |
| <div class="interactive-demo"> | |
| <label class="form-label">Змініть значення:</label> | |
| <input type="text" class="form-control" id="str-demo" value="Привіт, світ!"> | |
| <div class="demo-result" id="str-result">Результат: "Привіт, світ!" (тип: str)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>✅ Булеві значення (bool)</h3> | |
| <div class="code-examples"> | |
| <div class="code-block"> | |
| <pre><code class="language-python">is_student = True | |
| has_license = False | |
| is_adult = age >= 18</code></pre> | |
| <button class="btn btn--primary btn--sm run-code" data-result="is_student = True (тип: bool)">▶️ Запустити</button> | |
| </div> | |
| </div> | |
| <div class="interactive-demo"> | |
| <label class="form-label">Виберіть значення:</label> | |
| <select class="form-control" id="bool-demo"> | |
| <option value="true">True</option> | |
| <option value="false">False</option> | |
| </select> | |
| <div class="demo-result" id="bool-result">Результат: True (тип: bool)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quiz-section"> | |
| <h3>🧠 Міні-тест</h3> | |
| <div class="quiz-card" id="variables-quiz"> | |
| <div class="quiz-question"> | |
| Який тип даних у змінної x = 3.14? | |
| </div> | |
| <div class="quiz-options"> | |
| <button class="quiz-option" data-answer="0">int</button> | |
| <button class="quiz-option" data-answer="1">float</button> | |
| <button class="quiz-option" data-answer="2">str</button> | |
| <button class="quiz-option" data-answer="3">bool</button> | |
| </div> | |
| <div class="quiz-result"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Operators Section --> | |
| <section id="operators" class="section"> | |
| <div class="section__header"> | |
| <h2 class="section__title">⚡ Базові оператори</h2> | |
| <p class="section__description">Арифметичні, логічні оператори та оператори порівняння</p> | |
| </div> | |
| <div class="operators-grid"> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>➕ Арифметичні оператори</h3> | |
| <div class="operator-examples"> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 + 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 + 5">= ?</button> | |
| <span class="operator-result">15</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 - 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 - 5">= ?</button> | |
| <span class="operator-result">5</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 * 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 * 5">= ?</button> | |
| <span class="operator-result">50</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 / 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 / 5">= ?</button> | |
| <span class="operator-result">2.0</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 // 3</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 // 3">= ?</button> | |
| <span class="operator-result">3</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 % 3</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 % 3">= ?</button> | |
| <span class="operator-result">1</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>⚖️ Оператори порівняння</h3> | |
| <div class="operator-examples"> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 == 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 == 5">= ?</button> | |
| <span class="operator-result show">false</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 != 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 != 5">= ?</button> | |
| <span class="operator-result">True</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 > 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 > 5">= ?</button> | |
| <span class="operator-result">True</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">10 < 5</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="10 < 5">= ?</button> | |
| <span class="operator-result">False</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>🧠 Логічні оператори</h3> | |
| <div class="operator-examples"> | |
| <div class="operator-row"> | |
| <span class="operator-code">True and False</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="True and False">= ?</button> | |
| <span class="operator-result">False</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">True or False</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="True or False">= ?</button> | |
| <span class="operator-result">True</span> | |
| </div> | |
| <div class="operator-row"> | |
| <span class="operator-code">not True</span> | |
| <button class="btn btn--primary btn--sm run-operator" data-calc="not True">= ?</button> | |
| <span class="operator-result">False</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Type Casting Section --> | |
| <section id="typecasting" class="section section--active"> | |
| <div class="section__header"> | |
| <h2 class="section__title">🔄 Перетворення типів (Type Cast)</h2> | |
| <p class="section__description">Явне перетворення між типами даних</p> | |
| </div> | |
| <div class="casting-grid"> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>🔢 Перетворення в int()</h3> | |
| <div class="casting-examples"> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value=""123"" data-type="int"> | |
| <span class="casting-arrow">→ int() →</span> | |
| <span class="casting-result">123</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="45.67" data-type="int"> | |
| <span class="casting-arrow">→ int() →</span> | |
| <span class="casting-result">45</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="True" data-type="int"> | |
| <span class="casting-arrow">→ int() →</span> | |
| <span class="casting-result">1</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>💧 Перетворення в float()</h3> | |
| <div class="casting-examples"> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value=""3.14"" data-type="float"> | |
| <span class="casting-arrow">→ float() →</span> | |
| <span class="casting-result">3.14</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="42" data-type="float"> | |
| <span class="casting-arrow">→ float() →</span> | |
| <span class="casting-result">42.0</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>📝 Перетворення в str()</h3> | |
| <div class="casting-examples"> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="123" data-type="str"> | |
| <span class="casting-arrow">→ str() →</span> | |
| <span class="casting-result">"123"</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="True" data-type="str"> | |
| <span class="casting-arrow">→ str() →</span> | |
| <span class="casting-result">"True"</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>✅ Перетворення в bool()</h3> | |
| <div class="casting-examples"> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="1" data-type="bool"> | |
| <span class="casting-arrow">→ bool() →</span> | |
| <span class="casting-result">True</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="0" data-type="bool"> | |
| <span class="casting-arrow">→ bool() →</span> | |
| <span class="casting-result">False</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| <div class="casting-row"> | |
| <input type="text" class="form-control casting-input" value="""" data-type="bool"> | |
| <span class="casting-arrow">→ bool() →</span> | |
| <span class="casting-result">False</span> | |
| <button class="btn btn--primary btn--sm try-cast">Спробувати</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Input/Output Section --> | |
| <section id="io" class="section"> | |
| <div class="section__header"> | |
| <h2 class="section__title">💬 Введення та виведення</h2> | |
| <p class="section__description">Функції input() та print() для взаємодії з користувачем</p> | |
| </div> | |
| <div class="io-grid"> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>📤 Функція print()</h3> | |
| <div class="print-examples"> | |
| <div class="code-block"> | |
| <pre><code>print("Привіт, світ!")</code></pre> | |
| <button class="btn btn--primary btn--sm run-print" data-output="Привіт, світ!">▶️ Запустити</button> | |
| <div class="output-console">Вивід: <span class="output-text"></span></div> | |
| </div> | |
| <div class="code-block"> | |
| <pre><code>name = "Анна" | |
| print("Привіт,", name)</code></pre> | |
| <button class="btn btn--primary btn--sm run-print" data-output="Привіт, Анна">▶️ Запустити</button> | |
| <div class="output-console">Вивід: <span class="output-text"></span></div> | |
| </div> | |
| </div> | |
| <div class="interactive-print"> | |
| <h4>Спробуйте самі:</h4> | |
| <input type="text" class="form-control" id="print-input" placeholder="Введіть текст для print()"> | |
| <button class="btn btn--primary custom-print">Виконати print()</button> | |
| <div class="output-console">Вивід: <span id="custom-output"></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>📥 Функція input()</h3> | |
| <div class="input-examples"> | |
| <div class="input-simulator"> | |
| <h4>Симулятор input():</h4> | |
| <div class="code-line">name = input("Як вас звуть? ")</div> | |
| <div class="input-prompt"> | |
| <span>Як вас звуть? </span> | |
| <input type="text" class="form-control input-sim" id="name-input"> | |
| <button class="btn btn--primary btn--sm simulate-input" data-var="name">Enter</button> | |
| </div> | |
| <div class="variable-display">name = "<span id="name-value"></span>"</div> | |
| </div> | |
| <div class="input-simulator"> | |
| <div class="code-line">age = int(input("Скільки вам років? "))</div> | |
| <div class="input-prompt"> | |
| <span>Скільки вам років? </span> | |
| <input type="number" class="form-control input-sim" id="age-input"> | |
| <button class="btn btn--primary btn--sm simulate-input" data-var="age">Enter</button> | |
| </div> | |
| <div class="variable-display">age = <span id="age-value"></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>🔧 Практичний приклад</h3> | |
| <div class="code-block"> | |
| <pre><code># Збір інформації про користувача | |
| name = input("Як вас звуть? ") | |
| age = int(input("Скільки вам років? ")) | |
| print("Привіт,", name) | |
| print("Вам", age, "років") | |
| if age >= 18: | |
| print("Ви повнолітній") | |
| else: | |
| print("Ви неповнолітній")</code></pre> | |
| </div> | |
| <div class="practical-demo"> | |
| <h4>Запустіть приклад:</h4> | |
| <button class="btn btn--primary start-demo">🚀 Почати демонстрацію</button> | |
| <div class="demo-console" id="demo-console"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comments Section --> | |
| <section id="comments" class="section"> | |
| <div class="section__header"> | |
| <h2 class="section__title">💭 Коментарі</h2> | |
| <p class="section__description">Однорядкові та багаторядкові коментарі в Python</p> | |
| </div> | |
| <div class="comments-grid"> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>➖ Однорядкові коментарі</h3> | |
| <div class="code-examples"> | |
| <div class="code-block"> | |
| <pre><code class="language-python"># Це однорядковий коментар | |
| age = 25 # Вік користувача | |
| # TODO: Додати перевірку віку | |
| print("Привіт!") # Вивід привітання</code></pre> | |
| </div> | |
| </div> | |
| <div class="comment-tips"> | |
| <h4>💡 Поради:</h4> | |
| <ul> | |
| <li>Використовуйте # для коментарів</li> | |
| <li>Коментарі допомагають зрозуміти код</li> | |
| <li>Пишіть зрозумілі коментарі</li> | |
| <li>Використовуйте TODO для нагадувань</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>📝 Багаторядкові коментарі</h3> | |
| <div class="code-examples"> | |
| <div class="code-block"> | |
| <pre><code class="language-python">""" | |
| Це багаторядковий коментар | |
| Може містити декілька рядків | |
| Корисно для документації функцій | |
| та опису програми | |
| """ | |
| def calculate_area(width, height): | |
| """ | |
| Обчислює площу прямокутника | |
| Параметри: | |
| width (float): ширина прямокутника | |
| height (float): висота прямокутника | |
| Повертає: | |
| float: площа прямокутника | |
| """ | |
| return width * height</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <h3>✏️ Інтерактивний редактор коментарів</h3> | |
| <div class="comment-editor"> | |
| <textarea class="form-control" id="code-editor" rows="10" placeholder="Напишіть код з коментарями..."># Обчислення площі кола | |
| import math | |
| radius = 5 # Радіус кола в сантиметрах | |
| """ | |
| Формула для обчислення площі кола: | |
| S = π * r² | |
| де π ≈ 3.14159, r - радіус | |
| """ | |
| area = math.pi * radius ** 2 | |
| print(f"Площа кола: {area:.2f} см²") | |
| </textarea> | |
| <button class="btn btn--primary analyze-comments">🔍 Проаналізувати коментарі</button> | |
| <div class="comment-analysis" id="comment-analysis"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p class="footer__text">Python Основи - Навчальний Дашборд © 2025</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script src="app.js.Без названия"></script> | |
| </body></html> |