Як робити веб інтерфейси з python

Ви можете знати про такі штуки як electron.
По факту це інтерфейс для програми на html, css, js.
Для пайтона є така бібліотека як eel, завдяки неї ми сьогодні напишемо простеньку програму яка показує час при натисненні на кнопку.
Поставити її можна командою:

pip install eel

Тепер створимо в папці нашого проекта папку web, туди будемо кидати наші файли html, css, js та якісь інші файлі(наприклад картинки).
Сьогодні нам вистачть одного файлу html, але в більш великих проектах бажано розділяти html, css та js по різним файлам.
Тепер глянемо код в нашому main.py

import eel
from datetime import datetime

Імпортуємо eel для інтерфейсу та datetime для часу.

@eel.expose()
def what_time():
    return datetime.now().strftime("%d/%m/%Y %H:%M:%S")

Розберемо по рядкам.
@eel.expose це декоратор(що це таке можете глянути тут https://docs.python.org/3/glossary.html тут взагалі про багато штук в пайтоні і в тому числі про декоратори), цей декоратор дає можливість нам викликати цю функцію з javascript на нашій сторінці.
На наступному рядку ми оголушеємо функцію.
На наступному рядку ми одразу повертаємо дату в форматі який ми вказали в функції strftime.

eel.init("web")
eel.start("main.html", mode="chrome", cmdline_args=["--kiosk"])

Ініціалізуємо eel в папці web.
На настпному рядку ми відкриваємо файл main.html в режимі chrome і в аргументах вказуємо --kiosk він означає що програма буде в повноекранному режимі.

Тепер розглянемо файл main html.

<!DOCTYPE html>

На першому рядку вказуєм що це найновіше версія html.

а наступному відкриваєм тег html

<meta charset="UTF-8">
<title>Crypto Pidval</title>
<script type="text/javascript" src="eel.js"></script>

Вказуєм кодування utf-8 назву вікна Crypto Pidval та додаєм скрипт eel через який ми і будемо запускати функції з пайтона.

<style>
    body{
        background: linear-gradient(to right, #40E0D0, #FF8C00, #FF0080);
    }

Відкриваєм тег style.
Для тега body(основний тег) ставимо фон градієнта(його я взяв з https://uigradients.com/ прикольний сайт з градієнтами).

button{
    background: linear-gradient(to right, #00F260, #0575E6);
    border: none;
    color: white;
    width: 190px;
    height: 108px;
    font-size: 2em;
    margin-left: 21em;
}
button:hover{
    background: linear-gradient(to right, #6EE856, #006BD2);
}

Для кнопок ставимо фон градієнтом, прибираємо контури(вони мені не подобаються), ставимо колір тексту білим, ставимо ширину та висоту, а далі ставимо розмір тексту 2em(це одиниця виміру яку часто використовують для тексту), і відступаємо 21em щоб кнопка була по цетру(так я знаю що можна відцентрувати по нормальному, але тут це не обов'язково).
Далі ми ставимо щоб мінявся фон при наведені на кнопку.

#time{
    color: #40E0D0;
    text-align: center;
}

Ставимо колір нашому тексту з айді time і центруємо його.

    </style>
</head>

Закриваємо теги style та head.

<body>
        <button onclick="what_time();">What is the time?</button>
        <h1 id="time">Result</h1>

Відкриваємо тег body.
Також створюєм кнопку яка при нажатті вкикликає функцію what_time.
Також текст з айді time.

<script>
    async function what_time(){
        result = await eel.what_time()();
        document.getElementById('time').innerHTML = result;
    }
</script>

В цьому скрипті ми створюємо асинхронну функцію what_time(яка якраз і вкикликається при натисненні на кнопку).
Далі вкиликаємо функцію what_time вже із пайтона і зберігаємо результат її виконання в змінну.
Далі міняємо текст нашому тегу h1 на час.

</body>
</html>

Закриваємо теги.

Ось весь файл main.py:

import eel
from datetime import datetime

@eel.expose()
def what_time():
    return datetime.now().strftime("%d/%m/%Y %H:%M:%S")
eel.init("web")
eel.start("main.html", mode="chrome", cmdline_args=["--kiosk"])

І файл main.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Crypto Pidval</title>
    <script type="text/javascript" src="eel.js"></script>
    <style>
        body{
            background: linear-gradient(to right, #40E0D0, #FF8C00, #FF0080);
        }
        button{
            background: linear-gradient(to right, #00F260, #0575E6);
            border: none;
            color: white;
            width: 190px;
            height: 108px;
            font-size: 2em;
            margin-left: 21em;
        }
        button:hover{
            background: linear-gradient(to right, #6EE856, #006BD2);
        }
        #time{
            color: #40E0D0;
            text-align: center;
        }
    </style>
</head>
<body>
        <button onclick="what_time();">What is the time?</button>
        <h1 id="time">Result</h1>
    <script>
        async function what_time(){
            result = await eel.what_time()();
            document.getElementById('time').innerHTML = result;
        }
    </script>
</body>
</html>

На цьому все, Ось тут є документація eel.
Всім удачі!
Підготовлено каналом: https://t.me/cryptopidval