Anurag.Jangid/TheTiffinFood
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance customization form with input for box selection and update styles for better usability

Browse source
This commit is contained in:
Anurag Jangid 2026-10-08 04:57:31 +05:30
parent 5eb16ec8c9
commit b53bf26b2e
4 changed files with 20 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
pricing.css
View file

@ -19,8 +19,10 @@
.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 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 textarea:focus{border-color:var(--lime)}
.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}

2
pricing.html
View file

@ -53,6 +53,8 @@
<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>

11
pricing.js
View file

@ -44,11 +44,19 @@ document.querySelector("#pricing-options").innerHTML = options
<p>${option.detail}</p>
</div>
<strong>₹${selected.prices[index].toLocaleString("en-IN")}<span>/ month</span></strong>
<a class="button button-primary" href="mailto:hello@thetiffinfood.com?subject=${encodeURIComponent(`${selected.name} mode — ${option.label}`)}">Choose this box <span>↗</span></a>
<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);
@ -56,6 +64,7 @@ document.querySelector("#customize-form").addEventListener("submit", (event) =>
"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"}`,

5
styles.css
View file

@ -10,5 +10,8 @@
.meal-card:hover .food-orb img,.meal-card:focus .food-orb img{transform:scale(1.08);filter:saturate(1.3) contrast(1.12)}
.food-orb span{position:relative;z-index:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);font-weight:500}
.food-orb:after{z-index:2}.food-orb:before{z-index:2}
.schedule-callout{margin:0 5.3vw;padding:54px clamp(24px,5vw,72px);display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:clamp(40px,8vw,130px);align-items:center;background:linear-gradient(115deg,rgba(213,243,75,.13),rgba(213,243,75,.035));border:1px solid rgba(213,243,75,.45);position:relative;overflow:hidden}.schedule-callout:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(213,243,75,.2);border-radius:50%;right:-100px;top:-160px}.schedule-callout-copy{position:relative;z-index:1}.schedule-callout-copy .eyebrow{color:var(--lime);margin-bottom:22px}.schedule-callout-copy h2{font-size:clamp(43px,5vw,72px);line-height:.88;letter-spacing:-.08em;font-weight:500;margin:0 0 22px}.schedule-callout-copy>p:not(.eyebrow){color:var(--paper);font-size:15px;line-height:1.55;max-width:390px;margin-bottom:28px}.schedule-flow{display:flex;align-items:center;gap:clamp(10px,2vw,28px);position:relative;z-index:1}.schedule-step{display:flex;flex-direction:column;gap:7px;min-width:100px}.schedule-step span{color:var(--lime);font:11px "DM Mono",monospace}.schedule-step strong{font-size:17px;font-weight:500}.schedule-step small{color:var(--muted);font:10px/1.4 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.04em}.schedule-arrow{color:var(--lime);font-size:22px}@media(max-width:760px){.schedule-callout{margin:0 20px;padding:38px 25px;grid-template-columns:1fr;gap:38px}.schedule-flow{align-items:flex-start;gap:12px}.schedule-step{min-width:0;flex:1}.schedule-arrow{padding-top:19px;font-size:16px}.schedule-step strong{font-size:14px}.schedule-step small{font-size:9px}}
.marquee-track{transform:translateX(100%);animation:marquee 24s linear infinite}
@keyframes marquee{from{transform:translateX(100%)}to{transform:translateX(-50%)}}
.schedule-callout{margin-top:70px}
@media(max-width:760px){.schedule-callout{margin-top:90px}}