131 lines
6 KiB
PHP
131 lines
6 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>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">
|
||
|
||
<!-- Jspreadsheet & Jsuites -->
|
||
<script src="https://jsuites.net/v4/jsuites.js"></script>
|
||
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
|
||
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
|
||
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Left Sidebar -->
|
||
<div class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h3>📋 My Sheets</h3>
|
||
<button id="newSheetBtn" class="btn btn-primary" title="Create New Sheet">+</button>
|
||
</div>
|
||
<div id="sheetList" class="sheet-list">
|
||
<div class="loading-sheets">Loading sheets...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="main-content">
|
||
<div class="container">
|
||
<header style="display: flex; justify-content: space-between; align-items: center;">
|
||
<div>
|
||
<h1>Activation Calendar Helper</h1>
|
||
<p style="color: var(--text-secondary);">Manage your deliverables with natural language</p>
|
||
</div>
|
||
<a href="help.php" class="btn btn-secondary" style="text-decoration: none;">❓ Help</a>
|
||
</header>
|
||
|
||
<div class="command-bar-container">
|
||
<div class="input-group">
|
||
<input type="text" id="commandInput" placeholder="Type or speak a command..." autocomplete="off">
|
||
<button id="micBtn" class="btn btn-icon" title="Speak">🎤</button>
|
||
<button id="sendBtn" class="btn btn-primary">📤 Send</button>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
|
||
<label class="switch">
|
||
<input type="checkbox" id="yoloToggle">
|
||
<span class="slider round"></span>
|
||
</label>
|
||
<span style="font-weight: bold; color: var(--text-color);">YOLO Mode 🚀</span>
|
||
<span style="font-size: 0.8em; color: #888;">(Skip clarifying questions)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Starters -->
|
||
<div class="quick-starters">
|
||
<span style="color: var(--text-secondary); font-size: 0.85rem; margin-right: 10px;">Try:</span>
|
||
<button class="starter-chip" onclick="fillCommand('Add 5 social media banners for UK due Nov 20')">🇬🇧 5 UK Banners</button>
|
||
<button class="starter-chip" onclick="fillCommand('Create 3 video ads for Japan starting next Friday')">🇯🇵 3 Japan Videos</button>
|
||
<button class="starter-chip" onclick="fillCommand('Add 10 digital deliverables for France in French')">🇫🇷 10 French Digital</button>
|
||
<button class="starter-chip" onclick="fillCommand('Set status of all items to Done')">✅ Mark All Done</button>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<div class="stats" id="statsDisplay">
|
||
0 Deliverables
|
||
</div>
|
||
<div style="display: flex; gap: 10px;">
|
||
<button id="deleteSelectedBtn" class="btn btn-danger">Delete Selected</button>
|
||
<button id="clearSheetBtn" class="btn btn-danger">Clear Sheet</button>
|
||
<button id="saveBtn" class="btn btn-primary">Save Changes</button>
|
||
<button id="exportBtn" class="btn btn-secondary">Export CSV</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<div id="spreadsheet"></div>
|
||
</div>
|
||
|
||
<!-- AI Activity Log -->
|
||
<div class="ai-log">
|
||
<div class="ai-log-header" style="cursor: pointer;" onclick="document.getElementById('aiOutput').classList.toggle('collapsed'); this.querySelector('.collapse-icon').textContent = document.getElementById('aiOutput').classList.contains('collapsed') ? '▶' : '▼';">
|
||
<h3><span class="collapse-icon">▼</span> ✨ AI ACTIVITY LOG</h3>
|
||
<button id="clearLogBtn" class="btn btn-secondary" style="padding: 6px 12px; font-size: 0.85rem;" onclick="event.stopPropagation();">Clear Log</button>
|
||
</div>
|
||
<div id="aiOutput" class="ai-output">Waiting for command...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function fillCommand(text) {
|
||
const input = document.getElementById('commandInput');
|
||
input.value = text;
|
||
input.focus();
|
||
}
|
||
</script>
|
||
|
||
<div id="loadingOverlay">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
|
||
<!-- AI Question Modal -->
|
||
<div id="aiQuestionModal" class="modal-overlay">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>🤖 AI Needs Clarification</h3>
|
||
<button class="close-modal-btn" onclick="closeAiModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="aiQuestionText" class="ai-question-text"></p>
|
||
|
||
<div class="modal-input-group">
|
||
<input type="text" id="aiModalInput" placeholder="Type your answer..." autocomplete="off">
|
||
<button id="aiModalMicBtn" class="btn btn-icon" title="Speak">🎤</button>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button id="aiModalSendBtn" class="btn btn-primary">Send Answer</button>
|
||
<button id="aiModalYoloBtn" class="btn btn-secondary">🚀 Do what you think (YOLO)</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</div> <!-- /main-content -->
|
||
</div> <!-- /app-container -->
|
||
</body>
|
||
</html>
|