Suyash091/urmi-ai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tiffin food

Browse source
This commit is contained in:
debu-2 2026-10-08 05:19:46 +05:30
parent 5ced0d0812
commit 4697dab339
8 changed files with 431 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

93
TheTiffinFood/README.md Normal file
View file

@ -0,0 +1,93 @@
# The Tiffin Food
Hyper-futuristic landing page and ordering flow for a goal-oriented tiffin service.
The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward, then customize delivery around their office or college schedule:
- **Lean mode** — minimal-fat meals for a lighter, sharper routine
- **Protein mode** — protein-focused meals to support strength and training
- **Bulk mode** — carbohydrate and protein-focused meals for intentional gains
- **Balanced mode** — a balanced mix of nutrients for sustainable everyday eating
## Pricing
Each mode has three monthly meal-frequency plans:
| Mode | Breakfast, lunch & dinner | Lunch & dinner | Dinner |
| --- | ---: | ---: | ---: |
| Balanced | ₹5,000 | ₹4,000 | ₹2,000 |
| Bulk | ₹6,000 | ₹5,000 | ₹2,500 |
| Protein | ₹6,500 | ₹5,500 | ₹3,000 |
| Lean | ₹7,000 | ₹6,000 | ₹3,500 |
## Experience
The page combines a dark editorial interface with neon lime accents, orbital motion-inspired graphics, and hyper-realistic food photography. It includes:
- Hero section with an orbital meal visual
- Responsive navigation and calls to action
- Animated principles marquee
- Highlighted “Not home at lunchtime?” positioning explaining how customers can receive a tiffin before leaving, pack it, and take it to work or college
- Four interactive meal goal cards that open a mode-specific pricing page
- Monthly pricing for breakfast/lunch/dinner, lunch/dinner, and dinner plans
- Tiffin customization for office or college delivery
- Delivery windows for morning, afternoon, evening, or custom timing
- Meal preference capture, including dietary and ingredient requests
- WhatsApp Business redirect with a pre-filled customization message
- Hover and keyboard focus states for meal cards
- Accessible keyboard and click navigation from each meal goal card
- Responsive layouts for desktop, tablet, and mobile screens
## Project structure
```text
.
├── index.html # Page structure and content
├── styles.css # Visual system, responsive layout, and image treatment
├── script.js # Meal card navigation
├── pricing.html # Mode-specific pricing page
├── pricing.css # Pricing page layout and responsive styles
├── pricing.js # Pricing data and plan rendering
└── README.md # Project documentation
```
## Run locally
This is a dependency-free static site. Open `index.html` directly in a browser, or serve the folder with any local web server:
```bash
python -m http.server 8000
```
Then visit [http://localhost:8000](http://localhost:8000).
## Image sources
Meal photography is loaded from Unsplash using optimized image URLs. An internet connection is required for the remote images to appear. The page still retains its layout and visual overlays if the images are unavailable.
## Customization
- Update meal copy and labels in `index.html`.
- Adjust colors and responsive breakpoints in `styles.css`.
- Change the image URLs in the `.food-orb` elements to use different meals.
- Update plan names, descriptions, and prices in `pricing.js`.
- Update delivery destinations, timing windows, and preference fields in `pricing.html`.
- Update the WhatsApp Business recipient in `pricing.js` by changing `WHATSAPP_NUMBER`. Use the full international number without `+`, spaces, or dashes.
## WhatsApp ordering
Submitting the customization form opens WhatsApp with a message containing:
- Selected meal mode
- Destination (office or college)
- Preferred delivery window
- Meal preferences
The customer reviews the pre-filled message and sends it from WhatsApp. The current recipient is configured as `919453226814`.
## Brand direction
**Tone:** precise, energetic, modern, and intentional
**Primary accent:** neon lime
**Typography:** Space Grotesk for display text and DM Mono for labels and metadata
**Tagline:** *Eat with intent.*

121
TheTiffinFood/index.html Normal file
View file

@ -0,0 +1,121 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#090b12" />
<meta name="description" content="The Tiffin Food — goal-oriented meals for the body you are building." />
<title>The Tiffin Food — Eat with intent</title>
<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=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="noise"></div>
<header class="site-header">
<a class="brand" href="#" aria-label="The Tiffin Food home">
<span class="brand-mark"><i></i><i></i><i></i></span>
<span>THE TIFFIN<br /><b>FOOD</b></span>
</a>
<nav class="nav-links" aria-label="Main navigation">
<a href="#menu">The menu</a>
<a href="#method">Our method</a>
<a href="#contact">Contact</a>
</nav>
<a class="header-cta" href="#menu">Build your box <span>↗</span></a>
</header>
<main>
<section class="hero">
<div class="hero-copy">
<p class="eyebrow"><span class="pulse"></span> Food for the body in progress</p>
<h1>Eat with<br /><em>intent.</em></h1>
<p class="hero-description">Goal-oriented meals, cooked fresh and timed for your office or college day. No noise. Just the right fuel for wherever you are going.</p>
<a class="button button-primary" href="#menu">Find your fuel <span>↓</span></a>
</div>
<div class="hero-orbit" aria-hidden="true">
<img class="hero-food-image" src="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1100&q=88" alt="" />
<div class="orbit orbit-one"></div>
<div class="orbit orbit-two"></div>
<div class="orbit orbit-three"></div>
<div class="core">
<span class="core-kicker">01 / 04</span>
<strong>FUEL<br />THE<br /><em>FORM</em></strong>
<span class="core-line"></span>
<span class="core-caption">Precision nutrition<br />for real life.</span>
</div>
<span class="orbit-label label-top">NUTRIENT<br />DENSITY</span>
<span class="orbit-label label-right">FRESH<br />EVERY DAY</span>
</div>
<div class="scroll-note"><span>01</span><span class="scroll-line"></span><span>SCROLL TO EXPLORE</span></div>
</section>
<section class="marquee" aria-label="Our principles">
<div class="marquee-track"><span>CALCULATED FLAVOR</span><b>✳</b><span>FRESH BY DESIGN</span><b>✳</b><span>YOUR GOAL. OUR CRAFT.</span><b>✳</b><span>CALCULATED FLAVOR</span><b>✳</b></div>
</section>
<section class="schedule-callout" aria-labelledby="schedule-heading">
<div class="schedule-callout-copy">
<p class="eyebrow"><span class="pulse"></span> Built for the day ahead</p>
<h2 id="schedule-heading">Not home at<br /><em>lunchtime?</em></h2>
<p>Get your tiffin before you leave, pack it for the office or college, and eat fresh when your schedule says.</p>
<a class="text-link" href="pricing.html?mode=balanced">Set your arrival time <span>↗</span></a>
</div>
<div class="schedule-flow" aria-label="How scheduled delivery works">
<div class="schedule-step"><span>01</span><strong>Choose</strong><small>Your meal plan</small></div>
<span class="schedule-arrow">→</span>
<div class="schedule-step"><span>02</span><strong>Receive</strong><small>Before you head out</small></div>
<span class="schedule-arrow">→</span>
<div class="schedule-step"><span>03</span><strong>Pack & go</strong><small>Fresh food, your timing</small></div>
</div>
</section>
<section class="menu-section" id="menu">
<div class="section-intro">
<p class="eyebrow">02 / Choose your direction</p>
<h2>Four ways to<br /><em>show up.</em></h2>
<p>Every body has a different brief. Pick the one that sounds like your next chapter.</p>
</div>
<div class="meal-grid">
<article class="meal-card card-lime" data-goal="Lean" data-mode="lean" tabindex="0">
<div class="card-number">01</div>
<div class="food-orb orb-lime"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=700&q=88" alt="Fresh salad bowl with vegetables and grains" /><span>LOW<br />FAT</span></div>
<div class="card-content"><p class="card-tag">The cut</p><h3>Lean<br />mode</h3><p>Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
</article>
<article class="meal-card card-orange" data-goal="Protein" data-mode="protein" tabindex="0">
<div class="card-number">02</div>
<div class="food-orb orb-orange"><img src="https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&w=700&q=88" alt="High protein chicken and vegetables meal" /><span>HIGH<br />PROTEIN</span></div>
<div class="card-content"><p class="card-tag">The build</p><h3>Protein<br />mode</h3><p>Pure protein power for the work you put in, from first rep to last.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
</article>
<article class="meal-card card-violet" data-goal="Bulk" data-mode="bulk" tabindex="0">
<div class="card-number">03</div>
<div class="food-orb orb-violet"><img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=700&q=88" alt="Colorful rice, vegetables and protein meal" /><span>CARBS +<br />PROTEIN</span></div>
<div class="card-content"><p class="card-tag">The gain</p><h3>Bulk<br />mode</h3><p>Intentional calories, complex carbs and protein in a bigger, bolder box.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
</article>
<article class="meal-card card-blue" data-goal="Balanced" data-mode="balanced" tabindex="0">
<div class="card-number">04</div>
<div class="food-orb orb-blue"><img src="https://images.unsplash.com/photo-1543352634-a1c51d9f1fa7?auto=format&fit=crop&w=700&q=88" alt="Balanced meal with vegetables, grains and protein" /><span>ALL-ROUND<br />GOOD</span></div>
<div class="card-content"><p class="card-tag">The flow</p><h3>Balanced<br />mode</h3><p>A little bit of everything, dialed into a rhythm you can actually keep.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
</article>
</div>
</section>
<section class="method-section" id="method">
<div class="method-stamp">HOW IT<br />WORKS <span>↘</span></div>
<div class="method-copy"><p class="eyebrow">03 / The tiffin protocol</p><h2>Your day.<br /><em>Your tiffin.</em></h2><p>Customize your meals and choose a delivery window that works around your lectures, classes, meetings, and commute. We cook fresh so your tiffin is ready when you are.</p><a class="text-link" href="#menu">Customize your tiffin <span>↗</span></a></div>
<div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Pick the fuel that fits your body and routine.</p></div><div class="step"><span>02</span><h3>Set your timing</h3><p>Choose an office or college delivery window.</p></div><div class="step"><span>03</span><h3>Make it yours</h3><p>Share preferences and we will handle the cooking.</p></div></div>
</section>
<section class="contact-section" id="contact">
<p class="eyebrow">04 / Ready when you are</p>
<h2>Make your next<br /><em>meal count.</em></h2>
<p class="contact-note">Fresh tiffins for busy desks, campuses, and everything in between.</p>
<a class="button button-light" href="#menu">Build your tiffin <span>↗</span></a>
</section>
</main>
<footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2023 The Tiffin Food / Made for your next.</p></footer>
<script src="script.js"></script>
</body>
</html>

32
TheTiffinFood/pricing.css Normal file
View file

@ -0,0 +1,32 @@
.pricing-page{max-width:1180px;margin:0 auto;padding:54px 50px 120px}
.back-link{color:var(--muted);font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.back-link:hover{color:var(--lime)}
.pricing-intro{padding:90px 0 70px;max-width:700px}
.pricing-intro h1{font-size:clamp(64px,10vw,140px);line-height:.88;letter-spacing:-.08em;margin:18px 0 28px}
.pricing-intro>p:last-child{color:var(--muted);font-size:18px;max-width:460px}
.pricing-grid h2{font:500 12px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:18px}
.pricing-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.price-card{min-height:310px;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .25s,transform .25s}
.price-card:hover{border-color:var(--lime);transform:translateY(-5px)}
.price-index{color:var(--lime);font:500 11px "DM Mono",monospace}
.price-card h3{font-size:25px;line-height:1.05;max-width:180px;margin:28px 0 8px}
.price-card p:last-child{color:var(--muted);font:12px "DM Mono",monospace}
.price-card strong{font-size:40px;letter-spacing:-.05em;margin:28px 0}
.price-card strong span{color:var(--muted);font:12px "DM Mono",monospace;letter-spacing:0;margin-left:8px}
.price-card .button{align-self:flex-start}
.customize-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:130px;padding-top:34px;border-top:1px solid var(--line)}
.customize-section h2{font-size:clamp(48px,6vw,82px);line-height:.92;letter-spacing:-.07em;margin:18px 0 26px}
.customize-section>div>p:last-child{color:var(--muted);font-size:16px;line-height:1.6;max-width:430px}
.customize-form{display:grid;gap:10px;align-content:start}
.customize-form label{font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.customize-form select,.customize-form input,.customize-form textarea{width:100%;border:1px solid var(--line);border-radius:0;background:rgba(241,240,234,.04);color:var(--paper);font:14px "Space Grotesk",sans-serif;padding:14px;outline:none}
.customize-form select:focus,.customize-form input:focus,.customize-form textarea:focus{border-color:var(--lime)}
.customize-form input::placeholder,.customize-form textarea::placeholder{color:var(--muted)}
.customize-form input[readonly]{border-color:rgba(213,243,75,.5);color:var(--lime);cursor:default}
.customize-form select option{background:var(--ink);color:var(--paper)}
.customize-form textarea{resize:vertical}
.customize-form .button{margin-top:12px;justify-self:start;border:0;cursor:pointer}
.form-note{color:var(--lime);font:11px "DM Mono",monospace;min-height:16px}
.contact-note{color:var(--muted);margin:0 auto 28px;max-width:380px}
@media(max-width:760px){.pricing-page{padding:38px 20px 80px}.pricing-intro{padding:70px 0 52px}.pricing-options{grid-template-columns:1fr}.price-card{min-height:260px}}
@media(max-width:760px){.customize-section{grid-template-columns:1fr;gap:42px;margin-top:90px}}

69
TheTiffinFood/pricing.html Normal file
View file

@ -0,0 +1,69 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#090b12" />
<title>Choose your rhythm — The Tiffin Food</title>
<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=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="pricing.css" />
</head>
<body>
<div class="noise"></div>
<header class="site-header">
<a class="brand" href="index.html" aria-label="The Tiffin Food home">
<span class="brand-mark"><i></i><i></i><i></i></span>
<span>THE TIFFIN<br /><b>FOOD</b></span>
</a>
<a class="header-cta" href="index.html#menu">Change your goal <span>↗</span></a>
</header>
<main class="pricing-page">
<a class="back-link" href="index.html#menu">← Back to directions</a>
<section class="pricing-intro">
<p class="eyebrow">05 / Set your frequency</p>
<h1><span id="mode-title">Your</span><br /><em>rhythm.</em></h1>
<p id="mode-description">Fresh meals, prepared around the way you want to show up.</p>
</section>
<section class="pricing-grid" aria-labelledby="pricing-heading">
<h2 id="pricing-heading">Choose your box</h2>
<div id="pricing-options" class="pricing-options"></div>
</section>
<section class="customize-section" aria-labelledby="customize-heading">
<div>
<p class="eyebrow">06 / Make it work for you</p>
<h2 id="customize-heading">Customize your<br /><em>tiffin run.</em></h2>
<p>Tell us where you spend your day and when you need your meal. We will prepare it fresh and plan around your schedule.</p>
</div>
<form id="customize-form" class="customize-form">
<label for="destination">I need my tiffin at</label>
<select id="destination" name="destination">
<option>Office</option>
<option>College</option>
</select>
<label for="timing">Preferred delivery window</label>
<select id="timing" name="timing">
<option>7:30 AM – 9:00 AM</option>
<option>12:00 PM – 1:30 PM</option>
<option>4:00 PM – 5:30 PM</option>
<option>Custom timing (tell us below)</option>
</select>
<label for="box">Your box</label>
<input id="box" name="box" type="text" placeholder="Choose a box above" readonly required />
<label for="preferences">Meal preferences</label>
<textarea id="preferences" name="preferences" rows="3" placeholder="Less spicy, no onion, add extra protein..."></textarea>
<button class="button button-primary" type="submit">Send my preferences <span>↗</span></button>
<p class="form-note" role="status" aria-live="polite"></p>
</form>
</section>
</main>
<footer><a class="brand" href="index.html"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2023 The Tiffin Food / Made for your next.</p></footer>
<script src="pricing.js"></script>
</body>
</html>

74
TheTiffinFood/pricing.js Normal file
View file

@ -0,0 +1,74 @@
const pricing = {
balanced: {
name: "Balanced",
description: "A little bit of everything, dialed into a rhythm you can actually keep.",
prices: [5000, 4000, 2000],
},
bulk: {
name: "Bulk",
description: "Intentional calories, complex carbs and protein in a bigger, bolder box.",
prices: [6000, 5000, 2500],
},
protein: {
name: "Protein",
description: "Pure protein power for the work you put in, from first rep to last.",
prices: [6500, 5500, 3000],
},
lean: {
name: "Lean",
description: "Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.",
prices: [7000, 6000, 3500],
},
};
const WHATSAPP_NUMBER = "919453226814";
const options = [
{ label: "Breakfast, lunch & dinner", detail: "3 meals a day" },
{ label: "Lunch & dinner", detail: "2 meals a day" },
{ label: "Dinner", detail: "1 meal a day" },
];
const mode = new URLSearchParams(window.location.search).get("mode") || "balanced";
const selected = pricing[mode] || pricing.balanced;
document.title = `${selected.name} mode pricing — The Tiffin Food`;
document.querySelector("#mode-title").textContent = `${selected.name} mode`;
document.querySelector("#mode-description").textContent = selected.description;
document.querySelector("#pricing-options").innerHTML = options
.map((option, index) => `
<article class="price-card">
<div>
<p class="price-index">0${index + 1}</p>
<h3>${option.label}</h3>
<p>${option.detail}</p>
</div>
<strong>₹${selected.prices[index].toLocaleString("en-IN")}<span>/ month</span></strong>
<a class="button button-primary choose-box" href="#box" data-box="${option.label} — ₹${selected.prices[index].toLocaleString("en-IN")} / month">Choose this box <span>↗</span></a>
</article>
`)
.join("");
document.querySelectorAll(".choose-box").forEach((button) => {
button.addEventListener("click", () => {
const box = document.querySelector("#box");
box.value = button.dataset.box;
box.focus();
});
});
document.querySelector("#customize-form").addEventListener("submit", (event) => {
event.preventDefault();
const form = new FormData(event.currentTarget);
const message = [
"Hi The Tiffin Food! I would like to customize my tiffin.",
"",
`Plan: ${selected.name} mode`,
`Your box: ${form.get("box")}`,
`Destination: ${form.get("destination")}`,
`Preferred delivery window: ${form.get("timing")}`,
`Meal preferences: ${form.get("preferences") || "None specified"}`,
].join("\n");
document.querySelector(".form-note").textContent = "Opening WhatsApp with your tiffin preferences.";
window.location.href = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`;
});

18
TheTiffinFood/script.js Normal file
View file

@ -0,0 +1,18 @@
document.querySelectorAll(".meal-card").forEach((card) => {
const openPricing = () => {
window.location.href = `pricing.html?mode=${encodeURIComponent(card.dataset.mode)}`;
};
card.querySelector(".card-action").addEventListener("click", openPricing);
card.addEventListener("click", (event) => {
if (event.target.closest(".card-action")) return;
openPricing();
});
card.addEventListener("keydown", (event) => {
if ((event.key === "Enter" || event.key === " ") && event.target === card) {
event.preventDefault();
openPricing();
}
});
});

17
TheTiffinFood/styles.css Normal file
View file

File diff suppressed because one or more lines are too long