| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Data Insights Explorer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f5f7fa; |
| color: #2d3748; |
| } |
| |
| .data-window { |
| transition: all 0.3s ease; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| .data-window:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .prompt-card { |
| transition: all 0.2s ease; |
| } |
| |
| .prompt-card:hover { |
| transform: scale(1.03); |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .window-tabs { |
| border-bottom: 2px solid #e2e8f0; |
| } |
| |
| .window-tab { |
| transition: all 0.2s ease; |
| } |
| |
| .window-tab.active { |
| border-bottom: 3px solid #667eea; |
| color: #667eea; |
| font-weight: 500; |
| } |
| |
| .window-tab:hover:not(.active) { |
| border-bottom: 3px solid #a0aec0; |
| color: #4a5568; |
| } |
| |
| .typewriter { |
| overflow: hidden; |
| border-right: 2px solid #667eea; |
| white-space: nowrap; |
| margin: 0 auto; |
| letter-spacing: 1px; |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #667eea } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .slide-fade-enter-active { |
| transition: all 0.3s ease-out; |
| } |
| |
| .slide-fade-leave-active { |
| transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); |
| } |
| |
| .slide-fade-enter-from, |
| .slide-fade-leave-to { |
| transform: translateX(20px); |
| opacity: 0; |
| } |
| |
| .modal-overlay { |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| .modal-container { |
| max-height: 90vh; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div class="flex flex-col h-screen"> |
| |
| <header class="gradient-bg text-white p-4 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-chart-network text-3xl"></i> |
| <h1 class="text-2xl font-bold">Data Insights Explorer</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative group"> |
| <button id="clientSwitcher" class="flex items-center space-x-2 bg-white/20 px-3 py-1 rounded-full hover:bg-white/30 transition"> |
| <i class="fas fa-building"></i> |
| <span id="currentClientName">Select Client</span> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <div id="clientDropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-50"> |
| <div class="p-3 border-b"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-gray-700">Clients & Properties</h3> |
| <button onclick="showAddClientModal()" class="text-indigo-600 hover:text-indigo-800 text-sm flex items-center"> |
| <i class="fas fa-plus mr-1"></i> Add |
| </button> |
| </div> |
| </div> |
| <div id="clientList" class="max-h-60 overflow-y-auto"> |
| |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center space-x-2 bg-white/20 px-3 py-1 rounded-full"> |
| <i class="fas fa-user-circle"></i> |
| <span>Account</span> |
| </div> |
| <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-indigo-50 transition"> |
| <i class="fas fa-sign-out-alt mr-2"></i>Logout |
| </button> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main class="flex-1 container mx-auto p-4 grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-1 space-y-4"> |
| <div class="bg-white rounded-xl p-4 shadow-md"> |
| <h2 class="text-lg font-semibold mb-3 text-indigo-700 flex items-center"> |
| <i class="fas fa-bolt mr-2"></i> Quick Insights |
| </h2> |
| <p class="text-sm text-gray-600 mb-4">Click any prompt to get instant analysis</p> |
| |
| <div class="grid grid-cols-1 gap-3"> |
| <div class="prompt-card bg-indigo-50 p-3 rounded-lg cursor-pointer hover:bg-indigo-100" onclick="runPrompt('summary')"> |
| <div class="flex items-center"> |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-chart-pie text-indigo-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Performance Summary</h3> |
| <p class="text-xs text-gray-600">Get an overview of key metrics</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="prompt-card bg-green-50 p-3 rounded-lg cursor-pointer hover:bg-green-100" onclick="runPrompt('traffic')"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-users text-green-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Traffic Sources</h3> |
| <p class="text-xs text-gray-600">Analyze where visitors come from</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="prompt-card bg-yellow-50 p-3 rounded-lg cursor-pointer hover:bg-yellow-100" onclick="runPrompt('keywords')"> |
| <div class="flex items-center"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-key text-yellow-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Top Keywords</h3> |
| <p class="text-xs text-gray-600">See what's driving search traffic</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="prompt-card bg-red-50 p-3 rounded-lg cursor-pointer hover:bg-red-100" onclick="runPrompt('issues')"> |
| <div class="flex items-center"> |
| <div class="bg-red-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-exclamation-triangle text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Critical Issues</h3> |
| <p class="text-xs text-gray-600">Identify urgent problems</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="prompt-card bg-purple-50 p-3 rounded-lg cursor-pointer hover:bg-purple-100" onclick="runPrompt('comparison')"> |
| <div class="flex items-center"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-balance-scale text-purple-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Period Comparison</h3> |
| <p class="text-xs text-gray-600">Compare performance over time</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="prompt-card bg-blue-50 p-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="runPrompt('recommendations')"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Optimization Tips</h3> |
| <p class="text-xs text-gray-600">Get actionable recommendations</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 shadow-md"> |
| <h2 class="text-lg font-semibold mb-3 text-indigo-700 flex items-center"> |
| <i class="fas fa-history mr-2"></i> Recent Queries |
| </h2> |
| <div class="space-y-2"> |
| <div class="text-sm p-2 hover:bg-gray-50 rounded cursor-pointer" onclick="runPrompt('traffic last week')"> |
| <div class="flex justify-between"> |
| <span>Traffic last week</span> |
| <span class="text-gray-400">2h ago</span> |
| </div> |
| </div> |
| <div class="text-sm p-2 hover:bg-gray-50 rounded cursor-pointer" onclick="runPrompt('top pages')"> |
| <div class="flex justify-between"> |
| <span>Top performing pages</span> |
| <span class="text-gray-400">1d ago</span> |
| </div> |
| </div> |
| <div class="text-sm p-2 hover:bg-gray-50 rounded cursor-pointer" onclick="runPrompt('bounce rate')"> |
| <div class="flex justify-between"> |
| <span>Bounce rate analysis</span> |
| <span class="text-gray-400">3d ago</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-3 space-y-6"> |
| |
| <div id="clientInfoBar" class="bg-white rounded-xl p-4 shadow-md hidden"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h2 class="font-bold text-lg" id="activeClientTitle">Client Name</h2> |
| <p class="text-sm text-gray-600" id="activeClientProperties">Properties: 0</p> |
| </div> |
| <div class="flex space-x-3"> |
| <button onclick="showEditClientModal()" class="text-indigo-600 hover:text-indigo-800 flex items-center text-sm"> |
| <i class="fas fa-edit mr-1"></i> Edit |
| </button> |
| <button onclick="showAddPropertyModal()" class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm hover:bg-indigo-700 flex items-center"> |
| <i class="fas fa-plus mr-1"></i> Add Property |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-4 shadow-md"> |
| <div class="flex items-center space-x-3"> |
| <div class="flex-1 relative"> |
| <input type="text" id="queryInput" placeholder="Ask about your analytics data (e.g. 'Show traffic trends for the past month')" |
| class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <button onclick="submitQuery()" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <button onclick="voiceInput()" class="bg-indigo-100 text-indigo-700 p-3 rounded-full hover:bg-indigo-200 transition"> |
| <i class="fas fa-microphone"></i> |
| </button> |
| </div> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <span class="text-xs text-gray-500">Try:</span> |
| <span class="text-xs text-indigo-600 hover:underline cursor-pointer" onclick="runPrompt('compare mobile vs desktop conversions')">compare mobile vs desktop conversions</span> |
| <span class="text-xs text-indigo-600 hover:underline cursor-pointer" onclick="runPrompt('show top exit pages')">show top exit pages</span> |
| <span class="text-xs text-indigo-600 hover:underline cursor-pointer" onclick="runPrompt('analyze click-through rates')">analyze click-through rates</span> |
| </div> |
| </div> |
| |
| |
| <div id="windowsContainer" class="space-y-6"> |
| |
| <div class="data-window bg-white rounded-xl overflow-hidden"> |
| <div class="window-tabs flex border-b border-gray-200"> |
| <div class="window-tab active px-4 py-3 font-medium">Welcome</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-robot text-indigo-600 text-2xl"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-800">Hello there! 👋</h2> |
| <p class="text-gray-600">I'm your Data Insights Assistant, ready to help you explore your Google Analytics and Search Console data.</p> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-indigo-50 p-4 rounded-lg"> |
| <h3 class="font-semibold text-indigo-700 mb-2 flex items-center"> |
| <i class="fas fa-question-circle mr-2"></i> How to use |
| </h3> |
| <ul class="text-sm space-y-2 text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> |
| <span>Click any quick insight button to get started</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> |
| <span>Type your question in natural language</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> |
| <span>Explore multiple data views simultaneously</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <h3 class="font-semibold text-green-700 mb-2 flex items-center"> |
| <i class="fas fa-lightbulb mr-2"></i> Try asking |
| </h3> |
| <ul class="text-sm space-y-2 text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-arrow-right text-green-500 mt-1 mr-2"></i> |
| <span class="cursor-pointer hover:underline" onclick="runPrompt('show me traffic sources for last month')">"Show me traffic sources for last month"</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-arrow-right text-green-500 mt-1 mr-2"></i> |
| <span class="cursor-pointer hover:underline" onclick="runPrompt('compare mobile vs desktop performance')">"Compare mobile vs desktop performance"</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-arrow-right text-green-500 mt-1 mr-2"></i> |
| <span class="cursor-pointer hover:underline" onclick="runPrompt('what are my top performing pages')">"What are my top performing pages?"</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="mt-6 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 rounded-lg border border-indigo-100"> |
| <div class="flex items-center"> |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-star text-indigo-600"></i> |
| </div> |
| <h3 class="font-semibold">Pro Tip</h3> |
| </div> |
| <p class="mt-2 text-sm text-gray-700">You can ask follow-up questions on any result by clicking the "Ask More" button that appears in each data window. This maintains context for deeper analysis.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="sampleWindow" class="data-window bg-white rounded-xl overflow-hidden hidden"> |
| <div class="window-tabs flex border-b border-gray-200"> |
| <div class="window-tab active px-4 py-3 font-medium">Analysis</div> |
| <div class="window-tab px-4 py-3 font-medium">Data</div> |
| <div class="window-tab px-4 py-3 font-medium">Details</div> |
| <div class="flex-1 flex justify-end items-center pr-3"> |
| <button class="text-gray-400 hover:text-gray-600 p-1"> |
| <i class="fas fa-expand"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-600 p-1 ml-1"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h3 class="font-semibold text-lg" id="windowTitle">Sample Analysis</h3> |
| <p class="text-sm text-gray-500" id="windowSubtitle">Generated just now</p> |
| </div> |
| <button class="bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full text-sm hover:bg-indigo-100 flex items-center"> |
| <i class="fas fa-comment-dots mr-1"></i> Ask More |
| </button> |
| </div> |
| |
| <div class="window-content"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="addClientModal" class="fixed inset-0 z-50 flex items-center justify-center hidden"> |
| <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div> |
| <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"> |
| <div class="modal-content py-4 text-left px-6"> |
| <div class="flex justify-between items-center pb-3"> |
| <p class="text-2xl font-bold">Add New Client</p> |
| <button onclick="hideModal('addClientModal')" class="modal-close cursor-pointer z-50"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="clientName"> |
| Client Name |
| </label> |
| <input type="text" id="clientName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="clientIndustry"> |
| Industry |
| </label> |
| <input type="text" id="clientIndustry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="clientNotes"> |
| Notes |
| </label> |
| <textarea id="clientNotes" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea> |
| </div> |
| </div> |
| <div class="flex justify-end pt-4"> |
| <button onclick="hideModal('addClientModal')" class="px-4 py-2 text-gray-600 rounded mr-2 hover:bg-gray-100"> |
| Cancel |
| </button> |
| <button onclick="addNewClient()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"> |
| Save Client |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="editClientModal" class="fixed inset-0 z-50 flex items-center justify-center hidden"> |
| <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div> |
| <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"> |
| <div class="modal-content py-4 text-left px-6"> |
| <div class="flex justify-between items-center pb-3"> |
| <p class="text-2xl font-bold">Edit Client</p> |
| <button onclick="hideModal('editClientModal')" class="modal-close cursor-pointer z-50"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="editClientName"> |
| Client Name |
| </label> |
| <input type="text" id="editClientName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="editClientIndustry"> |
| Industry |
| </label> |
| <input type="text" id="editClientIndustry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="editClientNotes"> |
| Notes |
| </label> |
| <textarea id="editClientNotes" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea> |
| </div> |
| </div> |
| <div class="flex justify-end pt-4"> |
| <button onclick="hideModal('editClientModal')" class="px-4 py-2 text-gray-600 rounded mr-2 hover:bg-gray-100"> |
| Cancel |
| </button> |
| <button onclick="updateClient()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"> |
| Save Changes |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="addPropertyModal" class="fixed inset-0 z-50 flex items-center justify-center hidden"> |
| <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div> |
| <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"> |
| <div class="modal-content py-4 text-left px-6"> |
| <div class="flex justify-between items-center pb-3"> |
| <p class="text-2xl font-bold">Add New Property</p> |
| <button onclick="hideModal('addPropertyModal')" class="modal-close cursor-pointer z-50"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="propertyName"> |
| Property Name |
| </label> |
| <input type="text" id="propertyName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="propertyUrl"> |
| Website URL |
| </label> |
| <input type="url" id="propertyUrl" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="propertyType"> |
| Property Type |
| </label> |
| <select id="propertyType" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| <option value="website">Website</option> |
| <option value="mobile-app">Mobile App</option> |
| <option value="ecommerce">E-commerce</option> |
| <option value="blog">Blog</option> |
| <option value="saas">SaaS Platform</option> |
| </select> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="gaPropertyId"> |
| GA Property ID |
| </label> |
| <input type="text" id="gaPropertyId" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="gscPropertyId"> |
| GSC Property ID |
| </label> |
| <input type="text" id="gscPropertyId" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-end pt-4"> |
| <button onclick="hideModal('addPropertyModal')" class="px-4 py-2 text-gray-600 rounded mr-2 hover:bg-gray-100"> |
| Cancel |
| </button> |
| <button onclick="addNewProperty()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"> |
| Add Property |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| // Client and property management |
| let clients = [ |
| { |
| id: 'client1', |
| name: 'Acme Corp', |
| industry: 'E-commerce', |
| notes: 'Primary client, focus on conversion optimization', |
| properties: [ |
| { |
| id: 'prop1', |
| name: 'Main Website', |
| url: 'https://acme.com', |
| type: 'ecommerce', |
| gaId: 'UA-12345678-1', |
| gscId: 'https://acme.com' |
| }, |
| { |
| id: 'prop2', |
| name: 'Blog', |
| url: 'https://blog.acme.com', |
| type: 'blog', |
| gaId: 'UA-12345678-2', |
| gscId: 'https://blog.acme.com' |
| } |
| ] |
| }, |
| { |
| id: 'client2', |
| name: 'TechStart', |
| industry: 'SaaS', |
| notes: 'Early stage startup, tracking growth metrics', |
| properties: [ |
| { |
| id: 'prop3', |
| name: 'Web App', |
| url: 'https://app.techstart.com', |
| type: 'saas', |
| gaId: 'UA-87654321-1', |
| gscId: 'https://app.techstart.com' |
| } |
| ] |
| } |
| ]; |
| |
| let currentClientId = null; |
| let currentPropertyId = null; |
| |
| // Initialize the app |
| document.addEventListener('DOMContentLoaded', function() { |
| // Set up event listeners for window tabs |
| document.querySelectorAll('.window-tab').forEach(tab => { |
| tab.addEventListener('click', function() { |
| const parentWindow = this.closest('.data-window'); |
| parentWindow.querySelectorAll('.window-tab').forEach(t => t.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| // Client switcher dropdown |
| document.getElementById('clientSwitcher').addEventListener('click', function(e) { |
| e.stopPropagation(); |
| const dropdown = document.getElementById('clientDropdown'); |
| dropdown.classList.toggle('hidden'); |
| }); |
| |
| // Close dropdown when clicking outside |
| document.addEventListener('click', function() { |
| document.getElementById('clientDropdown').classList.add('hidden'); |
| }); |
| |
| // Initialize client list |
| renderClientList(); |
| |
| // Select first client by default |
| if (clients.length > 0) { |
| selectClient(clients[0].id); |
| } |
| }); |
| |
| // Render client list in dropdown |
| function renderClientList() { |
| const clientList = document.getElementById('clientList'); |
| clientList.innerHTML = ''; |
| |
| if (clients.length === 0) { |
| clientList.innerHTML = '<div class="p-3 text-center text-gray-500">No clients added yet</div>'; |
| return; |
| } |
| |
| clients.forEach(client => { |
| const clientItem = document.createElement('div'); |
| clientItem.className = 'border-b border-gray-200 last:border-b-0'; |
| |
| clientItem.innerHTML = ` |
| <div class="p-3 hover:bg-gray-50 cursor-pointer" onclick="selectClient('${client.id}')"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h4 class="font-medium">${client.name}</h4> |
| <p class="text-xs text-gray-500">${client.industry} • ${client.properties.length} properties</p> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400 text-xs"></i> |
| </div> |
| </div> |
| <div id="properties-${client.id}" class="hidden bg-gray-50 pl-4"> |
| ${client.properties.map(prop => ` |
| <div class="p-2 hover:bg-gray-100 cursor-pointer flex items-center" onclick="selectProperty('${client.id}', '${prop.id}')"> |
| <i class="fas fa-globe mr-2 text-gray-500 text-sm"></i> |
| <span>${prop.name}</span> |
| ${currentPropertyId === prop.id ? '<i class="fas fa-check ml-2 text-indigo-600 text-xs"></i>' : ''} |
| </div> |
| `).join('')} |
| <div class="p-2 hover:bg-gray-100 cursor-pointer text-indigo-600 text-sm flex items-center" onclick="showAddPropertyModal('${client.id}')"> |
| <i class="fas fa-plus mr-2"></i> |
| <span>Add Property</span> |
| </div> |
| </div> |
| `; |
| |
| clientList.appendChild(clientItem); |
| }); |
| } |
| |
| // Select a client |
| function selectClient(clientId) { |
| currentClientId = clientId; |
| const client = clients.find(c => c.id === clientId); |
| |
| // Update UI |
| document.getElementById('currentClientName').textContent = client.name; |
| document.getElementById('clientInfoBar').classList.remove('hidden'); |
| document.getElementById('activeClientTitle').textContent = client.name; |
| document.getElementById('activeClientProperties').textContent = `Properties: ${client.properties.length}`; |
| |
| // Show properties for this client in dropdown |
| const propertyContainer = document.getElementById(`properties-${clientId}`); |
| propertyContainer.classList.toggle('hidden'); |
| |
| // Auto-select first property if none selected |
| if (client.properties.length > 0 && !currentPropertyId) { |
| selectProperty(clientId, client.properties[0].id); |
| } |
| |
| // Close dropdown |
| document.getElementById('clientDropdown').classList.add('hidden'); |
| |
| // Update edit modal fields |
| document.getElementById('editClientName').value = client.name; |
| document.getElementById('editClientIndustry').value = client.industry; |
| document.getElementById('editClientNotes').value = client.notes; |
| } |
| |
| // Select a property |
| function selectProperty(clientId, propertyId) { |
| currentPropertyId = propertyId; |
| |
| // Update UI to show selected property |
| document.querySelectorAll('[id^="properties-"]').forEach(el => { |
| el.querySelectorAll('.fa-check').forEach(icon => { |
| icon.classList.add('hidden'); |
| }); |
| }); |
| |
| const checkIcon = document.querySelector(`[onclick="selectProperty('${clientId}', '${propertyId}')"] .fa-check`); |
| if (checkIcon) { |
| checkIcon.classList.remove('hidden'); |
| } |
| |
| // In a real app, you would load data for this property |
| console.log(`Selected property ${propertyId} for client ${clientId}`); |
| } |
| |
| // Show add client modal |
| function showAddClientModal() { |
| document.getElementById('addClientModal').classList.remove('hidden'); |
| document.getElementById('clientName').focus(); |
| } |
| |
| // Show edit client modal |
| function showEditClientModal() { |
| if (!currentClientId) return; |
| |
| const client = clients.find(c => c.id === currentClientId); |
| if (!client) return; |
| |
| document.getElementById('editClientName').value = client.name; |
| document.getElementById('editClientIndustry').value = client.industry; |
| document.getElementById('editClientNotes').value = client.notes; |
| |
| document.getElementById('editClientModal').classList.remove('hidden'); |
| } |
| |
| // Show add property modal |
| function showAddPropertyModal(clientId) { |
| if (clientId) { |
| // If called from a specific client's "Add Property" button |
| currentClientId = clientId; |
| } |
| |
| if (!currentClientId) { |
| alert('Please select a client first'); |
| return; |
| } |
| |
| // Clear form |
| document.getElementById('propertyName').value = ''; |
| document.getElementById('propertyUrl').value = ''; |
| document.getElementById('propertyType').value = 'website'; |
| document.getElementById('gaPropertyId').value = ''; |
| document.getElementById('gscPropertyId').value = ''; |
| |
| document.getElementById('addPropertyModal').classList.remove('hidden'); |
| document.getElementById('propertyName').focus(); |
| } |
| |
| // Hide any modal |
| function hideModal(modalId) { |
| document.getElementById(modalId).classList.add('hidden'); |
| } |
| |
| // Add new client |
| function addNewClient() { |
| const name = document.getElementById('clientName').value.trim(); |
| const industry = document.getElementById('clientIndustry').value.trim(); |
| const notes = document.getElementById('clientNotes').value.trim(); |
| |
| if (!name) { |
| alert('Client name is required'); |
| return; |
| } |
| |
| const newClient = { |
| id: 'client' + Date.now(), |
| name, |
| industry, |
| notes, |
| properties: [] |
| }; |
| |
| clients.push(newClient); |
| renderClientList(); |
| selectClient(newClient.id); |
| hideModal('addClientModal'); |
| } |
| |
| // Update client |
| function updateClient() { |
| if (!currentClientId) return; |
| |
| const name = document.getElementById('editClientName').value.trim(); |
| const industry = document.getElementById('editClientIndustry').value.trim(); |
| const notes = document.getElementById('editClientNotes').value.trim(); |
| |
| if (!name) { |
| alert('Client name is required'); |
| return; |
| } |
| |
| const clientIndex = clients.findIndex(c => c.id === currentClientId); |
| if (clientIndex !== -1) { |
| clients[clientIndex].name = name; |
| clients[clientIndex].industry = industry; |
| clients[clientIndex].notes = notes; |
| |
| // Update UI |
| document.getElementById('currentClientName').textContent = name; |
| document.getElementById('activeClientTitle').textContent = name; |
| renderClientList(); |
| hideModal('editClientModal'); |
| } |
| } |
| |
| // Add new property |
| function addNewProperty() { |
| if (!currentClientId) return; |
| |
| const name = document.getElementById('propertyName').value.trim(); |
| const url = document.getElementById('propertyUrl').value.trim(); |
| const type = document.getElementById('propertyType').value; |
| const gaId = document.getElementById('gaPropertyId').value.trim(); |
| const gscId = document.getElementById('gscPropertyId').value.trim(); |
| |
| if (!name || !url) { |
| alert('Property name and URL are required'); |
| return; |
| } |
| |
| const newProperty = { |
| id: 'prop' + Date.now(), |
| name, |
| url, |
| type, |
| gaId, |
| gscId |
| }; |
| |
| const clientIndex = clients.findIndex(c => c.id === currentClientId); |
| if (clientIndex !== -1) { |
| clients[clientIndex].properties.push(newProperty); |
| |
| // Update UI |
| document.getElementById('activeClientProperties').textContent = `Properties: ${clients[clientIndex].properties.length}`; |
| renderClientList(); |
| selectProperty(currentClientId, newProperty.id); |
| hideModal('addPropertyModal'); |
| } |
| } |
| |
| // Sample data for demonstration |
| const sampleData = { |
| summary: { |
| title: "Website Performance Summary", |
| subtitle: "Last 30 days compared to previous period", |
| content: ` |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-blue-700">Users</p> |
| <p class="text-2xl font-bold">12,453 <span class="text-sm font-normal text-green-600">(+8.2%)</span></p> |
| </div> |
| <div class="bg-blue-100 p-2 rounded-full"> |
| <i class="fas fa-users text-blue-600"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-purple-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-purple-700">Avg. Session</p> |
| <p class="text-2xl font-bold">2:45 <span class="text-sm font-normal text-red-600">(-0.5%)</span></p> |
| </div> |
| <div class="bg-purple-100 p-2 rounded-full"> |
| <i class="fas fa-clock text-purple-600"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-green-700">Conversion</p> |
| <p class="text-2xl font-bold">3.2% <span class="text-sm font-normal text-green-600">(+1.1%)</span></p> |
| </div> |
| <div class="bg-green-100 p-2 rounded-full"> |
| <i class="fas fa-percentage text-green-600"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <canvas id="summaryChart" height="200"></canvas> |
| </div> |
| |
| <div class="bg-indigo-50 p-4 rounded-lg"> |
| <h4 class="font-medium text-indigo-700 mb-2">Key Insights</h4> |
| <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700"> |
| <li>Mobile traffic increased by 12% while desktop remained stable</li> |
| <li>Blog posts about "SEO tips" drove 22% of new users</li> |
| <li>Bounce rate improved by 1.8 percentage points</li> |
| <li>Conversion rates peaked on Tuesdays and Thursdays</li> |
| </ul> |
| </div> |
| ` |
| }, |
| traffic: { |
| title: "Traffic Sources Analysis", |
| subtitle: "Breakdown by channel for the last 30 days", |
| content: ` |
| <div class="mb-6"> |
| <canvas id="trafficChart" height="200"></canvas> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">Top Sources</h4> |
| <div class="bg-white border border-gray-200 rounded-lg overflow-hidden"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Source</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Users</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">% Change</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr> |
| <td class="px-4 py-2 text-sm">Organic Search</td> |
| <td class="px-4 py-2 text-sm">6,542</td> |
| <td class="px-4 py-2 text-sm text-green-600">+12%</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-2 text-sm">Direct</td> |
| <td class="px-4 py-2 text-sm">3,210</td> |
| <td class="px-4 py-2 text-sm text-red-600">-2%</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-2 text-sm">Social</td> |
| <td class="px-4 py-2 text-sm">1,876</td> |
| <td class="px-4 py-2 text-sm text-green-600">+24%</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-2 text-sm">Referral</td> |
| <td class="px-4 py-2 text-sm">825</td> |
| <td class="px-4 py-2 text-sm text-green-600">+8%</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">Recommendations</h4> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1"> |
| <i class="fas fa-bullseye text-blue-600 text-xs"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Double down on social</p> |
| <p class="text-xs text-gray-600">Your social traffic is growing rapidly. Consider increasing your social media ad budget.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> |
| <i class="fas fa-search text-green-600 text-xs"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Optimize for search</p> |
| <p class="text-xs text-gray-600">Create more content targeting long-tail keywords in your niche.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-purple-100 p-1 rounded-full mr-3 mt-1"> |
| <i class="fas fa-link text-purple-600 text-xs"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Build partnerships</p> |
| <p class="text-xs text-gray-600">Reach out to industry websites for guest posting and backlink opportunities.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| ` |
| }, |
| keywords: { |
| title: "Top Performing Keywords", |
| subtitle: "From Google Search Console - Last 30 days", |
| content: ` |
| <div class="mb-6"> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="font-medium text-gray-700">Keyword Performance</h4> |
| <div class="flex space-x-2"> |
| <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs">Impressions</button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">Clicks</button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">CTR</button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">Position</button> |
| </div> |
| </div> |
| <canvas id="keywordsChart" height="200"></canvas> |
| </div> |
| |
| <div class="grid grid-cols-1 gap-4"> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">Top 10 Keywords by Clicks</h4> |
| <div class="bg-white border border-gray-200 rounded-lg overflow-hidden"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Keyword</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Clicks</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Impressions</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">CTR</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Position</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr> |
| <td class="px-4 py-2 text-sm">seo best practices</td> |
| <td class="px-4 py-2 text-sm">1,245</td> |
| <td class="px-4 py-2 text-sm">8,762</td> |
| <td class="px-4 py-2 text-sm">14.2%</td> |
| <td class="px-4 py-2 text-sm">3.2</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-2 text-sm">content marketing</td> |
| <td class="px-4 py-2 text-sm">876</td> |
| <td class="px-4 py-2 text-sm">5,432</td> |
| <td class="px-4 py-2 text-sm">16.1%</td> |
| <td class="px-4 py-2 text-sm">4.5</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-2 text-sm">google analytics</td> |
| <td class="px-4 py-2 text-sm">765</td> |
| <td class="px-4 py-2 text-sm">9,123</td> |
| <td class="px-4 py-2 text-sm">8.4%</td> |
| <td class="px-4 py-2 text-sm">7.8</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-2 text-sm">website optimization</td> |
| <td class="px-4 py-2 text-sm">543</td> |
| <td class="px-4 py-2 text-sm">3,210</td> |
| <td class="px-4 py-2 text-sm">16.9%</td> |
| <td class="px-4 py-2 text-sm">5.1</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 bg-yellow-50 p-4 rounded-lg border border-yellow-200"> |
| <div class="flex items-center"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-yellow-600"></i> |
| </div> |
| <h4 class="font-medium">Optimization Opportunity</h4> |
| </div> |
| <p class="mt-2 text-sm text-gray-700">The keyword "google analytics" has high impressions but relatively low CTR. Consider updating your meta description to be more compelling and ensure the page fully answers search intent.</p> |
| </div> |
| ` |
| } |
| }; |
| |
| // Run a predefined prompt |
| function runPrompt(promptType) { |
| if (!currentClientId || !currentPropertyId) { |
| alert('Please select a client and property first'); |
| return; |
| } |
| |
| // In a real app, this would call your LLM API with client/property context |
| // For demo, we'll use sample data |
| const data = sampleData[promptType] || { |
| title: "Analysis: " + promptType, |
| subtitle: "For " + getCurrentPropertyName(), |
| content: `<div class="typewriter">Analyzing ${getCurrentPropertyName()} data about "${promptType}". This would show real insights from your Google Analytics and Search Console data in a production environment.</div>` |
| }; |
| |
| createDataWindow(data); |
| |
| // Scroll to the new window |
| setTimeout(() => { |
| document.querySelector('#windowsContainer').lastElementChild.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }, 100); |
| } |
| |
| // Get current property name |
| function getCurrentPropertyName() { |
| if (!currentClientId || !currentPropertyId) return 'selected property'; |
| |
| const client = clients.find(c => c.id === currentClientId); |
| if (!client) return 'selected property'; |
| |
| const property = client.properties.find(p => p.id === currentPropertyId); |
| return property ? property.name : 'selected property'; |
| } |
| |
| // Submit a custom query |
| function submitQuery() { |
| const query = document.getElementById('queryInput').value.trim(); |
| if (!query) return; |
| |
| if (!currentClientId || !currentPropertyId) { |
| alert('Please select a client and property first'); |
| return; |
| } |
| |
| // Clear input |
| document.getElementById('queryInput').value = ''; |
| |
| // Create a window with loading state |
| const loadingWindow = { |
| title: "Analyzing: " + query, |
| subtitle: "For " + getCurrentPropertyName(), |
| content: `<div class="flex items-center justify-center py-8"> |
| <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div> |
| </div>` |
| }; |
| |
| const windowElement = createDataWindow(loadingWindow); |
| |
| // Simulate API call delay |
| setTimeout(() => { |
| // In a real app, you'd get actual data from your LLM API |
| const response = { |
| title: "Analysis: " + query, |
| subtitle: "For " + getCurrentPropertyName(), |
| content: `<div class="mb-4"> |
| <p>Here's the analysis for: <strong>"${query}"</strong></p> |
| <p class="text-sm text-gray-500">Client: ${getCurrentClientName()} • Property: ${getCurrentPropertyName()}</p> |
| </div> |
| <div class="bg-indigo-50 p-4 rounded-lg"> |
| <p class="text-sm">In a production environment, this would show real data visualizations and insights from your Google Analytics and Search Console data based on your specific question.</p> |
| </div> |
| <div class="mt-4"> |
| <canvas id="dynamicChart" height="200"></canvas> |
| </div> |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> |
| <h4 class="font-medium mb-2">Key Findings</h4> |
| <ul class="list-disc pl-5 space-y-1 text-sm"> |
| <li>This would show actual findings from your data</li> |
| <li>Each insight would be relevant to your query</li> |
| <li>The LLM would generate actionable recommendations</li> |
| </ul> |
| </div> |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> |
| <h4 class="font-medium mb-2">Recommendations</h4> |
| <ul class="list-disc pl-5 space-y-1 text-sm"> |
| <li>Specific actions based on your data</li> |
| <li>Prioritized by potential impact</li> |
| <li>Tailored to your business goals</li> |
| </ul> |
| </div> |
| </div>` |
| }; |
| |
| // Update the window with actual content |
| updateWindowContent(windowElement, response); |
| |
| // Create charts (demo only) |
| setTimeout(() => { |
| createDemoChart('dynamicChart', 'line'); |
| }, 100); |
| }, 1500); |
| } |
| |
| // Get current client name |
| function getCurrentClientName() { |
| if (!currentClientId) return 'selected client'; |
| |
| const client = clients.find(c => c.id === currentClientId); |
| return client ? client.name : 'selected client'; |
| } |
| |
| // Create a new data window |
| function createDataWindow(data) { |
| const template = document.getElementById('sampleWindow'); |
| const clone = template.cloneNode(true); |
| clone.id = ''; |
| clone.classList.remove('hidden'); |
| |
| // Set title and subtitle |
| clone.querySelector('#windowTitle').textContent = data.title; |
| clone.querySelector('#windowSubtitle').textContent = data.subtitle; |
| |
| // Set content |
| const contentContainer = clone.querySelector('.window-content'); |
| contentContainer.innerHTML = data.content; |
| |
| // Add to container |
| document.getElementById('windowsContainer').appendChild(clone); |
| |
| // Create charts if they exist in the content |
| if (data.content.includes('summaryChart')) { |
| createDemoChart('summaryChart', 'bar'); |
| } |
| if (data.content.includes('trafficChart')) { |
| createDemoChart('trafficChart', 'doughnut'); |
| } |
| if (data.content.includes('keywordsChart')) { |
| createDemoChart('keywordsChart', 'bar'); |
| } |
| |
| return clone; |
| } |
| |
| // Update window content |
| function updateWindowContent(windowElement, data) { |
| windowElement.querySelector('#windowTitle').textContent = data.title; |
| windowElement.querySelector('#windowSubtitle').textContent = data.subtitle; |
| windowElement.querySelector('.window-content').innerHTML = data.content; |
| } |
| |
| // Create demo charts |
| function createDemoChart(chartId, type) { |
| const ctx = document.getElementById(chartId).getContext('2d'); |
| |
| let config = {}; |
| |
| if (type === 'bar') { |
| config = { |
| type: 'bar', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
| datasets: [{ |
| label: 'Current Period', |
| data: [1200, 1900, 1700, 2100, 2300, 2500], |
| backgroundColor: 'rgba(99, 102, 241, 0.6)', |
| borderColor: 'rgba(99, 102, 241, 1)', |
| borderWidth: 1 |
| }, { |
| label: 'Previous Period', |
| data: [1000, 1700, 1500, 1900, 2000, 2200], |
| backgroundColor: 'rgba(203, 213, 225, 0.6)', |
| borderColor: 'rgba(203, 213, 225, 1)', |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| tooltip: { |
| mode: 'index', |
| intersect: false, |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }; |
| } else if (type === 'doughnut') { |
| config = { |
| type: 'doughnut', |
| data: { |
| labels: ['Organic Search', 'Direct', 'Social', 'Referral', 'Email'], |
| datasets: [{ |
| data: [45, 25, 15, 10, 5], |
| backgroundColor: [ |
| 'rgba(99, 102, 241, 0.7)', |
| 'rgba(167, 139, 250, 0.7)', |
| 'rgba(74, 222, 128, 0.7)', |
| 'rgba(248, 113, 113, 0.7)', |
| 'rgba(251, 191, 36, 0.7)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'right', |
| } |
| } |
| } |
| }; |
| } else if (type === 'line') { |
| config = { |
| type: 'line', |
| data: { |
| labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], |
| datasets: [{ |
| label: 'Performance Metric', |
| data: [65, 59, 80, 81], |
| fill: false, |
| backgroundColor: 'rgba(99, 102, 241, 0.6)', |
| borderColor: 'rgba(99, 102, 241, 1)', |
| tension: 0.1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| scales: { |
| y: { |
| beginAtZero: false |
| } |
| } |
| } |
| }; |
| } |
| |
| new Chart(ctx, config); |
| } |
| |
| // Voice input function |
| function voiceInput() { |
| alert("In a real implementation, this would activate the browser's speech recognition API to capture your voice query."); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vikasrij/askanalytics2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
