Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Смерть русским!</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
          integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<main id="app">
    <div class="w-full min-h-screen bg-blue-200 flex justify-center py-20">
        <form class="w-thousand max-w-[90%] bg-slate-50 rounded-lg p-5">
            <header>
                <h1 class="text-center text-4xl pt-10 font-bold">Форма добавления заказа</h1>
            </header>

            <!--            Выбор клиента -->
            <div class="mt-10">
                <h3>Выбор клиента:</h3>

                <select class="mt-2 border border-black outline-none">
                    <option v-for="value in clients" :key="value.id">
                        {{ value.name }}
                    </option>
                </select>

                <div class="mt-2">
                    <input type="checkbox">
                    <span class="ml-2">Срочный заказ</span>
                </div>
            </div>

            <!--            Выбор услуг-->
            <div class="mt-10">
                <header>
                    <h3>Выбор услуг</h3>
                </header>

                <ul class="mt-2">
                    <li class="border border-black p-2 mt-2 first:mt-0 relative">
                        <i class="fa-solid fa-xmark absolute top-2 right-2"></i>

                        <h3>Услуга:</h3>

                        <div class="grid grid-cols-2 gap-3 mt-2">
                            <select class="border border-black outline-none">
                                <option v-for="service in services" :key="service.id"
                                > {{ service.name }} -
                                    {{ service.price }}
                                </option>
                            </select>

                            <input type="number" value="1" class="border border-black outline-none">
                        </div>

                    </li>

                    <li class="border border-black p-2 mt-2 first:mt-0 relative hidden">
                        <i class="fa-solid fa-xmark absolute top-2 right-2"></i>

                        <h3>Услуга:</h3>

                        <div class="grid grid-cols-2 gap-3 mt-2">
                            <select class="border border-black outline-none">
                                <option>Проявка плёнки - $10</option>
                                <option>Фото на паспорт - $100</option>
                                <option>Проявка плёнки - $10</option>
                            </select>

                            <input type="number" value="1" class="border border-black outline-none">
                        </div>

                        <div class="mt-2 p-4 border-t border-black">
                            <ul>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (1):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (2):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <div class="mt-2">
                    <button type="button" @click="createDefaultService"
                            class="border border-black px-2 duration-100 hover:bg-slate-200">Добавить услугу
                    </button>
                </div>
            </div>

            <!--            Печать фотографий -->
            <div class="mt-10">
                <header>
                    <h3>Печать фотографий</h3>
                </header>

                <ul class="mt-2">
                    <li class="border border-black p-2 mt-2 first:mt-0 relative">
                        <i class="fa-solid fa-xmark absolute top-2 right-2"></i>

                        <div class="flex items-center">
                            <h3>Копии:</h3>
                            <input type="number" value="1" class="border border-black outline-none ml-2">
                        </div>

                        <div class="mt-2 grid grid-cols-3 gap-3">
                            <input type="text" placeholder="Плёнка" class="border border-black outline-none">
                            <input type="text" placeholder="Кадр" class="border border-black outline-none">

                            <select class="border border-black outline-none">
                                <option>Холст - А2</option>
                                <option>Матовая - А2</option>
                                <option>Глянцевая - А2</option>
                            </select>
                        </div>
                    </li>
                </ul>

                <div class="mt-2">
                    <button class="border border-black px-2 duration-100 hover:bg-slate-200">Добавить услугу</button>
                </div>
            </div>

            <!--            Продажа товаров -->
            <div class="mt-10">
                <header>
                    <h3>Продажа товаров</h3>
                </header>

                <ul class="mt-2">
                    <li class="border border-black p-2 mt-2 first:mt-0 relative">
                        <div class="grid grid-cols-2 gap-3">
                            <select class="border border-black outline-none">
                                <option>Проявка плёнки - $10</option>
                                <option>Фото на паспорт - $100</option>
                                <option>Проявка плёнки - $10</option>
                            </select>

                            <input type="number" value="1" class="border border-black outline-none">
                        </div>

                        <div class="mt-2 p-4 border-t border-black">
                            <ul>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (1):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                                <li class="mt-2 first:mt-0">
                                    <h3>Код плёнки (2):</h3>
                                    <input type="text" class="border border-black px-2 mt-2 outline-none"
                                           placeholder="ee72921">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <div class="mt-2">
                    <button class="border border-black px-2 duration-100 hover:bg-slate-200">Добавить услугу</button>
                </div>
            </div>

            <button type="submit" class="mt-10 border border-black px-2 duration-100 hover:bg-slate-200">Добавить заказ
            </button>
        </form>
    </div>
</main>

<!--  libs-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js" referrerpolicy="no-referrer"></script>

<script src="/js/tailwind.js"></script>
<script src="/js/index.js"></script>
<script src="/js/vue.js"></script>
</body>
</html>