User: 
    Create a professional, visually appealing, and well-styled HTML code for the following request:
    "Продажа мороженного, список мороженного и цена"

    Ensure the HTML code includes:
    - A vibrant and eye-catching design.
    - Large and clear text.
    - Beautiful and modern styles.
    - Professional layout and structure.
    - All styles and scripts should be included in a single HTML file.
    - The design should be responsive and adapt well to different window sizes, especially fitting inside a modal window.

    Do not include any comments or explanations in the HTML code. The HTML code should be clean and ready to be rendered in a browser.
    
Assistant: <html>
<head>
    <title>Продажа мороженного</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=numero+1" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=numero+1" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <h1>Продажа мороженного</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#menu">Меню</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h2>Выберите мороженое</h2>
            </div>
        </section>

        <section id="menu" class="menu">
            <div class="container">
                <div class="dish" onclick="location.href='dish1.html';">
                    <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого">
                    <div class="description">
                        <h3>Мороженое 1</h3>
                        <div class="price">Цена: 500 руб.</div>
                    </div>
                </div>
                <div class="dish" onclick="location.href='dish2.html';">
                    <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого">
                    <div class="description">
                        <h3>Мороженое 2</h3>
                        <div class="price">Цена: 600 руб.</div>
                    </div>
                </div>
                <div class="dish" onclick="location.href='dish3.html';">
                    <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого">
                    <div class="description">
                        <h3>Мороженое 3</h3>
                        <div class="price">Цена: 700 руб.</div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="copyright">
                <p>© 2021 Продажа мороженного. Все права защищены.</p>
            </div>
        </div>
    </footer>
</body>
</html>
User: 
    Create a professional, visually appealing, and well-styled HTML code for the following request:
    "Добавь красивые стили для сайта"

    Ensure the HTML code includes:
    - A vibrant and eye-catching design.
    - Large and clear text.
    - Beautiful and modern styles.
    - Professional layout and structure.
    - All styles and scripts should be included in a single HTML file.
    - The design should be responsive and adapt well to different window sizes, especially fitting inside a modal window.

    Do not include any comments or explanations in the HTML code. The HTML code should be clean and ready to be rendered in a browser.
    
Assistant: <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Продажа мороженного</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom right, #ffcccb, #ff99cc);
            color: #333;
        }
        header {
            background: #ff6699;
            padding: 20px;
            text-align: center;
        }
        h1 {
            font-size: 2.5em;
            color: white;
            margin: 0;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin: 0 15px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.2em;
        }
        .hero {
            text-align: center;
            padding: 50px 20px;
            background: #ff99cc;
        }
        .hero h2 {
            font-size: 2em;
            margin: 0;
            color: white;
        }
        .menu {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }
        .dish {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            margin: 15px;
            padding: 20px;
            text-align: center;
            transition: transform 0.2s;
            cursor: pointer;
            width: 200px;
        }
        .dish:hover {
            transform: scale(1.05);
        }
        .dish img {
            border-radius: 10px;
            width: 100%;
            height: auto;
        }
        .description h3 {
            font-size: 1.5em;
            margin: 10px 0;
        }
        .price {
            font-size: 1.2em;
            color: #ff6699;
        }
        footer {
            text-align: center;
            padding: 20px;
            background: #ff6699;
            color: white;
        }
        @media (max-width: 600px) {
            .dish {
                width: 90%;
            }
            h1, h2 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Продажа мороженного</h1>
        <nav>
            <ul>
                <li><a href="#menu">Меню</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h2>Выберите мороженое</h2>
        </section>

        <section id="menu" class="menu">
            <div class="dish" onclick="location.href='dish1.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 1</h3>
                    <div class="price">Цена: 500 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish2.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 2</h3>
                    <div class="price">Цена: 600 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish3.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 3</h3>
                    <div class="price">Цена: 700 руб.</div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2021 Продажа мороженного. Все права защищены.</p>
    </footer>
</body>
</html>
User: 
    Modify the following HTML element based on the user's request:
    "Измени стиль"

    Original HTML:
    "<section id="menu" class="menu">
            <div class="dish" onclick="location.href='dish1.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 1</h3>
                    <div class="price">Цена: 500 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish2.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 2</h3>
                    <div class="price">Цена: 600 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish3.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 3</h3>
                    <div class="price">Цена: 700 руб.</div>
                </div>
            </div>
        </section>"

    Ensure the modification is relevant to the user's request while keeping the style and theme consistent with the original element. Do not include any comments or explanations in the modified HTML code.
    The modified HTML code must be clean and only contain the necessary code without any additional commentary or unnecessary text. Focus on delivering the requested changes in a precise manner.
    Avoid providing descriptive text, explanations, or anything unrelated to the requested change.
    
Assistant: <section id="menu" class="menu" style="display: flex; flex-direction: column; align-items: center; padding: 20px;">
    <div class="dish" onclick="location.href='dish1.html';" style="background: #fff; border-radius: 15px; padding: 20px; margin: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s;">
        <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого" style="border-radius: 15px; width: 100%; height: auto;">
        <div class="description" style="text-align: center;">
            <h3 style="font-size: 1.6em; color: #ff6699;">Мороженое 1</h3>
            <div class="price" style="font-size: 1.3em; color: #ff3366;">Цена: 500 руб.</div>
        </div>
    </div>
    <div class="dish" onclick="location.href='dish2.html';" style="background: #fff; border-radius: 15px; padding: 20px; margin: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s;">
        <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого" style="border-radius: 15px; width: 100%; height: auto;">
        <div class="description" style="text-align: center;">
            <h3 style="font-size: 1.6em; color: #ff6699;">Мороженое 2</h3>
            <div class="price" style="font-size: 1.3em; color: #ff3366;">Цена: 600 руб.</div>
        </div>
    </div>
    <div class="dish" onclick="location.href='dish3.html';" style="background: #fff; border-radius: 15px; padding: 20px; margin: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s;">
        <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого" style="border-radius: 15px; width: 100%; height: auto;">
        <div class="description" style="text-align: center;">
            <h3 style="font-size: 1.6em; color: #ff6699;">Мороженое 3</h3>
            <div class="price" style="font-size: 1.3em; color: #ff3366;">Цена: 700 руб.</div>
        </div>
    </div>
</section>
User: 
    Create a professional, visually appealing, and well-styled HTML code for the following request:
    "Измени фон сайта на голубой яркий цвет"

    Ensure the HTML code includes:
    - A vibrant and eye-catching design.
    - Large and clear text.
    - Beautiful and modern styles.
    - Professional layout and structure.
    - All styles and scripts should be included in a single HTML file.
    - The design should be responsive and adapt well to different window sizes, especially fitting inside a modal window.

    Do not include any comments or explanations in the HTML code. The HTML code should be clean and ready to be rendered in a browser.
    
Assistant: <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Продажа мороженного</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background: #00bfff;
            color: #333;
        }
        header {
            background: #009acd;
            padding: 20px;
            text-align: center;
        }
        h1 {
            font-size: 2.5em;
            color: white;
            margin: 0;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin: 0 15px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.2em;
        }
        .hero {
            text-align: center;
            padding: 50px 20px;
            background: #87ceeb;
        }
        .hero h2 {
            font-size: 2em;
            margin: 0;
            color: white;
        }
        .menu {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }
        .dish {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            margin: 15px;
            padding: 20px;
            text-align: center;
            transition: transform 0.2s;
            width: 200px;
        }
        .dish:hover {
            transform: scale(1.05);
        }
        .dish img {
            border-radius: 10px;
            width: 100%;
            height: auto;
        }
        .description h3 {
            font-size: 1.5em;
            margin: 10px 0;
        }
        .price {
            font-size: 1.2em;
            color: #009acd;
        }
        footer {
            text-align: center;
            padding: 20px;
            background: #009acd;
            color: white;
        }
        @media (max-width: 600px) {
            .dish {
                width: 90%;
            }
            h1, h2 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Продажа мороженного</h1>
        <nav>
            <ul>
                <li><a href="#menu">Меню</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h2>Выберите мороженое</h2>
        </section>

        <section id="menu" class="menu">
            <div class="dish" onclick="location.href='dish1.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 1</h3>
                    <div class="price">Цена: 500 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish2.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 2</h3>
                    <div class="price">Цена: 600 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish3.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 3</h3>
                    <div class="price">Цена: 700 руб.</div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2021 Продажа мороженного. Все права защищены.</p>
    </footer>
</body>
</html>
User: 
    Modify the following HTML element based on the user's request:
    "Измени стиль на другой"

    Original HTML:
    "<section id="menu" class="menu">
            <div class="dish" onclick="location.href='dish1.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 1</h3>
                    <div class="price">Цена: 500 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish2.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 2</h3>
                    <div class="price">Цена: 600 руб.</div>
                </div>
            </div>
            <div class="dish" onclick="location.href='dish3.html';">
                <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого">
                <div class="description">
                    <h3>Мороженое 3</h3>
                    <div class="price">Цена: 700 руб.</div>
                </div>
            </div>
        </section>"

    Ensure the modification is relevant to the user's request while keeping the style and theme consistent with the original element. Do not include any comments or explanations in the modified HTML code.
    The modified HTML code must be clean and only contain the necessary code without any additional commentary or unnecessary text. Focus on delivering the requested changes in a precise manner.
    Avoid providing descriptive text, explanations, or anything unrelated to the requested change.
    
Assistant: <section id="menu" class="menu" style="display: flex; flex-direction: column; align-items: center; padding: 20px; background: #e0f7fa;">
    <div class="dish" onclick="location.href='dish1.html';" style="background: #ffffff; border-radius: 20px; padding: 20px; margin: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s;">
        <img src="https://via.placeholder.com/150x150.png?text=Мороженое+1" alt="Иллюстрация мороженого" style="border-radius: 20px; width: 100%; height: auto;">
        <div class="description" style="text-align: center;">
            <h3 style="font-size: 1.8em; color: #00796b;">Мороженое 1</h3>
            <div class="price" style="font-size: 1.5em; color: #004d40;">Цена: 500 руб.</div>
        </div>
    </div>
    <div class="dish" onclick="location.href='dish2.html';" style="background: #ffffff; border-radius: 20px; padding: 20px; margin: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s;">
        <img src="https://via.placeholder.com/150x150.png?text=Мороженое+2" alt="Иллюстрация мороженого" style="border-radius: 20px; width: 100%; height: auto;">
        <div class="description" style="text-align: center;">
            <h3 style="font-size: 1.8em; color: #00796b;">Мороженое 2</h3>
            <div class="price" style="font-size: 1.5em; color: #004d40;">Цена: 600 руб.</div>
        </div>
    </div>
    <div class="dish" onclick="location.href='dish3.html';" style="background: #ffffff; border-radius: 20px; padding: 20px; margin: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s;">
        <img src="https://via.placeholder.com/150x150.png?text=Мороженое+3" alt="Иллюстрация мороженого" style="border-radius: 20px; width: 100%; height: auto;">
        <div class="description" style="text-align: center;">
            <h3 style="font-size: 1.8em; color: #00796b;">Мороженое 3</h3>
            <div class="price" style="font-size: 1.5em; color: #004d40;">Цена: 700 руб.</div>
        </div>
    </div>
</section>
User: 
    Create a professional, visually appealing, and well-styled HTML code for the following request:
    "Измени фон сайта на красный яркий цвет"

    Ensure the HTML code includes:
    - A vibrant and eye-catching design.
    - Large and clear text.
    - Beautiful and modern styles.
    - Professional layout and structure.
    - All styles and scripts should be included in a single HTML file.
    - The design should be responsive and adapt well to different window sizes, especially fitting inside a modal window.

    Do not include any comments or explanations in the HTML code. The HTML code should be clean and ready to be rendered in a browser.
    
Assistant: