CookDariaAPI/index.html at main · dashaaaa21/CookDariaAPI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CookDaria</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="./public/output.css">
    <style>

        .fade-in {
            animation: fadeIn 1s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        video {
            object-fit: cover;
            width: 100%;
            height: 100%;
            background: transparent;
        }

        #hero-video {
            opacity: 0;
            transition: opacity 0.5s ease-in;
        }

        #hero-video.loaded {
            opacity: 1;
        }

        html {
            scroll-behavior: smooth;
        }
    </style>


</head>

<body class="smooth-scroll bg-gray-50">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <h1 class="text-2xl font-bold text-orange-600">CookDaria</h1>
            </div>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="" data-nav="home" class="text-orange-600 transition">Home</a>
                <a href="ipes" data-nav="recipes"
                   class="text-gray-700 hover:text-orange-600 transition">Recipes</a>
                <a href="" data-nav="history"
                   class="text-gray-700 hover:text-orange-600 transition">History</a>
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden flex items-center">
                <button id="mobile-menu-btn" class="text-gray-700 text-2xl p-2 hover:text-orange-600 transition">
                    ☰
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
        <div class="px-2 pt-2 pb-3 space-y-1">
            <a href="" data-nav="home" class="block px-3 py-2 text-orange-600 transition">Home</a>
            <a href="" data-nav="recipes"
               class="block px-3 py-2 text-gray-700 hover:text-orange-600 transition">Recipes</a>
            <a href="" data-nav="history"
               class="block px-3 py-2 text-gray-700 hover:text-orange-600 transition">History</a>
        </div>
    </div>
</nav>

<!-- Main Content  -->
<main id="main-content">
</main>

<div id="toast-container" class="fixed top-20 right-4 z-50 flex flex-col gap-2"></div>
<!-- Recipe Modal -->
<div id="recipe-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto relative">
        <button onclick="closeRecipeModal()"
                class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 text-3xl">&times;</button>
        <h2 id="modal-recipe-title" class="text-2xl font-bold text-gray-800 p-4 border-b">Recipe</h2>
        <div id="modal-recipe-content" class="p-6">
            <!-- Recipe details will load here -->
        </div>
    </div>
</div>


<script src="./src/config.js"></script>
<script src="./src/lib/utils.js"></script>
<script src="./src/lib/templates.js"></script>
<script src="./src/lib/modal.js"></script>
<script src="./src/api/api.js"></script>
<script src="./src/js/animation.js"></script>
<script src="./src/js/dragdrop.js"></script>
<script src="./src/js/ingredients.js"></script>
<script src="./src/js/recipes.js"></script>
<script src="./src/js/home.js"></script>
<script src="./src/js/recipes-page.js"></script>


<script src="./src/pages/index.js"></script>
<script src="./src/pages/recipes.js"></script>
<script src="./src/pages/history.js"></script>


<script src="./src/app.js"></script>
</body>

</html>