Rasoi_Bazaar/index.html at master · PranavKohli24/Rasoi_Bazaar · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rasoi Bazaar | Indian Kitchen Guide</title>

    <meta property="og:title" content="Rasoi Bazaar - Indian Kitchen Guide" />
    <meta property="og:description" content="Never wonder 'how to make this dish' again. Generate authentic Indian recipes with ingredients you have, alternatives you need, and steps you can follow." />
    <meta property="og:image" content="https://rasoi-bazaar.vercel.app/chef_photo.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Rasoi Bazaar - Indian Kitchen Guide" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://rasoi-bazaar.vercel.app/" />

    <script src="https://cdn.tailwindcss.com"></script>
    <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=Lato:wght@400;700&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="/favicon.png" />

    <style>

      body {
        font-family: 'Lato', sans-serif;
        background-color: #1c1b17; /* bg-stone-900 */
        overflow-x: hidden;
      }
      .font-serif {
        font-family: 'Merriweather', serif;
      }
      .prose ol > li::marker {
          font-weight: 700;
          color: #f97316; /* text-orange-500 */
      }

      /* --- Background Animation --- */
      #background-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(ellipse at top, #3b2f2f, #1a1614),
              radial-gradient(ellipse at bottom, #5a3a1c, #1a1614);
  background-size: 200% 200%;
  animation: gradient-animation 15s ease infinite;
}


      @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-fade-in-up {
        animation: fadeInUp 0.7s ease-out forwards;
      }

      /* --- Celebration Sparkles --- */
      @keyframes sparkle-animation {
        0% {
          transform: scale(0) rotate(0deg);
          opacity: 1;
        }
        50% {
          opacity: 1;
        }
        100% {
          transform: scale(1.5) rotate(180deg);
          opacity: 0;
        }
      }
      .celebration-popup .sparkle {
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        animation: sparkle-animation 1s ease-out forwards;
      }

    </style>
    <script type="importmap">
{
  "imports": {
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.19.0",
    "react/": "https://aistudiocdn.com/react@^19.1.1/",
    "react": "https://aistudiocdn.com/react@^19.1.1"
  }
}
</script>
</head>
  <body>
    <div id="background-animation"></div>
    <div id="root"></div>
    <script type="module" src="/index.tsx"></script>
  </body>
</html>