feat: implement dynamic categories, admin category CRUD, fix routing and cleanup
This commit is contained in:
AyrisAI
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Marmaris Local - Widget Test Sayfası</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #FBFAF6;
|
||||
color: #123238;
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding: 40px 20px;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
border-bottom: 2px dashed #12323815;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #D23B68;
|
||||
}
|
||||
.demo-box {
|
||||
background: white;
|
||||
border: 1px solid #12323810;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>marmaris local widget demo</h1>
|
||||
<p>Bu sayfa, Muğla Dijital Medya ortak sitelerine yerleştirilecek olan <strong>bölgesel öneri widget'ının</strong> önizlemesini test etmek amacıyla oluşturulmuştur.</p>
|
||||
|
||||
<h2>1. Açık Tema Demo (data-neighborhood="yat-limani")</h2>
|
||||
<div class="demo-box">
|
||||
<!-- Widget Script Embed -->
|
||||
<script src="./widget.js" data-neighborhood="yat-limani" data-theme="light"></script>
|
||||
</div>
|
||||
|
||||
<h2>2. Koyu Tema Demo (data-neighborhood="yat-limani" data-theme="dark")</h2>
|
||||
<div class="demo-box" style="background-color: #1a1a1a;">
|
||||
<!-- Widget Script Embed -->
|
||||
<script src="./widget.js" data-neighborhood="yat-limani" data-theme="dark"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,224 @@
|
||||
(function() {
|
||||
const currentScript = document.currentScript;
|
||||
if (!currentScript) return;
|
||||
|
||||
const neighborhood = currentScript.getAttribute('data-neighborhood') || '';
|
||||
const theme = currentScript.getAttribute('data-theme') || 'light';
|
||||
|
||||
// Extract base URL of the running script dynamically
|
||||
const scriptUrl = currentScript.src;
|
||||
const baseUrl = new URL(scriptUrl).origin;
|
||||
|
||||
if (!neighborhood) {
|
||||
console.error('Marmaris Local Widget: data-neighborhood parameter is missing.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create widget container element
|
||||
const container = document.createElement('div');
|
||||
container.className = 'marmaris-local-widget-wrapper';
|
||||
currentScript.parentNode.insertBefore(container, currentScript);
|
||||
|
||||
// Inject CSS Styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.marmaris-local-widget-wrapper {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
border: 1px solid ${theme === 'dark' ? '#254449' : '#12323815'};
|
||||
background-color: ${theme === 'dark' ? '#123238' : '#FBFAF6'};
|
||||
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 4px 12px rgba(18, 50, 56, 0.04);
|
||||
}
|
||||
.marmaris-local-widget-header {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.marmaris-local-widget-header h4 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: lowercase;
|
||||
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
|
||||
}
|
||||
.marmaris-local-widget-header h4 span {
|
||||
color: #39C3C3;
|
||||
}
|
||||
.marmaris-local-widget-header .neighborhood-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #D23B68;
|
||||
background-color: rgba(210, 59, 104, 0.06);
|
||||
padding: 3px 8px;
|
||||
border-radius: 99px;
|
||||
border: 1px solid rgba(210, 59, 104, 0.1);
|
||||
}
|
||||
.marmaris-local-widget-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.marmaris-local-widget-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
background: ${theme === 'dark' ? '#254449' : '#FFFFFF'};
|
||||
border: 1px solid ${theme === 'dark' ? '#ffffff10' : '#12323808'};
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.marmaris-local-widget-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(57, 195, 195, 0.35);
|
||||
box-shadow: 0 4px 10px rgba(18, 50, 56, 0.06);
|
||||
}
|
||||
.marmaris-local-widget-card-image {
|
||||
aspect-ratio: 16 / 10;
|
||||
width: 100%;
|
||||
background: #12323810;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.marmaris-local-widget-card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.marmaris-local-widget-card:hover .marmaris-local-widget-card-image img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.marmaris-local-widget-card-content {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.marmaris-local-widget-card-category {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #D23B68;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.marmaris-local-widget-card-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
|
||||
margin: 0 0 6px 0;
|
||||
line-height: 1.25;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.marmaris-local-widget-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
color: ${theme === 'dark' ? '#FBFAF680' : '#12323865'};
|
||||
border-top: 1px dashed ${theme === 'dark' ? '#ffffff10' : '#12323808'};
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.marmaris-local-widget-card-footer .stars {
|
||||
color: #FFB020;
|
||||
font-weight: bold;
|
||||
}
|
||||
.marmaris-local-widget-card-footer .price {
|
||||
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
|
||||
font-weight: bold;
|
||||
}
|
||||
.marmaris-local-widget-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid ${theme === 'dark' ? '#ffffff10' : '#12323810'};
|
||||
padding-top: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: ${theme === 'dark' ? '#FBFAF650' : '#12323850'};
|
||||
}
|
||||
.marmaris-local-widget-footer a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.marmaris-local-widget-footer a:hover {
|
||||
color: #39C3C3;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Fetch nearby approved listings
|
||||
fetch(`${baseUrl}/api/widget/nearby?neighborhood=${encodeURIComponent(neighborhood)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const listings = data.listings || [];
|
||||
|
||||
if (listings.length === 0) {
|
||||
container.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Render Header
|
||||
let html = `
|
||||
<div class="marmaris-local-widget-header">
|
||||
<h4>yakında <span>nerede yenir?</span></h4>
|
||||
<span class="neighborhood-badge">${neighborhood}</span>
|
||||
</div>
|
||||
<div class="marmaris-local-widget-grid">
|
||||
`;
|
||||
|
||||
// Render Cards
|
||||
listings.slice(0, 3).forEach(item => {
|
||||
const itemUrl = `${baseUrl}/${item.categorySlug}/${item.slug}`;
|
||||
html += `
|
||||
<a href="${itemUrl}" target="_blank" class="marmaris-local-widget-card">
|
||||
<div class="marmaris-local-widget-card-image">
|
||||
<img src="${item.coverImage}" alt="${item.name}">
|
||||
</div>
|
||||
<div class="marmaris-local-widget-card-content">
|
||||
<div>
|
||||
<div class="marmaris-local-widget-card-category">${item.categoryName}</div>
|
||||
<h5 class="marmaris-local-widget-card-title">${item.name.toLowerCase()}</h5>
|
||||
</div>
|
||||
<div class="marmaris-local-widget-card-footer">
|
||||
<span class="price">${item.priceSymbols}</span>
|
||||
${item.rating ? `<span class="stars">★ ${item.rating.toFixed(1)}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
|
||||
// Render Footer Stamp (Mandatory visibility for search quality guidelines)
|
||||
html += `
|
||||
</div>
|
||||
<div class="marmaris-local-widget-footer">
|
||||
<span>yerel öneriler</span>
|
||||
<span>detaylar <a href="${baseUrl}" target="_blank">marmaris local</a>\\'de</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Marmaris Local Widget load error:', err);
|
||||
container.style.display = 'none';
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user