141 lines
6.7 KiB
PHP
141 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Help - Activation Calendar Tool</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
.help-card {
|
|
background: var(--card-bg);
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
margin-bottom: 25px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.help-card h2 {
|
|
margin-top: 0;
|
|
color: var(--primary-color);
|
|
font-size: 1.4rem;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 10px;
|
|
}
|
|
.help-card ul {
|
|
padding-left: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.help-card li {
|
|
margin-bottom: 10px;
|
|
color: var(--text-color);
|
|
}
|
|
.help-card strong {
|
|
color: var(--text-color);
|
|
}
|
|
.example-box {
|
|
background: rgba(0,0,0,0.03);
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
font-family: monospace;
|
|
margin: 5px 0;
|
|
border-left: 3px solid var(--primary-color);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Left Sidebar (Simplified) -->
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h3>Navigation</h3>
|
|
</div>
|
|
<div class="sheet-list">
|
|
<a href="index.php" class="sheet-item" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 8px; transition: background 0.2s;">
|
|
<span class="sheet-icon">🏠</span>
|
|
<span class="sheet-name">Back to App</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<div class="container" style="max-width: 900px;">
|
|
<header style="margin-bottom: 30px;">
|
|
<h1>Help & Documentation</h1>
|
|
<p style="color: var(--text-secondary);">Guide to using the Activation Calendar Helper</p>
|
|
</header>
|
|
|
|
<div class="help-card">
|
|
<h2>🚀 Getting Started</h2>
|
|
<p>The Activation Calendar Helper is an AI-powered tool designed to help you manage marketing deliverables efficiently. You can create multiple sheets, add items using natural language, and export your data to CSV.</p>
|
|
</div>
|
|
|
|
<div class="help-card">
|
|
<h2>🤖 AI Commands</h2>
|
|
<p>You can interact with the AI using the command bar at the top. The AI understands context and can handle complex requests.</p>
|
|
|
|
<h3>Examples:</h3>
|
|
<ul>
|
|
<li>
|
|
<strong>Create items:</strong>
|
|
<div class="example-box">"Add 5 social media banners for UK due Nov 20"</div>
|
|
</li>
|
|
<li>
|
|
<strong>Update items:</strong>
|
|
<div class="example-box">"Set status of all items to Done"</div>
|
|
</li>
|
|
<li>
|
|
<strong>Complex requests:</strong>
|
|
<div class="example-box">"Create 3 video ads for Japan, 2 digital banners for France, and 1 print ad for Germany"</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p style="margin-top: 15px;"><strong>YOLO Mode 🚀:</strong> Toggle this switch to skip clarifying questions. The AI will make its best guess based on your input and history.</p>
|
|
</div>
|
|
|
|
<div class="help-card">
|
|
<h2>📂 Data Hierarchy</h2>
|
|
<p>The tool enforces a strict 3-level hierarchy to ensure data consistency. The dropdowns in the grid are dependent on each other:</p>
|
|
<ul>
|
|
<li><strong>1. Category:</strong> The top-level classification (e.g., Digital, Print, Video, POS).</li>
|
|
<li><strong>2. Media:</strong> Dependent on the selected Category.
|
|
<br><small>Example: If Category is 'Video', Media options include 'TVC', 'OLV', 'Broadcast'.</small>
|
|
</li>
|
|
<li><strong>3. Sub-media:</strong> Dependent on the selected Media.
|
|
<br><small>Example: If Media is 'Broadcast', Sub-media options include 'TVC 20s', 'TVC 30s'.</small>
|
|
</li>
|
|
</ul>
|
|
<p><em>Note: If you change a parent category, the child fields will be cleared to ensure validity.</em></p>
|
|
</div>
|
|
|
|
<div class="help-card">
|
|
<h2>📋 Sheet Management</h2>
|
|
<ul>
|
|
<li><strong>Create Sheet:</strong> Click the <strong>+</strong> button in the sidebar header.</li>
|
|
<li><strong>Switch Sheets:</strong> Click on any sheet name in the sidebar list.</li>
|
|
<li><strong>Rename/Duplicate/Delete:</strong> Hover over a sheet in the sidebar to reveal action buttons:
|
|
<ul>
|
|
<li>✏️ Rename</li>
|
|
<li>📄 Duplicate</li>
|
|
<li>🗑️ Delete</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Clear Sheet:</strong> Use the "Clear Sheet" button in the toolbar to remove all data from the current sheet. <strong>This also clears the AI conversation history.</strong></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-card">
|
|
<h2>🛠️ Troubleshooting</h2>
|
|
<ul>
|
|
<li><strong>AI not responding?</strong> Check your internet connection. If the issue persists, try refreshing the page.</li>
|
|
<li><strong>Dropdowns not working?</strong> Ensure you have selected a value for the parent column (e.g., select Category before Media).</li>
|
|
<li><strong>Export issues?</strong> The export feature generates a CSV file compatible with Excel and Google Sheets.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|