<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DMCTurk – Menu Admin Panel</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #B5914E; --gold-light: #FDF6EC; --gold-border: #E8D5B0; --dark: #1A1A1A; --mid: #444; --muted: #888; --line: #E8E0D4; --white: #fff; --bg: #F7F6F3; --danger: #C0392B; --danger-light: #FDEDEC; --success: #27AE60; --success-light: #EAFAF1; --info: #2980B9; --info-light: #EBF5FB; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; min-height: 100vh; } /* ── TOPBAR ── */ .topbar { background: var(--dark); color: var(--white); padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .topbar-brand .dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } .topbar-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.5); } .badge-live { background: var(--success); color: white; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 2px; letter-spacing: 0.05em; } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 56px); } /* ── SIDEBAR ── */ .sidebar { background: var(--white); border-right: 1px solid var(--line); padding: 24px 0; } .sidebar-section { padding: 0 20px; margin-bottom: 8px; } .sidebar-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 12px 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--mid); transition: all 0.15s; text-decoration: none; } .sidebar-item:hover { background: var(--bg); color: var(--dark); } .sidebar-item.active { background: var(--gold-light); color: var(--gold); font-weight: 500; } .sidebar-icon { font-size: 15px; width: 20px; text-align: center; } .sidebar-divider { height: 1px; background: var(--line); margin: 12px 20px; } /* ── MAIN ── */ .main { padding: 32px; overflow-y: auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .page-title { font-size: 20px; font-weight: 500; color: var(--dark); margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--muted); font-weight: 300; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; border-radius: 3px; transition: all 0.15s; text-decoration: none; } .btn-primary { background: var(--gold); color: white; } .btn-primary:hover { background: #9a7a3e; } .btn-secondary { background: var(--white); color: var(--mid); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #f5b7b1; } .btn-danger:hover { background: var(--danger); color: white; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-xs { padding: 3px 8px; font-size: 11px; } /* ── CARDS ── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 14px; font-weight: 500; color: var(--dark); } .card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .card-body { padding: 20px; } /* ── MENU TREE ── */ .menu-tree { display: flex; flex-direction: column; gap: 6px; } .menu-item { background: var(--white); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .menu-item.is-parent { border-left: 3px solid var(--gold); } .menu-item.is-child { border-left: 3px solid var(--gold-border); margin-left: 32px; } .menu-row { display: grid; grid-template-columns: 28px 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 10px 14px; } .drag-handle { color: var(--muted); cursor: grab; font-size: 14px; text-align: center; user-select: none; } .menu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .menu-name { font-size: 13px; font-weight: 500; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-url { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-type { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.05em; white-space: nowrap; } .type-parent { background: var(--gold-light); color: var(--gold); } .type-child { background: #f0f4ff; color: #3a5bd9; } .type-page { background: var(--info-light); color: var(--info); } .menu-status { width: 36px; height: 20px; background: var(--success); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .menu-status.off { background: var(--line); } .menu-status::after { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 3px; right: 3px; transition: right 0.2s; } .menu-status.off::after { right: auto; left: 3px; } .menu-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── CHILDREN BLOCK ── */ .children-block { background: #fafaf8; border-top: 1px solid var(--line); padding: 10px 14px 10px 44px; display: flex; flex-direction: column; gap: 6px; } .child-row { display: grid; grid-template-columns: 20px 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; } /* ── FORM ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--mid); margin-bottom: 6px; letter-spacing: 0.03em; } .form-input, .form-select { width: 100%; padding: 9px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--dark); transition: border-color 0.15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--gold); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: 4px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 15px; font-weight: 500; } .modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--dark); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; } /* ── PREVIEW ── */ .nav-preview { background: var(--dark); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 28px; border-radius: 3px; overflow-x: auto; margin-bottom: 20px; } .preview-logo { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; margin-right: 8px; } .preview-logo span { color: var(--gold); } .preview-link { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; cursor: default; } .preview-link.has-dropdown::after { content: ' ▾'; font-size: 10px; } .preview-cta { background: var(--gold); color: white !important; padding: 6px 14px; border-radius: 2px; font-weight: 500; } /* ── STATS ── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; } .stat-label { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; } .stat-value { font-size: 24px; font-weight: 500; color: var(--dark); } /* ── ALERT ── */ .alert { padding: 12px 16px; border-radius: 3px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-info { background: var(--info-light); color: var(--info); border-left: 3px solid var(--info); } .alert-success { background: var(--success-light); color: var(--success); border-left: 3px solid var(--success); } </style> </head> <body> <!-- ══ TOPBAR ══ --> <div class="topbar"> <div class="topbar-brand"> <div class="dot"></div> DMCTurk Admin <span style="color:rgba(255,255,255,0.3); font-weight:300;">/ Menu Manager</span> </div> <div class="topbar-meta"> <span class="badge-live">LIVE</span> <span>dmcturk.com</span> <a href="https://www.dmcturk.com" target="_blank" style="color:var(--gold); text-decoration:none; font-size:12px;">↗ View Site</a> </div> </div> <div class="layout"> <!-- ══ SIDEBAR ══ --> <aside class="sidebar"> <div class="sidebar-label">Navigation</div> <div class="sidebar-section"> <div class="sidebar-item active" id="nav-menu" onclick="showSection('menu')"> <span class="sidebar-icon">☰</span> Menu Manager </div> <div class="sidebar-item" id="nav-pages" onclick="showSection('pages')"> <span class="sidebar-icon">📄</span> Pages </div> <div class="sidebar-item" id="nav-dropdowns" onclick="showSection('dropdowns')"> <span class="sidebar-icon">🗂️</span> Dropdown Groups </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Site Structure</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">🏠</span> Home </div> <div class="sidebar-item"> <span class="sidebar-icon">🗺️</span> Package Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🏙️</span> City Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🚐</span> Transfers </div> <div class="sidebar-item"> <span class="sidebar-icon">📋</span> Terms & Conditions </div> <div class="sidebar-item"> <span class="sidebar-icon">✉️</span> Contact </div> <div class="sidebar-item"> <span class="sidebar-icon">📝</span> Blog </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Settings</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">⚙️</span> Nav Settings </div> <div class="sidebar-item"> <span class="sidebar-icon">🌐</span> Languages </div> </div> </aside> <!-- ══ MAIN ══ --> <main class="main"> <!-- ══ MENU MANAGER SECTION ══ --> <div id="section-menu"> <div class="page-header"> <div> <div class="page-title">Menu Manager</div> <div class="page-sub">Manage navigation items, order, dropdowns and visibility for dmcturk.com</div> </div> <div style="display:flex; gap:8px;"> <button class="btn btn-secondary" onclick="exportMenu()">⬇ Export JSON</button> <button class="btn btn-primary" onclick="openAddModal()">+ Add Menu Item</button> </div> </div> <!-- Stats --> <div class="stats-row"> <div class="stat-card"> <div class="stat-label">Total Items</div> <div class="stat-value" id="stat-total">14</div> </div> <div class="stat-card"> <div class="stat-label">Top Level</div> <div class="stat-value" id="stat-top">7</div> </div> <div class="stat-card"> <div class="stat-label">Dropdowns</div> <div class="stat-value" id="stat-dropdowns">2</div> </div> <div class="stat-card"> <div class="stat-label">Hidden</div> <div class="stat-value" id="stat-hidden">0</div> </div> </div> <!-- Alert --> <div class="alert alert-info" id="save-alert" style="display:none;"> ✓ Changes saved successfully! Remember to publish to make changes live. </div> <!-- Live Preview --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Live Preview</div> <div class="card-sub">This is how the navigation looks on the site</div> </div> <button class="btn btn-secondary btn-sm" onclick="refreshPreview()">↻ Refresh</button> </div> <div class="card-body" style="padding: 16px;"> <div class="nav-preview" id="nav-preview"> <div class="preview-logo">DMC<span>Turk</span></div> </div> </div> </div> <!-- Menu Tree --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Navigation Structure</div> <div class="card-sub">Drag to reorder · Toggle visibility · Edit or delete items</div> </div> <div style="display:flex; gap:6px;"> <button class="btn btn-secondary btn-sm" onclick="expandAll()">Expand All</button> <button class="btn btn-secondary btn-sm" onclick="collapseAll()">Collapse All</button> </div> </div> <div class="card-body"> <div class="menu-tree" id="menu-tree"></div> </div> </div> <!-- Save Button --> <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 8px;"> <button class="btn btn-secondary" onclick="resetMenu()">↩ Reset Changes</button> <button class="btn btn-primary" onclick="saveMenu()">💾 Save Changes</button> </div> </div><!-- /section-menu --> <!-- ══ PAGES SECTION ══ --> <div id="section-pages" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Pages</div> <div class="page-sub">All pages on dmcturk.com — edit title and URL</div> </div> <button class="btn btn-primary" onclick="openAddPageModal()">+ Add Page</button> </div> <div class="card"> <div class="card-header"> <div class="card-title">All Pages</div> <div class="card-sub">Click Edit to update page title or URL</div> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> <thead> <tr style="background:var(--bg); border-bottom:1px solid var(--line);"> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Page Title</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">URL</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Category</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Status</th> <th style="padding:10px 16px;"></th> </tr> </thead> <tbody id="pages-tbody"></tbody> </table> </div> </div> </div><!-- /section-pages --> <!-- ══ DROPDOWNS SECTION ══ --> <div id="section-dropdowns" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Dropdown Groups</div> <div class="page-sub">Manage dropdown parent menus and their sub-items</div> </div> </div> <div id="dropdowns-content"></div> </div><!-- /section-dropdowns --> </main> </div> <!-- ══ PAGE EDIT MODAL ══ --> <div class="modal-overlay" id="page-modal" onclick="closePageModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="page-modal-title">Edit Page</div> <button class="modal-close" onclick="closePageModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Page Title *</label> <input class="form-input" id="pf-title" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="pf-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Category</label> <select class="form-select" id="pf-category"> <option value="Main">Main</option> <option value="Package Tours">Package Tours</option> <option value="City Tours">City Tours</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label class="form-label">Status</label> <select class="form-select" id="pf-status"> <option value="Published">Published</option> <option value="Draft">Draft</option> <option value="Hidden">Hidden</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closePageModal()">Cancel</button> <button class="btn btn-primary" onclick="savePageItem()">Save Page</button> </div> </div> </div> <!-- ══ ADD/EDIT MODAL ══ --> <div class="modal-overlay" id="modal" onclick="closeModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="modal-title">Add Menu Item</div> <button class="modal-close" onclick="closeModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Label *</label> <input class="form-input" id="f-label" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="f-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Type</label> <select class="form-select" id="f-type" onchange="onTypeChange()"> <option value="page">Page Link</option> <option value="parent">Parent (with dropdown)</option> <option value="child">Child (sub-item)</option> <option value="cta">CTA Button</option> </select> </div> <div class="form-group" id="parent-group" style="display:none;"> <label class="form-label">Parent Item</label> <select class="form-select" id="f-parent"></select> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Open in</label> <select class="form-select" id="f-target"> <option value="_self">Same tab</option> <option value="_blank">New tab</option> </select> </div> <div class="form-group"> <label class="form-label">Visible</label> <select class="form-select" id="f-visible"> <option value="1">Yes – Show in menu</option> <option value="0">No – Hide from menu</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal()">Cancel</button> <button class="btn btn-primary" onclick="saveItem()">Save Item</button> </div> </div> </div> <script> // ── DATA ── let menuData = [ { id: 1, label: 'Home', url: 'https://www.dmcturk.com', type: 'page', target: '_self', visible: true, parent: null }, { id: 2, label: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', type: 'parent', target: '_self', visible: true, parent: null }, { id: 3, label: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 4, label: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 5, label: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 6, label: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 7, label: '7 Churches', url: 'https://www.dmcturk.com/7churches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 8, label: 'City Tours', url: 'https://www.dmcturk.com/services-5', type: 'parent', target: '_self', visible: true, parent: null }, { id: 9, label: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 10, label: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 11, label: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 12, label: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 13, label: 'Transfers', url: 'https://www.dmcturk.com/kopy%C4%B1s%C4%B1-general-conditions', type: 'page', target: '_self', visible: true, parent: null }, { id: 14, label: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', type: 'page', target: '_self', visible: true, parent: null }, { id: 15, label: 'Blog', url: 'https://www.dmcturk.com/blog', type: 'page', target: '_self', visible: true, parent: null }, { id: 16, label: 'Contact', url: 'https://www.dmcturk.com/contact', type: 'cta', target: '_self', visible: true, parent: null }, ]; let editingId = null; let nextId = 17; let expandedParents = new Set([2, 8]); // ── RENDER TREE ── function renderTree() { const tree = document.getElementById('menu-tree'); tree.innerHTML = ''; const parents = menuData.filter(i => !i.parent); parents.forEach(item => { const children = menuData.filter(c => c.parent === item.id); const isParent = item.type === 'parent'; const isExpanded = expandedParents.has(item.id); const div = document.createElement('div'); div.className = 'menu-item' + (isParent ? ' is-parent' : ''); div.dataset.id = item.id; const typeLabel = item.type === 'parent' ? 'Dropdown' : item.type === 'cta' ? 'CTA' : 'Page'; const typeClass = item.type === 'parent' ? 'type-parent' : item.type === 'cta' ? 'type-parent' : 'type-page'; div.innerHTML = ` <div class="menu-row"> <div class="drag-handle" title="Drag to reorder">⋮⋮</div> <div class="menu-info"> <div class="menu-name">${item.label} ${isParent && children.length ? `<small style="color:var(--muted);font-weight:300;">(${children.length} items)</small>` : ''}</div> <div class="menu-url">${item.url}</div> </div> <span class="menu-type ${typeClass}">${typeLabel}</span> <div class="menu-status ${item.visible ? '' : 'off'}" title="${item.visible ? 'Visible' : 'Hidden'}" onclick="toggleVisible(${item.id})"></div> <div class="menu-actions"> ${isParent ? `<button class="btn btn-secondary btn-xs" onclick="toggleExpand(${item.id})">${isExpanded ? '▲' : '▼'}</button>` : ''} <button class="btn btn-secondary btn-xs" onclick="openEditModal(${item.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${item.id})">✕</button> </div> </div> ${isParent && isExpanded ? renderChildren(item.id) : ''} `; tree.appendChild(div); }); renderPreview(); updateStats(); } function renderChildren(parentId) { const children = menuData.filter(c => c.parent === parentId); if (!children.length) return `<div class="children-block" style="color:var(--muted);font-size:13px;">No sub-items. <span style="cursor:pointer;color:var(--gold);" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div>`; const rows = children.map(c => ` <div class="child-row" data-id="${c.id}"> <div class="drag-handle" style="font-size:12px;">⋮⋮</div> <div class="menu-info"> <div class="menu-name" style="font-size:13px;">${c.label}</div> <div class="menu-url" style="font-size:11px;">${c.url}</div> </div> <div class="menu-status ${c.visible ? '' : 'off'}" style="width:30px;height:16px;" onclick="toggleVisible(${c.id})"></div> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${c.id})">✕</button> </div> `).join(''); return `<div class="children-block">${rows}<div style="margin-top:8px;"><span style="cursor:pointer;color:var(--gold);font-size:12px;" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div></div>`; } // ── PREVIEW ── function renderPreview() { const preview = document.getElementById('nav-preview'); const visible = menuData.filter(i => i.visible && !i.parent); let html = '<div class="preview-logo">DMC<span>Turk</span></div>'; visible.forEach(item => { const hasDrop = item.type === 'parent' && menuData.some(c => c.parent === item.id && c.visible); const cls = item.type === 'cta' ? 'preview-link preview-cta' : hasDrop ? 'preview-link has-dropdown' : 'preview-link'; html += `<span class="${cls}">${item.label}</span>`; }); preview.innerHTML = html; } // ── STATS ── function updateStats() { const tops = menuData.filter(i => !i.parent); const drops = menuData.filter(i => i.type === 'parent'); const hidden = menuData.filter(i => !i.visible); document.getElementById('stat-total').textContent = menuData.length; document.getElementById('stat-top').textContent = tops.length; document.getElementById('stat-dropdowns').textContent = drops.length; document.getElementById('stat-hidden').textContent = hidden.length; } // ── TOGGLE ── function toggleVisible(id) { const item = menuData.find(i => i.id === id); if (item) item.visible = !item.visible; renderTree(); } function toggleExpand(id) { if (expandedParents.has(id)) expandedParents.delete(id); else expandedParents.add(id); renderTree(); } function expandAll() { menuData.filter(i => i.type === 'parent').forEach(i => expandedParents.add(i.id)); renderTree(); } function collapseAll() { expandedParents.clear(); renderTree(); } // ── MODAL ── function openAddModal() { editingId = null; document.getElementById('modal-title').textContent = 'Add Menu Item'; document.getElementById('f-label').value = ''; document.getElementById('f-url').value = 'https://www.dmcturk.com/'; document.getElementById('f-type').value = 'page'; document.getElementById('f-target').value = '_self'; document.getElementById('f-visible').value = '1'; populateParentSelect(); onTypeChange(); document.getElementById('modal').classList.add('open'); } function openAddChildModal(parentId) { openAddModal(); document.getElementById('f-type').value = 'child'; document.getElementById('f-parent').value = parentId; onTypeChange(); } function openEditModal(id) { const item = menuData.find(i => i.id === id); if (!item) return; editingId = id; document.getElementById('modal-title').textContent = 'Edit Menu Item'; document.getElementById('f-label').value = item.label; document.getElementById('f-url').value = item.url; document.getElementById('f-type').value = item.type; document.getElementById('f-target').value = item.target; document.getElementById('f-visible').value = item.visible ? '1' : '0'; populateParentSelect(); document.getElementById('f-parent').value = item.parent || ''; onTypeChange(); document.getElementById('modal').classList.add('open'); } function closeModal() { document.getElementById('modal').classList.remove('open'); } function closeModalOutside(e) { if (e.target === document.getElementById('modal')) closeModal(); } function populateParentSelect() { const sel = document.getElementById('f-parent'); const parents = menuData.filter(i => i.type === 'parent'); sel.innerHTML = parents.map(p => `<option value="${p.id}">${p.label}</option>`).join(''); } function onTypeChange() { const t = document.getElementById('f-type').value; document.getElementById('parent-group').style.display = t === 'child' ? 'block' : 'none'; } function saveItem() { const label = document.getElementById('f-label').value.trim(); const url = document.getElementById('f-url').value.trim(); if (!label || !url) { alert('Label and URL are required.'); return; } const type = document.getElementById('f-type').value; const target = document.getElementById('f-target').value; const visible = document.getElementById('f-visible').value === '1'; const parentVal = document.getElementById('f-parent').value; const parent = type === 'child' && parentVal ? parseInt(parentVal) : null; if (editingId) { const item = menuData.find(i => i.id === editingId); Object.assign(item, { label, url, type, target, visible, parent }); } else { menuData.push({ id: nextId++, label, url, type, target, visible, parent }); } if (parent && type === 'parent') expandedParents.add(parseInt(parentVal)); closeModal(); renderTree(); } // ── DELETE ── function deleteItem(id) { const item = menuData.find(i => i.id === id); if (!item) return; const children = menuData.filter(c => c.parent === id); const msg = children.length ? `Delete "${item.label}" and its ${children.length} sub-item(s)?` : `Delete "${item.label}"?`; if (!confirm(msg)) return; menuData = menuData.filter(i => i.id !== id && i.parent !== id); renderTree(); } // ── SAVE / RESET ── function saveMenu() { const alert = document.getElementById('save-alert'); alert.style.display = 'flex'; alert.className = 'alert alert-success'; alert.textContent = '✓ Changes saved successfully! Remember to publish to make changes live.'; setTimeout(() => alert.style.display = 'none', 3500); } function resetMenu() { if (confirm('Reset all changes?')) location.reload(); } // ── EXPORT ── function exportMenu() { const json = JSON.stringify(menuData, null, 2); const blob = new Blob([json], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'dmcturk-menu.json'; a.click(); } function refreshPreview() { renderPreview(); } // ── SECTION SWITCHING ── function showSection(name) { ['menu','pages','dropdowns'].forEach(s => { document.getElementById('section-' + s).style.display = s === name ? 'block' : 'none'; const nav = document.getElementById('nav-' + s); if (nav) nav.classList.toggle('active', s === name); }); if (name === 'pages') renderPages(); if (name === 'dropdowns') renderDropdowns(); } // ── PAGES DATA ── let pagesData = [ { id: 1, title: 'Home', url: 'https://www.dmcturk.com', category: 'Main', status: 'Published' }, { id: 2, title: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', category: 'Main', status: 'Published' }, { id: 3, title: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', category: 'Package Tours', status: 'Published' }, { id: 4, title: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', category: 'Package Tours', status: 'Published' }, { id: 5, title: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', category: 'Package Tours', status: 'Published' }, { id: 6, title: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', category: 'Package Tours', status: 'Published' }, { id: 7, title: '7 Churches', url: 'https://www.dmcturk.com/7churches', category: 'Package Tours', status: 'Published' }, { id: 8, title: 'City Tours', url: 'https://www.dmcturk.com/services-5', category: 'Main', status: 'Published' }, { id: 9, title: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', category: 'City Tours', status: 'Published' }, { id: 10, title: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', category: 'City Tours', status: 'Published' }, { id: 11, title: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', category: 'City Tours', status: 'Published' }, { id: 12, title: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', category: 'City Tours', status: 'Published' }, { id: 13, title: 'Transfers', url: 'https://www.dmcturk.com/kopyası-general-conditions', category: 'Main', status: 'Published' }, { id: 14, title: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', category: 'Main', status: 'Published' }, { id: 15, title: 'Contact', url: 'https://www.dmcturk.com/contact', category: 'Main', status: 'Published' }, { id: 16, title: 'Blog', url: 'https://www.dmcturk.com/blog', category: 'Main', status: 'Published' }, ]; let nextPageId = 17; let editingPageId = null; function renderPages() { const tbody = document.getElementById('pages-tbody'); tbody.innerHTML = pagesData.map(p => { const statusColor = p.status === 'Published' ? 'var(--success)' : p.status === 'Draft' ? 'var(--gold)' : 'var(--muted)'; return `<tr style="border-bottom:1px solid var(--line);"> <td style="padding:12px 16px; font-weight:500; color:var(--dark);">${p.title}</td> <td style="padding:12px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> <a href="${p.url}" target="_blank" style="color:var(--muted); text-decoration:none;" title="${p.url}">${p.url}</a> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; background:var(--gold-light); color:var(--gold); padding:2px 8px; border-radius:2px; font-weight:500;">${p.category}</span> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; font-weight:500; color:${statusColor};">● ${p.status}</span> </td> <td style="padding:12px 16px; text-align:right;"> <div style="display:flex; gap:6px; justify-content:flex-end;"> <a href="${p.url}" target="_blank" class="btn btn-secondary btn-xs">↗ View</a> <button class="btn btn-secondary btn-xs" onclick="openEditPageModal(${p.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deletePage(${p.id})">✕</button> </div> </td> </tr>`; }).join(''); } function openAddPageModal() { editingPageId = null; document.getElementById('page-modal-title').textContent = 'Add Page'; document.getElementById('pf-title').value = ''; document.getElementById('pf-url').value = 'https://www.dmcturk.com/'; document.getElementById('pf-category').value = 'Main'; document.getElementById('pf-status').value = 'Published'; document.getElementById('page-modal').classList.add('open'); } function openEditPageModal(id) { const page = pagesData.find(p => p.id === id); if (!page) return; editingPageId = id; document.getElementById('page-modal-title').textContent = 'Edit Page'; document.getElementById('pf-title').value = page.title; document.getElementById('pf-url').value = page.url; document.getElementById('pf-category').value = page.category; document.getElementById('pf-status').value = page.status; document.getElementById('page-modal').classList.add('open'); } function closePageModal() { document.getElementById('page-modal').classList.remove('open'); } function closePageModalOutside(e) { if (e.target === document.getElementById('page-modal')) closePageModal(); } function savePageItem() { const title = document.getElementById('pf-title').value.trim(); const url = document.getElementById('pf-url').value.trim(); if (!title || !url) { alert('Title and URL are required.'); return; } const category = document.getElementById('pf-category').value; const status = document.getElementById('pf-status').value; if (editingPageId) { const page = pagesData.find(p => p.id === editingPageId); Object.assign(page, { title, url, category, status }); } else { pagesData.push({ id: nextPageId++, title, url, category, status }); } closePageModal(); renderPages(); } function deletePage(id) { const page = pagesData.find(p => p.id === id); if (!page) return; if (!confirm(`Delete page "${page.title}"?`)) return; pagesData = pagesData.filter(p => p.id !== id); renderPages(); } // ── DROPDOWNS ── function renderDropdowns() { const container = document.getElementById('dropdowns-content'); const parents = menuData.filter(i => i.type === 'parent'); container.innerHTML = parents.map(p => { const children = menuData.filter(c => c.parent === p.id); return `<div class="card" style="margin-bottom:16px;"> <div class="card-header"> <div> <div class="card-title">${p.label}</div> <div class="card-sub">${p.url} · ${children.length} sub-item(s)</div> </div> <button class="btn btn-secondary btn-sm" onclick="showSection('menu'); expandedParents.add(${p.id}); renderTree();">Edit in Menu Manager</button> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> ${children.map((c,i) => ` <tr style="border-bottom: ${i < children.length-1 ? '1px solid var(--line)' : 'none'};"> <td style="padding:10px 16px; font-weight:500;">${c.label}</td> <td style="padding:10px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted);">${c.url}</td> <td style="padding:10px 16px; text-align:right;"> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id}); showSection('menu');">Edit</button> </td> </tr>`).join('')} </table> </div> </div>`; }).join(''); } // ── INIT ── renderTree(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DMCTurk – Menu Admin Panel</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #B5914E; --gold-light: #FDF6EC; --gold-border: #E8D5B0; --dark: #1A1A1A; --mid: #444; --muted: #888; --line: #E8E0D4; --white: #fff; --bg: #F7F6F3; --danger: #C0392B; --danger-light: #FDEDEC; --success: #27AE60; --success-light: #EAFAF1; --info: #2980B9; --info-light: #EBF5FB; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; min-height: 100vh; } /* ── TOPBAR ── */ .topbar { background: var(--dark); color: var(--white); padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .topbar-brand .dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } .topbar-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.5); } .badge-live { background: var(--success); color: white; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 2px; letter-spacing: 0.05em; } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 56px); } /* ── SIDEBAR ── */ .sidebar { background: var(--white); border-right: 1px solid var(--line); padding: 24px 0; } .sidebar-section { padding: 0 20px; margin-bottom: 8px; } .sidebar-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 12px 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--mid); transition: all 0.15s; text-decoration: none; } .sidebar-item:hover { background: var(--bg); color: var(--dark); } .sidebar-item.active { background: var(--gold-light); color: var(--gold); font-weight: 500; } .sidebar-icon { font-size: 15px; width: 20px; text-align: center; } .sidebar-divider { height: 1px; background: var(--line); margin: 12px 20px; } /* ── MAIN ── */ .main { padding: 32px; overflow-y: auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .page-title { font-size: 20px; font-weight: 500; color: var(--dark); margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--muted); font-weight: 300; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; border-radius: 3px; transition: all 0.15s; text-decoration: none; } .btn-primary { background: var(--gold); color: white; } .btn-primary:hover { background: #9a7a3e; } .btn-secondary { background: var(--white); color: var(--mid); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #f5b7b1; } .btn-danger:hover { background: var(--danger); color: white; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-xs { padding: 3px 8px; font-size: 11px; } /* ── CARDS ── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 14px; font-weight: 500; color: var(--dark); } .card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .card-body { padding: 20px; } /* ── MENU TREE ── */ .menu-tree { display: flex; flex-direction: column; gap: 6px; } .menu-item { background: var(--white); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .menu-item.is-parent { border-left: 3px solid var(--gold); } .menu-item.is-child { border-left: 3px solid var(--gold-border); margin-left: 32px; } .menu-row { display: grid; grid-template-columns: 28px 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 10px 14px; } .drag-handle { color: var(--muted); cursor: grab; font-size: 14px; text-align: center; user-select: none; } .menu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .menu-name { font-size: 13px; font-weight: 500; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-url { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-type { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.05em; white-space: nowrap; } .type-parent { background: var(--gold-light); color: var(--gold); } .type-child { background: #f0f4ff; color: #3a5bd9; } .type-page { background: var(--info-light); color: var(--info); } .menu-status { width: 36px; height: 20px; background: var(--success); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .menu-status.off { background: var(--line); } .menu-status::after { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 3px; right: 3px; transition: right 0.2s; } .menu-status.off::after { right: auto; left: 3px; } .menu-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── CHILDREN BLOCK ── */ .children-block { background: #fafaf8; border-top: 1px solid var(--line); padding: 10px 14px 10px 44px; display: flex; flex-direction: column; gap: 6px; } .child-row { display: grid; grid-template-columns: 20px 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; } /* ── FORM ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--mid); margin-bottom: 6px; letter-spacing: 0.03em; } .form-input, .form-select { width: 100%; padding: 9px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--dark); transition: border-color 0.15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--gold); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: 4px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 15px; font-weight: 500; } .modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--dark); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; } /* ── PREVIEW ── */ .nav-preview { background: var(--dark); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 28px; border-radius: 3px; overflow-x: auto; margin-bottom: 20px; } .preview-logo { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; margin-right: 8px; } .preview-logo span { color: var(--gold); } .preview-link { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; cursor: default; } .preview-link.has-dropdown::after { content: ' ▾'; font-size: 10px; } .preview-cta { background: var(--gold); color: white !important; padding: 6px 14px; border-radius: 2px; font-weight: 500; } /* ── STATS ── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; } .stat-label { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; } .stat-value { font-size: 24px; font-weight: 500; color: var(--dark); } /* ── ALERT ── */ .alert { padding: 12px 16px; border-radius: 3px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-info { background: var(--info-light); color: var(--info); border-left: 3px solid var(--info); } .alert-success { background: var(--success-light); color: var(--success); border-left: 3px solid var(--success); } </style> </head> <body> <!-- ══ TOPBAR ══ --> <div class="topbar"> <div class="topbar-brand"> <div class="dot"></div> DMCTurk Admin <span style="color:rgba(255,255,255,0.3); font-weight:300;">/ Menu Manager</span> </div> <div class="topbar-meta"> <span class="badge-live">LIVE</span> <span>dmcturk.com</span> <a href="https://www.dmcturk.com" target="_blank" style="color:var(--gold); text-decoration:none; font-size:12px;">↗ View Site</a> </div> </div> <div class="layout"> <!-- ══ SIDEBAR ══ --> <aside class="sidebar"> <div class="sidebar-label">Navigation</div> <div class="sidebar-section"> <div class="sidebar-item active" id="nav-menu" onclick="showSection('menu')"> <span class="sidebar-icon">☰</span> Menu Manager </div> <div class="sidebar-item" id="nav-pages" onclick="showSection('pages')"> <span class="sidebar-icon">📄</span> Pages </div> <div class="sidebar-item" id="nav-dropdowns" onclick="showSection('dropdowns')"> <span class="sidebar-icon">🗂️</span> Dropdown Groups </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Site Structure</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">🏠</span> Home </div> <div class="sidebar-item"> <span class="sidebar-icon">🗺️</span> Package Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🏙️</span> City Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🚐</span> Transfers </div> <div class="sidebar-item"> <span class="sidebar-icon">📋</span> Terms & Conditions </div> <div class="sidebar-item"> <span class="sidebar-icon">✉️</span> Contact </div> <div class="sidebar-item"> <span class="sidebar-icon">📝</span> Blog </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Settings</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">⚙️</span> Nav Settings </div> <div class="sidebar-item"> <span class="sidebar-icon">🌐</span> Languages </div> </div> </aside> <!-- ══ MAIN ══ --> <main class="main"> <!-- ══ MENU MANAGER SECTION ══ --> <div id="section-menu"> <div class="page-header"> <div> <div class="page-title">Menu Manager</div> <div class="page-sub">Manage navigation items, order, dropdowns and visibility for dmcturk.com</div> </div> <div style="display:flex; gap:8px;"> <button class="btn btn-secondary" onclick="exportMenu()">⬇ Export JSON</button> <button class="btn btn-primary" onclick="openAddModal()">+ Add Menu Item</button> </div> </div> <!-- Stats --> <div class="stats-row"> <div class="stat-card"> <div class="stat-label">Total Items</div> <div class="stat-value" id="stat-total">14</div> </div> <div class="stat-card"> <div class="stat-label">Top Level</div> <div class="stat-value" id="stat-top">7</div> </div> <div class="stat-card"> <div class="stat-label">Dropdowns</div> <div class="stat-value" id="stat-dropdowns">2</div> </div> <div class="stat-card"> <div class="stat-label">Hidden</div> <div class="stat-value" id="stat-hidden">0</div> </div> </div> <!-- Alert --> <div class="alert alert-info" id="save-alert" style="display:none;"> ✓ Changes saved successfully! Remember to publish to make changes live. </div> <!-- Live Preview --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Live Preview</div> <div class="card-sub">This is how the navigation looks on the site</div> </div> <button class="btn btn-secondary btn-sm" onclick="refreshPreview()">↻ Refresh</button> </div> <div class="card-body" style="padding: 16px;"> <div class="nav-preview" id="nav-preview"> <div class="preview-logo">DMC<span>Turk</span></div> </div> </div> </div> <!-- Menu Tree --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Navigation Structure</div> <div class="card-sub">Drag to reorder · Toggle visibility · Edit or delete items</div> </div> <div style="display:flex; gap:6px;"> <button class="btn btn-secondary btn-sm" onclick="expandAll()">Expand All</button> <button class="btn btn-secondary btn-sm" onclick="collapseAll()">Collapse All</button> </div> </div> <div class="card-body"> <div class="menu-tree" id="menu-tree"></div> </div> </div> <!-- Save Button --> <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 8px;"> <button class="btn btn-secondary" onclick="resetMenu()">↩ Reset Changes</button> <button class="btn btn-primary" onclick="saveMenu()">💾 Save Changes</button> </div> </div><!-- /section-menu --> <!-- ══ PAGES SECTION ══ --> <div id="section-pages" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Pages</div> <div class="page-sub">All pages on dmcturk.com — edit title and URL</div> </div> <button class="btn btn-primary" onclick="openAddPageModal()">+ Add Page</button> </div> <div class="card"> <div class="card-header"> <div class="card-title">All Pages</div> <div class="card-sub">Click Edit to update page title or URL</div> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> <thead> <tr style="background:var(--bg); border-bottom:1px solid var(--line);"> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Page Title</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">URL</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Category</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Status</th> <th style="padding:10px 16px;"></th> </tr> </thead> <tbody id="pages-tbody"></tbody> </table> </div> </div> </div><!-- /section-pages --> <!-- ══ DROPDOWNS SECTION ══ --> <div id="section-dropdowns" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Dropdown Groups</div> <div class="page-sub">Manage dropdown parent menus and their sub-items</div> </div> </div> <div id="dropdowns-content"></div> </div><!-- /section-dropdowns --> </main> </div> <!-- ══ PAGE EDIT MODAL ══ --> <div class="modal-overlay" id="page-modal" onclick="closePageModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="page-modal-title">Edit Page</div> <button class="modal-close" onclick="closePageModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Page Title *</label> <input class="form-input" id="pf-title" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="pf-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Category</label> <select class="form-select" id="pf-category"> <option value="Main">Main</option> <option value="Package Tours">Package Tours</option> <option value="City Tours">City Tours</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label class="form-label">Status</label> <select class="form-select" id="pf-status"> <option value="Published">Published</option> <option value="Draft">Draft</option> <option value="Hidden">Hidden</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closePageModal()">Cancel</button> <button class="btn btn-primary" onclick="savePageItem()">Save Page</button> </div> </div> </div> <!-- ══ ADD/EDIT MODAL ══ --> <div class="modal-overlay" id="modal" onclick="closeModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="modal-title">Add Menu Item</div> <button class="modal-close" onclick="closeModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Label *</label> <input class="form-input" id="f-label" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="f-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Type</label> <select class="form-select" id="f-type" onchange="onTypeChange()"> <option value="page">Page Link</option> <option value="parent">Parent (with dropdown)</option> <option value="child">Child (sub-item)</option> <option value="cta">CTA Button</option> </select> </div> <div class="form-group" id="parent-group" style="display:none;"> <label class="form-label">Parent Item</label> <select class="form-select" id="f-parent"></select> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Open in</label> <select class="form-select" id="f-target"> <option value="_self">Same tab</option> <option value="_blank">New tab</option> </select> </div> <div class="form-group"> <label class="form-label">Visible</label> <select class="form-select" id="f-visible"> <option value="1">Yes – Show in menu</option> <option value="0">No – Hide from menu</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal()">Cancel</button> <button class="btn btn-primary" onclick="saveItem()">Save Item</button> </div> </div> </div> <script> // ── DATA ── let menuData = [ { id: 1, label: 'Home', url: 'https://www.dmcturk.com', type: 'page', target: '_self', visible: true, parent: null }, { id: 2, label: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', type: 'parent', target: '_self', visible: true, parent: null }, { id: 3, label: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 4, label: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 5, label: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 6, label: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 7, label: '7 Churches', url: 'https://www.dmcturk.com/7churches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 8, label: 'City Tours', url: 'https://www.dmcturk.com/services-5', type: 'parent', target: '_self', visible: true, parent: null }, { id: 9, label: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 10, label: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 11, label: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 12, label: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 13, label: 'Transfers', url: 'https://www.dmcturk.com/kopy%C4%B1s%C4%B1-general-conditions', type: 'page', target: '_self', visible: true, parent: null }, { id: 14, label: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', type: 'page', target: '_self', visible: true, parent: null }, { id: 15, label: 'Blog', url: 'https://www.dmcturk.com/blog', type: 'page', target: '_self', visible: true, parent: null }, { id: 16, label: 'Contact', url: 'https://www.dmcturk.com/contact', type: 'cta', target: '_self', visible: true, parent: null }, ]; let editingId = null; let nextId = 17; let expandedParents = new Set([2, 8]); // ── RENDER TREE ── function renderTree() { const tree = document.getElementById('menu-tree'); tree.innerHTML = ''; const parents = menuData.filter(i => !i.parent); parents.forEach(item => { const children = menuData.filter(c => c.parent === item.id); const isParent = item.type === 'parent'; const isExpanded = expandedParents.has(item.id); const div = document.createElement('div'); div.className = 'menu-item' + (isParent ? ' is-parent' : ''); div.dataset.id = item.id; const typeLabel = item.type === 'parent' ? 'Dropdown' : item.type === 'cta' ? 'CTA' : 'Page'; const typeClass = item.type === 'parent' ? 'type-parent' : item.type === 'cta' ? 'type-parent' : 'type-page'; div.innerHTML = ` <div class="menu-row"> <div class="drag-handle" title="Drag to reorder">⋮⋮</div> <div class="menu-info"> <div class="menu-name">${item.label} ${isParent && children.length ? `<small style="color:var(--muted);font-weight:300;">(${children.length} items)</small>` : ''}</div> <div class="menu-url">${item.url}</div> </div> <span class="menu-type ${typeClass}">${typeLabel}</span> <div class="menu-status ${item.visible ? '' : 'off'}" title="${item.visible ? 'Visible' : 'Hidden'}" onclick="toggleVisible(${item.id})"></div> <div class="menu-actions"> ${isParent ? `<button class="btn btn-secondary btn-xs" onclick="toggleExpand(${item.id})">${isExpanded ? '▲' : '▼'}</button>` : ''} <button class="btn btn-secondary btn-xs" onclick="openEditModal(${item.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${item.id})">✕</button> </div> </div> ${isParent && isExpanded ? renderChildren(item.id) : ''} `; tree.appendChild(div); }); renderPreview(); updateStats(); } function renderChildren(parentId) { const children = menuData.filter(c => c.parent === parentId); if (!children.length) return `<div class="children-block" style="color:var(--muted);font-size:13px;">No sub-items. <span style="cursor:pointer;color:var(--gold);" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div>`; const rows = children.map(c => ` <div class="child-row" data-id="${c.id}"> <div class="drag-handle" style="font-size:12px;">⋮⋮</div> <div class="menu-info"> <div class="menu-name" style="font-size:13px;">${c.label}</div> <div class="menu-url" style="font-size:11px;">${c.url}</div> </div> <div class="menu-status ${c.visible ? '' : 'off'}" style="width:30px;height:16px;" onclick="toggleVisible(${c.id})"></div> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${c.id})">✕</button> </div> `).join(''); return `<div class="children-block">${rows}<div style="margin-top:8px;"><span style="cursor:pointer;color:var(--gold);font-size:12px;" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div></div>`; } // ── PREVIEW ── function renderPreview() { const preview = document.getElementById('nav-preview'); const visible = menuData.filter(i => i.visible && !i.parent); let html = '<div class="preview-logo">DMC<span>Turk</span></div>'; visible.forEach(item => { const hasDrop = item.type === 'parent' && menuData.some(c => c.parent === item.id && c.visible); const cls = item.type === 'cta' ? 'preview-link preview-cta' : hasDrop ? 'preview-link has-dropdown' : 'preview-link'; html += `<span class="${cls}">${item.label}</span>`; }); preview.innerHTML = html; } // ── STATS ── function updateStats() { const tops = menuData.filter(i => !i.parent); const drops = menuData.filter(i => i.type === 'parent'); const hidden = menuData.filter(i => !i.visible); document.getElementById('stat-total').textContent = menuData.length; document.getElementById('stat-top').textContent = tops.length; document.getElementById('stat-dropdowns').textContent = drops.length; document.getElementById('stat-hidden').textContent = hidden.length; } // ── TOGGLE ── function toggleVisible(id) { const item = menuData.find(i => i.id === id); if (item) item.visible = !item.visible; renderTree(); } function toggleExpand(id) { if (expandedParents.has(id)) expandedParents.delete(id); else expandedParents.add(id); renderTree(); } function expandAll() { menuData.filter(i => i.type === 'parent').forEach(i => expandedParents.add(i.id)); renderTree(); } function collapseAll() { expandedParents.clear(); renderTree(); } // ── MODAL ── function openAddModal() { editingId = null; document.getElementById('modal-title').textContent = 'Add Menu Item'; document.getElementById('f-label').value = ''; document.getElementById('f-url').value = 'https://www.dmcturk.com/'; document.getElementById('f-type').value = 'page'; document.getElementById('f-target').value = '_self'; document.getElementById('f-visible').value = '1'; populateParentSelect(); onTypeChange(); document.getElementById('modal').classList.add('open'); } function openAddChildModal(parentId) { openAddModal(); document.getElementById('f-type').value = 'child'; document.getElementById('f-parent').value = parentId; onTypeChange(); } function openEditModal(id) { const item = menuData.find(i => i.id === id); if (!item) return; editingId = id; document.getElementById('modal-title').textContent = 'Edit Menu Item'; document.getElementById('f-label').value = item.label; document.getElementById('f-url').value = item.url; document.getElementById('f-type').value = item.type; document.getElementById('f-target').value = item.target; document.getElementById('f-visible').value = item.visible ? '1' : '0'; populateParentSelect(); document.getElementById('f-parent').value = item.parent || ''; onTypeChange(); document.getElementById('modal').classList.add('open'); } function closeModal() { document.getElementById('modal').classList.remove('open'); } function closeModalOutside(e) { if (e.target === document.getElementById('modal')) closeModal(); } function populateParentSelect() { const sel = document.getElementById('f-parent'); const parents = menuData.filter(i => i.type === 'parent'); sel.innerHTML = parents.map(p => `<option value="${p.id}">${p.label}</option>`).join(''); } function onTypeChange() { const t = document.getElementById('f-type').value; document.getElementById('parent-group').style.display = t === 'child' ? 'block' : 'none'; } function saveItem() { const label = document.getElementById('f-label').value.trim(); const url = document.getElementById('f-url').value.trim(); if (!label || !url) { alert('Label and URL are required.'); return; } const type = document.getElementById('f-type').value; const target = document.getElementById('f-target').value; const visible = document.getElementById('f-visible').value === '1'; const parentVal = document.getElementById('f-parent').value; const parent = type === 'child' && parentVal ? parseInt(parentVal) : null; if (editingId) { const item = menuData.find(i => i.id === editingId); Object.assign(item, { label, url, type, target, visible, parent }); } else { menuData.push({ id: nextId++, label, url, type, target, visible, parent }); } if (parent && type === 'parent') expandedParents.add(parseInt(parentVal)); closeModal(); renderTree(); } // ── DELETE ── function deleteItem(id) { const item = menuData.find(i => i.id === id); if (!item) return; const children = menuData.filter(c => c.parent === id); const msg = children.length ? `Delete "${item.label}" and its ${children.length} sub-item(s)?` : `Delete "${item.label}"?`; if (!confirm(msg)) return; menuData = menuData.filter(i => i.id !== id && i.parent !== id); renderTree(); } // ── SAVE / RESET ── function saveMenu() { const alert = document.getElementById('save-alert'); alert.style.display = 'flex'; alert.className = 'alert alert-success'; alert.textContent = '✓ Changes saved successfully! Remember to publish to make changes live.'; setTimeout(() => alert.style.display = 'none', 3500); } function resetMenu() { if (confirm('Reset all changes?')) location.reload(); } // ── EXPORT ── function exportMenu() { const json = JSON.stringify(menuData, null, 2); const blob = new Blob([json], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'dmcturk-menu.json'; a.click(); } function refreshPreview() { renderPreview(); } // ── SECTION SWITCHING ── function showSection(name) { ['menu','pages','dropdowns'].forEach(s => { document.getElementById('section-' + s).style.display = s === name ? 'block' : 'none'; const nav = document.getElementById('nav-' + s); if (nav) nav.classList.toggle('active', s === name); }); if (name === 'pages') renderPages(); if (name === 'dropdowns') renderDropdowns(); } // ── PAGES DATA ── let pagesData = [ { id: 1, title: 'Home', url: 'https://www.dmcturk.com', category: 'Main', status: 'Published' }, { id: 2, title: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', category: 'Main', status: 'Published' }, { id: 3, title: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', category: 'Package Tours', status: 'Published' }, { id: 4, title: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', category: 'Package Tours', status: 'Published' }, { id: 5, title: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', category: 'Package Tours', status: 'Published' }, { id: 6, title: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', category: 'Package Tours', status: 'Published' }, { id: 7, title: '7 Churches', url: 'https://www.dmcturk.com/7churches', category: 'Package Tours', status: 'Published' }, { id: 8, title: 'City Tours', url: 'https://www.dmcturk.com/services-5', category: 'Main', status: 'Published' }, { id: 9, title: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', category: 'City Tours', status: 'Published' }, { id: 10, title: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', category: 'City Tours', status: 'Published' }, { id: 11, title: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', category: 'City Tours', status: 'Published' }, { id: 12, title: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', category: 'City Tours', status: 'Published' }, { id: 13, title: 'Transfers', url: 'https://www.dmcturk.com/kopyası-general-conditions', category: 'Main', status: 'Published' }, { id: 14, title: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', category: 'Main', status: 'Published' }, { id: 15, title: 'Contact', url: 'https://www.dmcturk.com/contact', category: 'Main', status: 'Published' }, { id: 16, title: 'Blog', url: 'https://www.dmcturk.com/blog', category: 'Main', status: 'Published' }, ]; let nextPageId = 17; let editingPageId = null; function renderPages() { const tbody = document.getElementById('pages-tbody'); tbody.innerHTML = pagesData.map(p => { const statusColor = p.status === 'Published' ? 'var(--success)' : p.status === 'Draft' ? 'var(--gold)' : 'var(--muted)'; return `<tr style="border-bottom:1px solid var(--line);"> <td style="padding:12px 16px; font-weight:500; color:var(--dark);">${p.title}</td> <td style="padding:12px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> <a href="${p.url}" target="_blank" style="color:var(--muted); text-decoration:none;" title="${p.url}">${p.url}</a> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; background:var(--gold-light); color:var(--gold); padding:2px 8px; border-radius:2px; font-weight:500;">${p.category}</span> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; font-weight:500; color:${statusColor};">● ${p.status}</span> </td> <td style="padding:12px 16px; text-align:right;"> <div style="display:flex; gap:6px; justify-content:flex-end;"> <a href="${p.url}" target="_blank" class="btn btn-secondary btn-xs">↗ View</a> <button class="btn btn-secondary btn-xs" onclick="openEditPageModal(${p.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deletePage(${p.id})">✕</button> </div> </td> </tr>`; }).join(''); } function openAddPageModal() { editingPageId = null; document.getElementById('page-modal-title').textContent = 'Add Page'; document.getElementById('pf-title').value = ''; document.getElementById('pf-url').value = 'https://www.dmcturk.com/'; document.getElementById('pf-category').value = 'Main'; document.getElementById('pf-status').value = 'Published'; document.getElementById('page-modal').classList.add('open'); } function openEditPageModal(id) { const page = pagesData.find(p => p.id === id); if (!page) return; editingPageId = id; document.getElementById('page-modal-title').textContent = 'Edit Page'; document.getElementById('pf-title').value = page.title; document.getElementById('pf-url').value = page.url; document.getElementById('pf-category').value = page.category; document.getElementById('pf-status').value = page.status; document.getElementById('page-modal').classList.add('open'); } function closePageModal() { document.getElementById('page-modal').classList.remove('open'); } function closePageModalOutside(e) { if (e.target === document.getElementById('page-modal')) closePageModal(); } function savePageItem() { const title = document.getElementById('pf-title').value.trim(); const url = document.getElementById('pf-url').value.trim(); if (!title || !url) { alert('Title and URL are required.'); return; } const category = document.getElementById('pf-category').value; const status = document.getElementById('pf-status').value; if (editingPageId) { const page = pagesData.find(p => p.id === editingPageId); Object.assign(page, { title, url, category, status }); } else { pagesData.push({ id: nextPageId++, title, url, category, status }); } closePageModal(); renderPages(); } function deletePage(id) { const page = pagesData.find(p => p.id === id); if (!page) return; if (!confirm(`Delete page "${page.title}"?`)) return; pagesData = pagesData.filter(p => p.id !== id); renderPages(); } // ── DROPDOWNS ── function renderDropdowns() { const container = document.getElementById('dropdowns-content'); const parents = menuData.filter(i => i.type === 'parent'); container.innerHTML = parents.map(p => { const children = menuData.filter(c => c.parent === p.id); return `<div class="card" style="margin-bottom:16px;"> <div class="card-header"> <div> <div class="card-title">${p.label}</div> <div class="card-sub">${p.url} · ${children.length} sub-item(s)</div> </div> <button class="btn btn-secondary btn-sm" onclick="showSection('menu'); expandedParents.add(${p.id}); renderTree();">Edit in Menu Manager</button> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> ${children.map((c,i) => ` <tr style="border-bottom: ${i < children.length-1 ? '1px solid var(--line)' : 'none'};"> <td style="padding:10px 16px; font-weight:500;">${c.label}</td> <td style="padding:10px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted);">${c.url}</td> <td style="padding:10px 16px; text-align:right;"> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id}); showSection('menu');">Edit</button> </td> </tr>`).join('')} </table> </div> </div>`; }).join(''); } // ── INIT ── renderTree(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DMCTurk – Menu Admin Panel</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #B5914E; --gold-light: #FDF6EC; --gold-border: #E8D5B0; --dark: #1A1A1A; --mid: #444; --muted: #888; --line: #E8E0D4; --white: #fff; --bg: #F7F6F3; --danger: #C0392B; --danger-light: #FDEDEC; --success: #27AE60; --success-light: #EAFAF1; --info: #2980B9; --info-light: #EBF5FB; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; min-height: 100vh; } /* ── TOPBAR ── */ .topbar { background: var(--dark); color: var(--white); padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .topbar-brand .dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } .topbar-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.5); } .badge-live { background: var(--success); color: white; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 2px; letter-spacing: 0.05em; } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 56px); } /* ── SIDEBAR ── */ .sidebar { background: var(--white); border-right: 1px solid var(--line); padding: 24px 0; } .sidebar-section { padding: 0 20px; margin-bottom: 8px; } .sidebar-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 12px 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--mid); transition: all 0.15s; text-decoration: none; } .sidebar-item:hover { background: var(--bg); color: var(--dark); } .sidebar-item.active { background: var(--gold-light); color: var(--gold); font-weight: 500; } .sidebar-icon { font-size: 15px; width: 20px; text-align: center; } .sidebar-divider { height: 1px; background: var(--line); margin: 12px 20px; } /* ── MAIN ── */ .main { padding: 32px; overflow-y: auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .page-title { font-size: 20px; font-weight: 500; color: var(--dark); margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--muted); font-weight: 300; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; border-radius: 3px; transition: all 0.15s; text-decoration: none; } .btn-primary { background: var(--gold); color: white; } .btn-primary:hover { background: #9a7a3e; } .btn-secondary { background: var(--white); color: var(--mid); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #f5b7b1; } .btn-danger:hover { background: var(--danger); color: white; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-xs { padding: 3px 8px; font-size: 11px; } /* ── CARDS ── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 14px; font-weight: 500; color: var(--dark); } .card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .card-body { padding: 20px; } /* ── MENU TREE ── */ .menu-tree { display: flex; flex-direction: column; gap: 6px; } .menu-item { background: var(--white); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .menu-item.is-parent { border-left: 3px solid var(--gold); } .menu-item.is-child { border-left: 3px solid var(--gold-border); margin-left: 32px; } .menu-row { display: grid; grid-template-columns: 28px 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 10px 14px; } .drag-handle { color: var(--muted); cursor: grab; font-size: 14px; text-align: center; user-select: none; } .menu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .menu-name { font-size: 13px; font-weight: 500; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-url { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-type { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.05em; white-space: nowrap; } .type-parent { background: var(--gold-light); color: var(--gold); } .type-child { background: #f0f4ff; color: #3a5bd9; } .type-page { background: var(--info-light); color: var(--info); } .menu-status { width: 36px; height: 20px; background: var(--success); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .menu-status.off { background: var(--line); } .menu-status::after { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 3px; right: 3px; transition: right 0.2s; } .menu-status.off::after { right: auto; left: 3px; } .menu-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── CHILDREN BLOCK ── */ .children-block { background: #fafaf8; border-top: 1px solid var(--line); padding: 10px 14px 10px 44px; display: flex; flex-direction: column; gap: 6px; } .child-row { display: grid; grid-template-columns: 20px 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; } /* ── FORM ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--mid); margin-bottom: 6px; letter-spacing: 0.03em; } .form-input, .form-select { width: 100%; padding: 9px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--dark); transition: border-color 0.15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--gold); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: 4px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 15px; font-weight: 500; } .modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--dark); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; } /* ── PREVIEW ── */ .nav-preview { background: var(--dark); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 28px; border-radius: 3px; overflow-x: auto; margin-bottom: 20px; } .preview-logo { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; margin-right: 8px; } .preview-logo span { color: var(--gold); } .preview-link { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; cursor: default; } .preview-link.has-dropdown::after { content: ' ▾'; font-size: 10px; } .preview-cta { background: var(--gold); color: white !important; padding: 6px 14px; border-radius: 2px; font-weight: 500; } /* ── STATS ── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; } .stat-label { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; } .stat-value { font-size: 24px; font-weight: 500; color: var(--dark); } /* ── ALERT ── */ .alert { padding: 12px 16px; border-radius: 3px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-info { background: var(--info-light); color: var(--info); border-left: 3px solid var(--info); } .alert-success { background: var(--success-light); color: var(--success); border-left: 3px solid var(--success); } </style> </head> <body> <!-- ══ TOPBAR ══ --> <div class="topbar"> <div class="topbar-brand"> <div class="dot"></div> DMCTurk Admin <span style="color:rgba(255,255,255,0.3); font-weight:300;">/ Menu Manager</span> </div> <div class="topbar-meta"> <span class="badge-live">LIVE</span> <span>dmcturk.com</span> <a href="https://www.dmcturk.com" target="_blank" style="color:var(--gold); text-decoration:none; font-size:12px;">↗ View Site</a> </div> </div> <div class="layout"> <!-- ══ SIDEBAR ══ --> <aside class="sidebar"> <div class="sidebar-label">Navigation</div> <div class="sidebar-section"> <div class="sidebar-item active" id="nav-menu" onclick="showSection('menu')"> <span class="sidebar-icon">☰</span> Menu Manager </div> <div class="sidebar-item" id="nav-pages" onclick="showSection('pages')"> <span class="sidebar-icon">📄</span> Pages </div> <div class="sidebar-item" id="nav-dropdowns" onclick="showSection('dropdowns')"> <span class="sidebar-icon">🗂️</span> Dropdown Groups </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Site Structure</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">🏠</span> Home </div> <div class="sidebar-item"> <span class="sidebar-icon">🗺️</span> Package Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🏙️</span> City Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🚐</span> Transfers </div> <div class="sidebar-item"> <span class="sidebar-icon">📋</span> Terms & Conditions </div> <div class="sidebar-item"> <span class="sidebar-icon">✉️</span> Contact </div> <div class="sidebar-item"> <span class="sidebar-icon">📝</span> Blog </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Settings</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">⚙️</span> Nav Settings </div> <div class="sidebar-item"> <span class="sidebar-icon">🌐</span> Languages </div> </div> </aside> <!-- ══ MAIN ══ --> <main class="main"> <!-- ══ MENU MANAGER SECTION ══ --> <div id="section-menu"> <div class="page-header"> <div> <div class="page-title">Menu Manager</div> <div class="page-sub">Manage navigation items, order, dropdowns and visibility for dmcturk.com</div> </div> <div style="display:flex; gap:8px;"> <button class="btn btn-secondary" onclick="exportMenu()">⬇ Export JSON</button> <button class="btn btn-primary" onclick="openAddModal()">+ Add Menu Item</button> </div> </div> <!-- Stats --> <div class="stats-row"> <div class="stat-card"> <div class="stat-label">Total Items</div> <div class="stat-value" id="stat-total">14</div> </div> <div class="stat-card"> <div class="stat-label">Top Level</div> <div class="stat-value" id="stat-top">7</div> </div> <div class="stat-card"> <div class="stat-label">Dropdowns</div> <div class="stat-value" id="stat-dropdowns">2</div> </div> <div class="stat-card"> <div class="stat-label">Hidden</div> <div class="stat-value" id="stat-hidden">0</div> </div> </div> <!-- Alert --> <div class="alert alert-info" id="save-alert" style="display:none;"> ✓ Changes saved successfully! Remember to publish to make changes live. </div> <!-- Live Preview --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Live Preview</div> <div class="card-sub">This is how the navigation looks on the site</div> </div> <button class="btn btn-secondary btn-sm" onclick="refreshPreview()">↻ Refresh</button> </div> <div class="card-body" style="padding: 16px;"> <div class="nav-preview" id="nav-preview"> <div class="preview-logo">DMC<span>Turk</span></div> </div> </div> </div> <!-- Menu Tree --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Navigation Structure</div> <div class="card-sub">Drag to reorder · Toggle visibility · Edit or delete items</div> </div> <div style="display:flex; gap:6px;"> <button class="btn btn-secondary btn-sm" onclick="expandAll()">Expand All</button> <button class="btn btn-secondary btn-sm" onclick="collapseAll()">Collapse All</button> </div> </div> <div class="card-body"> <div class="menu-tree" id="menu-tree"></div> </div> </div> <!-- Save Button --> <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 8px;"> <button class="btn btn-secondary" onclick="resetMenu()">↩ Reset Changes</button> <button class="btn btn-primary" onclick="saveMenu()">💾 Save Changes</button> </div> </div><!-- /section-menu --> <!-- ══ PAGES SECTION ══ --> <div id="section-pages" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Pages</div> <div class="page-sub">All pages on dmcturk.com — edit title and URL</div> </div> <button class="btn btn-primary" onclick="openAddPageModal()">+ Add Page</button> </div> <div class="card"> <div class="card-header"> <div class="card-title">All Pages</div> <div class="card-sub">Click Edit to update page title or URL</div> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> <thead> <tr style="background:var(--bg); border-bottom:1px solid var(--line);"> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Page Title</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">URL</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Category</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Status</th> <th style="padding:10px 16px;"></th> </tr> </thead> <tbody id="pages-tbody"></tbody> </table> </div> </div> </div><!-- /section-pages --> <!-- ══ DROPDOWNS SECTION ══ --> <div id="section-dropdowns" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Dropdown Groups</div> <div class="page-sub">Manage dropdown parent menus and their sub-items</div> </div> </div> <div id="dropdowns-content"></div> </div><!-- /section-dropdowns --> </main> </div> <!-- ══ PAGE EDIT MODAL ══ --> <div class="modal-overlay" id="page-modal" onclick="closePageModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="page-modal-title">Edit Page</div> <button class="modal-close" onclick="closePageModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Page Title *</label> <input class="form-input" id="pf-title" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="pf-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Category</label> <select class="form-select" id="pf-category"> <option value="Main">Main</option> <option value="Package Tours">Package Tours</option> <option value="City Tours">City Tours</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label class="form-label">Status</label> <select class="form-select" id="pf-status"> <option value="Published">Published</option> <option value="Draft">Draft</option> <option value="Hidden">Hidden</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closePageModal()">Cancel</button> <button class="btn btn-primary" onclick="savePageItem()">Save Page</button> </div> </div> </div> <!-- ══ ADD/EDIT MODAL ══ --> <div class="modal-overlay" id="modal" onclick="closeModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="modal-title">Add Menu Item</div> <button class="modal-close" onclick="closeModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Label *</label> <input class="form-input" id="f-label" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="f-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Type</label> <select class="form-select" id="f-type" onchange="onTypeChange()"> <option value="page">Page Link</option> <option value="parent">Parent (with dropdown)</option> <option value="child">Child (sub-item)</option> <option value="cta">CTA Button</option> </select> </div> <div class="form-group" id="parent-group" style="display:none;"> <label class="form-label">Parent Item</label> <select class="form-select" id="f-parent"></select> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Open in</label> <select class="form-select" id="f-target"> <option value="_self">Same tab</option> <option value="_blank">New tab</option> </select> </div> <div class="form-group"> <label class="form-label">Visible</label> <select class="form-select" id="f-visible"> <option value="1">Yes – Show in menu</option> <option value="0">No – Hide from menu</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal()">Cancel</button> <button class="btn btn-primary" onclick="saveItem()">Save Item</button> </div> </div> </div> <script> // ── DATA ── let menuData = [ { id: 1, label: 'Home', url: 'https://www.dmcturk.com', type: 'page', target: '_self', visible: true, parent: null }, { id: 2, label: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', type: 'parent', target: '_self', visible: true, parent: null }, { id: 3, label: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 4, label: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 5, label: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 6, label: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 7, label: '7 Churches', url: 'https://www.dmcturk.com/7churches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 8, label: 'City Tours', url: 'https://www.dmcturk.com/services-5', type: 'parent', target: '_self', visible: true, parent: null }, { id: 9, label: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 10, label: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 11, label: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 12, label: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 13, label: 'Transfers', url: 'https://www.dmcturk.com/kopy%C4%B1s%C4%B1-general-conditions', type: 'page', target: '_self', visible: true, parent: null }, { id: 14, label: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', type: 'page', target: '_self', visible: true, parent: null }, { id: 15, label: 'Blog', url: 'https://www.dmcturk.com/blog', type: 'page', target: '_self', visible: true, parent: null }, { id: 16, label: 'Contact', url: 'https://www.dmcturk.com/contact', type: 'cta', target: '_self', visible: true, parent: null }, ]; let editingId = null; let nextId = 17; let expandedParents = new Set([2, 8]); // ── RENDER TREE ── function renderTree() { const tree = document.getElementById('menu-tree'); tree.innerHTML = ''; const parents = menuData.filter(i => !i.parent); parents.forEach(item => { const children = menuData.filter(c => c.parent === item.id); const isParent = item.type === 'parent'; const isExpanded = expandedParents.has(item.id); const div = document.createElement('div'); div.className = 'menu-item' + (isParent ? ' is-parent' : ''); div.dataset.id = item.id; const typeLabel = item.type === 'parent' ? 'Dropdown' : item.type === 'cta' ? 'CTA' : 'Page'; const typeClass = item.type === 'parent' ? 'type-parent' : item.type === 'cta' ? 'type-parent' : 'type-page'; div.innerHTML = ` <div class="menu-row"> <div class="drag-handle" title="Drag to reorder">⋮⋮</div> <div class="menu-info"> <div class="menu-name">${item.label} ${isParent && children.length ? `<small style="color:var(--muted);font-weight:300;">(${children.length} items)</small>` : ''}</div> <div class="menu-url">${item.url}</div> </div> <span class="menu-type ${typeClass}">${typeLabel}</span> <div class="menu-status ${item.visible ? '' : 'off'}" title="${item.visible ? 'Visible' : 'Hidden'}" onclick="toggleVisible(${item.id})"></div> <div class="menu-actions"> ${isParent ? `<button class="btn btn-secondary btn-xs" onclick="toggleExpand(${item.id})">${isExpanded ? '▲' : '▼'}</button>` : ''} <button class="btn btn-secondary btn-xs" onclick="openEditModal(${item.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${item.id})">✕</button> </div> </div> ${isParent && isExpanded ? renderChildren(item.id) : ''} `; tree.appendChild(div); }); renderPreview(); updateStats(); } function renderChildren(parentId) { const children = menuData.filter(c => c.parent === parentId); if (!children.length) return `<div class="children-block" style="color:var(--muted);font-size:13px;">No sub-items. <span style="cursor:pointer;color:var(--gold);" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div>`; const rows = children.map(c => ` <div class="child-row" data-id="${c.id}"> <div class="drag-handle" style="font-size:12px;">⋮⋮</div> <div class="menu-info"> <div class="menu-name" style="font-size:13px;">${c.label}</div> <div class="menu-url" style="font-size:11px;">${c.url}</div> </div> <div class="menu-status ${c.visible ? '' : 'off'}" style="width:30px;height:16px;" onclick="toggleVisible(${c.id})"></div> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${c.id})">✕</button> </div> `).join(''); return `<div class="children-block">${rows}<div style="margin-top:8px;"><span style="cursor:pointer;color:var(--gold);font-size:12px;" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div></div>`; } // ── PREVIEW ── function renderPreview() { const preview = document.getElementById('nav-preview'); const visible = menuData.filter(i => i.visible && !i.parent); let html = '<div class="preview-logo">DMC<span>Turk</span></div>'; visible.forEach(item => { const hasDrop = item.type === 'parent' && menuData.some(c => c.parent === item.id && c.visible); const cls = item.type === 'cta' ? 'preview-link preview-cta' : hasDrop ? 'preview-link has-dropdown' : 'preview-link'; html += `<span class="${cls}">${item.label}</span>`; }); preview.innerHTML = html; } // ── STATS ── function updateStats() { const tops = menuData.filter(i => !i.parent); const drops = menuData.filter(i => i.type === 'parent'); const hidden = menuData.filter(i => !i.visible); document.getElementById('stat-total').textContent = menuData.length; document.getElementById('stat-top').textContent = tops.length; document.getElementById('stat-dropdowns').textContent = drops.length; document.getElementById('stat-hidden').textContent = hidden.length; } // ── TOGGLE ── function toggleVisible(id) { const item = menuData.find(i => i.id === id); if (item) item.visible = !item.visible; renderTree(); } function toggleExpand(id) { if (expandedParents.has(id)) expandedParents.delete(id); else expandedParents.add(id); renderTree(); } function expandAll() { menuData.filter(i => i.type === 'parent').forEach(i => expandedParents.add(i.id)); renderTree(); } function collapseAll() { expandedParents.clear(); renderTree(); } // ── MODAL ── function openAddModal() { editingId = null; document.getElementById('modal-title').textContent = 'Add Menu Item'; document.getElementById('f-label').value = ''; document.getElementById('f-url').value = 'https://www.dmcturk.com/'; document.getElementById('f-type').value = 'page'; document.getElementById('f-target').value = '_self'; document.getElementById('f-visible').value = '1'; populateParentSelect(); onTypeChange(); document.getElementById('modal').classList.add('open'); } function openAddChildModal(parentId) { openAddModal(); document.getElementById('f-type').value = 'child'; document.getElementById('f-parent').value = parentId; onTypeChange(); } function openEditModal(id) { const item = menuData.find(i => i.id === id); if (!item) return; editingId = id; document.getElementById('modal-title').textContent = 'Edit Menu Item'; document.getElementById('f-label').value = item.label; document.getElementById('f-url').value = item.url; document.getElementById('f-type').value = item.type; document.getElementById('f-target').value = item.target; document.getElementById('f-visible').value = item.visible ? '1' : '0'; populateParentSelect(); document.getElementById('f-parent').value = item.parent || ''; onTypeChange(); document.getElementById('modal').classList.add('open'); } function closeModal() { document.getElementById('modal').classList.remove('open'); } function closeModalOutside(e) { if (e.target === document.getElementById('modal')) closeModal(); } function populateParentSelect() { const sel = document.getElementById('f-parent'); const parents = menuData.filter(i => i.type === 'parent'); sel.innerHTML = parents.map(p => `<option value="${p.id}">${p.label}</option>`).join(''); } function onTypeChange() { const t = document.getElementById('f-type').value; document.getElementById('parent-group').style.display = t === 'child' ? 'block' : 'none'; } function saveItem() { const label = document.getElementById('f-label').value.trim(); const url = document.getElementById('f-url').value.trim(); if (!label || !url) { alert('Label and URL are required.'); return; } const type = document.getElementById('f-type').value; const target = document.getElementById('f-target').value; const visible = document.getElementById('f-visible').value === '1'; const parentVal = document.getElementById('f-parent').value; const parent = type === 'child' && parentVal ? parseInt(parentVal) : null; if (editingId) { const item = menuData.find(i => i.id === editingId); Object.assign(item, { label, url, type, target, visible, parent }); } else { menuData.push({ id: nextId++, label, url, type, target, visible, parent }); } if (parent && type === 'parent') expandedParents.add(parseInt(parentVal)); closeModal(); renderTree(); } // ── DELETE ── function deleteItem(id) { const item = menuData.find(i => i.id === id); if (!item) return; const children = menuData.filter(c => c.parent === id); const msg = children.length ? `Delete "${item.label}" and its ${children.length} sub-item(s)?` : `Delete "${item.label}"?`; if (!confirm(msg)) return; menuData = menuData.filter(i => i.id !== id && i.parent !== id); renderTree(); } // ── SAVE / RESET ── function saveMenu() { const alert = document.getElementById('save-alert'); alert.style.display = 'flex'; alert.className = 'alert alert-success'; alert.textContent = '✓ Changes saved successfully! Remember to publish to make changes live.'; setTimeout(() => alert.style.display = 'none', 3500); } function resetMenu() { if (confirm('Reset all changes?')) location.reload(); } // ── EXPORT ── function exportMenu() { const json = JSON.stringify(menuData, null, 2); const blob = new Blob([json], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'dmcturk-menu.json'; a.click(); } function refreshPreview() { renderPreview(); } // ── SECTION SWITCHING ── function showSection(name) { ['menu','pages','dropdowns'].forEach(s => { document.getElementById('section-' + s).style.display = s === name ? 'block' : 'none'; const nav = document.getElementById('nav-' + s); if (nav) nav.classList.toggle('active', s === name); }); if (name === 'pages') renderPages(); if (name === 'dropdowns') renderDropdowns(); } // ── PAGES DATA ── let pagesData = [ { id: 1, title: 'Home', url: 'https://www.dmcturk.com', category: 'Main', status: 'Published' }, { id: 2, title: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', category: 'Main', status: 'Published' }, { id: 3, title: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', category: 'Package Tours', status: 'Published' }, { id: 4, title: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', category: 'Package Tours', status: 'Published' }, { id: 5, title: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', category: 'Package Tours', status: 'Published' }, { id: 6, title: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', category: 'Package Tours', status: 'Published' }, { id: 7, title: '7 Churches', url: 'https://www.dmcturk.com/7churches', category: 'Package Tours', status: 'Published' }, { id: 8, title: 'City Tours', url: 'https://www.dmcturk.com/services-5', category: 'Main', status: 'Published' }, { id: 9, title: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', category: 'City Tours', status: 'Published' }, { id: 10, title: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', category: 'City Tours', status: 'Published' }, { id: 11, title: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', category: 'City Tours', status: 'Published' }, { id: 12, title: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', category: 'City Tours', status: 'Published' }, { id: 13, title: 'Transfers', url: 'https://www.dmcturk.com/kopyası-general-conditions', category: 'Main', status: 'Published' }, { id: 14, title: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', category: 'Main', status: 'Published' }, { id: 15, title: 'Contact', url: 'https://www.dmcturk.com/contact', category: 'Main', status: 'Published' }, { id: 16, title: 'Blog', url: 'https://www.dmcturk.com/blog', category: 'Main', status: 'Published' }, ]; let nextPageId = 17; let editingPageId = null; function renderPages() { const tbody = document.getElementById('pages-tbody'); tbody.innerHTML = pagesData.map(p => { const statusColor = p.status === 'Published' ? 'var(--success)' : p.status === 'Draft' ? 'var(--gold)' : 'var(--muted)'; return `<tr style="border-bottom:1px solid var(--line);"> <td style="padding:12px 16px; font-weight:500; color:var(--dark);">${p.title}</td> <td style="padding:12px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> <a href="${p.url}" target="_blank" style="color:var(--muted); text-decoration:none;" title="${p.url}">${p.url}</a> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; background:var(--gold-light); color:var(--gold); padding:2px 8px; border-radius:2px; font-weight:500;">${p.category}</span> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; font-weight:500; color:${statusColor};">● ${p.status}</span> </td> <td style="padding:12px 16px; text-align:right;"> <div style="display:flex; gap:6px; justify-content:flex-end;"> <a href="${p.url}" target="_blank" class="btn btn-secondary btn-xs">↗ View</a> <button class="btn btn-secondary btn-xs" onclick="openEditPageModal(${p.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deletePage(${p.id})">✕</button> </div> </td> </tr>`; }).join(''); } function openAddPageModal() { editingPageId = null; document.getElementById('page-modal-title').textContent = 'Add Page'; document.getElementById('pf-title').value = ''; document.getElementById('pf-url').value = 'https://www.dmcturk.com/'; document.getElementById('pf-category').value = 'Main'; document.getElementById('pf-status').value = 'Published'; document.getElementById('page-modal').classList.add('open'); } function openEditPageModal(id) { const page = pagesData.find(p => p.id === id); if (!page) return; editingPageId = id; document.getElementById('page-modal-title').textContent = 'Edit Page'; document.getElementById('pf-title').value = page.title; document.getElementById('pf-url').value = page.url; document.getElementById('pf-category').value = page.category; document.getElementById('pf-status').value = page.status; document.getElementById('page-modal').classList.add('open'); } function closePageModal() { document.getElementById('page-modal').classList.remove('open'); } function closePageModalOutside(e) { if (e.target === document.getElementById('page-modal')) closePageModal(); } function savePageItem() { const title = document.getElementById('pf-title').value.trim(); const url = document.getElementById('pf-url').value.trim(); if (!title || !url) { alert('Title and URL are required.'); return; } const category = document.getElementById('pf-category').value; const status = document.getElementById('pf-status').value; if (editingPageId) { const page = pagesData.find(p => p.id === editingPageId); Object.assign(page, { title, url, category, status }); } else { pagesData.push({ id: nextPageId++, title, url, category, status }); } closePageModal(); renderPages(); } function deletePage(id) { const page = pagesData.find(p => p.id === id); if (!page) return; if (!confirm(`Delete page "${page.title}"?`)) return; pagesData = pagesData.filter(p => p.id !== id); renderPages(); } // ── DROPDOWNS ── function renderDropdowns() { const container = document.getElementById('dropdowns-content'); const parents = menuData.filter(i => i.type === 'parent'); container.innerHTML = parents.map(p => { const children = menuData.filter(c => c.parent === p.id); return `<div class="card" style="margin-bottom:16px;"> <div class="card-header"> <div> <div class="card-title">${p.label}</div> <div class="card-sub">${p.url} · ${children.length} sub-item(s)</div> </div> <button class="btn btn-secondary btn-sm" onclick="showSection('menu'); expandedParents.add(${p.id}); renderTree();">Edit in Menu Manager</button> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> ${children.map((c,i) => ` <tr style="border-bottom: ${i < children.length-1 ? '1px solid var(--line)' : 'none'};"> <td style="padding:10px 16px; font-weight:500;">${c.label}</td> <td style="padding:10px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted);">${c.url}</td> <td style="padding:10px 16px; text-align:right;"> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id}); showSection('menu');">Edit</button> </td> </tr>`).join('')} </table> </div> </div>`; }).join(''); } // ── INIT ── renderTree(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DMCTurk – Menu Admin Panel</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #B5914E; --gold-light: #FDF6EC; --gold-border: #E8D5B0; --dark: #1A1A1A; --mid: #444; --muted: #888; --line: #E8E0D4; --white: #fff; --bg: #F7F6F3; --danger: #C0392B; --danger-light: #FDEDEC; --success: #27AE60; --success-light: #EAFAF1; --info: #2980B9; --info-light: #EBF5FB; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; min-height: 100vh; } /* ── TOPBAR ── */ .topbar { background: var(--dark); color: var(--white); padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .topbar-brand .dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } .topbar-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.5); } .badge-live { background: var(--success); color: white; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 2px; letter-spacing: 0.05em; } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 56px); } /* ── SIDEBAR ── */ .sidebar { background: var(--white); border-right: 1px solid var(--line); padding: 24px 0; } .sidebar-section { padding: 0 20px; margin-bottom: 8px; } .sidebar-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 12px 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--mid); transition: all 0.15s; text-decoration: none; } .sidebar-item:hover { background: var(--bg); color: var(--dark); } .sidebar-item.active { background: var(--gold-light); color: var(--gold); font-weight: 500; } .sidebar-icon { font-size: 15px; width: 20px; text-align: center; } .sidebar-divider { height: 1px; background: var(--line); margin: 12px 20px; } /* ── MAIN ── */ .main { padding: 32px; overflow-y: auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .page-title { font-size: 20px; font-weight: 500; color: var(--dark); margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--muted); font-weight: 300; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; border-radius: 3px; transition: all 0.15s; text-decoration: none; } .btn-primary { background: var(--gold); color: white; } .btn-primary:hover { background: #9a7a3e; } .btn-secondary { background: var(--white); color: var(--mid); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #f5b7b1; } .btn-danger:hover { background: var(--danger); color: white; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-xs { padding: 3px 8px; font-size: 11px; } /* ── CARDS ── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 14px; font-weight: 500; color: var(--dark); } .card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .card-body { padding: 20px; } /* ── MENU TREE ── */ .menu-tree { display: flex; flex-direction: column; gap: 6px; } .menu-item { background: var(--white); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .menu-item.is-parent { border-left: 3px solid var(--gold); } .menu-item.is-child { border-left: 3px solid var(--gold-border); margin-left: 32px; } .menu-row { display: grid; grid-template-columns: 28px 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 10px 14px; } .drag-handle { color: var(--muted); cursor: grab; font-size: 14px; text-align: center; user-select: none; } .menu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .menu-name { font-size: 13px; font-weight: 500; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-url { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-type { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.05em; white-space: nowrap; } .type-parent { background: var(--gold-light); color: var(--gold); } .type-child { background: #f0f4ff; color: #3a5bd9; } .type-page { background: var(--info-light); color: var(--info); } .menu-status { width: 36px; height: 20px; background: var(--success); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .menu-status.off { background: var(--line); } .menu-status::after { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 3px; right: 3px; transition: right 0.2s; } .menu-status.off::after { right: auto; left: 3px; } .menu-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── CHILDREN BLOCK ── */ .children-block { background: #fafaf8; border-top: 1px solid var(--line); padding: 10px 14px 10px 44px; display: flex; flex-direction: column; gap: 6px; } .child-row { display: grid; grid-template-columns: 20px 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; } /* ── FORM ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--mid); margin-bottom: 6px; letter-spacing: 0.03em; } .form-input, .form-select { width: 100%; padding: 9px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--dark); transition: border-color 0.15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--gold); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: 4px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 15px; font-weight: 500; } .modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--dark); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; } /* ── PREVIEW ── */ .nav-preview { background: var(--dark); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 28px; border-radius: 3px; overflow-x: auto; margin-bottom: 20px; } .preview-logo { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; margin-right: 8px; } .preview-logo span { color: var(--gold); } .preview-link { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; cursor: default; } .preview-link.has-dropdown::after { content: ' ▾'; font-size: 10px; } .preview-cta { background: var(--gold); color: white !important; padding: 6px 14px; border-radius: 2px; font-weight: 500; } /* ── STATS ── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; } .stat-label { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; } .stat-value { font-size: 24px; font-weight: 500; color: var(--dark); } /* ── ALERT ── */ .alert { padding: 12px 16px; border-radius: 3px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-info { background: var(--info-light); color: var(--info); border-left: 3px solid var(--info); } .alert-success { background: var(--success-light); color: var(--success); border-left: 3px solid var(--success); } </style> </head> <body> <!-- ══ TOPBAR ══ --> <div class="topbar"> <div class="topbar-brand"> <div class="dot"></div> DMCTurk Admin <span style="color:rgba(255,255,255,0.3); font-weight:300;">/ Menu Manager</span> </div> <div class="topbar-meta"> <span class="badge-live">LIVE</span> <span>dmcturk.com</span> <a href="https://www.dmcturk.com" target="_blank" style="color:var(--gold); text-decoration:none; font-size:12px;">↗ View Site</a> </div> </div> <div class="layout"> <!-- ══ SIDEBAR ══ --> <aside class="sidebar"> <div class="sidebar-label">Navigation</div> <div class="sidebar-section"> <div class="sidebar-item active" id="nav-menu" onclick="showSection('menu')"> <span class="sidebar-icon">☰</span> Menu Manager </div> <div class="sidebar-item" id="nav-pages" onclick="showSection('pages')"> <span class="sidebar-icon">📄</span> Pages </div> <div class="sidebar-item" id="nav-dropdowns" onclick="showSection('dropdowns')"> <span class="sidebar-icon">🗂️</span> Dropdown Groups </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Site Structure</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">🏠</span> Home </div> <div class="sidebar-item"> <span class="sidebar-icon">🗺️</span> Package Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🏙️</span> City Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🚐</span> Transfers </div> <div class="sidebar-item"> <span class="sidebar-icon">📋</span> Terms & Conditions </div> <div class="sidebar-item"> <span class="sidebar-icon">✉️</span> Contact </div> <div class="sidebar-item"> <span class="sidebar-icon">📝</span> Blog </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Settings</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">⚙️</span> Nav Settings </div> <div class="sidebar-item"> <span class="sidebar-icon">🌐</span> Languages </div> </div> </aside> <!-- ══ MAIN ══ --> <main class="main"> <!-- ══ MENU MANAGER SECTION ══ --> <div id="section-menu"> <div class="page-header"> <div> <div class="page-title">Menu Manager</div> <div class="page-sub">Manage navigation items, order, dropdowns and visibility for dmcturk.com</div> </div> <div style="display:flex; gap:8px;"> <button class="btn btn-secondary" onclick="exportMenu()">⬇ Export JSON</button> <button class="btn btn-primary" onclick="openAddModal()">+ Add Menu Item</button> </div> </div> <!-- Stats --> <div class="stats-row"> <div class="stat-card"> <div class="stat-label">Total Items</div> <div class="stat-value" id="stat-total">14</div> </div> <div class="stat-card"> <div class="stat-label">Top Level</div> <div class="stat-value" id="stat-top">7</div> </div> <div class="stat-card"> <div class="stat-label">Dropdowns</div> <div class="stat-value" id="stat-dropdowns">2</div> </div> <div class="stat-card"> <div class="stat-label">Hidden</div> <div class="stat-value" id="stat-hidden">0</div> </div> </div> <!-- Alert --> <div class="alert alert-info" id="save-alert" style="display:none;"> ✓ Changes saved successfully! Remember to publish to make changes live. </div> <!-- Live Preview --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Live Preview</div> <div class="card-sub">This is how the navigation looks on the site</div> </div> <button class="btn btn-secondary btn-sm" onclick="refreshPreview()">↻ Refresh</button> </div> <div class="card-body" style="padding: 16px;"> <div class="nav-preview" id="nav-preview"> <div class="preview-logo">DMC<span>Turk</span></div> </div> </div> </div> <!-- Menu Tree --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Navigation Structure</div> <div class="card-sub">Drag to reorder · Toggle visibility · Edit or delete items</div> </div> <div style="display:flex; gap:6px;"> <button class="btn btn-secondary btn-sm" onclick="expandAll()">Expand All</button> <button class="btn btn-secondary btn-sm" onclick="collapseAll()">Collapse All</button> </div> </div> <div class="card-body"> <div class="menu-tree" id="menu-tree"></div> </div> </div> <!-- Save Button --> <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 8px;"> <button class="btn btn-secondary" onclick="resetMenu()">↩ Reset Changes</button> <button class="btn btn-primary" onclick="saveMenu()">💾 Save Changes</button> </div> </div><!-- /section-menu --> <!-- ══ PAGES SECTION ══ --> <div id="section-pages" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Pages</div> <div class="page-sub">All pages on dmcturk.com — edit title and URL</div> </div> <button class="btn btn-primary" onclick="openAddPageModal()">+ Add Page</button> </div> <div class="card"> <div class="card-header"> <div class="card-title">All Pages</div> <div class="card-sub">Click Edit to update page title or URL</div> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> <thead> <tr style="background:var(--bg); border-bottom:1px solid var(--line);"> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Page Title</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">URL</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Category</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Status</th> <th style="padding:10px 16px;"></th> </tr> </thead> <tbody id="pages-tbody"></tbody> </table> </div> </div> </div><!-- /section-pages --> <!-- ══ DROPDOWNS SECTION ══ --> <div id="section-dropdowns" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Dropdown Groups</div> <div class="page-sub">Manage dropdown parent menus and their sub-items</div> </div> </div> <div id="dropdowns-content"></div> </div><!-- /section-dropdowns --> </main> </div> <!-- ══ PAGE EDIT MODAL ══ --> <div class="modal-overlay" id="page-modal" onclick="closePageModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="page-modal-title">Edit Page</div> <button class="modal-close" onclick="closePageModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Page Title *</label> <input class="form-input" id="pf-title" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="pf-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Category</label> <select class="form-select" id="pf-category"> <option value="Main">Main</option> <option value="Package Tours">Package Tours</option> <option value="City Tours">City Tours</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label class="form-label">Status</label> <select class="form-select" id="pf-status"> <option value="Published">Published</option> <option value="Draft">Draft</option> <option value="Hidden">Hidden</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closePageModal()">Cancel</button> <button class="btn btn-primary" onclick="savePageItem()">Save Page</button> </div> </div> </div> <!-- ══ ADD/EDIT MODAL ══ --> <div class="modal-overlay" id="modal" onclick="closeModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="modal-title">Add Menu Item</div> <button class="modal-close" onclick="closeModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Label *</label> <input class="form-input" id="f-label" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="f-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Type</label> <select class="form-select" id="f-type" onchange="onTypeChange()"> <option value="page">Page Link</option> <option value="parent">Parent (with dropdown)</option> <option value="child">Child (sub-item)</option> <option value="cta">CTA Button</option> </select> </div> <div class="form-group" id="parent-group" style="display:none;"> <label class="form-label">Parent Item</label> <select class="form-select" id="f-parent"></select> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Open in</label> <select class="form-select" id="f-target"> <option value="_self">Same tab</option> <option value="_blank">New tab</option> </select> </div> <div class="form-group"> <label class="form-label">Visible</label> <select class="form-select" id="f-visible"> <option value="1">Yes – Show in menu</option> <option value="0">No – Hide from menu</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal()">Cancel</button> <button class="btn btn-primary" onclick="saveItem()">Save Item</button> </div> </div> </div> <script> // ── DATA ── let menuData = [ { id: 1, label: 'Home', url: 'https://www.dmcturk.com', type: 'page', target: '_self', visible: true, parent: null }, { id: 2, label: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', type: 'parent', target: '_self', visible: true, parent: null }, { id: 3, label: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 4, label: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 5, label: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 6, label: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 7, label: '7 Churches', url: 'https://www.dmcturk.com/7churches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 8, label: 'City Tours', url: 'https://www.dmcturk.com/services-5', type: 'parent', target: '_self', visible: true, parent: null }, { id: 9, label: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 10, label: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 11, label: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 12, label: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 13, label: 'Transfers', url: 'https://www.dmcturk.com/kopy%C4%B1s%C4%B1-general-conditions', type: 'page', target: '_self', visible: true, parent: null }, { id: 14, label: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', type: 'page', target: '_self', visible: true, parent: null }, { id: 15, label: 'Blog', url: 'https://www.dmcturk.com/blog', type: 'page', target: '_self', visible: true, parent: null }, { id: 16, label: 'Contact', url: 'https://www.dmcturk.com/contact', type: 'cta', target: '_self', visible: true, parent: null }, ]; let editingId = null; let nextId = 17; let expandedParents = new Set([2, 8]); // ── RENDER TREE ── function renderTree() { const tree = document.getElementById('menu-tree'); tree.innerHTML = ''; const parents = menuData.filter(i => !i.parent); parents.forEach(item => { const children = menuData.filter(c => c.parent === item.id); const isParent = item.type === 'parent'; const isExpanded = expandedParents.has(item.id); const div = document.createElement('div'); div.className = 'menu-item' + (isParent ? ' is-parent' : ''); div.dataset.id = item.id; const typeLabel = item.type === 'parent' ? 'Dropdown' : item.type === 'cta' ? 'CTA' : 'Page'; const typeClass = item.type === 'parent' ? 'type-parent' : item.type === 'cta' ? 'type-parent' : 'type-page'; div.innerHTML = ` <div class="menu-row"> <div class="drag-handle" title="Drag to reorder">⋮⋮</div> <div class="menu-info"> <div class="menu-name">${item.label} ${isParent && children.length ? `<small style="color:var(--muted);font-weight:300;">(${children.length} items)</small>` : ''}</div> <div class="menu-url">${item.url}</div> </div> <span class="menu-type ${typeClass}">${typeLabel}</span> <div class="menu-status ${item.visible ? '' : 'off'}" title="${item.visible ? 'Visible' : 'Hidden'}" onclick="toggleVisible(${item.id})"></div> <div class="menu-actions"> ${isParent ? `<button class="btn btn-secondary btn-xs" onclick="toggleExpand(${item.id})">${isExpanded ? '▲' : '▼'}</button>` : ''} <button class="btn btn-secondary btn-xs" onclick="openEditModal(${item.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${item.id})">✕</button> </div> </div> ${isParent && isExpanded ? renderChildren(item.id) : ''} `; tree.appendChild(div); }); renderPreview(); updateStats(); } function renderChildren(parentId) { const children = menuData.filter(c => c.parent === parentId); if (!children.length) return `<div class="children-block" style="color:var(--muted);font-size:13px;">No sub-items. <span style="cursor:pointer;color:var(--gold);" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div>`; const rows = children.map(c => ` <div class="child-row" data-id="${c.id}"> <div class="drag-handle" style="font-size:12px;">⋮⋮</div> <div class="menu-info"> <div class="menu-name" style="font-size:13px;">${c.label}</div> <div class="menu-url" style="font-size:11px;">${c.url}</div> </div> <div class="menu-status ${c.visible ? '' : 'off'}" style="width:30px;height:16px;" onclick="toggleVisible(${c.id})"></div> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${c.id})">✕</button> </div> `).join(''); return `<div class="children-block">${rows}<div style="margin-top:8px;"><span style="cursor:pointer;color:var(--gold);font-size:12px;" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div></div>`; } // ── PREVIEW ── function renderPreview() { const preview = document.getElementById('nav-preview'); const visible = menuData.filter(i => i.visible && !i.parent); let html = '<div class="preview-logo">DMC<span>Turk</span></div>'; visible.forEach(item => { const hasDrop = item.type === 'parent' && menuData.some(c => c.parent === item.id && c.visible); const cls = item.type === 'cta' ? 'preview-link preview-cta' : hasDrop ? 'preview-link has-dropdown' : 'preview-link'; html += `<span class="${cls}">${item.label}</span>`; }); preview.innerHTML = html; } // ── STATS ── function updateStats() { const tops = menuData.filter(i => !i.parent); const drops = menuData.filter(i => i.type === 'parent'); const hidden = menuData.filter(i => !i.visible); document.getElementById('stat-total').textContent = menuData.length; document.getElementById('stat-top').textContent = tops.length; document.getElementById('stat-dropdowns').textContent = drops.length; document.getElementById('stat-hidden').textContent = hidden.length; } // ── TOGGLE ── function toggleVisible(id) { const item = menuData.find(i => i.id === id); if (item) item.visible = !item.visible; renderTree(); } function toggleExpand(id) { if (expandedParents.has(id)) expandedParents.delete(id); else expandedParents.add(id); renderTree(); } function expandAll() { menuData.filter(i => i.type === 'parent').forEach(i => expandedParents.add(i.id)); renderTree(); } function collapseAll() { expandedParents.clear(); renderTree(); } // ── MODAL ── function openAddModal() { editingId = null; document.getElementById('modal-title').textContent = 'Add Menu Item'; document.getElementById('f-label').value = ''; document.getElementById('f-url').value = 'https://www.dmcturk.com/'; document.getElementById('f-type').value = 'page'; document.getElementById('f-target').value = '_self'; document.getElementById('f-visible').value = '1'; populateParentSelect(); onTypeChange(); document.getElementById('modal').classList.add('open'); } function openAddChildModal(parentId) { openAddModal(); document.getElementById('f-type').value = 'child'; document.getElementById('f-parent').value = parentId; onTypeChange(); } function openEditModal(id) { const item = menuData.find(i => i.id === id); if (!item) return; editingId = id; document.getElementById('modal-title').textContent = 'Edit Menu Item'; document.getElementById('f-label').value = item.label; document.getElementById('f-url').value = item.url; document.getElementById('f-type').value = item.type; document.getElementById('f-target').value = item.target; document.getElementById('f-visible').value = item.visible ? '1' : '0'; populateParentSelect(); document.getElementById('f-parent').value = item.parent || ''; onTypeChange(); document.getElementById('modal').classList.add('open'); } function closeModal() { document.getElementById('modal').classList.remove('open'); } function closeModalOutside(e) { if (e.target === document.getElementById('modal')) closeModal(); } function populateParentSelect() { const sel = document.getElementById('f-parent'); const parents = menuData.filter(i => i.type === 'parent'); sel.innerHTML = parents.map(p => `<option value="${p.id}">${p.label}</option>`).join(''); } function onTypeChange() { const t = document.getElementById('f-type').value; document.getElementById('parent-group').style.display = t === 'child' ? 'block' : 'none'; } function saveItem() { const label = document.getElementById('f-label').value.trim(); const url = document.getElementById('f-url').value.trim(); if (!label || !url) { alert('Label and URL are required.'); return; } const type = document.getElementById('f-type').value; const target = document.getElementById('f-target').value; const visible = document.getElementById('f-visible').value === '1'; const parentVal = document.getElementById('f-parent').value; const parent = type === 'child' && parentVal ? parseInt(parentVal) : null; if (editingId) { const item = menuData.find(i => i.id === editingId); Object.assign(item, { label, url, type, target, visible, parent }); } else { menuData.push({ id: nextId++, label, url, type, target, visible, parent }); } if (parent && type === 'parent') expandedParents.add(parseInt(parentVal)); closeModal(); renderTree(); } // ── DELETE ── function deleteItem(id) { const item = menuData.find(i => i.id === id); if (!item) return; const children = menuData.filter(c => c.parent === id); const msg = children.length ? `Delete "${item.label}" and its ${children.length} sub-item(s)?` : `Delete "${item.label}"?`; if (!confirm(msg)) return; menuData = menuData.filter(i => i.id !== id && i.parent !== id); renderTree(); } // ── SAVE / RESET ── function saveMenu() { const alert = document.getElementById('save-alert'); alert.style.display = 'flex'; alert.className = 'alert alert-success'; alert.textContent = '✓ Changes saved successfully! Remember to publish to make changes live.'; setTimeout(() => alert.style.display = 'none', 3500); } function resetMenu() { if (confirm('Reset all changes?')) location.reload(); } // ── EXPORT ── function exportMenu() { const json = JSON.stringify(menuData, null, 2); const blob = new Blob([json], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'dmcturk-menu.json'; a.click(); } function refreshPreview() { renderPreview(); } // ── SECTION SWITCHING ── function showSection(name) { ['menu','pages','dropdowns'].forEach(s => { document.getElementById('section-' + s).style.display = s === name ? 'block' : 'none'; const nav = document.getElementById('nav-' + s); if (nav) nav.classList.toggle('active', s === name); }); if (name === 'pages') renderPages(); if (name === 'dropdowns') renderDropdowns(); } // ── PAGES DATA ── let pagesData = [ { id: 1, title: 'Home', url: 'https://www.dmcturk.com', category: 'Main', status: 'Published' }, { id: 2, title: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', category: 'Main', status: 'Published' }, { id: 3, title: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', category: 'Package Tours', status: 'Published' }, { id: 4, title: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', category: 'Package Tours', status: 'Published' }, { id: 5, title: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', category: 'Package Tours', status: 'Published' }, { id: 6, title: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', category: 'Package Tours', status: 'Published' }, { id: 7, title: '7 Churches', url: 'https://www.dmcturk.com/7churches', category: 'Package Tours', status: 'Published' }, { id: 8, title: 'City Tours', url: 'https://www.dmcturk.com/services-5', category: 'Main', status: 'Published' }, { id: 9, title: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', category: 'City Tours', status: 'Published' }, { id: 10, title: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', category: 'City Tours', status: 'Published' }, { id: 11, title: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', category: 'City Tours', status: 'Published' }, { id: 12, title: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', category: 'City Tours', status: 'Published' }, { id: 13, title: 'Transfers', url: 'https://www.dmcturk.com/kopyası-general-conditions', category: 'Main', status: 'Published' }, { id: 14, title: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', category: 'Main', status: 'Published' }, { id: 15, title: 'Contact', url: 'https://www.dmcturk.com/contact', category: 'Main', status: 'Published' }, { id: 16, title: 'Blog', url: 'https://www.dmcturk.com/blog', category: 'Main', status: 'Published' }, ]; let nextPageId = 17; let editingPageId = null; function renderPages() { const tbody = document.getElementById('pages-tbody'); tbody.innerHTML = pagesData.map(p => { const statusColor = p.status === 'Published' ? 'var(--success)' : p.status === 'Draft' ? 'var(--gold)' : 'var(--muted)'; return `<tr style="border-bottom:1px solid var(--line);"> <td style="padding:12px 16px; font-weight:500; color:var(--dark);">${p.title}</td> <td style="padding:12px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> <a href="${p.url}" target="_blank" style="color:var(--muted); text-decoration:none;" title="${p.url}">${p.url}</a> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; background:var(--gold-light); color:var(--gold); padding:2px 8px; border-radius:2px; font-weight:500;">${p.category}</span> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; font-weight:500; color:${statusColor};">● ${p.status}</span> </td> <td style="padding:12px 16px; text-align:right;"> <div style="display:flex; gap:6px; justify-content:flex-end;"> <a href="${p.url}" target="_blank" class="btn btn-secondary btn-xs">↗ View</a> <button class="btn btn-secondary btn-xs" onclick="openEditPageModal(${p.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deletePage(${p.id})">✕</button> </div> </td> </tr>`; }).join(''); } function openAddPageModal() { editingPageId = null; document.getElementById('page-modal-title').textContent = 'Add Page'; document.getElementById('pf-title').value = ''; document.getElementById('pf-url').value = 'https://www.dmcturk.com/'; document.getElementById('pf-category').value = 'Main'; document.getElementById('pf-status').value = 'Published'; document.getElementById('page-modal').classList.add('open'); } function openEditPageModal(id) { const page = pagesData.find(p => p.id === id); if (!page) return; editingPageId = id; document.getElementById('page-modal-title').textContent = 'Edit Page'; document.getElementById('pf-title').value = page.title; document.getElementById('pf-url').value = page.url; document.getElementById('pf-category').value = page.category; document.getElementById('pf-status').value = page.status; document.getElementById('page-modal').classList.add('open'); } function closePageModal() { document.getElementById('page-modal').classList.remove('open'); } function closePageModalOutside(e) { if (e.target === document.getElementById('page-modal')) closePageModal(); } function savePageItem() { const title = document.getElementById('pf-title').value.trim(); const url = document.getElementById('pf-url').value.trim(); if (!title || !url) { alert('Title and URL are required.'); return; } const category = document.getElementById('pf-category').value; const status = document.getElementById('pf-status').value; if (editingPageId) { const page = pagesData.find(p => p.id === editingPageId); Object.assign(page, { title, url, category, status }); } else { pagesData.push({ id: nextPageId++, title, url, category, status }); } closePageModal(); renderPages(); } function deletePage(id) { const page = pagesData.find(p => p.id === id); if (!page) return; if (!confirm(`Delete page "${page.title}"?`)) return; pagesData = pagesData.filter(p => p.id !== id); renderPages(); } // ── DROPDOWNS ── function renderDropdowns() { const container = document.getElementById('dropdowns-content'); const parents = menuData.filter(i => i.type === 'parent'); container.innerHTML = parents.map(p => { const children = menuData.filter(c => c.parent === p.id); return `<div class="card" style="margin-bottom:16px;"> <div class="card-header"> <div> <div class="card-title">${p.label}</div> <div class="card-sub">${p.url} · ${children.length} sub-item(s)</div> </div> <button class="btn btn-secondary btn-sm" onclick="showSection('menu'); expandedParents.add(${p.id}); renderTree();">Edit in Menu Manager</button> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> ${children.map((c,i) => ` <tr style="border-bottom: ${i < children.length-1 ? '1px solid var(--line)' : 'none'};"> <td style="padding:10px 16px; font-weight:500;">${c.label}</td> <td style="padding:10px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted);">${c.url}</td> <td style="padding:10px 16px; text-align:right;"> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id}); showSection('menu');">Edit</button> </td> </tr>`).join('')} </table> </div> </div>`; }).join(''); } // ── INIT ── renderTree(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DMCTurk – Menu Admin Panel</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #B5914E; --gold-light: #FDF6EC; --gold-border: #E8D5B0; --dark: #1A1A1A; --mid: #444; --muted: #888; --line: #E8E0D4; --white: #fff; --bg: #F7F6F3; --danger: #C0392B; --danger-light: #FDEDEC; --success: #27AE60; --success-light: #EAFAF1; --info: #2980B9; --info-light: #EBF5FB; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; min-height: 100vh; } /* ── TOPBAR ── */ .topbar { background: var(--dark); color: var(--white); padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .topbar-brand .dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } .topbar-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.5); } .badge-live { background: var(--success); color: white; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 2px; letter-spacing: 0.05em; } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 56px); } /* ── SIDEBAR ── */ .sidebar { background: var(--white); border-right: 1px solid var(--line); padding: 24px 0; } .sidebar-section { padding: 0 20px; margin-bottom: 8px; } .sidebar-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 12px 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--mid); transition: all 0.15s; text-decoration: none; } .sidebar-item:hover { background: var(--bg); color: var(--dark); } .sidebar-item.active { background: var(--gold-light); color: var(--gold); font-weight: 500; } .sidebar-icon { font-size: 15px; width: 20px; text-align: center; } .sidebar-divider { height: 1px; background: var(--line); margin: 12px 20px; } /* ── MAIN ── */ .main { padding: 32px; overflow-y: auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .page-title { font-size: 20px; font-weight: 500; color: var(--dark); margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--muted); font-weight: 300; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; border-radius: 3px; transition: all 0.15s; text-decoration: none; } .btn-primary { background: var(--gold); color: white; } .btn-primary:hover { background: #9a7a3e; } .btn-secondary { background: var(--white); color: var(--mid); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #f5b7b1; } .btn-danger:hover { background: var(--danger); color: white; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-xs { padding: 3px 8px; font-size: 11px; } /* ── CARDS ── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 14px; font-weight: 500; color: var(--dark); } .card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .card-body { padding: 20px; } /* ── MENU TREE ── */ .menu-tree { display: flex; flex-direction: column; gap: 6px; } .menu-item { background: var(--white); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .menu-item.is-parent { border-left: 3px solid var(--gold); } .menu-item.is-child { border-left: 3px solid var(--gold-border); margin-left: 32px; } .menu-row { display: grid; grid-template-columns: 28px 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 10px 14px; } .drag-handle { color: var(--muted); cursor: grab; font-size: 14px; text-align: center; user-select: none; } .menu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .menu-name { font-size: 13px; font-weight: 500; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-url { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-type { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.05em; white-space: nowrap; } .type-parent { background: var(--gold-light); color: var(--gold); } .type-child { background: #f0f4ff; color: #3a5bd9; } .type-page { background: var(--info-light); color: var(--info); } .menu-status { width: 36px; height: 20px; background: var(--success); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .menu-status.off { background: var(--line); } .menu-status::after { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 3px; right: 3px; transition: right 0.2s; } .menu-status.off::after { right: auto; left: 3px; } .menu-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── CHILDREN BLOCK ── */ .children-block { background: #fafaf8; border-top: 1px solid var(--line); padding: 10px 14px 10px 44px; display: flex; flex-direction: column; gap: 6px; } .child-row { display: grid; grid-template-columns: 20px 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; } /* ── FORM ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--mid); margin-bottom: 6px; letter-spacing: 0.03em; } .form-input, .form-select { width: 100%; padding: 9px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--dark); transition: border-color 0.15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--gold); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: 4px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 15px; font-weight: 500; } .modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--dark); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; } /* ── PREVIEW ── */ .nav-preview { background: var(--dark); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 28px; border-radius: 3px; overflow-x: auto; margin-bottom: 20px; } .preview-logo { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; margin-right: 8px; } .preview-logo span { color: var(--gold); } .preview-link { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; cursor: default; } .preview-link.has-dropdown::after { content: ' ▾'; font-size: 10px; } .preview-cta { background: var(--gold); color: white !important; padding: 6px 14px; border-radius: 2px; font-weight: 500; } /* ── STATS ── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; } .stat-label { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; } .stat-value { font-size: 24px; font-weight: 500; color: var(--dark); } /* ── ALERT ── */ .alert { padding: 12px 16px; border-radius: 3px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-info { background: var(--info-light); color: var(--info); border-left: 3px solid var(--info); } .alert-success { background: var(--success-light); color: var(--success); border-left: 3px solid var(--success); } </style> </head> <body> <!-- ══ TOPBAR ══ --> <div class="topbar"> <div class="topbar-brand"> <div class="dot"></div> DMCTurk Admin <span style="color:rgba(255,255,255,0.3); font-weight:300;">/ Menu Manager</span> </div> <div class="topbar-meta"> <span class="badge-live">LIVE</span> <span>dmcturk.com</span> <a href="https://www.dmcturk.com" target="_blank" style="color:var(--gold); text-decoration:none; font-size:12px;">↗ View Site</a> </div> </div> <div class="layout"> <!-- ══ SIDEBAR ══ --> <aside class="sidebar"> <div class="sidebar-label">Navigation</div> <div class="sidebar-section"> <div class="sidebar-item active" id="nav-menu" onclick="showSection('menu')"> <span class="sidebar-icon">☰</span> Menu Manager </div> <div class="sidebar-item" id="nav-pages" onclick="showSection('pages')"> <span class="sidebar-icon">📄</span> Pages </div> <div class="sidebar-item" id="nav-dropdowns" onclick="showSection('dropdowns')"> <span class="sidebar-icon">🗂️</span> Dropdown Groups </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Site Structure</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">🏠</span> Home </div> <div class="sidebar-item"> <span class="sidebar-icon">🗺️</span> Package Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🏙️</span> City Tours </div> <div class="sidebar-item"> <span class="sidebar-icon">🚐</span> Transfers </div> <div class="sidebar-item"> <span class="sidebar-icon">📋</span> Terms & Conditions </div> <div class="sidebar-item"> <span class="sidebar-icon">✉️</span> Contact </div> <div class="sidebar-item"> <span class="sidebar-icon">📝</span> Blog </div> </div> <div class="sidebar-divider"></div> <div class="sidebar-label">Settings</div> <div class="sidebar-section"> <div class="sidebar-item"> <span class="sidebar-icon">⚙️</span> Nav Settings </div> <div class="sidebar-item"> <span class="sidebar-icon">🌐</span> Languages </div> </div> </aside> <!-- ══ MAIN ══ --> <main class="main"> <!-- ══ MENU MANAGER SECTION ══ --> <div id="section-menu"> <div class="page-header"> <div> <div class="page-title">Menu Manager</div> <div class="page-sub">Manage navigation items, order, dropdowns and visibility for dmcturk.com</div> </div> <div style="display:flex; gap:8px;"> <button class="btn btn-secondary" onclick="exportMenu()">⬇ Export JSON</button> <button class="btn btn-primary" onclick="openAddModal()">+ Add Menu Item</button> </div> </div> <!-- Stats --> <div class="stats-row"> <div class="stat-card"> <div class="stat-label">Total Items</div> <div class="stat-value" id="stat-total">14</div> </div> <div class="stat-card"> <div class="stat-label">Top Level</div> <div class="stat-value" id="stat-top">7</div> </div> <div class="stat-card"> <div class="stat-label">Dropdowns</div> <div class="stat-value" id="stat-dropdowns">2</div> </div> <div class="stat-card"> <div class="stat-label">Hidden</div> <div class="stat-value" id="stat-hidden">0</div> </div> </div> <!-- Alert --> <div class="alert alert-info" id="save-alert" style="display:none;"> ✓ Changes saved successfully! Remember to publish to make changes live. </div> <!-- Live Preview --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Live Preview</div> <div class="card-sub">This is how the navigation looks on the site</div> </div> <button class="btn btn-secondary btn-sm" onclick="refreshPreview()">↻ Refresh</button> </div> <div class="card-body" style="padding: 16px;"> <div class="nav-preview" id="nav-preview"> <div class="preview-logo">DMC<span>Turk</span></div> </div> </div> </div> <!-- Menu Tree --> <div class="card"> <div class="card-header"> <div> <div class="card-title">Navigation Structure</div> <div class="card-sub">Drag to reorder · Toggle visibility · Edit or delete items</div> </div> <div style="display:flex; gap:6px;"> <button class="btn btn-secondary btn-sm" onclick="expandAll()">Expand All</button> <button class="btn btn-secondary btn-sm" onclick="collapseAll()">Collapse All</button> </div> </div> <div class="card-body"> <div class="menu-tree" id="menu-tree"></div> </div> </div> <!-- Save Button --> <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 8px;"> <button class="btn btn-secondary" onclick="resetMenu()">↩ Reset Changes</button> <button class="btn btn-primary" onclick="saveMenu()">💾 Save Changes</button> </div> </div><!-- /section-menu --> <!-- ══ PAGES SECTION ══ --> <div id="section-pages" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Pages</div> <div class="page-sub">All pages on dmcturk.com — edit title and URL</div> </div> <button class="btn btn-primary" onclick="openAddPageModal()">+ Add Page</button> </div> <div class="card"> <div class="card-header"> <div class="card-title">All Pages</div> <div class="card-sub">Click Edit to update page title or URL</div> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> <thead> <tr style="background:var(--bg); border-bottom:1px solid var(--line);"> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Page Title</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">URL</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Category</th> <th style="text-align:left; padding:10px 16px; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;">Status</th> <th style="padding:10px 16px;"></th> </tr> </thead> <tbody id="pages-tbody"></tbody> </table> </div> </div> </div><!-- /section-pages --> <!-- ══ DROPDOWNS SECTION ══ --> <div id="section-dropdowns" style="display:none;"> <div class="page-header"> <div> <div class="page-title">Dropdown Groups</div> <div class="page-sub">Manage dropdown parent menus and their sub-items</div> </div> </div> <div id="dropdowns-content"></div> </div><!-- /section-dropdowns --> </main> </div> <!-- ══ PAGE EDIT MODAL ══ --> <div class="modal-overlay" id="page-modal" onclick="closePageModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="page-modal-title">Edit Page</div> <button class="modal-close" onclick="closePageModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Page Title *</label> <input class="form-input" id="pf-title" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="pf-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Category</label> <select class="form-select" id="pf-category"> <option value="Main">Main</option> <option value="Package Tours">Package Tours</option> <option value="City Tours">City Tours</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label class="form-label">Status</label> <select class="form-select" id="pf-status"> <option value="Published">Published</option> <option value="Draft">Draft</option> <option value="Hidden">Hidden</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closePageModal()">Cancel</button> <button class="btn btn-primary" onclick="savePageItem()">Save Page</button> </div> </div> </div> <!-- ══ ADD/EDIT MODAL ══ --> <div class="modal-overlay" id="modal" onclick="closeModalOutside(event)"> <div class="modal"> <div class="modal-header"> <div class="modal-title" id="modal-title">Add Menu Item</div> <button class="modal-close" onclick="closeModal()">✕</button> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">Label *</label> <input class="form-input" id="f-label" type="text" placeholder="e.g. Package Tours"> </div> <div class="form-group"> <label class="form-label">URL *</label> <input class="form-input" id="f-url" type="text" placeholder="https://www.dmcturk.com/..."> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Type</label> <select class="form-select" id="f-type" onchange="onTypeChange()"> <option value="page">Page Link</option> <option value="parent">Parent (with dropdown)</option> <option value="child">Child (sub-item)</option> <option value="cta">CTA Button</option> </select> </div> <div class="form-group" id="parent-group" style="display:none;"> <label class="form-label">Parent Item</label> <select class="form-select" id="f-parent"></select> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Open in</label> <select class="form-select" id="f-target"> <option value="_self">Same tab</option> <option value="_blank">New tab</option> </select> </div> <div class="form-group"> <label class="form-label">Visible</label> <select class="form-select" id="f-visible"> <option value="1">Yes – Show in menu</option> <option value="0">No – Hide from menu</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal()">Cancel</button> <button class="btn btn-primary" onclick="saveItem()">Save Item</button> </div> </div> </div> <script> // ── DATA ── let menuData = [ { id: 1, label: 'Home', url: 'https://www.dmcturk.com', type: 'page', target: '_self', visible: true, parent: null }, { id: 2, label: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', type: 'parent', target: '_self', visible: true, parent: null }, { id: 3, label: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 4, label: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 5, label: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 6, label: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 7, label: '7 Churches', url: 'https://www.dmcturk.com/7churches', type: 'child', target: '_self', visible: true, parent: 2 }, { id: 8, label: 'City Tours', url: 'https://www.dmcturk.com/services-5', type: 'parent', target: '_self', visible: true, parent: null }, { id: 9, label: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 10, label: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 11, label: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 12, label: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', type: 'child', target: '_self', visible: true, parent: 8 }, { id: 13, label: 'Transfers', url: 'https://www.dmcturk.com/kopy%C4%B1s%C4%B1-general-conditions', type: 'page', target: '_self', visible: true, parent: null }, { id: 14, label: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', type: 'page', target: '_self', visible: true, parent: null }, { id: 15, label: 'Blog', url: 'https://www.dmcturk.com/blog', type: 'page', target: '_self', visible: true, parent: null }, { id: 16, label: 'Contact', url: 'https://www.dmcturk.com/contact', type: 'cta', target: '_self', visible: true, parent: null }, ]; let editingId = null; let nextId = 17; let expandedParents = new Set([2, 8]); // ── RENDER TREE ── function renderTree() { const tree = document.getElementById('menu-tree'); tree.innerHTML = ''; const parents = menuData.filter(i => !i.parent); parents.forEach(item => { const children = menuData.filter(c => c.parent === item.id); const isParent = item.type === 'parent'; const isExpanded = expandedParents.has(item.id); const div = document.createElement('div'); div.className = 'menu-item' + (isParent ? ' is-parent' : ''); div.dataset.id = item.id; const typeLabel = item.type === 'parent' ? 'Dropdown' : item.type === 'cta' ? 'CTA' : 'Page'; const typeClass = item.type === 'parent' ? 'type-parent' : item.type === 'cta' ? 'type-parent' : 'type-page'; div.innerHTML = ` <div class="menu-row"> <div class="drag-handle" title="Drag to reorder">⋮⋮</div> <div class="menu-info"> <div class="menu-name">${item.label} ${isParent && children.length ? `<small style="color:var(--muted);font-weight:300;">(${children.length} items)</small>` : ''}</div> <div class="menu-url">${item.url}</div> </div> <span class="menu-type ${typeClass}">${typeLabel}</span> <div class="menu-status ${item.visible ? '' : 'off'}" title="${item.visible ? 'Visible' : 'Hidden'}" onclick="toggleVisible(${item.id})"></div> <div class="menu-actions"> ${isParent ? `<button class="btn btn-secondary btn-xs" onclick="toggleExpand(${item.id})">${isExpanded ? '▲' : '▼'}</button>` : ''} <button class="btn btn-secondary btn-xs" onclick="openEditModal(${item.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${item.id})">✕</button> </div> </div> ${isParent && isExpanded ? renderChildren(item.id) : ''} `; tree.appendChild(div); }); renderPreview(); updateStats(); } function renderChildren(parentId) { const children = menuData.filter(c => c.parent === parentId); if (!children.length) return `<div class="children-block" style="color:var(--muted);font-size:13px;">No sub-items. <span style="cursor:pointer;color:var(--gold);" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div>`; const rows = children.map(c => ` <div class="child-row" data-id="${c.id}"> <div class="drag-handle" style="font-size:12px;">⋮⋮</div> <div class="menu-info"> <div class="menu-name" style="font-size:13px;">${c.label}</div> <div class="menu-url" style="font-size:11px;">${c.url}</div> </div> <div class="menu-status ${c.visible ? '' : 'off'}" style="width:30px;height:16px;" onclick="toggleVisible(${c.id})"></div> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deleteItem(${c.id})">✕</button> </div> `).join(''); return `<div class="children-block">${rows}<div style="margin-top:8px;"><span style="cursor:pointer;color:var(--gold);font-size:12px;" onclick="openAddChildModal(${parentId})">+ Add sub-item</span></div></div>`; } // ── PREVIEW ── function renderPreview() { const preview = document.getElementById('nav-preview'); const visible = menuData.filter(i => i.visible && !i.parent); let html = '<div class="preview-logo">DMC<span>Turk</span></div>'; visible.forEach(item => { const hasDrop = item.type === 'parent' && menuData.some(c => c.parent === item.id && c.visible); const cls = item.type === 'cta' ? 'preview-link preview-cta' : hasDrop ? 'preview-link has-dropdown' : 'preview-link'; html += `<span class="${cls}">${item.label}</span>`; }); preview.innerHTML = html; } // ── STATS ── function updateStats() { const tops = menuData.filter(i => !i.parent); const drops = menuData.filter(i => i.type === 'parent'); const hidden = menuData.filter(i => !i.visible); document.getElementById('stat-total').textContent = menuData.length; document.getElementById('stat-top').textContent = tops.length; document.getElementById('stat-dropdowns').textContent = drops.length; document.getElementById('stat-hidden').textContent = hidden.length; } // ── TOGGLE ── function toggleVisible(id) { const item = menuData.find(i => i.id === id); if (item) item.visible = !item.visible; renderTree(); } function toggleExpand(id) { if (expandedParents.has(id)) expandedParents.delete(id); else expandedParents.add(id); renderTree(); } function expandAll() { menuData.filter(i => i.type === 'parent').forEach(i => expandedParents.add(i.id)); renderTree(); } function collapseAll() { expandedParents.clear(); renderTree(); } // ── MODAL ── function openAddModal() { editingId = null; document.getElementById('modal-title').textContent = 'Add Menu Item'; document.getElementById('f-label').value = ''; document.getElementById('f-url').value = 'https://www.dmcturk.com/'; document.getElementById('f-type').value = 'page'; document.getElementById('f-target').value = '_self'; document.getElementById('f-visible').value = '1'; populateParentSelect(); onTypeChange(); document.getElementById('modal').classList.add('open'); } function openAddChildModal(parentId) { openAddModal(); document.getElementById('f-type').value = 'child'; document.getElementById('f-parent').value = parentId; onTypeChange(); } function openEditModal(id) { const item = menuData.find(i => i.id === id); if (!item) return; editingId = id; document.getElementById('modal-title').textContent = 'Edit Menu Item'; document.getElementById('f-label').value = item.label; document.getElementById('f-url').value = item.url; document.getElementById('f-type').value = item.type; document.getElementById('f-target').value = item.target; document.getElementById('f-visible').value = item.visible ? '1' : '0'; populateParentSelect(); document.getElementById('f-parent').value = item.parent || ''; onTypeChange(); document.getElementById('modal').classList.add('open'); } function closeModal() { document.getElementById('modal').classList.remove('open'); } function closeModalOutside(e) { if (e.target === document.getElementById('modal')) closeModal(); } function populateParentSelect() { const sel = document.getElementById('f-parent'); const parents = menuData.filter(i => i.type === 'parent'); sel.innerHTML = parents.map(p => `<option value="${p.id}">${p.label}</option>`).join(''); } function onTypeChange() { const t = document.getElementById('f-type').value; document.getElementById('parent-group').style.display = t === 'child' ? 'block' : 'none'; } function saveItem() { const label = document.getElementById('f-label').value.trim(); const url = document.getElementById('f-url').value.trim(); if (!label || !url) { alert('Label and URL are required.'); return; } const type = document.getElementById('f-type').value; const target = document.getElementById('f-target').value; const visible = document.getElementById('f-visible').value === '1'; const parentVal = document.getElementById('f-parent').value; const parent = type === 'child' && parentVal ? parseInt(parentVal) : null; if (editingId) { const item = menuData.find(i => i.id === editingId); Object.assign(item, { label, url, type, target, visible, parent }); } else { menuData.push({ id: nextId++, label, url, type, target, visible, parent }); } if (parent && type === 'parent') expandedParents.add(parseInt(parentVal)); closeModal(); renderTree(); } // ── DELETE ── function deleteItem(id) { const item = menuData.find(i => i.id === id); if (!item) return; const children = menuData.filter(c => c.parent === id); const msg = children.length ? `Delete "${item.label}" and its ${children.length} sub-item(s)?` : `Delete "${item.label}"?`; if (!confirm(msg)) return; menuData = menuData.filter(i => i.id !== id && i.parent !== id); renderTree(); } // ── SAVE / RESET ── function saveMenu() { const alert = document.getElementById('save-alert'); alert.style.display = 'flex'; alert.className = 'alert alert-success'; alert.textContent = '✓ Changes saved successfully! Remember to publish to make changes live.'; setTimeout(() => alert.style.display = 'none', 3500); } function resetMenu() { if (confirm('Reset all changes?')) location.reload(); } // ── EXPORT ── function exportMenu() { const json = JSON.stringify(menuData, null, 2); const blob = new Blob([json], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'dmcturk-menu.json'; a.click(); } function refreshPreview() { renderPreview(); } // ── SECTION SWITCHING ── function showSection(name) { ['menu','pages','dropdowns'].forEach(s => { document.getElementById('section-' + s).style.display = s === name ? 'block' : 'none'; const nav = document.getElementById('nav-' + s); if (nav) nav.classList.toggle('active', s === name); }); if (name === 'pages') renderPages(); if (name === 'dropdowns') renderDropdowns(); } // ── PAGES DATA ── let pagesData = [ { id: 1, title: 'Home', url: 'https://www.dmcturk.com', category: 'Main', status: 'Published' }, { id: 2, title: 'Package Tours', url: 'https://www.dmcturk.com/packagetours', category: 'Main', status: 'Published' }, { id: 3, title: 'Big Cappadocian Roundtrip', url: 'https://www.dmcturk.com/cappadocian-roundtrip', category: 'Package Tours', status: 'Published' }, { id: 4, title: 'Aeolian Roundtrip', url: 'https://www.dmcturk.com/aeolianronudtrip', category: 'Package Tours', status: 'Published' }, { id: 5, title: 'Steps of St. Paul', url: 'https://www.dmcturk.com/steps-of-st-paul', category: 'Package Tours', status: 'Published' }, { id: 6, title: 'Istanbul & 7 Churches', url: 'https://www.dmcturk.com/istanbul-sevenchurches', category: 'Package Tours', status: 'Published' }, { id: 7, title: '7 Churches', url: 'https://www.dmcturk.com/7churches', category: 'Package Tours', status: 'Published' }, { id: 8, title: 'City Tours', url: 'https://www.dmcturk.com/services-5', category: 'Main', status: 'Published' }, { id: 9, title: 'Istanbul City Tours', url: 'https://www.dmcturk.com/general-8', category: 'City Tours', status: 'Published' }, { id: 10, title: 'İzmir City Tours', url: 'https://www.dmcturk.com/services-9-1', category: 'City Tours', status: 'Published' }, { id: 11, title: 'Antalya City Tours', url: 'https://www.dmcturk.com/services-9-2', category: 'City Tours', status: 'Published' }, { id: 12, title: 'Ankara City Tours', url: 'https://www.dmcturk.com/services-9-3', category: 'City Tours', status: 'Published' }, { id: 13, title: 'Transfers', url: 'https://www.dmcturk.com/kopyası-general-conditions', category: 'Main', status: 'Published' }, { id: 14, title: 'Terms & Conditions', url: 'https://www.dmcturk.com/terms', category: 'Main', status: 'Published' }, { id: 15, title: 'Contact', url: 'https://www.dmcturk.com/contact', category: 'Main', status: 'Published' }, { id: 16, title: 'Blog', url: 'https://www.dmcturk.com/blog', category: 'Main', status: 'Published' }, ]; let nextPageId = 17; let editingPageId = null; function renderPages() { const tbody = document.getElementById('pages-tbody'); tbody.innerHTML = pagesData.map(p => { const statusColor = p.status === 'Published' ? 'var(--success)' : p.status === 'Draft' ? 'var(--gold)' : 'var(--muted)'; return `<tr style="border-bottom:1px solid var(--line);"> <td style="padding:12px 16px; font-weight:500; color:var(--dark);">${p.title}</td> <td style="padding:12px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> <a href="${p.url}" target="_blank" style="color:var(--muted); text-decoration:none;" title="${p.url}">${p.url}</a> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; background:var(--gold-light); color:var(--gold); padding:2px 8px; border-radius:2px; font-weight:500;">${p.category}</span> </td> <td style="padding:12px 16px;"> <span style="font-size:11px; font-weight:500; color:${statusColor};">● ${p.status}</span> </td> <td style="padding:12px 16px; text-align:right;"> <div style="display:flex; gap:6px; justify-content:flex-end;"> <a href="${p.url}" target="_blank" class="btn btn-secondary btn-xs">↗ View</a> <button class="btn btn-secondary btn-xs" onclick="openEditPageModal(${p.id})">Edit</button> <button class="btn btn-danger btn-xs" onclick="deletePage(${p.id})">✕</button> </div> </td> </tr>`; }).join(''); } function openAddPageModal() { editingPageId = null; document.getElementById('page-modal-title').textContent = 'Add Page'; document.getElementById('pf-title').value = ''; document.getElementById('pf-url').value = 'https://www.dmcturk.com/'; document.getElementById('pf-category').value = 'Main'; document.getElementById('pf-status').value = 'Published'; document.getElementById('page-modal').classList.add('open'); } function openEditPageModal(id) { const page = pagesData.find(p => p.id === id); if (!page) return; editingPageId = id; document.getElementById('page-modal-title').textContent = 'Edit Page'; document.getElementById('pf-title').value = page.title; document.getElementById('pf-url').value = page.url; document.getElementById('pf-category').value = page.category; document.getElementById('pf-status').value = page.status; document.getElementById('page-modal').classList.add('open'); } function closePageModal() { document.getElementById('page-modal').classList.remove('open'); } function closePageModalOutside(e) { if (e.target === document.getElementById('page-modal')) closePageModal(); } function savePageItem() { const title = document.getElementById('pf-title').value.trim(); const url = document.getElementById('pf-url').value.trim(); if (!title || !url) { alert('Title and URL are required.'); return; } const category = document.getElementById('pf-category').value; const status = document.getElementById('pf-status').value; if (editingPageId) { const page = pagesData.find(p => p.id === editingPageId); Object.assign(page, { title, url, category, status }); } else { pagesData.push({ id: nextPageId++, title, url, category, status }); } closePageModal(); renderPages(); } function deletePage(id) { const page = pagesData.find(p => p.id === id); if (!page) return; if (!confirm(`Delete page "${page.title}"?`)) return; pagesData = pagesData.filter(p => p.id !== id); renderPages(); } // ── DROPDOWNS ── function renderDropdowns() { const container = document.getElementById('dropdowns-content'); const parents = menuData.filter(i => i.type === 'parent'); container.innerHTML = parents.map(p => { const children = menuData.filter(c => c.parent === p.id); return `<div class="card" style="margin-bottom:16px;"> <div class="card-header"> <div> <div class="card-title">${p.label}</div> <div class="card-sub">${p.url} · ${children.length} sub-item(s)</div> </div> <button class="btn btn-secondary btn-sm" onclick="showSection('menu'); expandedParents.add(${p.id}); renderTree();">Edit in Menu Manager</button> </div> <div class="card-body" style="padding:0;"> <table style="width:100%; border-collapse:collapse; font-size:13px;"> ${children.map((c,i) => ` <tr style="border-bottom: ${i < children.length-1 ? '1px solid var(--line)' : 'none'};"> <td style="padding:10px 16px; font-weight:500;">${c.label}</td> <td style="padding:10px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted);">${c.url}</td> <td style="padding:10px 16px; text-align:right;"> <button class="btn btn-secondary btn-xs" onclick="openEditModal(${c.id}); showSection('menu');">Edit</button> </td> </tr>`).join('')} </table> </div> </div>`; }).join(''); } // ── INIT ── renderTree(); </script> </body> </html>
Who We Are
This is your About section. This space is a great opportunity to give a full background on who you are, what you do and what your site has to offer. Your users are genuinely interested in learning more about you, so don’t be afraid to share personal anecdotes to create a more friendly quality.
Double click on the text box to start editing your content and make sure to add all the relevant details you want site visitors to know. If you’re a business, talk about how you started and share your professional journey. Explain your core values, your commitment to customers and how you stand out from the crowd. Add a photo, gallery or video for even more engagement.
Get on the List
Sign up to receive the first word when we go live.
