105 lines
4.8 KiB
PHP
105 lines
4.8 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>
|
|
<h1>Activation Calendar Helper</h1>
|
|
<p style="color: var(--text-secondary);">Manage your deliverables with natural language</p>
|
|
</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>
|
|
|
|
<script src="script.js"></script>
|
|
</div> <!-- /main-content -->
|
|
</div> <!-- /app-container -->
|
|
</body>
|
|
</html>
|