Project structure:

DarkDataset/
├── static/
│   ├── css/
│   │   ├── base.css
│   │   ├── hotbar.css
│   │   └── windows.css
│   ├── icons/
│   │   ├── h_icon.webp
│   │   ├── profile_icon.webp
│   │   └── s_icon.webp
│   ├── js/
│   │   └── main.js
├── templates/
│   ├── components/
│   │   ├── hotbar.html
│   │   └── windows.html
│   └── index.html
├── main.py
└── requirements.txt


Project files:

main.py
```py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/main')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=8081)

```


requirements.txt
```txt
Flask
Flask-Login
Flask-WTF
Flask-SQLAlchemy
Werkzeug
eventlet
Pillow
```


static/css/base.css
```css
:root {
    --base-border-radius: 15px;
    --base-gap: 15px;

    --base-color: #1f1f1f;
    --second-color: #101010;
    --white-color: rgba(255, 255, 255, 0.83);
}
html {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 100px;
}
button {
    padding: 5px 10px;
    border: none;
    outline: none;
    border-radius: var(--base-border-radius);
    cursor: pointer;
}
button:hover {
    filter: brightness(90%);
}
button:active {
    transform: scale(0.95);
}

body {
    padding: 0;
    margin: 0;
}
.screen {
    width: 100vw;
    height: 100vh;
    background-color: var(--base-color);
    display: flex;
}
```


static/css/hotbar.css
```css
.hotbar {
    display: flex;
    border-radius: var(--base-border-radius);
    position: absolute;
    left: var(--base-gap);
    top: var(--base-gap);
    height: 50px;
    background-color: var(--second-color);
}
.hotbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    outline: none;
    padding: 10px;
    img {
        width: 100%;
        height: 100%;
        transition: scale 0.1s;
    }
}
.hotbar-button:hover {
    img {
        transform: scale(1.1);
    }
}
.hotbar-button:active {
    img {
        transform: scale(0.95);
    }
}


```


static/css/windows.css
```css
.windows-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.window {
    display: flex;
    position: absolute;
    width: 1000px;
    height: 700px;
    background-color: var(--second-color);
    border-radius: var(--base-border-radius);
    overflow: hidden;
}
.window-controls-container {
    width: 100%;
    height: 50px;
    display: flex;
    background-color: #ffffff03;
    flex-direction: row;
    justify-content: space-between;
}
.window-title {
    display: flex;
    color: var(--white-color);
    font-size: 25px;
    align-items: center;
    padding: 10px;
    padding-left: 20px;
}
.window-controls {
    display: flex;
    /* height: 50px; */
    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.close-btn {
    /* height: 40px; */
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 10px;
    background-color: #6e0000;
    cursor: pointer;
}
```


templates/index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DarkDataset</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/hotbar.css">
    <link rel="stylesheet" href="../static/css/windows.css">
</head>
<body>
<script src="../static/js/main.js"></script>
<div class="screen">
    {% include "components/hotbar.html" %}
    {% include "components/windows.html" %}
</div>
</body>
</html>
```


templates/components/hotbar.html
```html
<div class="hotbar">
    <button class="hotbar-button" id="home-btn">
        <img src="../../static/icons/h_icon.webp">
    </button>
    <button class="hotbar-button" id="settings-btn">
        <img src="../../static/icons/s_icon.webp">
    </button>
    <button class="hotbar-button" id="profile-btn">
        <img src="../../static/icons/profile_icon.webp">
    </button>
</div>
```


templates/components/windows.html
```html
<div class="windows-container">
    <div class="window">
        <div class="window-controls-container">
            <div class="window-title">Home</div>
            <div class="window-controls">
                <button class="close-btn"></button>
            </div>
        </div>
    </div>
</div>
```


Вот мой проект.
Сделай так, чтобы содержание курса плавно появяллось при прокручивании.
анимация должна быть такой:
Контейнер чуть спущен вниз, уменьшен и прозрачен
Как только мы до него долистываем, то он поднимается обратно, возвращает размер и становится видимым по opacity.