Advanced marker system with drawing, animations, cloud sync, webhooks, and modern UI
// ==UserScript== // @name Custom Markers Pro - Advanced Edition v11 // @namespace http://tampermonkey.net/ // @version 11.1 // @description Advanced marker system with drawing, animations, cloud sync, webhooks, and modern UI // @author Disruptor // @match *://*/* // @grant GM_addStyle // @grant GM_registerMenuCommand // @grant GM_xmlhttpRequest // @grant GM_setClipboard // @require https://unpkg.com/[email protected]/dist/jspdf.umd.min.js // @license GPL-3.0 // @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgdmlld0JveD0nMCAwIDY0IDY0Jz48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPScjMDAwJyByeD0nMTAnLz48dGV4dCB4PSc1MCUnIHk9JzUwJScgZm9udC1zaXplPSczNicgdGV4dC1hbmNob3I9J21pZGRsZScgZG9taW5hbnQtYmFzZWxpbmU9J2NlbnRyYWwnPvCfkajigI3wn5K7PC90ZXh0Pjwvc3ZnPg== // ==/UserScript== // @ts-nocheck /* ======================================== QUICK REFERENCE GUIDE - Custom Markers Pro v11 ======================================== */ /* POSITIONING REFERENCE: top: Increase number = moves DOWN right: Increase number = moves LEFT bottom: Increase number = moves UP left: Increase number = moves RIGHT */ /* MAIN UI ELEMENTS LOCATION & APPEARANCE: Change Main Control Button loc/look in .cm-control-btn { top: 150px; right: 20px; } Change Edit Mode Button loc/look in .cm-toggle-edit { bottom: 30px; right: 100px; } Change Drawing Mode Button loc/look in .cm-toggle-drawing { bottom: 30px; right: 170px; } Change Bulk Select FAB loc/look in .cm-fab-container { bottom: 30px; right: 30px; } Change Activation Button loc/look in .cm-activate-btn { bottom: 30px; right: 30px; } Change Drawing Toolbar loc/look in .cm-drawing-toolbar { top: 80px; left: 20px; } Change Bulk Toolbar loc/look in .cm-bulk-toolbar { top: 80px; left: 50%; } Change Panel Width loc/look in .cm-panel { width: 450px; } */ /* KEYBOARD SHORTCUTS: Ctrl+E = Toggle Edit Mode Ctrl+D = Toggle Drawing Mode Ctrl+F = Focus Search Box Ctrl+S = Save Data Ctrl+A (in bulk mode) = Select All Markers Delete (in bulk mode) = Delete Selected */ /* COLORS & GRADIENTS: Primary Gradient = linear-gradient(135deg, #667eea 0%, #764ba2 100%) Secondary Gradient = linear-gradient(135deg, #f093fb 0%, #f5576c 100%) Success Gradient = linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) Warning Gradient = linear-gradient(135deg, #fa709a 0%, #fee140 100%) Main Accent Color = #667eea Delete/Danger Color = #f56565 */ /* Z-INDEX LAYERS (from bottom to top): 999995 = Overlay & SVG Canvas 999996 = Drawing Canvas & Markers 999997 = Drawing/Bulk Toolbars, Dragging Items 999998 = FAB Buttons, Toggle Buttons 999999 = Control Button, Activation Button 1000000 = Panel, Context Menu 1000001 = Tooltip, Modal */ /* ANIMATIONS AVAILABLE: pulse, bounce, rotate, glow, // Original shake, wiggle, fade, flip, // New added zoom, slide, spin // New added Change animation speed in @keyframes definitions Change default animation in state.animationType = 'pulse' */ /* ICON SIZES: Marker Icons = font-size: 32px (in .cm-marker) Icon Preview = font-size: 32px (in .cm-icon-preview) Marker List Icons = font-size: 28px (in updateMarkersList) FAB Button Icons = font-size: 24px (in .cm-fab) */ /* STORAGE KEYS: Main Data = custom_markers_pro_v11_${WEBSITE_HOST} Notes = custom_markers_notes_${WEBSITE_HOST} */ /* AUTO-INIT WEBSITES: Add/remove in autoInitPatterns array at bottom of script: - mapgenie.io - maps.google.* - openstreetmap.org - bing.com/maps - github.com - stackoverflow.com */ /* DRAWING TOOLS: rectangle, circle, line, arrow, // Shape tools text, pen, // Text & freehand select, delete, clear // Action tools Change default tool in state.currentDrawingTool = 'rectangle' */ /* TEXT FORMATTING OPTIONS: Bold toggle = #text-bold checkbox Italic toggle = #text-italic checkbox Size range = #text-size (10-48px) Default font = 'Inter, sans-serif' */ /* BORDER STYLES: solid, dashed, dotted Change in #draw-style select */ /* PANEL TABS: markers, notes, settings Change default in state.currentTab = 'markers' */ /* THEME: Toggle dark mode = state.isDarkMode Dark mode class = .cm-dark-mode */ /* WEBHOOK & CLOUD SYNC: Webhook URL var = WEBHOOK_URL (line ~2840) Cloud API var = CLOUD_SYNC_API (line ~2841) */ /* IMPORTANT FUNCTION LOCATIONS: Main init() = line ~3089 createUI() = line ~3109 renderMarkers() = line ~4380 renderShapes() = line ~4437 initDrawing() = line ~4522 showTooltip() = line ~4717 hideTooltip() = line ~4774 */ /* MODIFY DEFAULTS: Default marker icon = '📍' in resetForm() Default animation = 'pulse' in resetForm() Panel open side = right: -450px (closed) to right: 0 (open) Float animation = 3s in @keyframes float */ /* ADD NEW FEATURES: New animations = Add @keyframes and .cm-marker.animate-{name} New icons = Add to iconOptions object New drawing tools = Add to drawing toolbar HTML & handleMouseDown New export formats = Add new export function & button */ /* //adding cusom fixes look for css for specific sites that dont work line 1804 */ (function() { 'use strict'; // Modern UI Styles with Glassmorphism and Animations GM_addStyle(` /* Force proper positioning context */ .cm-control-btn, .cm-panel, .cm-overlay, .cm-drawing-canvas, .cm-svg-canvas, .cm-drawing-toolbar, .cm-bulk-toolbar, .cm-toggle-edit, .cm-toggle-drawing, .cm-fab-container, .cm-activate-btn, .cm-context-menu, .cm-tooltip { position: fixed !important; transform: translateZ(0) !important; /* Force GPU layer */ } /* Reset any parent transforms affecting our elements */ body > * { transform: none !important; } /* Import Modern Font */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* CSS Variables for Theming */ :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%); --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.18); --shadow-color: rgba(31, 38, 135, 0.37); --text-primary: #1a202c; --text-secondary: #4a5568; --border-radius: 20px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark mode variables */ .cm-dark-mode { --glass-bg: rgba(30, 30, 30, 0.95); --glass-border: rgba(255, 255, 255, 0.1); --text-primary: #f0f0f0; --text-secondary: #b0b0b0; --shadow-color: rgba(0, 0, 0, 0.5); } /* Modern Control Button with Floating Animation */ .cm-control-btn { position: fixed; top: 150px; right: 20px; z-index: 999999; background: var(--primary-gradient); color: white; padding: 16px 24px; border-radius: var(--border-radius); cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; box-shadow: 0 10px 40px var(--shadow-color); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--glass-border); transition: var(--transition); display: flex; align-items: center; gap: 10px; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .cm-control-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 40px var(--shadow-color); } .cm-control-btn::before { content: ''; position: absolute; inset: 0; border-radius: var(--border-radius); padding: 2px; background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; } .cm-control-btn:hover::before { opacity: 1; } /* Activation Button with Glow Effect */ .cm-activate-btn { position: fixed; bottom: 30px; right: 30px; z-index: 999999; background: none; color: #667eea; font-size: 48px; cursor: pointer; border: none; filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.8)); transition: var(--transition); animation: spin-glow 4s linear infinite; } @keyframes spin-glow { from { transform: rotate(0deg); filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.8)); } 50% { filter: drop-shadow(0 0 20px rgba(102, 126, 234, 1)); } to { transform: rotate(360deg); filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.8)); } } .cm-activate-btn:hover { filter: drop-shadow(0 0 25px rgba(102, 126, 234, 1)); transform: scale(1.1); } .cm-activate-tooltip { position: absolute; background: rgba(0, 0, 0, 0.9); color: white; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 1000000; } .cm-activate-btn:hover + .cm-activate-tooltip { opacity: 1; } /* Modern Glassmorphic Panel */ .cm-panel { position: fixed; top: 0; right: -450px; width: 450px; height: 100vh; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -10px 0 40px rgba(0,0,0,0.1); z-index: 1000000; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; font-family: 'Inter', sans-serif; border-left: 1px solid var(--glass-border); } .cm-panel.cm-dark-mode { background: rgba(30, 30, 30, 0.95); color: #f0f0f0; } .cm-panel.active { right: 0; } /* Panel Header with Gradient */ .cm-panel-header { background: var(--primary-gradient); color: white; padding: 24px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; } .cm-panel-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .cm-panel-title { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .cm-header-buttons { display: flex; gap: 10px; align-items: center; } .cm-theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); font-size: 18px; } .cm-theme-toggle:hover { background: rgba(255,255,255,0.3); transform: scale(1.1); } .cm-close-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); font-size: 20px; } .cm-close-btn:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); } /* Panel Content */ .cm-panel-content { flex: 1; overflow-y: auto; padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%); } .cm-dark-mode .cm-panel-content { background: linear-gradient(180deg, rgba(40,40,40,0.9) 0%, rgba(50,50,50,0.9) 100%); } /* Custom Scrollbar */ .cm-panel-content::-webkit-scrollbar { width: 8px; } .cm-panel-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; } .cm-panel-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 4px; } /* Tab Navigation */ .cm-tabs { display: flex; gap: 8px; margin-bottom: 24px; background: rgba(0,0,0,0.03); padding: 4px; border-radius: 16px; } .cm-dark-mode .cm-tabs { background: rgba(255,255,255,0.05); } .cm-tab { flex: 1; padding: 10px 16px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; border-radius: 12px; font-family: 'Inter', sans-serif; font-weight: 500; transition: var(--transition); } .cm-tab.active { background: white; color: var(--text-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .cm-dark-mode .cm-tab.active { background: rgba(60,60,60,1); color: #f0f0f0; } .cm-tab:hover:not(.active) { background: rgba(255,255,255,0.5); } /* Modern Form Styles */ .cm-form { background: white; padding: 24px; border-radius: var(--border-radius); box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 24px; } .cm-dark-mode .cm-form { background: rgba(50,50,50,1); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .cm-form-group { margin-bottom: 20px; } .cm-label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .cm-input, .cm-textarea, .cm-select { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 15px; transition: var(--transition); font-family: 'Inter', sans-serif; background: white; } .cm-dark-mode .cm-input, .cm-dark-mode .cm-textarea, .cm-dark-mode .cm-select { background: rgba(40,40,40,1); border-color: rgba(255,255,255,0.1); color: #f0f0f0; } .cm-input:focus, .cm-textarea:focus, .cm-select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .cm-textarea { min-height: 100px; resize: vertical; } /* Modern Buttons */ .cm-btn { padding: 12px 24px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); font-size: 14px; font-family: 'Inter', sans-serif; position: relative; overflow: hidden; } .cm-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; } .cm-btn:active::before { width: 300px; height: 300px; } .cm-btn-primary { background: var(--primary-gradient); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .cm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } .cm-btn-secondary { background: #f7fafc; color: var(--text-primary); border: 2px solid #e2e8f0; } .cm-dark-mode .cm-btn-secondary { background: rgba(60,60,60,1); color: #f0f0f0; border-color: rgba(255,255,255,0.2); } .cm-btn-secondary:hover { background: #edf2f7; border-color: #cbd5e0; } .cm-btn-success { background: var(--success-gradient); color: white; box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3); } .cm-btn-danger { background: linear-gradient(135deg, #f56565 0%, #ed64a6 100%); color: white; box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3); } #donate-btn { transition: all 0.3s ease; } #donate-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 25px rgba(255, 196, 57, 0.4); } #donate-btn:hover span { animation: coffeeShake 0.5s ease-in-out; } @keyframes coffeeShake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } } /* Search Bar */ .cm-search-container { position: relative; margin-bottom: 20px; } .cm-search-input { width: 100%; padding: 14px 48px 14px 20px; border: 2px solid #e2e8f0; border-radius: 50px; font-size: 15px; transition: var(--transition); font-family: 'Inter', sans-serif; } .cm-dark-mode .cm-search-input { background: rgba(40,40,40,1); border-color: rgba(255,255,255,0.1); color: #f0f0f0; } .cm-search-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .cm-search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #a0aec0; pointer-events: none; } /* Marker Items with Hover Effects */ .cm-marker-item { background: white; border-radius: 16px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; transition: var(--transition); border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; } .cm-dark-mode .cm-marker-item { background: rgba(50,50,50,1); } .cm-marker-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent); transition: left 0.5s; } .cm-marker-item:hover { transform: translateX(-4px); border-color: #667eea; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1); } .cm-marker-item:hover::before { left: 100%; } .cm-marker-item.selected { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); border-color: #667eea; } /* Icon Preview with Animation */ .cm-icon-preview { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--primary-gradient); border-radius: 16px; font-size: 32px; margin-top: 10px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); animation: iconBounce 2s ease-in-out infinite; } @keyframes iconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Marker Animations - ORIGINAL PLUS NEW ONES */ @keyframes markerPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } } @keyframes markerBounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } 75% { transform: translateY(-5px); } } @keyframes markerRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes markerGlow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.5)); } 50% { filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8)); } } /* NEW ANIMATIONS */ @keyframes markerShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes markerWiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } } @keyframes markerFade { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes markerFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @keyframes markerZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } @keyframes markerSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } } @keyframes markerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cm-marker.animate-pulse { animation: markerPulse 2s ease-in-out infinite; } .cm-marker.animate-bounce { animation: markerBounce 1.5s ease-in-out infinite; } .cm-marker.animate-rotate { animation: markerRotate 3s linear infinite; } .cm-marker.animate-glow { animation: markerGlow 2s ease-in-out infinite; } .cm-marker.animate-shake { animation: markerShake 0.5s ease-in-out infinite; } .cm-marker.animate-wiggle { animation: markerWiggle 1s ease-in-out infinite; } .cm-marker.animate-fade { animation: markerFade 2s ease-in-out infinite; } .cm-marker.animate-flip { animation: markerFlip 3s ease-in-out infinite; } .cm-marker.animate-zoom { animation: markerZoom 2s ease-in-out infinite; } .cm-marker.animate-slide { animation: markerSlide 2s ease-in-out infinite; } .cm-marker.animate-spin { animation: markerSpin 2s linear infinite; } /* Drawing Mode Styles */ .cm-drawing-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999996; } .cm-drawing-canvas.active { pointer-events: auto; cursor: crosshair; } .cm-drawing-shape { position: absolute; border: 3px solid #667eea; background: rgba(102, 126, 234, 0.1); pointer-events: auto; cursor: move; } .cm-drawing-shape.circle { border-radius: 50%; } .cm-drawing-shape.line, .cm-drawing-shape.arrow { height: 0; background: none; border: none; border-top: 3px solid #667eea; transform-origin: left center; } .cm-drawing-shape.arrow::after { content: ''; position: absolute; right: -10px; top: -8px; width: 0; height: 0; border-left: 10px solid #667eea; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .cm-drawing-shape.text { border: none; background: none; font-family: 'Inter', sans-serif; font-size: 16px; padding: 4px 8px; color: #667eea; } .cm-drawing-canvas .cm-drawing-shape.selected { border-color: #f5576c !important; background: rgba(245, 87, 108, 0.1) !important; box-shadow: 0 0 10px rgba(245, 87, 108, 0.5); } /* SVG Canvas for Pen Drawing */ .cm-svg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999995; } .cm-svg-canvas path { pointer-events: stroke; cursor: pointer; } .cm-svg-canvas path.selected { stroke: #f5576c !important; stroke-width: 4 !important; fill: none; } /* Efficient Drawing Toolbar */ .cm-drawing-toolbar { position: fixed; top: 80px; left: 20px; background: white; padding: 8px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); display: none; flex-direction: column; gap: 4px; z-index: 999997; max-height: calc(100vh - 160px); overflow-y: auto; } .cm-drawing-toolbar.active { display: flex; } .cm-drawing-toolbar-section { padding: 8px; border-bottom: 1px solid #e2e8f0; } .cm-drawing-toolbar-section:last-child { border-bottom: none; } .cm-drawing-toolbar-title { font-size: 12px; font-weight: 600; color: #667eea; margin-bottom: 8px; text-transform: uppercase; } .cm-drawing-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .cm-drawing-tool { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #e2e8f0; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); font-size: 18px; } .cm-drawing-tool:hover { border-color: #667eea; transform: scale(1.1); } .cm-drawing-tool.active { background: var(--primary-gradient); border-color: transparent; color: white; } /* Bulk Selection Toolbar */ .cm-bulk-toolbar { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: white; padding: 16px 24px; border-radius: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: none; align-items: center; gap: 16px; z-index: 999997; } .cm-bulk-toolbar.active { display: flex; } .cm-bulk-count { font-weight: 600; color: var(--text-primary); } /* Settings Panel */ .cm-settings { background: white; padding: 24px; border-radius: var(--border-radius); margin-top: 20px; } .cm-dark-mode .cm-settings { background: rgba(50,50,50,1); } .cm-settings-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; } .cm-settings-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; } .cm-settings-group:last-child { border-bottom: none; } .cm-toggle-switch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cm-switch { position: relative; width: 50px; height: 26px; } .cm-switch input { opacity: 0; width: 0; height: 0; } .cm-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e0; transition: 0.3s; border-radius: 26px; } .cm-switch-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; } .cm-switch input:checked + .cm-switch-slider { background: var(--primary-gradient); } .cm-switch input:checked + .cm-switch-slider:before { transform: translateX(24px); } /* Note Taking Mode */ .cm-note-editor { background: white; border-radius: 16px; padding: 20px; margin-top: 20px; } .cm-dark-mode .cm-note-editor { background: rgba(50,50,50,1); } .cm-note-toolbar { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid #e2e8f0; } .cm-note-tool { width: 36px; height: 36px; border: 2px solid #e2e8f0; background: white; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .cm-dark-mode .cm-note-tool { background: rgba(40,40,40,1); border-color: rgba(255,255,255,0.1); } .cm-note-tool:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.05); } .cm-note-tool.active { background: var(--primary-gradient); border-color: transparent; color: white; } .cm-note-content { min-height: 200px; padding: 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; } .cm-dark-mode .cm-note-content { background: rgba(40,40,40,1); border-color: rgba(255,255,255,0.1); color: #f0f0f0; } .cm-note-content:focus { outline: none; border-color: #667eea; } /* Export Options */ .cm-export-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; } .cm-export-option { padding: 16px; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; text-align: center; transition: var(--transition); font-weight: 500; } .cm-dark-mode .cm-export-option { border-color: rgba(255,255,255,0.1); } .cm-export-option:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.05); } .cm-export-option-icon { font-size: 24px; margin-bottom: 8px; } /* Floating Action Buttons */ .cm-fab-container { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 12px; z-index: 999998; } .cm-fab { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-gradient); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); transition: var(--transition); } .cm-fab:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(102, 126, 234, 0.4); } /* Toggle Edit Mode Button */ .cm-toggle-edit { position: fixed; bottom: 30px; right: 100px; width: 60px; height: 60px; border-radius: 50%; background: var(--secondary-gradient); color: white; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 6px 30px rgba(245, 87, 108, 0.4); transition: var(--transition); z-index: 999998; } .cm-toggle-edit.visible { display: flex; } .cm-toggle-edit:hover { transform: rotate(180deg) scale(1.1); } .cm-toggle-edit.active { background: var(--success-gradient); } /* Toggle Drawing Mode Button */ .cm-toggle-drawing { position: fixed; bottom: 30px; right: 170px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 6px 30px rgba(250, 112, 154, 0.4); transition: var(--transition); z-index: 999998; } .cm-toggle-drawing.visible { display: flex; } .cm-toggle-drawing:hover { transform: scale(1.1); } .cm-toggle-drawing.active { background: var(--success-gradient); } /* Markers */ .cm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999995; } .cm-overlay.active { pointer-events: auto; } .cm-marker { position: absolute; cursor: pointer; pointer-events: auto; font-size: 32px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); transition: transform 0.2s; user-select: none; z-index: 999996; } .cm-marker:hover { transform: scale(1.15); } .cm-marker.dragging { cursor: grabbing; transform: scale(1.2); z-index: 999997; } .cm-marker.selected { filter: drop-shadow(0 0 10px rgba(245, 87, 108, 0.8)); } /* Tooltip */ .cm-tooltip { position: absolute; background: rgba(0, 0, 0, 0.95); color: white; padding: 16px; border-radius: 12px; max-width: 350px; pointer-events: none; z-index: 1000001; display: none; font-size: 14px; line-height: 1.6; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); } .cm-tooltip.active { display: block; } .cm-tooltip.persistent { pointer-events: auto; } .cm-tooltip-close { float: right; cursor: pointer; padding: 4px; font-size: 16px; opacity: 0.8; transition: opacity 0.3s; } .cm-tooltip-close:hover { opacity: 1; } /* Messages */ .cm-message { padding: 12px 20px; border-radius: 12px; margin: 12px 0; font-size: 14px; display: none; animation: slideInRight 0.3s ease; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .cm-message.success { background: linear-gradient(135deg, rgba(67, 233, 123, 0.1), rgba(56, 249, 215, 0.1)); color: #22543d; border: 2px solid #48bb78; display: block; } .cm-message.error { background: linear-gradient(135deg, rgba(245, 101, 101, 0.1), rgba(237, 100, 166, 0.1)); color: #742a2a; border: 2px solid #fc8181; display: block; } /* Loading Spinner */ .cm-spinner { width: 40px; height: 40px; border: 4px solid rgba(102, 126, 234, 0.2); border-top-color: #667eea; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Context Menu */ .cm-context-menu { position: absolute; background: white; border-radius: 12px; padding: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 1000000; display: none; min-width: 200px; } .cm-dark-mode .cm-context-menu { background: rgba(40,40,40,1); } .cm-context-menu.active { display: block; } .cm-context-item { padding: 10px 16px; border-radius: 8px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 10px; } .cm-context-item:hover { background: rgba(102, 126, 234, 0.1); } /* Checkbox for marker selection */ .cm-marker-checkbox { width: 18px; height: 18px; margin-right: 12px; cursor: pointer; } `); // ======================================== // Configuration & State // ======================================== const WEBSITE_HOST = window.location.hostname; const STORAGE_KEY = `custom_markers_pro_v11_${WEBSITE_HOST}`; const WEBHOOK_URL = ''; // Add your webhook URL here const CLOUD_SYNC_API = ''; // Add your cloud sync API endpoint here let state = { markers: [], shapes: [], paths: [], // For pen tool SVG paths isEditMode: false, isDrawingMode: false, isBulkMode: false, isDragging: false, currentDragItem: null, editingMarkerId: null, selectedMarkers: new Set(), selectedShapeId: null, // For drawing select tool currentDrawingTool: 'rectangle', animationType: 'pulse', tooltip: null, isInitialized: false, currentTab: 'markers', isDarkMode: false, settings: { autoSave: true, animations: true, soundEffects: false, cloudSync: false, webhooks: false, contextDetection: true } }; // Icon Options with Categories const iconOptions = { '📍': 'Location Pin', '⭐': 'Star', '🔴': 'Red Circle', '🔵': 'Blue Circle', '🟢': 'Green Circle', '🟡': 'Yellow Circle', '⚠️': 'Warning', '❗': 'Important', '❓': 'Question', '💡': 'Idea', '🚩': 'Flag', '🎯': 'Target', '💎': 'Diamond', '🔥': 'Fire', '⚡': 'Lightning', '🔑': 'Key', '💀': 'Danger', '⚔️': 'Battle', '🛡️': 'Defense', '🏠': 'House', '⛺': 'Camp', '🏰': 'Castle', '🏭': 'Factory', '👁️': 'Point of Interest', '📦': 'Loot Box', '🎪': 'Event', '🌟': 'Special', '🎨': 'Art', '📝': 'Note', '📸': 'Photo', '🎮': 'Gaming', '🎵': 'Music', '🎬': 'Video' }; // ======================================== // Utility Functions // ======================================== function loadData() { const stored = localStorage.getItem(STORAGE_KEY); if (stored) { const data = JSON.parse(stored); state.markers = data.markers || []; state.shapes = data.shapes || []; state.paths = data.paths || []; state.settings = { ...state.settings, ...(data.settings || {}) }; state.isDarkMode = data.isDarkMode || false; } } function saveData() { if (state.settings.autoSave) { localStorage.setItem(STORAGE_KEY, JSON.stringify({ markers: state.markers, shapes: state.shapes, paths: state.paths, settings: state.settings, isDarkMode: state.isDarkMode, lastSaved: new Date().toISOString() })); } } function exportToJSON() { const data = { website: { host: WEBSITE_HOST, url: window.location.href, title: document.title, exportDate: new Date().toISOString() }, version: '11.0', markers: state.markers, shapes: state.shapes, paths: state.paths, settings: state.settings }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `markers_${WEBSITE_HOST.replace(/\./g, '_')}_${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); showMessage('Exported to JSON successfully!', 'success'); } function exportToCSV() { let csv = 'ID,Title,Icon,Description,X,Y,Created,LinkURL,LinkTitle,ImageURL\n'; state.markers.forEach(marker => { csv += `"${marker.id}","${marker.title}","${marker.icon}","${marker.description || ''}","${marker.x}","${marker.y}","${marker.created}","${marker.linkUrl || ''}","${marker.linkTitle || ''}","${marker.imageUrl || ''}"\n`; }); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `markers_${WEBSITE_HOST.replace(/\./g, '_')}_${Date.now()}.csv`; a.click(); URL.revokeObjectURL(url); showMessage('Exported to CSV successfully!', 'success'); } function exportToPDF() { if (!window.jspdf || !window.jspdf.jsPDF) { alert('PDF export requires jsPDF library. Opening print dialog instead.'); window.print(); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF(); const pageHeight = doc.internal.pageSize.height; const pageWidth = doc.internal.pageSize.width; const margin = 25; let y = 20; // ----- Table of Contents ----- doc.setFont("helvetica", "bold"); doc.setFontSize(16); doc.setTextColor(0, 0, 0); doc.text("Table of Contents", margin, y); y += 12; state.markers.forEach((marker, idx) => { doc.setFont("helvetica", "normal"); doc.setFontSize(12); doc.setTextColor(30, 30, 120); doc.text(`${idx + 1}. ${marker.title}`, margin + 5, y); doc.setDrawColor(220); doc.setLineWidth(0.3); doc.line(margin, y + 2, pageWidth - margin, y + 2); y += 10; }); y += 10; // Add header/footer function addHeaderFooter() { doc.setFont("helvetica", "italic"); doc.setFontSize(10); doc.setTextColor(120); const pageCount = doc.internal.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); // Header doc.text(`Custom Markers for ${WEBSITE_HOST}`, margin, 10); // Footer doc.text(`Page ${i} / ${pageCount}`, pageWidth - margin - 20, pageHeight - 10); } } // ----- Process markers ----- let index = 0; y = 50; function processNextMarker() { if (index >= state.markers.length) { addHeaderFooter(); doc.save(`markers_${WEBSITE_HOST.replace(/\./g, '_')}_${Date.now()}.pdf`); if (typeof showMessage === "function") { showMessage('Exported to PDF successfully!', 'success'); } else { alert("Exported to PDF successfully!"); } return; } const marker = state.markers[index++]; if (y > pageHeight - 50) { doc.addPage(); y = 20; } // Separator line if (index > 1) { doc.setDrawColor(200); doc.setLineWidth(0.4); doc.line(margin, y, pageWidth - margin, y); y += 5; } // Marker title doc.setFont("helvetica", "bold"); doc.setFontSize(15); doc.setTextColor(0, 80, 180); const icon = marker.icon ? marker.icon : "⭐"; doc.text(`${index}. ${icon} ${marker.title}`, margin, y); y += 9; // Description if (marker.description) { doc.setFont("helvetica", "italic"); doc.setFontSize(11); doc.setTextColor(80, 80, 80); const lines = doc.splitTextToSize(marker.description, pageWidth - margin * 2); lines.forEach(line => { if (y > pageHeight - 50) { doc.addPage(); y = 20; } doc.text(line, margin + 7, y); y += 6; }); } // Position doc.setFont("helvetica", "normal"); doc.setFontSize(11); doc.setTextColor(50, 50, 50); doc.text(`Position: ${marker.x}, ${marker.y}`, margin + 7, y); y += 6; // Clickable link if (marker.linkUrl) { doc.setFont("helvetica", "normal"); doc.setFontSize(11); doc.setTextColor(0, 0, 200); doc.textWithLink(marker.linkTitle || marker.linkUrl, margin + 7, y, { url: marker.linkUrl }); doc.setTextColor(0, 0, 0); y += 12; } else { y += 8; } processNextMarker(); } processNextMarker(); } //end of pdf function function exportToMarkdown() { let md = `# Custom Markers for ${WEBSITE_HOST}\n\n`; md += `Exported: ${new Date().toLocaleString()}\n\n`; md += `## Markers (${state.markers.length})\n\n`; state.markers.forEach(marker => { md += `### ${marker.icon} ${marker.title}\n`; md += `- **Position**: ${marker.x}, ${marker.y}\n`; if (marker.description) md += `- **Description**: ${marker.description}\n`; if (marker.linkUrl) md += `- **Link**: [${marker.linkTitle || 'View'}](${marker.linkUrl})\n`; if (marker.imageUrl) md += `- **Image**: \n`; md += `- **Created**: ${new Date(marker.created).toLocaleString()}\n\n`; }); const blob = new Blob([md], { type: 'text/markdown' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `markers_${WEBSITE_HOST.replace(/\./g, '_')}_${Date.now()}.md`; a.click(); URL.revokeObjectURL(url); showMessage('Exported to Markdown successfully!', 'success'); } async function sendWebhook(action, data) { if (!state.settings.webhooks || !WEBHOOK_URL) return; try { GM_xmlhttpRequest({ method: 'POST', url: WEBHOOK_URL, headers: { 'Content-Type': 'application/json' }, data: JSON.stringify({ action, website: WEBSITE_HOST, timestamp: new Date().toISOString(), data }), onload: (response) => { console.log('Webhook sent:', response.status); }, onerror: (error) => { console.error('Webhook error:', error); } }); } catch (error) { console.error('Webhook error:', error); } } async function syncToCloud() { if (!state.settings.cloudSync || !CLOUD_SYNC_API) return; showMessage('Syncing to cloud...', 'success'); try { GM_xmlhttpRequest({ method: 'POST', url: CLOUD_SYNC_API, headers: { 'Content-Type': 'application/json' }, data: JSON.stringify({ website: WEBSITE_HOST, markers: state.markers, shapes: state.shapes, paths: state.paths, settings: state.settings, timestamp: new Date().toISOString() }), onload: (response) => { showMessage('Synced to cloud successfully!', 'success'); }, onerror: (error) => { showMessage('Cloud sync failed!', 'error'); } }); } catch (error) { showMessage('Cloud sync error!', 'error'); } } //adding cusom fixes look for css for specific sites that dont work function fixSiteSpecificIssues() { const hostname = window.location.hostname; // Fix for flaticon.com - OneTrust elements are blocking ---yeah flaticon is stubborn so no fix for foating elemnts :D if (hostname.includes('flaticon.com')) { setTimeout(() => { const style = document.createElement('style'); style.textContent = ` /* Match or exceed OneTrust's z-index */ .cm-control-btn, .cm-panel, .cm-toggle-edit, .cm-toggle-drawing, .cm-fab-container, .cm-drawing-toolbar, .cm-bulk-toolbar, .cm-activate-btn { z-index: 2147483647 !important; position: fixed !important; } .cm-tooltip, .cm-context-menu { z-index: 2147483647 !important; position: fixed !important; } .cm-overlay, .cm-drawing-canvas, .cm-svg-canvas { z-index: 2147483645 !important; position: fixed !important; } /* Push OneTrust elements down */ #onetrust-pc-sdk, #ot-anchor, #ot-fltr-modal, .onetrust-pc-dark-filter { z-index: 2147483640 !important; } /* Ensure our markers/shapes are visible */ .cm-marker { z-index: 2147483645 !important; position: absolute !important; } .cm-drawing-shape { z-index: 2147483645 !important; position: absolute !important; } `; document.head.appendChild(style); console.log('Applied Flaticon/OneTrust fixes'); }, 1000); } // Add Other site fixes here... if (hostname.includes('reddit.com')) { document.body.style.position = 'static'; } if (hostname.includes('twitter.com') || hostname.includes('x.com')) { document.documentElement.style.transform = 'none'; } } function showMessage(msg, type) { const existingMsg = document.querySelector('.cm-message'); if (existingMsg) existingMsg.remove(); const msgEl = document.createElement('div'); msgEl.className = `cm-message ${type}`; msgEl.textContent = msg; const panel = document.querySelector('.cm-panel-content'); if (panel) { panel.insertBefore(msgEl, panel.firstChild); setTimeout(() => msgEl.remove(), 3000); } } function showActivationButton() { if (state.isInitialized || document.querySelector('.cm-activate-btn')) return; const container = document.createElement('div'); container.style.cssText = 'position: fixed; bottom: 30px; right: 30px; z-index: 999999;'; const activateBtn = document.createElement('button'); activateBtn.className = 'cm-activate-btn'; activateBtn.innerHTML = '⚙'; activateBtn.onclick = () => { container.remove(); init(); }; const tooltip = document.createElement('div'); tooltip.className = 'cm-activate-tooltip'; tooltip.textContent = 'Activate Markers Pro'; activateBtn.addEventListener('mouseenter', (e) => { const rect = activateBtn.getBoundingClientRect(); tooltip.style.bottom = '80px'; tooltip.style.right = '0'; }); container.appendChild(activateBtn); container.appendChild(tooltip); document.body.appendChild(container); } // ======================================== // Initialize Function // ======================================== function init() { if (state.isInitialized) { togglePanel(); return; } state.isInitialized = true; loadData(); createUI(); loadNotes(); renderMarkers(); renderShapes(); renderPaths(); setupEventListeners(); updateMarkersList(); applyTheme(); sendWebhook('init', { markersCount: state.markers.length }); fixSiteSpecificIssues(); } // ======================================== // Create UI Elements (REMOVED SHARE/QR SELECTED) // ======================================== function createUI() { if (document.querySelector('.cm-control-btn')) return; // Main control button const controlBtn = document.createElement('div'); controlBtn.className = 'cm-control-btn'; controlBtn.innerHTML = '<span>🚀</span><span>Markers Pro</span>'; document.body.appendChild(controlBtn); // Side panel with REMOVED share/QR selected buttons const panel = document.createElement('div'); panel.className = 'cm-panel'; panel.innerHTML = ` <div class="cm-panel-header"> <div class="cm-panel-title"> <span>🎯</span> <span>Markers Pro v11</span> </div> <div class="cm-header-buttons"> <button class="cm-theme-toggle" id="theme-toggle" title="Toggle Dark/Light Mode">🌓</button> <button class="cm-close-btn" id="panel-close">✕</button> </div> </div> <div class="cm-panel-content"> <div class="cm-tabs"> <button class="cm-tab active" data-tab="markers">📍 Markers</button> <button class="cm-tab" data-tab="notes">📝 Notes</button> <button class="cm-tab" data-tab="settings">⚙️ Settings</button> </div> <div class="cm-tab-content" id="tab-markers"> <div class="cm-search-container"> <input type="text" class="cm-search-input" id="search-markers" placeholder="Search markers..."> <span class="cm-search-icon">🔍</span> </div> <div class="cm-form"> <div class="cm-form-group"> <label class="cm-label">Title</label> <input type="text" class="cm-input" id="marker-title" placeholder="Enter marker title"> </div> <div class="cm-form-group"> <label class="cm-label">Icon & Animation</label> <div style="display: flex; gap: 12px;"> <select class="cm-select" id="marker-icon" style="flex: 1;"> ${Object.entries(iconOptions).map(([icon, name]) => `<option value="${icon}">${icon} ${name}</option>` ).join('')} </select> <select class="cm-select" id="marker-animation" style="flex: 1;"> <option value="none">No Animation</option> <option value="pulse">Pulse</option> <option value="bounce">Bounce</option> <option value="rotate">Rotate</option> <option value="glow">Glow</option> <option value="shake">Shake</option> <option value="wiggle">Wiggle</option> <option value="fade">Fade</option> <option value="flip">Flip</option> <option value="zoom">Zoom</option> <option value="slide">Slide</option> <option value="spin">Spin</option> </select> </div> <div class="cm-icon-preview" id="icon-preview">📍</div> </div> <div class="cm-form-group"> <label class="cm-label">Description</label> <textarea class="cm-textarea" id="marker-description" placeholder="Add notes..."></textarea> </div> <div class="cm-form-group"> <label class="cm-label">Link URL</label> <input type="text" class="cm-input" id="marker-link-url" placeholder="https://example.com"> </div> <div class="cm-form-group"> <label class="cm-label">Link Title</label> <input type="text" class="cm-input" id="marker-link-title" placeholder="Click here for more info"> </div> <div class="cm-form-group"> <label class="cm-label">Image URL</label> <input type="text" class="cm-input" id="marker-image-url" placeholder="https://example.com/image.jpg"> </div> <div class="cm-form-group"> <button class="cm-btn cm-btn-primary" id="add-marker-btn">➕ Add Marker</button> <button class="cm-btn cm-btn-primary" id="save-marker-btn" style="display:none;">💾 Save Changes</button> <button class="cm-btn cm-btn-secondary" id="cancel-edit-btn" style="display:none;">Cancel</button> </div> </div> <div class="cm-export-options"> <div class="cm-export-option" id="export-json"> <div class="cm-export-option-icon">📄</div> <div>JSON</div> </div> <div class="cm-export-option" id="export-csv"> <div class="cm-export-option-icon">📊</div> <div>CSV</div> </div> <div class="cm-export-option" id="export-markdown"> <div class="cm-export-option-icon">📝</div> <div>Markdown</div> </div> <div class="cm-export-option" id="export-pdf"> <div class="cm-export-option-icon">📑</div> <div>PDF</div> </div> </div> <div class="cm-markers-list"> <h3 style="margin: 20px 0;">📌 Markers (<span id="markers-count">0</span>)</h3> <div id="markers-container"></div> </div> </div> <div class="cm-tab-content" id="tab-notes" style="display:none;"> <div class="cm-note-editor"> <div class="cm-note-toolbar"> <button class="cm-note-tool" data-format="bold">𝐁</button> <button class="cm-note-tool" data-format="italic">𝐼</button> <button class="cm-note-tool" data-format="underline">U̲</button> <button class="cm-note-tool" data-format="list">☰</button> <button class="cm-note-tool" data-format="link">🔗</button> </div> <div class="cm-note-content" contenteditable="true" id="note-content"> Start taking notes here... </div> <button class="cm-btn cm-btn-primary" id="save-note-btn" style="margin-top: 16px;">💾 Save Note</button> </div> </div> <div class="cm-tab-content" id="tab-settings" style="display:none;"> <div class="cm-settings"> <div class="cm-settings-title"> <span>⚙️</span> <span>Settings</span> </div> <div class="cm-settings-group"> <div class="cm-toggle-switch"> <span>Auto Save</span> <label class="cm-switch"> <input type="checkbox" id="setting-autosave" checked> <span class="cm-switch-slider"></span> </label> </div> <div class="cm-toggle-switch"> <span>Animations</span> <label class="cm-switch"> <input type="checkbox" id="setting-animations" checked> <span class="cm-switch-slider"></span> </label> </div> <div class="cm-toggle-switch"> <span>Cloud Sync</span> <label class="cm-switch"> <input type="checkbox" id="setting-cloudsync"> <span class="cm-switch-slider"></span> </label> </div> <div class="cm-toggle-switch"> <span>Webhooks</span> <label class="cm-switch"> <input type="checkbox" id="setting-webhooks"> <span class="cm-switch-slider"></span> </label> </div> </div> <div class="cm-form-group"> <label class="cm-label">Webhook URL</label> <input type="text" class="cm-input" id="webhook-url" placeholder="https://your-webhook-url.com"> </div> <div class="cm-form-group" style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #e2e8f0;"> <div style="text-align: center;"> <h3 style="margin-bottom: 16px; color: var(--text-primary);">☕ Support Development</h3> <p style="margin-bottom: 20px; color: var(--text-secondary); font-size: 14px;"> If you find this tool useful, consider buying me a coffee! </p> <button class="cm-btn" id="donate-btn" style=" background: linear-gradient(135deg, #FFC439 0%, #FF9B3D 100%); color: white; padding: 14px 28px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 15px rgba(255, 196, 57, 0.3); "> <span style="font-size: 20px; vertical-align: middle;">☕</span> Buy Me a Coffee via PayPal </button> <p style="margin-top: 12px; font-size: 12px; color: var(--text-secondary);"> v11.1 • Made with ❤️ by Disruptor </p> </div> </div> <button class="cm-btn cm-btn-success" id="sync-now-btn">☁️ Sync Now</button> <button class="cm-btn cm-btn-danger" id="clear-all-btn" style="margin-top: 20px;">🗑️ Clear All Data</button> </div> </div> </div> `; document.body.appendChild(panel); // Overlay for markers const overlay = document.createElement('div'); overlay.className = 'cm-overlay'; overlay.id = 'marker-overlay'; document.body.appendChild(overlay); // Drawing canvas const drawingCanvas = document.createElement('div'); drawingCanvas.className = 'cm-drawing-canvas'; drawingCanvas.id = 'drawing-canvas'; document.body.appendChild(drawingCanvas); // SVG canvas for pen tool const svgCanvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svgCanvas.setAttribute('class', 'cm-svg-canvas'); svgCanvas.setAttribute('id', 'svg-canvas'); svgCanvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999995;'; document.body.appendChild(svgCanvas); // Drawing toolbar with NEW STYLING OPTIONS const drawingToolbar = document.createElement('div'); drawingToolbar.className = 'cm-drawing-toolbar'; drawingToolbar.innerHTML = ` <div class="cm-drawing-toolbar-section"> <div class="cm-drawing-toolbar-title">Shapes</div> <div class="cm-drawing-tools"> <button class="cm-drawing-tool active" data-tool="rectangle" title="Rectangle">▭</button> <button class="cm-drawing-tool" data-tool="circle" title="Circle">○</button> <button class="cm-drawing-tool" data-tool="line" title="Line">╱</button> <button class="cm-drawing-tool" data-tool="arrow" title="Arrow">→</button> <button class="cm-drawing-tool" data-tool="text" title="Text">T</button> <button class="cm-drawing-tool" data-tool="pen" title="Free Draw">✏️</button> </div> </div> <div class="cm-drawing-toolbar-section"> <div class="cm-drawing-toolbar-title">Actions</div> <div class="cm-drawing-tools"> <button class="cm-drawing-tool" data-tool="select" title="Select">👆</button> <button class="cm-drawing-tool" data-tool="delete" title="Delete">🗑️</button> <button class="cm-drawing-tool" data-tool="clear" title="Clear All">💣</button> </div> </div> <div class="cm-drawing-toolbar-section"> <div class="cm-drawing-toolbar-title">Style</div> <input type="color" id="draw-color" value="#667eea" style="width: 100%; height: 32px; border-radius: 8px; border: 2px solid #e2e8f0;"> <input type="range" id="draw-thickness" min="1" max="20" value="3" style="width: 100%; margin-top: 8px;"> <select id="draw-style" style="width: 100%; margin-top: 8px; padding: 8px; border-radius: 8px; border: 2px solid #e2e8f0;"> <option value="solid">Solid</option> <option value="dashed">Dashed</option> <option value="dotted">Dotted</option> </select> </div> <div class="cm-drawing-toolbar-section" id="text-options" style="display:none;"> <div class="cm-drawing-toolbar-title">Text Style</div> <label style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"> <input type="checkbox" id="text-bold"> <span style="color:#8B4513;">Bold</span> </label> <label style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"> <input type="checkbox" id="text-italic"> <span style="color:#8B4513;">Italic</span> </label> <label style="display:block;margin-bottom:4px;">Size</label> <input type="range" id="text-size" min="10" max="48" value="16" style="width:100%;"> </div> `; document.body.appendChild(drawingToolbar); // Bulk toolbar const bulkToolbar = document.createElement('div'); bulkToolbar.className = 'cm-bulk-toolbar'; bulkToolbar.innerHTML = ` <span class="cm-bulk-count">0 selected</span> <button class="cm-btn cm-btn-primary" id="bulk-delete">Delete</button> <button class="cm-btn cm-btn-secondary" id="bulk-export">Export</button> <button class="cm-btn cm-btn-secondary" id="bulk-cancel">Cancel</button> `; document.body.appendChild(bulkToolbar); // Tooltip state.tooltip = document.createElement('div'); state.tooltip.className = 'cm-tooltip'; document.body.appendChild(state.tooltip); // FAB buttons const fabContainer = document.createElement('div'); fabContainer.className = 'cm-fab-container'; fabContainer.innerHTML = ` <button class="cm-fab" id="fab-bulk" title="Bulk Select">☑️</button> `; document.body.appendChild(fabContainer); // Toggle edit button const toggleBtn = document.createElement('button'); toggleBtn.className = 'cm-toggle-edit'; toggleBtn.innerHTML = '✏️'; toggleBtn.title = 'Toggle Edit Mode (Ctrl+E)'; document.body.appendChild(toggleBtn); // Toggle drawing button const toggleDrawBtn = document.createElement('button'); toggleDrawBtn.className = 'cm-toggle-drawing'; toggleDrawBtn.innerHTML = '🎨'; toggleDrawBtn.title = 'Toggle Drawing Mode (Ctrl+D)'; document.body.appendChild(toggleDrawBtn); // Context menu const contextMenu = document.createElement('div'); contextMenu.className = 'cm-context-menu'; contextMenu.innerHTML = ` <div class="cm-context-item" data-action="edit">✏️ Edit</div> <div class="cm-context-item" data-action="duplicate">📋 Duplicate</div> <div class="cm-context-item" data-action="delete">🗑️ Delete</div> <div class="cm-context-item" data-action="animate">✨ Change Animation</div> `; document.body.appendChild(contextMenu); } // ======================================== // Event Listeners - REMOVED SHARE/QR SELECTED // ======================================== function setupEventListeners() { // Panel controls document.querySelector('.cm-control-btn').addEventListener('click', togglePanel); document.getElementById('panel-close').addEventListener('click', togglePanel); // Theme toggle document.getElementById('theme-toggle').addEventListener('click', toggleTheme); // Tabs document.querySelectorAll('.cm-tab').forEach(tab => { tab.addEventListener('click', (e) => { switchTab(e.target.dataset.tab); }); }); // Marker form document.getElementById('marker-icon').addEventListener('change', (e) => { document.getElementById('icon-preview').textContent = e.target.value; }); document.getElementById('marker-animation').addEventListener('change', (e) => { const preview = document.getElementById('icon-preview'); preview.className = `cm-icon-preview animate-${e.target.value}`; }); document.getElementById('add-marker-btn').addEventListener('click', addNewMarker); document.getElementById('save-marker-btn').addEventListener('click', saveEditedMarker); document.getElementById('cancel-edit-btn').addEventListener('click', cancelEdit); // Search document.getElementById('search-markers').addEventListener('input', (e) => { searchMarkers(e.target.value); }); // Export options document.getElementById('export-json').addEventListener('click', exportToJSON); document.getElementById('export-csv').addEventListener('click', exportToCSV); document.getElementById('export-markdown').addEventListener('click', exportToMarkdown); document.getElementById('export-pdf').addEventListener('click', exportToPDF); // Settings document.getElementById('setting-autosave').addEventListener('change', (e) => { state.settings.autoSave = e.target.checked; saveData(); }); document.getElementById('setting-animations').addEventListener('change', (e) => { state.settings.animations = e.target.checked; saveData(); renderMarkers(); }); document.getElementById('setting-cloudsync').addEventListener('change', (e) => { state.settings.cloudSync = e.target.checked; saveData(); }); document.getElementById('setting-webhooks').addEventListener('change', (e) => { state.settings.webhooks = e.target.checked; saveData(); }); document.getElementById('sync-now-btn').addEventListener('click', syncToCloud); document.getElementById('clear-all-btn').addEventListener('click', () => { if (confirm('Are you sure you want to clear all data? This cannot be undone!')) { state.markers = []; state.shapes = []; state.paths = []; saveData(); updateMarkersList(); renderMarkers(); renderShapes(); renderPaths(); showMessage('All data cleared!', 'success'); } }); // Note editor document.querySelectorAll('.cm-note-tool').forEach(tool => { tool.addEventListener('click', (e) => { applyFormat(e.target.dataset.format); }); }); document.getElementById('save-note-btn').addEventListener('click', saveNote); // FAB buttons document.getElementById('fab-bulk').addEventListener('click', toggleBulkMode); // Toggle buttons document.querySelector('.cm-toggle-edit').addEventListener('click', toggleEditMode); document.querySelector('.cm-toggle-drawing').addEventListener('click', toggleDrawingMode); // Drawing tools with FIXED SELECT/DELETE document.querySelectorAll('.cm-drawing-tool').forEach(tool => { tool.addEventListener('click', (e) => { const toolType = e.target.dataset.tool; if (toolType === 'clear') { if (confirm('Clear all drawings?')) { state.shapes = []; state.paths = []; saveData(); renderShapes(); renderPaths(); } } else { selectDrawingTool(toolType); // Show/hide text options based on tool document.getElementById('text-options').style.display = toolType === 'text' ? 'block' : 'none'; } }); }); // Bulk actions document.getElementById('bulk-delete').addEventListener('click', bulkDelete); document.getElementById('bulk-export').addEventListener('click', bulkExport); document.getElementById('bulk-cancel').addEventListener('click', () => { state.isBulkMode = false; state.selectedMarkers.clear(); updateBulkToolbar(); renderMarkers(); }); // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key === 'e') { e.preventDefault(); toggleEditMode(); } else if (e.ctrlKey && e.key === 'd') { e.preventDefault(); toggleDrawingMode(); } else if (e.ctrlKey && e.key === 'f') { e.preventDefault(); document.getElementById('search-markers').focus(); } else if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveData(); showMessage('Saved!', 'success'); } }); // paypal Donation document.getElementById('donate-btn').addEventListener('click', () => { const paypalUrl = 'https://www.paypal.com/paypalme/TamamMatta'; window.open(paypalUrl, '_blank'); showMessage('Thank you for your support! 💙', 'success'); }); // Context menu document.addEventListener('contextmenu', (e) => { const marker = e.target.closest('.cm-marker'); if (marker) { e.preventDefault(); showContextMenu(e, marker.dataset.markerId); } }); document.addEventListener('click', (e) => { const contextMenu = document.querySelector('.cm-context-menu'); if (!contextMenu.contains(e.target)) { contextMenu.classList.remove('active'); } }); document.querySelectorAll('.cm-context-item').forEach(item => { item.addEventListener('click', (e) => { handleContextAction(e.target.dataset.action); }); }); } // ======================================== // Core Functions // ======================================== function togglePanel() { const panel = document.querySelector('.cm-panel'); panel.classList.toggle('active'); } function toggleTheme() { state.isDarkMode = !state.isDarkMode; applyTheme(); saveData(); } function applyTheme() { const panel = document.querySelector('.cm-panel'); if (panel) { panel.classList.toggle('cm-dark-mode', state.isDarkMode); } const contextMenu = document.querySelector('.cm-context-menu'); if (contextMenu) { contextMenu.classList.toggle('cm-dark-mode', state.isDarkMode); } } function switchTab(tabName) { state.currentTab = tabName; document.querySelectorAll('.cm-tab').forEach(tab => { tab.classList.toggle('active', tab.dataset.tab === tabName); }); document.querySelectorAll('.cm-tab-content').forEach(content => { content.style.display = content.id === `tab-${tabName}` ? 'block' : 'none'; }); } function toggleEditMode() { state.isEditMode = !state.isEditMode; const overlay = document.getElementById('marker-overlay'); const toggleBtn = document.querySelector('.cm-toggle-edit'); overlay.classList.toggle('active', state.isEditMode); toggleBtn.classList.toggle('active', state.isEditMode); if (!state.isEditMode) { document.body.style.userSelect = ''; } else { document.body.style.userSelect = 'none'; } } function toggleDrawingMode() { state.isDrawingMode = !state.isDrawingMode; const canvas = document.getElementById('drawing-canvas'); const toolbar = document.querySelector('.cm-drawing-toolbar'); const toggleBtn = document.querySelector('.cm-toggle-drawing'); const svgCanvas = document.getElementById('svg-canvas'); canvas.classList.toggle('active', state.isDrawingMode); toolbar.classList.toggle('active', state.isDrawingMode); toggleBtn.classList.toggle('active', state.isDrawingMode); if (svgCanvas) { svgCanvas.style.pointerEvents = state.isDrawingMode ? 'auto' : 'none'; console.log('SVG canvas pointer-events:', svgCanvas.style.pointerEvents); } if (state.isDrawingMode) { canvas.style.pointerEvents = 'auto'; // prevent canvas from blocking SVG clicks canvas.style.pointerEvents = state.currentDrawingTool === 'select' || state.currentDrawingTool === 'delete' ? 'none' : 'auto'; initDrawing(); } else { canvas.style.pointerEvents = 'none'; } } function toggleBulkMode() { state.isBulkMode = !state.isBulkMode; updateBulkToolbar(); if (!state.isBulkMode) { state.selectedMarkers.clear(); renderMarkers(); } } function addNewMarker() { const title = document.getElementById('marker-title').value.trim(); const icon = document.getElementById('marker-icon').value; const animation = document.getElementById('marker-animation').value; const description = document.getElementById('marker-description').value.trim(); const linkUrl = document.getElementById('marker-link-url').value.trim(); const linkTitle = document.getElementById('marker-link-title').value.trim(); const imageUrl = document.getElementById('marker-image-url').value.trim(); if (!title) { showMessage('Please enter a title!', 'error'); return; } const marker = { id: Date.now().toString(), title, icon, animation, description, linkUrl, linkTitle, imageUrl, x: (40 + Math.random() * 20) + '%', y: (40 + Math.random() * 20) + '%', created: new Date().toISOString(), website: WEBSITE_HOST, context: window.location.pathname }; state.markers.push(marker); saveData(); resetForm(); updateMarkersList(); renderMarkers(); document.querySelector('.cm-toggle-edit').classList.add('visible'); document.querySelector('.cm-toggle-drawing').classList.add('visible'); showMessage('Marker added!', 'success'); sendWebhook('marker_added', marker); } function saveEditedMarker() { const title = document.getElementById('marker-title').value.trim(); const icon = document.getElementById('marker-icon').value; const animation = document.getElementById('marker-animation').value; const description = document.getElementById('marker-description').value.trim(); const linkUrl = document.getElementById('marker-link-url').value.trim(); const linkTitle = document.getElementById('marker-link-title').value.trim(); const imageUrl = document.getElementById('marker-image-url').value.trim(); if (!title || !state.editingMarkerId) { showMessage('Please enter a title!', 'error'); return; } const markerIndex = state.markers.findIndex(m => m.id === state.editingMarkerId); if (markerIndex !== -1) { state.markers[markerIndex] = { ...state.markers[markerIndex], title, icon, animation, description, linkUrl, linkTitle, imageUrl, updated: new Date().toISOString() }; saveData(); resetForm(); updateMarkersList(); renderMarkers(); showMessage('Marker updated!', 'success'); sendWebhook('marker_updated', state.markers[markerIndex]); } } function cancelEdit() { resetForm(); } function resetForm() { document.getElementById('marker-title').value = ''; document.getElementById('marker-icon').value = '📍'; document.getElementById('marker-animation').value = 'pulse'; document.getElementById('icon-preview').textContent = '📍'; document.getElementById('icon-preview').className = 'cm-icon-preview animate-pulse'; document.getElementById('marker-description').value = ''; document.getElementById('marker-link-url').value = ''; document.getElementById('marker-link-title').value = ''; document.getElementById('marker-image-url').value = ''; document.getElementById('add-marker-btn').style.display = 'inline-block'; document.getElementById('save-marker-btn').style.display = 'none'; document.getElementById('cancel-edit-btn').style.display = 'none'; state.editingMarkerId = null; } function searchMarkers(query) { const filtered = state.markers.filter(m => m.title.toLowerCase().includes(query.toLowerCase()) || m.description?.toLowerCase().includes(query.toLowerCase()) ); updateMarkersList(filtered); } function bulkDelete() { if (confirm(`Delete ${state.selectedMarkers.size} markers?`)) { state.markers = state.markers.filter(m => !state.selectedMarkers.has(m.id)); state.selectedMarkers.clear(); saveData(); updateMarkersList(); renderMarkers(); updateBulkToolbar(); showMessage('Markers deleted!', 'success'); } } function bulkExport() { const selected = state.markers.filter(m => state.selectedMarkers.has(m.id)); const data = { website: WEBSITE_HOST, exportDate: new Date().toISOString(), markers: selected }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `selected_markers_${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); showMessage(`Exported ${selected.length} markers!`, 'success'); } function updateBulkToolbar() { const toolbar = document.querySelector('.cm-bulk-toolbar'); toolbar.classList.toggle('active', state.isBulkMode); if (state.isBulkMode) { toolbar.querySelector('.cm-bulk-count').textContent = `${state.selectedMarkers.size} selected`; } } function showContextMenu(e, markerId) { const menu = document.querySelector('.cm-context-menu'); menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px'; menu.classList.add('active'); menu.dataset.markerId = markerId; } function handleContextAction(action) { const menu = document.querySelector('.cm-context-menu'); const markerId = menu.dataset.markerId; switch(action) { case 'edit': editMarker(markerId); break; case 'duplicate': duplicateMarker(markerId); break; case 'delete': deleteMarker(markerId); break; case 'animate': changeMarkerAnimation(markerId); break; } menu.classList.remove('active'); } function editMarker(id) { const marker = state.markers.find(m => m.id === id); if (!marker) return; state.editingMarkerId = id; document.getElementById('marker-title').value = marker.title; document.getElementById('marker-icon').value = marker.icon; document.getElementById('marker-animation').value = marker.animation || 'none'; document.getElementById('icon-preview').textContent = marker.icon; document.getElementById('marker-description').value = marker.description || ''; document.getElementById('marker-link-url').value = marker.linkUrl || ''; document.getElementById('marker-link-title').value = marker.linkTitle || ''; document.getElementById('marker-image-url').value = marker.imageUrl || ''; document.getElementById('add-marker-btn').style.display = 'none'; document.getElementById('save-marker-btn').style.display = 'inline-block'; document.getElementById('cancel-edit-btn').style.display = 'inline-block'; document.querySelector('.cm-panel').classList.add('active'); switchTab('markers'); } function duplicateMarker(id) { const marker = state.markers.find(m => m.id === id); if (!marker) return; const duplicate = { ...marker, id: Date.now().toString(), title: marker.title + ' (Copy)', x: (parseFloat(marker.x) + 2) + '%', y: (parseFloat(marker.y) + 2) + '%', created: new Date().toISOString() }; state.markers.push(duplicate); saveData(); updateMarkersList(); renderMarkers(); showMessage('Marker duplicated!', 'success'); } function deleteMarker(id) { if (confirm('Delete this marker?')) { state.markers = state.markers.filter(m => m.id !== id); saveData(); updateMarkersList(); renderMarkers(); showMessage('Marker deleted!', 'success'); sendWebhook('marker_deleted', { id }); } } function changeMarkerAnimation(id) { const marker = state.markers.find(m => m.id === id); if (!marker) return; const animations = ['none', 'pulse', 'bounce', 'rotate', 'glow', 'shake', 'wiggle', 'fade', 'flip', 'zoom', 'slide', 'spin']; const currentIndex = animations.indexOf(marker.animation || 'none'); const nextIndex = (currentIndex + 1) % animations.length; marker.animation = animations[nextIndex]; saveData(); renderMarkers(); showMessage(`Animation changed to ${animations[nextIndex]}`, 'success'); } // ======================================== // Rendering Functions // ======================================== function renderMarkers() { const overlay = document.getElementById('marker-overlay'); if (!overlay) return; overlay.querySelectorAll('.cm-marker').forEach(el => el.remove()); state.markers.forEach(marker => { const markerEl = document.createElement('div'); markerEl.className = `cm-marker ${state.settings.animations ? `animate-${marker.animation || 'pulse'}` : ''}`; markerEl.innerHTML = marker.icon; markerEl.dataset.markerId = marker.id; markerEl.style.left = marker.x; markerEl.style.top = marker.y; if (state.selectedMarkers.has(marker.id)) { markerEl.classList.add('selected'); } // Event listeners markerEl.addEventListener('click', (e) => { if (state.isBulkMode) { e.stopPropagation(); if (state.selectedMarkers.has(marker.id)) { state.selectedMarkers.delete(marker.id); } else { state.selectedMarkers.add(marker.id); } updateBulkToolbar(); markerEl.classList.toggle('selected'); } else if (!state.isEditMode) { e.stopPropagation(); showTooltip(e, marker, true); } }); markerEl.addEventListener('mousedown', (e) => { if (state.isEditMode && !state.isBulkMode) { startDrag(e, 'marker'); } }); markerEl.addEventListener('mouseenter', (e) => { if (!state.isEditMode && !state.tooltip.classList.contains('persistent')) { showTooltip(e, marker, false); } }); markerEl.addEventListener('mouseleave', () => { if (!state.tooltip.classList.contains('persistent')) { hideTooltip(); } }); overlay.appendChild(markerEl); }); const toggleBtn = document.querySelector('.cm-toggle-edit'); const drawBtn = document.querySelector('.cm-toggle-drawing'); if (toggleBtn) { toggleBtn.classList.toggle('visible', state.markers.length > 0); } if (drawBtn) { drawBtn.classList.toggle('visible', true); } } function renderShapes() { const canvas = document.getElementById('drawing-canvas'); if (!canvas) { console.log('Canvas not found!'); return; } canvas.querySelectorAll('.cm-drawing-shape').forEach(el => el.remove()); state.shapes.forEach(shape => { const shapeEl = document.createElement('div'); shapeEl.className = `cm-drawing-shape ${shape.type}`; shapeEl.dataset.shapeId = shape.id; shapeEl.style.left = shape.x; shapeEl.style.top = shape.y; if (shape.type === 'text') { shapeEl.textContent = shape.text; shapeEl.style.color = shape.borderColor || '#667eea'; shapeEl.style.fontSize = (shape.fontSize || 16) + 'px'; shapeEl.style.fontFamily = shape.fontFamily || 'Inter, sans-serif'; shapeEl.style.fontWeight = shape.bold ? 'bold' : 'normal'; shapeEl.style.fontStyle = shape.italic ? 'italic' : 'normal'; } else if (shape.type === 'line' || shape.type === 'arrow') { shapeEl.style.width = shape.width; shapeEl.style.transform = shape.transform; shapeEl.style.borderColor = shape.borderColor || '#667eea'; shapeEl.style.borderStyle = shape.borderStyle || 'solid'; } else { shapeEl.style.width = shape.width; shapeEl.style.height = shape.height; shapeEl.style.borderColor = shape.borderColor || '#667eea'; shapeEl.style.borderStyle = shape.borderStyle || 'solid'; } // SINGLE combined click and drag handler shapeEl.addEventListener('click', (e) => { console.log('Shape clicked!', state.isDrawingMode, state.currentDrawingTool); e.stopPropagation(); if (state.isDrawingMode) { if (state.currentDrawingTool === 'select') { console.log('Select tool active, selecting shape:', shape.id); state.selectedShapeId = shape.id; document.querySelectorAll('.cm-drawing-shape').forEach(s => s.classList.remove('selected')); shapeEl.classList.add('selected'); } else if (state.currentDrawingTool === 'delete') { state.shapes = state.shapes.filter(s => s.id !== shape.id); saveData(); renderShapes(); } } }); // Drag handler for selected shapes shapeEl.addEventListener('mousedown', (e) => { if (state.isDrawingMode && state.currentDrawingTool === 'select' && shapeEl.classList.contains('selected')) { e.stopPropagation(); const startX = e.clientX - parseInt(shapeEl.style.left); const startY = e.clientY - parseInt(shapeEl.style.top); function onMouseMove(ev) { shapeEl.style.left = (ev.clientX - startX) + 'px'; shapeEl.style.top = (ev.clientY - startY) + 'px'; } function onMouseUp() { shape.x = shapeEl.style.left; shape.y = shapeEl.style.top; saveData(); document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); } }); canvas.appendChild(shapeEl); }); } function renderPaths() { const svgCanvas = document.getElementById('svg-canvas'); if (!svgCanvas) { console.error('SVG Canvas not found!'); return; } console.log('=== RENDER PATHS START ==='); console.log('Total paths:', state.paths.length); console.log('Drawing mode:', state.isDrawingMode); console.log('Current tool:', state.currentDrawingTool); // Clear existing paths svgCanvas.innerHTML = ''; // Set pointer-events based on tool if (state.isDrawingMode) { if (state.currentDrawingTool === 'pen') { svgCanvas.style.pointerEvents = 'none'; console.log('SVG Canvas pointer-events: none (pen tool)'); } else if (['select', 'delete'].includes(state.currentDrawingTool)) { svgCanvas.style.pointerEvents = 'auto'; console.log('SVG Canvas pointer-events: auto (select/delete)'); } } else { svgCanvas.style.pointerEvents = 'none'; console.log('SVG Canvas pointer-events: none (not drawing mode)'); } state.paths.forEach((pathData, index) => { console.log(`Creating path ${index}:`, pathData.id); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('fill', 'none'); path.setAttribute('stroke', pathData.color); path.setAttribute('stroke-width', pathData.strokeWidth || '3'); path.setAttribute('d', pathData.path); path.setAttribute('data-path-id', pathData.id); path.style.cursor = 'pointer'; path.style.pointerEvents = 'visibleStroke'; console.log(`Path ${index} pointer-events:`, path.style.pointerEvents); // Add click handler for select/delete path.addEventListener('click', (e) => { console.log('*** PATH CLICKED ***'); console.log('Path ID:', pathData.id); console.log('Current tool:', state.currentDrawingTool); console.log('Is drawing mode:', state.isDrawingMode); e.stopPropagation(); if (state.isDrawingMode) { if (state.currentDrawingTool === 'select') { console.log('SELECTING path:', pathData.id); // Remove previous selection svgCanvas.querySelectorAll('path').forEach(p => { p.classList.remove('selected'); }); // Add selection to clicked path path.classList.add('selected'); console.log('Path selected successfully'); } else if (state.currentDrawingTool === 'delete') { console.log('DELETING path:', pathData.id); state.paths = state.paths.filter(p => p.id !== pathData.id); saveData(); renderPaths(); console.log('Path deleted successfully'); } else { console.log('Tool not select or delete:', state.currentDrawingTool); } } else { console.log('Not in drawing mode - ignoring click'); } }); // Add drag functionality for selected paths path.addEventListener('mousedown', (e) => { if (state.isDrawingMode && state.currentDrawingTool === 'select' && path.classList.contains('selected')) { e.stopPropagation(); console.log('*** STARTING DRAG ***'); console.log('Path ID:', pathData.id); console.log('Start position:', e.clientX, e.clientY); const startX = e.clientX; const startY = e.clientY; // Parse the original path data const originalPath = pathData.path; console.log('Original path:', originalPath.substring(0, 50) + '...'); function onMouseMove(ev) { const dx = ev.clientX - startX; const dy = ev.clientY - startY; // Transform the path by translating all coordinates const transformedPath = originalPath.replace(/([ML])\s*(\d+)\s+(\d+)/g, (match, cmd, x, y) => { const newX = parseInt(x) + dx; const newY = parseInt(y) + dy; return `${cmd} ${newX} ${newY}`; }); path.setAttribute('d', transformedPath); console.log('Dragging - offset:', dx, dy); } function onMouseUp(ev) { const dx = ev.clientX - startX; const dy = ev.clientY - startY; console.log('*** DRAG ENDED ***'); console.log('Final offset:', dx, dy); // Save the new path position pathData.path = originalPath.replace(/([ML])\s*(\d+)\s+(\d+)/g, (match, cmd, x, y) => { const newX = parseInt(x) + dx; const newY = parseInt(y) + dy; return `${cmd} ${newX} ${newY}`; }); saveData(); console.log('Path moved and saved'); console.log('New path:', pathData.path.substring(0, 50) + '...'); document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); } }); svgCanvas.appendChild(path); console.log(`Path ${index} added to SVG canvas with click and drag handlers`); }); console.log('=== RENDER PATHS END ==='); } //end of renderPaths() function function updateMarkersList(markersToShow = state.markers) { const container = document.getElementById('markers-container'); if (!container) return; if (markersToShow.length === 0) { container.innerHTML = '<p style="text-align:center; color:#a0aec0;">No markers yet!</p>'; document.getElementById('markers-count').textContent = '0'; return; } container.innerHTML = markersToShow.map(marker => ` <div class="cm-marker-item" data-marker-id="${marker.id}"> <div style="font-size: 28px; margin-right: 16px;">${marker.icon}</div> <div style="flex: 1;"> <div style="font-weight: 600; color: var(--text-primary);">${marker.title}</div> <div style="font-size: 12px; color: var(--text-secondary);">${marker.x}, ${marker.y}</div> </div> <div style="display: flex; gap: 8px;"> <button class="cm-btn cm-btn-secondary marker-edit-btn" data-id="${marker.id}" style="padding: 8px 12px; font-size: 12px;">✏️</button> <button class="cm-btn cm-btn-danger marker-delete-btn" data-id="${marker.id}" style="padding: 8px 12px; font-size: 12px;">🗑️</button> </div> </div> `).join(''); document.getElementById('markers-count').textContent = markersToShow.length.toString(); // Attach event listeners after rendering container.querySelectorAll('.marker-edit-btn').forEach(btn => { btn.addEventListener('click', () => editMarker(btn.dataset.id)); }); container.querySelectorAll('.marker-delete-btn').forEach(btn => { btn.addEventListener('click', () => deleteMarker(btn.dataset.id)); }); } // ======================================== // Drawing Functions - FIXED WITH SELECT/DELETE // ======================================== function initDrawing() { const canvas = document.getElementById('drawing-canvas'); const svgCanvas = document.getElementById('svg-canvas'); let isDrawing = false; let startX, startY; let currentShape = null; let currentPath = null; const handleMouseDown = (e) => { if (!state.isDrawingMode) return; // Don't create new shapes for select/delete/clear tools if (['select', 'delete', 'clear'].includes(state.currentDrawingTool)) return; isDrawing = true; startX = e.clientX; startY = e.clientY; if (state.currentDrawingTool === 'pen') { console.log('Starting pen drawing'); // Start pen drawing with SVG path currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); currentPath.setAttribute('fill', 'none'); currentPath.setAttribute('stroke', document.getElementById('draw-color').value); currentPath.setAttribute('stroke-width', document.getElementById('draw-thickness').value); currentPath.setAttribute('d', `M ${startX} ${startY}`); svgCanvas.appendChild(currentPath); } else if (state.currentDrawingTool === 'text') { const text = prompt('Enter text:'); if (text) { const shape = { id: Date.now().toString(), type: 'text', text, x: startX + 'px', y: startY + 'px', borderColor: document.getElementById('draw-color').value, fontSize: document.getElementById('text-size')?.value || 16, bold: document.getElementById('text-bold')?.checked || false, italic: document.getElementById('text-italic')?.checked || false, fontFamily: 'Inter, sans-serif' }; state.shapes.push(shape); saveData(); renderShapes(); } isDrawing = false; } else { // Create shape element currentShape = document.createElement('div'); currentShape.className = `cm-drawing-shape ${state.currentDrawingTool}`; currentShape.style.left = startX + 'px'; currentShape.style.top = startY + 'px'; currentShape.style.borderColor = document.getElementById('draw-color').value; currentShape.style.borderStyle = document.getElementById('draw-style').value; if (state.currentDrawingTool === 'line' || state.currentDrawingTool === 'arrow') { currentShape.style.width = '0px'; currentShape.style.transform = 'rotate(0deg)'; } else { currentShape.style.width = '0px'; currentShape.style.height = '0px'; } canvas.appendChild(currentShape); } }; const handleMouseMove = (e) => { if (!isDrawing) return; if (state.currentDrawingTool === 'pen' && currentPath) { // Continue pen path const d = currentPath.getAttribute('d'); currentPath.setAttribute('d', `${d} L ${e.clientX} ${e.clientY}`); } else if ((state.currentDrawingTool === 'line' || state.currentDrawingTool === 'arrow') && currentShape) { // Calculate line angle and length const dx = e.clientX - startX; const dy = e.clientY - startY; const length = Math.sqrt(dx * dx + dy * dy); const angle = Math.atan2(dy, dx) * 180 / Math.PI; currentShape.style.width = length + 'px'; currentShape.style.transform = `rotate(${angle}deg)`; } else if (currentShape) { // Rectangle or circle const width = Math.abs(e.clientX - startX); const height = Math.abs(e.clientY - startY); currentShape.style.width = width + 'px'; currentShape.style.height = height + 'px'; currentShape.style.left = Math.min(e.clientX, startX) + 'px'; currentShape.style.top = Math.min(e.clientY, startY) + 'px'; } }; const handleMouseUp = () => { if (!isDrawing) return; isDrawing = false; if (state.currentDrawingTool === 'pen' && currentPath) { // Save pen path const pathData = currentPath.getAttribute('d'); const pathId = Date.now().toString(); console.log('Saving pen path:', pathData); // Add an ID to the path element so we can reference it currentPath.setAttribute('data-path-id', pathId); currentPath.style.cursor = 'pointer'; state.paths.push({ id: Date.now().toString(), path: pathData, color: currentPath.getAttribute('stroke'), strokeWidth: currentPath.getAttribute('stroke-width') }); console.log('Paths after save:', state.paths.length); saveData(); renderPaths(); currentPath = null; const svgCanvas = document.getElementById('svg-canvas'); if (svgCanvas && state.isDrawingMode) { svgCanvas.style.pointerEvents = 'auto'; } } else if (currentShape) { // Save shape const shape = { id: Date.now().toString(), type: state.currentDrawingTool, x: currentShape.style.left, y: currentShape.style.top, width: currentShape.style.width, height: currentShape.style.height, transform: currentShape.style.transform, borderColor: document.getElementById('draw-color').value, borderStyle: document.getElementById('draw-style').value }; state.shapes.push(shape); saveData(); renderShapes(); currentShape = null; } }; canvas.addEventListener('mousedown', handleMouseDown); svgCanvas.addEventListener('mousedown', handleMouseDown); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); } function selectDrawingTool(tool) { state.currentDrawingTool = tool; document.querySelectorAll('.cm-drawing-tool').forEach(t => { t.classList.toggle('active', t.dataset.tool === tool); }); const canvas = document.getElementById('drawing-canvas'); if (canvas) { if (tool === 'select' || tool === 'delete') { canvas.style.pointerEvents = 'none'; // Let clicks through to SVG } else { canvas.style.pointerEvents = state.isDrawingMode ? 'auto' : 'none'; } if (tool === 'select') { canvas.style.cursor = 'pointer'; } else if (tool === 'delete') { canvas.style.cursor = 'not-allowed'; } else { canvas.style.cursor = 'crosshair'; } } // ADDED: Re-render paths to update pointer-events renderPaths(); } // ======================================== // Drag Functions // ======================================== function startDrag(e, type) { if (type === 'marker' && !state.isEditMode) return; state.isDragging = true; state.currentDragItem = e.target; state.currentDragItem.classList.add('dragging'); const rect = state.currentDragItem.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const offsetY = e.clientY - rect.top; function onMouseMove(e) { if (!state.isDragging) return; const x = ((e.clientX - offsetX) / window.innerWidth) * 100; const y = ((e.clientY - offsetY) / window.innerHeight) * 100; state.currentDragItem.style.left = `${Math.max(0, Math.min(100, x))}%`; state.currentDragItem.style.top = `${Math.max(0, Math.min(100, y))}%`; } function onMouseUp() { if (!state.isDragging) return; state.isDragging = false; state.currentDragItem.classList.remove('dragging'); const id = state.currentDragItem.dataset.markerId; const marker = state.markers.find(m => m.id === id); if (marker) { marker.x = state.currentDragItem.style.left; marker.y = state.currentDragItem.style.top; saveData(); updateMarkersList(); } state.currentDragItem = null; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); } // ======================================== // REPLACED Tooltip Functions // ======================================== // keep a global handler references so we can remove them later window._cmTooltipOutsideHandler = null; window._cmTooltipCloseHandler = null; function showTooltip(e, marker, isPersistent = false) { if (state.isDragging) return; state.tooltip.innerHTML = ` ${isPersistent ? '<div class="cm-tooltip-close" id="cm-tooltip-close">✕</div>' : ''} <div style="font-weight: 600; color: #667eea; margin-bottom: 8px; font-size: 16px;">${marker.title}</div> <div style="margin-bottom: 8px;">${marker.description || 'No description'}</div> ${marker.linkUrl ? `<div style="margin-top: 8px;"><a href="${marker.linkUrl}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600;">🔗 ${marker.linkTitle || 'View Link'}</a></div>` : ''} ${marker.imageUrl ? `<div style="margin-top: 8px;"><img src="${marker.imageUrl}" style="max-width: 100%; border-radius: 8px;"></div>` : ''} `; state.tooltip.classList.add('active'); if (isPersistent) { state.tooltip.classList.add('persistent'); state.tooltip.style.pointerEvents = 'auto'; // attach close handler to the close button (safe: remove previous) const closeBtn = document.getElementById('cm-tooltip-close'); if (closeBtn) { if (window._cmTooltipCloseHandler) { closeBtn.removeEventListener('click', window._cmTooltipCloseHandler); window._cmTooltipCloseHandler = null; } window._cmTooltipCloseHandler = function(ev) { ev.stopPropagation(); hideTooltip(); }; closeBtn.addEventListener('click', window._cmTooltipCloseHandler); } // click outside to close: attach once (and ensure we clean it later) if (window._cmTooltipOutsideHandler) { document.removeEventListener('click', window._cmTooltipOutsideHandler); window._cmTooltipOutsideHandler = null; } window._cmTooltipOutsideHandler = function(evt) { // if click target is outside tooltip, hide it if (!state.tooltip.contains(evt.target)) { hideTooltip(); } }; // delay adding to allow the current click (that opened the tooltip) not to close it immediately setTimeout(() => document.addEventListener('click', window._cmTooltipOutsideHandler), 0); } else { state.tooltip.style.pointerEvents = 'none'; } const tooltipWidth = 350; const tooltipHeight = 200; const padding = 15; let x = e.pageX + padding; let y = e.pageY + padding; if (x + tooltipWidth > window.innerWidth) { x = e.pageX - tooltipWidth - padding; } if (y + tooltipHeight > window.innerHeight) { y = e.pageY - tooltipHeight - padding; } if (x < 0) x = padding; if (y < 0) y = padding; state.tooltip.style.left = `${x}px`; state.tooltip.style.top = `${y}px`; } function hideTooltip() { if (state.tooltip) { state.tooltip.classList.remove('active', 'persistent'); state.tooltip.style.pointerEvents = 'none'; } if (window._cmTooltipOutsideHandler) { document.removeEventListener('click', window._cmTooltipOutsideHandler); window._cmTooltipOutsideHandler = null; } // remove tooltip close handler if any const closeBtn = document.getElementById('cm-tooltip-close'); if (closeBtn && window._cmTooltipCloseHandler) { closeBtn.removeEventListener('click', window._cmTooltipCloseHandler); window._cmTooltipCloseHandler = null; } } // ======================================== // Note Taking Functions // ======================================== function applyFormat(format) { const selection = window.getSelection(); if (!selection.rangeCount) return; switch(format) { case 'bold': document.execCommand('bold'); break; case 'italic': document.execCommand('italic'); break; case 'underline': document.execCommand('underline'); break; case 'list': document.execCommand('insertUnorderedList'); break; case 'link': { const url = prompt('Enter URL:'); if (url) document.execCommand('createLink', false, url); break; } } } function saveNote() { const content = document.getElementById('note-content').innerHTML; const note = { id: Date.now().toString(), content, website: WEBSITE_HOST, created: new Date().toISOString() }; const notesKey = `custom_markers_notes_${WEBSITE_HOST}`; console.log('Saving note with key:', notesKey); console.log('Note content:', content); let notes = JSON.parse(localStorage.getItem(notesKey) || '[]'); console.log('Existing notes count:', notes.length); notes.push(note); localStorage.setItem(notesKey, JSON.stringify(notes)); // Verify save const savedNotes = JSON.parse(localStorage.getItem(notesKey)); console.log('Notes after save:', savedNotes.length); console.log('Latest note content:', savedNotes[savedNotes.length - 1].content); showMessage('Note saved!', 'success'); sendWebhook('note_saved', note); } function loadNotes() { const notesKey = `custom_markers_notes_${WEBSITE_HOST}`; console.log('Loading notes with key:', notesKey); const notesString = localStorage.getItem(notesKey); console.log('Raw notes from storage:', notesString); const notes = JSON.parse(notesString || '[]'); console.log('Parsed notes count:', notes.length); if (notes.length > 0) { // Load the most recent note const latestNote = notes[notes.length - 1]; console.log('Loading latest note:', latestNote); // Wait for DOM to be ready setTimeout(() => { const noteContent = document.getElementById('note-content'); if (noteContent) { noteContent.innerHTML = latestNote.content; console.log('Note content loaded into editor'); } else { console.error('Note content element not found!'); } }, 100); } else { console.log('No notes found to load'); } } // ======================================== // Register Menu Command // ======================================== GM_registerMenuCommand("🎯 Activate Markers Pro", init); // ======================================== // Auto-initialization // ======================================== const autoInitPatterns = [ 'mapgenie.io', 'maps.google', 'google.com/maps', 'openstreetmap.org', 'bing.com/maps', 'here.com', 'waze.com', 'reddit.com/r/gaming', 'github.com', 'stackoverflow.com' ]; const shouldAutoInit = autoInitPatterns.some(pattern => window.location.href.includes(pattern) ); if (shouldAutoInit) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { setTimeout(init, 1000); } } else { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', showActivationButton); } else { setTimeout(showActivationButton, 500); } } })();
