Step 1: HTML Template (Embed this in your SitePad page or as custom HTML block)Replace placeholders like {PRODUCT_NAME}, {PRICE}, etc., with values for each product. For example, for the currant: {PRODUCT_NAME} = '"Zita-Jan" smorodina (bahasy 150 manat 1 kg) / Смородина "Зита-Җан" (цена 150 манат 1 кг)', {PRICE} = 150, etc.html

<!DOCTYPE html>
<html lang="tk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заказ {PRODUCT_NAME} | 3-DAMJA</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to the CSS below -->
</head>
<body>
    <div class="container">
        <h2>Заказ {PRODUCT_NAME}</h2>
        <form id="orderForm" action="order-handler.php" method="POST">
            <div class="form-group">
                <label for="name">Adyňyz / Имя:</label>
                <input type="text" id="name" name="name" required>
            </div>

            <div class="form-group">
                <label for="phone">Telefon belgisi / Телефон:</label>
                <input type="tel" id="phone" name="phone" value="+993" required placeholder="65811577">
                <small class="tooltip" id="phoneTooltip">Belginiň diňe soňky sekiz sanyny giriziň (+993 kodundan soň) / Пожалуйста, введите только последние восемь цифр номера (после кода +993)</small>
            </div>

            <div class="form-group">
                <label for="location">Welaýat, şäher saýlaň / Выберите велаят, город:</label>
                <select id="location" name="location" required>
                    <option value="">Seçmek...</option>
                    <option value="0|Gowşurmak zerur del / Доставка не нужна">Gowşurmak zerur del / Доставка не нужна (0 манат)</option>
                    <option value="25|Aşgabat / Ашхабад">Aşgabat / Ашхабад (доставка 25 манат)</option>
                    <option value="30|Gurtly / Куртли">Gurtly / Куртли (доставка 30 манат)</option>
                    <option value="40|Ruhabat / Рухабат">Ruhabat / Рухабат (доставка 40 манат)</option>
                    <option value="40|Ýalkym / Ялкым">Ýalkym / Ялкым (доставка 40 манат)</option>
                    <option value="60|Büzmeýin / Безмеин">Büzmeýin / Безмеин (доставка 60 манат)</option>
                    <option value="60|Büzmeýin GRES / Безмеин ГРЭС">Büzmeýin GRES / Безмеин ГРЭС (доставка 60 манат)</option>
                    <option value="70|Arkadag / Аркадаг">Arkadag / Аркадаг (доставка 70 манат)</option>
                    <option value="40|Täze Zaman / Tәзе Заман">Täze Zaman / Tәze Zaman (доставка 40 манат)</option>
                    <option value="40|Çoganly / Чоганлы">Çoganly / Чоганлы (доставка 40 манат)</option>
                    <option value="40|Änew / Аннау">Änew / Аннау (доставка 40 манат)</option>
                    <option value="100|Balkanabat / Балканабат">Balkanabat / Балканабат (доставка 100 манат в городе)</option>
                    <option value="100|Türkmenbaşy / Туркменбашы">Türkmenbaşy / Туркменбашы (доставка 100 манат в городе)</option>
                    <option value="100|Mary / Мары">Mary / Мары (доставка 100 манат в городе)</option>
                    <option value="100|Türkmenabat /Туркменабат">Türkmenabat /Туркменабат (доставка 100 манат в городе)</option>
                    <option value="100|Kerki / Керки">Kerki / Керки (доставка 100 манат в городе)</option>
                </select>
            </div>

            <div class="form-group">
                <label for="address">Eltip bermek üsti / Адрес доставки:</label>
                <textarea id="address" name="address" rows="3" required></textarea>
            </div>

            <div class="form-group">
                <label for="quantity">{UNIT_LABEL} miqdary / Количество {UNIT_LABEL}:</label>
                {UNIT_FIELD} <!-- For kg: <input type="number" id="quantity" name="quantity" min="0.1" step="0.01" required> -->
                <!-- For lanczyk: <input type="number" id="quantity" name="quantity" min="1" integer required> (adjust min/step as needed) -->
            </div>

            <div class="form-group">
                <label for="date">Eltip bermek güni / Дата доставки:</label>
                <input type="date" id="date" name="date" required>
                <small class="tooltip" id="dateTooltip">Diňe hasyl döwründe sene ýazmagyňyzy haýyş edýäris. / Пожалуйста, введите дату только в период сбора урожая</small>
            </div>

            <div class="form-group">
                <label for="time">Eltip bermek wagty / Время доставки:</label>
                <input type="time" id="time" name="time" required>
                <small class="tooltip" id="timeTooltip">Saýlanan günde eltip bermek diňe XX:XX-den XX:XX-e çenli elýeterlidir / В выбранный день доставка работает только с ХХ:ХХ до ХХ:ХХ</small>
            </div>

            <div class="form-group">
                <label>Töleg / К оплате:</label>
                <div id="total" class="total-field">0 манат</div>
            </div>

            <input type="hidden" name="product_name" value="{PRODUCT_NAME}">
            <input type="hidden" name="price" value="{PRICE}">
            <input type="hidden" name="start_period" value="{START_PERIOD}"> <!-- e.g., 06-25 -->
            <input type="hidden" name="end_period" value="{END_PERIOD}"> <!-- e.g., 07-15 -->
            <input type="hidden" name="unit_type" value="{UNIT_TYPE}"> <!-- 'kg' or 'lanczyk' -->

            <button type="submit">Zaýat etmek / Заказать</button>
        </form>
    </div>
    <script src="script.js"></script> <!-- Link to JS below -->
</body>
</html>

Notes on placeholders:{UNIT_FIELD}: For kg forms, use <input type="number" id="quantity" name="quantity" min="0.1" step="0.1" placeholder="1.5" required>. For lanczyk, use <input type="number" id="quantity" name="quantity" min="1" step="1" placeholder="2" required> (number of containers; sizes can be noted in {UNIT_LABEL} like "lançyk (1-15l) / ланчик (1-15л)"). If you need a size select for lanczyk, let me know to add it (e.g., multiply price by volume factor).
Quantity for kg assumes decimal kg (e.g., 2.5 kg). If you meant grams as '3,000' (for 3 kg), change to integer input and divide by 1000 in JS/PHP calc.
Bilingual labels as per your spec.

Step 2: CSS (styles.css – Save as file, link in HTML)This gives a clean, SitePad-like look: white background, gray borders, 100% width fields, responsive.css

body { font-family: Arial, sans-serif; background: #f9f9f9; color: #333; margin: 0; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h2 { text-align: center; color: #2c5aa0; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
input:focus, select:focus, textarea:focus { border-color: #2c5aa0; outline: none; }
.total-field { font-size: 18px; font-weight: bold; color: #2c5aa0; padding: 10px; background: #f0f8ff; border: 1px solid #ddd; border-radius: 4px; text-align: right; }
button { width: 100%; padding: 12px; background: #2c5aa0; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
button:hover { background: #1e3f70; }
.tooltip { display: none; color: #d32f2f; font-size: 12px; margin-top: 5px; }
.error .tooltip { display: block; }
@media (max-width: 600px) { .container { padding: 10px; } }

Step 3: JavaScript (script.js – Save as file, link in HTML)Handles all features: validation/tooltips, calc, date/time logic. Uses vanilla JS, no libs.javascript

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('orderForm');
    const phone = document.getElementById('phone');
    const location = document.getElementById('location');
    const quantity = document.getElementById('quantity');
    const date = document.getElementById('date');
    const time = document.getElementById('time');
    const total = document.getElementById('total');
    const price = parseFloat(form.querySelector('input[name="price"]').value);
    const startPeriod = form.querySelector('input[name="start_period"]').value; // 'MM-DD'
    const endPeriod = form.querySelector('input[name="end_period"]').value;
    const unitType = form.querySelector('input[name="unit_type"]').value;

    // Phone masking: Only allow 8 digits after +993
    phone.addEventListener('input', function(e) {
        let val = this.value.replace(/\D/g, '').slice(0, 8); // Digits only, max 8
        this.value = '+993' + (val || '');
        if (val.length !== 8) {
            this.parentElement.classList.add('error');
        } else {
            this.parentElement.classList.remove('error');
        }
    });

    // Location price extraction: value="price|label"
    function getDeliveryPrice() {
        const selected = location.options[location.selectedIndex].value.split('|')[0];
        return parseFloat(selected) || 0;
    }

    // Calculate total
    function calculateTotal() {
        const qty = parseFloat(quantity.value) || 0;
        const delivery = getDeliveryPrice();
        const subtotal = price * qty;
        const grandTotal = subtotal + delivery;
        total.textContent = grandTotal.toFixed(2) + ' манат';
    }

    location.addEventListener('change', calculateTotal);
    quantity.addEventListener('input', calculateTotal);

    // Date validation: Future, within annual period (e.g., Jun25-Jul15)
    date.addEventListener('change', function() {
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        const selectedDate = new Date(this.value);
        const [startM, startD] = startPeriod.split('-').map(Number);
        const [endM, endD] = endPeriod.split('-').map(Number);
        const currentYear = today.getFullYear();
        const selectedYear = selectedDate.getFullYear();
        const selectedMonth = selectedDate.getMonth() + 1;
        const selectedDay = selectedDate.getDate();

        let valid = selectedDate > today && // Future only (not today/past)
                    selectedYear >= currentYear && // Not past years
                    ((selectedYear > currentYear) || // Future year: any date in period
                     (selectedYear === currentYear && selectedMonth === startM && selectedDay >= startD) ||
                     (selectedMonth > startM && selectedMonth < endM) ||
                     (selectedMonth === endM && selectedDay <= endD)); // Same year: within period

        if (!valid) {
            this.parentElement.classList.add('error');
        } else {
            this.parentElement.classList.remove('error');
            updateTimeOptions(); // Enable time validation
        }
    });

    // Time validation based on date/season
    function updateTimeOptions() {
        const selectedDate = new Date(date.value);
        const month = selectedDate.getMonth() + 1;
        const day = selectedDate.getDate();
        const isSummer = (month > 7 || (month === 7 && day >= 15)) && (month < 9 || (month === 9 && day <= 15)); // Jul15-Sep15
        const isWeekday = selectedDate.getDay() >= 1 && selectedDate.getDay() <= 5; // Mon-Fri

        let minTime, maxTime;
        if (isSummer) {
            minTime = '08:30';
            maxTime = '19:30';
        } else if (isWeekday) {
            minTime = '11:00';
            maxTime = '14:30';
        } else {
            // Weekend off-season: invalid
            showTimeError('Saýlanan günde eltip bermek ýok / В выбранный день доставка не работает');
            return;
        }

        time.setAttribute('min', minTime);
        time.setAttribute('max', maxTime);
        time.parentElement.querySelector('.tooltip').textContent = `Saýlanan günde eltip bermek diňe ${minTime}-den ${maxTime}-e çenli elýeterlidir / В выбранный день доставка работает только с ${minTime} до ${maxTime}`;
    }

    time.addEventListener('change', function() {
        const min = this.getAttribute('min');
        const max = this.getAttribute('max');
        if (this.value < min || this.value > max) {
            this.parentElement.classList.add('error');
        } else {
            this.parentElement.classList.remove('error');
        }
    });

    function showTimeError(msg) {
        time.parentElement.classList.add('error');
        time.parentElement.querySelector('.tooltip').textContent = msg;
    }

    // Form submit: Basic validation (add more if needed)
    form.addEventListener('submit', function(e) {
        if (!form.checkValidity() || phone.parentElement.classList.contains('error') ||
            date.parentElement.classList.contains('error') || time.parentElement.classList.contains('error')) {
            e.preventDefault();
            alert('Zehmet olmasa, barlyk meýdanlary dogry dolduryň / Пожалуйста, заполните все поля корректно');
        } else {
            // Format phone for submit
            phone.name = 'phone'; // Already +993XXXXXXXX
        }
    });

    // Initial calc
    calculateTotal();
});

Step 4: PHP Email Handler (order-handler.php)Place this on your server. It receives POST data, formats an email, and sends via your SMTP (port 465, SSL). No external deps. Test with a simple submit—logs errors to a file if needed.php

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Collect data
    $name = htmlspecialchars($_POST['name'] ?? '');
    $phone = htmlspecialchars($_POST['phone'] ?? '');
    $location = htmlspecialchars($_POST['location'] ?? '');
    $address = htmlspecialchars($_POST['address'] ?? '');
    $quantity = floatval($_POST['quantity'] ?? 0);
    $date = htmlspecialchars($_POST['date'] ?? '');
    $time = htmlspecialchars($_POST['time'] ?? '');
    $product = htmlspecialchars($_POST['product_name'] ?? '');
    $price = floatval($_POST['price'] ?? 0);
    $unitType = htmlspecialchars($_POST['unit_type'] ?? '');
    $deliveryPrice = explode('|', $location)[0] ?? 0;
    $total = $price * $quantity + $deliveryPrice;

    // Email body
    $body = "New Order:\n\n";
    $body .= "Product: $product\n";
    $body .= "Customer: $name\n";
    $body .= "Phone: $phone\n";
    $body .= "Location: $location\n";
    $body .= "Address: $address\n";
    $body .= "Quantity: $quantity $unitType\n";
    $body .= "Delivery Date/Time: $date $time\n";
    $body .= "Total: $total манат\n";

    // SMTP config from your details
    $smtpHost = 'mail.3-damja.com';
    $smtpPort = 465;
    $smtpUser = 'dukan@3-damja.com';
    $smtpPass = 'BNF&%#26fq~ER+@';
    $fromEmail = 'dukan@3-damja.com';
    $fromName = 'Лавка 3-DAMJA Dukan';
    $toEmail = 'dukan@3-damja.com'; // Change if needed (e.g., admin email)
    $subject = "New Order: $product";

    // Simple SMTP sender (using fsockopen for SSL)
    $socket = fsockopen('ssl://' . $smtpHost, $smtpPort, $errno, $errstr, 30);
    if (!$socket) {
        error_log("SMTP Connection failed: $errstr ($errno)");
        die('Error sending email. Check server logs.');
    }

    // SMTP commands (basic auth)
    fputs($socket, "EHLO " . $_SERVER['SERVER_NAME'] . "\r\n");
    fputs($socket, "AUTH LOGIN\r\n");
    fputs($socket, base64_encode($smtpUser) . "\r\n");
    fputs($socket, base64_encode($smtpPass) . "\r\n");
    fputs($socket, "MAIL FROM: <$fromEmail>\r\n");
    fputs($socket, "RCPT TO: <$toEmail>\r\n");
    fputs($socket, "DATA\r\n");
    fputs($socket, "From: $fromName <$fromEmail>\r\n");
    fputs($socket, "To: $toEmail\r\n");
    fputs($socket, "Subject: $subject\r\n");
    fputs($socket, "Content-Type: text/plain; charset=UTF-8\r\n\r\n");
    fputs($socket, $body . "\r\n");
    fputs($socket, ".\r\n");
    fputs($socket, "QUIT\r\n");
    fclose($socket);

    // Redirect or success message
    echo '<script>alert("Заказ отправлен! / Сипарыş iberildi!"); window.location.href="/thank-you.html";</script>'; // Create thank-you.html
} else {
    die('Invalid request.');
}
?>

This should get you up and running—test on a dev page first (e.g., phone validation, date restrictions for currant period). For lanczyk sizes, if you want a dropdown multiplier (e.g., price * liters * quantity), reply with details. What's next: tweak for a specific product, add more validation, or integrate into SitePad? Let's iterate!

