This commit is contained in:
Local Server
2025-12-19 20:44:46 -06:00
parent 701f799cde
commit e4b3de4a46
113 changed files with 16673 additions and 2174 deletions

View File

@@ -121,7 +121,7 @@
}
try {
const response = await fetch(\`/api/products/\${productId}\`);
const response = await fetch(`/api/products/${productId}`);
const data = await response.json();
if (!data.success || !data.product) {
@@ -129,9 +129,9 @@
}
const product = data.product;
document.title = \`\${product.name} - Sky Art Shop\`;
document.title = `${product.name} - Sky Art Shop`;
document.getElementById('productDetail').innerHTML = \`
document.getElementById('productDetail').innerHTML = `
<div style="font-family: 'Roboto', sans-serif;">
<nav style="background: white; padding: 16px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px;">
@@ -139,7 +139,7 @@
<span style="color: #d1d5db;">/</span>
<a href="/shop.html" style="color: #6b7280; text-decoration: none;">Shop</a>
<span style="color: #d1d5db;">/</span>
<span style="color: #6b7280;">\${product.name}</span>
<span style="color: #6b7280;">${product.name}</span>
</div>
</nav>
@@ -147,48 +147,48 @@
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px;">
<div>
<div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<img src="\${product.imageurl || '/assets/images/placeholder.jpg'}"
alt="\${product.name}"
<img src="${product.imageurl || '/assets/images/placeholder.jpg'}"
alt="${product.name}"
style="width: 100%; height: auto; display: block;"
onerror="this.src='/assets/images/placeholder.jpg'" />
</div>
</div>
<div style="padding: 20px 0;">
<h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">\${product.name}</h1>
<h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">${product.name}</h1>
<div style="display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px;">
<p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$\${parseFloat(product.price).toFixed(2)}</p>
\${product.stockquantity > 0 ?
\`<span style="color: #10b981; font-weight: 500;">In Stock (\${product.stockquantity} available)</span>\` :
\`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>\`
<p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$${parseFloat(product.price).toFixed(2)}</p>
${product.stockquantity > 0 ?
`<span style="color: #10b981; font-weight: 500;">In Stock (${product.stockquantity} available)</span>` :
`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>`
}
</div>
\${product.shortdescription ? \`
<p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">\${product.shortdescription}</p>
\` : ''}
${product.shortdescription ? `
<p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">${product.shortdescription}</p>
` : ''}
\${product.description ? \`
${product.description ? `
<div style="margin-bottom: 32px;">
<h3 style="font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px;">Description</h3>
<p style="color: #6b7280; line-height: 1.7;">\${product.description}</p>
<p style="color: #6b7280; line-height: 1.7;">${product.description}</p>
</div>
\` : ''}
` : ''}
\${product.category ? \`
${product.category ? `
<p style="margin-bottom: 16px;">
<span style="font-weight: 500; color: #6b7280;">Category:</span>
<span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">\${product.category}</span>
<span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">${product.category}</span>
</p>
\` : ''}
` : ''}
\${product.color ? \`
${product.color ? `
<p style="margin-bottom: 24px;">
<span style="font-weight: 500; color: #6b7280;">Color:</span>
<span style="margin-left: 8px;">\${product.color}</span>
<span style="margin-left: 8px;">${product.color}</span>
</p>
\` : ''}
` : ''}
<div style="display: flex; gap: 12px; margin-top: 32px;">
<button onclick="addToCart()"
@@ -213,7 +213,7 @@
</div>
</div>
</div>
\`;
`;
document.getElementById('loading').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';