కవితలు: November 2025

Andhra avakaya
Wieght 500g
Price 426
Ingredients: mango, mirchi powder, haldi, salt
Sprcifications: home made , spicy,

<!DOCTYPE html>

<head>

<title>Nayaa's Kitchen Product Prototype</title>

<style>

/* --- 1. VARIABLES & BASE STYLES --- */

:root {

--color-primary: #800000; /* Deep Red */

--color-accent: #ffd700; /* Gold/Yellow */

--color-text: #333;

--color-border: black;

--transition-speed: 0.5s;

}

body {

font-family: Arial, sans-serif;

margin: 20px;

padding: 0;

background-color: #f4f4f4;

}

/* --- 2. PRODUCT CARD LAYOUT --- */

.product-card {

max-width: 400px;

margin: 50px auto;

background: white;

border: 2px solid var(--color-border);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

overflow: hidden;

text-align: center;

}

.product-image-container {

position: relative;

width: 100%;

height: 300px;

overflow: hidden;

}

.product-image {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

}

.product-card button {

padding: 10px 20px;

margin: 10px 5px;

font-size: 1.1em;

font-weight: bold;

cursor: pointer;

border: 2px solid var(--color-primary);

background-color: white;

color: var(--color-primary);

transition: background-color 0.3s, color 0.3s;

}

.product-card button:hover {

background-color: var(--color-primary);

color: var(--color-accent);

}

/* --- 3. SLIDING PANELS (KEY INTERACTION) --- */

.slide-panel {

width: 0;

padding: 0;

overflow: hidden;

background-color: #ffe0b2; /* Light Peach */

color: var(--color-text);

text-align: left;

transition: width var(--transition-speed) ease-in-out, padding var(--transition-speed) ease-in-out;

border-top: 1px solid var(--color-border);

border-bottom: 1px solid var(--color-border);

display: flex;

flex-direction: column;

gap: 10px;

box-sizing: border-box;

}

/* State when open */

.slide-panel.open {

width: 100%;

padding: 15px 20px;

}

.slide-panel h3 {

margin-top: 0;

color: var(--color-primary);

border-bottom: 2px solid var(--color-accent);

padding-bottom: 5px;

}

.panel-content p {

font-size: 1.05em;

margin: 5px 0;

line-height: 1.5;

}

.panel-content strong {

color: var(--color-primary);

font-size: 1.1em;

}

/* --- 4. ORDER CONTROLS --- */

.order-controls {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px 20px;

border-top: 1px solid #ccc;

}

.order-controls select {

padding: 8px;

font-size: 1.1em;

font-weight: bold;

border: 2px solid var(--color-primary);

}

/* --- 5. ADDRESS FORM STYLING --- */

#address-form-container {

display: none; /* Hidden by default */

padding: 20px;

background-color: #f7f7f7;

border-top: 3px double var(--color-primary);

text-align: left;

}

.form-group {

margin-bottom: 15px;

}

.form-group label {

display: none; /* Hide label as requested to put label inside text box */

}

.form-group input {

width: 100%;

padding: 15px 10px;

box-sizing: border-box;

border: 2px solid var(--color-border); /* Black border */

font-weight: bold; /* Bold font */

color: var(--color-text);

font-size: 1em;

/* Placeholder for label inside text box (Grey colour) */

background-color: white;

background-image: none;

}

/* Style the placeholder text */

::placeholder {

color: grey;

font-weight: bold;

}

#form-submit-button {

width: 100%;

background-color: var(--color-accent);

color: var(--color-primary);

border-color: var(--color-primary);

margin-top: 20px;

}

/* --- 6. POPUP STYLING --- */

@keyframes sparkle {

0%, 100% { color: var(--color-primary); transform: scale(1); }

50% { color: var(--color-accent); transform: scale(1.1); text-shadow: 0 0 10px var(--color-accent); }

}

.flash-sparkle {

animation: sparkle 0.5s infinite alternate;

}

</style>

</head>

<body>

<h2>మసాల మాగాయ ఊరగాయ (Masala Maagaya Pickle)</h2>

</div>

Open Details

</button>

<h3>Product Details</h3>

<p><strong>Weight:</strong> 500 grams</p>

<p><strong>Price:</strong> ₹ 350.00</p>

<p><strong>Ingredients:</strong> Fresh Mango pieces, Mustard powder, Fenugreek, Red Chilli Powder, Groundnut Oil, Turmeric, Salt.</p>

</div>

About the Product

</button>

</div>

<h3>Specifications</h3>

<p><strong>Shelf Life:</strong> 12 Months (Refrigerated)</p>

<p><strong>Taste Profile:</strong> Tangy and Medium Spicy.</p>

<p><strong>Storage:</strong> Store in a cool, dry place. Use a dry spoon.</p>

</div>

// Generate 1 to 10 options

for (let i = 1; i <= 10; i++) {

document.write(`<option value="${i}">${i}</option>`);

}

</script>

</select>

</div>

<h3>Delivery Address</h3>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Submit Order

</button>

</form>

</div>

// --- 1. PRODUCT DATA & CONFIG ---

const PRODUCT_PRICE = 350.00; // Price of the 500g product

const DELIVERY_CHARGE = 50.00; // Simulated flat delivery charge

const VENDOR_EMAIL = 'nayaaskitchen@gmail.com';

const PHONEPE_NUMBER = '9440617817';

// --- 2. INTERACTION HANDLERS ---

function toggleDetails(panelId) {

const panel = document.getElementById(panelId);

const isOpen = panel.classList.contains('open');

// Close all panels before opening the requested one (for a clean look)

document.querySelectorAll('.slide-panel').forEach(p => {

if (p.id !== panelId) {

p.classList.remove('open');

}

});

// Toggle the requested panel

panel.classList.toggle('open', !isOpen);

// Hide address form when panels are toggled

document.getElementById('address-form-container').style.display = 'none';

}

function showAddressForm() {

const container = document.getElementById('address-form-container');

// Ensure both detail panels are open before showing the form, or close them

if (document.getElementById('details-panel').classList.contains('open') &&

document.getElementById('specifications-panel').classList.contains('open')) {

container.style.display = 'block';

container.scrollIntoView({ behavior: 'smooth', block: 'start' });

} else {

alert("Please open the 'Product Details' and 'Specifications' first.");

toggleDetails('details-panel'); // Prompt user to open details

}

// --- 3. PIN CODE SIMULATION (Frontend Placeholder) ---

function simulatePinCodeFill(pincode) {

const cityInput = document.getElementById('city');

const stateInput = document.getElementById('state');

const areaInput = document.getElementById('area');

// Clear fields initially

cityInput.value = '';

stateInput.value = '';

areaInput.value = '';

// This is a SIMULATION. Real PIN code lookup requires a server-side API.

if (pincode.length === 6) {

switch(pincode) {

case '500033':

cityInput.value = 'Hyderabad';

stateInput.value = 'Telangana';

areaInput.value = 'Gachibowli Area';

break;

case '520002':

cityInput.value = 'Vijayawada';

stateInput.value = 'Andhra Pradesh';

areaInput.value = 'Labbipet Area';

break;

default:

// Placeholder for automatic fill failure

cityInput.value = 'City Name';

stateInput.value = 'State Name';

areaInput.value = 'Area Name';

}

// Make simulated fields editable if the PIN doesn't match a known value

cityInput.readOnly = pincode.length === 6;

stateInput.readOnly = pincode.length === 6;

areaInput.readOnly = pincode.length === 6;

}

// --- 4. ORDER & SUBMISSION LOGIC ---

function updateTotal() {

const qty = parseInt(document.getElementById('qty-select').value) || 1;

const subtotal = qty * PRODUCT_PRICE;

return subtotal + DELIVERY_CHARGE;

}

function handleOrderSubmission() {

const form = document.getElementById('order-form');

if (!form.checkValidity()) {

// Manually trigger browser validation error messages

form.reportValidity();

return;

}

const totalAmount = updateTotal();

const qty = parseInt(document.getElementById('qty-select').value) || 1;

const name = document.getElementById('customer-name').value;

const mobile = document.getElementById('mobile').value;

const address = document.getElementById('full-address').value;

const pincode = document.getElementById('pincode').value;

const city = document.getElementById('city').value;

const state = document.getElementById('state').value;

const subject = `New Order from ${name} - Total: ₹${totalAmount.toFixed(2)}`;

const body = `

Order Details:

------------------------------------------

Product: Masala Maagaya Pickle (500g)

Quantity: ${qty} units

Price per unit: ₹${PRODUCT_PRICE.toFixed(2)}

Subtotal: ₹${(qty * PRODUCT_PRICE).toFixed(2)}

Delivery Charge: ₹${DELIVERY_CHARGE.toFixed(2)}

------------------------------------------

Final Total Amount: ₹${totalAmount.toFixed(2)}

Customer Details:

------------------------------------------

Name: ${name}

Mobile: ${mobile}

PIN Code: ${pincode}

Delivery Location: ${city}, ${state}

Full Address: ${address}

ACTION REQUIRED:

Please confirm this order by sending this email.

(DO NOT EDIT THIS MAIL BODY)

// 1. POPUP: Total Amount Confirmation

const confirmationMessage = `Total amount of your order is ₹${totalAmount.toFixed(2)} (Delivery Charges ₹${DELIVERY_CHARGE.toFixed(2)} Extra). If confirmed, please send the pre-filled email to place your order.`;

alert(confirmationMessage);

// 2. MAILTO LINK: Opens pre-filled email

const mailtoLink = `mailto:${VENDOR_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

window.location.href = mailtoLink;

// 3. PHONEPE/TIMER LOGIC (Simulated due to security constraints)

// We use a simulated setTimeout to represent the 5-second delay before "calling" PhonePe

setTimeout(() => {

// In a real application, this would be a secure API call, NOT an unsecure browser redirect.

// We simulate the action by changing the final alert message.

// Final Message Box Pop Up

alert('Thank you for your order! We are now processing your payment through PhonePe. Please wait for payment confirmation.\n\nThanks visit again!');

// Flash Sparkle on the 'Thanks visit again' message (Visual effect only)

document.querySelector('.product-card h2').innerHTML = `

<span class="flash-sparkle">Thanks visit again!</span>

// Clear the form and hide it

form.reset();

document.getElementById('address-form-container').style.display = 'none';

document.getElementById('details-panel').classList.remove('open');

document.getElementById('specifications-panel').classList.remove('open');

}, 5000); // 5 second timer

}

</script>

</body>

</html>

Spicy Gongura Pickle

Product Highlights:

Confirm Your Delivery Details

Sunday, November 2, 2025

మసాల మాగాయ ఊరగాయ (Masala Maagaya Pickle)

Product Details

Specifications

Delivery Address