UC/list.html at main · Eeman1113/UC · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC Flare Grocery List (Indian Eggetarian)</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Instrument Serif & Manrope -->
    <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=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">

    <style>
        /* Custom font classes */
        body {
            font-family: 'Manrope', sans-serif;
            background-color: #f5f5f7; /* Apple-like neutral background */
        }

        h1, h2, h3 {
            font-family: 'Instrument Serif', serif;
        }

        /* Animation classes */
        .animate-item {
            opacity: 0;
            filter: blur(8px);
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, filter 0.6s ease-out, transform 0.6s ease-out;
        }

        .animate-item.is-visible {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
        }

        /* Custom styling for a cleaner look */
        .card-container {
            max-width: 800px;
            width: 100%;
        }

        .list-item-hover:hover {
            background-color: #f9fafb; /* A very light gray for hover */
            border-radius: 0.5rem;
        }
    </style>
</head>
<body class="bg-neutral-100 flex items-center justify-center min-h-screen p-4">

    <!-- Card Container -->
    <div class="card-container bg-white rounded-3xl shadow-2xl p-6 sm:p-8 md:p-12 lg:p-16 overflow-hidden">

        <!-- Header Section -->
        <header class="text-center border-b border-gray-200 pb-8 mb-8">
            <div class="animate-item flex justify-center items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-list h-10 w-10 text-black"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-black">UC Grocery List</h1>
            </div>
        </header>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">

            <!-- Column 1 -->
            <div class="space-y-8">
                <!-- Protein Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🥚 PROTEIN & LENTILS</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">Eggs (scrambled, bhurji-style without spice)</li>
                        <li class="p-2 list-item-hover">Soft paneer (crumbled or in cubes)</li>
                        <li class="p-2 list-item-hover">Well-cooked moong dal (yellow lentil soup)</li>
                        <li class="p-2 list-item-hover">Firm tofu (pan-steam or scramble)</li>
                        <li class="p-2 list-item-hover">Smooth peanut or almond butter (creamy only)</li>
                    </ul>
                </section>

                <!-- Grains Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🍞 GRAINS & RICE</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">White rice or idli</li>
                        <li class="p-2 list-item-hover">Poha (flattened rice, cooked soft)</li>
                        <li class="p-2 list-item-hover">Plain instant oatmeal packets</li>
                        <li class="p-2 list-item-hover">White bread or potato bread (no seeds)</li>
                        <li class="p-2 list-item-hover">Saltine crackers or plain rice cakes</li>
                    </ul>
                </section>

                <!-- Vegetables Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🥔 VEGETABLES – PEELED & COOKED</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">White or sweet potatoes (microwave, no skin)</li>
                        <li class="p-2 list-item-hover">Cooked lauki (bottle gourd) or tori (ridge gourd)</li>
                        <li class="p-2 list-item-hover">Steamed carrots or zucchini (peeled)</li>
                        <li class="p-2 list-item-hover">Tomato sauce (smooth, no chunks or seeds)</li>
                    </ul>
                </section>
            </div>

            <!-- Column 2 -->
            <div class="space-y-8">
                <!-- Fruits Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🍌 FRUITS – LOW-RESIDUE</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">Ripe bananas (spotty = easier)</li>
                        <li class="p-2 list-item-hover">Unsweetened applesauce (or stewed apple)</li>
                        <li class="p-2 list-item-hover">Canned peaches or pears in juice</li>
                        <li class="p-2 list-item-hover">Seedless melon cubes (honeydew, cantaloupe)</li>
                    </ul>
                </section>

                <!-- Dairy Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🥛 DAIRY OR DAIRY-FREE</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">Plain yogurt (dahi)</li>
                        <li class="p-2 list-item-hover">Lactose-free milk or almond/oat milk</li>
                        <li class="p-2 list-item-hover">Hard cheese slices (cheddar, Swiss)</li>
                    </ul>
                </section>

                <!-- Quick Meal Basics Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🥣 QUICK MEAL BASICS</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">Low-sodium veggie broth (carton or cubes)</li>
                        <li class="p-2 list-item-hover">Plain microwave rice or ramen (discard flavor packet)</li>
                        <li class="p-2 list-item-hover">Unsweetened protein powder (whey-isolate or plant)</li>
                        <li class="p-2 list-item-hover">Electrolyte packets (zero-sugar versions)</li>
                    </ul>
                </section>
            </div>

             <!-- Full-width Sections -->
            <div class="md:col-span-2 space-y-8">
                 <!-- Flavor Boosters Section -->
                <section class="animate-item">
                    <h3 class="text-2xl font-bold text-black mb-4">🧂 SAFE FLAVOR BOOSTERS</h3>
                    <ul class="space-y-2 text-gray-700 text-base">
                        <li class="p-2 list-item-hover">Ghee, olive oil, or butter</li>
                        <li class="p-2 list-item-hover">Salt, turmeric (haldi), cumin powder (jeera), asafoetida (hing)</li>
                        <li class="p-2 list-item-hover">Ginger paste (in moderation)</li>
                        <li class="p-2 list-item-hover">Maple syrup or honey (keep ≤1 Tbsp/day)</li>
                    </ul>
                </section>

                <!-- Leave on Shelf Section -->
                <section class="animate-item bg-red-50 rounded-xl p-6">
                    <h3 class="text-2xl font-bold text-red-800 mb-4">🚫 LEAVE ON THE SHELF</h3>
                    <p class="text-red-700 text-base">
                        Spicy curries, garam masala, chili powder. Whole-grain anything (atta, brown rice). Raw salads, corn, broccoli, beans, nuts, seeds. Whole lentils (chana, rajma). Sugary drinks, alcohol or caffeine.
                    </p>
                </section>
            </div>
        </div>

        <!-- Footer / Grab-and-Go Section -->
        <footer class="animate-item border-t border-gray-200 pt-8 mt-8">
             <div class="bg-gray-100 rounded-xl p-6">
                 <h3 class="text-xl font-bold text-black mb-3">Grab-and-Go Snack Pack</h3>
                 <p class="text-gray-700 text-base mb-4">1 banana + 1 plain rice cake + 1 squeezable applesauce pouch + 1 bottle lactose-free milk = no prep, ~20 g added sugar total.</p>
                 <p class="text-sm text-gray-500 font-medium">Stick to the list, restock weekly, and stash extras in the freezer. Feel better sooner.</p>
             </div>
        </footer>

    </div>

    <script>
        // JavaScript for sequential animation
        document.addEventListener('DOMContentLoaded', function() {
            const items = document.querySelectorAll('.animate-item');

            items.forEach((item, index) => {
                // Stagger the animation start time
                setTimeout(() => {
                    item.classList.add('is-visible');
                }, index * 120); // 120ms delay between each item
            });
        });
    </script>

</body>
</html>