Let's Build Your Routine
@@ -85,8 +92,6 @@Let's Build Your Routine
- - diff --git a/script.js b/script.js index fd3356b4..95e19d0d 100644 --- a/script.js +++ b/script.js @@ -3,6 +3,24 @@ const categoryFilter = document.getElementById("categoryFilter"); const productsContainer = document.getElementById("productsContainer"); const chatForm = document.getElementById("chatForm"); const chatWindow = document.getElementById("chatWindow"); +const selectedProductsList = document.getElementById("selectedProductsList"); +const selectedProductsHeading = document.querySelector(".selected-products h2"); +const clearSelectionsBtn = document.getElementById("clearSelections"); +const generateRoutineBtn = document.getElementById("generateRoutine"); +const userInput = document.getElementById("userInput"); + +/* Cloudflare Worker endpoint */ +const workerUrl = "https://dawn-shape-4eb6.kiazabuza.workers.dev/"; + +const STORAGE_KEYS = { + selectedProductIds: "lorealSelectedProductIds", + messages: "lorealChatMessages", +}; + +/* Keep product data and selected product IDs in memory */ +let allProducts = []; +const selectedProductIds = new Set(); +const messages = []; /* Show initial placeholder until user selects a category */ productsContainer.innerHTML = ` @@ -11,11 +29,266 @@ productsContainer.innerHTML = ` `; +chatWindow.innerHTML = ` +Select products, click Generate Routine, then ask follow-up questions.
+`; + +function saveSelectedProductsToStorage() { + localStorage.setItem( + STORAGE_KEYS.selectedProductIds, + JSON.stringify([...selectedProductIds]), + ); +} + +function loadSelectedProductsFromStorage() { + const storedValue = localStorage.getItem(STORAGE_KEYS.selectedProductIds); + + if (!storedValue) { + return; + } + + try { + const parsedIds = JSON.parse(storedValue); + + if (!Array.isArray(parsedIds)) { + return; + } + + parsedIds.forEach((id) => { + const parsedId = Number(id); + + if (Number.isInteger(parsedId)) { + selectedProductIds.add(parsedId); + } + }); + } catch (error) { + console.error("Could not read saved product selections.", error); + } +} + +function saveMessagesToStorage() { + localStorage.setItem(STORAGE_KEYS.messages, JSON.stringify(messages)); +} + +function loadMessagesFromStorage() { + const storedValue = localStorage.getItem(STORAGE_KEYS.messages); + + if (!storedValue) { + return; + } + + try { + const parsedMessages = JSON.parse(storedValue); + + if (!Array.isArray(parsedMessages)) { + return; + } + + parsedMessages.forEach((message) => { + const isValidMessage = + typeof message?.role === "string" && + typeof message?.content === "string" && + ["system", "user", "assistant"].includes(message.role); + + if (isValidMessage) { + messages.push({ role: message.role, content: message.content }); + } + }); + } catch (error) { + console.error("Could not read saved chat history.", error); + } +} + +function renderChatHistory() { + chatWindow.innerHTML = ""; + + const visibleMessages = messages.filter( + (message) => message.role === "user" || message.role === "assistant", + ); + + if (visibleMessages.length === 0) { + chatWindow.innerHTML = ` +Select products, click Generate Routine, then ask follow-up questions.
+ `; + return; + } + + visibleMessages.forEach((message) => { + addMessageToChat(message.role, message.content); + }); +} + +function ensureSystemMessage() { + const alreadyHasSystemMessage = messages.some( + (message) => message.role === "system", + ); + + if (alreadyHasSystemMessage) { + return; + } + + messages.push({ + role: "system", + content: + "You are a friendly skincare and beauty routine assistant for beginners. Keep advice simple, safe, practical, and concise.", + }); +} + +function escapeHtml(text) { + return text + .replaceAll("&", "&") + .replaceAll("<", "<") + .replaceAll(">", ">") + .replaceAll('"', """) + .replaceAll("'", "'"); +} + +/* Render assistant replies with simple readable structure (headings + lists). */ +function formatAssistantMessage(text) { + const lines = text.split("\n"); + let html = ""; + let isListOpen = false; + + for (const line of lines) { + const trimmed = line.trim(); + + if (!trimmed) { + if (isListOpen) { + html += ""; + isListOpen = false; + } + continue; + } + + const headingMatch = trimmed.match(/^#{1,3}\s+(.*)$/); + const numberedItemMatch = trimmed.match(/^\d+\.\s+(.*)$/); + const bulletItemMatch = trimmed.match(/^[-*]\s+(.*)$/); + + if (headingMatch) { + if (isListOpen) { + html += ""; + isListOpen = false; + } + html += `${escapeHtml(headingMatch[1])}
`; + continue; + } + + if (numberedItemMatch || bulletItemMatch) { + if (!isListOpen) { + html += "- ";
+ isListOpen = true;
+ }
+ const listItemText = numberedItemMatch
+ ? numberedItemMatch[1]
+ : bulletItemMatch[1];
+ html += `
- ${escapeHtml(listItemText)} `; + continue; + } + + if (isListOpen) { + html += "
${escapeHtml(trimmed)}
`; + } + + if (isListOpen) { + html += ""; + } + + return html || `${escapeHtml(text)}
`; +} + +function updateMessageContent(messageDiv, role, text) { + if (role === "assistant") { + messageDiv.innerHTML = formatAssistantMessage(text); + return; + } + + messageDiv.textContent = text; +} + +/* Add one chat bubble to the window */ +function addMessageToChat(role, text) { + const messageDiv = document.createElement("div"); + messageDiv.className = `chat-message ${role}`; + updateMessageContent(messageDiv, role, text); + chatWindow.appendChild(messageDiv); + chatWindow.scrollTop = chatWindow.scrollHeight; + return messageDiv; +} + +/* Send the full conversation to the Worker and get assistant reply */ +async function getAssistantReply() { + const response = await fetch(workerUrl, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ messages }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.error || "Request failed"); + } + + if (data.reply) { + return data.reply; + } + + return data.choices?.[0]?.message?.content || "No response received."; +} + /* Load product data from JSON file */ async function loadProducts() { + if (allProducts.length > 0) { + return allProducts; + } + const response = await fetch("products.json"); const data = await response.json(); - return data.products; + allProducts = data.products; + return allProducts; +} + +/* Show selected products in the Selected section */ +function renderSelectedProducts() { + const selectedProducts = allProducts.filter((product) => + selectedProductIds.has(product.id), + ); + + const selectedCount = selectedProducts.length; + selectedProductsHeading.textContent = `Selected Products (${selectedCount})`; + clearSelectionsBtn.disabled = selectedCount === 0; + generateRoutineBtn.disabled = selectedCount === 0; + + if (selectedProducts.length === 0) { + selectedProductsList.innerHTML = ` +No products selected yet
+ `; + return; + } + + selectedProductsList.innerHTML = selectedProducts + .map( + (product) => ` +
+ ${product.name}
+
+
+ `,
+ )
+ .join("");
}
/* Create HTML for displaying product cards */
@@ -23,14 +296,35 @@ function displayProducts(products) {
productsContainer.innerHTML = products
.map(
(product) => `
-
+
- `
+ `,
)
.join("");
}
@@ -43,15 +337,213 @@ categoryFilter.addEventListener("change", async (e) => {
/* filter() creates a new array containing only products
where the category matches what the user selected */
const filteredProducts = products.filter(
- (product) => product.category === selectedCategory
+ (product) => product.category === selectedCategory,
);
displayProducts(filteredProducts);
});
-/* Chat form submission handler - placeholder for OpenAI integration */
-chatForm.addEventListener("submit", (e) => {
+/* Toggle product selection when user clicks a card */
+productsContainer.addEventListener("click", (e) => {
+ const descriptionToggleBtn = e.target.closest(".description-toggle");
+
+ if (descriptionToggleBtn) {
+ const descriptionCard = descriptionToggleBtn.closest(".product-card");
+ const isExpanded = descriptionCard.classList.toggle("description-expanded");
+
+ descriptionToggleBtn.setAttribute("aria-expanded", String(isExpanded));
+ descriptionToggleBtn.textContent = isExpanded
+ ? "Hide details"
+ : "View details";
+ return;
+ }
+
+ const clickedCard = e.target.closest(".product-card");
+
+ if (!clickedCard) {
+ return;
+ }
+
+ const productId = Number(clickedCard.dataset.productId);
+
+ if (selectedProductIds.has(productId)) {
+ selectedProductIds.delete(productId);
+ } else {
+ selectedProductIds.add(productId);
+ }
+
+ saveSelectedProductsToStorage();
+
+ const isSelected = selectedProductIds.has(productId);
+ clickedCard.classList.toggle("selected", isSelected);
+ clickedCard.setAttribute("aria-pressed", String(isSelected));
+ renderSelectedProducts();
+});
+
+/* Remove products from the Selected list via X button */
+selectedProductsList.addEventListener("click", (e) => {
+ const removeBtn = e.target.closest(".selected-chip-remove");
+
+ if (!removeBtn) {
+ return;
+ }
+
+ const productId = Number(removeBtn.dataset.productId);
+ selectedProductIds.delete(productId);
+
+ const visibleProductCard = productsContainer.querySelector(
+ `.product-card[data-product-id="${productId}"]`,
+ );
+
+ if (visibleProductCard) {
+ visibleProductCard.classList.remove("selected");
+ visibleProductCard.setAttribute("aria-pressed", "false");
+ }
+
+ saveSelectedProductsToStorage();
+ renderSelectedProducts();
+});
+
+clearSelectionsBtn.addEventListener("click", () => {
+ if (selectedProductIds.size === 0) {
+ return;
+ }
+
+ selectedProductIds.clear();
+ saveSelectedProductsToStorage();
+
+ const visibleCards = productsContainer.querySelectorAll(
+ ".product-card.selected",
+ );
+ visibleCards.forEach((card) => {
+ card.classList.remove("selected");
+ card.setAttribute("aria-pressed", "false");
+ });
+
+ renderSelectedProducts();
+});
+
+/* Support Enter/Space so selection is keyboard-accessible too */
+productsContainer.addEventListener("keydown", (e) => {
+ if (e.target.closest(".description-toggle")) {
+ return;
+ }
+
+ const focusedCard = e.target.closest(".product-card");
+
+ if (!focusedCard) {
+ return;
+ }
+
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ focusedCard.click();
+ }
+});
+
+/* Build a first routine from selected products */
+generateRoutineBtn.addEventListener("click", async () => {
+ const products = await loadProducts();
+
+ const selectedProducts = products.filter((product) =>
+ selectedProductIds.has(product.id),
+ );
+
+ if (selectedProducts.length === 0) {
+ return;
+ }
+
+ const selectedProductsForPrompt = selectedProducts.map((product) => ({
+ name: product.name,
+ brand: product.brand,
+ category: product.category,
+ description: product.description,
+ }));
+
+ ensureSystemMessage();
+ messages.push({
+ role: "user",
+ content: `Build me a step-by-step morning and evening routine using only these selected products.
+
+Format requirements:
+- Use short headers: "Morning Routine", "Evening Routine", and "Quick Tips"
+- Use numbered steps under each routine
+- Keep each step concise (1 short sentence)
+- Keep total response brief and clear for beginners
+
+Include simple usage tips (order, AM/PM, and frequency).
+
+Selected products JSON:
+${JSON.stringify(selectedProductsForPrompt, null, 2)}`,
+ });
+ saveMessagesToStorage();
+
+ addMessageToChat("user", "Generate my routine using my selected products.");
+ const thinkingMessage = addMessageToChat("assistant", "Thinking...");
+
+ try {
+ const reply = await getAssistantReply();
+ messages.push({ role: "assistant", content: reply });
+ saveMessagesToStorage();
+ updateMessageContent(thinkingMessage, "assistant", reply);
+ } catch (error) {
+ updateMessageContent(
+ thinkingMessage,
+ "assistant",
+ `Error: ${error.message}`,
+ );
+ }
+});
+
+/* Chat form submission handler for follow-up questions */
+chatForm.addEventListener("submit", async (e) => {
e.preventDefault();
- chatWindow.innerHTML = "Connect to the OpenAI API for a response!";
+ const text = userInput.value.trim();
+
+ if (!text) {
+ return;
+ }
+
+ ensureSystemMessage();
+ messages.push({ role: "user", content: text });
+ saveMessagesToStorage();
+ addMessageToChat("user", text);
+ const thinkingMessage = addMessageToChat("assistant", "Thinking...");
+
+ userInput.value = "";
+
+ try {
+ const reply = await getAssistantReply();
+ messages.push({ role: "assistant", content: reply });
+ saveMessagesToStorage();
+ updateMessageContent(thinkingMessage, "assistant", reply);
+ } catch (error) {
+ updateMessageContent(
+ thinkingMessage,
+ "assistant",
+ `Error: ${error.message}`,
+ );
+ }
});
+
+/* Restore saved state on page load */
+async function initializeApp() {
+ loadSelectedProductsFromStorage();
+ loadMessagesFromStorage();
+ renderChatHistory();
+
+ const products = await loadProducts();
+ const validProductIds = new Set(products.map((product) => product.id));
+
+ [...selectedProductIds].forEach((id) => {
+ if (!validProductIds.has(id)) {
+ selectedProductIds.delete(id);
+ }
+ });
+
+ saveSelectedProductsToStorage();
+ renderSelectedProducts();
+}
+
+initializeApp();
diff --git a/style.css b/style.css
index bbe4630e..df8ef281 100644
--- a/style.css
+++ b/style.css
@@ -1,255 +1,721 @@
-/* —— basic reset —— */
+/* Palette inspired by iconic black / radiant white / passionate red / eternal gold */
+:root {
+ --ink-black: #000000;
+ --paper-white: #f4f4f4;
+ --signal-red: #ff003b;
+ --eternal-gold: #e3a535;
+ --soft-gold: #f0cc84;
+ --charcoal: #1d1d1f;
+ --slate: #525252;
+ --line: #d8d8d8;
+ --surface: #ffffff;
+ --font-sans: "Plus Jakarta Sans";
+ --font-serif: "Cormorant Garamond";
+}
+
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
-/* —— body + fonts —— */
body {
- font-family: "Montserrat", Arial, Helvetica, sans-serif;
- color: #333;
+ font-family: var(--font-sans), Helvetica, sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+ color: var(--charcoal);
display: flex;
justify-content: center;
+ min-height: 100vh;
+ background:
+ radial-gradient(circle at 12% 14%, rgba(255, 0, 59, 0.2), transparent 38%),
+ radial-gradient(
+ circle at 88% 84%,
+ rgba(227, 165, 53, 0.24),
+ transparent 42%
+ ),
+ linear-gradient(145deg, #fff7f9 0%, #fff6e8 100%);
+ position: relative;
+ text-rendering: optimizeLegibility;
+}
+
+body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background: linear-gradient(
+ 120deg,
+ rgba(255, 255, 255, 0.22),
+ transparent 45%
+ );
+ pointer-events: none;
}
.page-wrapper {
- width: 90%;
- max-width: 900px;
+ width: min(94%, 980px);
+ margin: 36px 0;
+ padding: 34px;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ background: rgba(255, 255, 255, 0.94);
+ backdrop-filter: blur(8px);
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
}
-/* header */
.site-header {
text-align: center;
- padding-top: 50px;
- padding-bottom: 10px;
+ padding: 18px 0 20px;
+ background: #ffffff;
+ border: 1px solid #dfdfdf;
+ border-bottom: 4px solid var(--eternal-gold);
}
.logo {
- width: 250px;
- margin-bottom: 15px;
+ width: 238px;
+ margin-bottom: 18px;
+ background: rgba(255, 255, 255, 0.97);
+ padding: 10px 18px;
+ border: 1px solid rgba(255, 255, 255, 0.9);
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.site-title {
- font-size: 22px;
- font-weight: 500;
- margin-bottom: 10px;
+ font-family: var(--font-serif), Georgia, serif;
+ font-size: clamp(1.45rem, 1.2vw + 1.1rem, 2rem);
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: none;
+ line-height: 1.2;
+ color: #151515;
+}
+
+.site-title::first-letter {
+ color: var(--signal-red);
+}
+
+.section-label {
+ display: inline-block;
+ margin: 28px 0 10px;
+ padding: 4px 10px;
+ font-family: var(--font-sans), Helvetica, sans-serif;
+ font-size: 0.68rem;
+ letter-spacing: 0.12em;
+ font-weight: 700;
+ text-transform: uppercase;
+ border: 1px solid transparent;
+}
+
+.section-label--neutral {
+ color: #595959;
+ background: #f2f1ef;
+ border-color: #d9d6d1;
+}
+
+.section-label--black {
+ color: #ffffff;
+ background: #0f0f10;
+ border-color: #0f0f10;
+}
+
+.section-label--gold {
+ color: #4d3500;
+ background: #f2c56b;
+ border-color: #d29b2a;
+}
+
+.section-label--red {
+ color: #ffffff;
+ background: #d70035;
+ border-color: #b8002d;
}
-/* category filter */
.search-section {
- margin: 30px 0;
+ margin: 0;
display: flex;
+ padding: 16px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ background: linear-gradient(180deg, #ffffff 0%, #f5f4f2 100%);
}
.search-section select {
width: 100%;
padding: 16px;
- font-size: 18px;
- border: 2px solid #000;
- border-radius: 8px;
+ font-family: var(--font-sans), Helvetica, sans-serif;
+ font-size: 0.95rem;
+ border: 2px solid #b0b0b0;
+ border-radius: 2px;
cursor: pointer;
- background-color: white;
- font-weight: 500;
+ color: var(--ink-black);
+ background: linear-gradient(90deg, #ffffff 0%, #f8f8f7 100%);
+ font-weight: 600;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
}
.search-section select:focus {
- outline: none;
- border-color: #666;
+ outline: 3px solid rgba(227, 165, 53, 0.45);
+ border-color: var(--signal-red);
}
-/* chat section */
-.chatbox {
- margin: 40px 0;
- border: 2px solid #000;
- border-radius: 8px;
- padding: 26px;
-}
-
-.chatbox h2 {
- font-size: 20px;
- margin-bottom: 20px;
+.products-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18px;
+ margin: 0;
+ padding-top: 4px;
}
-.chat-window {
- padding: 20px;
- font-size: 18px;
- line-height: 1.5;
- height: 250px;
- overflow-y: auto;
- background: #fafafa;
- margin-bottom: 20px;
+[dir="rtl"] .products-grid {
+ direction: rtl;
}
-/* placeholder message */
.placeholder-message {
width: 100%;
text-align: center;
- padding: 40px;
- color: #666;
- font-size: 18px;
+ padding: 46px;
+ color: var(--slate);
+ font-family: var(--font-serif), Georgia, serif;
+ font-size: 1.35rem;
+ border: 1px dashed var(--line);
+ background: linear-gradient(145deg, #ffffff, #f7f7f7);
}
-/* input row */
-.chat-form {
+.product-card {
+ flex: 0 1 calc(33.333% - 12px);
+ border: 1px solid #dad7d2;
+ padding: 14px;
+ background: var(--surface);
display: flex;
gap: 12px;
- margin-top: 16px;
+ min-height: 168px;
+ position: relative;
+ overflow: visible;
+ cursor: pointer;
+ transition:
+ transform 0.25s ease,
+ box-shadow 0.25s ease,
+ border-color 0.25s ease;
}
-.chat-form input {
- flex: 1;
- padding: 12px;
- font-size: 18px;
- border: none;
- border-bottom: 2px solid #ccc;
- background: transparent;
+.product-card::before {
+ content: "";
+ position: absolute;
+ inset: 0 0 auto 0;
+ height: 4px;
+ background: linear-gradient(
+ 90deg,
+ var(--ink-black),
+ var(--signal-red),
+ var(--eternal-gold)
+ );
}
-.chat-form input:focus {
- outline: none;
- border-bottom-color: #000;
+.product-card:hover {
+ transform: translateY(-4px);
+ border-color: #c8c1b6;
+ box-shadow: 0 14px 24px rgba(0, 0, 0, 0.11);
}
-.chat-form button {
- font-size: 18px;
- background: #000;
- color: #fff;
- border: none;
- padding: 12px;
- width: 48px;
- height: 48px;
+.product-card.selected {
+ border-color: var(--eternal-gold);
+ background: linear-gradient(165deg, #fffefb 0%, #fff5df 100%);
+ box-shadow: 0 12px 20px rgba(227, 165, 53, 0.22);
+}
+
+.product-card.selected::before {
+ background: linear-gradient(
+ 90deg,
+ var(--eternal-gold),
+ #f6d287,
+ var(--signal-red)
+ );
+}
+
+.product-card:focus-visible {
+ outline: 3px solid rgba(227, 165, 53, 0.55);
+ outline-offset: 2px;
+}
+
+.product-card img {
+ width: 108px;
+ height: 108px;
+ object-fit: contain;
+ flex-shrink: 0;
+}
+
+.product-card .product-info {
+ flex: 1;
display: flex;
- align-items: center;
- justify-content: center;
+ flex-direction: column;
+ justify-content: flex-start;
+ min-height: 110px;
+ gap: 6px;
+ position: relative;
+}
+
+[dir="rtl"] .product-card {
+ flex-direction: row-reverse;
+}
+
+[dir="rtl"] .product-card .product-info {
+ text-align: right;
+}
+
+.product-card h3 {
+ font-family: var(--font-serif), Georgia, serif;
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-bottom: 6px;
+ line-height: 1.35;
+}
+
+.product-card .product-brand {
+ font-size: 0.78rem;
+ font-weight: 600;
+ color: var(--slate);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.description-control {
+ position: relative;
+ width: fit-content;
+}
+
+.description-toggle {
+ width: fit-content;
+ margin-top: 2px;
+ padding: 5px 10px;
+ border: 1px solid #c5c2bc;
+ background: #ffffff;
+ color: #232323;
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
cursor: pointer;
- transition: background 0.3s;
+ transition:
+ background 0.2s ease,
+ border-color 0.2s ease,
+ color 0.2s ease;
}
-.chat-form button:hover {
- background: #666666;
+.description-toggle:hover {
+ background: #f7f7f5;
+ border-color: #aaa59c;
}
-.chat-form button:focus {
- outline: 2px solid #000;
+.description-toggle:focus-visible {
+ outline: 2px solid rgba(255, 0, 59, 0.45);
outline-offset: 2px;
}
-/* visually hidden */
-.visually-hidden {
+.product-description-popover {
position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
+ inset-inline-end: 0;
+ bottom: calc(100% + 8px);
+ width: min(420px, 82vw);
+ z-index: 3;
+ padding: 14px;
+ border: 1px solid #cdc8bf;
+ background: #ffffff;
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
+ opacity: 0;
+ transform: translateY(6px);
+ pointer-events: none;
+ transition:
+ opacity 0.2s ease,
+ transform 0.2s ease;
+}
+
+.product-description-popover p {
+ margin: 0;
+ font-size: 0.85rem;
+ line-height: 1.45;
+ color: #2f2f2f;
+ letter-spacing: normal;
+ text-transform: none;
+ font-weight: 500;
}
-/* footer */
-.site-footer {
- margin: 60px 0 40px;
- text-align: center;
- font-size: 14px;
- color: #666;
+.product-card.description-expanded .product-description-popover {
+ opacity: 1;
+ transform: translateY(0);
+ pointer-events: auto;
}
-.site-footer nav {
- margin-top: 12px;
+.product-card.description-expanded {
+ z-index: 4;
}
-.site-footer a {
- margin: 0 8px;
- color: #000;
- text-decoration: none;
+.selected-products,
+.chatbox {
+ margin: 0;
+ padding: 24px;
+ border: 1px solid rgba(0, 0, 0, 0.16);
+ box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}
-.site-footer a:hover {
- color: #666666;
+[dir="rtl"] .selected-products,
+[dir="rtl"] .chatbox {
+ text-align: right;
}
-/* products grid */
-.products-grid {
+.selected-products {
+ border-left: 6px solid var(--eternal-gold);
+ background: linear-gradient(120deg, #fff9ef 0%, #f9f0de 100%);
+}
+
+.chatbox {
+ border-left: 6px solid var(--signal-red);
+ background: linear-gradient(120deg, #fff7f9 0%, #fff1f4 100%);
+}
+
+.selected-products h2,
+.chatbox h2 {
+ font-family: var(--font-serif), Georgia, serif;
+ font-size: 1.65rem;
+ font-weight: 600;
+ margin-bottom: 18px;
+ letter-spacing: 0.04em;
+ text-transform: none;
+}
+
+#selectedProductsList {
display: flex;
flex-wrap: wrap;
- gap: 20px;
- margin: 30px 0;
+ gap: 10px;
}
-.product-card {
- flex: 0 1 calc(33.333% - 14px);
- border: 1px solid #ccc;
- padding: 15px;
- border-radius: 4px;
- display: flex;
- gap: 15px;
- min-height: 160px;
+[dir="rtl"] #selectedProductsList {
+ direction: rtl;
}
-.product-card img {
- width: 110px;
- height: 110px;
- object-fit: contain;
- flex-shrink: 0;
+.selected-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: #fff7e7;
+ border: 1px solid #e3c384;
+ color: #5b430f;
+ font-size: 0.8rem;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+}
+
+[dir="rtl"] .selected-chip {
+ flex-direction: row-reverse;
+}
+
+.selected-chip-remove {
+ width: 20px;
+ height: 20px;
+ border: 1px solid #d5aa54;
+ background: #fff2d6;
+ color: #7b5300;
+ font-size: 0.9rem;
+ line-height: 1;
+ cursor: pointer;
}
-.product-card .product-info {
- flex: 1;
+.selected-chip-remove:hover {
+ background: #ffe4b4;
+ border-color: #c08a27;
+}
+
+.selected-chip-remove:focus-visible {
+ outline: 2px solid rgba(255, 0, 59, 0.45);
+ outline-offset: 1px;
+}
+
+.clear-btn {
+ width: 100%;
+ margin-top: 14px;
+ padding: 11px;
+ border: 1px solid #d2bf95;
+ background: #fff6e3;
+ color: #5d430c;
+ font-family: var(--font-sans), Helvetica, sans-serif;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition:
+ background 0.2s ease,
+ border-color 0.2s ease,
+ transform 0.2s ease;
+}
+
+.clear-btn:hover {
+ background: #ffefcf;
+ border-color: #bc9a53;
+ transform: translateY(-1px);
+}
+
+.clear-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.selected-empty {
+ color: #7a6540;
+ font-size: 0.92rem;
+}
+
+.chat-window {
+ padding: 18px;
+ font-size: 0.98rem;
+ line-height: 1.75;
+ letter-spacing: 0.01em;
+ min-height: 180px;
+ max-height: 260px;
+ overflow-y: auto;
+ background: #ffffff;
+ border: 1px solid #e7cfd8;
+ margin-bottom: 16px;
+}
+
+[dir="rtl"] .chat-window {
+ direction: rtl;
+}
+
+.chat-message {
+ max-width: 92%;
+ padding: 10px 12px;
+ border: 1px solid #e2ddd4;
+ background: #ffffff;
+ margin-bottom: 10px;
+}
+
+.chat-message.user {
+ margin-left: auto;
+ border-color: #d4c9ad;
+ background: #fff8e9;
+}
+
+.chat-message.assistant {
+ margin-right: auto;
+ border-color: #e8d2d9;
+ background: #fffdfd;
+}
+
+[dir="rtl"] .chat-message.user {
+ margin-left: 0;
+ margin-right: auto;
+}
+
+[dir="rtl"] .chat-message.assistant {
+ margin-right: 0;
+ margin-left: auto;
+}
+
+.chat-message.assistant h3 {
+ margin: 8px 0 6px;
+ font-family: var(--font-serif), Georgia, serif;
+ font-size: 1.02rem;
+ line-height: 1.3;
+}
+
+.chat-message.assistant p {
+ margin: 0 0 8px;
+ line-height: 1.55;
+}
+
+.chat-message.assistant ul {
+ margin: 0 0 8px 18px;
+ padding: 0;
+}
+
+.chat-message.assistant li {
+ margin: 0 0 4px;
+ line-height: 1.5;
+}
+
+.chat-form {
display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 110px;
+ gap: 12px;
+ margin-top: 12px;
}
-.product-card h3 {
- font-size: 16px;
- margin-bottom: 8px;
+[dir="rtl"] .chat-form {
+ flex-direction: row-reverse;
}
-.product-card p {
- font-size: 14px;
- color: #666;
+.chat-form input {
+ flex: 1;
+ padding: 12px 6px;
+ font-family: var(--font-sans), Helvetica, sans-serif;
+ font-size: 0.98rem;
+ letter-spacing: 0.01em;
+ border: none;
+ border-bottom: 2px solid #d3aeb8;
+ background: transparent;
}
-/* selected products */
-.selected-products {
- margin: 40px 0;
- padding: 20px;
- border: 2px solid #000;
- border-radius: 8px;
+.chat-form input::placeholder {
+ letter-spacing: 0.03em;
+ color: #777;
}
-.selected-products h2 {
- font-size: 20px;
- margin-bottom: 20px;
+.chat-form input:focus {
+ outline: none;
+ border-bottom-color: var(--signal-red);
}
-#selectedProductsList {
+.chat-form button,
+.generate-btn {
+ border: none;
+ cursor: pointer;
+ transition:
+ transform 0.2s ease,
+ box-shadow 0.2s ease,
+ background 0.2s ease;
+}
+
+.chat-form button {
+ font-size: 1.05rem;
+ background: var(--signal-red);
+ color: #fff;
+ width: 48px;
+ height: 48px;
display: flex;
- flex-wrap: wrap;
- gap: 10px;
+ align-items: center;
+ justify-content: center;
+}
+
+.chat-form button:hover {
+ background: var(--ink-black);
+ transform: translateY(-1px);
+}
+
+.chat-form button:focus,
+.generate-btn:focus {
+ outline: 3px solid rgba(227, 165, 53, 0.5);
+ outline-offset: 2px;
}
.generate-btn {
width: 100%;
margin-top: 20px;
- padding: 16px;
- font-size: 18px;
- font-weight: 500;
- color: #fff;
- background: #000;
- border: none;
- border-radius: 8px;
- cursor: pointer;
- transition: background 0.3s;
+ padding: 15px;
+ font-family: var(--font-sans), Helvetica, sans-serif;
+ font-size: 0.92rem;
+ font-weight: 700;
+ color: var(--ink-black);
+ background: linear-gradient(90deg, #f2c56b, #e3a535);
+ letter-spacing: 0.11em;
+ text-transform: uppercase;
}
.generate-btn:hover {
- background: #666;
+ background: linear-gradient(90deg, #ffd790, #efb041);
+ box-shadow: 0 8px 16px rgba(227, 165, 53, 0.35);
+ transform: translateY(-1px);
+}
+
+.generate-btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+ background: linear-gradient(90deg, #e5d5b4, #d4c4a3);
+ color: #5e5548;
+ box-shadow: none;
+ transform: none;
}
.generate-btn i {
margin-right: 8px;
}
+
+.site-footer {
+ margin: 54px 0 10px;
+ text-align: center;
+ font-size: 0.82rem;
+ letter-spacing: 0.03em;
+ color: #efe9dd;
+ background: #1a1a1a;
+ padding: 18px 14px;
+ border-top: 3px solid var(--signal-red);
+}
+
+.site-footer nav {
+ margin-top: 12px;
+}
+
+.site-footer a {
+ margin: 0 8px;
+ font-weight: 600;
+ color: var(--soft-gold);
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+ transition:
+ color 0.2s ease,
+ border-color 0.2s ease;
+}
+
+.site-footer a:hover {
+ color: #ffffff;
+ border-color: #ffffff;
+}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+@media (max-width: 980px) {
+ .product-card {
+ flex: 0 1 calc(50% - 10px);
+ }
+}
+
+@media (max-width: 700px) {
+ .page-wrapper {
+ width: 96%;
+ margin: 18px 0;
+ padding: 18px;
+ }
+
+ .section-label {
+ margin: 22px 0 8px;
+ font-size: 0.62rem;
+ letter-spacing: 0.1em;
+ }
+
+ .site-title {
+ letter-spacing: 0.06em;
+ }
+
+ .product-card {
+ flex: 0 1 100%;
+ min-height: 175px;
+ }
+
+ .product-description-popover {
+ inset-inline-end: 0;
+ width: min(360px, 88vw);
+ }
+
+ .product-card img {
+ width: 88px;
+ height: 88px;
+ }
+
+ .selected-products,
+ .chatbox {
+ margin: 0;
+ padding: 18px;
+ }
+
+ .chat-form {
+ gap: 8px;
+ }
+}
${product.name}
-${product.brand}
+${product.brand}
+
+
+
+
+ ${product.description}
+