1

ai/LocalAIApi.php

@@ -0,0 +1,311 @@
+<?php
+// LocalAIApi — proxy client for the Responses API.
+// Usage:
+//   require_once __DIR__ . '/ai/LocalAIApi.php';
+//   $response = LocalAIApi::createResponse([
+//       'input' => [
+//           ['role' => 'system', 'content' => 'You are a helpful assistant.'],
+//           ['role' => 'user', 'content' => 'Tell me a bedtime story.'],
+//       ],
+//   ]);
+//   if (!empty($response['success'])) {
+//       $decoded = LocalAIApi::decodeJsonFromResponse($response);
+//   }
+
+class LocalAIApi
+{
+    /** @var array<string,mixed>|null */
+    private static ?array $configCache = null;
+
+    /**
+     * Signature compatible with the OpenAI Responses API.
+     *
+     * @param array<string,mixed> $params Request body (model, input, text, reasoning, metadata, etc.).
+     * @param array<string,mixed> $options Extra options (timeout, verify_tls, headers, path, project_uuid).
+     * @return array{
+     *   success:bool,
+     *   status?:int,
+     *   data?:mixed,
+     *   error?:string,
+     *   response?:mixed,
+     *   message?:string
+     * }
+     */
+    public static function createResponse(array $params, array $options = []): array
+    {
+        $cfg = self::config();
+        $payload = $params;
+
+        if (empty($payload['input']) || !is_array($payload['input'])) {
+            return [
+                'success' => false,
+                'error'   => 'input_missing',
+                'message' => 'Parameter "input" is required and must be an array.',
+            ];
+        }
+
+        if (!isset($payload['model']) || $payload['model'] === '') {
+            $payload['model'] = $cfg['default_model'];
+        }
+
+        return self::request($options['path'] ?? null, $payload, $options);
+    }
+
+    /**
+     * Snake_case alias for createResponse (matches the provided example).
+     *
+     * @param array<string,mixed> $params
+     * @param array<string,mixed> $options
+     * @return array<string,mixed>
+     */
+    public static function create_response(array $params, array $options = []): array
+    {
+        return self::createResponse($params, $options);
+    }
+
+    /**
+     * Perform a raw request to the AI proxy.
+     *
+     * @param string $path Endpoint (may be an absolute URL).
+     * @param array<string,mixed> $payload JSON payload.
+     * @param array<string,mixed> $options Additional request options.
+     * @return array<string,mixed>
+     */
+    public static function request(?string $path = null, array $payload = [], array $options = []): array
+    {
+        if (!function_exists('curl_init')) {
+            return [
+                'success' => false,
+                'error'   => 'curl_missing',
+                'message' => 'PHP cURL extension is missing. Install or enable it on the VM.',
+            ];
+        }
+
+        $cfg = self::config();
+
+        $projectUuid = $cfg['project_uuid'];
+        if (empty($projectUuid)) {
+            return [
+                'success' => false,
+                'error'   => 'project_uuid_missing',
+                'message' => 'PROJECT_UUID is not defined; aborting AI request.',
+            ];
+        }
+
+        $defaultPath = $cfg['responses_path'] ?? null;
+        $resolvedPath = $path ?? ($options['path'] ?? $defaultPath);
+        if (empty($resolvedPath)) {
+            return [
+                'success' => false,
+                'error'   => 'project_id_missing',
+                'message' => 'PROJECT_ID is not defined; cannot resolve AI proxy endpoint.',
+            ];
+        }
+
+        $url = self::buildUrl($resolvedPath, $cfg['base_url']);
+        $baseTimeout = isset($cfg['timeout']) ? (int) $cfg['timeout'] : 30;
+        $timeout = isset($options['timeout']) ? (int) $options['timeout'] : $baseTimeout;
+        if ($timeout <= 0) {
+            $timeout = 30;
+        }
+
+        $baseVerifyTls = array_key_exists('verify_tls', $cfg) ? (bool) $cfg['verify_tls'] : true;
+        $verifyTls = array_key_exists('verify_tls', $options)
+            ? (bool) $options['verify_tls']
+            : $baseVerifyTls;
+
+        $projectHeader = $cfg['project_header'];
+
+        $headers = [
+            'Content-Type: application/json',
+            'Accept: application/json',
+        ];
+        $headers[] = $projectHeader . ': ' . $projectUuid;
+        if (!empty($options['headers']) && is_array($options['headers'])) {
+            foreach ($options['headers'] as $header) {
+                if (is_string($header) && $header !== '') {
+                    $headers[] = $header;
+                }
+            }
+        }
+
+        if (!empty($projectUuid) && !array_key_exists('project_uuid', $payload)) {
+            $payload['project_uuid'] = $projectUuid;
+        }
+
+        $body = json_encode($payload, JSON_UNESCAPED_UNICODE);
+        if ($body === false) {
+            return [
+                'success' => false,
+                'error'   => 'json_encode_failed',
+                'message' => 'Failed to encode request body to JSON.',
+            ];
+        }
+
+        $ch = curl_init($url);
+        curl_setopt($ch, CURLOPT_POST, true);
+        curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
+        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
+        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, $verifyTls);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, $verifyTls ? 2 : 0);
+        curl_setopt($ch, CURLOPT_FAILONERROR, false);
+
+        $responseBody = curl_exec($ch);
+        if ($responseBody === false) {
+            $error = curl_error($ch) ?: 'Unknown cURL error';
+            curl_close($ch);
+            return [
+                'success' => false,
+                'error'   => 'curl_error',
+                'message' => $error,
+            ];
+        }
+
+        $status = (int) curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        $decoded = null;
+        if ($responseBody !== '' && $responseBody !== null) {
+            $decoded = json_decode($responseBody, true);
+            if (json_last_error() !== JSON_ERROR_NONE) {
+                $decoded = null;
+            }
+        }
+
+        if ($status >= 200 && $status < 300) {
+            return [
+                'success' => true,
+                'status'  => $status,
+                'data'    => $decoded ?? $responseBody,
+            ];
+        }
+
+        $errorMessage = 'AI proxy request failed';
+        if (is_array($decoded)) {
+            $errorMessage = $decoded['error'] ?? $decoded['message'] ?? $errorMessage;
+        } elseif (is_string($responseBody) && $responseBody !== '') {
+            $errorMessage = $responseBody;
+        }
+
+        return [
+            'success'  => false,
+            'status'   => $status,
+            'error'    => $errorMessage,
+            'response' => $decoded ?? $responseBody,
+        ];
+    }
+
+    /**
+     * Extract plain text from a Responses API payload.
+     *
+     * @param array<string,mixed> $response Result of LocalAIApi::createResponse|request.
+     * @return string
+     */
+    public static function extractText(array $response): string
+    {
+        $payload = $response['data'] ?? $response;
+        if (!is_array($payload)) {
+            return '';
+        }
+
+        if (!empty($payload['output']) && is_array($payload['output'])) {
+            $combined = '';
+            foreach ($payload['output'] as $item) {
+                if (!isset($item['content']) || !is_array($item['content'])) {
+                    continue;
+                }
+                foreach ($item['content'] as $block) {
+                    if (is_array($block) && ($block['type'] ?? '') === 'output_text' && !empty($block['text'])) {
+                        $combined .= $block['text'];
+                    }
+                }
+            }
+            if ($combined !== '') {
+                return $combined;
+            }
+        }
+
+        if (!empty($payload['choices'][0]['message']['content'])) {
+            return (string) $payload['choices'][0]['message']['content'];
+        }
+
+        return '';
+    }
+
+    /**
+     * Attempt to decode JSON emitted by the model (handles markdown fences).
+     *
+     * @param array<string,mixed> $response
+     * @return array<string,mixed>|null
+     */
+    public static function decodeJsonFromResponse(array $response): ?array
+    {
+        $text = self::extractText($response);
+        if ($text === '') {
+            return null;
+        }
+
+        $decoded = json_decode($text, true);
+        if (is_array($decoded)) {
+            return $decoded;
+        }
+
+        $stripped = preg_replace('/^```json|```$/m', '', trim($text));
+        if ($stripped !== null && $stripped !== $text) {
+            $decoded = json_decode($stripped, true);
+            if (is_array($decoded)) {
+                return $decoded;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Load configuration from ai/config.php.
+     *
+     * @return array<string,mixed>
+     */
+    private static function config(): array
+    {
+        if (self::$configCache === null) {
+            $configPath = __DIR__ . '/config.php';
+            if (!file_exists($configPath)) {
+                throw new RuntimeException('AI config file not found: ai/config.php');
+            }
+            $cfg = require $configPath;
+            if (!is_array($cfg)) {
+                throw new RuntimeException('Invalid AI config format: expected array');
+            }
+            self::$configCache = $cfg;
+        }
+
+        return self::$configCache;
+    }
+
+    /**
+     * Build an absolute URL from base_url and a path.
+     */
+    private static function buildUrl(string $path, string $baseUrl): string
+    {
+        $trimmed = trim($path);
+        if ($trimmed === '') {
+            return $baseUrl;
+        }
+        if (str_starts_with($trimmed, 'http://') || str_starts_with($trimmed, 'https://')) {
+            return $trimmed;
+        }
+        if ($trimmed[0] === '/') {
+            return $baseUrl . $trimmed;
+        }
+        return $baseUrl . '/' . $trimmed;
+    }
+}
+
+// Legacy alias for backward compatibility with the previous class name.
+if (!class_exists('OpenAIService')) {
+    class_alias(LocalAIApi::class, 'OpenAIService');
+}

ai/config.php

@@ -0,0 +1,52 @@
+<?php
+// OpenAI proxy configuration (workspace scope).
+// Reads values from environment variables or executor/.env.
+
+$projectUuid = getenv('PROJECT_UUID');
+$projectId   = getenv('PROJECT_ID');
+
+if (
+    ($projectUuid === false || $projectUuid === null || $projectUuid === '') ||
+    ($projectId === false || $projectId === null || $projectId === '')
+) {
+    $envPath = realpath(__DIR__ . '/../../.env'); // executor/.env
+    if ($envPath && is_readable($envPath)) {
+        $lines = @file($envPath, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
+        foreach ($lines as $line) {
+            $line = trim($line);
+            if ($line === '' || $line[0] === '#') {
+                continue;
+            }
+            if (!str_contains($line, '=')) {
+                continue;
+            }
+            [$key, $value] = array_map('trim', explode('=', $line, 2));
+            if ($key === '') {
+                continue;
+            }
+            $value = trim($value, "\"' ");
+            if (getenv($key) === false || getenv($key) === '') {
+                putenv("{$key}={$value}");
+            }
+        }
+        $projectUuid = getenv('PROJECT_UUID');
+        $projectId   = getenv('PROJECT_ID');
+    }
+}
+
+$projectUuid = ($projectUuid === false) ? null : $projectUuid;
+$projectId   = ($projectId === false) ? null : $projectId;
+
+$baseUrl       = 'https://flatlogic.com';
+$responsesPath = $projectId ? "/projects/{$projectId}/ai-request" : null;
+
+return [
+    'base_url'       => $baseUrl,
+    'responses_path' => $responsesPath,
+    'project_id'     => $projectId,
+    'project_uuid'   => $projectUuid,
+    'project_header' => 'project-uuid',
+    'default_model'  => 'gpt-5',
+    'timeout'        => 30,
+    'verify_tls'     => true,
+];

assets/css/custom.css

@@ -0,0 +1,95 @@
+
+/* assets/css/custom.css */
+
+@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Lato:wght@400;700&display=swap');
+
+body {
+    font-family: 'Lato', sans-serif;
+    background-color: #F0F8FF;
+    color: #292B2C;
+    overflow-x: hidden;
+}
+
+h1, h2, h3, .h1, .h2, .h3 {
+    font-family: 'Mountains of Christmas', cursive;
+    font-weight: 700;
+}
+
+.navbar-brand {
+     font-family: 'Mountains of Christmas', cursive;
+}
+
+.card {
+    border-radius: 0.5rem;
+    border: none;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+}
+
+.btn-primary {
+    background-color: #D9534F;
+    border-color: #D9534F;
+    transition: background-color 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: #c9302c;
+    border-color: #c9302c;
+}
+
+.btn-secondary {
+    background-color: #5CB85C;
+    border-color: #5CB85C;
+    transition: background-color 0.3s ease;
+}
+
+.btn-secondary:hover {
+    background-color: #4cae4c;
+    border-color: #4cae4c;
+}
+
+.btn-danger {
+    background-color: #F0AD4E;
+    border-color: #F0AD4E;
+    transition: background-color 0.3s ease;
+}
+
+.btn-danger:hover {
+    background-color: #ec971f;
+    border-color: #ec971f;
+}
+
+#shopping-list-container {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    min-height: 300px;
+}
+
+.ingredient-row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.ingredient-row .form-control {
+    flex: 1;
+}
+
+/* Snowflakes animation */
+.snowflake {
+    color: #fff;
+    font-size: 1em;
+    font-family: Arial, sans-serif;
+    text-shadow: 0 0 5px #000;
+    position: fixed;
+    top: -5%;
+    z-index: -1;
+    user-select: none;
+    animation: fall linear infinite;
+}
+
+@keyframes fall {
+    to {
+        transform: translateY(105vh);
+    }
+}

assets/js/main.js

@@ -0,0 +1,147 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    // --- Snowflakes Effect ---
+    function createSnowflakes() {
+        const snowflakeContainer = document.body;
+        for (let i = 0; i < 50; i++) {
+            const snowflake = document.createElement('div');
+            snowflake.className = 'snowflake';
+            snowflake.textContent = '❄';
+            snowflake.style.left = Math.random() * 100 + 'vw';
+            snowflake.style.animationDuration = (Math.random() * 3 + 2) + 's'; // 2-5 seconds
+            snowflake.style.animationDelay = Math.random() * 2 + 's';
+            snowflake.style.opacity = Math.random();
+            snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
+            snowflakeContainer.appendChild(snowflake);
+        }
+    }
+
+    createSnowflakes();
+
+    // --- Calculator Logic ---
+    const ingredientsContainer = document.getElementById('ingredients-container');
+    const addIngredientBtn = document.getElementById('add-ingredient');
+    const calculateBtn = document.getElementById('calculate-btn');
+    const shoppingListContainer = document.getElementById('shopping-list-container');
+
+    let ingredientIndex = 1;
+
+    function addIngredientRow() {
+        ingredientIndex++;
+        const row = document.createElement('div');
+        row.className = 'ingredient-row mb-2';
+        row.innerHTML = `
+            <input type="text" class="form-control" placeholder="Ingredient Name" aria-label="Ingredient Name">
+            <input type="number" class="form-control" placeholder="Qty" aria-label="Quantity" min="0" step="any">
+            <input type="text" class="form-control" placeholder="Unit (e.g., grams, ml)" aria-label="Unit">
+            <button type="button" class="btn btn-danger btn-sm remove-ingredient">&times;</button>
+        `;
+        ingredientsContainer.appendChild(row);
+    }
+
+    if (addIngredientBtn) {
+        addIngredientBtn.addEventListener('click', addIngredientRow);
+    }
+
+    if (ingredientsContainer) {
+        ingredientsContainer.addEventListener('click', function(e) {
+            if (e.target.classList.contains('remove-ingredient')) {
+                e.target.closest('.ingredient-row').remove();
+            }
+        });
+    }
+
+    if (calculateBtn) {
+        calculateBtn.addEventListener('click', function() {
+            const recipeName = document.getElementById('recipeName').value || 'My Festive Recipe';
+            const guestCount = parseInt(document.getElementById('guestCount').value, 10);
+
+            if (isNaN(guestCount) || guestCount <= 0) {
+                alert('Please enter a valid number of guests.');
+                return;
+            }
+
+            const ingredients = [];
+            const rows = ingredientsContainer.querySelectorAll('.ingredient-row');
+            rows.forEach(row => {
+                const name = row.children[0].value;
+                const qty = parseFloat(row.children[1].value);
+                const unit = row.children[2].value;
+
+                if (name && !isNaN(qty) && qty > 0) {
+                    ingredients.push({ name, qty, unit });
+                }
+            });
+
+            if (ingredients.length === 0) {
+                alert('Please add at least one ingredient.');
+                return;
+            }
+
+            // Calculate totals
+            const shoppingList = {};
+            ingredients.forEach(ing => {
+                const totalQty = ing.qty * guestCount;
+                const key = ing.name.toLowerCase().trim() + '_' + (ing.unit || '').toLowerCase().trim();
+
+                if (shoppingList[key]) {
+                    shoppingList[key].qty += totalQty;
+                } else {
+                    shoppingList[key] = {
+                        name: ing.name,
+                        qty: totalQty,
+                        unit: ing.unit
+                    };
+                }
+            });
+
+            // Render shopping list
+            renderShoppingList(recipeName, guestCount, Object.values(shoppingList));
+        });
+    }
+
+    function renderShoppingList(recipeName, guestCount, list) {
+        let html = `<h3>${recipeName} - Shopping List for ${guestCount} Guests</h3><hr>`;
+        
+        if (list.length === 0) {
+            html += '<p>No ingredients to show. Please fill out the recipe form.</p>';
+        } else {
+            html += '<ul class="list-group list-group-flush">';
+            list.forEach(item => {
+                html += `<li class="list-group-item d-flex justify-content-between align-items-center">
+                    <span>${item.name}</span>
+                    <span class="badge bg-primary rounded-pill">${formatQuantity(item.qty)} ${item.unit}</span>
+                </li>`;
+            });
+            html += '</ul>';
+        }
+
+        shoppingListContainer.innerHTML = html;
+    }
+
+    function formatQuantity(qty) {
+        // Simple formatting, can be expanded for fractions
+        return parseFloat(qty.toFixed(2));
+    }
+
+    const newRecipeBtn = document.getElementById('new-recipe-btn');
+
+    if (newRecipeBtn) {
+        newRecipeBtn.addEventListener('click', function() {
+            document.getElementById('recipeName').value = '';
+            document.getElementById('guestCount').value = '';
+            ingredientsContainer.innerHTML = '';
+            addIngredientRow(); // Add a fresh row
+            shoppingListContainer.innerHTML = `
+                <div class="text-center text-muted p-5">
+                    <h3 class="h4">Your Shopping List</h3>
+                    <p>Your calculated list will appear here.</p>
+                </div>
+            `;
+        });
+    }
+
+    // Add one ingredient row by default
+    addIngredientRow();
+});

index.php

@@ -1,150 +1,102 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <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=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- SEO & Meta Tags -->
+    <title>Christmas Recipe Calculator</title>
+    <meta name="description" content="Create and calculate holiday recipe shopping lists. Enter a recipe for one, specify your number of guests, and get a shopping list for your Christmas feast. Built with Flatlogic Generator.">
+    <meta name="keywords" content="recipe calculator, Christmas recipes, holiday cooking, shopping list generator, party food calculator, festive meals, cooking for a crowd, recipe scaler, Built with Flatlogic Generator">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Christmas Recipe Calculator">
+    <meta property="og:description" content="Easily calculate shopping lists for your holiday recipes.">
+    <meta property="og:image" content="">
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Christmas Recipe Calculator">
+    <meta name="twitter:description" content="Easily calculate shopping lists for your holiday recipes.">
+    <meta name="twitter:image" content="">
+
+    <!-- Styles -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
-    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <div id="snow-container"></div>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
+        <div class="container">
+            <a class="navbar-brand" href="#">Christmas Recipe Calculator</a>
+        </div>
+    </nav>
+
+    <main class="container my-5">
+        <div class="text-center mb-5">
+            <h1 class="display-4">Holiday Recipe Planner</h1>
+            <p class="lead">Enter a recipe for one person, set your guest count, and we'll make your shopping list!</p>
+        </div>
+
+        <div class="row g-5">
+            <!-- Left Column: Recipe Input -->
+            <div class="col-lg-6">
+                <div class="card p-4">
+                    <h2 class="mb-4">Your Recipe</h2>
+                    <form id="recipe-form">
+                        <div class="mb-3">
+                            <label for="recipeName" class="form-label">Recipe Name</label>
+                            <input type="text" class="form-control" id="recipeName" placeholder="e.g., Gingerbread Cookies">
+                        </div>
+                        
+                        <hr>
+
+                        <h3 class="h5 mb-3">Ingredients (for 1 person)</h3>
+                        <div id="ingredients-container">
+                            <!-- Ingredient rows will be injected here by JS -->
+                        </div>
+                        <button type="button" id="add-ingredient" class="btn btn-secondary btn-sm mt-2">+ Add Ingredient</button>
+                        
+                        <hr class="my-4">
+
+                        <div class="mb-3">
+                            <label for="guestCount" class="form-label">How many guests are coming?</label>
+                            <input type="number" class="form-control" id="guestCount" placeholder="e.g., 8" min="1">
+                        </div>
+
+                        <div class="d-grid gap-2 d-md-flex mt-4">
+                            <button type="button" id="calculate-btn" class="btn btn-primary btn-lg">Calculate Shopping List</button>
+                            <button type="button" id="new-recipe-btn" class="btn btn-outline-secondary btn-lg">New Recipe</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Right Column: Shopping List -->
+            <div class="col-lg-6">
+                <div class="card">
+                    <div class="card-body" id="shopping-list-container">
+                         <div class="text-center text-muted p-5">
+                            <h3 class="h4">Your Shopping List</h3>
+                            <p>Your calculated list will appear here.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="text-center py-4 mt-5 bg-light">
+        <p class="mb-0">&copy; <?php echo date("Y"); ?> Christmas Recipe Calculator. Happy Holidays!</p>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+
 </body>
 </html>